Custom Space Object Menu
The custom space menus, can be loaded from the file-system or they can be inserted through the API
Standard Declaration
The Custom Space Object Menu is declared with the API command:
// 6.9.18
// set SpaceObjectsCustomMenu location and json config file, flag true to display SpaceObject Menu, false to hide
cadviewer.cvjs_setSpaceObjectsCustomMenu( "/content/customInsertSpaceObjectMenu/", "cadviewercustomspacecommands.json", true);
The parameters sets the server side path on the CADViewer Server containing the Space Object symbols, the configuration JSON file to create the Icon menu, and a flag to set either on/off.
Standard location on the CADViewer Server is:
The custom Icon Menu configuration file is a JSON file , that contains general information about icon menu layout (number of menu pages) and for each Space Object item, it contains the information about the Space Object’s 1) Command Name, 2) Image location of the Space Object and 3) Tooltip message when highlighting.
The standard configuration file cadviewercustomspacecommands.json , contains the following settings and images in the sub-folder /images/.
{
"cadviewercustomspacecommands" : {
"totalpages" : 2,
"currentpage" : 1,
"pages" :[
[
{
"commandName" : "Danger",
"imageLocation" : "/images/danger.png",
"toolTip" : "Insert Danger object"
},
{
"commandName" : "Wi-Fi",
"imageLocation" : "/images/wifi_25.svg",
"toolTip" : "Insert Wi-Fi object "
}
,
{
"commandName" : "Heater",
"imageLocation" : "/images/HVAC_01.svg",
"toolTip" : "Insert Heater object "
},
{
"commandName" : "Fan",
"imageLocation" : "/images/HVAC_02.svg",
"toolTip" : "Insert Fan object "
},
{
"commandName" : "Thermo",
"imageLocation" : "/images/HVAC_03.svg",
"toolTip" : "Insert Thermometer object "
},
{
"commandName" : "Aircon",
"imageLocation" : "/images/HVAC_04.svg",
"toolTip" : "Insert AirCon object "
}
,
{
"commandName" : "Sensor",
"imageLocation" : "/images/device_54.svg",
"toolTip" : "Insert Sensor object "
}
,
{
"commandName" : "AssemblyPoint",
"imageLocation" : "/images/assembly_point.png",
"toolTip" : "Insert Assembly Point object "
}
,
{
"commandName" : "FireAlarmCallPoint",
"imageLocation" : "/images/fire_alarm_call_point.png",
"toolTip" : "Insert Fire Alarm Call Point object "
}
,
{
"commandName" : "FireExit",
"imageLocation" : "/images/fire_exit.png",
"toolTip" : "Insert Fire Exit object "
}
,
{
"commandName" : "FireExtinguisher",
"imageLocation" : "/images/fire_extinguisher.png",
"toolTip" : "Insert Fire Extinguisher object "
}
,
{
"commandName" : "RefugePoint",
"imageLocation" : "/images/refuge_point.png",
"toolTip" : "Insert Refuge Point object "
},
{
"commandName" : "Marker",
"imageLocation" : "/images/pin_02.svg",
"toolTip" : "Insert marker object "
}
]
,
[
{
"commandName" : "RefugePoint",
"imageLocation" : "/images/refuge_point.png",
"toolTip" : "Insert Refuge Point object "
},
{
"commandName" : "Marker",
"imageLocation" : "/images/pin_02.svg",
"toolTip" : "Insert marker object "
}
]
]
}
}
When loaded, the Custom Space Object Menu, contains two navigation buttons, and a button to dynamically change the Space Objects at insertion. The Space Objects defined from the configuration file will follow these three icon commands on each menu page.
The Adjust Space Object Command:
Please NOTE that upon insertion or move of a Space Object. CADViewer will automatically populate the parent field in the JSON Structure.
This is very useful for Asset Management applications to be able to place a Space Object into a logical contest. Please also see the call-back method cvjs_graphicalObjectOnChange() to capture changes in parent status.
API Insertion On Load
Use the API command cvjs_insertSpaceObjectsCustomMenu(mycustomObject) to insert a custom Space Object Menu through the API.
The image graphics that being loaded up, can be either a file reference or it can be a base64 encoded graphical object, the insertionType can be either base64 or file.
{
"commandName": "RefugePoint",
"imageLocation": "data:image/svg+xml;base64,PD94bWwgdmVyc2lv.......",
"insertType": "base64",
"toolTip": "My own base 64 embedded object"
},
{
"commandName": "Door",
"imageLocation": "/images/door_allstates01.svg",
"insertType": "file",
"toolTip": "Insert Door Object - with states"
}
The insertion should take place in the general callback cvjs_OnLoadEnd() when a drawing has been loaded:
Below is a basic implementation sample:
// below is a custom insert sample of: cadviewer.cvjs_insertSpaceObjectsCustomMenu(mycustomObject); // unblock in cvjs_OnLoadEnd()
var loadSpaceImage_Location = "data:image/svg+xml;base64, PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmlld0JveD0iLTExMDAgLTIwMCAyMjAwIDIyMDAiCiAgIGhlaWdodD0iMjIwMCIKICAgd2lkdGg9IjIyMDAiCiAgIHhtbDpzcGFjZT0icHJlc2VydmUiCiAgIGlkPSJzdmcyIgogICB2ZXJzaW9uPSIxLjEiPjxtZXRhZGF0YQogICAgIGlkPSJtZXRhZGF0YTgiPjxyZGY6UkRGPjxjYzpXb3JrCiAgICAgICAgIHJkZjphYm91dD0iIj48ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD48ZGM6dHlwZQogICAgICAgICAgIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiIC8+PC9jYzpXb3JrPjwvcmRmOlJERj48L21ldGFkYXRhPjxkZWZzCiAgICAgaWQ9ImRlZnM2IiAvPjxnCiAgICAgaWQ9ImcxMCI+PGcKICAgICAgIGlkPSJnMTIiPjxwYXRoCiAgICAgICAgIGlkPSJwYXRoNzIiCiAgICAgICAgIHN0eWxlPSJmaWxsOiNlMTFhMjI7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICAgIGQ9Im0gNjQ5LjE0LDAgYyAtNDMyLjc4LC05Mi4xOSAtODY1LjQ5LC05Mi4xOSAtMTI5OC4yOCwwIC0xMjIuMTIsMjYuMDEgLTIxNy4yOCwxMjEuMTcgLTI0My4zLDI0My4zIC05Mi4xOCw0MzIuNzggLTkyLjE4LDg2NS40OSAwLDEyOTguMjggMjYuMDIsMTIyLjEyIDEyMS4xOCwyMTcuMjggMjQzLjMsMjQzLjI5IDQzMi43OSw5Mi4xOSA4NjUuNSw5Mi4xOSAxMjk4LjI4LDAgMTIyLjEzLC0yNi4wMSAyMTcuMjksLTEyMS4xNyAyNDMuMywtMjQzLjI5IDkyLjE5LC00MzIuNzkgOTIuMTksLTg2NS41IDAsLTEyOTguMjggLTI2LjAxLC0xMjIuMTMgLTEyMS4xNywtMjE3LjI5IC0yNDMuMywtMjQzLjMiIC8+PHBhdGgKICAgICAgICAgaWQ9InBhdGg3NCIKICAgICAgICAgc3R5bGU9ImZpbGw6I2ZmZmZmZjtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6bm9uemVybztzdHJva2U6bm9uZSIKICAgICAgICAgZD0ibSAwLDE0MDcuMzQgYyAtMTguODgsMCAtMzQuMjUsLTE1LjM2IC0zNC4yNSwtMzQuMjUgdiAtNzI0LjggYyAwLC0yMC40MSAtMTAuNTksLTM5LjM2IC0yNy45OCwtNTAuMDUgLTM1LjY4LC0yMS45NSAtNTYuOTksLTU5LjkgLTU2Ljk5LC0xMDEuNDkgMCwtNjUuNzMgNTMuNDksLTExOS4yMiAxMTkuMjIsLTExOS4yMiA2NS43NCwwIDExOS4yMiw1My40OSAxMTkuMjIsMTE5LjIyIDAsNDEuNTkgLTIxLjMxLDc5LjU0IC01Ni45OSwxMDEuNDkgLTE3LjM4LDEwLjY5IC0yNy45NywyOS42NCAtMjcuOTcsNTAuMDUgdiA3MjQuOCBjIDAsMTguODkgLTE1LjM3LDM0LjI1IC0zNC4yNiwzNC4yNSB6IG0gMCwtMTE0Ny4zNCBjIC0xMzAuNTQsMCAtMjM2Ljc0LDEwNi4yMSAtMjM2Ljc0LDIzNi43NSAwLDcxLjE1IDMxLjIyLDEzNi44NSA4NC45NiwxODEuNTMgdiA2OTQuODEgYyAwLDgzLjcgNjguMDksMTUxLjc4IDE1MS43OCwxNTEuNzggODMuNjksMCAxNTEuNzgsLTY4LjA4IDE1MS43OCwtMTUxLjc4IHYgLTY5NC44MSBjIDUzLjc0LC00NC42OCA4NC45NywtMTEwLjM4IDg0Ljk3LC0xODEuNTMgMCwtMTMwLjU0IC0xMDYuMjEsLTIzNi43NSAtMjM2Ljc1LC0yMzYuNzUiIC8+PHBhdGgKICAgICAgICAgaWQ9InBhdGg3NiIKICAgICAgICAgc3R5bGU9ImZpbGw6I2ZmZmZmZjtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6bm9uemVybztzdHJva2U6bm9uZSIKICAgICAgICAgZD0ibSAzODguMTAsMTQ1Ni42NSBjIC0yNi41MSwwIC00OC4wOCwtMjEuNTcgLTQ4LjA4LC00OC4wOCAwLC0yNi41MSAyMS41NywtNDguMDggNDguMDgsLTQ4LjA4IDI2LjUxLDAgNDguMDgsMjEuNTcgNDguMDgsNDguMDggMCwyNi41MSAtMjEuNTcsNDguMDggLTQ4LjA4LDQ4LjA4IHogbSAwLC0yMTMuNjkgYyAtOTEuMzIsMCAtMTY1LjYxLDc0LjI5IC0xNjUuNjEsMTY1LjYxIDAsOTEuMzIgNzQuMjksMTY1LjYxIDE2NS42MSwxNjUuNjEgOTEuMzIsMCAxNjUuNjEsLTc0LjI5IDE2NS42MSwtMTY1LjYxIDAsLTkxLjMyIC03NC4yOSwtMTY1LjYxIC0xNjUuNjEsLTE2NS42MSIgLz4KPC9nPjwvZz48L3N2Zz4="
var mycustomObject =
{
"cadviewercustomspacecommands": {
"totalpages": 2,
"currentpage": 1,
"pages": [
[
{
"commandName": "RefugePoint",
"imageLocation": loadSpaceImage_Location,
"insertType": "base64",
"toolTip": "My own base 64 embedded object"
}
],
[
{
"commandName": "Door",
"imageLocation": "/images/door_allstates01.svg",
"insertType": "file",
"toolTip": "Insert Door Object - with states"
}
],
]
}
}
function cvjs_OnLoadEnd(){
// generic callback method, called when the drawing is loaded
// here you fill in your stuff, call DB, set up arrays, etc..
// this method MUST be retained as a dummy method! - if not implemeted -
// set maximum CADViewer canvas side - as component has been rendered at this point
cadviewer.cvjs_resizeWindow_position("floorPlan" );
cadviewer.cvjs_insertSpaceObjectsCustomMenu(mycustomObject);
}