LED Indicator missing in perspective

[Flying55]

Beginner questions..

I would like a simple LED indicator lamp to be used in many places in my application. It should be lit when true, and grey when false.

The standard components does not seem to have anything like that.

I can use and bind colors with a led from the symbol factory and edit that one to have binding of the state of the tag.

What i would prefer is to make that a component so i can resue it in many places without copying the same thing.

Creating a view and adding it as an embedded view is a way, but isnt there a more elegant way?

Or is there a component i can use?

[David_Stone]

There’s no such thing as a LED indicator lamp on any form of SCADA. LED is a physical light source, SCADA exists on screens that display graphics.
If you need an image of an LED indicator that changes colour, use an image from symbol factory or similar.
If what you need is actually a circle with a colour and maybe a border that you can bind to tags, use either an icon or an SVG circle you embed in the view.
You can also use a label with equal width and height and add a border radius of 50% in the style and it will make a circle you can apply a background colour to.

[Transistor]

You can make circular indicators very easily using the Label component.

Figure 1. Properties for the green LED.

Notes:

• Use the pre-defined theme colors wherever you can for consistency. To change the color on the LED create a binding on backgroundColor such as
  if({propertyOrTag}, '--success', '--neutral-50')
  where {propertyOrTag} is a boolean value you want to indicate.
• I've set the label to 32 × 32 px. Setting the border radius to 50% saves having to modify the radius values if the indicator is resized.

I really recommend that you create a Perspective style class for each indicator state and use that instead in the style.classes dropdown. It means that if you ever want to adjust the theme you only have to do it in one place and your whole application will update in one go. It's the way of the web.

Figure 2. The LedGreen style definition.

Copy and edit the style for LedRed and LedOff. (You should consider not including the color in the style name. e.g., Use LedOkOn rather than LedGreen. That way when you switch to using white for 'running' as recommend by High Performance HMI standards your naming conventions will still make sense. i.e, The style class name should define its purpose, not its appearance.)

Figure 3. Now assigning the style to the label is as simple as selecting the pre-defined style class from the classes dropdown.

Now you create the binding on the classes property:
if({propertyOrTag}, 'LedGreen', 'LedGrey')

[andrew.budaiev]

You can also use Drawing Tools and draw a circle.

[JordanCClark]

@David_Stone

There’s no such thing as a LED indicator lamp on any form of SCADA. LED is a physical light source, SCADA exists on screens that display graphics.

And yet lamps abound... a holdover from when all we had were lamps to indicate things and digital watches were a neat idea.

[Transistor]

You might also like a radial fill:

Add this to the background-image property.
radial-gradient(farthest-corner at 20% 20%, #00ee00, #007700)

[Flying55]

@David_Stone

There’s no such thing as a LED indicator lamp on any form of SCADA. LED is a physical light source, SCADA exists on screens that display graphics.
If you need an image of an LED indicator that changes colour, use an image from symbol factory or similar.

Often we only want to have an indication if a switch is in a on or off state, like if a door is closed or open and so forth.

Since there is no such thing in a scada, what is the best way to indicate if it is on and off, I mean what is the general prefered way to do it?

[Matrix_Engineering]

Have you read, ingested, and tried what @Transistor has suggested? They have offered a couple of options with detailed implementation instructions.

[Transistor]

Here the indicator label's style class has an expression binding to a custom property controlled by the toggle switch. This is as explained in post #3.

[Flying55]

Thats an elegant solution, I ended up using drawing tool and changed colors with a tag and transform which is worse, but if i need later on to I’ll change to what you have suggested.

[nminchin]

@Transistor

really recommend that you create a Perspective style class for each indicator state and use that instead in the style.classes dropdown. It means that if you ever want to adjust the theme you only have to do it in one place and your whole application will update in one go. It's the way of the web.

One step further, split it into colours and the base led styling. Eg. Take the colour out of the base led styling to prevent duplication of styling (and therefore mistakes and modification hassle)