PictureBox

PictureBox (Image Box)

The PictureBox is a control object used to display static (fixed) or dynamic (state-dependent) visuals (images, icons) on the screen.
It does not display text or numeric values; instead, it visually represents the status of a tag or is used to enrich the interface.

Common Use Cases
  • Static Visuals: Displaying company logos, facility P&ID (Piping and Instrumentation Diagram) backgrounds, or static icons.
  • Dynamic Status Indicators: Showing images that change based on a tag’s status (e.g., if Motor_State is True show “Motor_Running.png”, if False show “Motor_Stopped.png”).
  • Clickable Areas: Opening a relevant detail screen when a visual button (e.g., a tank image) is clicked.
Basic Configuration

1. Advanced Panel The object’s default Image setting is configured here. The most important feature, SizeMode, determines how the image fits within the box.

2. Properties Panel This is where the image box becomes “live.”

  • Image / BackgroundImage: Used to dynamically change the displayed visual based on a tag’s status (e.g., Alarm_On == True).
  • Events: Used to trigger an action (e.g., opening a screen) when the image is clicked.
  • Visible: Used to make the object visible under certain conditions (e.g., when an alarm occurs).

Properties Panel – Key Properties

Just like the Text property in a Label, the PictureBox can dynamically manage the Image property.

  • Image and BackgroundImage
    • These two properties can be bound to conditions in the “Properties” panel. Usually, Image (Foreground Image) is used.
    • Function: By using the + New button to add conditions, you determine which image the PictureBox displays when that specific condition is met.
    • Default Value: This is the static Image. If no dynamic condition is met, this default image is shown.
    • Use Case: Ideal for showing a valve’s status by switching between “valve_on.png” and “valve_off.png”.

Advanced Panel – Key Properties

The Advanced panel defines how the image is positioned and displayed.
Image The static image the object displays by default (e.g., a company logo or “unknown_status.png”).

  • SizeMode
    • Determines how the image behaves relative to the PictureBox frame.
    • Normal: The image starts at the top-left corner of the PictureBox. If the image is larger than the box, it is clipped.
    • StretchImage: The image is stretched or shrunk to fit the PictureBox dimensions exactly, potentially distorting the aspect ratio.
    • AutoSize: The PictureBox automatically resizes to fit the image’s original dimensions.
    • CenterImage: The image is centered within the box. If larger than the box, the edges are clipped.
    • Zoom: The image is resized proportionally to fit inside the PictureBox while preserving its aspect ratio. This usually yields the best visual result.
  • BorderStyle
    • Adds a frame around the image (None, FixedSingle, Fixed3D).

Common Usage Examples

Example 1: Adding a Static Logo
  1. Add a PictureBox object to the screen.
  2. In the Properties panel (or Advanced), select and load your company logo into the Image property.
  3. In the Advanced panel, set the SizeMode property to Zoom or StretchImage to ensure the image fits neatly into the box.

Result: The logo will always be visible when the screen opens.

Example 2: Changing Visuals Based on Tag Value (Animation Simulation)

This example explains how to display different images based on a tag’s value, thereby creating an animation effect (like a spinning fan) for an alarm or operating status.

  1. Add PictureBox objects equal to the number of frames in your animation (assume 3 for this example). Load the corresponding image into each PictureBox:
    • Fan_Stopped
    • Fan_Running1
    • Fan_Running2
  2. Select all PictureBox objects. In the Properties panel, set their Location (X and Y) properties to the exact same value. This ensures all images are perfectly stacked on top of each other.
  3. At design time, set the Visible property to True only for the image that should appear initially (e.g., Fan_Stopped). Set Visible to False for all others (Fan_Running1, Fan_Running2).
  4. You need a tag to control the animation (e.g., Motor_Status_Tag).
  5. Bind the Visible property of each PictureBox to specific values of this tag via the Properties panel:
    • Fan_Stopped: Bind Visible to Motor_Status_Tag = “0” (Visible if tag is 0).
    • Fan_Running1: Bind Visible to Motor_Status_Tag = “1” (Visible if tag is 1).
    • Fan_Running2: Bind Visible to Motor_Status_Tag = “2” (Visible if tag is 2).
  6. Logic: When the motor is running (or alarming), the background data source (PLC or script) must toggle the Motor_Status_Tag value between 1 and 2 periodically (e.g., every 500ms). When the motor stops, the value should be set to 0.

          Result: When Motor_Status_Tag is 0, only the stopped fan is visible. When the tag starts toggling rapidly between 1 and 2, the Fan_Running1 and Fan_Running2 images appear and disappear in sequence. This creates a spinning (GIF) effect, visually indicating to the operator that the motor is running.

          Leave a Reply