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

The XML configuration file is loaded up server side with the following call:

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.

Custom command Image location

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

CADViewer 7

The location of the custom commands are in:

/assets/cadviewer/app/images/singleIcons/svg/

folder, they are named base200x200_01.svg through base200_200_20.svg .

Application programmers can exchange them freely.

CADViewer 6

The location of the custom commands are in

/assets/cadviewer/app/images/singleIcons/

folder, they are named bcvjsIcon_customCommand_01.png through cvjsIcon_customCommand_20.png .

Application programmers can exchange them freely.

The custome command are invoked when clicking on the icon image.

Implementation of Custom Commands

Top level Standard JavaScript class

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

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

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 (ReactJS, Angular, VueJS), 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 application programmer fully control the content of the cvjs_customCommand_XX methods.