1==========
2JavaScript
3==========
4
5With `lv_binding_js <https://github.com/lvgl/lv_binding_js>`__ you can write lvgl with JavaScript.
6
7It uses React's virtual DOM concept to manipulate lvgl UI components, providing a familiar React-like
8experience to users.
9
10**Code**
11
12**Code Running on Real Device**
13
14Table of Contents
15-----------------
16
17- `Features <#features>`__
18- `Demo <#demo>`__
19- `Building <#building>`__
20- `Components <#components>`__
21- `Font <#font>`__
22- `Animation <#animation>`__
23- `Style <#style>`__
24- `JSAPI <#jsapi>`__
25- `Thanks <#thanks>`__
26
27
28Features
29--------
30
31- Support all lvgl built-in components
32- Fully support lvgl flex and grid style
33- support most lvgl style, just write like html5 css
34- support dynamic load image
35- Fully support lvgl animation
36
37
38Demo
39----
40
41See the `demo <https://github.com/lvgl/lv_binding_js/tree/master/demo>`__ folder
42
43
44Building
45--------
46
47The following are developer notes on how to build lvgljs on your native platform. They are not complete guides,
48but include notes on the necessary libraries, compile flags, etc.
49
50
51lvgljs
52~~~~~~
53
54- `ubuntu build Notes for sdl simulator <https://github.com/lvgl/lv_binding_js/blob/master/doc/build/build-ubuntu-arm.md>`__
55- `macos x86 build Notes for sdl simulator <https://github.com/lvgl/lv_binding_js/blob/master/doc/build/build-macos-x86-simulator.md>`__
56- `ubuntu build Notes for platform arm <https://github.com/lvgl/lv_binding_js/blob/master/doc/build/build-ubuntu-x86-simulator.md>`__
57
58
59JS Bundle
60~~~~~~~~~
61
62- `JS Bundle build Notes <https://github.com/lvgl/lv_binding_js/blob/master/doc/build/js-bundle.md>`__
63
64
65Components
66----------
67
68- `View <https://github.com/lvgl/lv_binding_js/blob/master/doc/component/View.md>`__
69- `Image <https://github.com/lvgl/lv_binding_js/blob/master/doc/component/Image.md>`__
70- `Button <https://github.com/lvgl/lv_binding_js/blob/master/doc/component/Button.md>`__
71- `Text <https://github.com/lvgl/lv_binding_js/blob/master/doc/component/Text.md>`__
72- `Input <https://github.com/lvgl/lv_binding_js/blob/master/doc/component/Input.md>`__
73- `Textarea <https://github.com/lvgl/lv_binding_js/blob/master/doc/component/Textarea.md>`__
74- `Switch <https://github.com/lvgl/lv_binding_js/blob/master/doc/component/Switch.md>`__
75- `Checkbox <https://github.com/lvgl/lv_binding_js/blob/master/doc/component/Checkbox.md>`__
76- `Dropdownlist <https://github.com/lvgl/lv_binding_js/blob/master/doc/component/Dropdownlist.md>`__
77- `ProgressBar <https://github.com/lvgl/lv_binding_js/blob/master/doc/component/ProgressBar.md>`__
78- `Line <https://github.com/lvgl/lv_binding_js/blob/master/doc/component/Line.md>`__
79- `Roller <https://github.com/lvgl/lv_binding_js/blob/master/doc/component/Roller.md>`__
80- `Keyboard <https://github.com/lvgl/lv_binding_js/blob/master/doc/component/Keyboard.md>`__
81- `Calendar <https://github.com/lvgl/lv_binding_js/blob/master/doc/component/Calendar.md>`__
82- `Chart <https://github.com/lvgl/lv_binding_js/blob/master/doc/component/Chart.md>`__
83
84
85Font
86----
87
88- `Builtin-Symbol <https://github.com/lvgl/lv_binding_js/blob/master/doc/Symbol/symbol.md>`__
89
90
91Animation
92---------
93
94- `Animation <https://github.com/lvgl/lv_binding_js/blob/master/doc/animate/animate.md>`__
95
96
97Style
98-----
99
100.. include::https://github.com/lvgl/lv_binding_js/blob/master/doc/style/position-size-layout.md
101
102- `position-size-layout <https://github.com/lvgl/lv_binding_js/blob/master/doc/style/position-size-layout.md>`__
103- `boxing-model <https://github.com/lvgl/lv_binding_js/blob/master/doc/style/boxing-model.md>`__
104- `color <https://github.com/lvgl/lv_binding_js/blob/master/doc/style/color.md>`__
105- `flex <https://github.com/lvgl/lv_binding_js/blob/master/doc/style/flex.md>`__
106- `grid <https://github.com/lvgl/lv_binding_js/blob/master/doc/style/grid.md>`__
107- `font <https://github.com/lvgl/lv_binding_js/blob/master/doc/style/font.md>`__
108- `opacity <https://github.com/lvgl/lv_binding_js/blob/master/doc/style/opacity.md>`__
109- `display <https://github.com/lvgl/lv_binding_js/blob/master/doc/style/display.md>`__
110- `background <https://github.com/lvgl/lv_binding_js/blob/master/doc/style/background.md>`__
111- `scroll <https://github.com/lvgl/lv_binding_js/blob/master/doc/style/scroll.md>`__
112- `shadow <https://github.com/lvgl/lv_binding_js/blob/master/doc/style/shadow.md>`__
113- `recolor <https://github.com/lvgl/lv_binding_js/blob/master/doc/style/recolor.md>`__
114- `line <https://github.com/lvgl/lv_binding_js/blob/master/doc/style/line.md>`__
115- `transition <https://github.com/lvgl/lv_binding_js/blob/master/doc/style/transition.md>`__
116- `transform <https://github.com/lvgl/lv_binding_js/blob/master/doc/style/transform.md>`__
117
118
119JSAPI
120-----
121
122- `network <https://github.com/lvgl/lv_binding_js/blob/master/doc/jsapi/network.md>`__
123- `filesystem <https://github.com/lvgl/lv_binding_js/blob/master/doc/jsapi/fs.md>`__
124- `dimension <https://github.com/lvgl/lv_binding_js/blob/master/doc/jsapi/dimension.md>`__
125
126
127Thanks
128------
129
130lvgljs depends on following excellent work
131
132- `lvgl <https://github.com/lvgl/lvgl>`__: Create beautiful UIs for any MCU, MPU and display type
133- `QuickJS <https://bellard.org/quickjs/>`__: JavaScript engine
134- `libuv <https://github.com/libuv/libuv>`__: platform abstraction layer
135- `curl <https://github.com/curl/curl>`__: HTTP client
136- `txiki.js <https://github.com/saghul/txiki.js>`__: Tiny JavaScript runtime
137