Device types are used to group devices according to their type, e. g. Sensors, Cameras, etc. Each device type can also have its Live Elements JSON and Widget JSON defined. These JSONs are used to display additional data and information in the Monitoring and on the Map. Additionally, it is also possible to add an Online and Offline icon to each device type. The file has to be coded in Base64.
Live Elements JSON
Live Elements JSON is used to:
- display device data in more user-friendly format
- display additional information
- add input elements which can be used to control the device from the IoT Console.
The JSON has following structure:
Error rendering macro 'code': Invalid value specified for parameter 'com.atlassian.confluence.ext.code.render.InvalidValueException'{"name":"Live data","elements":[Array of JSON objects]}
Following elements (objects can be used:
Element | Description | Example |
---|---|---|
HTML | Used to display HTML content | {"id":"el_4","label":"HTML element","value":"<h2>This is html element</h2>","type":"HTML"} |
LINK | Used to display hypertext link | {"id":"el_3","label":"Link element","value":"http://www.belladati.com","type":"LINK"} |
INPUT_SELECT | Used to display drop-down menu. Key "value" is the pre-selected item. | {"id":"el_245","label":"Select element","values":["first value","second value","third value"],"value":"first value","type":"INPUT_SELECT"} |
INPUT_RADIO | Allows the user to choose only one of a predefined set of mutually exclusive options. Key "value" is the pre-selected item. | {"id":"el_245","label":"Radio element","values":["first value","second value","third value"],"value":"first value","type":"INPUT_RADIO"} |
INPUT_TEXT | Used to display text input. Key "value" is the default text. | {"id":"el_5","label":"Text element","value":"aaa","type":"INPUT_TEXT"} |
INPUT_TEXTAREA | Used to display text area input. Key "value" is the default text. | {"id":"el_6","label":"Text element","value":"aaa","type":"INPUT_TEXTAREA"} |
INPUT_DATE | Used to display date picker. | {"id":"el_7","label":"Date element","value":null,"type":"INPUT_DATE"} |
INPUT_NUMBER | Used to display number input. | {"id":"el_8","label":"Number element","value":null,"type":"INPUT_NUMBER"} |
INPUT_BOOLEAN | Used to display toggle button (enabled/disabled) | {"id":"el_9","label":"Boolean element","value":null,"type":"INPUT_BOOLEAN"} |
INPUT_PASSWORD | Used to display password input | {"id":"el_10","label":"Password element","value":null,"type":"INPUT_PASSWORD"} |
INPUT_SUBMIT | Used to display submit button | {"id":"el_11","label":"submit","value":null,"type":"INPUT_SUBMIT"} |
Please note that after changing the pre-selected value, it is necessary to sign-out and sign-in again to see the changes.
It is also possible to display the device data by using the code ${nameOfTheJSONElement}.
Example of complete JSON
{"name":"Live data","elements":[{"id":"el_1","label":"HTML element","value":"<p style='text-align:center'>Current humidity: ${humidity}</p>","type":"HTML"},{"id":"el_2","label":"Select element","values":["first value","second value","third value"],"value":"third value","type":"INPUT_SELECT"},{"id":"el_3","label":"Boolean element","value":null,"type":"INPUT_BOOLEAN"},{"id":"el_4","label":"submit","value":null,"type":"INPUT_SUBMIT"}]}
Widget JSON
WIdget JSON is displayed next to the map. It can be used to display various HTML content, such as text, links, iFrames or live video feeds from cameras.
The structure of the JSON is the same as for Live Elements JSON, with one exception: the INPUT objects are not allowed.
Examples of complete JSON
iFrame from BellaDati
{"name":"Live data xyz","elements":[{"id":"el_4","label":"HTML element","value":"<iframe scrolling='no' style='border: 0px solid silver;width:220px;height:300px;' src='https://service-test.belladati.com/en/bi/report/view/embedded/271728d8e20981b26e623c09389509cc?hideHeader=true&hideLink=true&css=.cleverTitleCell{display: none;height:0px};iframe{overflow:hidden;}'></iframe>","type":"HTML"}]}
Live camera feed
{"name":"Live data","elements":[{"id":"el_4","label":"HTML element","value":"<iframe width='200' height='112' src='https://www.youtube.com/embed/CwriDd8STdI' frameborder='0' allow='accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe>","type":"HTML"}]}
Icons
Icons are used to display devices on the map. Each device type can have a different icon. It is also possible to use a different icon for online devices and offline devices. The icons are encoded with Base64.
Example on Base64 icon
iVBORw0KGgoAAAANSUhEUgAAABwAAAAoCAYAAADt5povAAABW0lEQVRYhe2WP2rDMBjFPxVKUSat7hF8hIzZgm+Rds3ka9i5kXOMjM5UJ0tsN1AcUpzXoSDkf6pcy5seCGRJ6KeH9D5M5DSnAKwBZLCnDMBaZbAWMCMiz7KPE2PsdQgIy7BfCGOS8zQHQCcHdED7wHyxkO0Wx5357/2+sWYy8GWzkf0qjgll2Zi/7Xa9a43UV5vqNMWFc9mqKJJz9yRpzNVp2lvfRgEBoIoiuWnueXgUBQDgGgS9B5kMfBQFcs9rbK66Uw9hBdjn0tRdG2hcvFGWVPp+59EwIUgcDsSEGDTyr+LNhCAehp1xHoZaWFujgl8fj0ZjxtLdgxoP9QFdOMc9SYzv0Njh13Yr+zwM6Xm1kt9q+K047ItAO/Q6l6OBQxFQx69BYAeoC7ipy1HAwve1AVddfi6X04Am5cvEpcpwv4kO6IB/Ak8zMM464Ht7wUR9ENGbxf2cuvoB0897a147jHUAAAAASUVORK5CYII=