CSBL - List of Widgets’ actions and functionalities

×

Warning message

You can't delete this newsletter because it has not been sent to all its subscribers.

 

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;