diff options
Diffstat (limited to 'lib/lvgl/docs/integration/bindings/javascript.rst')
| -rw-r--r-- | lib/lvgl/docs/integration/bindings/javascript.rst | 133 |
1 files changed, 133 insertions, 0 deletions
diff --git a/lib/lvgl/docs/integration/bindings/javascript.rst b/lib/lvgl/docs/integration/bindings/javascript.rst new file mode 100644 index 00000000..b619a0e5 --- /dev/null +++ b/lib/lvgl/docs/integration/bindings/javascript.rst @@ -0,0 +1,133 @@ +========== +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 |