This lesson is part of the Components and Property Binding course. You can browse the rest of the lessons below.

LESSON LIST

Autoplay Off

Description

Learn how to apply a tint on SVGs (vector graphics) and Symbol Factory graphics.

Video recorded using: Ignition 7.7

Transcript

(open in window)

[00:00] A vector graphic is made up of several different paths and is not just one component. So it is possible to cover individual parts of the graphic. Take this motor here for example. If I double click inside the motor to get to this individual square here I can change the color of it. As you can see, this square is just one of many paths that make up this particular graphic. So rather than just coloring one piece of the graphic, sometimes we want to color the entire graphic. And that presents a problem here. The problem is there are so many different paths that make up the graphic, that we have to go to every single one of them to bind the fill paint property here to a tag to change the color. So rather than going to every single path there is an easier way. We can actually apply a tint on top of the graphic. So there's a couple steps to make this happen. The first is to select the overall graphic here, that you got from symbol factory or SVG. Once you have that graphic selected you want to duplicate this object so we have two of them. You are going to press CTRL + D or go up here to edit and select duplicate. Now I have two of them. They are right on top of each other. You can see in my project browser I have motor five and motor six. I can move that top one around just so you can see there are two of them. I'm going to put them right back on top of each other. It's important they are on top. The second step here is to then flatten that second object, the one we just duplicated. We can do that by going up here to shape and selecting union. Union will flatten any paths together as one graphic. As you can see up here in my project browser it is now just one path. By being one path of course, down here at the bottom we can modify the fill paint and the stroke paint. Typically what I want to do is of course remove the stroke. So I'm going to go here to stroke paint, and I'm basically going to select the first one which is making it transparent. So no paint. As you can see now it's just a white graphic that's the outline of the motor. Now what we can do is color that piece. And we can actually make those colors semi transparent, so I can see behind to the graphic that we have behind it. So I'm going to bind the fill paint property here to a tag, and I'm going to select my state tag. The value is zero, I'm going to make that color red. Now it's important here we click on the color wheel to actually go down and set the alpha, the transparency down to maybe you know 40 percent or 35 percent or whatever. So I'm going to select mine at 35 percent. You can see it has a little checkered area behind there, let's you know that's somewhat transparent. Do the same thing for one, I'm going to make it green. And green, I'm going to make it semi transparent. Again I am going to choose 35 here for the alpha. Do the same thing for two. If it's two I'm going to make it blink between yellow orange. Select yellow, again set that alpha down to 35. Do the same thing on the blink with orange. Select the orange, again click on the color wheel make it 35. So basically all my colors here are semi transparent. So as soon as I press OK, I will see the whole graphic looks like it's green. But what's really happening here is I have a graphic on top, that is semi transparent as you can see. Now you want to keep them right on top of each other, and after you set up this whole thing you can typically select both of those graphics by highlighting them, right clicking, and grouping them. So now you can move them around the screen as one unit. If I go over here and change the state to a value of zero I'm going to see it go to red. If I go here to two, I'm going to see it blink between yellow orange. So that's a really cool technique that we can use with any symbol factory graphic or SVG.

You are editing this transcript.

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