Comments (24)
embeddedt
commented on June 12, 2024
1
@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.
from lv_utils.
kisvegabor
commented on June 12, 2024
@embeddedt has an almost ready JS based image converter. I'm not sure what is the current state of that project.
from lv_utils.
embeddedt
commented on June 12, 2024
@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.
from lv_utils.
hlarouss
commented on June 12, 2024
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
from lv_utils.
hlarouss
commented on June 12, 2024
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:
from lv_utils.
embeddedt
commented on June 12, 2024
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.
from lv_utils.
hlarouss
commented on June 12, 2024
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!
from lv_utils.
Yohannfra
commented on June 12, 2024
Thanks you very much for taking the time to finish the converter.
I'll try it as soon as possible !
from lv_utils.
kisvegabor
commented on June 12, 2024
@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?
from lv_utils.
embeddedt
commented on June 12, 2024
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.
from lv_utils.
kisvegabor
commented on June 12, 2024
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 🙂
from lv_utils.
embeddedt
commented on June 12, 2024
Okay; I've moved it to https://github.com/lvgl/lv_img_conv.
from lv_utils.
kisvegabor
commented on June 12, 2024
Wonderful! 🙂
I've tried to add it to lvgl.io but got this error:
from lv_utils.
embeddedt
commented on June 12, 2024
Hmmm... it looks like it was not bundled. Did you add it the same way as the new font converter?
from lv_utils.
kisvegabor
commented on June 12, 2024
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
from lv_utils.
embeddedt
commented on June 12, 2024
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
from lv_utils.
kisvegabor
commented on June 12, 2024
Thanks, now I could install and build it but got this error on image conversion:
Is it missing JQuery?
from lv_utils.
embeddedt
commented on June 12, 2024
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.htmlandcontent.html. Only the first one includes JQuery.
from lv_utils.
kisvegabor
commented on June 12, 2024
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
from lv_utils.
embeddedt
commented on June 12, 2024
This should be fixed now. I left some debug code in by accident.
from lv_utils.
kisvegabor
commented on June 12, 2024
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?
from lv_utils.
embeddedt
commented on June 12, 2024
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.
from lv_utils.
kisvegabor
commented on June 12, 2024
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?
from lv_utils.
embeddedt
commented on June 12, 2024
Sounds good to me.
from lv_utils.
Related Issues (19)
- Problem with image converter HOT 2
- Utils review/revisit HOT 19
- LV_ATTRIBUTE_MEM_ALIGN in font converter HOT 2
- [spec] font convertor HOT 13
- image converter throws syntax errors HOT 5
- Littlevgl.com HOT 3
- Font generator generates lv_font_t initialisation in wrong order HOT 2
- Cannot covert Noto Emoji HOT 3
- file bdf_font_converter.py seems too old HOT 1
- PHP Fatal when trying to convert a jpg image HOT 17
- Can the old font converters be removed from this repository? HOT 3
- Colors inverted between online tool and offline tool with indexed_4 / 16 colors HOT 9
- the Online Image to C Array Converter has bug in converting images to binary files HOT 3
- a document page not found HOT 5
- font converter and monospace fonts HOT 8
- Font generate binary HOT 2
- Feedback usage font converter HOT 5
- font_conv_core.php has undefined variable HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from lv_utils.