lv_utils for nodejs

[hlarouss]

Hello everyone,

I'm working on a personal iot project where I have objects connecting to a server (stack running on symfony) to download an image and display it on a screen. For the moment, each object downloads directly the image as a bin array. That bin array is generated directly from the server. To perform the conversion, I'm using the lv_utils library that you provide.

I'm in the process of moving my stack to aws using serverless (with lambda) in javascript (nodejs). Is there any chance that this library is available in nodejs or could I find an equivalent library somewhere?

Thanks in advance for your help, Hous

[kisvegabor]

@embeddedt has an almost ready JS based image converter. I'm not sure what is the current state of that project.

[embeddedt]

@hlarouss Just to clarify, you are not selecting raw format for the color format, just "Binary" under output format, right?

If so, unfortunately this is the one option my converter is still missing, and I haven't had the time or interest at the moment to add it, since I do not use the binary format in my projects.

[hlarouss]

I think so yes.

To be very precise, I'm using this output format: CF_INDEXED_1_BIT

EDIT: Sorry just realised CF_INDEXED_1_BIT is the color format. So yes, I select binary and not C array

[hlarouss]

Hi again,

I was actually working on your project to add the binary support (happy to contribute and add it to your project if you want!) but , to test my code, I compared my generated bin file with a bin file generated using lvgl online tool (https://lvgl.io/tools/imageconverter) and they were different.

I originally thought I was doing something wrong but then I tried to compare the .c files and I noticed that they were also different.

Is it normal?

Here is the command I'm typing:

node lv_img_conv.js critair1.png -f -c CF_INDEXED_1_BIT

The image I'm using:

[embeddedt]

I expect the indexed formats to be different, as I am not using exactly the same conversion logic that the PHP converter used. However, the resulting image should look similar when displayed by LVGL.

[hlarouss]

Ok great, thanks for the info!

In case this might interest anyone, a very quick and dirty way to add binary generation is to just add this part of code in the file "convert.ts":

` var buf = Buffer.from(this.d_out);

        this.fs.writeFile('image.bin', buf,function(err) {
        if (err) {
            return console.error(err);
        }
            console.log("Binary file also created!");
        });

`

just before this line: return this.format_to_c_array();

Add don't forget to declare fs: r_nerr: number; /*Classification error for next pixel*/ g_nerr: number; b_nerr: number; private fs = require('fs');

Cheers!

[embeddedt]

@kisvegabor @hlarouss @Yohannfra

I have finally gotten a chance to sit down and spend a couple hours adding binary support to my converter. Please note that this has had very limited testing (just one image being compared against the PHP converter's output). I am sure there are some corner cases/combinations I have not tried. However, it does seem to work, and this should bring the JS converter to 100% feature parity with the PHP one.

I do also need to clean up the code at some point, as it's currently a mixture of manually-transpiled PHP and more idiomatic JavaScript/TypeScript patterns.

https://embeddedt.github.io/lv_img_conv/

@hlarouss I have also added a note on the README of my repository of how to convert binary files using the CLI. Hopefully this works well enough for your project.

[Yohannfra]

Thanks you very much for taking the time to finish the converter. I'll try it as soon as possible !

[kisvegabor]

@embeddedt That' amazing! Output in big-endian format is also awesome.

What do you think about using it on lvgl.io? We can announce that we have replaced the image converter and ask for feedback.

Can we host it the lvgl organization by forking your version to keep the attribution to you?

[embeddedt]

What do you think about using it on lvgl.io? We can announce that we have replaced the image converter and ask for feedback.

Sounds good to me.

Can we host it the lvgl organization by forking your version to keep the attribution to you?

Sure, that's fine, although I wouldn't be opposed to moving the repository to the organization and adding an attribution note in the README, just to simplify things.

[kisvegabor]

Sure, that's fine, although I wouldn't be opposed to moving the repository to the organization and adding an attribution note in the README, just to simplify things.

I'm fine with both. I leave it to you to do as you find it the best :slightly_smiling_face:

[embeddedt]

Okay; I've moved it to https://github.com/lvgl/lv_img_conv.

[kisvegabor]

Wonderful! :slightly_smiling_face:

I've tried to add it to lvgl.io but got this error:

[embeddedt]

Hmmm... it looks like it was not bundled. Did you add it the same way as the new font converter?

[kisvegabor]

Oh, I didn't know that it works the same way. I've just copied content.html into the into the appropriate html file on our server, and index.js next to the other js files.

Now I tried npm install but got huge bunch of errors:

npm install
npm WARN deprecated request-promise-native@1.0.9: request-promise-native has been deprecated because it extends the now deprecated request package, see https://github.com/request/request/issues/3142
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated parcel-bundler@1.12.5: 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.
npm WARN deprecated core-js@2.6.12: 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.
npm ERR! code 1
npm ERR! path /home/kisvegabor/projects/littlevgl/eclipse-workspace/lv_img_conv/node_modules/canvas
npm ERR! command failed
npm ERR! command sh -c node-gyp rebuild
npm ERR! make: Entering directory '/home/kisvegabor/projects/littlevgl/eclipse-workspace/lv_img_conv/node_modules/canvas/build'
npm ERR!   SOLINK_MODULE(target) Release/obj.target/canvas-postbuild.node
npm ERR!   COPY Release/canvas-postbuild.node
npm ERR!   CXX(target) Release/obj.target/canvas/src/backend/Backend.o
npm ERR!   CXX(target) Release/obj.target/canvas/src/backend/ImageBackend.o
npm ERR!   CXX(target) Release/obj.target/canvas/src/backend/PdfBackend.o
npm ERR!   CXX(target) Release/obj.target/canvas/src/backend/SvgBackend.o
npm ERR!   CXX(target) Release/obj.target/canvas/src/bmp/BMPParser.o
npm ERR!   CXX(target) Release/obj.target/canvas/src/Backends.o
npm ERR!   CXX(target) Release/obj.target/canvas/src/Canvas.o
npm ERR!   CXX(target) Release/obj.target/canvas/src/CanvasGradient.o
npm ERR!   CXX(target) Release/obj.target/canvas/src/CanvasPattern.o
npm ERR! canvas.target.mk:150: recipe for target 'Release/obj.target/canvas/src/CanvasPattern.o' failed
npm ERR! make: Leaving directory '/home/kisvegabor/projects/littlevgl/eclipse-workspace/lv_img_conv/node_modules/canvas/build'
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp info using node-gyp@7.1.2
npm ERR! gyp info using node@16.8.0 | linux | x64
npm ERR! gyp info find Python using Python version 3.6.9 found at "/usr/bin/python3"
npm ERR! (node:17349) [DEP0150] DeprecationWarning: Setting process.config is deprecated. In the future the property will be read-only.
npm ERR! (Use `node --trace-deprecation ...` to show where the warning was created)
npm ERR! gyp info spawn /usr/bin/python3
npm ERR! gyp info spawn args [
npm ERR! gyp info spawn args   '/home/kisvegabor/.nvm/versions/node/v16.8.0/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   '/home/kisvegabor/projects/littlevgl/eclipse-workspace/lv_img_conv/node_modules/canvas/build/config.gypi',
npm ERR! gyp info spawn args   '-I',
npm ERR! gyp info spawn args   '/home/kisvegabor/.nvm/versions/node/v16.8.0/lib/node_modules/npm/node_modules/node-gyp/addon.gypi',
npm ERR! gyp info spawn args   '-I',
npm ERR! gyp info spawn args   '/home/kisvegabor/.cache/node-gyp/16.8.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=/home/kisvegabor/.cache/node-gyp/16.8.0',
npm ERR! gyp info spawn args   '-Dnode_gyp_dir=/home/kisvegabor/.nvm/versions/node/v16.8.0/lib/node_modules/npm/node_modules/node-gyp',
npm ERR! gyp info spawn args   '-Dnode_lib_file=/home/kisvegabor/.cache/node-gyp/16.8.0/<(target_arch)/node.lib',
npm ERR! gyp info spawn args   '-Dmodule_root_dir=/home/kisvegabor/projects/littlevgl/eclipse-workspace/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! gyp info spawn make
npm ERR! gyp info spawn args [ 'BUILDTYPE=Release', '-C', 'build' ]
npm ERR! In file included from ../../nan/nan.h:2884,
npm ERR!                  from ../src/backend/Backend.h:6,
npm ERR!                  from ../src/Canvas.h:5,
npm ERR!                  from ../src/Canvas.cc:3:
npm ERR! ../../nan/nan_typedarray_contents.h: In instantiation of ‘Nan::TypedArrayContents<T>::TypedArrayContents(v8::Local<v8::Value>) [with T = unsigned char]’:
npm ERR! ../src/Canvas.cc:274:65:   required from here
npm ERR! ../../nan/nan_typedarray_contents.h:34:54: warning: ‘v8::ArrayBuffer::Contents v8::ArrayBuffer::GetContents()’ is deprecated: Use GetBackingStore. See http://crbug.com/v8/9908. [-Wdeprecated-declarations]
npm ERR!    34 |       data   = static_cast<char*>(buffer->GetContents().Data()) + byte_offset;
npm ERR!       |                                   ~~~~~~~~~~~~~~~~~~~^~
npm ERR! In file included from /home/kisvegabor/.cache/node-gyp/16.8.0/include/node/node.h:63,
npm ERR!                  from ../../nan/nan.h:54,
npm ERR!                  from ../src/backend/Backend.h:6,
npm ERR!                  from ../src/Canvas.h:5,
npm ERR!                  from ../src/Canvas.cc:3:
npm ERR! /home/kisvegabor/.cache/node-gyp/16.8.0/include/node/v8.h:5593:12: note: declared here
npm ERR!  5593 |   Contents GetContents();
npm ERR!       |            ^~~~~~~~~~~
npm ERR! In file included from ../src/CanvasPattern.cc:6:
npm ERR! ../src/Image.h:18:10: fatal error: gif_lib.h: No such file or directory
npm ERR!    18 | #include <gif_lib.h>
npm ERR!       |          ^~~~~~~~~~~
npm ERR! compilation terminated.
npm ERR! make: *** [Release/obj.target/canvas/src/CanvasPattern.o] Error 1
npm ERR! gyp ERR! build error 
npm ERR! gyp ERR! stack Error: `make` failed with exit code: 2
npm ERR! gyp ERR! stack     at ChildProcess.onExit (/home/kisvegabor/.nvm/versions/node/v16.8.0/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:194:23)
npm ERR! gyp ERR! stack     at ChildProcess.emit (node:events:394:28)
npm ERR! gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:290:12)
npm ERR! gyp ERR! System Linux 4.15.0-96-generic
npm ERR! gyp ERR! command "/home/kisvegabor/.nvm/versions/node/v16.8.0/bin/node" "/home/kisvegabor/.nvm/versions/node/v16.8.0/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
npm ERR! gyp ERR! cwd /home/kisvegabor/projects/littlevgl/eclipse-workspace/lv_img_conv/node_modules/canvas
npm ERR! gyp ERR! node -v v16.8.0
npm ERR! gyp ERR! node-gyp -v v7.1.2
npm ERR! gyp ERR! not ok

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/kisvegabor/.npm/_logs/2021-09-20T19_20_23_021Z-debug.log

[embeddedt]

Hmm... interestingly, I didn't get that error before, however, I have switched to nvm as well since I started working on this project, and I do get that error when I get rid of node_modules and reinstall.

It seems that you now need to install the required native dependencies. I've added a note about this to the README. On Ubuntu:

sudo apt-get install build-essential libcairo2-dev libpango1.0-dev libjpeg-dev libgif-dev librsvg2-dev

[kisvegabor]

Thanks, now I could install and build it but got this error on image conversion:

Is it missing JQuery?

[embeddedt]

Hmm... it should be working exactly the same way as the font converter, as I based the entire structure/bundler configuration on it. JQuery is supposed to be included here.

• Is your adblocker blocking it for some reason?
• When I build it in dist, there are two HTML files: index.html and content.html. Only the first one includes JQuery.

[kisvegabor]

It works better if I use index.html as it is and don't try to integrate content.html.

See https://lvgl.io/tools/imageconverter_new

However, the bytes of the pixels are missing from the generated image. See imgconv.zip

[embeddedt]

This should be fixed now. I left some debug code in by accident.

[kisvegabor]

Thanks, it's working now: https://lvgl.io/tools/imageconverter_new

Can I simply "include" content.html into the layout of lvgl.io or are there any extra steps?

[embeddedt]

You should be able to include it in the same manner as the font converter. I'm still unsure as to why it was giving you issues before. As far as I know I didn't change anything relating to JQuery or the bundling.

[kisvegabor]

I included content.html with PHP but still needed to modify one thing (besides the path of the JS file): although JQuery is added to the site (you can see it in the source code) I needed to add it again in content.html.

Now it's working. Lets test it for a couple of days and then I think we can publish it. What do you think?

[embeddedt]

Sounds good to me.