Deep Dive Image Explorer with Values
- Pan/Tilt/Zoom High Resolution Image
- Add Values & Links
- Show Points Values
- Values update in Real-time
- Works in Workbench and Modern Browser
Deep Dive Image Explorer with Values for Niagara N4 is a tool designed to enhance high-resolution image analysis. By adding point values at varying zoom levels, it provides a flexible solution for displaying detailed information. This is particularly useful when working with intricate floor plans or images where labels might become cluttered. The Deep Dive Image Explorer alleviates this issue by allowing users to reveal point values at specific zoom levels, ensuring clarity and precision. Before you start, update licenses/certs, copy the .jar file to your modules directory. Restart the station and Workbench.
Are you looking for a cost effective way to manage and visualize data for all your customers? Why not have a look at View Builder?
Before you start. Download the modules from our portal (see your order confirmation, which also explains licensing). Update licenses and certs. Copy the modules file to your modules directory. Restart BOTH station and Workbench.
1. Copy the deepDiveImageExplorer-ux.jar file to your modules directory.
2. Open the module from your palette file.
3. Drag and drop the widget from the palette onto your px view.
The widget has a number of configurable properties that can be used to modify look, feel, and functionality. Change the properties as required:
Image Url:
The URL of the image shown on the widget. Must reside on the station or hosted elsewhere with a url format. e.g http://localhost/ord/file:^image.png
Show Info Window:
This will show the mouse x/y position for setting up labels/points.
Figuring out the X/Y coordinates of the label:
Make sure showInfoWindow property is set to true. Then click on the HOME button to reset the image zoom. Move the mouse to where you think the top-left corner of label should be positioned.
Change Status Colors:
When true it will change the text color to the status of the point.
Image Config File:
This is a json config file residing in your stations shared folder which contains points, links, etc.
See below for full example. e.g. file:^deepZoom/deepzoom.txt
CSS Override:
This is where you can enter css styling of your choice. You must remove line breaks from the value. For example you could enter the following to create a transparent background when using an hx profile.
body { background: transparent; } .hx { background: transparent !important; } .hxPx { background:
transparent !important; } .window-bg { background: transparent !important; }
The objects config is in JSON format. You can customise as needed. Special characters should be avoided. Heres a sample config to help you get started. Download
{
"objects": [
{
"id": "landing",
"minZoomLevel": 0,
"maxZoomLevel": 1.2,
"x": 1619,
"y": 1201,
"ord": "station:|slot:/Drivers/Equipment/AHUS/AHU1/CHWValve",
"fontSize": "18px",
"fontColor": "#333333",
"showAtStartup": true,
"link": "/ord/station:|slot:/Drivers/Graphics/AHUs",
"linkTarget": "blank"
},
{
"id": "landing1",
"minZoomLevel": 0,
"maxZoomLevel": 14,
"x": 751,
"y": 1900,
"ord": "station:|slot:/Drivers/Equipment/AHUS/AHU1/SupplyFanStart_Stop",
"fontSize": "18px",
"fontColor": "#333333",
"showAtStartup": true,
"link": "/ord/station:|slot:/Drivers/Equipment/AHUS/AHU1/SupplyFanStart_Stop",
"linkTarget": "parent"
},
{
"id": "landing2",
"minZoomLevel": 0,
"maxZoomLevel": 14,
"x": 2090,
"y": 445,
"ord": "station:|slot:/Drivers/Equipment/AHUS/AHU1/Status",
"fontSize": "18px",
"fontColor": "#333333",
"showAtStartup": true,
"link": "/ord/station:|slot:/Drivers/Equipment/AHUS/AHU1/Status",
"linkTarget": "self"
},
{
"id": "alarm2",
"minZoomLevel": 0,
"maxZoomLevel": 14,
"x": 2105,
"y": 1640,
"ord": "station:|slot:/Drivers/Equipment/AHUS/AHU1/CHWCoilTemperature",
"fontSize": "16px",
"fontColor": "#333333",
"showAtStartup": true,
"link": "",
"linkTarget": ""
},
{
"id": "Meeting$20Room$201",
"minZoomLevel": 2.5,
"maxZoomLevel": 14,
"x": 710,
"y": 190,
"ord": "station:|slot:/Drivers/Graphics/Floor$20Plans/$31st$20Floor/Meeting$20Room$201",
"fontSize": "18px",
"fontColor": "#333333",
"showAtStartup": false,
"link": "",
"linkTarget": ""
},
{
"id": "office2",
"minZoomLevel": 2.5,
"maxZoomLevel": 14,
"x": 900,
"y": 173,
"ord": "station:|slot:/Drivers/Graphics/Floor$20Plans/$31st$20Floor/Office$202",
"fontSize": "18px",
"fontColor": "#333333",
"showAtStartup": false,
"link": "",
"linkTarget": ""
},
{
"id": "office3",
"minZoomLevel": 1.8,
"maxZoomLevel": 14,
"x": 1277,
"y": 466,
"ord": "station:|slot:/Drivers/Graphics/Floor$20Plans/$31st$20Floor/Office$203",
"fontSize": "18px",
"fontColor": "#333333",
"showAtStartup": false,
"link": "",
"linkTarget": ""
},
{
"id": "office4",
"minZoomLevel": 2.5,
"maxZoomLevel": 14,
"x": 1111,
"y": 171,
"ord": "station:|slot:/Drivers/Graphics/Floor$20Plans/$31st$20Floor/Office$204",
"fontSize": "18px",
"fontColor": "#333333",
"showAtStartup": false,
"link": "",
"linkTarget": ""
},
{
"id": "office6",
"minZoomLevel": 2.5,
"maxZoomLevel": 14,
"x": 1300,
"y": 171,
"ord": "station:|slot:/Drivers/Graphics/Floor$20Plans/$31st$20Floor/Office$206",
"fontSize": "18px",
"fontColor": "#333333",
"showAtStartup": false,
"link": "",
"linkTarget": ""
},
{
"id": "office7",
"minZoomLevel": 2.5,
"maxZoomLevel": 14,
"x": 1530,
"y": 171,
"ord": "station:|slot:/Drivers/Graphics/Floor$20Plans/$31st$20Floor/Office$207",
"fontSize": "18px",
"fontColor": "#333333",
"showAtStartup": false,
"link": "",
"linkTarget": ""
},
{
"id": "office8",
"minZoomLevel": 2.5,
"maxZoomLevel": 14,
"x": 991,
"y": 388,
"ord": "station:|slot:/Drivers/Graphics/Floor$20Plans/$31st$20Floor/Office$208",
"fontSize": "18px",
"fontColor": "#333333",
"showAtStartup": false,
"link": "",
"linkTarget": ""
},
{
"id": "office9",
"minZoomLevel": 2.5,
"maxZoomLevel": 14,
"x": 988,
"y": 523,
"ord": "station:|slot:/Drivers/Graphics/Floor$20Plans/$31st$20Floor/Office$209",
"fontSize": "18px",
"fontColor": "#333333",
"showAtStartup": false,
"link": "",
"linkTarget": ""
},
{
"id": "office10",
"minZoomLevel": 2.5,
"maxZoomLevel": 14,
"x": 646,
"y": 590,
"ord": "station:|slot:/Drivers/Graphics/Floor$20Plans/$31st$20Floor/Office$2010",
"fontSize": "16px",
"fontColor": "#333333",
"showAtStartup": false,
"link": "",
"linkTarget": ""
},
{
"id": "office11",
"minZoomLevel": 1.8,
"maxZoomLevel": 14,
"x": 1000,
"y": 743,
"ord": "station:|slot:/Drivers/Graphics/Floor$20Plans/$31st$20Floor/Office$2011",
"fontSize": "18px",
"fontColor": "#333333",
"showAtStartup": false,
"link": "/ord/station:|slot:/Drivers/Graphics/Floor$20Plans/$31st$20Floor/Office$2011",
"linkTarget": "blank"
}
]
}
JSON Values Explained:
id- each item needs to have a unique id number.
minZoomLevel- this is the min zoom level for the point value to appear. Possible values 0-14. Say you set this to 2, when the image is zoomed in, the point will show up when the image is at zoom level 2
maxZoomLevel- this is the max zoom level for the point value to appear. Possible values 0-14. Say you have set this to 1.5, and min to 0, then it will be hidden after zoom level 1.5.
x- the x position of the point on the image. Set the show info window to true, so when setting up the image, you can determine its x/y position.
x- the y position of the point on the image. Set the show info window to true, so when setting up the image, you can determine its x/y position.
ord - ord reference to point
fontSize, fontColor - styling of the point value
showAtStartup - the label will show up when the image loads. Also set minZoomLevel to 0
link- link to when clicked on point. Must be web format: /ord/station:|slot:/Drivers/Graphics/AHUs. Leave blank for no link.
linkTarget- link to target window. Default is parent. Possible values: blank, self, parent, or top.
JSON Editing
To help build your menu configuration use an online JSON editor like:
https://jsoneditoronline.org/
Build Your Own dashboards and win Projects by showing data that increase value and reduces expenditure.
