Learn how to color parts of scalable vector graphic based upon a tag value.

Video recorded using: Ignition 8.1


(open in window)

[00:00] In this lesson, I'll demonstrate how to dynamically color part of an SVG in Vision to give a visual indication to users of a changed state. I'll start by pulling in an SVG from the Symbol Factory. I'll demonstrate this with a motor. So I'll find one I like from the motor section and go ahead and drag it into my window. To review, SVGs are made up of several individual components. I can double click the motor and drill into the components within each group. Once I select the path that I want to color I can go down to the Property Editor and create a binding on the Fill Paint property. You could set up any type of binding here, but for my example, I have an OPC tag that will represent the state of my motor. I'll select a tag binding and I can pick my tag. You'll notice that there's a number to color translation area below the tag picker and this can be used to pick which tag values correspond to which colors. I can add or remove cases here and also select a fallback color. For value of 0 I'll pick red.

[01:08] Or one, I'll pick green. And then I'll add another row for a value of 2 and I'll select yellow and then make it blink orange. I'll hit OK here and then I can start changing the value of my tag. You can see my tag in the tag browser here. It currently has a value of zero in the motor is red. If I change it to 1 the color will change to green finally if I change it to two it will blink yellow and orange.

You are editing this transcript.

Make any corrections to improve this transcript. We'll review any changes before posting them.


Share this video