Introduction - CADViewer JS Icon InterfaceToggle Menu
In the standard setup, icon modals are provided on both desktop and touch devices. All methods for zoom, pinch, layers, redlines on the CADViewer JS canvas are controlled through the API . Developers can therefore freely exchange these icon interfaces with their own or simply control the canvas functionality through their own application.
Standard Icon Layout on Desktop
The standard Icon Menu on desktop consists of two separate desks. An upper icon desk that contains user template for local save, print, zoom functions, layer list command and navigation through a multipage drawing. The lower icon desk contains redlines/annotation handling, load and save of redlines as well as commands for freehand redlining, delete freehand redlining and creation and handling of Sticky Notes.
The API methods used are defined in the image map: <map name="cvjsToolbarMap_1">.
Download any of the samples from the CADViewer JS API and look at the source code in the /samples/ folder.
Standard Icon Layout on Devices
The standard Icon Menu on a device consists of a zoom extents button, zoom in/out, zoom window and multipage navigation buttons. Pan and direct zoom are done via touch gestures.
The API methods used are defined in the image map: <map name="PanZoomMap" >.
Download any of the samples from the CADViewer JS API and look at the source code in the /samples/ folder.
Layer List Command
The Layer List command activates a Modal containing the full list of layers and a number of controls.
Layer List Modal
The Layer List Modal can turn layers on/off and do sorting as well as interactive search on layers. On each layer, the layer status will toggle by clicking on the ON/OFF indicator.
Redlines
The redline interface consists of load/save icons for redlines, freehand draw and delete of redlines, all which can be run online and downloaded from the sample Redlines. The redline text command is implemented as a Sticky Note that is described in more detail in the following section.
The API methods used for redlines are defined in the image map: <map name="cvjsToolbarMap_1">.
Download the sample Redlines and look at the source code in the /samples/ folder.
Sticky Note Command
Sticky Note Operation
First click the T redline icon symbol, then click on the canvas and add a stickynote (#4):
Click on the Sticky Note to open the interface.
On the top bar you have 4 choices, move the Note, Add Text, Delete Note or Minimize Note. Click the second icon "Add Text", now the text box appear in edit mode "green icon", and red icon for "cancel".
Enter text and then go to the green icon.
The text is now entered.
And the note can be minimized again clicking on the "X" icon.
Sticky Note Functional Interface
Developers can externally control the user name of the Sticky Note, the user id associated with each of the Sticky Notes as well as the creation time of the note. This can be used to programatically control apperance and access rights.
<script type="text/javascript"> cvjs_setCurrentStickyNoteValues_NameUserIdDate(currentStickyNote_name, currentStickyNote_userid, currentStickyNote_date); </script>