Widget Block List
Chapter Contents: List of Widget Blocks & Widgets Configuration
Block overview
To configure your dashboard individually, you can add your own widgets. With the help of widgets you have the possibility to display data of your building or to control or regulate your infrastructure. Here you can find an overview of all the elements (blocks) you can use for your dashboard widgets:
Value / General Display
The Value element (Value Tiles), also used in the Widget General Display allows you to display multiple attributes in one widget.
Example: All measured values of a meeting room, such as temperature, number of people, air quality, etc. should be displayed simultaneously.
Example: Use a data display for a quick overview of the room temperature.
Trend
A Trend element can be used to display data from any defined time period.
Example: Visualize with a trend line how much energy a certain data point has consumed within a month.
Donut
The Donut chart shows percentages of different data points in a range.
Example: Show how many shares of the total energy are supplied by the different energy sources.
Sankey
With the Sankey diagram, different data can be compared with each other.
Example: You can use the Sankey diagram to compare how much energy is generated or consumed and to see how much additional energy must be supplied externally to cover the total demand.
Progress
The Progress indicator shows the current progress or level status.
Example: Show the current level of your trash can using a progress indicator.
Range
A Range element displays any data ranges. The desired range (min./max.) which should be displayed can be configured manually.
Example: Show in which temperature range a sensor has moved during the last 24 hours. The range between the lowest and the highest measured temperature within this time is displayed.
Map / Storey
Individual assets can be placed on a map in the project. The Map element gives a quick overview of the placed assets.
Example: Show on your dashboard which parking spaces are free using the Maps widget.
The Storey element shows the floor plan of the desired building. If you have placed assets in the floor plan, they will also be displayed in this element.
Tracking / Heatmap
The Tracking element displays all tracked assets on the map.
Example: With the racking element, you can see where the flipcharts are currently located in your building.
The Heatmap element shows the temperature ranges on the map.
Example: You can see how the heat is distributed in the building/rooms on the Heatmap widget.
Weather
The Weather element displays the weather at any location. It is possible to display only the current weather, the weather forecast or both combined.
Example: You can display the current weather at the location of the building on your dashboard.
Alarm
The Alarm element displays pending alarms. The widget is displayed in the corresponding color depending on the set priority.
Example: As soon as the revolving door in the building is out of order, an alarm is triggered. In the alarm element this can be displayed in the dashboard at a glance.
Alarm Overview
The element Alarm overview shows the pending alarms in the entire project.
Inputs & Switches
Your infrastructure can be controlled via the dashboard. In the Inputs & Switches element, different switch types and inputs can be selected.
Switch: Simple switch to turn a data point on or off.
Slider: The slider can be used to change the input value of a data point.
Example: Open or close blinds to a desired position.
Input: Set any value for a data point Example: Setpoint input for a water heater.
Select: Select the options within a drop-down menu.
Button: Individually configurable button with free text.
Example: Button with the text "Call service" to perform an action (e.g. alarm).
Ticket
The Ticket element displays a simple overview of tickets. Both open and closed tickets of the entire project are displayed. A click on "Show tickets" leads directly to the Tickets area.
Time
The Time element, time the current time and date.
Comfort
The Comfort element shows the Comfort status of a room. The Comfort is determined with the help of the "Temperature" and "Humidity" values.
Example: The sensor in a meeting room measures various IEQ data. The "Temperature" and "Humidity" data are used to determine the comfort level in the room and displayed graphically on the dashboard.
Table
The Table element displays data in table format for easy overview.
Example: A sensor records the number of people entering the building through different entrances. This data can be displayed in a table for an overall view of the people present in the building.
Calendar
The Calendar element allows you to view the status and events of the asset for each day of the week or month.
Example: a sensor registers the number of people in a building. With the calendar widget you can see how many people visited the office on each day of the week/month.
Image
The Image element displays any image.
Example: When composing the " Floor 2 " dashboard, you can select the "Image" widget and attach a floor plan.
Radar
Several current values can be displayed on the Radar in the form of a spider web.
Example: A sensor measures several metrics: Temperature, Humidity, Occupancy and Brightness in a room. In the radar you can see the current values of all metrics in one graph.
Trigger
The Trigger element displays the current image of the oxo button.
Links
The Links widget allows you to add links to your dashboard, for example, links that lead to weather forecasts for selected locations. The URLs do not open in the widget, but in the browser.
iFrame
The iFrame element allows you to add different types of multimedia (embed URLs). However, watch out! Not all sites work, some sites refuse to embed their website with the HTTP header "X-Frame-Options".
Example: City Cam of Winterthur
Configure widget elements
Value Tiles / General Display
When you add the widget, first select the Primary Asset.
Then define which values should be displayed by picking out the associated asset (sensor) in the Value field.
After you select the asset (sensor), you can also specify a default background color.
In the second step, you select the chart type.
The background colors can be set value-dependently by specifying the conditions for them
Multiple attributes can be added for different sensors.
When configuring the General Display widget, you can add the element Value. There are 3 display variants to choose from - Big, Small, Tiles with value mapping:
Trend
Designation of the element. Example: Supply & return temperature.
Text to be displayed.
Selection of whether the diagram is to be displayed analog or digital.
Variant of the displayed trends.
Selection of whether the various trends are to be displayed overlapped or individually.
Selection of whether the current data should be displayed.
Whether a target range or a target value is to be displayed.
How the Y-axis should be labeled.
Whether multiple axes (from different assets) should be displayed.
Click on to save the element in the widget.
Donut
Specify a description which will be displayed when the widget is selected.
The text which should be displayed.
Whether a legend with the values should be displayed.
Whether the current data should be displayed with the effective value, or whether the data should be displayed in percentages.
Click on save.
Radar
Specify a description which will be displayed when the widget is selected.
The text which should be displayed.
Whether a legend with the values should be displayed.
Whether the current data should be displayed with the effective value, or whether the data should be displayed in percentages.
Click on save.
Sankey
Specify a description which will be displayed when the widget is selected.
The description which will be displayed when the widget is selected.
Determine whether the total of the data should be displayed.
Click on save.
Icon
Specify a description which will be displayed when the widget is selected.
Click on save
Weather
Specify a description which will be displayed when the widget is selected.
Specify a text which should be displayed.
Select whether to display only the current weather, the current weather with weather forecast, or only the weather forecast.
Click on save.
Alarm list with/without tags
Specify a description which will be displayed when the widget is selected.
Specify a text which should be displayed.
Select whether the variant is to be displayed large or small. If the variant is large, the acknowledged alarms and the total are displayed in addition to the active alarms.
Select whether to display the number of all alarms in the project, the number of alarms of the selected asset, or the number of alarms with the selected tag.
Click on save.
If you select the alarm list with tags, it is possible to add the tags with which you want to filter the alarms:
Alarm Overview with/without Tags
The Alarm Overview widget with/without tags works on the same principle as the Alarm List widget. When adding the widget, you can optionally select whether to filter by tags.
The grouping in the display is done according to priority level. The entries are linked to the corresponding alarms. It is also displayed by which tags were filtered, if any were selected.
Ticket
Bestimmen Sie eine Beschreibung, welche bei der Auswahl des Widgets angezeigt wird.
Specify a text to be displayed when the widget is selected.
Select whether the big or small variant should be displayed.
Click on save.
Map
Specify a description which will be displayed when the widget is selected.
Select whether to display only the positions of the assets on the map or whether to display the respective status of the asset.
Click on save.
Heatmap
Specify a description which will be displayed when the widget is selected.
Select whether to display the map or the floor plan (Storey).
Click on save.
Storey
Specify a description which will be displayed when the widget is selected.
Select whether only the positions of the assets in the floor should be displayed or whether the respective status of the asset should be displayed.
Click on save.
Tracking
Specify a description which will be displayed when the widget is selected and click on save.
Progress
Specify a description which will be displayed when the widget is selected.
The text which should be displayed.
Select a display variant.
Select the type of the value to be displayed.
Specify a symbol to separate the values. The default setting is "/".
Enter a progress text to be displayed next to the value, like "Charge Progress".
Click on save
Range
Specify a description which will be displayed when the widget is selected.
Specify a text which should be displayed.
Select a display variant.
Click on save.
Comfort
Specify a description which will be displayed when the widget is selected.
Specify a text which should be displayed.
Click on save.
Calendar
Select the calendar format by clicking the icon
.Specify a description which will be displayed when the widget is selected.
Specify a text which should be displayed.
Select whether an attendance average should be displayed.
Decide whether the previous day should be displayed in addition to the current day.
Click on save.
Inputs & Switches
Specify a description which will be displayed when the widget is selected.
Specify a text which should be displayed.
Select the type of switch or input.
Click on save.
Image
Give a description (e.g. "Level 3") and click on save.
Table
Specify a description which will be displayed when the widget is selected.
Specify a text which should be displayed.
Select whether to display data from one asset, or whether to display data from multiple assets.
Click on save.
Time
Specify a description which will be displayed when the widget is selected.
Specify a text which should be displayed.
Determine whether the date should be displayed.
Links
To each widget you can also add the Links element.
Example: If you want to add a link to the weather forecast to a widget that displays the weather, you can do that by adding the Links element to the widget.
After you create the custom widget with the Temperature and Links elements, you can add the widget in the Dashboard and add the link to the weather forecast.
Element weather: add city
Element Links: Insert any link, e.g. website with weather forecast for Winterthur. You can also specify whether the link should be opened in the same window or in a separate one.
iFrame
An iFrame, is basically used to embed a website in the widget.
Example: "I want the real-time City Cam over the old town of Winterthur as a widget."
Follow these steps to apply the example with the City Cam:
Select the appropriate asset (if already set up) and set the width of the widget in the dashboard
Include the URL and specify in pixels the minimum height of the web page to be displayed
After setup, the widget will appear in the Dashboard.
Last updated