CADViewer Technical Documentation, Installation Guide and Reference Samples Library

Custom Modals for Highlight

Standard Modal Controls

When setting up the Custom Modal for Space Objects Highlight and call-back methods, application programmers define a cvjsPopUpBody that contains the HTML content the modal displays.

The Highlight on objects can be controlled setting a style object for three modes: base, highlight and select. The variables are: cvjsRoomPolygonBaseAttributes, cvjsRoomPolygonHighlightAttributes and cvjsRoomPolygonSelectAttributes.

The initialization of CADViewer is called with the method cvjs_InitCADViewer_highLight_popUp_app using the highlight styles and pop-up body as arguments.

Below is the standard declaration of highlight colors and Modal to appear when clicking on a Space Object

var BaseAttributes = {
    fill: '#d8e1e3', //'#d8e1e3', // '#ffd7f4', //'#D3D3D3',   // #FFF   #ffd7f4
    "fill-opacity": "0.1",
    stroke: '#CCC',  //  #CCC
    'stroke-width': 0.5,
    'stroke-opacity': "0.7",
    'stroke-linejoin': 'round'
// Location Highlight Attribute    (no separation between location types)
var HighlightAttributes = {
    fill: '#a4d7f4',
    "fill-opacity": "0.8",
    stroke: '#a4d7f4',
    'stroke-width': 1,
    'stroke-opacity': "0.8"
// Location Select Attribute    (no separation between location types)
var SelectAttributes = {   // fill: '#5BBEF6',
    fill: '#5BBEF6',
    "fill-opacity": "0.8",
    stroke: '#5BBEF6',
    'stroke-width': 1,
    'stroke-opacity': "0.8"

var my_cvjsPopUpBody = "<div class=\'cvjs_modal_1\' id=\'my_own_clickmenu1()\'>Custom<br>Menu 1<br><i class=\'fa fa-undo\'></i></div>";
    my_cvjsPopUpBody += "<div class=\'cvjs_modal_1\' id=\'my_own_clickmenu2()\'>Custom<br>Menu 2<br><i class=\'fa fa-info-circle\'></i></div>";
    my_cvjsPopUpBody += "<div class=\'cvjs_modal_1\' id=\'cadviewer.cvjs_zoomHere()\'>Zoom<br>Here<br><i class=\'fa fa-search-plus\'></i></div>";

cadviewer.cvjs_InitCADViewer_highLight_popUp_app("floorPlan", "/cadviewer/app/", BaseAttributes, HighlightAttributes, SelectAttributes, my_cvjsPopUpBody );			

Last updated on 28 Feb 2022
Published on 12 Apr 2020