Add an image to a screen

Add an Image graphic element to a screen to display an image. Existing Image graphic elements appear in the
Images
 folder of the
Project Explorer
.
To add an image to a screen
  1. In the
    Toolbox
    , expand the
    Common Controls
    category.
  2. Double-click or drag the Image graphic element onto the screen. The
    Select Image
     dialog box opens.
    TIP:
    Tips:
    • Pressing
      Enter
      when an Image graphic element is selected opens the
      Select Image
       dialog box.
    • Preview an image before opening the
      Select Image
       dialog box, by double-clicking the image in the
      Assets > Images
       folder of the
      Project Explorer
      or right-click the image and select
      Open
      .
  3. On the
    Select Image
     dialog box either:
    • Select an existing image and select
      OK
      .
    • Select
      Browse
      , select a new image or multiple images, select
      Open
      to add the image to the
      Select Image
       dialog box, select the image to add to the screen, and then select
      OK
      .
      The Image graphic element appears on the screen and is linked to the image in the
      Images
       folder of the
      Project Explorer
      .
      TIP:
      Tips:
      • Browsing to and selecting multiple images from the
        Select Image
         dialog box highlights the last selected image.
      • Browsing to an image in the
        Select Image
         dialog box adds the image to the
        Images
         folder of the
        Project Explorer
        .
      • Adding an image to the
        Images
        folder of the
        Project Explorer
         displays the image in the
        Select Image
         dialog box.
      • Selecting
        Cancel
        on the
        Select Image
         dialog box places a 100 pixel by 100 pixel Image graphic element on the screen. The Image graphic element displays a red X to indicate there is no referenced image.
      • Add an image from the
        Project Explorer
         by expanding the
        Assets > Images
         folders and dragging the image to the screen, or right-clicking an image and then selecting
        Add to (screen name)
        .
      • If the original image is larger than 100 pixels in width or height, the larger dimension value is set to 100 pixels. The smaller dimension is set to a value that maintains the aspect ratio of the original image. If the original image is 100 pixels or smaller, the Image graphic element uses the actual dimensions of the original image.
      • Resize image graphic elements with the sizing handles. Each instance of an image is sized independent of any other instance. Multiple images on multiple screens can each have a different image size. Resizing an image by binding the height and width properties is not recommended as it may result in poor performance.
IMPORTANT:
    • Too much content on screens can result in the HMI device running out of memory. The
      Properties
      tab displays the size of the image. Use the predefined
      HMI Device
      screen to monitor memory usage. If the HMI device runs out of memory while running an application, the HMI device restarts and provides an error message indicating that an out-of-memory condition occurred.
    • If the computer running
      View Designer
       runs out of memory,
      View Designer
       shuts down and provides a message indicating that an out-of-memory condition occurred.
      View Designer
       retains the last saved version of the project.
    Changing the aspect ratio of the original image and then re-importing it does not automatically rescale all Image graphic elements linked to that image.
Provide Feedback
Have questions or feedback about this documentation? Please submit your feedback here.
Normal