search

lvgl / lv_binding_js

React bindings for LVGL ⚛️
MIT License
138 stars 35 forks source link

Can we have a CRA-based example? #28

Closed andreamancuso closed 1 month ago

andreamancuso commented 4 months ago

Thank you for making lvgl js bindings available to the open source community.

I was wondering if you could point me to a 'batteries-included' demo, maybe based on https://create-react-app.dev/ so that I can get a sense on how easy it is to embed LVGL in a browser?

Thanks!

andreamancuso commented 4 months ago

I opened src\render\react\components\Image\comp.js and noticed:

image

I assume this is meant to be run on Node.js ? I suppose I got the wrong idea, i.e. this would work in a browser. Sorry if I'm being silly with these questions.

KaruroChori commented 4 months ago

No, it is running on an older version of txiki.js which is embedded in this repo. It cannot run on any other js runtime since native bindings and the libraries being used are platform specific.

In the same way you cannot have this embedded LVGL running in a browser, it is just not meant for that.

andreamancuso commented 4 months ago

Understood, thanks for clarifying.

andreamancuso commented 4 months ago

For the avoidance of the doubt, I see you have added support for emscripten (in a separate repo) - can those bindings run in the browser using a canvas element?

andreamancuso commented 4 months ago

I have been busy developing 'React bindings' for Dear Imgui and egui. It's a big undertaking and I have no previous C++ or Rust experience, so I've been making mistakes and likely my code isn't the most performant (read: it needs a lot of work).

That said, I do have 2 very rough online demos (the Dear Imgui demo only works in Chrome and Edge, Firefox Nightlies).

https://andreamancuso.github.io/react-wasm/dear-imgui/

https://andreamancuso.github.io/react-wasm/egui/

Both pages are based on Create React App and both render a canvas element. Dear Imgui's resizing logic needs fixing.

I have also got a working Electron sample application: https://github.com/andreamancuso/react-wasm/tree/main/packages/dear-imgui/examples/electron-example

image

I was hoping to achieve a similar result using the lv_binding_js package, or the emscripten one.

derekstavis commented 1 month ago

It seems your problem is solved so I'm closing this issue