7. Workspaces & Dashboards
๐งญ Workspaces & Dashboards in OpenGate
In the previous steps, weโve covered everything needed to collect data in OpenGate and make information from devices and assets available on the platform. Weโve provisioned entities, configured datastreams, and started receiving real-time data even adjusting the data using Connector Functions.
Now itโs time to shape that data so we can work with it effectively and build our IoT solution on top of OpenGate. To do this, weโll use Workspaces, which allow you to visualize, organize and build your solution areas, and Dashboards, where you usually work to monitor, explore, and interact with entities data in real time.
- A Workspace is a container that organizes dashboards around a specific context โ such as a location, a functionality, a project, or a team.
- A Dashboard is a visual canvas within a workspace, composed of customizable Widgets that display data from entities, datastreams, or assets and allows you to interactuate with your entities.
- Widgets are the building blocks of dashboards. OpenGate has a huge cataglog that include customizable tables, maps, charts, gauges, HMIs, and more โ each designed to present data in a specific format.
๐ Note: Workspaces can be shared with other users in your organization. This allows administrators to create curated views and make them available to operators, analysts, or any users group.
๐๏ธ Creating a Workspace and Dashboard
Let`s continue with our ongoing warehouse scenario. Weโve already provisioned sensors and collected data. Now, weโll create a workspace and dashboard to visualize that information.
๐๏ธ Step 1: Create a Workspace
- Go to OpenGate Management > Workspaces, you can open in new window
- Click on New Workspace
- Now fill the information required and click on “OK”:
- Name: Use
Warehouse Monitoring
- Description: Enter something if you like, for example:
Our awesome IoT solution
- Choose an icon: OpenGate has a huge predefined library, use
ogicon-industrial
- Visualization: Check “Show at home” to be able to see this workspace on the home screen.
- Banner: It is posible to redefine the banner or background image, keep it blank for this tutorial
- Name: Use
๐ Done! OpenGate redirects you directly to the new workspace view
๐ Step 2: Create a Dashboard
Let’s continue. Inside the workspace, you just need to click on “+ NEW DASHBOARD”
Now, we need to configure our dashboard. For this tutorial we fill the following data.
- Name: use
Warehouse Overview
- Icon: choose one, for example
ogicon-WD
- Image: Use default or something like this: ๐ผ๏ธwarehouse.jpg
Click on “OK” and your new dashboard is created
๐งฉ Adding Widgets
Empty right? Letโs add two basic widgets to visualize our data. click on “Add Widget” and check the catalog
๐ Entities list widget
This widget is a table which shows entities in table format we will use this to show all our entities and its more relevant data.
-
Click on “Add” and the widget configuration appears. Let`s configure our new the widget.
-
For this tutorial, we will focus in the warehouse rooms, so fill the following:
- SELECT COLUMNS TO ADD: This allows you to indicate what columns you want to see. The information is selected from datastreams list, OpenGate standard and custom, for provision, and collection datastreams. Fill this with:
temperature
,humidity
,presence
from our datamodel “warehouse” andprovision.device.specificType
,provision.device.identifier
,provision.asset.identifier
from the OpenGate standard data models. You can choose what datastream property show in the table. Check on “Current Value” and click on “+ ADD” - PAGINATION: The standard value is 10, change it to
20
.
- SELECT COLUMNS TO ADD: This allows you to indicate what columns you want to see. The information is selected from datastreams list, OpenGate standard and custom, for provision, and collection datastreams. Fill this with:
-
Then you will see the columns that the widget will show. Keep it as is, but you can change some things such order, name or apply formaters, we will see this later
-
Save the widget and the widget will be added to the dashboard automatically.
Use the bottom-right arrow icon on the widget to adjust the widget size, and click on “SAVE” icon in the Dashboard toolbar.
๐ Congratulations you have your first dashboard with one widget!!!
๐บ๏ธ Map Widget
Let’s continue by adding a map widget.
- Like you performed before, click Add Widget and choose Maps The “Maps” widget is another powerful tool that can be configured to show a lot of customizable information of your entities, directly over a geolocated map. For this tutorial, ee keep the widget as default. But lets review what the widget will show:
- “provision.device.location”: This marker represents the provision location of a device
- “entity.location”: This marker represents the location collected for a device
- Save the widget and move it to the right part. Try to achieve this
โ Finish your work
I know, I know… we did not enter the location for all devices, but you can do it with what you have learn in this tutorial. I give you a clue, you can do it in two ways depending on the information that you want to represent:
- Use OpenGate Device Emulator, to collect the location of the entities
- Use EDIT device option, from the menu of each entity in the widget table, to provision the location of the entities
Use both if you wish and refresh the dashboard, now you see the map position. Enjoy the Maps widget, move around, CNTRL+SCROLL to zoom in/out, and click on some device to see its information. Look this:
๐ Applying Filters
We have configured a great dashboard, but we can adjust it to refine the dashboard view. Because we want to use this dashboard as “Warehouse Overview”, weโll create a basic filter to only see our warehouse rooms information.
๐งฎ Filter the “Entities list” widget
Remember, these entities are assets. The entity type is recorded in OpenGate standard datamodel using ‘resourceType’ datastream. So that, lets reconfigure our widget to apply a filter:
-
Choose “eq” (that means equals) for the condition operator, and fill
entity.asset
in the value. Click on “APPLY FILTER” -
Let’s do a couple of things more.
- Add a new column using
asset.identifier
datastream and chooseat
. This will create a new column that shows each time some asset information is updated by one of its related devices. Edit it and change its name toLast coms.
- Remove columns
provision.device.specificType
andprovision.device.identifier
, note that these datastreams are relevant for devices, not for assets, so we can safely remove them from this view!
You should have something like this:
- Click on “SAVE” to apply the changes. The widget will now display only assets, with the updated column layout
This will ensure that only assets (not devices or other entities) are shown in the dashboard.
๐บ๏ธ Do the same with the “Map” widget
Repeat the job with the map widget. All OpenGate widgets have similar configuration options so you know what you need.
You should accomplish something like this. Only the information from your assets is visible:
โ Want more?
Repeat all the process and create another entities List widget filtered to show only devices and change the widget names to achieve this dashboard:
๐จ Applying Formatters
Although this may not be part of this basic tutorial, we think that will be relevant for you to know about this feature… Let’s improve our dashboard to another level of customization using “formatters”. This allows you to customize with all the power of web development and its native technologies HTML, CSS and javascript.
Here you have infinite posibilities so for this tutorial we will do the follwing to our “WAREHOUSE ROOMS” widget:
- Format dates: The ISO format is not for everybody. Let`s convert this ’’ to this ‘’.
- Temperature colors: Apply a code color for temperature datastream values
- Presence indicator: Remark the presence detected
NOTE: We assume that you have knowledge in web development, HTML, CSS and javascript.
๐ 1. Format dates
Formatters are both simple to use and incredibly powerful. Let’s start with a formatter code to change date apprearence.
-
Open the widget configuration and click on “formatter” on the column ‘Last coms.’
-
Parte the code bellow, click on “EVALUATE” to check code errors, and “OK” to save your changes
//check if we have a value for the datastream
if (value) {
var date = new Date(value);
if (date=="Invalid Date"){
//the value is not valid
cellFormatter.customValue = "---";
}
else
{
//format dat to the locale string
cellFormatter.customValue = date.toLocaleString();
}
}
๐ก๏ธ 2. Temperature colors
Repeat the proccess with the column Temperature
and the code bellow
if (value) { //If value exists
if (value < 18){
// Cold
cellFormatter.style = 'color:lightblue;';
}else if (value >= 18 && value < 22 ){
// ideal temperature... using custom green color
cellFormatter.style='color:#20BB38FF;';
}else if (value >= 22){
//more than 22 ยบC is hot...
cellFormatter.style='color:red;';
}else{
//grey
cellFormatter.style='color:#808080;';
}
}
๐๏ธ 3. Presence indicator
One more time. Edit column Presence
if (value === true) {
//You can change the cell value for a custom one and even use emojis ๐๐!!
cellFormatter.style = 'color:green;';
cellFormatter.customValue = "<strong title='TRUE'>TRUE ๐ข</strong>";
} else {cellFormatter.customValue = "<span title='FALSE'>FALSE ๐ณ</span>";cellFormatter.style = 'color:grey;';}
๐ 4. Check the result
Click on “SAVE” on the widget configuration and check the result… Pretty powerful, right?