How to Add Images to a Visualization in WebVis

Owned by Perla Madrigal (Unlicensed)
Last updated: Apr 29, 2024 by Corey Boyles
4 min read

Many HMI applications require the use of user-supplied images to represent the machine, display a logo or simply accent the interface to achieve the desired look and feel. WebVis allows you to import your own images into PAM using Image Pools. The procedure outlined below will allow you to import any of the following formats:

  • PNG

  • JPG

  • SVG

  • BMP

  • GIF

  • TIF/TIFF

  • EMF

  • ICO

The most common image formats are PNG, JPG, SVG, BMP and GIF. Please note that animated GIFs will not run their animations in WebVis. Instead, they will appear as static images.

To add an Image Pool to your application and place an image on one of your visualizations, follow these steps:

  1. Add an Image Pool. Right-click on Application, click Add Object and then click Image Pool.

    image-20240213-233737.png

  2. Give the Image Pool a name (the default is fine) and click OK.

    image-20240213-233743.png

  3. Double-click the File name field and then click the ellipsis (...) button.

  4. In the Select Image dialog, you have three options for adding the image to your Image Pool. The default is embed into project, which adds a copy of the image file into your project. This is good for most projects because it means you can move your project to another PC and still have all the images you added. If you have a lot of images, you may want to choose one of the linking options in order to reduce the project's file size. Using linked images is also advantageous for machine builders who want to manage their image resources from a central location and easily make changes across multiple projects.Once you know how you want to bring your image into your project, click the ellipsis (...) button.

  5. The image is now part of your Image Pool. It is given an ID in the left-hand column that can be used to attach it to a tool or image element in your WebVis application. You can change this ID by double-clicking on the ID field.

  6. You can add an image to your visualization by dragging an image element from the Toolbox onto the visualization.

  7. Once the image element is added, PAM will automatically prompt you for an image to use. Select your Image Pool from the list view on the left, then select your image from the preview window. Then, click OK.

  8. The image will now appear in your visualization with its default size. You can resize it using the image handles or by editing its size in the image's Properties panel.

Notes:

  • You can change the image associated with an image element by changing its Static ID in the Properties panel.

  • Many different types of tools can use images. Look for a Bitmap info section in the tool's Properties panel.

  • Some tools allow you to change the image shown using a string variable. These tools will have a Bitmap ID variable section in the tool's Properties panel.

  • Not seeing the options in the notes above? Go to the Properties panel and make sure the Expert box is checked.

01MAR2018 DCLIFFE