Online documentation, manuals and tutorials
< All Topics
Print

P10. Bitmaps

Updated

In Fig. 1 shows the Bitmap panel (1) in which there is a list of bitmaps that can be used in the project. The project can contain an unlimited number of bitmaps, and for the selected bitmap (2) you can see the size in pixels (3) and image preview (4).

 

Fig. 1: Bitmap panel

P10.1. Adding a bitmap

When adding a bitmap, a new dialog opens with a different number of parameters depending on the type of project. Fig. 2 shows the dialog for EEZ-GUI, Fig. 3 shows the Dashboard and Fig. 4 shows the LVGL project.

 

Fig. 2: Add new bitmap in EEZ-GUI project

 

Fig. 3: Add new bitmap in Dashboard project

 

Fig. 4: Add new bitmap in LVGL project

 

Item

Description

Name

Bitmap is referenced in other parts of project by its name.

Image

Selection of bitmap file from local storage.

Bits per pixel (EEZ-GUI only)

Color depth: 16 (RGB565) or 32 (RGBA, i.e. 24-bit color + Alpha channel).

Color format (LVGL only)

Described in https://docs.lvgl.io/8.3/overview/image.html#color-formats

P10.2. Bitmap properties

Fig. 5 shows the properties for the bitmap from the Bitmap Panel for the EEZ-GUI project. The parameters are described in the following table.

 

Fig. 5: Bitmap properties (EEZ-GUI)

 

Item

Description

Id (EEZ-GUI only)

Bitmap is one of resources that is referenced by name in the project editor. When that project is built, names are no longer used, but numerical ID. This field is optional, i.e. an ID does not have to be specified, in which case an ID will be assigned during the build. However, if we want an object to always get the same ID, then it needs to be defined. Why would we want to always have the same ID? This is necessary when there is a master project such as modular-psu-firmware.eez-project from EEZ BB3 and that master project is used by BB3 Applets and BB3 MicroPython scripts and they can use resources from the master project that have that ID defined.

 

Important: once the ID is set, it should not be changed, otherwise all BB3 scripts that depend on it should be rebuilt.

Name

Bitmap is referenced in other parts of project by its name. Use the … button to change the existing name.

Description

Optional field, contains a description of the bitmap.

Image

This is the image file itself that is saved within the project file (embedded within project file).

Options for Copy to clipboard (1), Paste from clipboard (2) and loading from local storage (3) are also available.

Bits per pixel (EEZ-GUI only)

16 – RGB565

32 – RGBA

Style (EEZ-GUI only)

The option is only enabled if Bits per pixel is set to 16.

Only the background color from the entire style is used. If there is a transparent pixel in the default bitmap, then the background color will be displayed.

Always add to the generated code (EEZ-GUI only)

During the project build, i.e. when the source code is generated, only those Bitmaps that are used in the project will be inserted into the source code.

However, if a bitmap is used within the native code but not in the EEZ Studio project, then using this option you can force the bitmap to be added to the source code even though it is not used in the project.

Color format (LVGL only)

Described in https://docs.lvgl.io/8.3/overview/image.html#color-formats

Below are the LVGL constant names and their counterparts used in EEZ Studio.

 

LVGL constant name

EEZ Studio value

 

LV_IMG_CF_ALPHA_1_BIT

ALPHA 1 BIT

 

LV_IMG_CF_ALPHA_2_BIT

ALPHA 2 BIT

 

LV_IMG_CF_ALPHA_4_BIT

ALPHA 4 BIT

 

LV_IMG_CF_ALPHA_8_BIT

ALPHA 8 BIT

 

LV_IMG_CF_INDEXED_1_BIT

INDEXED 1 BIT

 

LV_IMG_CF_INDEXED_2_BIT

INDEXED 2 BIT

 

LV_IMG_CF_INDEXED_4_BIT

INDEXED 4 BIT

 

LV_IMG_CF_INDEXED_8_BIT

INDEXED 8 BIT

 

LV_IMG_CF_RAW

RAW

 

LV_IMG_CF_RAW_CHROMA

RAW CHROMA

 

LV_IMG_CF_RAW_ALPHA

RAW ALPHA

 

LV_IMG_CF_TRUE_COLOR

TRUE COLOR

 

LV_IMG_CF_TRUE_COLOR_ALPHA

TRUE COLOR ALPHA

 

LV_IMG_CF_TRUE_COLOR_CHROMA_KEYED

TRUE COLOR CHROMA

 

LV_IMG_CF_RGB565A8

RGB565A8

Export bitmap file

Use to export embedded image.

P10.3. Using a bitmap

Bitmap can be used in Bitmap widget (EEZ-GUI and Dashboard project), i.e. Image widget (LVGL project). It can also be used in Style.

 

Below is an example of using a bitmap in the Bitmap widget in the Dashboard project. Fig. 6 shows the added Bitmap widget (1) to the page. In the Specific section, we select which bitmap from the list of bitmaps we want to use (2), which in our example is the bitmap called background (3).

 

studio_man_resize_bitmap1.png

Fig. 6: Adding a bitmap to a Widget

 

Since the Widget’s dimensions are smaller than the selected bitmap, the bitmap will exceed the Widget’s borders as shown in Fig. 7. Here we can use the option Resize to Fit Bitmap (4) when the dimensions of the Widget will be adjusted to the size of the bitmap (Fig. 8).

 

Fig. 7: Resizing the widget to fit the bitmap

 

Please note that this option is visible only if the current dimensions of the Widget do not match the dimensions of the bitmap (Fig. 8).

 

Fig. 8: Widget resized to bitmap size

 

Page content