Status indicators

Description of a feature
More often than not we need a way to display an indicator of a machine status into our visualizations. This guide will show you how to make such indicators effectively using custom styles and style bindings.

status

Instructions
First of all you need to create a shape that will be changing colours according to the current
status. Go to: Toolbox → Elipse. Leave all of the properties as default.
Then you need to create your UserDefined style, go to: Toolbox → Style and add it under StylesSet. Into this style you can add all of user defined style changes, so they are in one place. After that you need to name its ID and add this ID to the StylesSet of the theme. In the file named UserDefined.styles you need to add the styles of the indicators. Then, name the IDs of each style, this will be used for the value of a session variable later.

Now you need to create the session variables that will be used to change the style property of the elipse widgets. Click on the folder variables in the mappView folder and add session variables file, go to: Toolbox → SessionVariable. The value of the session variable must be the corrsesponding ID of the user defined style of the elipse widget.

Then you need to go to the properties of the elipse widget, and make a binding to its style
property. Select List on the bar of the pop-up window. As Selector, select OPC-UA and pick the status variable that you want to dispay. As List definition, select Variables and under Session Variables pick those corresponding to your desired style change, in our case GreenColour and GreyColour. Add those and lastly you need to change their key, this key is connected to the value of the OPC-UA (boolean) variable so when that is changed, the style is also changed. Make sure you use small case (true, false), this binding is in its essence just an XML file.

This is a more effective and optimal usage of mappView, than using two overlapping widgets,
where one is visible while the other is invisible if the status value is set to true and vice versa.

NOTE: It is not recommended to name the style same as the colour you are using in that style.
Imagine you name the style RedColour for warnings, but then you change the warning colour to yellow and red colour will be set for emergencies…
Your style naming should be as general as possible. Such as: SwitchedOn/Off, Engaged, Paused, Error, Halt etc.

Now, you should be able to replicate this feature into your own projects.

(TODO: add a link to the pdf)

7 Likes

Hello Jan.
I have a trouble with styles. Can you please share you code via email or here. I need page binding XML where session variables binded to styles. Thanks a lot . Sergei

This is great, thanks a lot for this information!
We’ve solved this problem by creating compound widgets and add properties for selecting which colors to use. But this seems to be far easier! :slight_smile:

I’ve solved my problem. In the SVG pictures I used was not specified “style” properties.
Now everything is working.

I am attaching a pdf version of this topic for your reference.
mappView_StatusIndicators.pdf (704.5 KB)

I built a circular indicator light compound widget. As long as the on-screen footprint of the widget keeps a square shape, the indicator should be resizable and should have a 3D-like gradient.
My goal for sharing this compound widget is to let new users display Boolean status in mappView in as few steps as possible.
IndicatorLightLibrary_1.0.1.zip (4.7 KB)

1 Like

Thanks for sharing, open source makes B&R stronger!

1 Like

Wait a minute… Either I uploaded an outdated compound widget or I made a better version after my original post.
This is the ready-to-use compound widget that you should use if you want an SVG-based indicator that can blink:
IndicatorLightLib_1.2.0.zip (17.0 KB)