Introduction
NexusHMI™ is a Whisker.io™portal application that allows users to create HMI-style user interfaces that provide rich interaction with sensor data.
NexusHMI-designed user interfaces are responsive and can be viewed on computers, tablets and phones.
Each HMI is comprised of two types of components:
- Background Image - can be a schematic diagram, floor plan, photorealistic picture, etc.
- Widgets - data display elements including gauges, LEDs, tanks, pumps, etc.
Each widget is connected to a device channel (e.g. tag); each time the widget is refreshed, it uses the latest recorded value for that channel. If the channel is writable, then the widget's value can be modified by double clicking the widget on screen.
Creating a new HMI is fast and easy - complex user interfaces can be clicked together in a matter of minutes.
In this article, we will explain how to create and use a new NexusHMI user interface and discuss the various types of HMI widgets that are available.
Creating a new NexusHMI
NexusHMIs are available in the Location View.
To create a new NexusHMI, click on the "+" tab:
This will bring up the "Create New HMI View" dialog:
Enter a name for the HMI and click "Create" to complete the process. Once complete, the new HMI will be visible:
To add a new widget to the HMI, click on any Whisker.Block or Smart.Hub channel and drag it onto the HMI surface:
Once you drop the channel on the surface, the "Configure New Widget" dialog will open:
The widget title will default to the channel name. If you want a different title for the widget, you can change it here. The widget type determines how the data is visualized. See the next section for information on the variety of widgets.
The remaining widget parameters are preset to the values in the channel configuration, but can be changed on a widget by widget basis:
| Parameter | Description |
| Fill Color | Bar color - linear gauges |
| Text Color | Determines color of widget text |
| Gauge Minimum | Determines the lowest reading on widget |
| Gauge Maximum | Determines the higher reading on widget |
| Good Range Minimum/Maximum | Determine display range for good values |
Click "Save Changes" to create the widget and add it to the HMI:
Edit HMI Widgets
Widgets can be moved, resized, and edited by placing the HMI in edit mode. To place the HMI in edit mode, click the wrench icon on the floating toolbar on the right side of the surface.
When the HMI is in edit mode, the wrench icon will invert to indicate the new state:
When the HMI is in edit mode, the following actions are supported:
| Move | Click and drag a widget to move it around on the HMI surface |
| Resize | Click a widget to select and then drag corners to resize. You can also resize a widget by entering a numeric scale in the widget config dialog. |
| Edit Parameters | Double click a widget to open the widget config dialog. Change the name, colors, ranges, and scale as necessary. |
When finished editing, click the wrench icon to exit edit mode and save changes. Note: changes will not be saved until you exit edit mode.
Add Background to HMI
Each HMI can have a background image. This is useful for floorplans, schematic diagrams, and pictorial representations of equipment.
To add a background image to an HMI, put the HMI in edit mode as described in the last section. Then, click the image icon and specify an image:
Edit/Copy HMI Data
Click the gear icon next to the name of an HMI to open the "Edit HMI" dialog:
Using this dialog, you can:
| Change name | Enter a new name for the HMI and click "Save Changes" |
| Delete | Click "Delete HMI" to delete the HMI and all associated widgets |
| Copy | Click "Duplicate HMI" to create a complete copy of the HMI, including widgets. |
Widget Types
Digital Channels (Tags)
| WIDGET TYPE | EXAMPLE | DESCRIPTION |
LED |  | The header text is the channel name, the header color determines the alert status, the latest value is displayed as a colored circle with text. The low color/text and high color/text settings determine the colors and text. |
| STATUS LABEL |  | The label text is the channel name and the latest value is displayed as a colored circle.The low color and high color settings determine the color of the value circle. This widget is can be stacked horizontally and vertically to build status tables. |
| TEXTBOX |  | The header text is the channel name, the header color determines the alert status, and the latest value is displayed as text. The low text/color and high text/color settings determine the colors and text. |
| RIGHT PUMP |  | The header text is the channel name and the pump status is displayed as a colored circle. The low color/text and high color/text settings determine the colors and text. |
Analog Channels (Tags)
| WIDGET TYPE | EXAMPLE | DESCRIPTION |
| TEXTBOX |  | The header text is the channel name, the header color determines the alert status, and the latest value and units are displayed as text. |
| ROUND GAUGE |  | The header text is the channel name, the header color determines the alert status, and the latest value and units are displayed as an analog gauge with the value/units as text along the bottom. The gauge minimum and maximum are determined by the Range Minimum and Maximum settings in the channel configuration for this widget. |
| LINEAR GAUGE |  | The header text is the channel name, the header color determines the alert status, and the latest value is displayed as a linear gauge and the value/units are displayed as text.The gauge minimum and maximum are determined by the Range Minimum and Maximum settings in the channel configuration for this widget. |
| VERTICAL TANK |  | The header text is the channel name, the latest value is displayed as a colored bar and as text. The bar color indicates alert status. The fill color setting determines the bar color when there are no alerts; the bar is red when there is an active alert .The gauge minimum and maximum are determined by the Range Minimum and Maximum settings in the channel configuration for this widget. |
Writable Widgets
When the "Writeable" property of a channel is set to true, the user can change the value of that channel in the HMI. When the user changes the value of a writable channel, the new value is pushed to the Smart.Hub which in turn writes the new value to the tag in the PLC. Once the new value is written, the Smart.Hub acknowledges the transaction so that the user can know that the update was sucessful.
When a widget is placed on a HMI for a writeable channel, the widget is outlined in Blue to indicate that the value can be changed in the HMI:
To change the value of a writeable channel, double click the widget on the HMI and select the new value.
Once you have set the new value, the widget will update to show the status of the update process:
There are three possible status messages:
"21 Gallons Pending" - this means that the new value of 21 gallons is being written to the PLC
"Command Successful" - this means that the new value was successfully written
"Previous Command Failed" - this means that the write failed and the value was not updated.