Binding image to tag value and having color change

Good evening, and thank you all, you guys have been very helpful to me over the past week or so answering my questions, regardless of rudimentary of an issue it may seem. I do have a new one though. I am playing around with designing a layout for an electrical substation. Since there are no prebuilt components such as breakers and what have you in the ignition library, I downloaded the IEC 61850 project available on the exchange and I was able to import those graphics into my image manager. So far so good, I did find out however that you can bind that image to a Boolean tag and use a transform like you can with the components. How would I do this? I also can't seem to find out how to get the image to change from one color to another based on its state. Any guidance on this would be greatly appreciated. I thank you all again, and sorry this post got long.

This sounds like a headache with images. I would recommend finding some SVGs that you can change the color of based on the state of your tag.

I'm struggling to find any SVG's on the greater interwebs that more or less accurately show things like "a breaker" and things like that. But lets assume for a moment that I can, how would I import an SVG in, without it being typed as an image? Sorry if this seems like a beginner question, its because it is one hahaha

Have you got an example of what you call a "breaker" image? With Inkscape it takes seconds to build an SVG, then you can drag it into ignition and use embed then its available to use in your project.


This is what I pulled out of the IEC 61850 project that was on the exchange. Its pretty standard for how they are shown in the industry. When its open its green when its closed its red. The project only had the green thumbnail, but if I wasn't supposed to import it into images and bring it in some other way, probably the reason why

You can use a map transform on a binding to change the path to the image for an image control. I wouldn't recommend doing it that way though.

Hands down, the best way to animate graphics in Perspective is to animate an embedded SVG.

When you drag an image into Ignition it will default to adding it to the image library. Look for a radio button to select "embed" instead. This will make it an embedded object within your view and you can animate aspects of that with CSS and value bindings.

As others have said, you can draw SVGs in Inkscape and embed them.

1 Like

I'm having trouble even trying to locate that IEC symbol.

Anyway, you should be able to find at least some of the symbols you're looking for on the web.

Searching for a couple of minutes I found this.

FWIW IEC 61850 is a communication standard, not a symbol standard. I think there are many ways to depict a breaker, but I've never seen that one.

This one is paid but seems like they've got some nice stuff. Just shows that it's out there if you really look hard enoght.

This was the project on the exchange that I pulled that image from. I’m going to assume I missed a step because it says in the description that the graphics are supposed to be, for lack of a better term, interactive.

[//cdck-file-uploads-us1.s3.dualstack.us-west-2.amazonaws.com/inductiveautomation/original/3X/c/c/cc235f5ca8db14ced8ba8f4ad131ed6c1c300efd.png]

[//cdck-file-uploads-us1.s3.dualstack.us-west-2.amazonaws.com/inductiveautomation/original/3X/b/7/b713b2165502021fa8ecab5a8dd2de477cf32ca5.png]

(attachments)

I downloaded the exchange project, the breaker is fully configurable with parameters as shown above. When you drag the "Breaker" view into your layout view, you can bind to the params, for example the "open" param can be bound to a boolean and it will change state and colour automatically.

1 Like

I looked at the link you sent, at the end of the page it had one that was green and one that was red. Would I just set the green one if the value is true, and then the red one if the value is false? Animation isn’t a huge need at the moment, down the road definitely, right now it’s just about getting familiar with the system and being able to put some visuals on the page.

[//cdck-file-uploads-us1.s3.dualstack.us-west-2.amazonaws.com/inductiveautomation/original/3X/c/c/cc235f5ca8db14ced8ba8f4ad131ed6c1c300efd.png]

I think you started off with the wrong question about this project.

  1. This project that you downloaded does not look like it uses images. It looks like components are made with SVGs at the template level.
  2. As @David_Stone pointed out they're configurable via parameters
  3. If you need to change colors or text dynamically do so with different tag bindings

Brian, you seem to be replying by email which is including your signature, address and email address!. FAQ - Inductive Automation Forum Keep Tidy section requests that we don't add signatures to our posts. You can put them in your profile if you want - but I wouldn't be posting my email address for spammers to harvest.

If you must post by email you need to figure out how to turn off your auto-signature. I recommend you clean up your posts above. Thanks!

3 Likes

I figured I was missing a step, and or just doing it completely wrong. I’ll have to revisit where I went wrong. Thank you very much

[//cdck-file-uploads-us1.s3.dualstack.us-west-2.amazonaws.com/inductiveautomation/original/3X/c/c/cc235f5ca8db14ced8ba8f4ad131ed6c1c300efd.png]

Brian! Read Transistor's comment. Stop using email to post until you can configure your email to avoid including your signature.

Sorry about that, I had to step away from my computer and was multi-tasking with a 5 year old and didn't see the message fully from transistor. Thanks for pointing it out.

You guys are amazing thank you so much. I was able to figure out how to bind it to a toggle switch and get that write to the Boolean tag. Not a huge victory but it feels like one. So thank you all again.

You still haven't cleaned up your prior comments.

2 Likes