Creating Markups with Web SDK

Alexey Soloshenko

July 11, 2019
Tags: Web SDK

Markups allow you to make temporary redlines and remarks directly in a document. Here are some examples of drawings that contain markups using Web SDK:

Web SDKWeb SDKWeb SDK

 

You can use the Markups toolbar in ODA Web Viewer to create different type of markups. For details about running ODA Web Viewer, see the online documentation (login required). You can create these types of markups in ODA Web Viewer:

  • Rectangle markup
  • Circle markup
  • Freehand markup
  • Text markup
picture4picture5

Then use the two tools for saving and loading markup views:

  • Save markup — Saves the current view with markups that you’ve drawn.
  • Load markup — Loads a view that contains markups.

To save markups that you’ve drawn:

  1. Click Save markup.save markup

     

  2. Enter the name of the saved markup view, then click Save.

To load saved views that contain markups:

  1. Click Load markup.load markup

     

  2. Select the view to load, then click Load.

How it works in the source code

Create markup model:
const model      = this.m_viewer.getMarkupModel(); //returns a markup model, if there is one, or it creates this model

Save markup model:
const viewer     = this.webModule.getViewer();
const markupCtrl = viewer.getMarkupController(); //getting a controller object to interact with markups
markupCtrl.save(markupName); //saving markup object on client, the markup name must be passed to the function
markupCtrl.sendSaveRequest(markupName); //send request and save markup on backend, the markup name must be passed to the function


Get list of markups:
const viewer     = this.webModule.getViewer();
const markupCtrl = viewer.getMarkupController();
const saved      = markupCtrl.getSaved(); //returns the list of markups that have been saved

Load markup model:
const viewer     = this.webModule.getViewer();
const markupCtrl = viewer.getMarkupController();
markupCtrl.load(markupName); //the controller loads the desired markup by name that was previously saved

Clear markup:
const viewer     = this.webModule.getViewer();
const markupCtrl = viewer.getMarkupController();
markupCtrl.clear(); //hides all drawn models, even those that have been saved