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:

ElementDescriptionExample
HTMLUsed to display HTML content
{"id":"el_4","label":"HTML element","value":"<h2>This is html element</h2>","type":"HTML"}
LINKUsed to display hypertext link
{"id":"el_3","label":"Link element","value":"http://www.belladati.com","type":"LINK"}
INPUT_SELECTUsed 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_RADIOAllows 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_TEXTUsed to display text input. Key "value" is the default text.
{"id":"el_5","label":"Text element","value":"aaa","type":"INPUT_TEXT"}
INPUT_TEXTAREAUsed to display text area input. Key "value" is the default text.
{"id":"el_6","label":"Text element","value":"aaa","type":"INPUT_TEXTAREA"}
INPUT_DATEUsed to display date picker.
{"id":"el_7","label":"Date element","value":null,"type":"INPUT_DATE"}
INPUT_NUMBERUsed to display number input.
{"id":"el_8","label":"Number element","value":null,"type":"INPUT_NUMBER"}
INPUT_BOOLEANUsed to display toggle button (enabled/disabled)
{"id":"el_9","label":"Boolean element","value":null,"type":"INPUT_BOOLEAN"}
INPUT_PASSWORDUsed to display password input{"id":"el_10","label":"Password element","value":null,"type":"INPUT_PASSWORD"}
INPUT_SUBMITUsed 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=




  • No labels