Today the LVGL image converter website was switched to use my new JavaScript-based converter which runs directly in your browser, rather than the old PHP image converter which relied on server-side facilities as well. This improvement has been quite a while in the making and I’m pleased to have finally been able to complete it.
The new converter should be significantly more reliable at parsing images. In the past there have frequently been issues with image formats like indexed PNGs. These should now be handled correctly. In fact, any image which your browser can display should now work without issues with the converter, as it uses your browser’s built-in facilities to read the image.
Some other bonus features:
Big-endian image conversion (only works with “C array” format at the moment).
It is now possible to convert multiple images at once.
Attempting to convert larger images should no longer result in an out-of-memory error.
Please give it a try and be sure to let us know if you encounter any issues!
There is no need to immediately change your workflow if the PHP converter is working for you.
That being said, I have just finished publishing the converter as a proper NPM module, so you should be able to install and use it as follows. You will need to have a relatively recent version of Node.js installed for this to work.
npm install -g lv_img_conv
npx lv_img_conv --help
npx lv_img_conv logo_lvgl.png -o myfile.c -c CF_TRUE_COLOR_ALPHA # convert logo_lvgl.png to myfile.c with true color alpha format
The help option lists all the possible color formats.
You should be able to adapt the last command to a shell script easily.
Just tried installing this as a npm module, but failed. Not sure how to make it work. Attached is a log of all the errors and appreciate some guidance. error log.txt (92.1 KB)
Thanks. The real issue turned out to be that certain Canvas dependencies like GTK and Cairo were missing. Finally able to install this with node 23.8.0
So I tried using that online converter, and it appears to have given me wrong colours (kinda looked like a badly-parsed JPEG) when loaded and ran on an ST7789-backed display on ESP32-C3-SuperMini.
When I rolled my own converter (pixel-by-pixel direct LUT from RGB to RGB565 in PHP), the colours came out fine for the same PNG.
I never did do any LV_IMG_DECLARE in my code - seems to work just fine w/o it? Or is that my issue? I used an RGB/8 input image, and I’m using LVGL v9.5.
The ZIP file includes both .c files (kadconverter is done by me, lvglconverter by the online tool), both photos, and the source .png for your analysis.
The PNG was produced with Photoshop CS6 on Windows – and the conversion was done on Windows under Brave Browser (if this matters… and considering it’s JS – it just might).
It seems like it’s an RGB565 byte swapping issue and some different rounding in the converters.
Byte 1 | Byte 2
R G B
LVGL: 01111 111|110 11111
LVGL swapped: 11011 111|011 11111
KAD: 11010 111|010 11110
So there is only one LSB difference in LVGL Swapped and KAD.
What you can do is
Use ./lvgl/scripts/LVGLImage.py path/to/bg_dickbutt_v1.png --ofmt C --cf RGB565_SWAPPED
Or use swap the the byte of the render image in your flush_cb. More info here
Make LVGL render in Swapped color format by calling lv_display_set_color_format(display, LV_COLOR_FORMAT_RGB565_SWAPPED); It’s recommended to use swapped images too, to make rendering faster.
