A Compound Widget is a collection of standard widgets prearranged into some configuration. Like any other widget, compound widgets have a collecting properties, some of which can be bound to OpcUa variables. I think that a compound widget makes sense in your case.
Compound widgets (like most things in Automation Studio) are defined using XML. XML uses parent and child tags, where each child can have children of its own. A “tag” is defined such that everything in between the start and the end (which I can’t type here since it gets formatted out) is the information associated with that tag. XML is a pretty commonly used language so while I don’t know of any B&R documentation that thoroughly describes how to use it, there are plenty of resources online that can help you if you want more information.
A compound widget has a handful of availble top-level tags, and there are two that will help you:
- Widgets - the widgets you want included in your compound widget
- Property - properties of the compound widget (styling, information to show, etc.)
When you add a compound widget to your project you’ll get a template file that has the XML tags and some comments containing helpful examples.
The first step in creating a compound widget is to define the widgets you want to include within your compound widget. The easiest way to do this is to lay the widgets out within a Content in the graphical editor, and then copy and paste the resulting XML into the Widgets tag as described here.
Then, you have to define the properties of your widget. In your case, you’ll want to define two bindable properties - the color of the box and the text shown in the description. These properties will then link to the bindable properties already available for the widgets within your compound widget.
When you add your custom widget to a Content, it will appear like any other Widget. The Properties tab in Automation Studio will have sections where you can bind a STRING variable (just like you’re using a TextOutput) and another variable for changing the color of the box. The exact variable will depend on how you create the box (rectangle, image list, etc.). You can then bind your distinct OpcUa variables to the properties you created just like you would with any other widget. Since a custom widget gets included in a Widget Library, you can add other assets to the library as you need (e.g. images).
One thing to note - Compound Widgets are just a collection of other widgets collected into one widget. This means that you’re not exactly making something new, rather you’re rolling both widgets into one to avoid copying and pasting the same collection of widgets multiple times. This means that you can only edit properties that exist for the base widgets. For example, when you add a Rectangle to your page, the only bindable properties are Enable, Style, and Visible. In addition there are many non-bindable properties that can be accessed. You can’t modify these base properties because you’re not editing the base code for a rectangle; you’re just using what already exists.
For a completed example, check out this post.. The last message in the thread contains a custom Indicator Light library which has a compound widget consisting of an image list that can show three different images.