Nick Mudge Ignition Software Consulting & Development

Normally images in Ignition are stored in the Ignition gateway, not in Ignition projects. This makes it easy to reuse the same images in multiple projects, but it makes projects less portable because images used in projects are not exported with projects.

So you might add your own special icons and images to Ignition and use them in your project. Later you export your project and send the project export file to a colleague. Your colleague imports the project into a different Ignition server and the images are missing. Ah man, too bad. This blog post shows how to solve this problem so that your images stay with your exported projects.

One way to solve the problem is to use SVG graphics within your projects. SVG graphics are components in Ignition and are saved in Ignition projects.

However if you want to use jpeg and/or png images in your projects and want them to be exported as part of project files, follow the steps below.

Or you can just watch this video: How to Store Images In Ignition Projects

How to store jpeg and png images in an Ignition project

Step 1.

Create a new client tag with the tag path and name, "project_images". Make the value of the tag an empty dataset. This client tag is where the project images will be stored.

Step 2.

Download this project file: ProjectImagesTemplates.proj. Click on the link to download the file.

Import that project file into your existing Ignition project using the Designer.

The project file contains two Ignition templates: The ProjectImageStorage template and the ProjectImage template.

ProjectImagesStorage template:

The ProjectImagesStorage template is used to upload and manage images in your project.

ProjectImage template:

The ProjectImage template is used to display images that are stored in your project.

Step 3.

Open the ProjectImageStorage template in the Ignition designer. Put the Designer into preview mode and click on the "Upload Image" button to find images on your local computer and upload them into the project. Give names to images at the same time you upload them.

Uploaded images will be added as rows to the "[client]project_images" tag and will appear in the table in the template. The table is bound to the "[client]project_images" tag.

It is possible to change the name of an uploaded image by double clicking in a name cell. It is possible to remove images by selecting a row in the table and pressing the "Remove Image" button.

Be sure to use the ProjectImageStorage template in the Ignition Designer and not in a client.

Step 4.

Drag and drop the ProjectImage template on windows and templates where you want to display images.

The ProjectImage template has a template property called, "imageName". For each ProjectImage template instance on a window or template input the name of an image as given in ProjectImageStorage template. Setting the name of an image in the imageName property will make that image display.

Step 5.

Save the project in the Designer. The images that are uploaded in the Designer will not be available to clients until the project is saved.

Step 6.

The next step is to join my email list. Just kidding, you are done. But you should join my email list if you haven't already. So you are updated about new blog posts.

The solution given in this blog post is an efficient way to store images in projects and display them multiple times across multiple windows and templates. Your .proj project export files will include your images. And when you import your projects into a different Ignition server, your images will be there, displaying and working.

A couple people have suggested to me the idea of using a memory tag instead of a client tag. A memory tag won't work because a memory tag is not exported with a project.

It is important to understand that images must be uploaded in the designer, not the client. The reason this works is because the value of a client tag in the designer (where the images get stored) becomes the default value of the client tag in all clients -- and this is how all clients get the images.

Check out this video that shows the steps: How to Store Images In Ignition Projects

Awhile ago Travis Cox gave a solution on his blog to make Java applications (and therefore Ignition clients) display nicely on high resolution monitors.

Check out his solution here: Java and High DPI Displays

I was curious if it was possible to implement the ability to drag and drop Ignition templates onto a template canvas. So I implemented it. I found that it is possible and it works. I am releasing the Template Canvas Drag and Drop project so you can have it, use it, and modify it. Download here: TemplateCanvasDragAndDrop.proj

This project shows a way for users to dynamically create Ignition screens in the runtime client by choosing templates that were created in the Ignition designer and dragging and dropping them onto a template canvas component. Additional functionality such as saving the states of screens to a database and opening them could be developed.

The Template Canvas Drag and Drop project has two windows. One window shows a list of Ignition templates that users can choose from to make a screen. Ignition automatically stores a thumbnail image of every Ignition template that is created. So the first window simply grabs the thumbnail images from the project and displays them to the user.

Users can click on a thumbnail template image and drag it onto the other window. When they drop the template the template appears in the other window where it was dropped. Then the user can select the template and move it around on the screen. I also implemented a right-click popup menu so users can right click on a template and delete it.

At the top is an "Edit" button. When this button is selected the project is in edit mode and existing templates can be clicked on and dragged around. When the button is unselected templates can be interacted with in the normal way.

The project is a good start but there is much more that can be implemented from this point. It shows that these things are possible. The ability to resize templates with the mouse can be implemented. The ability to save user-created windows, close them and open them can be implemented, and much more.

Here is a video that shows the project:

While dragging and dropping templates on a template canvas does work I admit that it is not ideal. There is one main annoyance: a change to the template canvas causes all templates to be reloaded. So if you just want to change the position of one template or add/delete one template, then all the templates get reloaded and there is a flash of a "Loading" message. Implementing configuration functionality on templates might be difficult because templates loose their state when the template canvas changes. If you can live with these problems then drag and drop with a template canvas can work.

A better solution would be to have a scripting function that can dynamically create template instances and add them to containers. This is something I've been thinking of working on. I am curious how many people would want this. I would add it to the Power Scripting Module.