Image
Show a picture, optionally swapping it with machine state.
A logo on a screen. The background is transparent by default, so the screen shows through around the picture.
An image displays a picture imported into the document — a logo, a diagram, a photograph of the part being made. Like a Label it can carry states, so the picture itself can change with the machine.
Adding the control
Section titled “Adding the control”- Import the picture first: open the Images panel and import it from a USB stick — see USB import & export.
- In the control palette, press Image and drag it onto the canvas.
- Choose the file in the Inspector.
Images travel inside the document, so exporting a .hmi carries them with it.
The controller serves pictures slowly, so keep them small. Shrink a picture to
the size it will be shown at before importing it, and save photographs as
.jpg. A screen is at most 1278 pixels across, so nothing larger is ever
drawn at full size.
The import picker shows each file’s size. A picture over 300 KB cannot be selected, and one over 100 KB imports with a warning.
Properties
Section titled “Properties”| Property | Description | Default |
|---|---|---|
| Image | The file to show. | none |
| Display | How the picture fills the control: contain, cover, or fill. | contain |
| Background | Color behind the picture. | transparent |
| States | Conditions that swap the picture for another. | none |
Contain fits the whole picture inside the control and may leave space at the sides. Cover fills the control and crops whatever does not fit. Fill stretches the picture to the control’s exact shape, changing its proportions.
States
Section titled “States”Each state pairs a condition with a filename, and the first true one is shown. A state with an empty condition never matches, and the editor warns about it. The default picture is the fallback when no state matches.
A picture referenced by a state but missing from the document is reported by validation rather than left as a gap on the screen.
Related
Section titled “Related”- USB import & export — getting pictures onto the controller.
- Expressions — the syntax used by state conditions.
- Label — for text that changes with state.