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.
- Optimization - configure conversion and compression options.
- Generation - emit the converted asset into the generated code.
Refer to the workspace guide to understand where image resources live on disk, and the codegen guide to see how the generated image code is produced.
Importing images
Import images through the resource management interface. Supported formats include PNG, JPEG, BMP, and GIF.
- PNG is recommended for UI assets that mix transparency and crisp edges.
- JPEG is best for photographic content with large color ranges.
- GIF is supported for animated sprites.
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. |
When the component dimensions match the source image pixels, the image is displayed without scaling. See the editor guide for how these properties are edited on the canvas.
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 binary format optimized for LVGL. Configure the output format in the resource settings:
- Binary (LVGL-native) - the smallest and fastest option, decoded directly by the LVGL image decoder.
- C array - the image is emitted as a C source array and compiled into the binary.
Compression
Compression trades a small amount of decoding time for significant ROM savings. Enable compression only when the target device has sufficient CPU headroom.
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]*/