You can help by commenting or suggesting your edit directly into the transcript. We'll review any changes before posting them. All comments are completely anonymous. For any comments that need a reply, consider emailing training@inductiveautomation.com.
Version:
LESSON LIST
-
2:16Color SVG Dynamically
-
3:08Tint SVG
-
2:01Tank Cutaway
-
3:37Component Animation
Take Topic Challenge
LESSON
Color SVG Dynamically
Description
Learn how to color parts of SVGs (vector graphics) in Ignition.
Video recorded using: Ignition 7.7
Transcript
(open in window)[00:00] One useful HMI technique is to color individual parts of SVG or vector graphic. Whether we are bringing in a vector graphic from Symbol Factory like this motor I have here, or taking an SVG from our computer. Like here in my documents I have a Network Switch that I can drag into the window, to that SVG file. Regardless, vector graphics, we can easily color individual pieces of them. When you drag a vector graphic onto a window, it's not just one flat image. It's actually comprised of many paths. If I expand that vector graphic in the Project Browser, I can see it's made up of many different pieces. Each of these pieces can be colored independantly. So here for example, if I click back on the motor, I can actually double click to select individual pieces. Like maybe I want to click on this square. And if I double click again, there's the square, and you can see that every individual path has a Fill Paint property that we can actually dynamically change based on a value from a PLC. I'm going to bind this Fill Paint property to a tag, I'm going to go and select Switch 1 here, If the value is zero, I'm going to make this thing red. If it's one, I'm going to make this green, and if it is two, I'm going to blink between yellow and orange. As soon as I press OK on this, You'll see that now, that part of the graphic is going to change based on that tag. If I go over here and write zero to that Switch 1 tag, you'll see it's going to go red. If I put it to a two, I'm going to see it go the the blinking stage between yellow and orange. So you can easily pick apart individual pieces, and color them. The same thing's true here for SVG. It's also a vector graphic. I can easily go in, double click and click on individual pieces like all these little squares here. I can bind each one of those independantly. I'm a click on the first one, I'm going to bind the Fill Paint property to a tag, I'm going to click Switch 1 again, if it's zero I'm going to make it gray and if it's one, I'm going to make it green, saying that it's on. Then I'm going to do the same thing for the second one here. I'm going to bind that Fill Paint to a tag, selecting Switch 2. If the value is zero, I'm going to make it gray. And if it's one, I'm going to make it green. We can keep doing them. All the individual pieces going in to different tags. And now you can see that as I switch these, you're going to see the lights on that switch turn on or off.