Style Class Custom Element State

Ignition
1

Hello,

Looking to define a style class for a device, say a motor. This device will have 4 states, each of which I want a different fill color for. I would like to create a single style class called “motor” and use a custom element state to define 4 different sub styles which vary by fill color. Any ideas on this?

Thanks,

Frank

2

CSS states are ‘hardcoded’, and custom state sets are an experimental feature only supported on Chrome & Chromium derived browsers.

Even if you could define custom element states, how would you pass in which ‘state’ a motor should be in to the component, and how would that differ from just selecting a given style class?

3

This may not be exactly what you’re looking for and slightly off topic, but…

What I do in my device udts is create two memory expression tags that hold the descriptive states of the mode and status of the device. For example, the status tag from the plc might be an enumerated integer where 0=stopped,1=running,2=Faulted. The ‘StatusDesc’ tag would evaluate to the descriptive state.

Then, I have P. Styles for Device/On, Device/Off, Device/Faulted, etc. which are generic for any device status. To use them in my device graphics, I simply bind to the style.classes looking at the descriptive status and use a map transform to assign the style, e.g.

value         return 
Stopped    Device/Off
Running    Device/On
...

This effectively abstracts your plc logic (the tag enum or combination of multiple tags) with your graphic logic. The graphics only care what descriptive state it’s in which is determined now by your UDT tag, and now you’re free to use your graphic templates for more than just a device which adheres to the same plc tag logic for those states

4

Hi guys,

Thanks for your replies. I guess I am just so used to the vision style customizer. Old habits die hard!

5

What the style customiser lacked though is the ability to globally define styles for common things and especially the colours used. Although you can use a cell update binding to bind colours stored as RGB/HEX inside of client tags, cell update bindings are awful to actually use as they can only bind to properties and not tags.
To be honest though, the style customiser isn’t that different to a map transform that returns style classes.

6

I agree being able to globally set these is a big plus. Thanks again guys