Images are a core part of every embedded UI. This guide covers how anyui-LIVE handles, optimizes, and uses images across the design, code generation, and target runtime stages.
Overview
anyui-LIVE treats images as first-class resources. An image imported into the project is available to every screen and component, and it is automatically converted and embedded into the generated firmware at build time.
The image pipeline consists of four stages:
- Import - add an image from a local file into the resource pool.
- Reference - assign the image to a component property.
- Generation - emit the converted asset into the generated code.
Refer to codegen guide to see how the generated image code is produced.
Importing images
Import images in the Resource view. Currently PNG format is supported.
- PNG is recommended for UI assets that mix transparency and crisp edges.
After import, the image becomes available in the resource picker and can be assigned to any image component property.
Warning
You are responsible for ensuring that you have the necessary rights and permissions for every image you import and use.
Image components
An image placed on a screen references a resource from the resource pool. The component exposes the following key properties:
| Property | Description |
|---|---|
| Resource | The image resource to display. |
| X / Y | Position of the image on the screen. |
| Width / Height | Display size. When fixed, the source is not scaled. |
| Opacity | 0 (fully transparent) to 255 (fully opaque). |
| Rotation | Rotation angle in degrees. |
| Blend mode | Blending mode used when compositing over the background. |
Optimization
Optimization reduces ROM size and memory footprint on the target device.
Format conversion
At generation time, anyui-LIVE converts the source image into a C source array optimized for LVGL. Configure the output format in the resource settings:
- C array - the image is emitted as a C source array and compiled into the binary.
Memory considerations
Decoded images are held in RAM while displayed. If the target device runs low on memory, increase LV_MEM_SIZE in lv_conf.h:
#define LV_MEM_SIZE (8 * 1024U * 1024U) /*[bytes]*/
Related guides
- Resource management - import the images used by image components.
- Font library - manage typography alongside image assets.
- Overview - assign and edit image properties on the canvas.
- Preview - preview image rendering before generation.
- Codegen - how image assets become generated code.