========== JavaScript ========== With `lv_binding_js <https://github.com/lvgl/lv_binding_js>`__ you can write lvgl with JavaScript. It uses React's virtual DOM concept to manipulate lvgl UI components, providing a familiar React-like experience to users. **Code** **Code Running on Real Device** Table of Contents ----------------- - `Features <#features>`__ - `Demo <#demo>`__ - `Building <#building>`__ - `Components <#components>`__ - `Font <#font>`__ - `Animation <#animation>`__ - `Style <#style>`__ - `JSAPI <#jsapi>`__ - `Thanks <#thanks>`__ Features -------- - Support all lvgl built-in components - Fully support lvgl flex and grid style - support most lvgl style, just write like html5 css - support dynamic load image - Fully support lvgl animation Demo ---- See the `demo <https://github.com/lvgl/lv_binding_js/tree/master/demo>`__ folder Building -------- The following are developer notes on how to build lvgljs on your native platform. They are not complete guides, but include notes on the necessary libraries, compile flags, etc. lvgljs ~~~~~~ - `ubuntu build Notes for sdl simulator <https://github.com/lvgl/lv_binding_js/blob/master/doc/build/build-ubuntu-arm.md>`__ - `macos x86 build Notes for sdl simulator <https://github.com/lvgl/lv_binding_js/blob/master/doc/build/build-macos-x86-simulator.md>`__ - `ubuntu build Notes for platform arm <https://github.com/lvgl/lv_binding_js/blob/master/doc/build/build-ubuntu-x86-simulator.md>`__ JS Bundle ~~~~~~~~~ - `JS Bundle build Notes <https://github.com/lvgl/lv_binding_js/blob/master/doc/build/js-bundle.md>`__ Components ---------- - `View <https://github.com/lvgl/lv_binding_js/blob/master/doc/component/View.md>`__ - `Image <https://github.com/lvgl/lv_binding_js/blob/master/doc/component/Image.md>`__ - `Button <https://github.com/lvgl/lv_binding_js/blob/master/doc/component/Button.md>`__ - `Text <https://github.com/lvgl/lv_binding_js/blob/master/doc/component/Text.md>`__ - `Input <https://github.com/lvgl/lv_binding_js/blob/master/doc/component/Input.md>`__ - `Textarea <https://github.com/lvgl/lv_binding_js/blob/master/doc/component/Textarea.md>`__ - `Switch <https://github.com/lvgl/lv_binding_js/blob/master/doc/component/Switch.md>`__ - `Checkbox <https://github.com/lvgl/lv_binding_js/blob/master/doc/component/Checkbox.md>`__ - `Dropdownlist <https://github.com/lvgl/lv_binding_js/blob/master/doc/component/Dropdownlist.md>`__ - `ProgressBar <https://github.com/lvgl/lv_binding_js/blob/master/doc/component/ProgressBar.md>`__ - `Line <https://github.com/lvgl/lv_binding_js/blob/master/doc/component/Line.md>`__ - `Roller <https://github.com/lvgl/lv_binding_js/blob/master/doc/component/Roller.md>`__ - `Keyboard <https://github.com/lvgl/lv_binding_js/blob/master/doc/component/Keyboard.md>`__ - `Calendar <https://github.com/lvgl/lv_binding_js/blob/master/doc/component/Calendar.md>`__ - `Chart <https://github.com/lvgl/lv_binding_js/blob/master/doc/component/Chart.md>`__ Font ---- `Builtin-Symbol <https://github.com/lvgl/lv_binding_js/blob/master/doc/Symbol/symbol.md>`__ Animation --------- `Animation <https://github.com/lvgl/lv_binding_js/blob/master/doc/animate/animate.md>`__ Style ----- .. include::https://github.com/lvgl/lv_binding_js/blob/master/doc/style/position-size-layout.md - `position-size-layout <https://github.com/lvgl/lv_binding_js/blob/master/doc/style/position-size-layout.md>`__ - `boxing-model <https://github.com/lvgl/lv_binding_js/blob/master/doc/style/boxing-model.md>`__ - `color <https://github.com/lvgl/lv_binding_js/blob/master/doc/style/color.md>`__ - `flex <https://github.com/lvgl/lv_binding_js/blob/master/doc/style/flex.md>`__ - `grid <https://github.com/lvgl/lv_binding_js/blob/master/doc/style/grid.md>`__ - `font <https://github.com/lvgl/lv_binding_js/blob/master/doc/style/font.md>`__ - `opacity <https://github.com/lvgl/lv_binding_js/blob/master/doc/style/opacity.md>`__ - `display <https://github.com/lvgl/lv_binding_js/blob/master/doc/style/display.md>`__ - `background <https://github.com/lvgl/lv_binding_js/blob/master/doc/style/background.md>`__ - `scroll <https://github.com/lvgl/lv_binding_js/blob/master/doc/style/scroll.md>`__ - `shadow <https://github.com/lvgl/lv_binding_js/blob/master/doc/style/shadow.md>`__ - `recolor <https://github.com/lvgl/lv_binding_js/blob/master/doc/style/recolor.md>`__ - `line <https://github.com/lvgl/lv_binding_js/blob/master/doc/style/line.md>`__ - `transition <https://github.com/lvgl/lv_binding_js/blob/master/doc/style/transition.md>`__ - `transform <https://github.com/lvgl/lv_binding_js/blob/master/doc/style/transform.md>`__ JSAPI ----- - `network <https://github.com/lvgl/lv_binding_js/blob/master/doc/jsapi/network.md>`__ - `filesystem <https://github.com/lvgl/lv_binding_js/blob/master/doc/jsapi/fs.md>`__ - `dimension <https://github.com/lvgl/lv_binding_js/blob/master/doc/jsapi/dimension.md>`__ Thanks ------ lvgljs depends on following excellent work `lvgl <https://github.com/lvgl/lvgl>`__: Create beautiful UIs for any MCU, MPU and display type `QuickJS <https://bellard.org/quickjs/>`__: JavaScript engine `libuv <https://github.com/libuv/libuv>`__: platform abstraction layer `curl <https://github.com/curl/curl>`__: HTTP client `txiki.js <https://github.com/saghul/txiki.js>`__: Tiny JavaScript runtime