SVG image trick - visibility

[mstjohn]

In this post under Code Samples and Tips I shared a couple little sample games, one of which included a gopher which appears and disappears. While doing this is not exactly a HP HMI ([URL=“http://groov.com/high-performance-hmi/”]high-performance HMI) best practice, it can be entertaining.

I leveraged an SVG (scalar vector graphic) which groov uses mostly because they scale beautifully, as you probably know from watching our groov videos and webinars.

Here’s the trick I borrowed (along with the gopher) from my very clever graphic artist coworker: I set the “True” color of an LED to be black, and the “False” color to be the same color as the SVG image, so it’s “invisible” when the value is false. Now you see it, now you don’t!

FYI - there are lots of SVG images to be found on the Internet, and even tools to help you create your own (they’re just text files).

-OptoMary

[mstjohn]

To clarify the “trick” above – the image/gopher is gray with a transparent background (that’s a nice thing about SVG, you can do transparent backgrounds).

I put the static image on top of the LED gadget, that’s tied to a on/off tag. I configured that LED to have the same gray color as the image, and black otherwise. So, when the LED is the same color as the image on top of it, you can’t see the image. Otherwise, the background contrasts and TA-DA! You can see the image.

Hope that makes sense!

[Kellansilas]

hmmm nice thanks Mstjohn my friend suggested me to visit your forum. Very well explained. I would like to say that it is very interesting to read your forum keep sharing.