CSBL - List of Widgets’ actions and functionalities

 

5. List of Widgets’ actions and functionalities

5.1. Table of non actuator widgets (partial table)

The following table shows the available actions/functionalities (with the corresponding data/parameters sent) of the various non-actuating widgets. In particular, the Sended Data / Parameters column of the following table show the data and parameters format sent by each widget to the CSBL execute function, which is assigned to the e variable of CSBL Visual Editor template, as described in Section 3.3.

Widget name

Action/ Functionality

Sended Data/Parameters

widgetTimeTrend

Zoom on a desired time interval to perform temporal Drill-Down on selected time range

 

 

{
  "t1" : <FIRST_TIMESTAMP_MILLIS>,
  "t2" : <SECOND_TIMESTAMP_MILLIS>,
  "sUri": <SERVICE_URI>,
  "metricName": <VALUE_NAME>
}

Example:

{
  "t1": 1655186608240.9412,
  "t2": 1659528987182.6824,
  "sUri": "http://www.disit.org/km4city/resource/iot/orionUNIFI/DISIT/ARPAT_QA_FI-GRAMSCI_SV",
  "metricName": "PM10"
}

in case of Drill-Down on a single time instant t1 = t2.

Click on a single point of the chart to perform temporal Drill down on a single time instant

widgetMap

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

widgetMap

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

widgetMap

Click on an Entity/Device marker on map and send information (as retrieved by querying the Snap4City SmartCity API) of the clicked Entity/Device

{
   "event": "click",
   "layers": [{
      "distance": "0.9243",
      "hasGeometry": false,
      "multimedia": "",
      "name": "METRO759",
      "photoThumbs": [],
      "serviceType": "TransferServiceAndRenting_Traffic_sensor",
      "serviceUri": "http://www.disit.org/km4city/resource/iot/orionUNIFI/DISIT/METRO759",
      "tipo": "Traffic_sensor",
      "typeLabel": "Traffic sensor",
      "targetWidgets": ["[]"],
      "color1": "#ffdb4d",
      "color2": "#fff5cc",
      "pinattr": "square",
      "pincolor": "#959595",
      "symbolcolor": "undefined"
   }]
}

Click on geographical Drill-Down button to send information of the Entities/Devices (as retrieved by querying the Snap4City SmartCity API) currently displayed in the actual bounding-box

{
   "event": "zoom",
   "layers": {
      "0": {
         "distance": "0.7987",
         "hasGeometry": false,
         "multimedia": "",
         "name": "METRO24",
         "photoThumbs": [],
         "serviceType": "TransferServiceAndRenting_Traffic_sensor",
         "serviceUri": "http://www.disit.org/km4city/resource/iot/orionUNIFI/DISIT/METRO24",
         "tipo": "Traffic_sensor",
         "typeLabel": "Traffic sensor",
         "targetWidgets": ["[]"],
         "color1": "#ffdb4d",
         "color2": "#fff5cc",
         "pinattr": "square",
         "pincolor": "#959595",
         "symbolcolor": "undefined"
      },
      "1": {
         "distance": "0.9243",
         "hasGeometry": false,
         "multimedia": "",
         "name": "METRO759",
         "photoThumbs": [],
         "serviceType": "TransferServiceAndRenting_Traffic_sensor",
         "serviceUri": "http://www.disit.org/km4city/resource/iot/orionUNIFI/DISIT/METRO759",
         "tipo": "Traffic_sensor",
         "typeLabel": "Traffic sensor",
         "targetWidgets": ["[]"],
         "color1": "#ffdb4d",
         "color2": "#fff5cc",
         "pinattr": "square",
         "pincolor": "#959595",
         "symbolcolor": "undefined"
      },
      "2": {
         "distance": "0.9603",
         "hasGeometry": false,
         "multimedia": "",
         "name": "METRO758",
         "photoThumbs": [],
         "serviceType": "TransferServiceAndRenting_Traffic_sensor",
         "serviceUri": "http://www.disit.org/km4city/resource/iot/orionUNIFI/DISIT/METRO758",
         "tipo": "Traffic_sensor",
         "typeLabel": "Traffic sensor",
         "targetWidgets": ["[]"],
         "color1": "#ffdb4d",
         "color2": "#fff5cc",
         "pinattr": "square",
         "pincolor": "#959595",
         "symbolcolor": "undefined"
      },
      "3": {
         "distance": "1.0086",
         "hasGeometry": false,
         "multimedia": "",
         "name": "METRO950",
         "photoThumbs": [],
         "serviceType": "TransferServiceAndRenting_Traffic_sensor",
         "serviceUri": "http://www.disit.org/km4city/resource/iot/orionUNIFI/DISIT/METRO950",
         "tipo": "Traffic_sensor",
         "typeLabel": "Traffic sensor",
         "targetWidgets": ["[]"],
         "color1": "#ffdb4d",
         "color2": "#fff5cc",
         "pinattr": "square",
         "pincolor": "#959595",
         "symbolcolor": "undefined"
      }
   },
   "bounds": {
      "_southWest": {
         "lat": 43.780126595782,
         "lng": 11.252961158752441
      },
      "_northEast": {
         "lat": 43.78555645110887,
         "lng": 11.259355545043947
      }
   }
}

widgetPieChart

Click on a circular sector that identifies the name of a certain metric to perform Drill-Down (sending information related to the selected metric for all the displayed Entities/Devices)

[
  {
     "value": "57",
     "metricType": "NO2",
     "metricName":   " DISIT:orionUNIFI:ARPAT_QA_GR-SONNINO_SV",
     "measuredTime": "2023-03-04T23:59:00.000+01:00",
     “metricValueUnit”: "µg/m³"
   },

. . .

   {
     "value": "59",
     "metricType": "NO2",
     "metricName":   " DISIT:orionUNIFI:ARPAT_QA_FI-GRAMSCI_SV",
     "measuredTime": "2023-03-04T23:59:00.000+01:00",
     “metricValueUnit”: "µg/m³"
   }
]

N.B.: through the "metricName" value, which is represented in the following type: "<ORG>:<BROKER>:<DEVICE_ID>", it is possible to obtain the Service URI: http://www.disit.org/km4city/resource/iot/<BROKER>/<ORG>/<DEVICE_ID>

Click on a circular sector that identifies an Entity/Device to perform Drill-Down (sending information related to all the metrics of the selected Entity/Device)

[
    {
        "value": "54.6",
        "metricType": "PM10",
        "metricName": "Helsinki:orionFinland:fmi-100742",
        "measuredTime": "2022-11-18T10:00:00.000+01:00"
    },

. . .

    {
        "value": "14.3",
        "metricType": "PM2.5",
        "metricName": "Helsinki:orionFinland:fmi-100742",
        "measuredTime": "2022-11-18T10:00:00.000+01:00"
    }
]

N.B.: through the "metricName" value, represented as "<ORG>:<BROKER>:<DEVICE_ID>", it is possible to obtain the Service URI: http://www.disit.org/km4city/resource/iot/<BROKER>/<ORG>/<DEVICE_ID>

widgetBarSeries

Click on a single bar to perform Drill-Down (sending information of the selected metric and related Device/Entity)

{
  "event": "click",
  "value": {
     "value": 42,
     "metricType": "Temperature",
     "metricName": "BatteryGalaxyNote",
     "measuredTime": "2019-11-21T14:51:00Z",
     "metricValueUnit": "°C"
  }
}

Click on chart legend to perform Drill-Down (sending information of the Entities/Devices or metrics currently displayed in the chart legend, including their visibility status)

{
   "event": "legendItemClick",
   "layers": [{
      "name": "DISIT:orionUNIFI:ARPAT_QA_GR-SONNINO_SV",
      "visible": false
   }, {
      "name": "DISIT:orionUNIFI:ARPAT_QA_FI-GRAMSCI_SV",
      "visible": true
   }],
   "metrics": ["NO2"]
}

widgetRadarSeries

Click on a single radar metric to perform Drill-Down (sending information of the selected metric and related Device/Entity)

{
   "event": "click",
   "value": {
      "metricType": "avgTime",
      "metricName": "DISIT:orionUNIFI:METRO24"
   }
}

Click on chart legend to perform Drill-Down (sending information of the Entities/Devices or metrics currently displayed in the chart legend, including their visibility status)

{
   "event": "legendItemClick",
   "layers": [{
      "name": "DISIT:orionUNIFI:METRO24",
      "visible": true
   }, {
      "name": "DISIT:orionUNIFI:METRO759",
      "visible": false
   }, {
      "name": "DISIT:orionUNIFI:METRO758",
      "visible": true
   }],
   "metrics": ["anomalyLevel", "averageSpeed", "avgTime", "concentration", "congestionLevel", "vehicleFlow"]
}

widgetCurvedLineSeries

Zoom on a desired time interval to perform temporal Drill-Down on selected time range.

It is also possible to synchronize the time alignment of multiple different widgetCurvedLineSeries

{
  "series": <SERIES_OBJECT>
  "t1" : <PRIMO_TIMESTAMP_MILLIS>,
  "t2" : <SECONDO_TIMESTAMP_MILLIS>,
  "series": <SERVICE_URI>,
  "metricName": <VALUE_NAME>
}

Example:

{
   "t1": 1673212579086.2698,
   "t2": 1673366990478.7363,
   "series": [{
                "metricId": "https://servicemap.disit.org/WebAppGrafo/api/v1/?serviceUri=http://www.disit.org/km4city/resource/iot/orionUNIFI/DISIT/M...",
                "metricHighLevelType": "IoT Device Variable",
                "metricName": "DISIT:orionUNIFI:METRO1",
                "smField": "vehicleFlow",
                "serviceUri": "http://www.disit.org/km4city/resource/iot/orionUNIFI/DISIT/METRO1"
        }, {
                "metricId": "https://servicemap.disit.org/WebAppGrafo/api/v1/?serviceUri=http://www.disit.org/km4city/resource/iot/orionUNIFI/DISIT/M...",
                "metricHighLevelType": "IoT Device Variable",
                "metricName": "DISIT:orionUNIFI:METRO1028",
                "smField": "vehicleFlow",
                "serviceUri": "http://www.disit.org/km4city/resource/iot/orionUNIFI/DISIT/METRO1028"
        }]
}
in case of Drill-Down on a single time instant t1 = t2.

Click on a single point of the chart to perform temporal Drill down on a single time instant

widgetDeviceTable

 

 

Click on Action buttons to send information related to selected Entity/Device

{
<LIST_OF_OBJECT>
}

Example:

{
   "anomalyLevel":110.16865,
   "averageSpeed":86.4935,
   "avgDistance":"",
   "avgTime":13.1625,
   "concentration":1.671046,
   "congestionLevel":101.25,
   "dateObserved":"2023-01-16T09:36:00.000Z",
   "occupancy":"",
   "speedPercentile":"",
   "thresholdPerc":"",
   "vehicleFlow":289.06924,
   "device":"METRO54",
"serviceUri":"http://www.disit.org/km4city/resource/iot/orionUNIFI/DISIT/METRO54",
   "action":"pin"
}

widgetEventTable

 

 

Click on Action buttons to send information related to selected Event

Example:

{
   "device":"Alarm001",
   "prefix":"http://www.disit.org/km4city/resource/iot/orionUNIFI/DISIT/",
   "ordering":"startDate",
   "action":"pin"
}

 

 

5.2. Table of widget actuator

The following table is a summary of the actions/features for trigger widgets.

Widget name

Action/ Functionality

Sended Data/Parameters

widgetImpulseButton

Action on click

 

widgetOnOffButton

Action on click

(string) status;

widgetKnob

Action on click

(float) value;

widgetNumericKeyboard

Action on click

(float) value;