Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lvgl/lv_binding_js
React bindings for LVGL ⚛️
https://github.com/lvgl/lv_binding_js
c gui javascript lvgl mcu react reactjs
Last synced: 2 days ago
JSON representation
React bindings for LVGL ⚛️
- Host: GitHub
- URL: https://github.com/lvgl/lv_binding_js
- Owner: lvgl
- License: mit
- Created: 2022-07-06T10:57:42.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2024-09-03T21:18:09.000Z (2 months ago)
- Last Synced: 2024-09-29T15:07:04.542Z (about 1 month ago)
- Topics: c, gui, javascript, lvgl, mcu, react, reactjs
- Language: C++
- Homepage:
- Size: 4.11 MB
- Stars: 137
- Watchers: 8
- Forks: 35
- Open Issues: 8
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# lvgljs
Write [LVGL](https://github.com/lvgl/lvgl) with JavaScript.
It uses React's virtual DOM concept to manipulate LVGL UI components, providing a familiar experience to users.
**Code**
**Running on a 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 suport lvgl flex and grid style
- Support most lvgl style，just write like html5 css
- Support dynamic load image
- Fully support lvgl animation
## Demo
### Widgets
### Calculator
## Building
The following are developer notes on how to build lvgljs.\
It is recommended that you first work with the simulator and only then try
to compile for a target device.
### lvgljs
- [Simulator build notes](./doc/build/build-simulator.md)
- [Device build notes](./doc/build/build-device.md)
### JS Bundle
- [JS Bundle build notes](./doc/build/js-bundle.md)
## Components
- [View](./doc/component/View.md)
- [Image](./doc/component/Image.md)
- [Button](./doc/component/Button.md)
- [Text](./doc/component/Text.md)
- [Input](./doc/component/Input.md)
- [Textarea](./doc/component/Textarea.md)
- [Switch](./doc/component/Switch.md)
- [Checkbox](./doc/component/Checkbox.md)
- [Dropdownlist](./doc/component/Dropdownlist.md)
- [ProgressBar](./doc/component/ProgressBar.md)
- [Line](./doc/component/Line.md)
- [Roller](./doc/component/Roller.md)
- [Keyboard](./doc/component/Keyboard.md)
- [Calendar](./doc/component/Calendar.md)
- [Chart](./doc/component/Chart.md)
## Font
[Buitin-Symbol](./doc/Symbol/symbol.md)
## Animation
[Animation](./doc/animate/animate.md)
## Style
- [position-size-layout](./doc/style/position-size-layout.md)
- [boxing-model](./doc/style/boxing-model.md)
- [color](./doc/style/color.md)
- [flex](./doc/style/flex.md)
- [grid](./doc/style/grid.md)
- [font](./doc/style/font.md)
- [opacity](./doc/style/opacity.md)
- [display](./doc/style/display.md)
- [background](./doc/style/background.md)
- [scroll](./doc/style/scroll.md)
- [shadow](./doc/style/shadow.md)
- [recolor](./doc/style/recolor.md)
- [line](./doc/style/line.md)
- [transition](./doc/style/transition.md)
- [transform](./doc/style/transform.md)
## JSAPI
- [network](./doc/jsapi/network.md)
- [filesystem](./doc/jsapi/fs.md)
- [dimension](./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
- [txiki.js](https://github.com/saghul/txiki.js): Tiny JavaScript runtime
- [QuickJS](https://github.com/quickjs-ng/quickjs/): JavaScript engine
- [libuv](https://github.com/libuv/libuv): platform abstraction layer
- [curl](https://github.com/curl/curl): HTTP client