===== ImageBean =====

com.ergotech.vib.graphics.ImageBean

==== Image Examples ====

| {{:mistudio:graphics:more_layout:image_layout:pasted:20260628-124257.gif?40|ImageBean in the graphics palette}} | {{:mistudio:graphics:more_layout:image_layout:pasted:20260628-124337.png?40|ImageBean graphic example}} |
| //ImageBean in the graphics palette.// | //ImageBean graphic example.// |

==== Overview ====

The ImageBean graphic is a More Layout image graphic used to display one image resource in an MIStudio application.

The image must be added to the project before it can be selected in the ImageBean properties.

ImageBean is useful when an application needs to show a logo, equipment image, diagram, icon, reference image, or other static visual resource.

==== Common Uses ====

  * Displaying a project image
  * Adding a logo to an application screen
  * Showing an equipment or process image
  * Displaying a reference diagram
  * Adding icons or visual layout elements
  * Creating a more visual application screen

==== Input Behavior ====

ImageBean has no default input ports.

The displayed image is selected from the **Image Name** property.

==== Output Behavior ====

ImageBean has no default output ports.

ImageBean displays the selected image resource and does not function as a user input control.

==== ImageBean-Specific Behavior ====

ImageBean displays one selected image.

ImageBean-specific settings include:

  * **Name** Sets the name of the ImageBean graphic.
  * **Bezel** Sets the ImageBean bezel style.
  * **Image Name** Selects the image resource displayed by ImageBean.
  * **Image Resizes** Controls whether the selected image resizes to fit the ImageBean bounds.
  * **Bezel Color** Sets the outside bezel color.
  * **Bezel Inside Color** Sets the inside bezel color.
  * **Bezel Thickness** Sets the thickness of the bezel.
  * **Cursor** Sets the cursor shown when the pointer is over the ImageBean.
  * **Rotation** Sets the ImageBean rotation.
  * **Click Action** Defines a click action.
  * **Click Count** Sets the number of clicks used for the click action.
  * **Visible** Controls whether the ImageBean is shown.

==== Adding an Image Resource ====

Before an image can be selected in ImageBean, the image must be added to the project.

To add an image resource:

  * Open the project tree.
  * Right-click **Images**.
  * Select **Add File**.
  * Choose the image file from File Explorer.
  * Select the ImageBean graphic.
  * In the Basic properties, choose the image from **Image Name**.

After the image is selected, ImageBean displays the image on the application screen.

==== Image Resize Behavior ====

When **Image Resizes** is enabled, the selected image resizes to fit the ImageBean bounds.

When **Image Resizes** is disabled, the image displays at its natural size and can be cropped by the ImageBean bounds.

==== Logic Ports ====

In the Logic Editor, ImageBean has no default input or output ports.

==== Notes ====

Use ImageBean when one static image needs to be displayed.

Add image files to the project **Images** node before selecting them in the ImageBean properties.

For image switching behavior, use [[mistudio:design_editor:more_layout:image_layout:multiimagebean|MultiImageBean]].

For general graphic behavior, see [[mistudio:design_editor:active_graphic|Active Graphic]].

==== Related Pages ====

  * [[mistudio:design_editor:start|MIStudio Design Editor]]
  * [[mistudio:design_editor:more_layout:start|More Layout]]
  * [[mistudio:design_editor:more_layout:image_layout:start|Image and Layout Graphics]]
  * [[mistudio:design_editor:more_layout:image_layout:multiimagebean|MultiImageBean]]
  * [[mistudio:design_editor:active_graphic|Active Graphic]]