#Measure an angle in autodesk viewer code#

I use a minimal server that connects node.js to MySQL providing some simple CRUD endpoints. IвЂ™ll leave that as an exercise to the reader. With more time, I would like to add вЂrefreshвЂ™ to avoid a browser refresh when I save new markups (see the video at 1:34mins), and a вЂhighlightвЂ™ event, to change the color of a markup when I hover over an area-markup list item. With a corresponding listener in my extension here: _viewer.addEventListener('removeData', this.onRemoveMeasurementBinded) Vue.js event-dispatchВ code here: cardClick: function (item) )) When I un-tick on aВ markup-item (theВ list on the left),В I send aВ removeData event to my extension code:

To connect Forge Viewer extension to Vue.js, I use twoВ signals - вЂrestoreJsonвЂ™ and вЂdeleteMarkupвЂ™ via dispatch events. Vue.js makes doing вЂTo DoвЂ™ lists in a very clean way, compared to jQuery.

#Measure an angle in autodesk viewer code#

Vue.jsВ -В In addition to the extension code, my front-end code connects Forge Viewer to Vue.js/bootstrap4 in a minimal way, without a builder like webpack. IВ only modify one file, measureTool.js which overwrites the existing code with our custom code (see line75 index.html ), so this techniqueВ is 'unsupported'. Note: This extension comes pre-build with Viewer v3.3. See Philippe's blog post for more details onВ the options available. This.changeMeasurementType(avem.MEASUREMENT_AREA) I set a bunch of defaults for this particular use-case, where I need theВ units to display as 'decimal-ft', noВ decimal places, and defaultВ the measurement tool to 'area' in the code here. The markup extension conveniently calculates the square foot and provides the information in the ' currentMeasurement.area' json object. The main trick is re-instantiating various sub-objects like threejs vector3 and Forge.picking etc. The harder part is loadJson(), which deserializes our JSON string into our Forge Viewer objects. We need to serialize the вЂmeasurementsListвЂ™ object to JSON. The two important methods are вЂ¦ getJson() and loadJson() Once I have the JSON, I can easily send it to my database for storage and retrieval. The code below adds a few methods to the 2D вЂmeasureвЂ™ extension so I can serialize and deserialize area-measurements to JSON. ThereвЂ™s no API to save or restore area-measurements and we need that to save it to our mySQL databaseвЂ¦. It ticks all the boxes, except forвЂ¦ persistence/serialization. This sounded like a job for вЂarea measureвЂ™ tool. For example, there is no floating label with вЂsquare feetвЂ™, no way to calculate area, or total area of a group of measurements, no way to hide and show individual markups, drag existing polyline points around or persist the markup behavior state (more on that below). The markup tool API, while great for grabbing static SVG, is missing a few key features I needed. Which do we choose.В The 'markup tool'В or the 'measurement tool' ? Forge-Viewer + MarkupВ Extensions:ДЇorge Viewer has two build-in extensions that could do the job, but they are slightly different.

But first, letвЂ™s start with 'how to persist markup data' from the forge viewer. I can turn markup-areas on and off like photoshop вЂlayersвЂ™ (see tick boxes on the left), and tabulate вЂtotal areaвЂ™. Using Vue.js and the вЂToDoвЂ™ example, I can make a quick UI to control these filters, combined with the Forge Viewer for handling the DWG and markups. markups associated with a DWG file version This keeps things in sync between theВ browser and database, to doing more powerful database queries likeвЂ¦ I can do this in a collaborative way, if I could only save the markup data from Forge Viewer and serialize it to a mySQL server.ДЇrom the diagram above,В the Forge Viewer (on the left) hasВ APIsВ that allow me to associate each individual 'blue' markup areas, whichВ I create in the browser, to an ID taken from the mySQL database (on the right, see MarkupВ table IDs). With AutodeskвЂ™s Forge Viewer, I could view a DWG file in a browser and use the built in вЂmeasureToolвЂ™ and вЂmarkup ToolвЂ™ to create new area-measurements. (note: click measurement tool before you start) Could I move this workflow to the cloud ? Finally save and email a DWF file to others in the organization. The desktop way, was via installing вЂAutodesk Design ReviewвЂ™, then loading the DWG file, perform the area-measurement and markup. Follow recently came across a customer wanting to measure Floor spaces in a collaborative way.