🖼️ Static Image
The Image widget is the primary component for displaying non-interactive visual assets. In Artok Studio, it serves as a viewport for optimized graphical data processed by the internal engine.
⚙️ Properties (Props)
These properties are defined by the ImageWidget interface and can be adjusted via the Property Inspector.
| Property | Type | Description |
|---|---|---|
| Image Source | imageId | The unique identifier mapping to an asset in the project registry. |
| X / Y | number | The coordinate position on the canvas. |
| Width / Height | number | The dimensions of the widget. By default, these snap to the native asset size. |
🎨 Asset Management
Because Artok is built for embedded performance, the Image widget behaves differently than standard web images:
- Resource Mapping: The
imageIdpoints to a pre-compiled binary asset. This ensures that the HMI doesn't waste CPU cycles decoding high-resolution formats at runtime. - Memory Footprint: The memory usage is determined by the resolution and the Bit Depth (BPP) configured during export.
- Scaling: While images can be resized, it is recommended to keep them at their native resolution to maintain clarity on low-DPI embedded screens.
⚡ Runtime API (Lua)
You can manipulate the Image widget dynamically within the Logic and Events system.
-- Change the image source at runtime
-- This is useful for status icons or dynamic backgrounds
img_battery:set_src("icon_battery_low")
-- Adjust transparency (0-255)
img_overlay:set_style_img_opa(128)
note
If you require an image that changes appearance when touched or toggled, use the Image Button widget, which supports separate identifiers for pressed and released states.
🚀 Next Steps
- Asset Packer — Learn how to import and register your custom
imageIdassets. - Bit Depth (BPP) — Optimize image memory for your specific hardware architecture.
- AI Appearance — Use AI to generate icons and textures directly within the Studio.