Widgets are visual real-time representations of the status of the data you receive from your device.

Add Widgets

To add a widget:

Click button
A new dialog will open with different types of widgets: Actuators, Cards, Charts, Gauges, Live messages, Maps, Semantic groups and Status

Select one, depending on the data you would like to be displayed
In a new dialog choose device/feed you would like to see on that widget
The widget and the data will appear on your dashboard

Actuators

Actuator displays current state and value of a switch, slider or string and enables you to actuate a device by switching it on and off or by setting desired values on the widget itself.

Switch

Switch actuator enables you to control devices by switching them on and off.

Click on a switch glyph in a switch actuator widget
An expanded dialog will open
Switch device on/off

Slider

This actuator enables you to change the value of a parameter by moving an indicator on a slider.

Click on a slider glyph in a slider actuator widget
An expanded dialog will open
Choose the value of a parameter by moving an indicator on a slider

String

String actuator enables you to send an actuation value to a device.

Managing string Actuator

string actuator widget displays a text field, the name of the strong actuator, date and time of the last change.

To send a command to the device:

Click on the text field in the widget

Type your command in an isolated text field pop-up

Click Save

You can use XML, string, JSON or even plain text to type the command. Maximum size of the actuation message is 2048 characters.

If the process of actuation has been successfully completed, a message Changes saved will be displayed at the bottom right corner of the screen.

String actuator has three statuses: ready, busy and error
If the actuator is in the ready status, you can send a command (type the text in the text field)
After you type the command and click Save, the actuator’s status will be busy during the process of sending and executing the command
After the actuation process is finished, the status will go back to ready

If the actuation process has not been successfully completed, the error status will be displayed on the widget and the device will not be able to receive any other actuation signal from the Platform until the status is set to ready again.

Note: Actuator widget displays current state and the value of the actuator; if one operation is in progress, the reading of another one will not be displayed until the previous operation has been completed.

Cards

Cards widget displays the latest reading of one feed of one device.

To visualise data with card widget:

Choose the feed by selecting the radio button (circular-shaped button) on the right side
Click Save

Note: A click on a widget opens a new dialog with more details about the latest readings of the feed.

Charts

Charts widget displays live reading(s) in form of a chart.

To visualise data with charts widget:

Choose it and click on the Select button
It will open a drop-down menu with a list of devices and feeds (e.g. office: pressure, humidity, temperature)

You can choose feeds from multiple devices (e.g. device 1: temperature 1; device 2: temperature 2…). However, they need to belong to the same reading type (e.g. temperature reading type). Chart can display readings of a maximum of 3 feeds.

Choose the feed(s)
Click Save

Gauges

Gauges widget is a visual representation of user-defined quality ranges of numeric feed values. Each value range can be presented with a different colour.

To visualise data with gauge widget:

Click Gauges button in Choose widget pop-up
You will get the list of all the device(s) and semantic groups you have previously made
Choose feed with value you would like to be displayed (eg. Temperature)
New Widget settings window will pop up
A range of default minimum and maximum values will be displayed above
The range is defined in Device manifest as minimum and maximum
Within a default range, set your own range of limit(s) by clicking +New limits
Define limit value(s) by using number input spinners or by directly typing the exact number and assign matching colour
Click Save

You can add multiple value ranges within the default one.

Live Messages

Live messages widget displays your devices’ latest notifications sent by the devices’ alarm or from the Platform rule engine if the parameters exceed their limit values. You, as a user, can define limit values for the parameters and be notified if they are exceeded.

To use Live messages widget:

Click Live messages button in Choose widget pop-up
New Widget settings window will pop up
Set the number of notifications your widget will display (up to 4, 8 or 12 at once)
Click Save

Maps

Maps widget enables real-time tracking of your device(s) on a map by visualising last sent physical location/position of the specific GPS feeds.

To use Maps:

Click Maps button in Choose widget pop-up
New window will pop up with a list of semantic groups which contain either location (GPS) feed or static location data entered (location attributes)
Select one or more semantic group(s) by checking the box
Click Save
Map widget will be displayed on your dashboard

Manage Maps

You will get a zoomed-in version of the map with the location marker. Location markers are colour coded:

red - there is at least one alarm in a semantic group

orange - there is at least one warning on a device

green - there is no alarm

If you click on a location marker, you will get the following information: name of the semantic group, coordinates (latitude and longitude) and time of the connection state and the last report.

Search maps by semantic groups
Zoom in/out map by clicking on / button, or by using ctrl + scroll command
Use button to exit zoomed in/out mode

Modify Maps

Go to Widget settings
The window with a list of semantic groups will pop up
Change the semantic group by checking its box
Change the size of a widget by clicking one of the three buttons:, or click button on the widget to display map in full size
Button in the middle displays map widget in default size
After you made all the necessary changes, click Save

Status

Status widget displays current status of your semantic group with a simple colour widget. It will display status based on real-time data sent from any selected feed from a selected semantic group made within Data semantics module.

To use Status widget:

Click Status button in Choose widget pop-up
New window will pop up with a list of semantic groups you have created on the Platform
Select semantic group
New Widget settings window will pop up

It displays the name of the semantic group you have chosen along with different statuses a widget can have:

NORMAL - no thresholds crossed/alarms activated; green is default colour
ALARM - threshold crossed/alarm triggered on any feed in any semantic (sub)group; red is default colour
WARNING - alert condition of selected feed or semantic (sub)group; yellow is default colour

Default colours can be changed in a drop-down menu in Widget settings pop-up.

Click Save

Status widget will display a colour of a state its feeds/semantic (sub)groups are in.

If any feed in any semantic (sub)group has crossed a defined threshold, the status widget displaying its data will turn red and will display the number of threshold alarms that have been triggered. If feed’s data goes back to normal state, the widget will turn green (or will be in any other colour you have selected to be your normal state colour).

Manage Status Widget

To manage Status widget:

Click on the widget on a dashboard
New window will pop up

Feeds are in normal state:

Name and graphic representation of the icon of the feed displayed

Click on the feed
New window will pop up with feed details: time, date and value of the last reading; measurement peaks for today (minimum and maximum); current settings of the alarm, text of the alarm messages and the time when the Platform received it
It will contain a chart with graphic representation of the data, the same as the one in chart widget details screen

Feeds are in alarm state:

Pop-up will contain the messages Platform received when alarm threshold was being triggered
Messages are presented in form of a label with the name of the feed, time when its data triggered threshold, text of the message displayed when the alarm is triggered, value of the data when it triggered the threshold
Click on a label
New window will pop up with feed details: time, date and value of the last reading; measurement peaks for today (minimum and maximum); current settings of the alarm, text of the alarm messages and the time when the Platform received it
It will also contain a chart with graphic representation of the data, the same as the one in chart widget details screen

Feeds are offline:

Name and graphic representation of the icon of the feed(s) are displayed

Click on the feed in question
New window will pop up but will not contain feed details (real-time data) since the feed is offline

Please note that status widget itself, along with status widget details window, will indicate if there are feed(s)/subpoint(s) within a semantic group which are offline.

Semantic Groups

There are two different ways in which semantic groups can be presented in ClickCloud IoT Web application:

Dashboard Semantic groups widget
Enables you to see real-time data of multiple feeds and actuators of one device/custom semantic group on dashboard
Data Semantics module
Allows you to regroup devices’ feeds/actuators in so called semantic groups
This module is located in the main application menu

For more information on semantic groups, please refer to Data Semantics module section of this user manual.

Creating Semantic Groups Widget

To visualise data with Semantic groups widget:

Click Semantic groups button in Choose widget pop-up

A new window will pop up with the list of all the devices and their feeds you have created and/or have the access to, as well as all the semantic groups and the data (feeds and actuators) in those groups you have created and/or have the access to.

Select feeds and actuators in the checkbox on the right
Click Save

You can select up to 4 feeds/actuators but from one device/semantic (sub)group only!

Click on one feed/actuator in the widget to see more details about the latest reading, e.g. maximum and minimum values, daily reports and a list of the latest notifications. !

Editing/Deleting Semantic Groups Widget

All other actions (editing and deleting) which can be performed on a widget, are applicable to Semantic groups widgets as well (See Editing Widgets and Removing Widgets sections below). Additionally to that, access permission restriction is also displayed on the semantic groups widget in the same way as on all other widgets. Note: If you do not have permission to access the device, or widget data is missing, it will be visible on a dashboard in form of a notice displayed as you hover your cursor over that particular widget.

Similar information, with the appropriate visual component will be displayed if device is put offline.

Edit Widgets

To change type of data displayed:

Click on the Settings button (It will display if you hover the cursor over widget)
New Widget settings dialog will pop up containing all the devices you have connected to the Platform
Choose one by clicking on it
A drop-down list of feeds/actuators will expand
Choose one by clicking on the checkbox/radio button next to it
Click Save

Note: If a reading of a particular parameter cannot be displayed on that widget you will not be able to choose it!

Resize a widget by clicking on the Settings button in it and choose either square or rectangular shape.

Note: This can be applied to reading widget only!

Change the position of a widget by drag and drop at any place on the screen.

Note: Mobile enabled settings can be switched on and off after the widget has already been created.

Mobile Enablement

Mobile enabled switch is in the Settings dialog. If switched on, that particular widget will be visible on your Android and/or iOS if you have installed our free mobile application. Note that Live messages widget is not mobile enabled.

For iOS visit: App Store

For Android visit: Google Play Store

A green mobile phone glyph displayed on a widget indicates Mobile enabled is turned on.

Alarm Threshold

For each feed with numeric type of data (e.g. temperature, pressure, humidity…) you can define high and low alarm thresholds. If the reading of the feed crosses the defined threshold, the widget containing the feed will turn red.

Each widget displaying numeric type of data also displays a trend of the value of that data which can be: rising , falling and steady if the value is increasing, decreasing or relatively consistent comparing to the previously received data.