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.

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.

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.