Hello,

Running on an ESP32S3 with LVGL near master, with color depth set to 16_SWAP with an ST7789 driving a 240x320 LCD.

I am attempting to take the below PNG image, with a transparent background and running through lv_img_conv.js

Passing CF_TRUE_COLOR_CHROMA as the color format to converter

My chroma key as set in kconfig is 0xFF00FF

The converter translates the transparent background to black, as I would expect which in turn is displayed on a given view.

In my case, I want to use the chroma key as an effective replacement of transparency from the original PNG.

This image has been altered from the original in GIMP. A black layer is added with burn blending, and a pink layer is added. This is coming at the cost of dithering on the PNG.

If I instead provide this image to the converter, where the background has been translated to 0xFF00FF, the image ALMOST converts as I'd expect. With or without dithering enabled, I am seeing pink pixels make it through to the LCD with this method. If I dither, the pink pixels form a complete edge around the image. If I dont dither, a few scattered pixels make it in.

Suggested Fix:

When I am calling lv_img_conv.js, I'd like to be able to pass the chroma color expected by LVGL when using CF_TRUE_COLOR_CHROMA (or any other chroma format), such that the conversion translates the original PNG with transparency, with or without dithering to a chroma keyed c array.

The converter then should be able to translate fully opaque pixels to the desired chroma color, while preserving any dithering that may have already been performed in the PNG.

Dithering should also accomodate chroma color, and not dither against a color that is not intended to be rendered in LVGL. This will actively form a pink edge around the content of the image, while removing the background.

I am not familiar with script, but am happy to help on changes if someone more familiar can help point me in a direction to start.

Hey all,

We have an app that send images to Android smart glasses and displays them on the glasses: https://github.com/emexlabs/WearableIntelligenceSystem

We are porting the thin client on the glasses to run on an MCU (ESP32) which is using Lovyan + LVGL to display information on the HUD.

Would there be an easy way to run this functionality on Android? Would there be a simple way to port it to Android?

If not, we could run this in the cloud and call it as an API, but this is less ideal than doing it locally in terms of latency, bandwidth, internet connection reliance, etc.

Thanks

CC: @alex1115alex

The files I generate using the following command are always in the lib directory:
ts-node cli.ts ./2_watchface/conlon_2.png --emit -f -c CF_TRUE_COLOR_ALPHA -t bin --binary-format ARGB8565
How do I specify the output directory?

Hello, I'm trying to use this script to convert a bunch of png files to .bin but can't find the flag to do so.

Thanks

When I want to convert 100 images I don't want to fill all the names one by one, it would be better if the names were auto generated.

For now if I don't specify names when giving multiples images the output is
bin, bin1, bin2 ....

But it should be that if we don't specify names then the names are generated from the input file.
my_house.png -> my_house.bin

I'll try to make the pr today.

Thanks

npm install
npm WARN deprecated [email protected]: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm ERR! code 1
npm ERR! path /Users/lewis/Documents/lv_img_conv/node_modules/canvas
npm ERR! command failed
npm ERR! command sh -c node-pre-gyp install --fallback-to-build
npm ERR! Failed to execute '/usr/local/bin/node /usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js configure --fallback-to-build --module=/Users/lewis/Documents/lv_img_conv/node_modules/canvas/build/Release/canvas.node --module_name=canvas --module_path=/Users/lewis/Documents/lv_img_conv/node_modules/canvas/build/Release --napi_version=8 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v108' (1)
npm ERR! node-pre-gyp info it worked if it ends with ok
npm ERR! node-pre-gyp info using [email protected]
npm ERR! node-pre-gyp info using [email protected] | darwin | x64
npm ERR! node-pre-gyp info check checked for "/Users/lewis/Documents/lv_img_conv/node_modules/canvas/build/Release/canvas.node" (not found)
npm ERR! node-pre-gyp http GET https://github.com/Automattic/node-canvas/releases/download/v2.9.0/canvas-v2.9.0-node-v108-darwin-unknown-x64.tar.gz
npm ERR! node-pre-gyp ERR! install response status 404 Not Found on https://github.com/Automattic/node-canvas/releases/download/v2.9.0/canvas-v2.9.0-node-v108-darwin-unknown-x64.tar.gz 
npm ERR! node-pre-gyp WARN Pre-built binaries not installable for [email protected] and [email protected] (node-v108 ABI, unknown) (falling back to source compile with node-gyp) 
npm ERR! node-pre-gyp WARN Hit error response status 404 Not Found on https://github.com/Automattic/node-canvas/releases/download/v2.9.0/canvas-v2.9.0-node-v108-darwin-unknown-x64.tar.gz 
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp info using [email protected]
npm ERR! gyp info using [email protected] | darwin | x64
npm ERR! gyp info ok 
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp info using [email protected]
npm ERR! gyp info using [email protected] | darwin | x64
npm ERR! gyp info find Python using Python version 3.9.1 found at "/usr/local/opt/[email protected]/bin/python3.9"
npm ERR! gyp info spawn /usr/local/opt/[email protected]/bin/python3.9
npm ERR! gyp info spawn args [
npm ERR! gyp info spawn args   '/usr/local/lib/node_modules/npm/node_modules/node-gyp/gyp/gyp_main.py',
npm ERR! gyp info spawn args   'binding.gyp',
npm ERR! gyp info spawn args   '-f',
npm ERR! gyp info spawn args   'make',
npm ERR! gyp info spawn args   '-I',
npm ERR! gyp info spawn args   '/Users/lewis/Documents/lv_img_conv/node_modules/canvas/build/config.gypi',
npm ERR! gyp info spawn args   '-I',
npm ERR! gyp info spawn args   '/usr/local/lib/node_modules/npm/node_modules/node-gyp/addon.gypi',
npm ERR! gyp info spawn args   '-I',
npm ERR! gyp info spawn args   '/Users/lewis/Library/Caches/node-gyp/18.1.0/include/node/common.gypi',
npm ERR! gyp info spawn args   '-Dlibrary=shared_library',
npm ERR! gyp info spawn args   '-Dvisibility=default',
npm ERR! gyp info spawn args   '-Dnode_root_dir=/Users/lewis/Library/Caches/node-gyp/18.1.0',
npm ERR! gyp info spawn args   '-Dnode_gyp_dir=/usr/local/lib/node_modules/npm/node_modules/node-gyp',
npm ERR! gyp info spawn args   '-Dnode_lib_file=/Users/lewis/Library/Caches/node-gyp/18.1.0/<(target_arch)/node.lib',
npm ERR! gyp info spawn args   '-Dmodule_root_dir=/Users/lewis/Documents/lv_img_conv/node_modules/canvas',
npm ERR! gyp info spawn args   '-Dnode_engine=v8',
npm ERR! gyp info spawn args   '--depth=.',
npm ERR! gyp info spawn args   '--no-parallel',
npm ERR! gyp info spawn args   '--generator-output',
npm ERR! gyp info spawn args   'build',
npm ERR! gyp info spawn args   '-Goutput_dir=.'
npm ERR! gyp info spawn args ]
npm ERR! Package pixman-1 was not found in the pkg-config search path.
npm ERR! Perhaps you should add the directory containing `pixman-1.pc'
npm ERR! to the PKG_CONFIG_PATH environment variable
npm ERR! No package 'pixman-1' found
npm ERR! gyp: Call to 'pkg-config pixman-1 --libs' returned exit status 1 while in binding.gyp. while trying to load binding.gyp
npm ERR! gyp ERR! configure error 
npm ERR! gyp ERR! stack Error: `gyp` failed with exit code: 1
npm ERR! gyp ERR! stack     at ChildProcess.onCpExit (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:261:16)
npm ERR! gyp ERR! stack     at ChildProcess.emit (node:events:527:28)
npm ERR! gyp ERR! stack     at ChildProcess._handle.onexit (node:internal/child_process:291:12)
npm ERR! gyp ERR! System Darwin 21.2.0
npm ERR! gyp ERR! command "/usr/local/bin/node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "configure" "--fallback-to-build" "--module=/Users/lewis/Documents/lv_img_conv/node_modules/canvas/build/Release/canvas.node" "--module_name=canvas" "--module_path=/Users/lewis/Documents/lv_img_conv/node_modules/canvas/build/Release" "--napi_version=8" "--node_abi_napi=napi" "--napi_build_version=0" "--node_napi_label=node-v108"
npm ERR! gyp ERR! cwd /Users/lewis/Documents/lv_img_conv/node_modules/canvas
npm ERR! gyp ERR! node -v v18.1.0
npm ERR! gyp ERR! node-gyp -v v9.0.0
npm ERR! gyp ERR! not ok 
npm ERR! node-pre-gyp ERR! build error 
npm ERR! node-pre-gyp ERR! stack Error: Failed to execute '/usr/local/bin/node /usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js configure --fallback-to-build --module=/Users/lewis/Documents/lv_img_conv/node_modules/canvas/build/Release/canvas.node --module_name=canvas --module_path=/Users/lewis/Documents/lv_img_conv/node_modules/canvas/build/Release --napi_version=8 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v108' (1)
npm ERR! node-pre-gyp ERR! stack     at ChildProcess.<anonymous> (/Users/lewis/Documents/lv_img_conv/node_modules/@mapbox/node-pre-gyp/lib/util/compile.js:89:23)
npm ERR! node-pre-gyp ERR! stack     at ChildProcess.emit (node:events:527:28)
npm ERR! node-pre-gyp ERR! stack     at maybeClose (node:internal/child_process:1090:16)
npm ERR! node-pre-gyp ERR! stack     at ChildProcess._handle.onexit (node:internal/child_process:302:5)
npm ERR! node-pre-gyp ERR! System Darwin 21.2.0
npm ERR! node-pre-gyp ERR! command "/usr/local/bin/node" "/Users/lewis/Documents/lv_img_conv/node_modules/.bin/node-pre-gyp" "install" "--fallback-to-build"
npm ERR! node-pre-gyp ERR! cwd /Users/lewis/Documents/lv_img_conv/node_modules/canvas
npm ERR! node-pre-gyp ERR! node -v v18.1.0
npm ERR! node-pre-gyp ERR! node-pre-gyp -v v1.0.8
npm ERR! node-pre-gyp ERR! not ok

I checked that the github repository address is gone, how can I solve this problem? thanks

npm ERR! node-pre-gyp http GET https://github.com/Automattic/node-canvas/releases/download/v2.9.0/canvas-v2.9.0-node-v108-darwin-unknown-x64.tar.gz

When trying to install this globally, I encountered the following error:

$ lv_img_conv 
    /home/luda/.npm/_npx/1bf7c3c15bf47d04/node_modules/ts-node/src/transpilers/swc.ts:45
        throw new Error(
              ^
    Error: swc compiler requires either @swc/core or @swc/wasm to be installed as a dependency.  See https://typestrong.org/ts-node/docs/transpilers
    ...

After researching the issue, I could solve it by installing the devDependencies for ts-node.

$ cd lv_img_conv/
$ sudo npm install ts-node --save-dev
$ lv_img_conv 
  Options:
      --help               Show help                                       [boolean]
      --version            Show version number                             [boolean]
      --output-file, -o    output file path (for single-image conversion)   [string]
    ...

Consider this closed. I'm leaving this here in case it helps others as well

Perform all steps below and tick them with [x]

• Check the related part of the Documentation
• Update lvgl to the latest version
• Reproduce the issue in a Simulator

Describe the bug

I remebered it use to work before,
but when using "True color chroma keyed" option, it generates empty c array data.
I've tried offline version with various png files but it gets same result.
(/lv_img_conv.js icon_free_c.png -f -c CF_TRUE_COLOR_CHROMA)

const LV_ATTRIBUTE_MEM_ALIGN LV_ATTRIBUTE_IMG_IMG_1 uint8_t img_1_map[] = {
     ----- this is all blank -----  
};

const lv_img_dsc_t img_1 = {
  .header.always_zero = 0,
  .header.w = 100,
  .header.h = 100,
  .data_size = 10000 * LV_COLOR_SIZE / 8,
  .header.cf = LV_IMG_CF_TRUE_COLOR_CHROMA_KEYED,
  .data = img_1_map,
};

When running the script from Windows I get the following error:

C:\>%appdata%\npm\lv_img_conv
The system cannot find the path specified.

I've installed from the npm registry. How can I use this script in Windows cmd.exe?

What happens?

When I use lv_img_conv.js to export an image to a C array with the format CF_ALPHA_4_BIT the resulting C file specifies a data_size that is one larger than I expect.

Replication

1. Create an image (I've attached a sample).
2. Convert using ./lv_img_conv.js <image> -f -c CF_ALPHA_4_BIT.
3. Compare .data_size to WIDTH * HEIGHT * 4 / 8.

(With the 32x32 sample image, I expect 32*32*4/8 = 512 but I get 513)

const lv_img_dsc_t test_image = {
  .header.cf = LV_IMG_CF_ALPHA_4BIT,
  .header.always_zero = 0,
  .header.reserved = 0,
  .header.w = 32,
  .header.h = 32,
  .data_size = 513,
  .data = test_image_map,
};

Note that the C array output only has 512 bytes in it, so if the LVGL library reads 513 bytes, it'll read into uninitialized memory and not padding.

Investigation

I think that the cause is likely this line: https://github.com/lvgl/lv_img_conv/blob/master/lib/convert.ts#L575 Removing it resolves the issue - but I do not know the full effects or why the line is there.

Could you please push the newest version to NPM?

@embeddedt @kisvegabor

I am getting the following when trying to install with npm after cloning the git repo:

/pinetime/lv_img_conv$ npm install
loadDep:yargs → 304       ▌ ╢██████████████████████░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░╟
loadDep:tar → addNameRang ▌ ╢███████████████████████░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░╟
WARN engine [email protected]: wanted: {"node":">=10"} (current: {"node":"8.10.0","npm":"3.5.2"})
loadDep:set-blocking → re ▌ ╢███████████████████████░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░╟
WARN engine [email protected]: wanted: {"node":">=10"} (current: {"node":"8.10.0","npm":"3.5.2"})
loadDep:lru-cache → get   ▌ ╢███████████████████████░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░╟
loadDep:mkdirp → request  ▄ ╢███████████████████████░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░╟
loadDep:mkdirp → get      ▄ ╢███████████████████████░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░╟
npm ERR! Linux 5.4.0-149-generic
npm ERR! argv "/usr/bin/node" "/usr/bin/npm" "install"
npm ERR! node v8.10.0
npm ERR! npm  v3.5.2
npm ERR! code EMISSINGARG

npm ERR! typeerror Error: Missing required argument #1
npm ERR! typeerror     at andLogAndFinish (/usr/share/npm/lib/fetch-package-metadata.js:31:3)
npm ERR! typeerror     at fetchPackageMetadata (/usr/share/npm/lib/fetch-package-metadata.js:51:22)
npm ERR! typeerror     at resolveWithNewModule (/usr/share/npm/lib/install/deps.js:456:12)
npm ERR! typeerror     at /usr/share/npm/lib/install/deps.js:457:7
npm ERR! typeerror     at /usr/share/npm/node_modules/iferr/index.js:13:50
npm ERR! typeerror     at /usr/share/npm/lib/fetch-package-metadata.js:37:12
npm ERR! typeerror     at addRequestedAndFinish (/usr/share/npm/lib/fetch-package-metadata.js:82:5)
npm ERR! typeerror     at returnAndAddMetadata (/usr/share/npm/lib/fetch-package-metadata.js:117:7)
npm ERR! typeerror     at pickVersionFromRegistryDocument (/usr/share/npm/lib/fetch-package-metadata.js:134:20)
npm ERR! typeerror     at /usr/share/npm/node_modules/iferr/index.js:13:50
npm ERR! typeerror This is an error with npm itself. Please report this error at:
npm ERR! typeerror     <http://github.com/npm/npm/issues>

All dependency steps are met otherwise.

Is there a way to avoid using npm for this step?

I've installed this script from the npm registry.

When I run it from the command line, the startup takes a few seconds. This is the same every time it is started.

I'm trying to convert about a dozen images, so this really slows down the build. Is there any way to speed it up? The old PHP script was quite fast, but is more difficult to run on windows, so I'm looking into this nodejs version.

$ time lv_img_conv --version
0.1.3

real    0m2.837s
user    0m4.670s
sys     0m0.210s

Hi,

I am not sure if this is an issue with the display that I am using, DT028BTFT, or the driver, but in order to get things functioning properly I had to add an additional option to this CLI tool, that not only swaps the bytes (565_SWAP), but R and B bits as well.

It's in a fork here.

When converting an image using the online image converter (https://lvgl.io/tools/imageconverter) in Firefox, the resulting lvgl images are almost entirely garbage data. I'm using the latest version of firefox available on my distro (FF 105.0.1). I've attached a test image and the image converter output from both firefox and google chrome. I'm using format CF_TRUE_COLOR_ALPHA, with otherwise default options.

Test image - 4x4 pixels, with top left 4 pixels full red, top right 4 full green, bottom left 4 full blue, bottom right black/white checkered, saved as .png:

Converter output from Firefox (pixel data only):

const LV_ATTRIBUTE_MEM_ALIGN LV_ATTRIBUTE_LARGE_CONST LV_ATTRIBUTE_IMG_IMG_TEST_PNG uint8_t img_test_png_map[] = {

#if LV_COLOR_DEPTH == 1 || LV_COLOR_DEPTH == 8
/*Pixel format: Alpha 8 bit, Red: 3 bit, Green: 3 bit, Blue: 2 bit*/
0x2f, 0x86, 0x59, 0x1b, 0xcf, 0x25, 0xeb, 0xc6,
0xd4, 0x38, 0x9f, 0xc0, 0xc7, 0x70, 0x62, 0x87,
0x2f, 0x86, 0x59, 0x1b, 0xcf, 0x25, 0xeb, 0xc6,
0xd4, 0x38, 0x9f, 0xc0, 0xc7, 0x70, 0x62, 0x87,
#endif
#if LV_COLOR_DEPTH == 16 && LV_COLOR_16_SWAP == 0
/*Pixel format: Alpha 8 bit, Red: 5 bit, Green: 6 bit, Blue: 5 bit*/
0x3d, 0x2b, 0x86, 0x28, 0x36, 0x1b, 0x5b, 0xcb, 0x25, 0x5d, 0xf2, 0xc6,
0xe3, 0xcc, 0x38, 0xb8, 0x86, 0xc0, 0xd7, 0xb8, 0x70, 0x51, 0x60, 0x87,
0x3d, 0x2b, 0x86, 0x28, 0x36, 0x1b, 0x5b, 0xcb, 0x25, 0x5d, 0xf2, 0xc6,
0xe3, 0xcc, 0x38, 0xb8, 0x86, 0xc0, 0xd7, 0xb8, 0x70, 0x51, 0x60, 0x87,
#endif
#if LV_COLOR_DEPTH == 16 && LV_COLOR_16_SWAP != 0
/*Pixel format: Alpha 8 bit, Red: 5 bit, Green: 6 bit, Blue: 5 bit BUT the 2 color bytes are swapped*/
0x2b, 0x3d, 0x86, 0x36, 0x28, 0x1b, 0xcb, 0x5b, 0x25, 0xf2, 0x5d, 0xc6,
0xcc, 0xe3, 0x38, 0x86, 0xb8, 0xc0, 0xb8, 0xd7, 0x70, 0x60, 0x51, 0x87,
0x2b, 0x3d, 0x86, 0x36, 0x28, 0x1b, 0xcb, 0x5b, 0x25, 0xf2, 0x5d, 0xc6,
0xcc, 0xe3, 0x38, 0x86, 0xb8, 0xc0, 0xb8, 0xd7, 0x70, 0x60, 0x51, 0x87,
#endif
#if LV_COLOR_DEPTH == 32
0xe9, 0x65, 0x27, 0x86, 0x41, 0xc2, 0x31, 0x1b, 0xda, 0x67, 0xc5, 0x25, 0xe5, 0x46, 0xef, 0xc6,
0x14, 0x9d, 0xc9, 0x38, 0xc3, 0xd3, 0x7d, 0xc0, 0xb7, 0x19, 0xb6, 0x70, 0x84, 0x07, 0x62, 0x87,
0xe9, 0x65, 0x27, 0x86, 0x41, 0xc2, 0x31, 0x1b, 0xda, 0x67, 0xc5, 0x25, 0xe5, 0x46, 0xef, 0xc6,
0x14, 0x9d, 0xc9, 0x38, 0xc3, 0xd3, 0x7d, 0xc0, 0xb7, 0x19, 0xb6, 0x70, 0x84, 0x07, 0x62, 0x87,
#endif
};

Output from Google Chrome:

const LV_ATTRIBUTE_MEM_ALIGN LV_ATTRIBUTE_LARGE_CONST LV_ATTRIBUTE_IMG_IMG_TEST_PNG uint8_t img_test_png_map[] = {
#if LV_COLOR_DEPTH == 1 || LV_COLOR_DEPTH == 8
/*Pixel format: Alpha 8 bit, Red: 3 bit, Green: 3 bit, Blue: 2 bit*/
0xe0, 0xff, 0xe0, 0xff, 0x1c, 0xff, 0x1c, 0xff,
0xe0, 0xff, 0xe0, 0xff, 0x1c, 0xff, 0x1c, 0xff,
0x03, 0xff, 0x03, 0xff, 0x00, 0xff, 0xff, 0xff,
0x03, 0xff, 0x03, 0xff, 0xff, 0xff, 0x00, 0xff,
#endif
#if LV_COLOR_DEPTH == 16 && LV_COLOR_16_SWAP == 0
/*Pixel format: Alpha 8 bit, Red: 5 bit, Green: 6 bit, Blue: 5 bit*/
0x00, 0xf8, 0xff, 0x00, 0xf8, 0xff, 0xe0, 0x07, 0xff, 0xe0, 0x07, 0xff,
0x00, 0xf8, 0xff, 0x00, 0xf8, 0xff, 0xe0, 0x07, 0xff, 0xe0, 0x07, 0xff,
0x1f, 0x00, 0xff, 0x1f, 0x00, 0xff, 0x00, 0x00, 0xff, 0xff, 0xff, 0xff,
0x1f, 0x00, 0xff, 0x1f, 0x00, 0xff, 0xff, 0xff, 0xff, 0x00, 0x00, 0xff,
#endif
#if LV_COLOR_DEPTH == 16 && LV_COLOR_16_SWAP != 0
/*Pixel format: Alpha 8 bit, Red: 5 bit, Green: 6 bit, Blue: 5 bit BUT the 2 color bytes are swapped*/
0xf8, 0x00, 0xff, 0xf8, 0x00, 0xff, 0x07, 0xe0, 0xff, 0x07, 0xe0, 0xff,
0xf8, 0x00, 0xff, 0xf8, 0x00, 0xff, 0x07, 0xe0, 0xff, 0x07, 0xe0, 0xff,
0x00, 0x1f, 0xff, 0x00, 0x1f, 0xff, 0x00, 0x00, 0xff, 0xff, 0xff, 0xff,
0x00, 0x1f, 0xff, 0x00, 0x1f, 0xff, 0xff, 0xff, 0xff, 0x00, 0x00, 0xff,
#endif
#if LV_COLOR_DEPTH == 32
0x00, 0x00, 0xff, 0xff, 0x00, 0x00, 0xff, 0xff, 0x00, 0xff, 0x00, 0xff, 0x00, 0xff, 0x00, 0xff,
0x00, 0x00, 0xff, 0xff, 0x00, 0x00, 0xff, 0xff, 0x00, 0xff, 0x00, 0xff, 0x00, 0xff, 0x00, 0xff,
0xff, 0x00, 0x00, 0xff, 0xff, 0x00, 0x00, 0xff, 0x00, 0x00, 0x00, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0x00, 0x00, 0xff, 0xff, 0x00, 0x00, 0xff, 0xff, 0xff, 0xff, 0xff, 0x00, 0x00, 0x00, 0xff,
#endif
};

The php script places the generated files in the current working directory. This allows a lot more flexibility in where the files are places. E.G. in CMake we can place the generated files in the build folder:

    add_custom_command(OUTPUT ${C}
        COMMAND php ${CMAKE_CURRENT_LIST_DIR}/img_conv_core.php name=${T}&img=${P}
        DEPENDS ${P}
        WORKING_DIRECTORY ${CMAKE_CURRENT_BINARY_DIR}
        VERBATIM)

This is not possible with this script. Could you add an option to place the outputs in the working directory instead of next to the input files?

I am looking for an easy way (without programming) to convert generated .c image files back to .png files. Is there any GIMP plugin or any online tool for this purpose? Thanks in advance.

I followed the steps in the README to run lv_img_conv in a container:

docker build -t lv_img_conv .

It fails to build [email protected]. Adding the missing dependency

RUN apt update && apt install libsdl-pango-dev -y

to the docker solves this.

However if I then run

docker run -ti --rm -u 1000:1000 lv_img_conv lv_img_conv.js

it fails with:

npx: installed 17 in 1.434s
@swc/core threw an error when attempting to validate swc compiler options.
You may be using an old version of swc which does not support the options used by ts-node.
Try upgrading to the latest version of swc.
Error message from swc:
Failed to deserialize buffer as swc::config::Options
JSON: {"sourceMaps":true,"module":{"type":"commonjs","noInterop":false,"strictMode":true,"ignoreDynamic":false},"swcrc":false,"jsc":{"parser":{"syntax":"typescript","tsx":false,"dynamicImport":true,"importAssertions":true},"target":"es5","transform":{"legacyDecorator":true,"react":{"throwIfNamespace":false,"useBuiltins":false,"runtime":"automatic"},"useDefineForClassFields":false},"keepClassNames":false,"experimental":{"keepImportAttributes":true,"emitAssertForImportAttributes":true}}}

Caused by:
    unknown field `keepImportAttributes`, expected one of `plugins`, `keepImportAssertions`, `cacheRoot` at line 1 column 484

in LVGL 8.2.
when i use example libs gif folder, it wroking.
it's .header.cf = LV_IMG_CF_RAW.
buf if i use "LVGL Online Image Converter" to create raw .c.
it will not show anything. it show the header.cf is LV_IMG_CF_RAW_CHROMA,.
and lvgl 8.2 identifier "LV_IMG_CF_RAW_CHROMA" is undefined.
how to fix it?

Hi, when i genrate C array of png picture to Raw alpha format, it always return size to zero. I have to change manualy all files. Can you help me! Thanks

const lv_img_dsc_t Background = {
.header.cf = LV_IMG_CF_RAW_ALPHA,
.header.always_zero = 0,
.header.reserved = 0,
.header.w = 0,
.header.h = 0,
.data_size = 15469,
.data = Background_map,
};

@swc/core threw an error when attempting to validate swc compiler options.
You may be using an old version of swc which does not support the options used by ts-node.
Try upgrading to the latest version of swc.
Error message from swc:
Failed to deserialize buffer as swc::config::Options
JSON: {"sourceMaps":true,"module":{"noInterop":false,"type":"commonjs","strictMode":true,"ignoreDynamic":false},"swcrc":false,"jsc":{"parser":{"syntax":"typescript","tsx":false,"dynamicImport":true,"importAssertions":true},"target":"es5","transform":{"legacyDecorator":true,"react":{"throwIfNamespace":false,"useBuiltins":false,"runtime":"automatic"}},"keepClassNames":false,"experimental":{"keepImportAssertions":true}}}

Caused by:
unknown field keepImportAssertions, expected one of plugins, keepImportAttributes, emitAssertForImportAttributes, cacheRoot, disableBuiltinTransformsForInternalTesting at line 1 column 415

Hello, I'm using online converter converting gifs to c array. But the converted c file cannot be displayed with lvgl. I notice that the .header.cf field is LV_IMG_CF_RAW_CHROMA_KEYED, not LV_IMG_CF_RAW. Is this a bug for converting gifs?

I tried this gif c array, it can be displayed perfectly. So it's not a problem of lvgl itself.

Just to have this on record for other users with the same problem: Running npm install with Node.js 17 will fail with an error that tries to mention that node-gyp cannot be installed:

RUN npm install:                                                                                                                                                                                                     
#10 7.958 npm WARN deprecated [email protected]: request-promise-native has been deprecated because it extends the now deprecated request package, see https://github.com/request/request/issues/3142              
#10 9.397 npm WARN deprecated [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142                                                                                                 
#10 11.03 npm WARN deprecated [email protected]: this library is no longer supported                                                                                                                                        
#10 13.93 npm WARN deprecated [email protected]: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.                                                                                           
#10 19.19 npm WARN deprecated [email protected]: Parcel v1 is no longer maintained. Please migrate to v2, which is published under the 'parcel' package. See https://v2.parceljs.org/getting-started/migration for details.
#10 21.26 npm WARN deprecated [email protected]: core-js@<3.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.
#10 29.26 npm notice 
#10 29.26 npm notice New patch version of npm available! 8.1.2 -> 8.1.3
#10 29.26 npm notice Changelog: <https://github.com/npm/cli/releases/tag/v8.1.3>
#10 29.26 npm notice Run `npm install -g [email protected]` to update!
#10 29.27 npm notice 
#10 29.27 npm ERR! code 1
#10 29.27 npm ERR! path /usr/src/app/node_modules/canvas
#10 29.27 npm ERR! command failed
#10 29.27 npm ERR! command sh -c node-pre-gyp install --fallback-to-build
#10 29.27 npm ERR! make: Entering directory '/usr/src/app/node_modules/canvas/build'
#10 29.27 npm ERR!   SOLINK_MODULE(target) Release/obj.target/canvas-postbuild.node
#10 29.27 npm ERR!   COPY Release/canvas-postbuild.node
#10 29.27 npm ERR!   CXX(target) Release/obj.target/canvas/src/backend/Backend.o
#10 29.27 npm ERR! make: Leaving directory '/usr/src/app/node_modules/canvas/build'
#10 29.27 npm ERR! Failed to execute '/usr/local/bin/node /usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js build --fallback-to-build --module=/usr/src/app/node_modules/canvas/build/Release/canvas.node --module_name=canvas --module_path=/usr/src/app/node_modules/canvas/build/Release --napi_version=8 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v102' (1)
#10 29.27 npm ERR! node-pre-gyp info it worked if it ends with ok
#10 29.27 npm ERR! node-pre-gyp info using [email protected]
#10 29.27 npm ERR! node-pre-gyp info using [email protected] | linux | x64
#10 29.27 npm ERR! node-pre-gyp WARN Using request for node-pre-gyp https download 
#10 29.27 npm ERR! node-pre-gyp info check checked for "/usr/src/app/node_modules/canvas/build/Release/canvas.node" (not found)
#10 29.27 npm ERR! node-pre-gyp http GET https://github.com/Automattic/node-canvas/releases/download/v2.7.0/canvas-v2.7.0-node-v102-linux-glibc-x64.tar.gz
#10 29.27 npm ERR! node-pre-gyp http 404 https://github.com/Automattic/node-canvas/releases/download/v2.7.0/canvas-v2.7.0-node-v102-linux-glibc-x64.tar.gz
#10 29.27 npm ERR! node-pre-gyp WARN Tried to download(404): https://github.com/Automattic/node-canvas/releases/download/v2.7.0/canvas-v2.7.0-node-v102-linux-glibc-x64.tar.gz 
#10 29.27 npm ERR! node-pre-gyp WARN Pre-built binaries not found for [email protected] and [email protected] (node-v102 ABI, glibc) (falling back to source compile with node-gyp) 
#10 29.27 npm ERR! node-pre-gyp http 404 status code downloading tarball https://github.com/Automattic/node-canvas/releases/download/v2.7.0/canvas-v2.7.0-node-v102-linux-glibc-x64.tar.gz 
#10 29.27 npm ERR! gyp info it worked if it ends with ok
#10 29.27 npm ERR! gyp info using [email protected]
#10 29.27 npm ERR! gyp info using [email protected] | linux | x64
#10 29.27 npm ERR! gyp info ok 
#10 29.27 npm ERR! gyp info it worked if it ends with ok
#10 29.27 npm ERR! gyp info using [email protected]
#10 29.27 npm ERR! gyp info using [email protected] | linux | x64
#10 29.28 npm ERR! gyp info find Python using Python version 3.9.2 found at "/usr/bin/python3"
#10 29.28 npm ERR! gyp http GET https://nodejs.org/download/release/v17.1.0/node-v17.1.0-headers.tar.gz
#10 29.28 npm ERR! gyp http 200 https://nodejs.org/download/release/v17.1.0/node-v17.1.0-headers.tar.gz
#10 29.28 npm ERR! gyp http GET https://nodejs.org/download/release/v17.1.0/SHASUMS256.txt
#10 29.28 npm ERR! gyp http 200 https://nodejs.org/download/release/v17.1.0/SHASUMS256.txt
#10 29.28 npm ERR! gyp info spawn /usr/bin/python3
#10 29.28 npm ERR! gyp info spawn args [
#10 29.28 npm ERR! gyp info spawn args   '/usr/local/lib/node_modules/npm/node_modules/node-gyp/gyp/gyp_main.py',
#10 29.28 npm ERR! gyp info spawn args   'binding.gyp',
#10 29.28 npm ERR! gyp info spawn args   '-f',
#10 29.28 npm ERR! gyp info spawn args   'make',
#10 29.28 npm ERR! gyp info spawn args   '-I',
#10 29.28 npm ERR! gyp info spawn args   '/usr/src/app/node_modules/canvas/build/config.gypi',
#10 29.28 npm ERR! gyp info spawn args   '-I',
#10 29.28 npm ERR! gyp info spawn args   '/usr/local/lib/node_modules/npm/node_modules/node-gyp/addon.gypi',
#10 29.28 npm ERR! gyp info spawn args   '-I',
#10 29.28 npm ERR! gyp info spawn args   '/root/.cache/node-gyp/17.1.0/include/node/common.gypi',
#10 29.28 npm ERR! gyp info spawn args   '-Dlibrary=shared_library',
#10 29.28 npm ERR! gyp info spawn args   '-Dvisibility=default',
#10 29.28 npm ERR! gyp info spawn args   '-Dnode_root_dir=/root/.cache/node-gyp/17.1.0',
#10 29.28 npm ERR! gyp info spawn args   '-Dnode_gyp_dir=/usr/local/lib/node_modules/npm/node_modules/node-gyp',
#10 29.28 npm ERR! gyp info spawn args   '-Dnode_lib_file=/root/.cache/node-gyp/17.1.0/<(target_arch)/node.lib',
#10 29.28 npm ERR! gyp info spawn args   '-Dmodule_root_dir=/usr/src/app/node_modules/canvas',
#10 29.28 npm ERR! gyp info spawn args   '-Dnode_engine=v8',
#10 29.28 npm ERR! gyp info spawn args   '--depth=.',
#10 29.28 npm ERR! gyp info spawn args   '--no-parallel',
#10 29.28 npm ERR! gyp info spawn args   '--generator-output',
#10 29.28 npm ERR! gyp info spawn args   'build',
#10 29.28 npm ERR! gyp info spawn args   '-Goutput_dir=.'
#10 29.28 npm ERR! gyp info spawn args ]
#10 29.28 npm ERR! gyp info ok 
#10 29.28 npm ERR! gyp info it worked if it ends with ok
#10 29.28 npm ERR! gyp info using [email protected]
#10 29.28 npm ERR! gyp info using [email protected] | linux | x64
#10 29.28 npm ERR! gyp info spawn make
#10 29.28 npm ERR! gyp info spawn args [ 'BUILDTYPE=Release', '-C', 'build' ]
#10 29.28 npm ERR! In file included from ../../nan/nan.h:2884,
#10 29.28 npm ERR!                  from ../src/backend/Backend.h:6,
#10 29.28 npm ERR!                  from ../src/backend/Backend.cc:1:
#10 29.28 npm ERR! ../../nan/nan_typedarray_contents.h: In constructor 'Nan::TypedArrayContents<T>::TypedArrayContents(v8::Local<v8::Value>)':
#10 29.28 npm ERR! ../../nan/nan_typedarray_contents.h:34:43: error: 'class v8::ArrayBuffer' has no member named 'GetContents'
#10 29.28 npm ERR!    34 |       data   = static_cast<char*>(buffer->GetContents().Data()) + byte_offset;
#10 29.28 npm ERR!       |                                           ^~~~~~~~~~~
#10 29.28 npm ERR! make: *** [canvas.target.mk:162: Release/obj.target/canvas/src/backend/Backend.o] Error 1
#10 29.28 npm ERR! gyp ERR! build error 
#10 29.28 npm ERR! gyp ERR! stack Error: `make` failed with exit code: 2
#10 29.28 npm ERR! gyp ERR! stack     at ChildProcess.onExit (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:194:23)
#10 29.28 npm ERR! gyp ERR! stack     at ChildProcess.emit (node:events:390:28)
#10 29.28 npm ERR! gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:290:12)
#10 29.28 npm ERR! gyp ERR! System Linux 5.10.25-linuxkit
#10 29.28 npm ERR! gyp ERR! command "/usr/local/bin/node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "build" "--fallback-to-build" "--module=/usr/src/app/node_modules/canvas/build/Release/canvas.node" "--module_name=canvas" "--module_path=/usr/src/app/node_modules/canvas/build/Release" "--napi_version=8" "--node_abi_napi=napi" "--napi_build_version=0" "--node_napi_label=node-v102"
#10 29.28 npm ERR! gyp ERR! cwd /usr/src/app/node_modules/canvas
#10 29.28 npm ERR! gyp ERR! node -v v17.1.0
#10 29.28 npm ERR! gyp ERR! node-gyp -v v8.3.0
#10 29.28 npm ERR! gyp ERR! not ok 
#10 29.28 npm ERR! node-pre-gyp ERR! build error 
#10 29.28 npm ERR! node-pre-gyp ERR! stack Error: Failed to execute '/usr/local/bin/node /usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js build --fallback-to-build --module=/usr/src/app/node_modules/canvas/build/Release/canvas.node --module_name=canvas --module_path=/usr/src/app/node_modules/canvas/build/Release --napi_version=8 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v102' (1)
#10 29.28 npm ERR! node-pre-gyp ERR! stack     at ChildProcess.<anonymous> (/usr/src/app/node_modules/node-pre-gyp/lib/util/compile.js:83:29)
#10 29.28 npm ERR! node-pre-gyp ERR! stack     at ChildProcess.emit (node:events:390:28)
#10 29.28 npm ERR! node-pre-gyp ERR! stack     at maybeClose (node:internal/child_process:1062:16)
#10 29.28 npm ERR! node-pre-gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:301:5)
#10 29.28 npm ERR! node-pre-gyp ERR! System Linux 5.10.25-linuxkit
#10 29.28 npm ERR! node-pre-gyp ERR! command "/usr/local/bin/node" "/usr/src/app/node_modules/.bin/node-pre-gyp" "install" "--fallback-to-build"
#10 29.28 npm ERR! node-pre-gyp ERR! cwd /usr/src/app/node_modules/canvas
#10 29.28 npm ERR! node-pre-gyp ERR! node -v v17.1.0
#10 29.28 npm ERR! node-pre-gyp ERR! node-pre-gyp -v v0.15.0
#10 29.28 npm ERR! node-pre-gyp ERR! not ok
#10 29.32 
#10 29.32 npm ERR! A complete log of this run can be found in:
#10 29.32 npm ERR!     /root/.npm/_logs/2021-11-11T09_11_17_325Z-debug.log

Installation an usage with Node.js 16 works without any issue, and because V17 is not indicated as 'the best to use', I think there is no issue here. This is just to help others who have V17 installed and to see if we can find a solution somewhere in the future.

FYI, I used this Dockerfile to build:

FROM node:17
# Change above to 'FROM node:16' to get this to work

WORKDIR /usr/src/app
RUN apt-get update
RUN apt-get install -y build-essential libcairo2-dev libpango1.0-dev libjpeg-dev libgif-dev librsvg2-dev

COPY package*.json ./

RUN npm install
RUN npm install -g typescript

COPY . .
RUN tsc --build

# Test to see if script runs
CMD [ "node", "lv_img_conv.js", "-h"]

For 16 bit color depth + Alpha now only the non-standard ARGB8565 format can be used. I think it'd be great to support ARGB1555 and ARGB4444 in LVGL hence GPUs could accelerate the drawing of 16 bit ARGB images too.

So the question is how difficult would it be to add support for these formats in the converter?

If the converter supported them, I could quickly made them work in LVGL.

Hi,
Using the online image converters, both alpha-only and indexed color format of binary are not working.
The generated binary file size is same as the one using true-color-alpha format.

Output format is always set to binary-rgb888 when tesing.

Check the binary data with c-array, it seems binary file always use 4byte/pixel

Attached is the original file and generated binary files.

Regards,
binary-images.zip

According to Automattic/node-canvas#1802

node-canvas doesn't handle multi-byte characters in filenames properly.

This means that the image path could not contain any Chinese/Japanese/Korean characters.
(But only failed on Windows. Related: tnfe/FFCreator#3)

I'm wondering It there workaround without modifying the image path?

Node V14 is no longer a LTS release and node-gyp no longer works with MacOS Sonoma when installing the node dependencies.

On Sonoma, I am receiving the error ValueError: invalid mode: 'rU' while trying to load binding.gyp when attempting to npm install. I think this is because node-gyp is outdated and doesn't support newer XCodes, which are installing newer python versions.

When running with Node 18 on Linux and MacOS, the error is sh: 1: ts-node: not found.

Hi @embeddedt,

In v9 the the name the usage of the color formats has been changed. Do you have a little bit of free time to add some minor modifications to the image converter and push it to a dev branch?

These are the new color format options_

• Native RGB (LV_COLOR_FORMAT_NATIVE): It's resolved to LV_COLOR_FORMAT_L8/RGB565/RGB888/XRGB8888 internally according to LV_COLOR_DEPTH. Same as LV_IMG_CF_TRUE_COLOR in v8.
• Native ARGB (LV_COLOR_FORMAT_NATIVE_WITH_ALPHA): It's resolved to LV_COLOR_FORMAT_AL88/RGB565A8/ARGB8888 internally according to LV_COLOR_DEPTH. Same as LV_IMG_CF_TRUE_COLOR_ALPHA in v8.
• LV_COLOR_FORMAT_RGB565_CHROMA_KEYED
• LV_COLOR_FORMAT_RGB888_CHROMA_KEYED
• There is no LV_COLOR_FORMAT_XRGB88888_CHROMA_KEYED as there ARGB8888 is a better option with the same size.
• Alpha 8 (LV_COLOR_FORMAT_A8): Alpha 1, 2 and 4 are removed
• Indexed 1/2/4/8 (LV_COLOR_FORMAT_I1/2/4/8)
• These color formats are included in Native RGB and Native ARGB but it'd be great to select them individually too:
  • LV_COLOR_FORMAT_L8
  • LV_COLOR_FORMAT_A8
  • LV_COLOR_FORMAT_AL88
  • LV_COLOR_FORMAT_RGB565
  • LV_COLOR_FORMAT_RGB565A8
  • LV_COLOR_FORMAT_RGB888
  • LV_COLOR_FORMAT_XRGB8888
  • LV_COLOR_FORMAT_ARGB8888

Before any code cleanup/refactoring takes place, some type of unit testing should be added to ensure all types of images always convert and are displayed correctly.

As the image format has not changed in years, and major changes are unlikely, checking that the C file output matches an expected one should be good enough for testing purposes, and avoids the need to depend on the lvgl/lvgl repository.