Smart.js IoT platform provides two components for building private smart device infrastructures:
- Firmware for the embedded devices, which is capable of harvesting device data and send it over the Internet to the cloud system
- A cloud system that collects data from a large number of devices, stores that data into the time-series database, provides remote device management capability and allows users to configure dashboards.
The way how users configure dashboards is the focus of this task. In other words, the task is to create a dashboard editor.
Factory room has a number of devices that are wirelessly connected with a dashboard.
Device A has a camera, which streams MJPG. Camera is pointing to the room, showing what is happening inside. Device B is a light control device. It allows to switch lights on and off. Device C is a air conditioning control, it allows to set a temperature. Device D is connected to the wall-mounted monitor, and allows to set a text displayed on a monitor.
The dashboard must show:
+--------------------------------------+---------------+
| | |
| temperature graph for the last 48h | |
| | |
+--------------------------------------+ |
| | room image |
| Lights on/off: [toggle_button] | |
| Set temperature: [ number ] | |
| Set monitor text: [ text ] | |
| | |
+--------------------------------------+---------------+
Rooms in 10 buildings are equipped with smart electricity and temperature meters. Each meter sends measurements every 10 seconds. The dashboard shows real-time graphs each building:
+----------------------------------+--------------------------------+
| | |
| temperature graph building 1: | total power consumption graph |
| max and average temperature | building 1 |
| | |
+----------------------------------+--------------------------------+
| | |
| temperature graph building 2: | total power consumption graph |
| max and average temperature | building 2 |
| | |
+----------------------------------+--------------------------------+
.... and so on for the rest of the buildings
-
Every dashboard needs to show an 'edit' link in the top right corner
-
When 'edit' link is clicked, a dashboard editor is activated
-
An editor should look similarly to http://www.layoutit.com/build
-
User should be able to create a new row, then split it horizontally or vertically, and resize horizontally into columns. That is how general layout is constructed.
-
Then, a number of pre-defined elements could be inserted into any column:
- a graph
- a block of text (HTML formatted)
- a toggle button with a label
- a text input with a label
-
For each each element, element-specific settings can be specified. Like, graph title and graph expression, etc.
-
An editor should be a single .html file with a single .js file
-
HTML should use http://semantic-ui.com/ framework, i.e. grid system is based on 16 columns
-
.js file must use jQuery. No other libraries are allowed.
-
An editor must provide a following API function(s): getLayout() - return JSON object that describes a layout and settings for each element.
-
No need to make an editor WYSIWYG. In edit more, however, a grid layout should reflect real layout reasonably well, like e.g. hubspot does it, see screenshot at https://goo.gl/jP20Ov
-
An exact description of controls, etc, is deliberately omitted, and left to the implementor's decision