Change Alignment of LED Display

Hi, I’m working on a project in Perspective and I was wondering if there is a way to display an LED Display on the left side of the field instead of the right?

I played around with it for a few minutes but couldn’t find a way. You can’t even reduce it to a single digit to stitch four together.

But I’m wondering why in 2022 you are trying to make a web HMI look like something from 40 years ago?


I don’t see anything obvious. The LED display is a manually generated SVG file, so most CSS styling you can apply is irrelevant.

1 Like

Because this is what the customer wants? We are replacing a Vision system with Perspective for a customer who wants it to look the same as the previous one. I would like to be able to centre the characters in the LED display.

1 Like

OK, but LED displays would (and numerical values should) always be right aligned so they line up by units, tens, etc. By the way, your question says left-aligned and your reply says centre-aligned.

Thankfully I’m allowed to want something different from the OP (by the way).

Could a similar result be achieved by using a label with a a digital-7 font and a custom theme instead of the LED display component?

It can be done, but it’s very complicated and fairly resource intensive.
Screen Shot 2022-01-13 at 1.38.33 PM
My solution included the use of a View Canvas, where the instances array is bound to a numeric value. That value is dissected in a transform, and each digit is split into a separate instance (and spatially offset) and passed along as a parameter to a View which expects just a single digit. So what you actually see in that screenshot is a functional LED Display comprised of 8 instances of a View (7 characters + 1 additional render to fill out black space to the right).

The same approach could fairly easily be modified to “center” the value.

could upload images of the numbers

then use a transform to get the images

Might be a little less resource intense, but still a lot of work

since you make the images, you can control the location

That’s actually even more resource intensive, and it’s also limited in how you can style it. You’d be hard-pressed to change the color of the numbers or their background, whereas the View Canvas route allows for the same visual options as an LED Display. You can also use the Meta tooltip because you can apply it to the View Canvas instead of the individual digits.

ah, my knee jerk reaction was that was not good
I think you mean that the way of using the canvas view is just less resource intense.
You don’t mean that pulling images is resource intense?

that is not good

I thought pulling images would be less resource intensive.
I have been doing that on some pages for self diagnosis to show where issues are located at on big machines for operators.

I don’t think the images would be cached (maybe they would), so each time you update the number you would be re-obtaining the images. This is not only additional bandwidth used, but that’s a lot of additional load on the Gateway. You’d also need to store those (small) files either in a DB or as WebDev resources; they’re small enough it’s not a big impact, but you’re looking at 12 files (0-9, “,”, “.”) as opposed to the two files used for the View Canvas approach (“component” view and the “instanced digit” view).