1. Description
2. Key Features
3. Dashboard Settings
4. Navigation
5. Dashboard Configuration
6. Widget Toolbox
7. Conditional Formatting
8. Timed Out Status (indicator in footer of all widgets)
   1. Info status
   2. Timed out status
   3. Historic endpoint values modal

Description

Commander™ Dashboard is a visualisation tool that allows users to track the communication between devices and systems. It has a set of widgets that users can choose from to build their dashboards with various functionalities that help formulate their solutions.

Key Features

• Near real-time asset monitoring.
• Visualisation of active and inactive alarms.
• Digital overlay offering a single view for multiple assets.
• Location-based visualization and tracking.
• Time Series Charts with 7 days history for subscribed values.
• Single or batch gateway communication.

Navigate to the dashboard on the Commander™ home page, via the app's menu, or via the recently used or favourites. Once the user clicks on the application, it will take them to the default home view set for the tenant, unless a home view has already been configured by the user. Location within the entity tree can be seen at the top via the bread crumbs listed.

Dashboard Settings

These are the dashboard settings available as highlighted in Figure 1 below.

Figure 1 - Dashboard Settings

1. Navigation back to the Commander™ homepage.
2. Account name.
3. Breadcrumbs for the dashboard that users are busy viewing.
4. Navigation menu.
5. Full-screen mode.
6. Dropdown menu with the user settings for the dashboard.
7. Current date and time.
8. Navigation to the user's home view, if configured. If not personally configured, the user will navigate to the home view set for the account, if configured.
9. Changes the dashboard scale settings.

The Commander™ Dashboard user settings are shown in Figure 2 below:

Figure 2 - User Settings

• Design mode - allows the user to go into the design portion of the dashboard where they will have access to the widget toolbox so the user can configure their dashboards to build it.
• Kiosk mode - this will enter the user into the full screen without visualisation of settings so that it gives it a clean and simple look.
• Configure home view – allows the user to configure their home view by setting the current view as their home view. The user can also clear their home view if required. The user can also enable the timeout such that if they are inactive on any view for a specific amount of time, the platform will return them back to the home view.
• Speed test – it shows the user their latency, their download and upload speed for the specific dashboard. Once the test is done, the user has the option to export the results. This is mainly used to keep track of dashboards that are consuming a lot of data so they can be optimized.
• 3.457.1-update001 - it shows users the current version of the Commander™ Dashboard.
• View license agreement - allows the user to view the license agreement.
• Logout – allows the user to log out of Commander™ Dashboard.

Navigation

Navigation will involve opening the navigation menu (Figure 3) on the left, and it will give users access to all of the view entities. Here the user can select anything that they wish to view.

A user can navigate from within a dashboard if click-throughs are configured on the widgets.

Figure 3 - Navigation Menu

A user can navigate to a new view via one of two ways,

1. By using the navigation menu where one can search for a specific view. The user can type in the search bar to see the options available while typing, and then select the specific view they would like to load. Selecting the arrow icon at the end of the search result with open that entity within the entity tree. The user can also scroll through the entity tree created for this solution to find the specific view. Click on the dashboard entity to navigate to it. See a demonstration in Clip 1 below:

   Clip 1: Dashboard Navigation

2. The second method of navigation is via click-throughs on a dashboard. Click-throughs can come in different forms,
   

   • A click-through on a widget, indicated by the view icon on the widget in the top right corner. If the user hovers over it they can see the breadcrumbs of the view subscribed to the widget.

   • Geo map click-through properties, the user can click on alarm circles on a Geo map and be navigated to the chosen dashboard.

Holding CTRL on your keyboard and clicking on a click-through widget will allow the user to open that view in a new tab.

Clip 2 below, shows navigation via an alarm circle, and then via a single value widget. The alarm circle must be configured with the view properties in order for the click-through to function (see geo location service). It will also demonstrate the navigation via a widget that has been subscribed to a view that is demarcated with the icon.

Users can also navigate to their dashboard view via breadcrumbs, and this allows them to see the entity tree structure for where the view sits.

Dashboard Configuration

Once endpoints are configured in Portal, Commander™ allows the user to visualise their data in a Dashboard making use of preconfigured widgets. Depending on the widget type, the user then needs to link a desired endpoint value configured in Portal as an endpoint to the widget, by simply dragging that property onto the widget. The property value will then be displayed on the widget, live values are displayed in various forms, including temperature graphs, current graphs, dynamic imaging of temperature, voltage gauges and a button for controlling a fan. Widgets are components of the Dashboard interface that enable the user to visualize data, perform a function or access a service. Below is a list of widgets available in Commander™ Dashboard, and an illustration of utilizing the widgets and allocating them to a Dashboard (canvas), linking them to endpoints to visualize their data.

Widget Toolbox

Entering design mode of the Dashboard allows the user to configure their very own Dashboard (canvas) and how they plan on utilizing the widgets to visualize their data. To configure the dashboard, activate design mode and access the widget toolbox to start building the user's view. Users can navigate to design mode, open the widget toolbox and begin building by dragging and dropping widgets onto the dashboard. See a demonstration in Clip 3 below:

Entering Design mode of the widget allows the user to customize their widget properties and subscribe (link) endpoints, blueprints or digital twin properties to a widget, as well as visualize what is currently subscribed to the widgets. This is demonstrated in Clip 4 below. Once the user is finished designing their view, they should click Done editing in the top right-hand corner.

Conditional Formatting

The purpose of conditional formatting is to allow the user to customise the widgets such that the widget updates dynamically with live data of the endpoint subscribed. The text, icons and/or colours can be conditionally set for widgets with the conditional formatting feature. In order to set conditional formatting, edit the desired widget by clicking the pencil icon to open the properties pane on the right for that widget. Once open, select the check-box in the top right titled “Advanced Properties” in order to show all available properties, and then click “Open builder” under the Conditional Formatting menu.

The video below shows users how to do that:

Once the user has clicked on open builder, they will be able to configure the conditional formatting for this widget. Start off by clicking “Add type” which will provide the IF-THEN configuration block.

The outputs of the conditional formatting will look different depending on the widget being edited. However, the foundation of the builder remains the same.

IF Select “Add condition” in order to set up the IF portion of the conditional formatting. There is a drop-down list of a variety of utility functions which can be used. If more than one condition is required for the IF statement, a user can add more by first selecting if it is an “and” or an “or” operation, and then click on “Add condition”, which can then be configured as previously done. THEN There are three different options for outputs of the conditional formatting on the widget.

1. Colour - the colour desired for the IF logic provided. This colour will display differently per widget being configured.
2. Icon - the icon desired for the IF logic provided. The icons are pulled from Font Awesome which has been integrated with Commander™. In order to configure a Font Awesome icon, input “fa fa-icon-name”
3. Text - the text desired for the IF logic. It is important to note that if this option is selected and configured, the live value of the endpoint subscribed to the widget will not display, but rather the configured text in its place. The video below shows users how to configure conditional formatting:

Once the configuration of the IF-THEN statement is complete, another statement (or type) can be added with Add type with AND or OR logic, or the user can save and close by clicking “Update”.

Figure 4 - Save your changes

When adding an icon, the following site can be used to find the desired icon: Font Awesome, which can then be pulled into Commander™ by copying the name of the icon and pasting it into the input box as follows: fa-fa-icon-name, as seen in the figure below:

Figure 5 - Setting up an icon

Selecting the three ellipses at the top right corner of the widget will open the widget options, which will provide the option for copying conditional formatting, which then can be pasted onto another widget using the widget options menu.

Example of conditional formatting can be seen below:

Figure 6 - Example of conditional formatting

In the video below, users will be able to see how the widget updates when the value of the widget updates. This value is being updated manually here for demonstration purposes, but it would generally work by linking a live endpoint to the widget which would then cause the widget to update as configured.

Timed Out Status (indicator in footer of all widgets)

It is important for the user to know whether the gateway/device linked to the widget is sending data. Widgets include a footer that can be enabled by selecting from the following options - to hide (hide footer), display date only, OR display date and endpoint history (linked endpoints will display values as they are received.) in a Grid or visually as a chart.

• Widgets currently configured to show the footer will automatically be enabled for historical endpoints.
• Widgets that do not support endpoints, will by default show a footer with no information if the footer was enabled.

Figure 7 - Footer of widget

Info status

None of the endpoints have timed out,

• Displays Date and Time.
• A tooltip with count all the endpoints that are linked, if selected it will display the Historic endpoints values modal of all linked endpoints.
• A tooltip with no endpoints linked, if selected will not allow the user to open the Historic endpoints values modal.

Timed out status

One or more of the endpoints have timed out,

• Displays Date and Time.
• A tooltip with a count of the endpoints that have timed out, if selected it will display the historic endpoints values modal of all timed-out endpoints.

Historic endpoint values modal

The historic modal will show endpoint values and timed out values, unless the user specifically only opts to view timed-out values.

Figure 8 - Historic values modal with Data grid

Figure 9 - Historic values modal with Chart

Figure 10 - Historic values modal with Import