CADViewer Technical Documentation, Installation Guide and Reference Samples Library

Custom Icon Menu & Commands

Please read the section Menu Layout and Language Settings first.

In CADViewer, there are built 20 placeholders for Icon menu commands that the application programmer can use to add their own interactive Menus.

The commands can be inserted into the XML configuration menu at a location of choice, and their corresponding pop-up text is set in sequential order at the tag.


Sample XML Structure
<cvjs>
    <iconmenu>
        <totalpages>1</totalpages>
        <startpage>1</startpage>
        <pages>
            <page>
            <command>cvjs_customCommand_01</command>
            <!-- ... -->
            <command>cvjs_customCommand_20</command>
            </page>
        </pages>
        <icons_per_row>0</icons_per_row>
        <icon_page_left_x>0</icon_page_left_x>
        <icon_page_left_y>0</icon_page_left_y>
        <customcommand>
            <tooltip>Commmand tooltip 1</tooltip>
            <!-- ... -->
            <tooltip>Commmand tooltip 20</tooltip>
        </customcommand>
    </iconmenu>
    <zoommenu>
        <location_left_x>0</location_left_x>
        <location_left_y>30</location_left_y>
    </zoommenu>
</cvjs>
Sample XML configuration file with custom icon menus
cvjs_setTopMenuXML("floorPlan", "cadviewer_menu_all_items_custom_commands.xml", "/cadviewer/app/cv/cv-pro/menu_config/");

Download XML configuration menu with custom commands: cadviewer_menu_all_items_custom_commands.xml.

Implementation of Custom Commands
Standard JavaScript class

In the standard JavaScript class download, the custom commands are implemented in:

/cadviewer/app/cv/cv-custom_commands/CADViewer_custom_commands.js

The icons are kept in the folder:

/cadviewer/app/images/singleIcons/cvjsIcon_customCommand_xx.png

The application programmer can freely change the content of the JavaScript methods and the icon files.

npm Installer for frame-works

When using Custom Commands inside a framework, each command needs to be declared and referenced as a callback method:

function cvjs_customCommand_01(){
	window.alert("Hello click! cvjs_customCommand_01");
};
// with an associated callback method declaration
        cadviewer.cvjs_setCallbackMethod("cvjs_customCommand_01", cvjs_customCommand_01);

The icons are kept as part of the CADViewer npm install structure

/node_modules/cadviewer/app/images/singleIcons/cvjsIcon_customCommand_xx.png

The custom command icons are initial blank, but application programmers can freely change their content.


Custom Icon Command

Last updated on 24 Mar 2022
Published on 22 Mar 2020