| Test Case Title | TC1.21: Cross-widget connection and interaction |
| Goals | The owner of the dashboard can set up different kinds of cross widget interactions in the same dashboard, including:
please remind that most of the widgets allow you to set a Hyperlink that is an URL to jump to another web age (dashboards) when clicked on the widget. They are single button, time trend, time trend compare, etc. etc. |
| Prerequisites | users that are registered and that are going to create dashboards. |
| Expected successful result |
|
The widget Selector is a widget that allows to show on a map the results of different queries, singularly on collectively, by clicking the service of interest on the widget.
See TC1.8 - Visual production of Dashboard via Wizard for more details on how to add a selector widget by using the dashboard wizard tool. In the example below, it is possible to see a list of Point of Interest and services available on the left vertical column.
By clicking the black arrow on the left of each item in the list, the service(s) of interest is/are shown on the map. In the example below the selector widget list different kind of services, like:
- point of interest, in the form of geolocated pins in the map;
- various analytics in the forms of heatmaps, heatmap of pollution predictions, traffic flow reconstruction;
- Other service like the what-if analysis,
More than one POI kind can be activated or deactivated by clicking the black/white arrow, while some services are mutually exclusive. In the next image you can see that Air quality sensors, weather sensors and traffic sensors are shown on the widget map that is called Multi Map in the header. Please note that on Snap4City we have selector also based on ICONS and those very technical as hierarchival view similar to the GIS.
To add a Widget Selector in a dashboard it is possible to use the wizard, as explained in TC1.8 - Visual production of Dashboard via Wizard. please note that from Wizard you have a large selection of different Selectors.
Once a sensor is shown, by clicking a pin of interest on the map, the information about the specific service are shown in a pop up. If the pin is related to a real-time service, all the available data are shown in the popup. In the example below, it is possible to see the real-time data of an air quality monitoring station in Florence.
As Cross Widget Interaction
The data of the pin shown in the pop up, can be also represented in another widget in the same dashboard as single value (by clicking the “Last” button in the pop-up) or as a temporal trend (by clicking the temporal representation of interest, “4 Hours”, “Day”, “Week”, etc.). The image below show in two different external widgets the last values related to the PM10 and the Day trend of the NO2.
Show the data of a pin in another widget
By clicking a pin on the map, all information about the selected service are shown in a pop-up associated to the pin, as shown in the following image.
If the selected pin has real time data available, these data are shown in the pop-up, as in the following image.
Real time data shown in the pop-up can be visualised also in other widgets on the same dashboard. Real time data can be visualised in any widget that manage single values: single value, gauge, speedometer, etc., according to their High Level Type, HLP, see table in HOW TO: HLT vs Ingestion, and HLT vs Widgets
Temporal trend can be visualised in any widget that manage temporal values. The destination widget(s) to visualize the pin data has(have) to be selected in the Specific Widget Properties tab, in the Data widgets column [(1) in the following image]. By clicking the drop down menu in the Data widgets column, the list of all the available widgets in the dashboard will be shown. One or more target widgets can be selected from the list.
Once opened the pin with the data of the point of interest, the “Last” button in the pop-up will show the last available value in the defined destination widget (that can be any available widget on the dashboard that shows a single value, like: single content, speedometer, bar content, etc.). Otherwise, by clicking one of the button for the temporal trend of interest, the trend will be shown in the defined destination widget (temporal trend widget).
The box “Keep data on target Widget(s) after pop close” (2) means that the last clicked value(s) will remain in the target widget(s) also after the pop closure.
please note that, you may have in the selector some elements that target on specific Single Content and Time Trend, while other could be associated with other element. This means that ech single content widget, time trend widged, etc., can be a target of a number of data on the basis of the setting that you define in the selector. Please not that the Color of the target widget and the text are changing according to the data source.
Show a list of external content/services in another widget
The selector widget can be used also to show different external content/services, HLT. The selected content will be shown embedded in a widget dashboard.
The following is an example of dashboard showing different external contents. Please note that the external services (web pages) of third parties may present some limitation to rendered inside Snap4City iframe of the dashboard if they have set up some limitation on IFRAME embedding. If you are in contact with the administrator you can esily arrange to remove that limitation.
https://www.snap4city.org/dashboardSmartCity/view/index.php?iddasboard=MTc3NA==
The list of items on the right column is a list of external links that are shown on the Selector – Map widget according to the selection performed.
To create a selector to show a list of external services enter, enter in Edit mode of a dashboard and follow the following steps.
- The table with the list of data sources, will show the items that can be selected according to the external content widget: Dasboard-IOT App, external services, micro applications and POIs;
- Select and click to one or more items in the list to be added. You can filter the data source table by using the filters on the top of the table. The selected items are shown in the “Chosen data source” table below.
- Click the next button to instantiate the widget. The Summary page will confirm that all is ok. Click the Instantiation button to proceed. The new widget will be created in the dashboard.
- It is possible to add other external links in the list by clicking the More option item in the contextual menu of the selector widget.
- In the Specific widget properties, click the plus button on the right, to add more lines in the list.
- The new items are added on the bottom of the list of items, but the order of the items in the selector can be re-arranged by using the Order field and specifying specify the ascending order in numbers (lower number are on top of the list).
How to manually add an item to be shown in the Selector widget
This is a step by step guide on how to manually add an item in the list to be shown in the Selector widget and to be correctly shown in a map.
To define which items have to be added in the list you need to recover the query for each of them.
After the log in in the snap4City platform, open the Service Map tool by clicking on Knowledge and Maps.
Make a geographical query by defining the services of interest. For example, to see all the parking in Florence:
- Zoom the map and center the map view in the area of interest, for example to Florence downtown
- Open the [+] of the category TransferServiceAndRenting (1) and select the Car_park item (2);
- Set the number of results to [No limit] (3);
- Set the Search Range to [visible area] (4);
- Click the lens (5) to start the search;
- All the parking will be shown on the map as geolocated pins.
- When the view is satisfactory, click on the disk (6). A pop will be shown with a form to be filled. Insert your email address where receive the query link, refine the subject of the email (not mandatory), insert a description (not mandatory) Click the [Send] button.
- Check your email. You will receive the email with a number of links (see the image below).
- In the Specific widget properties, open the Map widgets drop-down menu and select the target widget where to show the results of the queries (1). In the example only the Multi Map widget will be available. Tick it.
- Chick the plus button to add a line (1). The new line will be added at the end of the list of items;
- Click on the description empty field and write “Parking” and confirm by clicking the confirmation button (2);
- Click on the Query empty field and paste the link of the service map query received by email and copied before (3);
- Define Color1 and Color 2 as you prefer or leave them unchanged to accept the suggested colors (4);
- The Data widget drop down menu (5) can be used to specify a widget in the dashboard that will be used to visualize the data of the pin selected on the map, as described before. This allow to show in another specific widget the values or the trend of the pin selected in any preferred widget type (as a speedometer, as a bar content, a temporal trend, etc.), compatible with the kind of data.
- Click Confirm to save the widget.
- The final result will be something similar to the image below. By clicking the black arrow the parking areas will be shown in the map “Multi Map”.
