Picture as mouseover text

I'm trying to display a picture as mouseover text with vision.
I figured out using a bit of HTML code such as <html><img src='file://localhost//C://1.jpg'/> works fine.

Hoewever, now I want to view a picture from the image management.
As far as my knowledge goes these are stored in the internal db so I don't have a location path which I can use.

Is there any way to get around this in order to display an image from image management as mouseover text?

Thanks in advance!

The images in image management are actually automatically hosted by the gateway webserver. You just use the path to the gateway, followed by /system/images/$yourImage.

This page is about Perspective's image component, but it relies on the exact same approach:
https://docs.inductiveautomation.com/display/DOC81/Perspective+-+Image

If you're on 7.9, you'll need to add a /main, I think - so address:port/main/system/images/path/to/image.fileType.

You may also find these useful:
https://docs.inductiveautomation.com/display/DOC81/System+Tags#SystemTags-SystemClientTags(VisionOnly)
https://docs.inductiveautomation.com/display/DOC81/system.util.getGatewayAddress

2 Likes

I've been experimenting with this, and it took me a while to figure this out using built in icons.

I used this to find the gateway address:
print system.util.getGatewayAddress() and it returned: http://localhost:8088,

so naturally, taking the original working code from @Corne_de_Jonge combined with @PGriffith's suggestion, I tried: <html><img src='file:http://localhost:8088/system/images/Builtin/icons/24/check2.png'/>,
but that does not work!

file has to be changed to url, so the final and working code looks like this:
<html><img src='url:http://localhost:8088/system/images/Builtin/icons/24/check2.png'/>
The preceding code on a button's Mouseover Text property produces this result:
image

1 Like

You should be able to drop the url: prefix.

2 Likes

You are correct @pturmel. I just tested it, and that works as well.

1 Like

Just as everything seemed to work perfectly, I encountered a small but challenging problem.

I am now trying to flip the (mouse over) picture in my HTML code. For now I have:

<html><img src='url:http://localhost:8088/system/images/Builtin/icons/24/check2.png' style='transform:rotate(90deg);'/> 

However, it doesn't seem to have affect. Anyone has a clever idea?

Could you create another png file that is already flipped, and link to it instead?

1 Like

That is possible for sure.

However, I'm applying this to a project in which there are a couple of dozen pictures which need to be flipped. It would be a real time saver and neater if we could get this working with a bit of HTML code.

Unfortunately, as I understand it, Vision uses an antiquated version of HTML that offers very little in the way CSS style abilities. There is no "built in" way that I am aware of that can flip the image in the mouseover text.

1 Like

On that note, I developed a script that will accomplish what you are wanting to do. It reads the stock image, flips it programmatically, and subsequently saves it to the client's cache file. Then, it assigns the html path for the newly created file to the designated mouseover text property.

Here is the result:
image

Here is the script:

from java.awt.image import BufferedImage
from javax.imageio import ImageIO
from java.net import URL
import getpass
username = getpass.getuser()
path = "C:/Users/" + username + "/.ignition/cache/"
url = URL("http://localhost:8088/system/images/Builtin/icons/24/check2.png")
image = ImageIO.read(url)
flipped = BufferedImage(image.getWidth(), image.getHeight(), image.getType())
for x in range(image.getWidth()):
    for y in range(image.getHeight()):
        flipped.setRGB(x, image.getHeight() - y - 1, image.getRGB(x, y))
ImageIO.write(flipped, "png", open(path + "flipped.png", "wb"))
event.source.toolTipText = "<html><img src='file:///" + path + "flipped.png'>"
3 Likes

Thanks!

It's a shame that it has to be so complicated due to lack of CSS style abilities, but if we can get it working with this would be great.
Going to test it soon, will let you know if it works for me too.

1 Like