Page History

Insert and manage images in displays.

Reference → Modules → Displays → UI →  Client Settings | Draw | Images | Layouts | List | Localization | Symbols | Themes | Units Conversion

Supported Formats

Importing Images

Import Process

1. Navigate to Displays → Images
2. Click Import Images
3. Select image files
4. Click Open

Images are embedded in the project database.

Batch Import

• Select multiple files
• Maintain folder structure
• Auto-generate names
• Preview before import

Using Images

In Display Editor

1. Open Displays → Draw
2. Select Images category in Components Panel
3. Drag image to canvas
4. Configure stretch mode

As Object Fill

Apply images as brushes:

• Rectangles
• Ellipses
• Paths
• Backgrounds
• LabelBoxes

Stretch Modes

Image Properties

Image Management

Replacing Images

1. Keep same resource name
2. Import new version
3. Auto-updates throughout solution
4. No display changes needed

Organizing Images

/Backgrounds
  /Screens
  /Popups
/Icons
  /Navigation
  /Equipment
/Logos
  /Company
  /Products

Dynamic Image Usage

Runtime Image Change

csharp

// Change image source
@Display.MyImage.Source = "NewImageName";

// Toggle between images
if (condition)
    @Display.Background.Fill = "Image1";
else
    @Display.Background.Fill = "Image2";

Image as Color

csharp

// Use image in color dynamics
@Display.Rectangle1.Fill = "ImageBrush:Logo";

// Conditional image fill
@Display.Shape.Fill = @Tag.State == 1 ? 
    "ImageBrush:ActiveImage" : 
    "ImageBrush:InactiveImage";

Best Practices

1. Optimize Size - Compress before import
2. Use Appropriate Formats - PNG for transparency, JPG for photos
3. Organize Folders - Logical structure
4. Name Consistently - Clear identifiers
5. Document Purpose - Use descriptions
6. Consider Resolution - Match display requirements
7. Test Scaling - Verify stretch modes

Performance Considerations

Image Optimization

• Limit file sizes
• Use appropriate resolution
• Avoid oversized images
• Consider vector formats

Memory Management

• Images load on demand
• Cached after first use
• Released when not visible
• Monitor total size

Common Applications

Backgrounds

xml

<Page Background="ImageBrush:PlantLayout">
  <!-- Display content -->
</Page>

Equipment States

csharp

// Motor image based on state
string motorImage = @Tag.Motor.Running ? 
    "Motor_Running" : "Motor_Stopped";
@Display.MotorImage.Source = motorImage;

Navigation Icons

xml

<Button>
  <Image Source="Icon_Home" Width="32" Height="32"/>
</Button>

Troubleshooting

Image not displaying:

• Verify name spelling
• Check import success
• Review stretch mode
• Test in runtime

Poor quality:

• Use higher resolution
• Try different format
• Check stretch settings
• Avoid excessive scaling

Memory issues:

• Reduce image sizes
• Limit simultaneous images
• Use image compression
• Monitor resource usage

Update not reflecting:

• Maintain same name
• Rebuild solution
• Clear cache
• Restart runtime

Advanced Features

Image Libraries

Create reusable image sets:

csharp

public class ImageLibrary
{
    public static string GetStateImage(int state)
    {
        return state switch
        {
            0 => "State_Idle",
            1 => "State_Running",
            2 => "State_Alarm",
            _ => "State_Unknown"
        };
    }
}

Dynamic Loading

csharp

// Load image from database
byte[] imageData = @Dataset.Query.Images.GetImage(id);
@Display.DynamicImage.LoadFromBytes(imageData);

In this section...

Image Removed

Working with Display Images

You can import any image file in the Displays / Images. This creates a repository of images for the application that is stored inside the project database file. You do not need the original files anymore. These images can be used to be the Fill of an object, such as rectangles, ellipses, LabelBoxes, paths, page background, or target color in runtime dynamics using colors. 

Supported file types include .bmp, .gif, .ico, .jpg, .svg, .png, .tiff, and .wdp.

If you need to update an image with a new version, you can replace it, and it will be updated throughout the application. Be sure to keep the resource name the same.

You can use any image file to fill or "paint" an object when you create displays in Display / Draw.

Importing Image resources

1. Go to Displays → Images.

2. Click Import Images.

3. Navigate to the folder of the images you want to import.

4. Select the image files and click Open.

Adding image to displays

1. Go to Displays / Draw.

2. On the Components Panel, click on the Images Component category.

3. Select the image and click in the Draw area.

Image Removed

Displays Images Table

You apply the images directly in the Draw interface, so it is usually not necessary to visit this table, except for importing new images or managing image resources.

Displays Images Table

Name

Edit the default name.

Description

Enter a description of this image.

Folder

Specify the folder where the resource is

ResourceType

Specify the type of the resource

Dimension

Read-only. Show the dimension of the resource file

Size

Read-only. Show the size of the resource file

In this section: