How do I load images on a popup windows dynamically?

Our user wants to know some information about his/her tanks at their factory. The tanks might change contents in the future though so they need to load information from the tanks dynamically.

I want to have them press a button on Tank 1 and dynamically load information on the chemical in Tank 1. If in the future they change over to a new chemical the button should load information on the new chemical. I have images of chemical info but how do I load that information dynamically?

A low fidelity answer would be to simply overlay the images and change visibilities depending on the chemical in the tank, which you could store in a tag or something.

First thing I could think of, probably not ideal depending on the amount of possible chemicals.

These chemicals that are in the tanks - they have their own database table? Upload the images of the chemcals to the gateway. Then you have a few options.

One thing I’ve seen is to store the paths of images in the database tables. So you would query for SELECT imgPath FROM chemicals WHERE idx = %i in a image path property binding. This does require you to update the databsae if you end up moving images around on your gateway image management though.

Similarly, if you only have a handful images it could ever possible, you can again bind a image property binding to something like if(CONDITION, 'imagepath1.jpg', if(CONDITION2, 'imagepath2.jpg', 'imagepath3.jpg')).

Again with both these methods keeping the path consistent is important, so if you move a image from one folder to another on the gateway youre expression or database field will have to change.

I know you can store images on a database as a Blob type, but I am not sure how you would load that up to an ignition component. Maybe someone else could speak on that, but it would eliminate any path issues.

1 Like

I will look into this.

My first attempt was to load images chemInfo1, chemInfo2, chemInfo3 into their own folders ‘chemInfo/1/chemInfo1.jpg’ and so on. Then I passed the value ‘1’ from a variable to the popup and finally linked the image path on the popup to an indirect tag 'chemInfo/{1}/chemInfo1.jpg.

But the image path, even though tied to this variable correctly, is refusing to load upon screen creation. A bug possibly? Or I don’t really understand how images are loaded.

At least in the way I’m picturing your configuration, I don’t think indirect tag would work. You could do it within an expression though to pull in that tag value and build the path though.

1 Like

Double check the path. It is 100% correct? What type of component are you trying t display it on?

@grietveld - This worked, thank you! Final syntax looks like this: “ChemInfo/” + {Root Container.Tank1} +"/chemInfo1.JPG". The path is case sensitive in case anyone is wondering including the “.JPG” at the end. I had put “.jpg” and it did not load.

1 Like