Example of dashboard
Example of IOTApp side
The widget layout consists of a table consisting of a variable number of columns.
The only columns that are always shown are device, which shows the name of the device and action which shows one or more clickable buttons.
Some columns are visible by default in the table, while others are hidden and are only shown if you click the + button in the left corner of each row.
The Device and Actions columns and the possibility to show which one depend on the query received from iotApp.
The widget also features a paging system to scroll through the lines, a menu for selecting the number of visible lines for each page and a search filter.
DeviceTable widgets are created via an IOTApp.
The widget needs an input to show the data.
The content of the widget can be changed at any time by inserting another json and running it. The table updates automatically.
The json contains the following elements:
"actions":[ "pin" ],
Query the actual API to obtain the list of devices and the corresponding metadata.
The query consists of a filter followed by filters.
- Prefix: https://www.snap4city.org/superservicemap/api/v1/iot-search/
- selection: This mandatory filter is used to define the area within which to extract the devices. It can be composed of four coordinates separated by a semicolon that form a Bounding Box (Example1), or forming a circle with a single coordinate in the center and a radius defined by the maxDists filter (Example2).
- model: IotModel of the devices.
- valueFilters: Results can be filtered by the values of some metadata. For example, you can only receive devices with vehicleFlow> 10. More than one filter can be inserted, divided by semicolons.
- serviceUri: Through this filter it is possible to restrict the number of query results to a set of devices for which a list of serviceUri is provided. (Example2)
The field used to set the default sort order of the table by a column. The user can change the order of the table in the dashboard by clicking on a column header.
Array of icons for the "Action" buttons, they can be "pin" or correspond to the url of an image.
For example, in "Example 1", action consists only of an element of value "pin" which corresponds to the pointer icon on the map and is a default image. "In example 2" there are two elements, in addition to "pin" there is a url corresponding to the png image in a cog.
Array of columns tables displayed by default. It represents a subset of the table columns. The others are hidden and viewable by clicking on the expand icon (represented by a "+" sign) in each line
These messages are triggered whenever one of the following operations is performed:
- A button in the "action" column is clicked.
- The pagination of the table is scrolled.
- Click on the + button to show or hide the columns of each row.
- Change the number of visible lines for each page.
- Change the sort order of the table by clicking on a column header.
The message sent to the iotApp consists of a json with these keys:
- Device: device name of the row (in some actions such as the change of pages is empty)
- Query: query of the table
- Action: type of action.
Example of messages