FDI Converting Images for Use on SuRG Owner's Manual

ទៅ https://lvgl.io/tools/imageconverter
Select LVGL v8.
ចុច រុករក and select the images you want to convert.
For Color Format, select CF_INDEXED_2_BIT from the dropdown menu.
For Output Format, select C Array.
ចុច បម្លែង, and your image will be converted and automatically downloaded to your Downloads folder.

Using the Conversion Script

Next to the SuRG, SuRGDemos, and LVGL directory will be a pair of scripts (Install_LVGL_Tools) for installing the LVGL font and image generation tools for LVGL version 8.
Make sure that your PC has appropriate execution permissions for the scripts and the containing folder.

Run the appropriate .bat or .sh script for your PC to download the font and image conversion tools, install required dependencies,then perform the tool initialization.
Inside of the SuRGDemos/SuRGDemo/GUI/images directory will be another pair of scripts for converting png files into c files for use with LVGL.

For the supplied fdi_logo_indexed.png file, run the appropriate .bat or .sh script to generate the c file into SuRGDemos/SuRGDemo/GUI/generated/fdi_logo_indexed.c.
Additional 2 or 3-color indexed PNG files can be added into the directory. Then the scripts can be modified to add them to the generation step. Shown here is the example of adding SuRG_logo_indexed.png to the scripts.

After adding the new image to the script, make sure to add the line LV_IMG_DECLARE(SuRG_logo_indexed); to the images.h file.

ការបំប្លែងរូបភាពសម្រាប់ប្រើនៅលើ SuRG
Graphics on SuRG are displayed using the Light and Versatile Graphics Library (LVGL), which features an image converter (online and offline) for displaying custom images such as logos.

However, SuRG does not use a typical TFT LCD, but rather uses a BWR E-Paper display, where pixels are rendered as 2 “sub-pixels” per actual pixel in 24-bit groups. The display is also capable of only the colors Black, White, and Red.

If you want to display custom graphics on SuRG from flash, you must convert the images to 2-bit indexed C arrays using the LVGL image converter. The online one works just fine, but FDI provides an offline version, for one in case the online converter ever goes down, and two, it ensures your image is in the correct color palette for the SuRG display.

For best results, it is recommended, prior to converting images, to edit them down to only black, white, and red colors, otherwise, due to pixel artefacts and color approximation, your image may display with unexpected coloration in spots. More on this is in Pre-Processing.

Using the Online LVGL Converter

Converting the Image

ទៅ https://lvgl.io/tools/imageconverter
Select “LVGL v8”.
Click <Select image file(s)> and select the images you want to convert.

For Color Format, select “CF_INDEXED_2_BIT” from the dropdown menu.
For Output Format, select “C Array”
Click <Convert>, and your image will be converted and automatically download to your Downloads folder.

Using the Conversion Script

Next to the SuRG, SuRGDemos, and LVGL directory will be a pair of scripts (Install_LVGL_Tools) for installing the LVGL font and image generation tools for LVGL version 8.

Make sure that your PC has appropriate execution permissions for the scripts and the containing folder.
Run the appropriate .bat or .sh script for your PC to download the font and image conversion tools, install required dependencies, then perform the tool initialization.

Inside of the SuRGDemos/SuRGDemo/GUI/images directory will be another pair of scripts for converting png files into c files for use with LVGL.
For the supplied fdi_logo_indexed.png file, run the appropriate .bat or .sh script to generate the c file into SuRGDemos/SuRGDemo/GUI/generated/fdi_logo_indexed.c.

Additional 2 or 3-color indexed PNG files can be added into the directory. Then the scripts can be modified to add them to the generation step. Shown here is the example of adding “SuRG_logo_indexed.png” to the scripts.
After adding the new image to the script, make sure to add the line “LV_IMG_DECLARE(SuRG_logo_indexed);” to the images.h file.

Now the image will be usable in the LVGL software.

Preparing PNG ﬁles to be loadable from an SD card

It is possible to place icon files, or even full screen png image files onto the SD card and load them directly into the GUI. However, this will significantly increase power and RAM consumption of the application.

First, prepare a 2 or 3-color 400×300 image.
Using the GIMP tool, set the mode of the image to RGB mode as shown:
Select the “Save As” option.
កំណត់ file type as .png.
For the png options, select the following to save the image as an 8-bit RGB color image with no compression or color profile:

Click “Export” to save the image.
On the SD card image will be a pre-existing slideshow in the folder:
SLIDES/DEMOPICS.
Add the newly created PNG file into the DEMOPICS directory following the naming scheme: XX_RGB08.png.

Now the PNG file will show up on-screen in the slideshow demo.

Adding the Image to SuRG

The following steps use the image file/converted .c file name “shapes_BWR”.

In your SuRG project, open “images.h” located in: SuRG_Demo > GUI > generated
បន្ថែមបន្ទាត់ខាងក្រោម៖
LV_IMG_DECLARE(shapes_BWR);
Navigate in file explorer to the image file you converted to a .c file មុន។
Drag this file into the SuRG project, under GUI > generated.
If prompted to link or copy the file into your workspace, select “Copy”.
In the SuRG project, navigate to GUI > fdi_demo.h
ស្វែងរក the variable “screen_MainMenu”. This is where the widgets for the main menu are declared.
Add the following:
lv_obj_t *screen_MainMenu_Img;
បើក file “screen_MainMenu.c”.
In the function “setup_screen_MainMenu”, add the following just before the events_init_ function call:

Testing Your Image

You can now build the SuRG Demo project by clicking the Hammer icon or by pressing CTRL + B.
Building may take a moment to complete depending on how much was changed,but when it finishes, you should see 0 errors in the console:
You can now download/program and debug the SuRG Demo project, either by clicking the Bug icon or by pressing F11.
After programming completes, execution will pause in the file“startup_stm32u585zitx.s”. Press F8 or click the “Resume” icon to continue.
After a short pause, the application will start and if your image was colored properly prior to conversion to a C file, you will see it on the display:

កំណត់ចំណាំ/ការដោះស្រាយបញ្ហា

As mentioned before, the SuRG display is BWR, capable of only displaying black, white, or red pixels. If you convert an image to a .c file without first doing some form of preprocessing, the image will either appear messy or may not display at all. If using the online image converter, the latter case of the image not displaying at all is more likely, as the script is designed specifically for the SuRG LCD and will ensure the converted image is using the correct palette.

ខាងក្រោមនេះគឺជាអតីតមួយចំនួនamples of improper and proper setup, using this simple image – shapes.png:

No Pre-Processing:
If converted using the online LVGL image converter and the resultant .c file is added to the project, the display will show the following:

The image is loaded into flash, but because the LCD can only display black, white, or red, and because the image itself has some fuzziness/artefacts, on top of the online image converter arbitrarily creating a palette based on the colors in the image, odds are the image will render as nothing but white pixels.

If this same image is converted using the offline conversion script provided by FDI, the image will render like so:

Now the palette is correct, but the coloration is incorrect, due to the LCD being unable to display the colors defined in the .c file, so during rendering it converts the color for the current pixel to the nearest valid color value the display can show.

ដំណើរការមុន។

To ensure the image will display correctly on the LCD, it is recommended to first lower the detail in the image by reducing the colors down to 4, add dithering, and coloring the desired elements of the image to black, white, and red.
The heavy lifting of this task can be accomplished easily using ImageMagick (included in the SuRG Image Conversion download on FDI’s website) and the following command:

magick.exe “shapes.png” -colors 32 -ordered-dither o2x2,3,3,3 “shapes_dithered.png” & magick.exe “shapes_dithered.png” -colorspace gray -ordered-dither o4x4,3,3,3″shapes_dithered.png”

When used on shapes.png, the resulting shapes_dithered.png will look like this:

This image only uses 3 colors, but still has the illusion of high detail due to the dithering applied. You can experiment with the image magick commands to produce different dithering patterns for your image.

ចំណាំ៖ another tool, NXP’s BmpCvtNXP is also available as part of their free EmWin Utilities download from their website, though you will need to register to download it.
Using this tool, you can open a command line and enter this command to generate a dithered, grayscale image:

BmpCvtNXP.exe “shapes.png” -ditherintogray4 -saveasshapes_dithered.png,5,2 -exit

Using MS Paint, the gray pixels can be recolored very fast:

Click on Color 2 in the toolbar.
Select the Color-Picker tool .
Right-click on one of the gray pixels (Zoom in using Ctrl + Mouse Wheel to aid in selecting a pixel).
Click Edit Colors from the toolbar
Set Red to 255, Green to 0, and Blue to 0.
ចុចយល់ព្រម។
Select Color 1 from the tool bar.
Left-click on the new solid-red color you created.
Press CTRL + A to select everything.
Press X on your keyboard or Right-Click and select Cut.

Your canvas should turn gray:
Select the Fill Tool , and click in the canvas to turn it red.
Select the Select Tool.
Right-Click on the dropdown arrow beneath it.
Click “Transparent Selection”.
Make sure you are scrolled to the top of the image canvas.
Right-Click in the canvas or press CTRL+V on your keyboard to paste.

The image can now be converted using either the online image converter or the script for use on SuRG and it will display as expected.

សំណួរគេសួរញឹកញាប់

Why is it important to edit images down to black, white, and red colors before converting for SuRG?

Editing images down to these colors ensures that pixel artifacts and color approximation issues are minimized,resulting in more accurate and expected display colors on the SuRG device.

ឯកសារ/ធនធាន

FDI Converting Images for Use on SuRG [pdf] សៀវភៅណែនាំរបស់ម្ចាស់
SuRG42-CP, Converting Images for Use on SuRG

ឯកសារយោង

សៀវភៅណែនាំអ្នកប្រើប្រាស់

FDI Converting Images for Use on SuRG

ព័ត៌មានអំពីផលិតផល

ការណែនាំអំពីការប្រើប្រាស់ផលិតផល