lv_utils for nodejs #38

hlarouss · 2021-09-09T13:14:19Z

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 · 2021-09-09T14:21:06Z

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

embeddedt · 2021-09-09T16:35:50Z

@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 · 2021-09-12T18:13:36Z

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 · 2021-09-16T16:39:54Z

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 · 2021-09-16T18:11:46Z

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 · 2021-09-17T08:37:09Z

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 · 2021-09-18T00:27:50Z

@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 · 2021-09-18T00:47:17Z

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

kisvegabor · 2021-09-20T07:47:38Z

@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 · 2021-09-20T12:23:25Z

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 · 2021-09-20T12:34:59Z

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 🙂

embeddedt · 2021-09-20T15:57:09Z

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

kisvegabor · 2021-09-20T18:36:41Z

Wonderful! 🙂

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

embeddedt · 2021-09-20T19:15:03Z

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

kisvegabor · 2021-09-20T19:22:22Z

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 [email protected]: 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 [email protected]: this library is no longer supported
npm WARN deprecated [email protected]: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142
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.
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.
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 [email protected]
npm ERR! gyp info using [email protected] | 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 · 2021-09-20T20:23:43Z

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 · 2021-09-21T09:08:24Z

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

Is it missing JQuery?

embeddedt · 2021-09-21T12:47:17Z

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 · 2021-09-22T12:48:54Z

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 · 2021-10-01T01:31:28Z

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

kisvegabor · 2021-10-05T11:14:29Z

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 · 2021-10-05T12:24:29Z

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 · 2021-10-05T15:12:15Z

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 · 2021-10-05T15:21:09Z

Sounds good to me.

embeddedt mentioned this issue Sep 10, 2021

How to convert image to .bin lvgl/lv_img_conv#1

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

lv_utils for nodejs #38

lv_utils for nodejs #38

hlarouss commented Sep 9, 2021

kisvegabor commented Sep 9, 2021

embeddedt commented Sep 9, 2021

hlarouss commented Sep 12, 2021 •

edited

Loading

hlarouss commented Sep 16, 2021

embeddedt commented Sep 16, 2021

hlarouss commented Sep 17, 2021 •

edited

Loading

embeddedt commented Sep 18, 2021 •

edited

Loading

Yohannfra commented Sep 18, 2021

kisvegabor commented Sep 20, 2021 •

edited

Loading

embeddedt commented Sep 20, 2021

kisvegabor commented Sep 20, 2021

embeddedt commented Sep 20, 2021

kisvegabor commented Sep 20, 2021

embeddedt commented Sep 20, 2021

kisvegabor commented Sep 20, 2021

embeddedt commented Sep 20, 2021

kisvegabor commented Sep 21, 2021 •

edited

Loading

embeddedt commented Sep 21, 2021

kisvegabor commented Sep 22, 2021

embeddedt commented Oct 1, 2021

kisvegabor commented Oct 5, 2021

embeddedt commented Oct 5, 2021

kisvegabor commented Oct 5, 2021

embeddedt commented Oct 5, 2021

lv_utils for nodejs #38

lv_utils for nodejs #38

Comments

hlarouss commented Sep 9, 2021

kisvegabor commented Sep 9, 2021

embeddedt commented Sep 9, 2021

hlarouss commented Sep 12, 2021 • edited Loading

hlarouss commented Sep 16, 2021

embeddedt commented Sep 16, 2021

hlarouss commented Sep 17, 2021 • edited Loading

embeddedt commented Sep 18, 2021 • edited Loading

Yohannfra commented Sep 18, 2021

kisvegabor commented Sep 20, 2021 • edited Loading

embeddedt commented Sep 20, 2021

kisvegabor commented Sep 20, 2021

embeddedt commented Sep 20, 2021

kisvegabor commented Sep 20, 2021

embeddedt commented Sep 20, 2021

kisvegabor commented Sep 20, 2021

embeddedt commented Sep 20, 2021

kisvegabor commented Sep 21, 2021 • edited Loading

embeddedt commented Sep 21, 2021

kisvegabor commented Sep 22, 2021

embeddedt commented Oct 1, 2021

kisvegabor commented Oct 5, 2021

embeddedt commented Oct 5, 2021

kisvegabor commented Oct 5, 2021

embeddedt commented Oct 5, 2021

hlarouss commented Sep 12, 2021 •

edited

Loading

hlarouss commented Sep 17, 2021 •

edited

Loading

embeddedt commented Sep 18, 2021 •

edited

Loading

kisvegabor commented Sep 20, 2021 •

edited

Loading

kisvegabor commented Sep 21, 2021 •

edited

Loading