How do you change the color of a line widget when OPC-UA value is changed.
It is not possible to bind something to the color, but it is possible to bind something to a style.
You can create multiple styles for the line widget and then use a binding to switch between the styles. The binding must contain a string of the style ID.
Note that it is also possible to change styles in eventbindings.
2 Likes
if you do not want to use solution with style changing, you can layer more lines with different colors and control visibility using property visible and binding OPCUA value to it.
1 Like
I still couldn’t get the color change. Only the lineCap changes. That’s the only style property that I could change.
Is there a tutorial that explains clearly on to change styles in eventbindings
You have to define linecolor in the style e.g.
And then use event binding, value change and use condition to select proper one.
3 Likes
Just a side note. The Style will only change correctly as long as the widget you are trying to change doesn’t have any local style edits.
2 Likes
Can you explain more on local style edit. I didn’t get it.
Sure I’ll try my best with a quick example.
There are 3 buttons
- left button is style “default” but with style changes only for this widget.
Local changes are always BOLD in the editor
- the right button is style “transparent” without any local changes
With the ToggleSwitch the style of the center button is switched between default and transparent but you can see that center and right button styles are not the same when transparent should be active. That’s is because the button we are trying to change style on has a local modification that the style change action doesn’t overwrite.
With all local style changes removed the style change works correctly.
1 Like
How do you remove local style changes. In the properties window of the widget? Can you please explain on this.
Sure, just right click the appearance property you want to reset/remove and a Reset button will appear. Click that and this property is reset to default from the selected style.
You could also do it with a text editor if you have many widgets or many local modifications but that can get you into trouble quickly if you aren’t exactly sure what you need to remove to reset the local style properties.
And as side note. Make sure the “Hide Style properties” button isn’t enabled since that hides all appearance properties which can be very nice to declutter the property window.
1 Like
I tried it but couldn’t change the style. It is always the default color(orange) that comes. The bar color is reset. I used the Progressbar widget.
@c539393 Sebastian
Did you create a new style for the ProcessBar under your active theme? If you have multiple themes in you project you have to have the same style ID in all themes. They can have different values but the ID needs to be the same otherwise your style switching works in one but not the other.
If you haven’t, please look for the ProgressBar style entry under Default.styles.
Copy the default style, rename it, add the barColor property and define the color you like for it.
In your EventBinding you use the SetStyle method to change the style for the ProgressBar to the new style you just added, in my case “red”. If you use the graphical editor the drop down provides you with the available style for this widget.
In text format it looks like this. In my case the default style is set whenever the ToggleSwitch is false.
Marcel,
I tried again and couldn’t get the style changing. Can you sent me a snap shot of the properties window of both widgets. Also a snapshot of visualizat.vis. Not sure where I am getting wrong on this.
Sebastian @c539393
I do you one better!
I have attached a zip file the you can either import directly into an AS project (new one preferred) or unzip and bring in the files individually.
In summary this is really just the added red style for the ProgressBar under Default.styles,
the ProgressBar and ToggleSwitch widgets in a content,
and the EventBinding with the SetStyle action.
In the Vis file you will see the Page, the EventBinding and the Theme referenced
Let me/us know if this does the trick for you!
StyleChangeSample.zip (28.7 KB)
1 Like
Marcel,
It works now! Thanks for your help. I have another question for you, can a widget line drawn as seen below
(Attachment Visualization vis_0 - Google Chrome 2024-03-12 08-22-24.mp4 is missing)
Marcel,
It works now! Thanks for your help. I have another question for you, can a widget line drawn as seen below
Is the line static or drawn interactively? Unfortunately the video you attached is missing. Maybe try to upload the video again?
It will be static but will change color depending on motor switching. But I need to draw these shapes to represent motors feeders supplying material to a hopper.
I see two options.
-
depending on how many states you have, draw them as SVGs and use the ImageList widget (B&R Online Help) to switch between them while also being able to change the color which may reduce the number of images you need.
-
use the Paper widget (B&R Online Help) in order to draw the lines on the fly in PLC code using the svgContent property. That would require the premium license and PLC string handling code, in addition it’s a class C widget.
When you draw SVG images make sure the color is “Unset” so it can be changed during runtime.
You can check if the images changes colors correctly in the offline editor by changing the imageColor on the image you would like to use. Remember to set the default color before trying to attempt changing the color online with an action.
If the color doesn’t change the SVG contains a fixed fill color and you need to modify/remove it.