Displays Images Reference

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...