├── .gitignore
├── .gitmodules
├── CMakeLists.txt
├── LICENSE
├── Makefile
├── build.js
├── demo
├── calculator
│ ├── index.jsx
│ └── screenshoot
│ │ └── sdl_simulator.gif
├── hello_world
│ └── index.tsx
├── screenshoot
│ ├── code.png
│ └── real_device.jpg
└── widgets
│ ├── assets
│ ├── avatar.png
│ ├── clothes.png
│ └── lvgl_logo.png
│ ├── components
│ ├── analytics
│ │ └── index.jsx
│ ├── profile
│ │ └── index.jsx
│ └── shop
│ │ └── index.jsx
│ ├── index.jsx
│ └── screenshoot
│ └── sdl_simulator.gif
├── deps
├── lv_conf.h
└── lv_drv_conf.h
├── doc
├── Symbol
│ └── symbol.md
├── animate
│ └── animate.md
├── api
│ ├── moveToBackground.md
│ ├── moveToFront.md
│ ├── scrollIntoView.md
│ ├── setStyle.md
│ └── style.md
├── build
│ ├── build-device.md
│ ├── build-simulator.md
│ └── js-bundle.md
├── component
│ ├── Button.md
│ ├── Calendar.md
│ ├── Chart.md
│ ├── Checkbox.md
│ ├── Dropdownlist.md
│ ├── Image.md
│ ├── Input.md
│ ├── Keyboard.md
│ ├── Line.md
│ ├── ProgressBar.md
│ ├── Roller.md
│ ├── Slider.md
│ ├── Switch.md
│ ├── Text.md
│ ├── Textarea.md
│ └── View.md
├── jsapi
│ ├── dimension.md
│ ├── fs.md
│ └── network.md
├── props
│ ├── align.md
│ ├── alignTo.md
│ ├── checked.md
│ ├── checkedStyle.md
│ ├── disabled.md
│ ├── indicatorCheckedStyle.md
│ ├── indicatorStyle.md
│ ├── itemStyle.md
│ ├── knobStyle.md
│ ├── maxLength.md
│ ├── mode.md
│ ├── mode
│ │ ├── 1.md
│ │ └── 2.md
│ ├── onChange
│ │ ├── 1.md
│ │ ├── 2.md
│ │ └── 3.md
│ ├── onClick.md
│ ├── onFocus.md
│ ├── onFocusStyle.md
│ ├── onIndicatorPressedStyle.md
│ ├── onKnobPressedStyle.md
│ ├── onLongPressRepeat.md
│ ├── onLongPressed.md
│ ├── onPressed.md
│ ├── onPressedStyle.md
│ ├── onScrollbarPressedStyle.md
│ ├── onScrollbarScrollingStyle.md
│ ├── placeholder.md
│ ├── range.md
│ ├── scrollbarStyle.md
│ ├── selectedStyle.md
│ ├── src.md
│ ├── style.md
│ ├── text
│ │ ├── 1.md
│ │ └── 2.md
│ ├── textarea.md
│ └── value
│ │ ├── 1.md
│ │ └── 2.md
└── style
│ ├── background.md
│ ├── boxing-model.md
│ ├── color.md
│ ├── display.md
│ ├── flex.md
│ ├── font.md
│ ├── grid.md
│ ├── line.md
│ ├── opacity.md
│ ├── position-size-layout.md
│ ├── recolor.md
│ ├── scroll.md
│ ├── shadow.md
│ ├── transform.md
│ └── transition.md
├── package-lock.json
├── package.json
├── prettier.config.js
├── readme.md
├── src
├── engine
│ ├── engine.cpp
│ ├── engine.hpp
│ └── hal
│ │ ├── device
│ │ ├── device.cpp
│ │ └── device.hpp
│ │ ├── hal.hpp
│ │ └── simulator
│ │ ├── mouse_cursor_icon.c
│ │ ├── simulator.cpp
│ │ └── simulator.hpp
└── render
│ ├── native
│ ├── bootstrap
│ │ ├── render_bootstrap.cpp
│ │ └── render_bootstrap.hpp
│ ├── components
│ │ ├── arc
│ │ │ ├── arc.cpp
│ │ │ ├── arc.hpp
│ │ │ └── arc_wrap.cpp
│ │ ├── button
│ │ │ ├── button.cpp
│ │ │ ├── button.hpp
│ │ │ └── button_wrap.cpp
│ │ ├── calendar
│ │ │ ├── calendar.cpp
│ │ │ ├── calendar.hpp
│ │ │ └── calendar_wrap.cpp
│ │ ├── chart
│ │ │ ├── chart.cpp
│ │ │ ├── chart.hpp
│ │ │ └── chart_wrap.cpp
│ │ ├── checkbox
│ │ │ ├── checkbox.cpp
│ │ │ ├── checkbox.hpp
│ │ │ └── checkbox_wrap.cpp
│ │ ├── component.cpp
│ │ ├── component.hpp
│ │ ├── dropdownlist
│ │ │ ├── dropdownlist.cpp
│ │ │ ├── dropdownlist.hpp
│ │ │ └── dropdownlist_wrap.cpp
│ │ ├── gif
│ │ │ ├── gif.cpp
│ │ │ ├── gif.hpp
│ │ │ └── gif_wrap.cpp
│ │ ├── image
│ │ │ ├── image.cpp
│ │ │ ├── image.hpp
│ │ │ ├── image_wrap.cpp
│ │ │ ├── lodepng.cpp
│ │ │ └── lodepng.h
│ │ ├── keyboard
│ │ │ ├── keyboard.cpp
│ │ │ ├── keyboard.hpp
│ │ │ └── keyboard_wrap.cpp
│ │ ├── line
│ │ │ ├── line.cpp
│ │ │ ├── line.hpp
│ │ │ └── line_wrap.cpp
│ │ ├── list
│ │ │ ├── list.cpp
│ │ │ ├── list.hpp
│ │ │ └── list_wrap.cpp
│ │ ├── mask
│ │ │ ├── mask.cpp
│ │ │ ├── mask.hpp
│ │ │ └── mask_wrap.cpp
│ │ ├── progressbar
│ │ │ ├── progressbar.cpp
│ │ │ ├── progressbar.hpp
│ │ │ └── progressbar_wrap.cpp
│ │ ├── roller
│ │ │ ├── roller.cpp
│ │ │ ├── roller.hpp
│ │ │ └── roller_wrap.cpp
│ │ ├── slider
│ │ │ ├── slider.cpp
│ │ │ ├── slider.hpp
│ │ │ └── slider_wrap.cpp
│ │ ├── switch
│ │ │ ├── switch.cpp
│ │ │ ├── switch.hpp
│ │ │ └── switch_wrap.cpp
│ │ ├── tabview
│ │ │ ├── tabview.cpp
│ │ │ ├── tabview.hpp
│ │ │ └── tabview_wrap.cpp
│ │ ├── text
│ │ │ ├── text.cpp
│ │ │ ├── text.hpp
│ │ │ └── text_wrap.cpp
│ │ ├── textarea
│ │ │ ├── textarea.cpp
│ │ │ ├── textarea.hpp
│ │ │ └── textarea_wrap.cpp
│ │ ├── view
│ │ │ ├── view.cpp
│ │ │ ├── view.hpp
│ │ │ └── view_wrap.cpp
│ │ └── window
│ │ │ ├── window.cpp
│ │ │ ├── window.hpp
│ │ │ └── window_wrap.cpp
│ └── core
│ │ ├── animate
│ │ ├── animate.cpp
│ │ └── animate.hpp
│ │ ├── basic
│ │ ├── comp.cpp
│ │ └── comp.hpp
│ │ ├── dimensions
│ │ ├── dimensions.cpp
│ │ └── dimensions.hpp
│ │ ├── event
│ │ ├── click
│ │ │ ├── click.cpp
│ │ │ └── click.hpp
│ │ ├── event.cpp
│ │ ├── event.hpp
│ │ ├── normal
│ │ │ ├── normal.cpp
│ │ │ └── normal.hpp
│ │ ├── select
│ │ │ ├── select.cpp
│ │ │ └── select.hpp
│ │ └── value_change
│ │ │ ├── value_change.cpp
│ │ │ └── value_change.hpp
│ │ ├── img
│ │ ├── gif
│ │ │ ├── gif.cpp
│ │ │ └── gif.hpp
│ │ ├── img.cpp
│ │ ├── img.hpp
│ │ └── png
│ │ │ ├── lodepng.cpp
│ │ │ ├── lodepng.h
│ │ │ ├── png.cpp
│ │ │ └── png.hpp
│ │ ├── refresh
│ │ ├── refresh.cpp
│ │ └── refresh.hpp
│ │ ├── style
│ │ ├── font
│ │ │ ├── font.cpp
│ │ │ └── font.hpp
│ │ ├── style.cpp
│ │ └── style.hpp
│ │ ├── theme
│ │ ├── theme.cpp
│ │ └── theme.hpp
│ │ └── utils
│ │ ├── utils.cpp
│ │ └── utils.hpp
│ └── react
│ ├── components
│ ├── Arc
│ │ ├── comp.ts
│ │ └── config.ts
│ ├── Button
│ │ ├── comp.ts
│ │ └── config.ts
│ ├── Calendar
│ │ ├── comp.ts
│ │ └── config.ts
│ ├── Canvas
│ │ ├── comp.ts
│ │ ├── config.ts
│ │ └── context.ts
│ ├── Chart
│ │ ├── comp.ts
│ │ └── config.ts
│ ├── Checkbox
│ │ ├── comp.ts
│ │ └── config.ts
│ ├── Dropdownlist
│ │ ├── comp.ts
│ │ └── config.ts
│ ├── GIF
│ │ ├── comp.ts
│ │ └── config.ts
│ ├── Image
│ │ ├── comp.ts
│ │ └── config.ts
│ ├── Input
│ │ ├── comp.ts
│ │ └── config.ts
│ ├── Keyboard
│ │ ├── comp.ts
│ │ └── config.ts
│ ├── Line
│ │ ├── comp.ts
│ │ └── config.ts
│ ├── Mask
│ │ ├── comp.ts
│ │ └── config.ts
│ ├── ProgressBar
│ │ ├── comp.ts
│ │ └── config.ts
│ ├── Roller
│ │ ├── comp.ts
│ │ └── config.ts
│ ├── Slider
│ │ ├── comp.ts
│ │ └── config.ts
│ ├── Switch
│ │ ├── comp.ts
│ │ └── config.ts
│ ├── Tabs
│ │ ├── comp.ts
│ │ └── config.ts
│ ├── Text
│ │ ├── comp.ts
│ │ └── config.ts
│ ├── Textarea
│ │ ├── comp.ts
│ │ └── config.ts
│ ├── View
│ │ ├── comp.ts
│ │ └── config.ts
│ ├── Window
│ │ ├── comp.ts
│ │ └── config.ts
│ ├── common
│ │ └── index.ts
│ └── config.ts
│ ├── core
│ ├── animate
│ │ └── index.js
│ ├── dimensions
│ │ └── index.js
│ ├── event
│ │ └── index.js
│ ├── reconciler
│ │ └── index.js
│ ├── renderer
│ │ └── index.js
│ ├── style
│ │ ├── color.ts
│ │ ├── index.ts
│ │ ├── pipe
│ │ │ ├── arc.ts
│ │ │ ├── background.ts
│ │ │ ├── border.ts
│ │ │ ├── display.ts
│ │ │ ├── flex.ts
│ │ │ ├── grid.ts
│ │ │ ├── line.ts
│ │ │ ├── misc.ts
│ │ │ ├── opacity.ts
│ │ │ ├── outline.ts
│ │ │ ├── padding.ts
│ │ │ ├── pos.ts
│ │ │ ├── scoll.ts
│ │ │ ├── shadow.ts
│ │ │ ├── text.ts
│ │ │ └── trans.ts
│ │ ├── post.ts
│ │ ├── symbol.ts
│ │ └── util.ts
│ └── theme
│ │ └── index.js
│ ├── index.ts
│ ├── package-lock.json
│ ├── package.json
│ └── utils
│ └── helpers.ts
├── test
├── animate
│ ├── 1
│ │ └── index.jsx
│ └── 2
│ │ └── index.jsx
├── assets
│ ├── icons
│ │ ├── 01d.png
│ │ ├── 01n.png
│ │ ├── 02d.png
│ │ ├── 02n.png
│ │ ├── 03d.png
│ │ ├── 03n.png
│ │ ├── 04d.png
│ │ ├── 04n.png
│ │ ├── 09d.png
│ │ ├── 09n.png
│ │ ├── 10d.png
│ │ ├── 10n.png
│ │ ├── 11d.png
│ │ ├── 11n.png
│ │ ├── 13d.png
│ │ ├── 13n.png
│ │ ├── 50d.png
│ │ ├── 50n.png
│ │ └── na.png
│ ├── images
│ │ └── sky.jpg
│ └── png_decoder_test.png
├── button
│ ├── 1
│ │ └── index.jsx
│ └── 2
│ │ └── index.jsx
├── calendar
│ └── 1
│ │ └── index.jsx
├── chart
│ ├── 1
│ │ └── index.jsx
│ ├── 2
│ │ └── index.jsx
│ ├── 3
│ │ └── index.jsx
│ ├── 4
│ │ └── index.jsx
│ └── 5
│ │ └── index.jsx
├── checkbox
│ ├── 1
│ │ └── index.jsx
│ └── 2
│ │ └── index.jsx
├── dropdownlist
│ ├── 1
│ │ └── index.jsx
│ ├── 2
│ │ └── index.jsx
│ └── 3
│ │ └── index.jsx
├── event
│ ├── 1
│ │ └── index.jsx
│ ├── 2
│ │ └── index.jsx
│ └── 3
│ │ └── index.jsx
├── flex
│ ├── 1
│ │ └── index.jsx
│ ├── 2
│ │ └── index.jsx
│ └── 3
│ │ └── index.jsx
├── gif
│ └── 1
│ │ └── index.jsx
├── grid
│ ├── 1
│ │ └── index.jsx
│ ├── 2
│ │ └── index.jsx
│ ├── 3
│ │ └── index.jsx
│ └── 4
│ │ └── index.jsx
├── image
│ ├── 1
│ │ ├── 1.png
│ │ ├── 2.png
│ │ └── index.jsx
│ ├── 2
│ │ ├── 2.png
│ │ └── index.jsx
│ ├── 3
│ │ ├── 3.png
│ │ └── index.jsx
│ └── 4
│ │ └── index.jsx
├── line
│ └── 1
│ │ └── index.jsx
├── progressbar
│ ├── 1
│ │ └── index.jsx
│ ├── 2
│ │ └── index.jsx
│ └── 3
│ │ └── index.jsx
├── roller
│ ├── 1
│ │ └── index.jsx
│ └── 2
│ │ └── index.jsx
├── runtime
│ ├── fetch
│ │ └── 1
│ │ │ └── index.js
│ └── fs
│ │ ├── 01d.png
│ │ └── 1.js
├── scroll
│ ├── 1
│ │ └── index.jsx
│ ├── 2
│ │ └── index.jsx
│ ├── 3
│ │ └── index.jsx
│ └── 4
│ │ └── index.jsx
├── slider
│ └── 1
│ │ └── index.jsx
├── style
│ ├── background
│ │ └── index.jsx
│ ├── border
│ │ └── index.jsx
│ ├── outline
│ │ └── index.jsx
│ ├── shadow
│ │ └── index.jsx
│ ├── size
│ │ └── index.jsx
│ ├── text
│ │ └── index.jsx
│ └── transition
│ │ └── index.jsx
├── switch
│ └── 1
│ │ └── index.jsx
└── textarea
│ ├── 1
│ └── index.jsx
│ └── 2
│ └── index.jsx
└── tsconfig.json
/.gitignore:
--------------------------------------------------------------------------------
1 | # Editor configuration
2 | .vscode/
3 |
4 | # Build folders
5 | debug/
6 | build*/
7 | dev_*/
8 | **/.cache/
9 |
10 | # CMake files
11 | CMakeFiles/
12 | CMakeCache.txt
13 |
14 | # Generated JS files
15 | /test/**/*.js
16 | /demo/**/*.js
17 |
18 | # MacOS
19 | .DS_Store
20 |
21 | # NPM
22 | node_modules/
23 | src/render/react/index.js
24 |
--------------------------------------------------------------------------------
/.gitmodules:
--------------------------------------------------------------------------------
1 | [submodule "deps/lvgl"]
2 | path = deps/lvgl
3 | url = https://github.com/lvgl/lvgl.git
4 | [submodule "deps/lv_drivers"]
5 | path = deps/lv_drivers
6 | url = https://github.com/lvgl/lv_drivers.git
7 | [submodule "deps/txiki"]
8 | path = deps/txiki
9 | url = https://github.com/saghul/txiki.js.git
10 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) Facebook, Inc. and its affiliates.
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
--------------------------------------------------------------------------------
/Makefile:
--------------------------------------------------------------------------------
1 | BUILD_SIM=build
2 |
3 | .PHONY: setup simulator demo clean
4 |
5 | setup:
6 | git submodule update --recursive --init
7 | npm install
8 |
9 | simulator:
10 | @mkdir -p $(BUILD_SIM)
11 | cmake -B "$(BUILD_SIM)" -DCMAKE_BUILD_TYPE=Simulator
12 | cmake --build $(BUILD_SIM) -j
13 |
14 | # Set default project argument to 'widgets' if no project is provided
15 | demo: simulator
16 | @PROJECT=$${PROJECT:-widgets}; \
17 | echo "Running demo with project: $$PROJECT"; \
18 | node build.js && \
19 | ./${BUILD_SIM}/lvgljs run demo/$$PROJECT/index.js
20 |
21 | clean:
22 | rm -rf $(BUILD_SIM)
--------------------------------------------------------------------------------
/build.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | const alias = require('esbuild-plugin-alias');
3 | const glob = require('glob')
4 |
5 | function build(pattern){
6 | const jsxfiles = new glob.Glob(pattern, {})
7 |
8 | for (const file of jsxfiles) {
9 | const entry = path.resolve(__dirname, file)
10 |
11 | require('esbuild')
12 | .build({
13 | entryPoints: [entry],
14 | bundle: true,
15 | platform: 'neutral',
16 | external: ['tjs:path'],
17 | outfile: path.resolve(path.dirname(entry), 'index.js'),
18 | define: {
19 | 'process.env.NODE_ENV': '"development"',
20 | }
21 | })
22 | .then(() => console.log('Build %s complete', file))
23 | .catch(() => {
24 | process.exit(1);
25 | });
26 | }
27 | }
28 |
29 | build('demo/*/*.{jsx,tsx}')
30 | build('test/*/*.{jsx,tsx}')
31 |
--------------------------------------------------------------------------------
/demo/calculator/screenshoot/sdl_simulator.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lvgl/lv_binding_js/57ae57042087f617a80c06ab3526a5dd15b2d6c2/demo/calculator/screenshoot/sdl_simulator.gif
--------------------------------------------------------------------------------
/demo/hello_world/index.tsx:
--------------------------------------------------------------------------------
1 | import { Button, Render, Text, View } from "lvgljs-ui";
2 | import React from "react";
3 |
4 | function App() {
5 | return (
6 |
7 |
10 |
11 | );
12 | }
13 |
14 | Render.render();
15 |
--------------------------------------------------------------------------------
/demo/screenshoot/code.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lvgl/lv_binding_js/57ae57042087f617a80c06ab3526a5dd15b2d6c2/demo/screenshoot/code.png
--------------------------------------------------------------------------------
/demo/screenshoot/real_device.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lvgl/lv_binding_js/57ae57042087f617a80c06ab3526a5dd15b2d6c2/demo/screenshoot/real_device.jpg
--------------------------------------------------------------------------------
/demo/widgets/assets/avatar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lvgl/lv_binding_js/57ae57042087f617a80c06ab3526a5dd15b2d6c2/demo/widgets/assets/avatar.png
--------------------------------------------------------------------------------
/demo/widgets/assets/clothes.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lvgl/lv_binding_js/57ae57042087f617a80c06ab3526a5dd15b2d6c2/demo/widgets/assets/clothes.png
--------------------------------------------------------------------------------
/demo/widgets/assets/lvgl_logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lvgl/lv_binding_js/57ae57042087f617a80c06ab3526a5dd15b2d6c2/demo/widgets/assets/lvgl_logo.png
--------------------------------------------------------------------------------
/demo/widgets/screenshoot/sdl_simulator.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lvgl/lv_binding_js/57ae57042087f617a80c06ab3526a5dd15b2d6c2/demo/widgets/screenshoot/sdl_simulator.gif
--------------------------------------------------------------------------------
/doc/Symbol/symbol.md:
--------------------------------------------------------------------------------
1 | # Symbol mapping [lvgl Fonts Symbol](https://docs.lvgl.io/master/overview/font.html)
2 |
3 | ## Value
4 | the following symbols are also added to the built-in fonts:
5 |
6 | audio、video、list、ok、close、power、settings、home、download、drive、refresh、mute、volume_mid、volume_max、image、tint、prev、play、pause、stop、next、eject、left、right、plus、minus、eye_open、eye_close、warning、shuffle、up、down、loop、directory、upload、call、cut、copy、save、bars、envelope、charge、paste、bell、keyboard、gps、file、wifi、battery_full、battery_3、battery_2、battery_1、battery_empty、usb、bluetooth、trash、edit、backspace、sd_card、newline、dummy
7 |
8 | ## Usage
9 | ```jsx
10 | import { Image, Text, BUILT_IN_SYMBOL } from 'lvlgjs-ui'
11 | import { useRef } from 'react'
12 |
13 | function Component () {
14 | const ref = useRef()
15 | useEffect(() => {
16 | console.log(ref.current.moveToFront())
17 | }, [])
18 |
19 | return (
20 |
21 | {BUILT_IN_SYMBOL.audio}
22 |
25 |
26 | )
27 | }
28 | ```
--------------------------------------------------------------------------------
/doc/api/moveToBackground.md:
--------------------------------------------------------------------------------
1 | # Component.moveToBackground
2 |
3 | Api moveToBackground mapping lvgl lv_obj_move_foreground
4 |
5 | ## Demo
6 | test/scroll/3
--------------------------------------------------------------------------------
/doc/api/moveToFront.md:
--------------------------------------------------------------------------------
1 | # Component.moveToFront
2 |
3 | Api moveToFront mapping lvgl lv_obj_move_foreground
4 |
5 | ## Demo
6 | test/scroll/3
--------------------------------------------------------------------------------
/doc/api/scrollIntoView.md:
--------------------------------------------------------------------------------
1 | # Component.scrollIntoView
2 |
3 | Api scrollIntoView mapping lvgl lv_obj_scroll_to_view
4 |
5 | ## Demo
6 | test/scroll/4
--------------------------------------------------------------------------------
/doc/api/setStyle.md:
--------------------------------------------------------------------------------
1 | # Component.setStyle
2 |
3 | Using style in this manner will overwrite origin styles on the component
4 |
5 | ## Demo
6 | test/animate/1
--------------------------------------------------------------------------------
/doc/api/style.md:
--------------------------------------------------------------------------------
1 | # Component.style
2 |
3 | The style read-only property returns the latest pos and size of Component. Do not frequent accessing the style property, it will cause ui immediately refresh
4 |
5 | ## Value
6 | A style object, with the following properties:
7 | - width
8 | - height
9 | - left
10 | - top
11 |
12 | ## Demo
13 | test/animate/2
14 |
15 |
--------------------------------------------------------------------------------
/doc/build/build-device.md:
--------------------------------------------------------------------------------
1 | # Target Build Guide
2 | This guide gives an overview on how to build lvgljs for an embedded Linux target.
3 |
4 | This is not too different from building for a regular Linux target,
5 | besides that you will probably need to cross-compile and won't want to use the sdl2 simulator.
6 |
7 | When building for a target device, the [*device HAL*](../../src/engine/hal/device) is selected.\
8 | Currently it is not possible to configure the properties of the device and
9 | it will by default use a screen size of 1024x600 together with the framebuffer device.
10 |
11 | You will most likely need to tweak the screen size for your device,
12 | and can also opt to use a different LVGL display like DRM or
13 | [wayland](https://github.com/lvgl/lv_drivers/blob/master/wayland/README.md).
14 |
15 | The way you cross-compile applications for your target will depend on your use-case,
16 | which is out-of-scope for this guide.
17 |
18 | You will have to make sure that:
19 | - your sysroot has all the necessary dependencies.\
20 | Take a look at the [txiki readme](https://github.com/saghul/txiki.js#building) for a list of the dependencies
21 | - you provide your own libffi library, since building it together with txiki doesn't work when cross-compiling at this moment.\
22 | Do this by passing `-DUSE_EXTERNAL_FFI=ON` to cmake.
23 |
24 | You can now cross-compile like normal.
25 | For instance, if you're using Yocto, you source your SDK environment and then do
26 |
27 | ```sh
28 | cmake -B build -DUSE_EXTERNAL_FFI=ON
29 | cmake --build build
30 | ```
31 |
32 | You can then copy `build/lvgljs` to your target device together with one of the demo's
33 | like `demo/widgets` and try to run it there:
34 |
35 | ```sh
36 | ./lvgljs run demo/widgets/index.js
37 | ```
38 |
--------------------------------------------------------------------------------
/doc/build/build-simulator.md:
--------------------------------------------------------------------------------
1 | # Simulator Build Guide
2 | This guide gives an overview on how to build lvgljs running with SDL simulator.
3 | This should work the same for both Linux and macOS.
4 |
5 | ## Setup
6 | You'll need to install these dependencies:
7 | - [cmake](https://cmake.org/)
8 | - [sdl2](https://www.libsdl.org/)
9 | - [Node.js](https://nodejs.org/en/download/package-manager)
10 |
11 | | Mac | Linux |
12 | | ------- | ------- |
13 | | `brew install cmake sdl2 node` | `sudo apt install cmake nodejs libsdl2-dev` |
14 |
15 |
16 | Then run `make setup`. This will initialize the git submodules and install the necessary npm packages
17 |
18 | ## Running the demo
19 |
20 | The demos are located at `/demos/*`.
21 |
22 | `make demo` will build the simulator and run the `widgets` demo. Optionally you can add `PROJECT=` where `demoName` is the directory in `/demos`, if you want to run a specific project e.g. `make demo PROJECT=calculator`
23 |
24 | ## Running other projects
25 | 1. Build the simulator with `make simulator`, which will then be available in the `build/` directory.
26 | 2. Run `npm run bundle` to generate `*.js` files from the `*.jsx` files in the `test/` and `demo/` directories. You can also run this in watch mode to automatically build the files, via `npm run bundle:watch`.
27 | 3. Run the simulator with the path to the generated file. You can also run this in watch mode to automatically restart the simulator upon file changes e.g.:
28 | ```sh
29 | npm run sim:watch -- test/button/2/index.js
30 | ```
31 |
32 | Putting these together, once you've built the simulator (via `make simulator`) you can then set open two terminals.
33 | | Terminal Window 1 | Terminal Window 2 |
34 | | ------- | ------- |
35 | | `npm run bundle:watch` | `npm run sim:watch ` |
36 |
--------------------------------------------------------------------------------
/doc/build/js-bundle.md:
--------------------------------------------------------------------------------
1 | # JS Bundle Build Guide
2 | There are two ways to build JS bundle, please choose what you like
3 |
4 | ## 1
5 | If you prefer to write your JS Code in a separate project,
6 | you will have to add the lvgljs-ui package, located at [src/render/react](../../src/render/react).
7 |
8 | You can run the following code to the install npm package,
9 | and can then use your own bundle tool like webpack to build the bundle.
10 |
11 | ```bash
12 | npm install lvgljs-ui
13 | ```
14 |
15 | > [!WARNING]
16 | > The lvgljs-ui package [on npm](https://www.npmjs.com/package/lvgljs-ui) is currently out-of-date.\
17 | > The recommended approach is to use [relative-deps](https://www.npmjs.com/package/relative-deps) to use a local version from this git repository.
18 |
19 | ## 2
20 | If you prefer write JS Code in lvgljs dir, the file ./build.js will help you make js bundle, after edit the entry and outfile, run the following script in lvgljs dir, it will use esbuild to build bundle, and you dont need to install npm package lvgljs-ui
21 | ```bash
22 | npm run bundle
23 | ```
24 |
--------------------------------------------------------------------------------
/doc/component/Calendar.md:
--------------------------------------------------------------------------------
1 | # Component Keyboard mapping [lvgl lv_calendar)](https://docs.lvgl.io/master/widgets/calendar.html#overview)
2 |
3 | It's used to realize a virtual keyboard to write texts into a Text area.
4 |
5 | ## Api
6 | - [style](../api/style.md)
7 | - [moveToFront](../api/moveToFront.md)
8 | - [moveToBackground](../api/moveToBackground.md)
9 | - [setStyle](../api/setStyle.md)
10 | - [scrollIntoView](../api/scrollIntoView.md)
11 |
12 | ## Props
13 | - [style](../props/style.md)
14 | - [align](../props/align.md)
15 | - [alignTo](../props/alignTo.md)
16 | - today
17 | - will highlight the current day
18 | - shownMonth
19 | - set the shown date
20 | - highLightDates
21 | - The list of highlighted dates
22 | - [onChange](../props/onChange/1.md)
23 |
24 | ## Usage
25 | ```jsx
26 | import { Calendar, Render, EAlignType } from 'lvgljs-ui';
27 | import React, { useState } from 'react';
28 |
29 | function App () {
30 |
31 | return (
32 | { console.log(e.value) }}
44 | />
45 | )
46 | };
47 |
48 | const style = {
49 | window: {
50 | 'width': '480px',
51 | 'height': '320px',
52 | },
53 | calendar: {
54 | 'width': 185,
55 | 'height': 185,
56 | }
57 | };
58 |
59 | Render.render();
60 | ```
61 |
62 | ## Demo
63 | test/calendar
64 |
--------------------------------------------------------------------------------
/doc/component/Image.md:
--------------------------------------------------------------------------------
1 | # Component Image mapping [lvgl lv_img)](https://docs.lvgl.io/master/widgets/img.html#overview)
2 |
3 | ## Api
4 | - [style](../api/style.md)
5 | - [moveToFront](../api/moveToFront.md)
6 | - [moveToBackground](../api/moveToBackground.md)
7 | - [setStyle](../api/setStyle.md)
8 | - [scrollIntoView](../api/scrollIntoView.md)
9 |
10 | ## Props
11 | - [style](../props/style.md)
12 | - [onPressedStyle](../props/onPressedStyle.md)
13 | - [onClick](../props/onClick.md)
14 | - [onPressed](../props/onPressed.md)
15 | - [onLongPressed](../props/onLongPressed.md)
16 | - [onLongPressRepeat](../props/onLongPressRepeat.md)
17 | - [align](../props/align.md)
18 | - [alignTo](../props/alignTo.md)
19 | - [src](../props/src.md)
20 |
21 | ## Usage
22 | ```jsx
23 | import { Image } from 'lvlgjs-ui'
24 |
25 | const path = require('path')
26 | function Component () {
27 | return (
28 |
29 |
30 |
31 |
32 |
33 | )
34 | }
35 | ```
36 |
37 | ## Demo
38 | test/image
--------------------------------------------------------------------------------
/doc/component/Keyboard.md:
--------------------------------------------------------------------------------
1 | # Component Keyboard mapping [lvgl lv_keyboard)](https://docs.lvgl.io/master/widgets/keyboard.html)
2 |
3 | It's used to realize a virtual keyboard to write texts into a Text area.
4 |
5 | ## Api
6 | - [style](../api/style.md)
7 | - [moveToFront](../api/moveToFront.md)
8 | - [moveToBackground](../api/moveToBackground.md)
9 | - [setStyle](../api/setStyle.md)
10 | - [scrollIntoView](../api/scrollIntoView.md)
11 |
12 | ## Props
13 | - [style](../props/style.md)
14 | - [align](../props/align.md)
15 | - [alignTo](../props/alignTo.md)
16 | - [textarea](../props/textarea.md)
17 | - [mode](../props/mode/2.md)
18 |
19 | ## Usage
20 | ```jsx
21 | import { Keyboard, Input } from 'lvlgjs-ui'
22 | import { useState, useRef } from 'react'
23 |
24 | function Component () {
25 | const [didMount, setDidMount] = useState(false)
26 | const ref = useRef()
27 |
28 | useEffect(() => {
29 | setDidMount(true)
30 | }, [])
31 |
32 | return (
33 |
34 |
37 | {didMount && }
42 |
43 | )
44 | }
45 |
46 | const style = {
47 | keyboard: {},
48 | }
49 | ```
50 |
51 | ## Demo
52 | test/keyboard
53 |
--------------------------------------------------------------------------------
/doc/component/Line.md:
--------------------------------------------------------------------------------
1 | # Component Line mapping [lvgl lv_line)](https://docs.lvgl.io/master/widgets/line.html)
2 |
3 | ## Api
4 | - [style](../api/style.md)
5 | - [moveToFront](../api/moveToFront.md)
6 | - [moveToBackground](../api/moveToBackground.md)
7 | - [setStyle](../api/setStyle.md)
8 | - [scrollIntoView](../api/scrollIntoView.md)
9 |
10 | ## Props
11 | - [style](../props/style.md)
12 | - [align](../props/align.md)
13 | - [alignTo](../props/alignTo.md)
14 | - points
15 | - value type: [number, number][]
16 | ## Usage
17 | ```jsx
18 | import { Line } from 'lvlgjs-ui'
19 | import { useState } from 'react'
20 |
21 | const points = [[5, 5], [70, 70], [120, 10], [180, 60], [240, 10]]
22 |
23 | function Component () {
24 | const [value, setValue] = useState(false)
25 | return (
26 |
30 | )
31 | }
32 |
33 | const style = {
34 | line: {},
35 | }
36 | ```
37 |
38 | ## Demo
39 | test/line
40 |
--------------------------------------------------------------------------------
/doc/component/ProgressBar.md:
--------------------------------------------------------------------------------
1 | # Component ProgressBar mapping [lvgl lv_bar)](https://docs.lvgl.io/master/widgets/bar.html)
2 |
3 | ## Api
4 | - [style](../api/style.md)
5 | - [moveToFront](../api/moveToFront.md)
6 | - [moveToBackground](../api/moveToBackground.md)
7 | - [setStyle](../api/setStyle.md)
8 | - [scrollIntoView](../api/scrollIntoView.md)
9 |
10 | ## Props
11 | - [style](../props/style.md)
12 | - [align](../props/align.md)
13 | - [alignTo](../props/alignTo.md)
14 | - [range](../props/range.md)
15 | - [value](../props/value/2.md)
16 | - [indicatorStyle](../props/indicatorStyle.md)
17 |
18 | ## Usage
19 | ```jsx
20 | import { ProgressBar } from 'lvlgjs-ui'
21 | import { useState } from 'react'
22 |
23 | function Component () {
24 | const [value, setValue] = useState(false)
25 | return (
26 |
31 | )
32 | }
33 |
34 | const style = {
35 | progressBar: {},
36 | }
37 | ```
38 |
39 | ## Demo
40 | test/progressbar
41 |
--------------------------------------------------------------------------------
/doc/component/Roller.md:
--------------------------------------------------------------------------------
1 | # Component Dropdownlist mapping [lvgl lv_roller)](https://docs.lvgl.io/master/widgets/roller.html)
2 |
3 | ## Api
4 | - [style](../api/style.md)
5 | - [moveToFront](../api/moveToFront.md)
6 | - [moveToBackground](../api/moveToBackground.md)
7 | - [setStyle](../api/setStyle.md)
8 | - [scrollIntoView](../api/scrollIntoView.md)
9 |
10 | ## Props
11 | - [style](../props/style.md)
12 | - [align](../props/align.md)
13 | - [alignTo](../props/alignTo.md)
14 | - [selectedStyle](../props/selectedStyle.md)
15 | - infinity
16 | - makes the roller circular
17 | - options
18 | - value type: string[]
19 | - selectIndex
20 | - current select item index in items array
21 | - visibleRowCount
22 | - The number of visible rows
23 | - [onChange](../props/onChange/1.md)
24 | ## Controlled Mode
25 | Component Checkbox support [controlled mode](https://krasimir.gitbooks.io/react-in-patterns/content/chapter-05/), achieve by selectIndex and onChange props
26 |
27 | ## Usage
28 | ```jsx
29 | import { Roller } from 'lvlgjs-ui'
30 | import { useState } from 'react'
31 |
32 | const items = [
33 | "1",
34 | "2",
35 | "3",
36 | "4",
37 | "5",
38 | "6",
39 | "7",
40 | "8",
41 | "9",
42 | ]
43 | function Component () {
44 | const [value, setValue] = useState(false)
45 | return (
46 | {
52 | console.log(e.value)
53 | }}
54 | infinity={true}
55 | />
56 | )
57 | }
58 |
59 | const style = {
60 | roller: {},
61 | }
62 | ```
63 |
64 | ## Demo
65 | test/roller
66 |
--------------------------------------------------------------------------------
/doc/component/Switch.md:
--------------------------------------------------------------------------------
1 | # Component Switch mapping [lvgl lv_switch)](https://docs.lvgl.io/master/widgets/switch.html)
2 |
3 | ## Api
4 | - [style](../api/style.md)
5 | - [moveToFront](../api/moveToFront.md)
6 | - [moveToBackground](../api/moveToBackground.md)
7 | - [setStyle](../api/setStyle.md)
8 | - [scrollIntoView](../api/scrollIntoView.md)
9 |
10 | ## Props
11 | - [style](../props/style.md)
12 | - [align](../props/align.md)
13 | - [alignTo](../props/alignTo.md)
14 | - [checkedStyle](../props/checkedStyle.md)
15 | - [disabled](../props/disabled.md)
16 | - [checked](../props/checked.md)
17 | - [onChange](../onChange/2.md)
18 |
19 | ## Usage
20 | ```jsx
21 | import { Switch } from 'lvlgjs-ui'
22 | import { useState } from 'react'
23 |
24 | function Component () {
25 | const [value, setValue] = useState()
26 | return (
27 |
28 | {/* controlled */}
29 | setValue(e.checked)}
32 | checked={value}
33 | checkedStyle={style.checkedStyle}
34 | />
35 | {/* not controlled */}
36 | console.log(e)}
40 | />
41 |
42 | )
43 | }
44 |
45 | const style = {
46 | switch: {},
47 | checkedStyle: {}
48 | }
49 | ```
50 |
51 | ## Demo
52 | test/switch/
53 |
--------------------------------------------------------------------------------
/doc/component/View.md:
--------------------------------------------------------------------------------
1 | # Component View mapping [lvgl Base object (lv_obj)](https://docs.lvgl.io/master/widgets/obj.html)
2 |
3 | ## Api
4 | - [style](../api/style.md)
5 | - [moveToFront](../api/moveToFront.md)
6 | - [moveToBackground](../api/moveToBackground.md)
7 | - [setStyle](../api/setStyle.md)
8 | - [scrollIntoView](../api/scrollIntoView.md)
9 |
10 | ## Props
11 | - [style](../props/style.md)
12 | - [onPressedStyle](../props/onPressedStyle.md)
13 | - [scrollbarStyle](../props/scrollbarStyle.md)
14 | - [onScrollbarPressedStyle](../props/onScrollbarPressedStyle.md)
15 | - [onScrollbarScrollingStyle](../props/onScrollbarScrollingStyle.md)
16 | - [onClick](../props/onClick.md)
17 | - [onPressed](../props/onPressed.md)
18 | - [onLongPressed](../props/onLongPressed.md)
19 | - [onLongPressRepeat](../props/onLongPressRepeat.md)
20 | - [align](../props/align.md)
21 | - [alignTo](../props/alignTo.md)
22 |
23 | ## Usage
24 | ```jsx
25 | import { View, EAlignType, Button, Text } from 'lvlgjs-ui'
26 | import { useRef, useEffect } from 'react'
27 |
28 | function Component () {
29 | const ref = useRef()
30 | useEffect(() => {
31 | console.log(ref.current.style.left)
32 | })
33 |
34 | return (
35 | { e.stopPropagation() }}
39 | onPressed={() => {}}
40 | onLongPressed={() => {}}
41 | onLongPressRepeat={() => {}}
42 | align={{
43 | type: EAlignType.ALIGN_CENTER,
44 | pos: [10, 0]
45 | }}
46 | ref={ref}
47 | >
48 |
51 |
52 | )
53 | }
54 |
55 | const style = {
56 | view: {},
57 | viewPressed: {}
58 | }
59 | ```
60 |
61 |
--------------------------------------------------------------------------------
/doc/jsapi/dimension.md:
--------------------------------------------------------------------------------
1 | # You can get the application window's width and height through dimension api
2 |
3 | ## Usage
4 |
5 | ```jsx
6 | import { View, Render, Window, Text, Image, Button, Dimensions } from 'lvgljs-ui';
7 | import React, { useState } from 'react';
8 |
9 | const { width, height } = Dimensions.window
10 |
11 | ```
--------------------------------------------------------------------------------
/doc/jsapi/fs.md:
--------------------------------------------------------------------------------
1 | # Enables interacting with the file system
2 |
3 | like nodejs, we can use by const fs = require('fs'), most file system operations have synchronous and promise-based forms
4 |
5 | ## Api
6 | fs module with following function
7 | - statSync(path: string): statobj
8 | - stat(path: string): Promise
9 | - realpath (path: string): Promise
10 | - realPathSync(path: string): string
11 | - readFile(path: string): Promise
12 | - readFileSync(path: string): Buffer | string
13 | - writeFile(path: string, data: string | buffer): Promise
14 | - writeFileSync(path: string, data: string | buffer): void
15 | - unlink (path: string): Promise
16 | - unlinkSync(path: string): void
17 | - mkdir (path: string): Promise
18 | - mkdirSync (path: string): void
19 | - rmdir (path: string): Promise
20 | - rmdirSync (path: string): void
21 |
22 |
23 |
24 | statobj obj with following property
25 |
26 | - isFile(): bool
27 | - isDirectory(): bool
28 | - isCharacterDevice(): bool
29 | - isBlockDevice(): bool
30 | - isFIFO(): bool
31 | - isSocket(): bool
32 | - isSymbolicLink(): bool
33 | - dev
34 | - info
35 | - mode
36 | - nlink
37 | - uid
38 | - gid
39 | - rdev
40 | - size
41 | - blocks
42 | - atime
43 | - mtime
44 | - ctime
45 | - size
46 |
47 |
48 |
--------------------------------------------------------------------------------
/doc/jsapi/network.md:
--------------------------------------------------------------------------------
1 |
2 | ## fetch
3 | The Fetch API provides an interface for fetching resources (including across the network). It will seem familiar to anyone who has used XMLHttpRequest, but the new API provides a more powerful and flexible feature set. It hosts the [http-fetch-standard](https://fetch.spec.whatwg.org/#http-fetch)
4 |
5 | ### Usage
6 |
7 | ```js
8 | const r = await fetch('https://httpbin.org/post', {
9 | method: 'POST',
10 | headers: {
11 | 'Content-Type': 'application/json'
12 | },
13 | body: data
14 | });
15 | const json = await r.json();
16 | ```
17 |
18 | ### Demo
19 | test/jsruntime/network
--------------------------------------------------------------------------------
/doc/props/align.md:
--------------------------------------------------------------------------------
1 | # Component prop align
2 |
3 | Prop align mapping lvgl lv_obj_align
4 |
5 |
6 |
7 | ## Value
8 | align value object with the following type
9 | - type, enum EAlignType
10 | - pos, x、y position
11 |
12 | ## Note
13 | align has higher priority than style x or y, please do not use them together
14 |
15 |
16 |
17 | EAlignType with the following type
18 | - ALIGN_DEFAULT mapping LV_ALIGN_DEFAULT
19 | - ALIGN_TOP_LEFT mapping LV_ALIGN_TOP_LEFT
20 | - ALIGN_TOP_MID mapping LV_ALIGN_TOP_MID
21 | - ALIGN_TOP_RIGHT mapping LV_ALIGN_TOP_RIGHT
22 | - ALIGN_BOTTOM_LEFT mapping LV_ALIGN_BOTTOM_LEFT
23 | - ALIGN_BOTTOM_MID mapping LV_ALIGN_BOTTOM_MID
24 | - ALIGN_BOTTOM_RIGHT mapping LV_ALIGN_BOTTOM_RIGHT
25 | - ALIGN_LEFT_MID mapping LV_ALIGN_LEFT_MID
26 | - ALIGN_RIGHT_MID mapping LV_ALIGN_RIGHT_MID
27 | - ALIGN_CENTER mapping LV_ALIGN_CENTER
28 | - ALIGN_OUT_TOP_LEFT mapping LV_ALIGN_OUT_TOP_LEFT
29 | - ALIGN_OUT_TOP_MID mapping LV_ALIGN_OUT_TOP_MID
30 | - ALIGN_OUT_TOP_RIGHT mapping LV_ALIGN_OUT_TOP_RIGHT
31 | - ALIGN_OUT_BOTTOM_LEFT mapping LV_ALIGN_OUT_BOTTOM_LEFT
32 | - ALIGN_OUT_BOTTOM_MID mapping LV_ALIGN_OUT_BOTTOM_MID
33 | - ALIGN_OUT_BOTTOM_RIGHT mapping LV_ALIGN_OUT_BOTTOM_RIGHT
34 | - ALIGN_OUT_LEFT_TOP mapping LV_ALIGN_OUT_LEFT_TOP
35 | - ALIGN_OUT_LEFT_MID mapping LV_ALIGN_OUT_LEFT_MID
36 | - ALIGN_OUT_LEFT_BOTTOM mapping LV_ALIGN_OUT_LEFT_BOTTOM
37 | - ALIGN_OUT_RIGHT_TOP mapping LV_ALIGN_OUT_RIGHT_TOP
38 | - ALIGN_OUT_RIGHT_MID mapping LV_ALIGN_OUT_RIGHT_MID
39 | - ALIGN_OUT_RIGHT_BOTTOM mapping LV_ALIGN_OUT_RIGHT_BOTTOM
40 |
41 |
42 | ## Usage
43 | ```jsx
44 | import { View, EAlignType, Text } from 'lvlgjs-ui'
45 |
46 | function Component () {
47 | return (
48 |
54 |
55 | )
56 | }
57 | ```
--------------------------------------------------------------------------------
/doc/props/alignTo.md:
--------------------------------------------------------------------------------
1 | # Component prop alignTo
2 |
3 | Prop alignTo mapping lvgl lv_obj_align_to
4 |
5 |
6 |
7 | ## Value
8 | alignTo value object with the following type
9 | - type, enum EAlignType
10 | - pos, x、y position
11 | - parent, componentInstance get by react ref
12 |
13 | ## Note
14 | alignTo has higher priority than style x or y, please do not use them together
15 |
16 |
17 |
18 | EAlignType with the following type
19 | - ALIGN_DEFAULT mapping LV_ALIGN_DEFAULT
20 | - ALIGN_TOP_LEFT mapping LV_ALIGN_TOP_LEFT
21 | - ALIGN_TOP_MID mapping LV_ALIGN_TOP_MID
22 | - ALIGN_TOP_RIGHT mapping LV_ALIGN_TOP_RIGHT
23 | - ALIGN_BOTTOM_LEFT mapping LV_ALIGN_BOTTOM_LEFT
24 | - ALIGN_BOTTOM_MID mapping LV_ALIGN_BOTTOM_MID
25 | - ALIGN_BOTTOM_RIGHT mapping LV_ALIGN_BOTTOM_RIGHT
26 | - ALIGN_LEFT_MID mapping LV_ALIGN_LEFT_MID
27 | - ALIGN_RIGHT_MID mapping LV_ALIGN_RIGHT_MID
28 | - ALIGN_CENTER mapping LV_ALIGN_CENTER
29 | - ALIGN_OUT_TOP_LEFT mapping LV_ALIGN_OUT_TOP_LEFT
30 | - ALIGN_OUT_TOP_MID mapping LV_ALIGN_OUT_TOP_MID
31 | - ALIGN_OUT_TOP_RIGHT mapping LV_ALIGN_OUT_TOP_RIGHT
32 | - ALIGN_OUT_BOTTOM_LEFT mapping LV_ALIGN_OUT_BOTTOM_LEFT
33 | - ALIGN_OUT_BOTTOM_MID mapping LV_ALIGN_OUT_BOTTOM_MID
34 | - ALIGN_OUT_BOTTOM_RIGHT mapping LV_ALIGN_OUT_BOTTOM_RIGHT
35 | - ALIGN_OUT_LEFT_TOP mapping LV_ALIGN_OUT_LEFT_TOP
36 | - ALIGN_OUT_LEFT_MID mapping LV_ALIGN_OUT_LEFT_MID
37 | - ALIGN_OUT_LEFT_BOTTOM mapping LV_ALIGN_OUT_LEFT_BOTTOM
38 | - ALIGN_OUT_RIGHT_TOP mapping LV_ALIGN_OUT_RIGHT_TOP
39 | - ALIGN_OUT_RIGHT_MID mapping LV_ALIGN_OUT_RIGHT_MID
40 | - ALIGN_OUT_RIGHT_BOTTOM mapping LV_ALIGN_OUT_RIGHT_BOTTOM
41 |
42 |
43 | ## Demo
44 | test/textarea/2
--------------------------------------------------------------------------------
/doc/props/checked.md:
--------------------------------------------------------------------------------
1 | # Component prop checked
2 |
3 | Prop checked used in component Switch、Checkbox
4 |
5 | ## Usage
6 |
7 | ```jsx
8 | import { Switch } from 'lvlgjs-ui'
9 | import { useState } from 'react'
10 |
11 | function Component () {
12 | const [value, setValue] = useState()
13 | return (
14 |
15 | {/* controlled */}
16 | setValue(e.checked)}
19 | checked={value}
20 | checkedStyle={style.checkedStyle}
21 | />
22 | {/* not controlled */}
23 | console.log(e)}
27 | />
28 |
29 | )
30 | }
31 |
32 | const style = {
33 | switch: {},
34 | checkedStyle: {}
35 | }
36 | ```
37 |
--------------------------------------------------------------------------------
/doc/props/checkedStyle.md:
--------------------------------------------------------------------------------
1 | # Component prop checkedStyle
2 |
3 | Prop checkedStyle mapping lvgl object LV_STATE_CHECKED style
4 |
5 | ## Value
6 | support JS Object or JS Array
7 |
8 | ## Usage
9 | ```jsx
10 | import { Switch } from 'lvlgjs-ui'
11 | import { useState } from 'react'
12 |
13 | function Component () {
14 | const [value, setValue] = useState()
15 | return (
16 |
17 | {/* controlled */}
18 | setValue(e.checked)}
21 | checked={value}
22 | checkedStyle={style.checkedStyle}
23 | />
24 | {/* not controlled */}
25 | console.log(e)}
29 | />
30 |
31 | )
32 | }
33 |
34 | const style = {
35 | switch: {},
36 | checkedStyle: {}
37 | }
38 | ```
39 |
--------------------------------------------------------------------------------
/doc/props/disabled.md:
--------------------------------------------------------------------------------
1 | # Component prop disabled
2 |
3 | Prop disabled used in component Switch、Checkbox
4 |
5 | ## Usage
6 |
7 | ```jsx
8 | import { Checkbox } from 'lvlgjs-ui'
9 | import { useState } from 'react'
10 |
11 | function Component () {
12 | const [value, setValue] = useState(false)
13 | return (
14 |
15 | {/* controlled */}
16 | setValue(e.checked)}
19 | checked={value}
20 | text={"商品A"}
21 | />
22 | {/* not controlled */}
23 | console.log(e.checked)}
26 | text={"商品B"}
27 | disabled={true}
28 | checked={true}
29 | />
30 |
31 | )
32 | }
33 |
34 | const style = {
35 | checkbox: {},
36 | }
37 | ```
38 |
--------------------------------------------------------------------------------
/doc/props/indicatorCheckedStyle.md:
--------------------------------------------------------------------------------
1 | # Component prop indicatorCheckedStyle
2 |
3 | Prop indicatorCheckedStyle mapping lvgl object LV_PART_INDICATOR | LV_STATE_CHECKED style
4 |
5 | ## Value
6 | support JS Object or JS Array
7 |
8 | ## Demo
9 | test/checkbox/2
10 |
--------------------------------------------------------------------------------
/doc/props/indicatorStyle.md:
--------------------------------------------------------------------------------
1 | # Component prop indicatorStyle
2 |
3 | Prop indicatorStyle mapping lvgl object LV_PART_INDICATOR style
4 |
5 | ## Value
6 | support JS Object or JS Array
7 |
8 | ## Demo
9 | test/checkbox/2
10 | test/progressbar/2
11 | test/progressbar/3
12 | test/slider/1
13 |
--------------------------------------------------------------------------------
/doc/props/itemStyle.md:
--------------------------------------------------------------------------------
1 | # Component prop indicatorStyle
2 |
3 | Prop indicatorStyle mapping lvgl object LV_PART_ITEMS style
4 |
5 | ## Value
6 | support JS Object or JS Array
7 |
8 | ## Demo
9 | test/chart/5
10 |
--------------------------------------------------------------------------------
/doc/props/knobStyle.md:
--------------------------------------------------------------------------------
1 | # Component prop knobStyle
2 |
3 | Prop knobStyle mapping lvgl object LV_PART_KNOB style
4 |
5 | ## Value
6 | support JS Object or JS Array
7 |
8 | ## Demo
9 | test/slider/1
10 |
--------------------------------------------------------------------------------
/doc/props/maxLength.md:
--------------------------------------------------------------------------------
1 | # Component prop mode
2 |
3 | Prop mode usually use in component Input、Textarea, used to control maximum number of characters
4 |
5 | ## Usage
6 | ```jsx
7 | import { Input } from 'lvlgjs-ui'
8 |
9 | function Component () {
10 | return (
11 |
12 | )
13 | }
14 |
15 | ```
16 |
--------------------------------------------------------------------------------
/doc/props/mode.md:
--------------------------------------------------------------------------------
1 | # Component prop mode
2 |
3 | Prop mode usually use in component Input、Textarea
4 |
5 | ## Value
6 | mode with following value
7 | - password, enable password mode, the input text will change to *
8 |
9 | ## Usage
10 | ```jsx
11 | import { Input } from 'lvlgjs-ui'
12 |
13 | function Component () {
14 | return (
15 |
16 | )
17 | }
18 |
19 | ```
--------------------------------------------------------------------------------
/doc/props/mode/1.md:
--------------------------------------------------------------------------------
1 | # Component prop mode
2 |
3 | Prop mode usually use in component Input、Textarea
4 |
5 | ## Value
6 | mode with following value
7 | - password, enable password mode, the input text will change to *
8 |
9 | ## Usage
10 | ```jsx
11 | import { Input } from 'lvlgjs-ui'
12 |
13 | function Component () {
14 | return (
15 |
16 | )
17 | }
18 |
19 | ```
--------------------------------------------------------------------------------
/doc/props/mode/2.md:
--------------------------------------------------------------------------------
1 | # Component prop mode
2 |
3 | Prop mode usually use in component Keyboard, used to set keyboard component mode
4 |
5 | ## Value
6 | mode with following value
7 | - lower, Display lower case letters
8 | - upper, Display upper case letters
9 | - special, Display special characters
10 | - number, Display numbers, +/- sign, and decimal dot
11 |
12 | ## Usage
13 | ```jsx
14 | import { Keyboard, Input } from 'lvlgjs-ui'
15 | import { useState, useRef } from 'react'
16 |
17 | function Component () {
18 | const [didMount, setDidMount] = useState(false)
19 | const ref = useRef()
20 |
21 | useEffect(() => {
22 | setDidMount(true)
23 | }, [])
24 |
25 | return (
26 |
27 |
30 | {didMount && }
35 |
36 | )
37 | }
38 |
39 | const style = {
40 | keyboard: {},
41 | }
42 | ```
--------------------------------------------------------------------------------
/doc/props/onChange/1.md:
--------------------------------------------------------------------------------
1 | # Component prop onChange
2 |
3 | Prop onChange mapping lvgl object event LV_EVENT_VALUE_CHANGED
4 |
5 | ```ts
6 | interface PARAM_TYPE {
7 | target: componentInstance; // original target
8 | currentTarget: componentInstance; // current target object, not the original object
9 | stopPropagation: () => {}; // stop event bubble
10 | value: string;
11 | }
12 |
13 | interface CALLBACK_TYPE {
14 | (e: PARAM_TYPE): void;
15 | }
16 | ```
17 |
18 | ## Value
19 | onClick callback with the following type
20 | - CALLBACK_TYPE[]
21 | - CALLBACK_TYPE
22 | - null
23 |
24 | ## Usage
25 | ```jsx
26 | import { Input } from 'lvlgjs-ui'
27 | import { useState } from 'react'
28 |
29 | function Component () {
30 | const [value, setValue] = useState()
31 | return (
32 |
33 | {/* controlled */}
34 | console.log('focus')}
37 | onFocusStyle={style.onFocusStyle}
38 | onChange={(e) => setValue(e.value)}
39 | mode="password"
40 | value={value}
41 | />
42 | {/* not controlled */}
43 | console.log('focus')}
46 | onFocusStyle={style.onFocusStyle}
47 | mode="password"
48 | />
49 |
50 | )
51 | }
52 |
53 | const style = {
54 | input: {},
55 | onFocusStyle: {}
56 | }
57 | ```
58 |
59 | ## Demo
60 | test/textarea/1
61 |
62 |
--------------------------------------------------------------------------------
/doc/props/onChange/2.md:
--------------------------------------------------------------------------------
1 | # Component prop onChange
2 |
3 | Prop onChange mapping lvgl object event LV_EVENT_VALUE_CHANGED
4 |
5 | ```ts
6 | interface PARAM_TYPE {
7 | target: componentInstance; // original target
8 | currentTarget: componentInstance; // current target object, not the original object
9 | stopPropagation: () => {}; // stop event bubble
10 | checked: boolean;
11 | }
12 |
13 | interface CALLBACK_TYPE {
14 | (e: PARAM_TYPE): void;
15 | }
16 | ```
17 |
18 | ## Value
19 | onClick callback with the following type
20 | - CALLBACK_TYPE[]
21 | - CALLBACK_TYPE
22 | - null
23 |
24 | ## Usage
25 | ```jsx
26 | import { Switch } from 'lvlgjs-ui'
27 | import { useState } from 'react'
28 |
29 | function Component () {
30 | const [value, setValue] = useState()
31 | return (
32 |
33 | {/* controlled */}
34 | setValue(e.checked)}
37 | checked={value}
38 | checkedStyle={style.checkedStyle}
39 | />
40 | {/* not controlled */}
41 | console.log(e)}
45 | />
46 |
47 | )
48 | }
49 |
50 | const style = {
51 | switch: {},
52 | checkedStyle: {}
53 | }
54 | ```
55 |
56 | ## Demo
57 | test/textarea/1
58 |
59 |
--------------------------------------------------------------------------------
/doc/props/onChange/3.md:
--------------------------------------------------------------------------------
1 | # Component prop onChange
2 |
3 | Prop onChange mapping lvgl object event LV_EVENT_VALUE_CHANGED
4 |
5 | ```ts
6 | interface PARAM_TYPE {
7 | target: componentInstance; // original target
8 | currentTarget: componentInstance; // current target object, not the original object
9 | stopPropagation: () => {}; // stop event bubble
10 | value: number;
11 | }
12 |
13 | interface CALLBACK_TYPE {
14 | (e: PARAM_TYPE): void;
15 | }
16 | ```
17 |
18 | ## Value
19 | onClick callback with the following type
20 | - CALLBACK_TYPE[]
21 | - CALLBACK_TYPE
22 | - null
23 |
24 | ## Usage
25 | ```jsx
26 | import { Slider } from 'lvlgjs-ui'
27 | import { useState } from 'react'
28 |
29 | function Component () {
30 | const [value, setValue] = useState()
31 | return (
32 |
33 | {/* controlled */}
34 | setValue(e.value)}
37 | value={value}
38 | range={[0, 50]}
39 | />
40 | {/* not controlled */}
41 | console.log(e)}
44 | range={[0, 100]}
45 | />
46 |
47 | )
48 | }
49 |
50 | const style = {
51 | slider: {},
52 | }
53 | ```
54 |
55 | ## Demo
56 | test/slider/1
57 |
58 |
--------------------------------------------------------------------------------
/doc/props/onClick.md:
--------------------------------------------------------------------------------
1 | # Component prop onClick
2 |
3 | Prop onClick mapping lvgl object event LV_EVENT_CLICKED
4 |
5 | ```ts
6 | interface PARAM_TYPE {
7 | target: componentInstance; // original target
8 | currentTarget: componentInstance; // current target object, not the original object
9 | stopPropagation: () => {}; // stop event bubble
10 | }
11 |
12 | interface CALLBACK_TYPE {
13 | (e: PARAM_TYPE): void;
14 | }
15 | ```
16 |
17 | ## Value
18 | onClick callback with the following type
19 | - CALLBACK_TYPE[]
20 | - CALLBACK_TYPE
21 | - null
22 |
23 | ## Usage
24 | ```jsx
25 | import { View, Button, Text } from 'lvlgjs-ui'
26 |
27 | function Component () {
28 | return (
29 | console.log(e.target), e => console.log(e.currentTarget)]}
32 | >
33 |
36 |
37 | )
38 | }
39 |
40 | const style = {
41 | view: {},
42 | button1: {},
43 | button2: {}
44 | }
45 | ```
46 |
47 |
--------------------------------------------------------------------------------
/doc/props/onFocus.md:
--------------------------------------------------------------------------------
1 | # Component prop onFocus
2 |
3 | Prop onFocus mapping lvgl object event LV_EVENT_FOCUSED
4 |
5 | ```ts
6 | interface PARAM_TYPE {
7 | target: componentInstance; // original target
8 | currentTarget: componentInstance; // current target object, not the original object
9 | stopPropagation: () => {}; // stop event bubble
10 | }
11 |
12 | interface CALLBACK_TYPE {
13 | (e: PARAM_TYPE): void;
14 | }
15 | ```
16 |
17 | ## Value
18 | onClick callback with the following type
19 | - CALLBACK_TYPE[]
20 | - CALLBACK_TYPE
21 | - null
22 |
23 | ## Usage
24 | ```jsx
25 | import { Input } from 'lvlgjs-ui'
26 | import { useState } from 'react'
27 |
28 | function Component () {
29 | const [value, setValue] = useState()
30 | return (
31 | console.log('focus')}
34 | onFocusStyle={style.onFocusStyle}
35 | mode="password"
36 | />
37 | )
38 | }
39 |
40 | const style = {
41 | input: {},
42 | onFocusStyle: {}
43 | }
44 | ```
45 |
46 | ## Demo
47 | test/textarea/1
48 |
--------------------------------------------------------------------------------
/doc/props/onFocusStyle.md:
--------------------------------------------------------------------------------
1 | # Component prop onPressedStyle
2 |
3 | Prop onPressedStyle mapping lvgl object LV_STATE_FOCUSED style
4 |
5 | ## Value
6 | support JS Object or JS Array
7 |
8 | ## Usage
9 | ```jsx
10 | import { View, Button, Text } from 'lvlgjs-ui'
11 |
12 | function Component () {
13 | return (
14 |
17 |
20 |
21 | )
22 | }
23 |
24 | const style = {
25 | view: {},
26 | button1: {},
27 | button2: {}
28 | }
29 | ```
--------------------------------------------------------------------------------
/doc/props/onIndicatorPressedStyle.md:
--------------------------------------------------------------------------------
1 | # Component prop onIndicatorPressedStyle
2 |
3 | Prop onIndicatorPressedStyle mapping lvgl object LV_PART_INDICATOR | LV_STATE_PRESSED style
4 |
5 | ## Value
6 | support JS Object or JS Array
7 |
8 | ## Demo
9 | test/slider/1
10 |
--------------------------------------------------------------------------------
/doc/props/onKnobPressedStyle.md:
--------------------------------------------------------------------------------
1 | # Component prop onKnobPressedStyle
2 |
3 | Prop onKnobPressedStyle mapping lvgl object LV_PART_KNOB | LV_STATE_PRESSED style
4 |
5 | ## Value
6 | support JS Object or JS Array
7 |
8 | ## Demo
9 | test/slider/1
10 |
--------------------------------------------------------------------------------
/doc/props/onLongPressRepeat.md:
--------------------------------------------------------------------------------
1 | # Component prop onLongPressRepeat
2 |
3 | Prop onLongPressRepeat mapping lvgl object event LV_EVENT_LONG_PRESSED_REPEAT
4 |
5 | ```ts
6 | interface IEVENT_TYPE {
7 | target: componentInstance; // original target
8 | currentTarget: componentInstance; // current target object, not the original object
9 | stopPropagation: () => {}; // stop event bubble
10 | }
11 | ```
12 |
13 | ## Value
14 | onLongPressRepeat callback with the following type
15 | - IEVENT_TYPE[]
16 | - IEVENT_TYPE
17 | - null
18 |
19 | ## Usage
20 | ```jsx
21 | import { View, Button, Text } from 'lvlgjs-ui'
22 |
23 | function Component () {
24 | return (
25 | console.log(e.target), e => console.log(e.currentTarget)]}
28 | >
29 |
32 |
33 | )
34 | }
35 |
36 | const style = {
37 | view: {},
38 | button1: {},
39 | button2: {}
40 | }
41 | ```
42 |
43 |
--------------------------------------------------------------------------------
/doc/props/onLongPressed.md:
--------------------------------------------------------------------------------
1 | # Component prop onLongPressed
2 |
3 | Prop onLongPressed mapping lvgl object event LV_EVENT_LONG_PRESSED
4 |
5 | ```ts
6 | interface IEVENT_TYPE {
7 | target: componentInstance; // original target
8 | currentTarget: componentInstance; // current target object, not the original object
9 | stopPropagation: () => {}; // stop event bubble
10 | }
11 | ```
12 |
13 | ## Value
14 | onLongPressed callback with the following type
15 | - IEVENT_TYPE[]
16 | - IEVENT_TYPE
17 | - null
18 |
19 | ## Usage
20 | ```jsx
21 | import { View, Button, Text } from 'lvlgjs-ui'
22 |
23 | function Component () {
24 | return (
25 | console.log(e.target), e => console.log(e.currentTarget)]}
28 | >
29 |
32 |
33 | )
34 | }
35 |
36 | const style = {
37 | view: {},
38 | button1: {},
39 | button2: {}
40 | }
41 | ```
42 |
43 |
--------------------------------------------------------------------------------
/doc/props/onPressed.md:
--------------------------------------------------------------------------------
1 | # Component prop onPressed
2 |
3 | Prop onPressed mapping lvgl object event LV_EVENT_PRESSED
4 |
5 | ```ts
6 | interface IEVENT_TYPE {
7 | target: componentInstance; // original target
8 | currentTarget: componentInstance; // current target object, not the original object
9 | stopPropagation: () => {}; // stop event bubble
10 | }
11 | ```
12 |
13 | ## Value
14 | onPressed callback with the following type
15 | - IEVENT_TYPE[]
16 | - IEVENT_TYPE
17 | - null
18 |
19 | ## Usage
20 | ```jsx
21 | import { View, Button, Text } from 'lvlgjs-ui'
22 |
23 | function Component () {
24 | return (
25 | console.log(e.target), e => console.log(e.currentTarget)]}
28 | >
29 |
32 |
33 | )
34 | }
35 |
36 | const style = {
37 | view: {},
38 | button1: {},
39 | button2: {}
40 | }
41 | ```
42 |
43 |
--------------------------------------------------------------------------------
/doc/props/onPressedStyle.md:
--------------------------------------------------------------------------------
1 | # Component prop onPressedStyle
2 |
3 | Prop onPressedStyle mapping lvgl object LV_STATE_PRESSED style
4 |
5 | ## Value
6 | support JS Object or JS Array
7 |
8 | ## Usage
9 | ```jsx
10 | import { View, Button, Text } from 'lvlgjs-ui'
11 |
12 | function Component () {
13 | return (
14 |
17 |
20 |
21 | )
22 | }
23 |
24 | const style = {
25 | view: {},
26 | button1: {},
27 | button2: {}
28 | }
29 | ```
--------------------------------------------------------------------------------
/doc/props/onScrollbarPressedStyle.md:
--------------------------------------------------------------------------------
1 | # Component prop onScrollbarPressedStyle
2 |
3 | Prop onScrollbarPressedStyle mapping lvgl object LV_PART_SCROLLBAR | LV_STATE_PRESSED style
4 |
5 | ## Value
6 | support JS Object or JS Array
7 |
8 | ## Usage
9 | ```jsx
10 | import { View, Button, Text } from 'lvlgjs-ui'
11 |
12 | function Component () {
13 | return (
14 |
17 |
20 |
21 | )
22 | }
23 |
24 | const style = {
25 | view: {},
26 | button1: {},
27 | button2: {}
28 | }
29 | ```
--------------------------------------------------------------------------------
/doc/props/onScrollbarScrollingStyle.md:
--------------------------------------------------------------------------------
1 | # Component prop onScrollbarScrollingStyle
2 |
3 | Prop onScrollbarScrollingStyle mapping lvgl object LV_PART_SCROLLBAR | LV_STATE_PRESSED style
4 |
5 | ## Value
6 | support JS Object or JS Array
7 |
8 | ## Usage
9 | ```jsx
10 | import { View, Button, Text } from 'lvlgjs-ui'
11 |
12 | function Component () {
13 | return (
14 |
17 |
20 |
21 | )
22 | }
23 |
24 | const style = {
25 | view: {},
26 | button1: {},
27 | button2: {}
28 | }
29 | ```
--------------------------------------------------------------------------------
/doc/props/placeholder.md:
--------------------------------------------------------------------------------
1 | # Component prop placeholder
2 |
3 | Prop placeholder usually use in component Text、Textarea、Input,
4 |
5 | ## Usage
6 | ```jsx
7 | import { Input } from 'lvlgjs-ui'
8 |
9 | const path = require('path')
10 |
11 | function Component () {
12 | return (
13 |
14 | )
15 | }
16 |
17 | ```
18 |
19 | ## Demo
20 | test/textarea/2
--------------------------------------------------------------------------------
/doc/props/range.md:
--------------------------------------------------------------------------------
1 | # Component prop placeholder
2 |
3 | Prop placeholder usually use in component Slider
4 |
5 | ## Value
6 | type is array with two number
7 |
8 | ## Usage
9 | ```jsx
10 | import { Slider } from 'lvlgjs-ui'
11 | import { useState } from 'react'
12 |
13 | function Component () {
14 | const [value, setValue] = useState()
15 | return (
16 |
17 | {/* controlled */}
18 | setValue(e.value)}
21 | value={value}
22 | range={[0, 50]}
23 | />
24 | {/* not controlled */}
25 | console.log(e)}
28 | range={[0, 100]}
29 | />
30 |
31 | )
32 | }
33 |
34 | const style = {
35 | slider: {},
36 | }
37 |
38 | ```
39 |
40 | ## Demo
41 | test/slider/1
--------------------------------------------------------------------------------
/doc/props/scrollbarStyle.md:
--------------------------------------------------------------------------------
1 | # Component prop scrollbarStyle
2 |
3 | Prop scrollbarStyle mapping lvgl object LV_PART_SCROLLBAR style
4 |
5 | ## Value
6 | support JS Object or JS Array
7 |
8 | ## Usage
9 | ```jsx
10 | import { View, Button, Text } from 'lvlgjs-ui'
11 |
12 | function Component () {
13 | return (
14 |
17 |
20 |
21 | )
22 | }
23 |
24 | const style = {
25 | view: {},
26 | button1: {},
27 | button2: {}
28 | }
29 | ```
--------------------------------------------------------------------------------
/doc/props/selectedStyle.md:
--------------------------------------------------------------------------------
1 | # Component prop scrollbarStyle
2 |
3 | Prop scrollbarStyle mapping lvgl object LV_PART_SELECTED style
4 |
5 | ## Value
6 | support JS Object or JS Array
--------------------------------------------------------------------------------
/doc/props/src.md:
--------------------------------------------------------------------------------
1 | # Component prop src
2 |
3 | Prop src usually use in component Image、GIF loading resource, support network url、local path、buildtin symbol
4 |
5 | ## Usage
6 | ```jsx
7 | import { Image } from 'lvlgjs-ui'
8 |
9 | const path = require('path')
10 |
11 | function Component () {
12 | return (
13 |
14 |
15 |
16 |
17 |
18 | )
19 | }
20 |
21 | ```
--------------------------------------------------------------------------------
/doc/props/style.md:
--------------------------------------------------------------------------------
1 | # Component prop style
2 |
3 | Prop style mapping lvgl object LV_PART_MAIN style
4 |
5 | ## Value
6 | support JS Object or JS Array
7 |
8 | ## Usage
9 | ```jsx
10 | import { View, Button, Text } from 'lvlgjs-ui'
11 |
12 | function Component () {
13 | return (
14 |
17 |
20 |
21 | )
22 | }
23 |
24 | const style = {
25 | view: {},
26 | button1: {},
27 | button2: {}
28 | }
29 | ```
--------------------------------------------------------------------------------
/doc/props/text/1.md:
--------------------------------------------------------------------------------
1 | # Component prop text
2 |
3 | Prop text usually use in component Checkbox
4 |
5 | ## Usage
6 | ```jsx
7 | import { Checkbox } from 'lvlgjs-ui'
8 | import { useState } from 'react'
9 |
10 | function Component () {
11 | const [value, setValue] = useState(false)
12 | return (
13 |
14 | {/* controlled */}
15 | setValue(e.checked)}
18 | checked={value}
19 | text={"商品A"}
20 | />
21 | {/* not controlled */}
22 | console.log(e.checked)}
25 | text={"商品B"}
26 | disabled={true}
27 | checked={true}
28 | />
29 |
30 | )
31 | }
32 |
33 | const style = {
34 | checkbox: {},
35 | }
36 |
37 | ```
38 |
39 | ## Demo
40 | test/checkbox
--------------------------------------------------------------------------------
/doc/props/text/2.md:
--------------------------------------------------------------------------------
1 | # Component prop text
2 |
3 | Prop text usually use in component Dropdownlist, used to show the selected option, if the text is null the selected option is displayed on the items
4 |
5 | ## Usage
6 | ```jsx
7 | import { Dropdownlist, EDropdownListArrowDirection, EDropdownlistDirection } from 'lvlgjs-ui'
8 | import { useState } from 'react'
9 |
10 | const items1 = [
11 | "Apple",
12 | "Banana",
13 | "Orange",
14 | "Cherry",
15 | "Grape",
16 | "Raspberry",
17 | "Melon",
18 | "Orange",
19 | "Lemon",
20 | "Nuts",
21 | ]
22 |
23 | function Component () {
24 | const [value, setValue] = useState(false)
25 | return (
26 | setValue(e.value)}
29 | items={items1}
30 | selectIndex={2}
31 | direction={EDropdownlistDirection.bottom}
32 | text={"Menu"}
33 | highlightSelect={false}
34 | arrow={EDropdownListArrowDirection.down}
35 | />
36 | )
37 | }
38 |
39 | const style = {
40 | dropdownlist: {},
41 | }
42 | ```
43 |
44 | ## Demo
45 | test/checkbox
--------------------------------------------------------------------------------
/doc/props/textarea.md:
--------------------------------------------------------------------------------
1 | # Component prop textarea
2 |
3 | Prop textarea usually use in component Keyboard
4 |
5 | ## Value
6 | some textarea、input's componentInstance
7 |
8 | ## Usage
9 | ```jsx
10 | import { Keyboard, Input } from 'lvlgjs-ui'
11 | import { useState, useRef } from 'react'
12 |
13 | function Component () {
14 | const [didMount, setDidMount] = useState(false)
15 | const ref = useRef()
16 |
17 | useEffect(() => {
18 | setDidMount(true)
19 | }, [])
20 |
21 | return (
22 |
23 |
26 | {didMount && }
31 |
32 | )
33 | }
34 |
35 | const style = {
36 | keyboard: {},
37 | }
38 | ```
39 |
40 | ## Demo
41 | test/keyboard
--------------------------------------------------------------------------------
/doc/props/value/1.md:
--------------------------------------------------------------------------------
1 | # Component prop value
2 |
3 | Prop value used in component Input、Textarea
4 |
5 | ## Usage
6 |
7 | ```jsx
8 | import { Input } from 'lvlgjs-ui'
9 | import { useState } from 'react'
10 |
11 | function Component () {
12 | const [value, setValue] = useState()
13 | return (
14 |
15 | {/* controlled */}
16 | console.log('focus')}
19 | onFocusStyle={style.onFocusStyle}
20 | onChange={(e) => setValue(e.value)}
21 | mode="password"
22 | value={value}
23 | />
24 | {/* not controlled */}
25 | console.log('focus')}
28 | onFocusStyle={style.onFocusStyle}
29 | mode="password"
30 | />
31 |
32 | )
33 | }
34 |
35 | const style = {
36 | input: {},
37 | onFocusStyle: {}
38 | }
39 | ```
40 |
--------------------------------------------------------------------------------
/doc/props/value/2.md:
--------------------------------------------------------------------------------
1 | # Component prop value
2 |
3 | Prop value used in component Slider、ProgressBar
4 |
5 | ## Value
6 | value must suit to the props range
7 |
8 | ## Usage
9 | ```jsx
10 | import { Slider } from 'lvlgjs-ui'
11 | import { useState } from 'react'
12 |
13 | function Component () {
14 | const [value, setValue] = useState()
15 | return (
16 |
17 | {/* controlled */}
18 | setValue(e.value)}
21 | value={value}
22 | range={[0, 50]}
23 | />
24 | {/* not controlled */}
25 | console.log(e)}
28 | range={[0, 100]}
29 | />
30 |
31 | )
32 | }
33 |
34 | const style = {
35 | slider: {},
36 | }
37 | ```
38 |
--------------------------------------------------------------------------------
/doc/style/background.md:
--------------------------------------------------------------------------------
1 | # This style control the Component Background
2 |
3 | ## Value
4 | with the following property
5 | - background-image, supoort local image、buildtin symbol、online image
6 | - background-color
7 | - background-grad-color
8 | - background-grad-color-dir
9 |
10 | ## Usage
11 | ```js
12 | const style = {
13 | "background-image": "./assets/somepic.png" | "http://some_website/somepic.png" | "audio"
14 | "background-color": "black",
15 | "background-grad-color": "green",
16 | "background-grad-color-dir": "none" | "vertical" | "horizontal"
17 | }
18 | ```
19 |
20 | ## Demo
21 | test/style/background
22 |
--------------------------------------------------------------------------------
/doc/style/color.md:
--------------------------------------------------------------------------------
1 | # Used to describe style color
2 |
3 | ## RGB color model
4 | The RGB color model defines a given color in the sRGB color space according to its red, green, and blue components
5 |
6 | ### Usage
7 | support rgb, do not support rgba
8 |
9 | ```js
10 | const style = {
11 | "background-color": "rgb(255,0,153)",
12 | }
13 | ```
14 |
15 |
16 |
17 | ## Hex color
18 | A notation for describing the hexadecimal color syntax of an sRGB color using its primary color components (red, green, blue) written as hexadecimal numbers
19 |
20 | ### Usage
21 | ```js
22 | const style = {
23 | "background-color": "#ff0099",
24 | }
25 | ```
26 |
27 |
28 |
29 | ## Built-in colors
30 | red、pink、purple、deep-purple、indigo、blue、light-color、cyan、teal、green、light-green、lime、yellow、amber、orange、deep-orange、brown、blue-grey、grey、white、black
31 |
32 | ### Usage
33 |
34 | ```js
35 | const style = {
36 | "background-color": "red",
37 | "border-color": "orange"
38 | }
39 | ```
--------------------------------------------------------------------------------
/doc/style/display.md:
--------------------------------------------------------------------------------
1 | # This style control the Component Layout
2 |
3 | ## Value
4 | property with the following property
5 | - none, Make the object hidden. (Like it wasn't there at all)
6 | - [flex](./flex.md)
7 | - [grid](./grid.md)
8 |
9 | ## Usage
10 | ```js
11 | const style = {
12 | "display": "none",
13 | "display": "grid",
14 | "display": "flex",
15 | }
16 | ```
--------------------------------------------------------------------------------
/doc/style/grid.md:
--------------------------------------------------------------------------------
1 | # The Grid layout is a subset of [CSS Flexbox](https://css-tricks.com/snippets/css/complete-guide-grid/).
2 |
3 | ## Feature
4 |
5 | ### grid-template-columns
6 | describe the size of columns
7 | The property with the following value
8 | - pixel value
9 | - auto
10 | - fr
11 |
12 | ### grid-template-rows
13 | describe the size of rows
14 | The property with the following value
15 | - pixel value
16 | - auto
17 | - fr
18 |
19 | ### justify-content
20 | If there are some empty space the rows can be aligned several ways
21 | The property with the following value
22 | - start
23 | - end
24 | - center
25 | - space-evenly
26 | - space-around
27 | - space-between
28 |
29 | ### align-items
30 | If there are some empty space the column can be aligned several ways:
31 | - start
32 | - end
33 | - center
34 | - space-evenly
35 | - space-around
36 | - space-between
37 |
38 | ### grid-child
39 | unlike html5 css grid, lvgljs grid child must set style like grid-child: true, otherwise the child will not in parent grid layout
40 |
41 | ### grid-column-pos
42 | specifies a grid item's start position within the grid column
43 |
44 | ### grid-row-pos
45 | specifies a grid item's start position within the grid row
46 |
47 | ### grid-row-span
48 | specifies a grid item's row span
49 |
50 | ### grid-column-span
51 | specifies a grid item's column span
52 |
53 | ### justify-self
54 | determine how to align the children in its cell, with the following value
55 | - start
56 | - center
57 | - end
58 | - stretch
59 |
60 | ### align-self
61 | determine how to align the children in its cell
62 | - start
63 | - center
64 | - end
65 | - stretch
66 |
67 | ## Usage
68 | ```js
69 |
70 | ```
71 |
72 | ## Demo
73 | test/grid
74 |
75 |
76 |
77 |
--------------------------------------------------------------------------------
/doc/style/line.md:
--------------------------------------------------------------------------------
1 | # This style control the Component line style
2 |
3 | ## Value
4 | with the following property
5 | - line-width
6 | - line-color
7 |
8 | ## Usage
9 | ```js
10 | const style = {
11 | 'line-width': '5px',
12 | 'line-color': 'yellow'
13 | }
14 | ```
--------------------------------------------------------------------------------
/doc/style/opacity.md:
--------------------------------------------------------------------------------
1 | # This style control the Opacity
2 |
3 | ## Value
4 | with the following property, value range [0, 1]
5 | - opacity, control all area opacity
6 | - border-opacity, control border area opacity
7 | - outline-opacity, control outline area opacity
8 | - recolor-opacity, control recolor opacity
9 | - shadow-opacity, control shadow area opacity
10 |
11 | ## Usage
12 | const style = {
13 | "opacity": 0.2,
14 | "img-opacity": 0.5,
15 | "border-opacity": 0.7,
16 | "outline-opacity": 0,
17 | "recolor-opacity": 1
18 | }
19 |
--------------------------------------------------------------------------------
/doc/style/position-size-layout.md:
--------------------------------------------------------------------------------
1 | # This style control the [positions、Sizes、Layouts](https://docs.lvgl.io/master/overview/coords.html#overview)
2 |
3 | ## Position、Size
4 |
5 | support pixel value、absolute value、percentage value、auto(content size)
6 |
7 | - [left](https://docs.lvgl.io/master/overview/coords.html#position)
8 | - [top](https://docs.lvgl.io/master/overview/coords.html#position)
9 | - [width](https://docs.lvgl.io/master/overview/coords.html#size)
10 | - [height](https://docs.lvgl.io/master/overview/coords.html#size)
11 |
12 | ### Usage
13 | ```jsx
14 | const style = {
15 | "width": "50%" | "100px" | 100,
16 | "height": "100px",
17 | "left": 20,
18 | "top": "50px",
19 | "width": "auto",
20 | }
21 | ```
22 |
23 | ### Demo
24 | test/style/size
25 |
26 |
27 |
28 | ## Layout
29 |
30 | support flex、grid、absolute layout
31 |
32 | display, property with following value
33 | - [flex](./flex.md)
34 | - [grid](./grid.md)
35 |
36 | position, property with following value
37 | - [absolute](https://docs.lvgl.io/master/overview/coords.html#flags?LV_OBJ_FLAG_FLOATING)
38 |
39 | ### Usage
40 | ```jsx
41 | const style = {
42 | 'position': 'absolute'
43 | }
44 | ```
45 |
46 | ## Spacing
47 |
48 | used to controll line、row spacing，support pixel value、absolute value
49 |
50 | - [row-spacing](https://docs.lvgl.io/master/overview/style.html?highlight=lv_style_set_pad_row#_CPPv420lv_style_set_pad_rowP10lv_style_t10lv_coord_t)
51 | - [column-spacing](https://docs.lvgl.io/master/overview/style.html?highlight=lv_style_set_pad_row#_CPPv423lv_style_set_pad_columnP10lv_style_t10lv_coord_t)
52 |
53 | ### Demo
54 | test/scroll/3
55 |
--------------------------------------------------------------------------------
/doc/style/recolor.md:
--------------------------------------------------------------------------------
1 | used with component Image
2 |
3 | ## Usage
4 | ```js
5 | const style = {
6 | "recolor": "green",
7 | }
8 | ```
--------------------------------------------------------------------------------
/doc/style/scroll.md:
--------------------------------------------------------------------------------
1 | # This style control the scroll way
2 |
3 | ## Value
4 | property with the following property
5 | - [overflow-scrolling](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling), with the following value
6 | - auto
7 | - touch
8 | - overflow, with the following value
9 | - hidden, make the object unscrollable
10 | - scroll, make the object scrollable
11 | - auto, make the object scrollable
12 | - scroll-dir, The allowed scroll direction, with the following value
13 | - none
14 | - left
15 | - right
16 | - top
17 | - bottom
18 | - horizontal
19 | - all
20 | - scroll-snap-x, where to align the snappable children horizontally, with the following value
21 | - none
22 | - snap_start
23 | - snap_end
24 | - snap_center
25 | - scroll-snap-y, where to align the snappable children vertically, with the following value
26 | - none
27 | - snap_start
28 | - snap_end
29 | - snap_center
30 | - scroll-enable-snap, enabled child scroll snap
31 | - true
32 | - false
33 |
34 | ## Demo
35 | test/scroll/2
36 |
--------------------------------------------------------------------------------
/doc/style/shadow.md:
--------------------------------------------------------------------------------
1 | # This style control the component shadow style
2 |
3 | ## Value
4 | with the following property
5 | - shadow-width
6 | - shadow-color
7 | - shadow-offset-x
8 | - shadow-offset-y
9 | - shadow-spread
10 |
11 | ## Usage
12 | ```js
13 | const style = {
14 | "shadow-width": "8px"
15 | "shadow-color": "black",
16 | "shadow-offset-x": "4px",
17 | "shadow-offset-y": "4px",
18 | "shadow-spread": "2px"
19 | }
20 | ```
21 |
22 |
23 |
--------------------------------------------------------------------------------
/doc/style/transform.md:
--------------------------------------------------------------------------------
1 | # The transform property lets you rotate, scale, or translate an element
2 |
3 | ## Syntax
4 | - transform: rotate(10deg)
5 | - transform: translate(10px, 20px)
6 | - transform: scale(1.5)
7 | - transform: translate-x(10px)
8 | - transform: translate-y(20px)
9 | - transform: transform-width(20px)
10 | - transform: transform-height(20px)
11 | - transform: translate-y(20px) scale(1.5) rotate(10deg)
12 |
13 | ## Usage
14 | ```jsx
15 | function App () {
16 | return (
17 |
24 | )
25 | };
26 |
27 | const style = {
28 | gif: {
29 | 'width': 'auto',
30 | 'height': 'auto',
31 | 'transform': 'rotate(60deg)'
32 | }
33 | };
34 | ```
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "lvgljs",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "index.js",
6 | "directories": {
7 | "test": "test"
8 | },
9 | "scripts": {
10 | "sim": "./build/lvgljs run",
11 | "sim:watch": "nodemon --watch 'demo/**/*.js' --ext 'js' --exec 'npm run sim'",
12 | "bundle": "node ./build.js",
13 | "bundle:watch": "nodemon --watch 'demo/**/*.jsx' --watch 'test/**/*.jsx' --ext 'jsx' --exec 'npm run bundle'",
14 | "fmt": "prettier -w src/render/react"
15 | },
16 | "dependencies": {
17 | "buffer": "^6.0.3",
18 | "core-js": "^3.23.2",
19 | "esbuild": "^0.14.43",
20 | "fetch-blob": "^3.2.0",
21 | "nodemon": "^3.1.4",
22 | "lvgljs-ui": "file:src/render/react",
23 | "react": "^16.13.1",
24 | "react-proxy": "^2.0.8",
25 | "react-reconciler": "^0.25.1",
26 | "react-router": "^6.3.0",
27 | "text-encoding": "^0.7.0",
28 | "urlpattern-polyfill": "^5.0.3",
29 | "util": "^0.12.4",
30 | "web-streams-polyfill": "^3.2.1",
31 | "webpack": "^5.73.0",
32 | "webpack-dev-server": "^4.9.2",
33 | "whatwg-fetch": "^3.6.2"
34 | },
35 | "author": "",
36 | "license": "MIT",
37 | "devDependencies": {
38 | "@trivago/prettier-plugin-sort-imports": "^4.2.0",
39 | "@txikijs/types": "^24.6.0",
40 | "@types/react": "^16.3.1",
41 | "@types/react-reconciler": "^0.18.0",
42 | "esbuild-plugin-alias": "^0.2.1",
43 | "glob": "^10.3.15",
44 | "prettier": "^3.0.1"
45 | }
46 | }
47 |
--------------------------------------------------------------------------------
/prettier.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import("prettier").Options} */
2 | const config = {
3 | printWidth: 80,
4 | tabWidth: 2,
5 | trailingComma: 'all',
6 | semi: true,
7 | plugins: ["@trivago/prettier-plugin-sort-imports"],
8 | importOrderSeparation: true,
9 | importOrderSortSpecifiers: true,
10 | };
11 |
12 | module.exports = config;
13 |
--------------------------------------------------------------------------------
/src/engine/engine.cpp:
--------------------------------------------------------------------------------
1 | #include "engine.hpp"
2 |
3 | #include
4 |
5 | #include "hal/hal.hpp"
6 | #include "native/bootstrap/render_bootstrap.hpp"
7 | #include "native/components/component.hpp"
8 |
9 | static TJSRuntime* qrt;
10 |
11 | static void timer_cb(uv_timer_t *handle) {
12 | lv_timer_handler();
13 | }
14 |
15 | int main(int argc, char **argv) {
16 | TJS_Initialize(argc, argv);
17 |
18 | qrt = TJS_NewRuntime();
19 | CHECK_NOT_NULL(qrt);
20 |
21 | JSValue global_obj = JS_GetGlobalObject(qrt->ctx);
22 | JSValue render_sym = JS_NewSymbol(qrt->ctx, "lvgljs", TRUE);
23 | JSAtom render_atom = JS_ValueToAtom(qrt->ctx, render_sym);
24 | JSValue render = JS_NewObjectProto(qrt->ctx, JS_NULL);
25 |
26 | CHECK_EQ(JS_DefinePropertyValue(qrt->ctx, global_obj, render_atom, render, JS_PROP_C_W_E), TRUE);
27 |
28 | NativeRenderInit(qrt->ctx, render);
29 |
30 | JS_FreeAtom(qrt->ctx, render_atom);
31 | JS_FreeValue(qrt->ctx, render_sym);
32 | JS_FreeValue(qrt->ctx, global_obj);
33 |
34 | hal_init();
35 | WindowInit();
36 |
37 | // create timer for rendering
38 | static uv_timer_t handle;
39 | handle.data = qrt;
40 | if (uv_timer_init(&qrt->loop, &handle) != 0) {
41 | printf("uv_timer_init failed\n");
42 | } else if (uv_timer_start(&handle, timer_cb, 30, 30) != 0) {
43 | printf("uv_timer_start failed\n");
44 | }
45 |
46 | int exit_code = TJS_Run(qrt);
47 |
48 | TJS_FreeRuntime(qrt);
49 |
50 | return exit_code;
51 | }
52 |
53 | TJSRuntime* GetRuntime() {
54 | return qrt;
55 | }
56 |
--------------------------------------------------------------------------------
/src/engine/engine.hpp:
--------------------------------------------------------------------------------
1 | #pragma once
2 |
3 | extern "C" {
4 | #include "private.h"
5 | };
6 |
7 | TJSRuntime* GetRuntime();
8 |
--------------------------------------------------------------------------------
/src/engine/hal/device/device.cpp:
--------------------------------------------------------------------------------
1 | #include "./device.hpp"
2 |
3 | #define DISP_BUF_SIZE (1024 * 600)
4 |
5 | void hal_init () {
6 | /*LittlevGL init*/
7 | lv_init();
8 |
9 | /*Linux frame buffer device init*/
10 | fbdev_init();
11 |
12 | /*A small buffer for LittlevGL to draw the screen's content*/
13 | static lv_color_t buf[DISP_BUF_SIZE];
14 |
15 | /*Initialize a descriptor for the buffer*/
16 | static lv_disp_draw_buf_t disp_buf;
17 | lv_disp_draw_buf_init(&disp_buf, buf, NULL, DISP_BUF_SIZE);
18 |
19 | /*Initialize and register a display driver*/
20 | static lv_disp_drv_t disp_drv;
21 | lv_disp_drv_init(&disp_drv);
22 | disp_drv.draw_buf = &disp_buf;
23 | disp_drv.flush_cb = fbdev_flush;
24 | disp_drv.hor_res = 1024;
25 | disp_drv.ver_res = 600;
26 | lv_disp_drv_register(&disp_drv);
27 |
28 | /* Linux input device init */
29 | evdev_init();
30 |
31 | /* Initialize and register a display input driver */
32 | static lv_indev_drv_t indev_drv;
33 | lv_indev_drv_init(&indev_drv); /*Basic initialization*/
34 |
35 | indev_drv.type = LV_INDEV_TYPE_POINTER;
36 | indev_drv.read_cb = evdev_read; //lv_gesture_dir_t lv_indev_get_gesture_dir(const lv_indev_t * indev)
37 | lv_indev_t * my_indev = lv_indev_drv_register(&indev_drv);
38 | };
39 |
40 | uint32_t custom_tick_get(void)
41 | {
42 | static uint64_t start_ms = 0;
43 | if(start_ms == 0) {
44 | struct timeval tv_start;
45 | gettimeofday(&tv_start, NULL);
46 | start_ms = (tv_start.tv_sec * 1000000 + tv_start.tv_usec) / 1000;
47 | }
48 |
49 | struct timeval tv_now;
50 | gettimeofday(&tv_now, NULL);
51 | uint64_t now_ms;
52 | now_ms = (tv_now.tv_sec * 1000000 + tv_now.tv_usec) / 1000;
53 |
54 | uint32_t time_ms = now_ms - start_ms;
55 | return time_ms;
56 | }
--------------------------------------------------------------------------------
/src/engine/hal/device/device.hpp:
--------------------------------------------------------------------------------
1 | #include "lvgl/lvgl.h"
2 | #include "lv_drivers/display/fbdev.h"
3 | #include "lv_drivers/indev/evdev.h"
4 | #include
5 | #include
6 |
--------------------------------------------------------------------------------
/src/engine/hal/hal.hpp:
--------------------------------------------------------------------------------
1 | #pragma once
2 |
3 | void hal_init(void);
--------------------------------------------------------------------------------
/src/engine/hal/simulator/simulator.hpp:
--------------------------------------------------------------------------------
1 | #pragma once
2 |
3 | #include
4 | #include "lvgl/lvgl.h"
5 | #include "lv_drivers/sdl/sdl.h"
6 |
7 | static void* buf;
8 |
9 | static void (*flush_cb)(struct _lv_disp_drv_t * disp_drv, const lv_area_t * area, lv_color_t * color_p);
10 |
11 | static lv_coord_t hor_res;
12 | static lv_coord_t ver_res;
13 |
14 | using read_cb = void (*)(struct _lv_indev_drv_t * indev_drv, lv_indev_data_t * data);
15 |
16 | static read_cb read_cb1;
17 | static read_cb read_cb2;
18 | static read_cb read_cb3;
19 |
--------------------------------------------------------------------------------
/src/render/native/bootstrap/render_bootstrap.cpp:
--------------------------------------------------------------------------------
1 | #include "render_bootstrap.hpp"
2 |
3 | #include "native/components/component.hpp"
4 | #include "native/core/animate/animate.hpp"
5 | #include "native/core/dimensions/dimensions.hpp"
6 | #include "native/core/refresh/refresh.hpp"
7 | #include "native/core/theme/theme.hpp"
8 |
9 | #define NATIVE_RENDER_OBJ "NativeRender"
10 |
11 | void NativeRenderInit (JSContext* ctx, JSValue ns) {
12 | JSValue obj = JS_NewObject(ctx);
13 | JS_SetPropertyStr(ctx, ns, NATIVE_RENDER_OBJ, obj);
14 |
15 | NativeComponentInit(ctx, obj);
16 |
17 | NativeEventWrapInit(ctx);
18 |
19 | NativeAnimateInit(ctx, obj);
20 |
21 | NativeDimensionsInit(ctx, obj);
22 |
23 | NativeRenderUtilInit(ctx, obj);
24 |
25 | NativeThemeInit(ctx, obj);
26 |
27 | lv_init();
28 | lv_png_init();
29 | };
30 |
--------------------------------------------------------------------------------
/src/render/native/bootstrap/render_bootstrap.hpp:
--------------------------------------------------------------------------------
1 | #pragma once
2 |
3 | extern "C" {
4 | #include "private.h"
5 | };
6 |
7 | void NativeRenderInit(JSContext* ctx, JSValue ns);
8 |
--------------------------------------------------------------------------------
/src/render/native/components/arc/arc.hpp:
--------------------------------------------------------------------------------
1 | #pragma once
2 | #include
3 |
4 | #include "native/components/component.hpp"
5 | #include "native/core/basic/comp.hpp"
6 |
7 | class Arc final : public BasicComponent {
8 | public:
9 | Arc(std::string uid, lv_obj_t* parent = nullptr);
10 |
11 | void setRange (int32_t min, int32_t max);
12 |
13 | void setValue (int32_t value);
14 |
15 | void setStartAngle (int32_t value);
16 |
17 | void setEndAngle (int32_t value);
18 |
19 | void setBackgroundStartAngle (int32_t value);
20 |
21 | void setBackgroundEndAngle (int32_t value);
22 |
23 | void setRotation (int32_t value);
24 |
25 | void setMode (int32_t mode);
26 |
27 | void setChangeRate (int32_t value);
28 |
29 | void setArcImage (uint8_t* buf, size_t buf_len, int32_t style_type, std::string& symbol);
30 |
31 | void virtual initCompStyle (int32_t type);
32 | };
33 |
--------------------------------------------------------------------------------
/src/render/native/components/button/button.cpp:
--------------------------------------------------------------------------------
1 |
2 | #include "button.hpp"
3 |
4 | Button::Button(std::string uid, lv_obj_t* parent): BasicComponent(uid) {
5 | this->type = COMP_TYPE_BUTTON;
6 |
7 | this->uid = uid;
8 | this->instance = lv_btn_create(parent != nullptr ? parent : GetWindowInstance());
9 |
10 | lv_group_add_obj(lv_group_get_default(), this->instance);
11 |
12 | lv_obj_add_flag(this->instance, LV_OBJ_FLAG_EVENT_BUBBLE | LV_OBJ_FLAG_CLICK_FOCUSABLE);
13 | lv_obj_clear_flag(this->instance, LV_OBJ_FLAG_SCROLL_ON_FOCUS);
14 | lv_obj_set_user_data(this->instance, this);
15 | this->initStyle(LV_PART_MAIN);
16 | };
17 |
--------------------------------------------------------------------------------
/src/render/native/components/button/button.hpp:
--------------------------------------------------------------------------------
1 | #pragma once
2 | #include
3 |
4 | #include "native/components/component.hpp"
5 | #include "native/core/basic/comp.hpp"
6 |
7 | class Button final : public BasicComponent {
8 | public:
9 | Button(std::string uid, lv_obj_t* parent = nullptr);
10 | };
11 |
--------------------------------------------------------------------------------
/src/render/native/components/calendar/calendar.cpp:
--------------------------------------------------------------------------------
1 |
2 | #include "calendar.hpp"
3 |
4 | Calendar::Calendar(std::string uid, lv_obj_t* parent): BasicComponent(uid) {
5 | this->type = COMP_TYPE_CALENDAR;
6 |
7 | this->uid = uid;
8 | this->instance = lv_calendar_create(parent != nullptr ? parent : GetWindowInstance());
9 | lv_calendar_header_dropdown_create(this->instance);
10 | lv_calendar_header_arrow_create(this->instance);
11 |
12 | lv_group_add_obj(lv_group_get_default(), this->instance);
13 |
14 | lv_obj_clear_flag(this->instance, LV_OBJ_FLAG_SCROLL_ON_FOCUS);
15 |
16 | lv_obj_set_user_data(this->instance, this);
17 | };
18 |
19 | void Calendar::setToday (uint32_t year, uint32_t month, uint32_t day) {
20 | lv_calendar_set_today_date(this->instance, year, month, day);
21 | };
22 |
23 | void Calendar::setShownMonth (uint32_t year, uint32_t month) {
24 | lv_calendar_set_showed_date(this->instance, year, month);
25 | };
26 |
27 | void Calendar::setHighlightDates (std::vector& dates, int32_t num) {
28 | this->highlighted_days = dates;
29 | lv_calendar_set_highlighted_dates(this->instance, this->highlighted_days.data(), num);
30 | };
31 |
--------------------------------------------------------------------------------
/src/render/native/components/calendar/calendar.hpp:
--------------------------------------------------------------------------------
1 | #pragma once
2 | #include
3 |
4 | #include "native/components/component.hpp"
5 | #include "native/core/basic/comp.hpp"
6 |
7 | class Calendar final : public BasicComponent {
8 | public:
9 | Calendar(std::string uid, lv_obj_t* parent = nullptr);
10 |
11 | std::vector highlighted_days;
12 |
13 | void setToday (uint32_t year, uint32_t month, uint32_t day);
14 | void setShownMonth (uint32_t year, uint32_t month);
15 | void setHighlightDates (std::vector& dates, int32_t num);
16 | };
17 |
--------------------------------------------------------------------------------
/src/render/native/components/checkbox/checkbox.cpp:
--------------------------------------------------------------------------------
1 |
2 | #include "checkbox.hpp"
3 |
4 | Checkbox::Checkbox(std::string uid, lv_obj_t* parent): BasicComponent(uid) {
5 | this->type = COMP_TYPE_CHECKBOX;
6 | this->uid = uid;
7 | this->instance = lv_checkbox_create(parent != nullptr ? parent : GetWindowInstance());
8 | lv_group_add_obj(lv_group_get_default(), this->instance);
9 |
10 | lv_obj_add_flag(this->instance, LV_OBJ_FLAG_EVENT_BUBBLE | LV_OBJ_FLAG_CLICK_FOCUSABLE);
11 | lv_obj_clear_flag(this->instance, LV_OBJ_FLAG_SCROLL_ON_FOCUS);
12 | lv_obj_set_user_data(this->instance, this);
13 | this->initStyle(LV_PART_MAIN);
14 | };
15 |
16 | void Checkbox::setText (std::string text) {
17 | lv_checkbox_set_text(this->instance, text.c_str());
18 | };
19 |
20 | void Checkbox::setChecked (bool payload) {
21 | if (payload) {
22 | lv_obj_add_state(this->instance, LV_STATE_CHECKED);
23 | } else {
24 | lv_obj_clear_state(this->instance, LV_STATE_CHECKED);
25 | }
26 | };
27 |
28 | void Checkbox::setDisabled (bool payload) {
29 | if (payload) {
30 | lv_obj_add_state(this->instance, LV_STATE_DISABLED);
31 | } else {
32 | lv_obj_clear_state(this->instance, LV_STATE_DISABLED);
33 | }
34 | };
35 |
36 | void Checkbox::initCompStyle (int32_t type) {
37 | };
38 |
--------------------------------------------------------------------------------
/src/render/native/components/checkbox/checkbox.hpp:
--------------------------------------------------------------------------------
1 | #pragma once
2 | #include
3 |
4 | #include "native/components/component.hpp"
5 | #include "native/core/basic/comp.hpp"
6 |
7 | class Checkbox final : public BasicComponent {
8 | public:
9 | Checkbox(std::string uid, lv_obj_t* parent = nullptr);
10 |
11 | void setText (std::string text);
12 |
13 | void setChecked (bool payload);
14 |
15 | void setDisabled (bool payload);
16 |
17 | void virtual initCompStyle (int32_t type);
18 | };
19 |
--------------------------------------------------------------------------------
/src/render/native/components/component.cpp:
--------------------------------------------------------------------------------
1 | #include "component.hpp"
2 |
3 | #define NATIVE_COMPONENT "NativeComponents"
4 |
5 | void NativeComponentInit (JSContext* ctx, JSValue ns) {
6 | JSValue component_obj = JS_NewObject(ctx);
7 | JS_SetPropertyStr(ctx, ns, NATIVE_COMPONENT, component_obj);
8 |
9 | NativeComponentMaskInit(ctx, component_obj);
10 | NativeComponentChartInit(ctx, component_obj);
11 | NativeComponentTabViewInit(ctx, component_obj);
12 | NativeComponentGIFInit(ctx, component_obj);
13 | NativeComponentCalendarInit(ctx, component_obj);
14 | NativeComponentLineInit(ctx, component_obj);
15 | NativeComponentRollerInit(ctx, component_obj);
16 | NativeComponentProgressBarInit(ctx, component_obj);
17 | NativeComponentDropdownlistInit(ctx, component_obj);
18 | NativeComponentCheckboxInit(ctx, component_obj);
19 | NativeComponentKeyboardInit(ctx, component_obj);
20 | NativeComponentTextareaInit(ctx, component_obj);
21 | NativeComponentArcInit(ctx, component_obj);
22 | NativeComponentSliderInit(ctx, component_obj);
23 | NativeComponentButtonInit(ctx, component_obj);
24 | NativeComponentImageInit(ctx, component_obj);
25 | NativeComponentViewInit(ctx, component_obj);
26 | NativeComponentTextInit(ctx, component_obj);
27 | NativeComponentSwitchInit(ctx, component_obj);
28 | };
29 |
--------------------------------------------------------------------------------
/src/render/native/components/dropdownlist/dropdownlist.hpp:
--------------------------------------------------------------------------------
1 | #pragma once
2 | #include
3 |
4 | #include "native/components/component.hpp"
5 | #include "native/core/basic/comp.hpp"
6 |
7 | enum EArrowType {
8 | DROPDOWNLIST_UP,
9 | DROPDOWNLIST_RIGHT,
10 | DROPDOWNLIST_DOWN,
11 | DROPDOWNLIST_LEFT,
12 | };
13 |
14 | class Dropdownlist final : public BasicComponent {
15 | public:
16 | Dropdownlist(std::string uid, lv_obj_t* parent = nullptr);
17 |
18 | void setItems (std::vector& items);
19 |
20 | void setSelectIndex (int32_t index);
21 |
22 | void setText (std::string text);
23 |
24 | void setDir (lv_dir_t dir);
25 |
26 | void setArrowDir (int32_t dir);
27 |
28 | void setHighLightSelect (bool payload);
29 |
30 | std::string text;
31 | };
32 |
--------------------------------------------------------------------------------
/src/render/native/components/gif/gif.cpp:
--------------------------------------------------------------------------------
1 |
2 | #include "gif.hpp"
3 |
4 | GIF::GIF(std::string uid, lv_obj_t* parent): BasicComponent(uid) {
5 | this->type = COMP_TYPE_GIF;
6 |
7 | this->uid = uid;
8 | this->instance = lv_gif_create(parent != nullptr ? parent : GetWindowInstance());
9 | lv_group_add_obj(lv_group_get_default(), this->instance);
10 |
11 | lv_obj_clear_flag(this->instance, LV_OBJ_FLAG_SCROLL_ON_FOCUS);
12 | lv_obj_add_flag(this->instance, LV_OBJ_FLAG_EVENT_BUBBLE | LV_OBJ_FLAG_CLICKABLE);
13 | lv_img_set_size_mode(this->instance, LV_IMG_SIZE_MODE_REAL);
14 | lv_obj_set_user_data(this->instance, this);
15 | this->initStyle(LV_PART_MAIN);
16 | };
17 |
18 | void GIF::setGIFBinary(uint8_t* buf, size_t len) {
19 | uint8_t* prev_buf = this->gif_buf;
20 | lv_img_dsc_t_1* prev_desc = this->gif_desc;
21 | this->gif_desc = static_cast(malloc(sizeof(lv_img_dsc_t_1)));
22 | uint8_t* img_data = GetImgDesc(buf, len, this->gif_desc);
23 | this->gif_buf = img_data;
24 |
25 | if (img_data != nullptr) {
26 | lv_gif_set_src(this->instance, this->gif_desc);
27 | }
28 |
29 | if (prev_buf != nullptr) {
30 | free(prev_buf);
31 | }
32 | if (prev_desc != nullptr) {
33 | free(prev_desc);
34 | }
35 | };
36 |
37 | GIF::~GIF () {
38 | if (this->gif_buf != nullptr) {
39 | free(this->gif_buf);
40 | this->gif_buf = nullptr;
41 | }
42 | if (this->gif_desc != nullptr) {
43 | free(this->gif_desc);
44 | this->gif_desc = nullptr;
45 | }
46 | };
47 |
48 | void GIF::initCompStyle (int32_t type) {
49 | };
50 |
--------------------------------------------------------------------------------
/src/render/native/components/gif/gif.hpp:
--------------------------------------------------------------------------------
1 | #pragma once
2 | #include
3 |
4 | #include "native/components/component.hpp"
5 | #include "native/core/basic/comp.hpp"
6 |
7 | #include "render/native/core/img/img.hpp"
8 |
9 | #define LV_COLOR_DEPTH 32
10 |
11 | class GIF final : public BasicComponent {
12 | public:
13 | GIF(std::string uid, lv_obj_t* parent = nullptr);
14 | ~GIF();
15 |
16 | lv_img_dsc_t_1* gif_desc = nullptr;
17 | uint8_t* gif_buf = nullptr;
18 |
19 | void setGIFBinary(uint8_t* buf, size_t len);
20 |
21 | void virtual initCompStyle (int32_t type);
22 | };
23 |
--------------------------------------------------------------------------------
/src/render/native/components/image/image.cpp:
--------------------------------------------------------------------------------
1 |
2 | #include "image.hpp"
3 |
4 | Image::Image(std::string uid, lv_obj_t* parent): BasicComponent(uid) {
5 | this->type = COMP_TYPE_IMAGE;
6 |
7 | this->uid = uid;
8 | this->instance = lv_img_create(parent != nullptr ? parent : GetWindowInstance());
9 | lv_group_add_obj(lv_group_get_default(), this->instance);
10 |
11 | lv_obj_add_flag(this->instance, LV_OBJ_FLAG_EVENT_BUBBLE | LV_OBJ_FLAG_CLICKABLE);
12 | lv_obj_clear_flag(this->instance, LV_OBJ_FLAG_SCROLL_ON_FOCUS);
13 | lv_obj_set_user_data(this->instance, this);
14 | this->initStyle(LV_PART_MAIN);
15 | };
16 |
17 | void Image::setImageBinary(uint8_t* buf, size_t len) {
18 | uint8_t* prev_buf = this->image_buf;
19 | lv_img_dsc_t_1* prev_desc = this->image_desc;
20 | this->image_desc = static_cast(malloc(sizeof(lv_img_dsc_t_1)));
21 | uint8_t* img_data = GetImgDesc(buf, len, image_desc);
22 | this->image_buf = img_data;
23 |
24 | if (img_data != nullptr) {
25 | lv_img_set_src(this->instance, this->image_desc);
26 | }
27 |
28 | if (prev_buf != nullptr) {
29 | free(prev_buf);
30 | }
31 | if (prev_desc != nullptr) {
32 | free(prev_desc);
33 | }
34 | };
35 |
36 | Image::~Image () {
37 | if (this->image_buf != nullptr) {
38 | free(this->image_buf);
39 | this->image_buf = nullptr;
40 | }
41 | if (this->image_desc != nullptr) {
42 | free(this->image_desc);
43 | this->image_desc = nullptr;
44 | }
45 | };
46 |
47 | void Image::setSymbol (std::string& str) {
48 | this->symbol = str;
49 | lv_img_set_src(this->instance, this->symbol.c_str());
50 | };
51 |
52 | void Image::initCompStyle (int32_t type) {
53 | };
54 |
--------------------------------------------------------------------------------
/src/render/native/components/image/image.hpp:
--------------------------------------------------------------------------------
1 | #pragma once
2 | #include
3 |
4 | #include "native/components/component.hpp"
5 | #include "native/core/basic/comp.hpp"
6 |
7 | #include "./lodepng.h"
8 | #include "render/native/core/img/img.hpp"
9 | // #include "deps/lv_png/lv_png.h"
10 | // #include "deps/lv_png/lodepng.h"
11 | // #include "deps/lvgl/src/extra/libs/png/lv_png.h"
12 | // #include "deps/lvgl/src/extra/libs/png/lodepng.h"
13 |
14 | #define LV_COLOR_DEPTH 32
15 |
16 | class Image final : public BasicComponent {
17 | public:
18 | Image(std::string uid, lv_obj_t* parent = nullptr);
19 | ~Image();
20 |
21 | lv_img_dsc_t_1* image_desc = nullptr;
22 | uint8_t* image_buf = nullptr;
23 | std::string symbol;
24 |
25 | void setImageBinary(uint8_t* buf, size_t len);
26 |
27 | void setSymbol (std::string& str);
28 |
29 | void virtual initCompStyle (int32_t type);
30 | };
31 |
--------------------------------------------------------------------------------
/src/render/native/components/keyboard/keyboard.cpp:
--------------------------------------------------------------------------------
1 |
2 | #include "keyboard.hpp"
3 |
4 | Keyboard::Keyboard(std::string uid, lv_obj_t* parent): BasicComponent(uid) {
5 | this->type = COMP_TYPE_TEXTAREA;
6 | this->uid = uid;
7 | this->instance = lv_keyboard_create(parent != nullptr ? parent : GetWindowInstance());
8 | lv_group_add_obj(lv_group_get_default(), this->instance);
9 |
10 | lv_obj_clear_flag(this->instance, LV_OBJ_FLAG_SCROLL_ON_FOCUS);
11 | lv_obj_add_flag(this->instance, LV_OBJ_FLAG_EVENT_BUBBLE | LV_OBJ_FLAG_CLICK_FOCUSABLE);
12 | lv_obj_set_user_data(this->instance, this);
13 | };
14 |
15 | void Keyboard::setTextarea (BasicComponent* child) {
16 | lv_keyboard_set_textarea(this->instance, child->instance);
17 | };
18 |
19 | void Keyboard::setMode (int32_t mode) {
20 | lv_keyboard_set_mode(this->instance, static_cast(mode));
21 | };
22 |
23 | void Keyboard::initCompStyle (int32_t type) {
24 | };
25 |
--------------------------------------------------------------------------------
/src/render/native/components/keyboard/keyboard.hpp:
--------------------------------------------------------------------------------
1 | #pragma once
2 | #include
3 |
4 | #include "native/components/component.hpp"
5 | #include "native/core/basic/comp.hpp"
6 |
7 | class Keyboard final : public BasicComponent {
8 | public:
9 | Keyboard(std::string uid, lv_obj_t* parent = nullptr);
10 |
11 | void setTextarea (BasicComponent* child);
12 |
13 | void setMode (int32_t mode);
14 |
15 | void virtual initCompStyle (int32_t type);
16 | };
17 |
--------------------------------------------------------------------------------
/src/render/native/components/line/line.cpp:
--------------------------------------------------------------------------------
1 |
2 | #include "line.hpp"
3 |
4 | Line::Line(std::string uid, lv_obj_t* parent): BasicComponent(uid) {
5 | this->type = COMP_TYPE_LINE;
6 |
7 | this->uid = uid;
8 | this->instance = lv_line_create(parent != nullptr ? parent : GetWindowInstance());
9 | lv_group_add_obj(lv_group_get_default(), this->instance);
10 |
11 | lv_obj_clear_flag(this->instance, LV_OBJ_FLAG_SCROLL_ON_FOCUS);
12 | lv_obj_add_flag(this->instance, LV_OBJ_FLAG_EVENT_BUBBLE | LV_OBJ_FLAG_CLICK_FOCUSABLE);
13 | lv_obj_set_user_data(this->instance, this);
14 | };
15 |
16 | void Line::setPoints (std::vector& points, int32_t nums) {
17 | this->points.swap(points);
18 |
19 | lv_line_set_points(this->instance, this->points.data(), nums);
20 | };
21 |
--------------------------------------------------------------------------------
/src/render/native/components/line/line.hpp:
--------------------------------------------------------------------------------
1 | #pragma once
2 | #include
3 |
4 | #include "native/components/component.hpp"
5 | #include "native/core/basic/comp.hpp"
6 |
7 | class Line final : public BasicComponent {
8 | public:
9 | Line(std::string uid, lv_obj_t* parent = nullptr);
10 |
11 | std::vector points;
12 |
13 | void setPoints (std::vector& points, int32_t nums);
14 | };
15 |
--------------------------------------------------------------------------------
/src/render/native/components/list/list.cpp:
--------------------------------------------------------------------------------
1 |
2 | #include "list.hpp"
3 |
4 | List::List(std::string uid, lv_obj_t* parent): BasicComponent(uid) {
5 | this->type = COMP_TYPE_LIST;
6 |
7 | this->uid = uid;
8 | this->instance = lv_list_create(parent != nullptr ? parent : GetWindowInstance());
9 | lv_group_add_obj(lv_group_get_default(), this->instance);
10 |
11 | lv_obj_clear_flag(this->instance, LV_OBJ_FLAG_SCROLL_ON_FOCUS);
12 | lv_obj_set_user_data(this->instance, this);
13 | };
14 |
--------------------------------------------------------------------------------
/src/render/native/components/list/list.hpp:
--------------------------------------------------------------------------------
1 | #pragma once
2 | #include
3 |
4 | #include "native/components/component.hpp"
5 | #include "native/core/basic/comp.hpp"
6 |
7 | class List final : public BasicComponent {
8 | public:
9 | List(std::string uid, lv_obj_t* parent = nullptr);
10 |
11 | void addItem(std::string& icon, std::string& text);
12 | };
13 |
--------------------------------------------------------------------------------
/src/render/native/components/mask/mask.cpp:
--------------------------------------------------------------------------------
1 |
2 | #include "./mask.hpp"
3 |
4 | Mask::Mask(std::string uid, lv_obj_t* parent): BasicComponent(uid) {
5 | this->type = COMP_TYPE_MASK;
6 |
7 | this->uid = uid;
8 | this->instance = lv_obj_create(lv_layer_top());
9 |
10 | lv_group_add_obj(lv_group_get_default(), this->instance);
11 |
12 | lv_obj_add_flag(this->instance, LV_OBJ_FLAG_EVENT_BUBBLE | LV_OBJ_FLAG_CLICK_FOCUSABLE);
13 | lv_obj_clear_flag(this->instance, LV_OBJ_FLAG_SCROLL_ON_FOCUS);
14 | lv_obj_set_user_data(this->instance, this);
15 | this->initStyle(LV_PART_MAIN);
16 | };
17 |
18 | void Mask::initCompStyle (int32_t type) {
19 | this->ensureStyle(type);
20 | lv_style_t* style = this->style_map.at(type);
21 |
22 | uint32_t width, height;
23 | lv_disp_t* disp_default = lv_disp_get_default();
24 | width = disp_default->driver->hor_res;
25 | height = disp_default->driver->ver_res;
26 |
27 | lv_obj_set_style_height(this->instance, height, 0);
28 | lv_obj_set_style_width(this->instance, width, 0);
29 | lv_obj_set_style_bg_opa(this->instance, LV_OPA_70, 0);
30 | lv_obj_set_style_bg_color(this->instance, lv_color_hex(0), 0);
31 | };
32 |
--------------------------------------------------------------------------------
/src/render/native/components/mask/mask.hpp:
--------------------------------------------------------------------------------
1 | #pragma once
2 | #include
3 |
4 | #include "native/components/component.hpp"
5 | #include "native/core/basic/comp.hpp"
6 |
7 | class Mask final : public BasicComponent {
8 | public:
9 | Mask(std::string uid, lv_obj_t* parent = nullptr);
10 |
11 | virtual void initCompStyle (int32_t type);
12 | };
13 |
--------------------------------------------------------------------------------
/src/render/native/components/progressbar/progressbar.cpp:
--------------------------------------------------------------------------------
1 |
2 | #include "progressbar.hpp"
3 |
4 | ProgressBar::ProgressBar(std::string uid, lv_obj_t* parent): BasicComponent(uid) {
5 | this->type = COMP_TYPE_PROGRESSBAR;
6 |
7 | this->uid = uid;
8 | this->instance = lv_bar_create(parent != nullptr ? parent : GetWindowInstance());
9 | lv_group_add_obj(lv_group_get_default(), this->instance);
10 |
11 | lv_obj_clear_flag(this->instance, LV_OBJ_FLAG_SCROLL_ON_FOCUS);
12 | lv_obj_add_flag(this->instance, LV_OBJ_FLAG_EVENT_BUBBLE | LV_OBJ_FLAG_CLICK_FOCUSABLE);
13 | lv_obj_set_user_data(this->instance, this);
14 | };
15 |
16 | void ProgressBar::setValue (int32_t value, bool use_animation) {
17 | lv_bar_set_value(this->instance, value, static_cast(use_animation));
18 | };
19 |
20 | void ProgressBar::setRange (int32_t start, int32_t end) {
21 | lv_bar_set_range(this->instance, start, end);
22 | };
23 |
--------------------------------------------------------------------------------
/src/render/native/components/progressbar/progressbar.hpp:
--------------------------------------------------------------------------------
1 | #pragma once
2 | #include
3 |
4 | #include "native/components/component.hpp"
5 | #include "native/core/basic/comp.hpp"
6 |
7 | class ProgressBar final : public BasicComponent {
8 | public:
9 | ProgressBar(std::string uid, lv_obj_t* parent = nullptr);
10 |
11 | void setValue (int32_t value, bool use_animation);
12 |
13 | void setRange (int32_t start, int32_t end);
14 | };
15 |
--------------------------------------------------------------------------------
/src/render/native/components/roller/roller.cpp:
--------------------------------------------------------------------------------
1 |
2 | #include "roller.hpp"
3 |
4 | Roller::Roller(std::string uid, lv_obj_t* parent): BasicComponent(uid) {
5 | this->type = COMP_TYPE_ROLLER;
6 | this->uid = uid;
7 | this->instance = lv_roller_create(parent != nullptr ? parent : GetWindowInstance());
8 | lv_group_add_obj(lv_group_get_default(), this->instance);
9 |
10 | lv_obj_clear_flag(this->instance, LV_OBJ_FLAG_SCROLL_ON_FOCUS);
11 | lv_obj_add_flag(this->instance, LV_OBJ_FLAG_EVENT_BUBBLE | LV_OBJ_FLAG_CLICK_FOCUSABLE);
12 | lv_obj_set_user_data(this->instance, this);
13 | };
14 |
15 | void Roller::setOptions (std::vector& options, uint32_t mode) {
16 | if (options.size() == 0) {
17 | lv_roller_set_options(this->instance, "\0", mode);
18 | } else {
19 | std::string str;
20 | for(int i=0; i < options.size(); i++) {
21 | std::string item = options[i];
22 | str.append(item.c_str());
23 | if (i != options.size() - 1) {
24 | str.append("\n");
25 | }
26 | }
27 | lv_roller_set_options(this->instance, str.c_str(), mode);
28 | }
29 | };
30 |
31 | void Roller::setSelectIndex (uint32_t index) {
32 | lv_roller_set_selected(this->instance, index, LV_ANIM_OFF);
33 | };
34 |
35 | void Roller::setVisibleRowCount (uint32_t count) {
36 | lv_roller_set_visible_row_count(this->instance, count);
37 | };
38 |
--------------------------------------------------------------------------------
/src/render/native/components/roller/roller.hpp:
--------------------------------------------------------------------------------
1 | #pragma once
2 | #include
3 |
4 | #include "native/components/component.hpp"
5 | #include "native/core/basic/comp.hpp"
6 |
7 | class Roller final : public BasicComponent {
8 | public:
9 | Roller(std::string uid, lv_obj_t* parent = nullptr);
10 |
11 | void setOptions (std::vector& options, uint32_t mode);
12 |
13 | void setSelectIndex (uint32_t index);
14 |
15 | void setVisibleRowCount (uint32_t count);
16 | };
17 |
--------------------------------------------------------------------------------
/src/render/native/components/slider/slider.cpp:
--------------------------------------------------------------------------------
1 |
2 | #include "slider.hpp"
3 |
4 | Slider::Slider(std::string uid, lv_obj_t* parent): BasicComponent(uid) {
5 | this->type = COMP_TYPE_SLIDER;
6 |
7 | this->uid = uid;
8 | this->instance = lv_slider_create(parent != nullptr ? parent : GetWindowInstance());
9 | lv_group_add_obj(lv_group_get_default(), this->instance);
10 |
11 | lv_obj_clear_flag(this->instance, LV_OBJ_FLAG_SCROLL_ON_FOCUS);
12 | lv_obj_add_flag(this->instance, LV_OBJ_FLAG_EVENT_BUBBLE | LV_OBJ_FLAG_CLICK_FOCUSABLE);
13 | lv_obj_set_user_data(this->instance, this);
14 | this->initStyle(LV_PART_MAIN);
15 | };
16 |
17 | void Slider::setRange (int32_t min, int32_t max) {
18 | lv_slider_set_range(this->instance, min, max);
19 | };
20 |
21 | void Slider::setValue (int32_t value) {
22 | lv_slider_set_value(this->instance, value, LV_ANIM_OFF);
23 | };
24 |
25 | void Slider::initCompStyle (int32_t type) {
26 | };
27 |
--------------------------------------------------------------------------------
/src/render/native/components/slider/slider.hpp:
--------------------------------------------------------------------------------
1 | #pragma once
2 | #include
3 |
4 | #include "native/components/component.hpp"
5 | #include "native/core/basic/comp.hpp"
6 |
7 | class Slider final : public BasicComponent {
8 | public:
9 | Slider(std::string uid, lv_obj_t* parent = nullptr);
10 |
11 | void setRange (int32_t min, int32_t max);
12 |
13 | void setValue (int32_t value);
14 |
15 | void virtual initCompStyle (int32_t type);
16 | };
17 |
--------------------------------------------------------------------------------
/src/render/native/components/switch/switch.cpp:
--------------------------------------------------------------------------------
1 |
2 | #include "switch.hpp"
3 |
4 | Switch::Switch(std::string uid, lv_obj_t* parent): BasicComponent(uid) {
5 | this->type = COMP_TYPE_SWITCH;
6 | this->uid = uid;
7 | this->instance = lv_switch_create(parent != nullptr ? parent : GetWindowInstance());
8 | lv_group_add_obj(lv_group_get_default(), this->instance);
9 |
10 | lv_obj_clear_flag(this->instance, LV_OBJ_FLAG_SCROLL_ON_FOCUS);
11 | lv_obj_add_flag(this->instance, LV_OBJ_FLAG_EVENT_BUBBLE | LV_OBJ_FLAG_CLICK_FOCUSABLE);
12 | lv_obj_set_user_data(this->instance, this);
13 | };
14 |
15 | void Switch::setValue (bool value) {
16 | if (value) {
17 | lv_obj_add_state(this->instance, LV_STATE_CHECKED);
18 | } else {
19 | lv_obj_clear_state(this->instance, LV_STATE_CHECKED);
20 | }
21 | };
22 |
23 | void Switch::setDisabled (bool value) {
24 | if (value) {
25 | lv_obj_add_state(this->instance, LV_STATE_DISABLED);
26 | } else {
27 | lv_obj_clear_state(this->instance, LV_STATE_DISABLED);
28 | }
29 | };
30 |
31 | void Switch::initCompStyle (int32_t type) {
32 | };
33 |
--------------------------------------------------------------------------------
/src/render/native/components/switch/switch.hpp:
--------------------------------------------------------------------------------
1 | #pragma once
2 | #include
3 |
4 | #include "native/components/component.hpp"
5 | #include "native/core/basic/comp.hpp"
6 |
7 | class Switch final : public BasicComponent {
8 | public:
9 | Switch(std::string uid, lv_obj_t* parent = nullptr);
10 |
11 | void setValue (bool value);
12 |
13 | void setDisabled (bool payload);
14 |
15 | void virtual initCompStyle (int32_t type);
16 | };
17 |
--------------------------------------------------------------------------------
/src/render/native/components/tabview/tabview.cpp:
--------------------------------------------------------------------------------
1 |
2 | #include "tabview.hpp"
3 |
4 | TabView::TabView(std::string uid, uint32_t pos, uint32_t size, lv_obj_t* parent): BasicComponent(uid) {
5 | this->type = COMP_TYPE_TABVIEW;
6 |
7 | this->uid = uid;
8 | this->instance = lv_tabview_create(parent != nullptr ? parent : GetWindowInstance(), pos, size);
9 | lv_group_add_obj(lv_group_get_default(), this->instance);
10 |
11 | lv_obj_clear_flag(this->instance, LV_OBJ_FLAG_SCROLL_ON_FOCUS);
12 | lv_obj_add_flag(this->instance, LV_OBJ_FLAG_EVENT_BUBBLE | LV_OBJ_FLAG_CLICK_FOCUSABLE);
13 | lv_obj_set_user_data(this->instance, this);
14 | this->initStyle(LV_PART_MAIN);
15 | };
16 |
17 | void TabView::setTab(std::string& tab, BasicComponent* content) {
18 | lv_obj_t* page = lv_tabview_add_tab(this->instance, tab.c_str());
19 | lv_obj_set_parent(content->instance, page);
20 | };
21 |
--------------------------------------------------------------------------------
/src/render/native/components/tabview/tabview.hpp:
--------------------------------------------------------------------------------
1 | #pragma once
2 | #include
3 |
4 | #include "native/components/component.hpp"
5 | #include "native/core/basic/comp.hpp"
6 |
7 | class TabView final : public BasicComponent {
8 | public:
9 | TabView(std::string uid, uint32_t pos, uint32_t size, lv_obj_t* parent = nullptr);
10 |
11 | void setTab(std::string& tab, BasicComponent* content);
12 | };
13 |
--------------------------------------------------------------------------------
/src/render/native/components/text/text.cpp:
--------------------------------------------------------------------------------
1 |
2 | #include "text.hpp"
3 |
4 | Text::Text(std::string uid, lv_obj_t* parent): BasicComponent(uid) {
5 | this->type = COMP_TYPE_TEXT;
6 |
7 | this->uid = uid;
8 | this->instance = lv_label_create(parent != nullptr ? parent : GetWindowInstance());
9 | lv_group_add_obj(lv_group_get_default(), this->instance);
10 |
11 | lv_obj_clear_flag(this->instance, LV_OBJ_FLAG_SCROLL_ON_FOCUS);
12 | lv_obj_add_flag(this->instance, LV_OBJ_FLAG_EVENT_BUBBLE | LV_OBJ_FLAG_CLICK_FOCUSABLE);
13 | lv_obj_set_user_data(this->instance, this);
14 | this->initStyle(LV_PART_MAIN);
15 | };
16 |
17 | void Text::setText(std::string& str) {
18 | lv_label_set_text(this->instance, str.c_str());
19 | };
20 |
21 | void Text::initCompStyle (int32_t type) {
22 | // this->ensureStyle(type);
23 | // lv_style_t* style = this->style_map.at(type);
24 |
25 | // lv_obj_set_style_text_color(this->instance, lv_color_hex(0), 0);
26 | };
27 |
--------------------------------------------------------------------------------
/src/render/native/components/text/text.hpp:
--------------------------------------------------------------------------------
1 | #pragma once
2 | #include
3 |
4 | #include "native/components/component.hpp"
5 | #include "native/core/basic/comp.hpp"
6 |
7 | class Text final : public BasicComponent {
8 | public:
9 | Text(std::string uid, lv_obj_t* parent = nullptr);
10 |
11 | void setText(std::string& str);
12 |
13 | virtual void initCompStyle (int32_t type);
14 | };
15 |
--------------------------------------------------------------------------------
/src/render/native/components/textarea/textarea.hpp:
--------------------------------------------------------------------------------
1 | #pragma once
2 | #include
3 |
4 | #include "native/components/component.hpp"
5 | #include "native/core/basic/comp.hpp"
6 | #include "native/components/window/window.hpp"
7 |
8 | class Textarea final : public BasicComponent {
9 | public:
10 | bool auto_raise_keyboard = true;
11 |
12 | lv_obj_t* keyboard = nullptr;
13 |
14 | Textarea(std::string uid, lv_obj_t* parent = nullptr);
15 |
16 | void setOneLine (bool payload);
17 |
18 | void setText (std::string str);
19 |
20 | void setPlaceHolder (std::string str);
21 |
22 | void setPasswordMode (bool payload);
23 |
24 | void setMaxLength (int32_t len);
25 |
26 | void setMode (int32_t mode);
27 |
28 | void setAutoRaiseKeyboard (int32_t payload);
29 |
30 | static void raiseKeyboard (lv_event_t * event);
31 | static void hideKeyboard (lv_event_t * event);
32 |
33 | virtual void initCompStyle (int32_t type);
34 | };
35 |
--------------------------------------------------------------------------------
/src/render/native/components/view/view.cpp:
--------------------------------------------------------------------------------
1 |
2 | #include "view.hpp"
3 |
4 | View::View(std::string uid, lv_obj_t* parent): BasicComponent(uid) {
5 | this->type = COMP_TYPE_VIEW;
6 | this->uid = uid;
7 | this->instance = lv_obj_create(parent != nullptr ? parent : GetWindowInstance());
8 | lv_group_add_obj(lv_group_get_default(), this->instance);
9 |
10 | lv_obj_clear_flag(this->instance, LV_OBJ_FLAG_SCROLL_ON_FOCUS);
11 | lv_obj_add_flag(this->instance, LV_OBJ_FLAG_EVENT_BUBBLE | LV_OBJ_FLAG_CLICK_FOCUSABLE);
12 | lv_obj_set_user_data(this->instance, this);
13 | // this->initStyle(LV_PART_MAIN);
14 | };
15 |
16 | // void View::initCompStyle (int32_t type) {
17 | // this->ensureStyle(type);
18 | // lv_style_t* style = this->style_map.at(type);
19 |
20 | // lv_style_set_pad_left(style, 0);
21 | // lv_style_set_pad_right(style, 0);
22 | // lv_style_set_pad_bottom(style, 0);
23 | // lv_style_set_pad_top(style, 0);
24 | // lv_style_set_radius(style, 0);
25 | // lv_style_set_outline_width(style, 0);
26 | // lv_style_set_outline_pad(style, 0);
27 | // lv_style_set_border_width(style, 0);
28 | // lv_style_set_border_side(style, LV_BORDER_SIDE_FULL);
29 | // };
30 |
--------------------------------------------------------------------------------
/src/render/native/components/view/view.hpp:
--------------------------------------------------------------------------------
1 | #pragma once
2 | #include
3 |
4 | #include "native/components/component.hpp"
5 | #include "native/core/basic/comp.hpp"
6 |
7 | class View final : public BasicComponent {
8 | public:
9 | View(std::string uid, lv_obj_t* parent = nullptr);
10 |
11 | // void initCompStyle (int32_t type);
12 | };
13 |
--------------------------------------------------------------------------------
/src/render/native/components/window/window.cpp:
--------------------------------------------------------------------------------
1 |
2 | #include "window.hpp"
3 |
4 | lv_obj_t* GetWindowInstance () {
5 | return window_instance;
6 | };
7 |
8 | // Window::Window(std::string uid): BasicComponent(uid) {
9 | // this->uid = uid;
10 | // this->instance = lv_obj_create(lv_scr_act());
11 | // window_instance = this->instance;
12 | // lv_obj_add_flag(this->instance, LV_OBJ_FLAG_EVENT_BUBBLE | LV_OBJ_FLAG_CLICK_FOCUSABLE);
13 | // lv_obj_set_user_data(this->instance, this);
14 | // // this->initStyle(LV_PART_MAIN);
15 | // };
16 |
17 | void WindowInit () {
18 | lv_disp_t* disp_default = lv_disp_get_default();
19 | window_instance = lv_obj_create(lv_scr_act());
20 | lv_group_add_obj(lv_group_get_default(), window_instance);
21 | lv_obj_set_style_height(window_instance, disp_default->driver->ver_res, 0);
22 | lv_obj_set_style_width(window_instance, disp_default->driver->hor_res, 0);
23 | lv_obj_set_style_pad_all(window_instance, 0, 0);
24 | lv_obj_set_style_radius(window_instance, 0, 0);
25 | lv_obj_set_style_border_width(window_instance, 0, 0);
26 | };
27 |
--------------------------------------------------------------------------------
/src/render/native/components/window/window.hpp:
--------------------------------------------------------------------------------
1 | #pragma once
2 | #include
3 |
4 | #include "native/components/component.hpp"
5 | #include "native/core/basic/comp.hpp"
6 |
7 | static lv_obj_t* window_instance;
8 |
9 | // class Window : public BasicComponent {
10 | // public:
11 | // Window(std::string uid);
12 | // };
--------------------------------------------------------------------------------
/src/render/native/core/animate/animate.hpp:
--------------------------------------------------------------------------------
1 | #pragma once
2 |
3 | #include "render/native/core/style/style.hpp"
4 | #include "render/native/core/utils/utils.hpp"
5 |
6 | typedef struct ANIMATE_REF {
7 | void* comp;
8 | int32_t uid;
9 | int32_t exec_uid;
10 | int32_t startcb_uid;
11 | int32_t readycb_uid;
12 | bool use_native;
13 | } ANIMATE_REF;
14 |
15 | void NativeAnimateInit (JSContext* ctx, JSValue ns);
--------------------------------------------------------------------------------
/src/render/native/core/dimensions/dimensions.cpp:
--------------------------------------------------------------------------------
1 | #include "./dimensions.hpp"
2 |
3 | static JSValue NativeCompGetDimensions(JSContext* ctx, JSValueConst this_val) {
4 | uint32_t width, height;
5 | lv_disp_t* disp_default = lv_disp_get_default();
6 |
7 | width = disp_default->driver->hor_res;
8 | height = disp_default->driver->ver_res;
9 |
10 | JSValue obj = JS_NewObject(ctx);
11 | JS_SetPropertyStr(ctx, obj, "width", JS_NewInt32(ctx, width));
12 | JS_SetPropertyStr(ctx, obj, "height", JS_NewInt32(ctx, height));
13 |
14 | return obj;
15 | };
16 |
17 | static const JSCFunctionListEntry dimensions_funcs[] = {
18 | TJS_CGETSET_DEF("window", NativeCompGetDimensions, NULL),
19 | };
20 |
21 | void NativeDimensionsInit (JSContext* ctx, JSValue& ns) {
22 | JSValue obj = JS_NewObject(ctx);
23 | JS_SetPropertyStr(ctx, ns, "dimensions", obj);
24 | JS_SetPropertyFunctionList(ctx, obj, dimensions_funcs, countof(dimensions_funcs));
25 | };
--------------------------------------------------------------------------------
/src/render/native/core/dimensions/dimensions.hpp:
--------------------------------------------------------------------------------
1 | #pragma once
2 |
3 | extern "C" {
4 | #include "lvgl.h"
5 |
6 | #include "private.h"
7 | };
8 |
9 | void NativeDimensionsInit (JSContext* ctx, JSValue& ns);
--------------------------------------------------------------------------------
/src/render/native/core/event/click/click.hpp:
--------------------------------------------------------------------------------
1 | #pragma once
2 |
3 | #include
4 |
5 | extern "C" {
6 |
7 | #include "private.h"
8 | }
9 |
10 | #include "native/core/event/event.hpp"
--------------------------------------------------------------------------------
/src/render/native/core/event/normal/normal.cpp:
--------------------------------------------------------------------------------
1 | #include "normal.hpp"
2 |
3 | #include "engine.hpp"
4 |
5 | WRAPPED_STOPPROPAGATION
6 |
7 | static JSClassID WrapNormalEventID;
8 |
9 | static void EventFinalizer(JSRuntime *rt, JSValue val) {
10 | }
11 |
12 | static JSClassDef NormalEventWrapClass = {
13 | .class_name = "normal",
14 | .finalizer = EventFinalizer,
15 | };
16 |
17 | JSValue WrapNormalEvent (lv_event_t* e, std::string uid) {
18 | TJSRuntime* qrt;
19 | JSContext* ctx;
20 | JSValue proto;
21 | JSValue obj;
22 |
23 | qrt = GetRuntime();
24 | ctx = qrt->ctx;
25 | proto = JS_GetClassProto(ctx, WrapNormalEventID);
26 | obj = JS_NewObjectProtoClass(ctx, proto, WrapNormalEventID);
27 | JS_FreeValue(ctx, proto);
28 |
29 | JS_SetOpaque(obj, e);
30 |
31 | return obj;
32 | };
33 |
34 | static const JSCFunctionListEntry component_proto_funcs[] = {
35 | TJS_CFUNC_DEF("stopPropagation", 0, NativeEventStopPropagation)
36 | };
37 |
38 | void NativeNormalEventWrapInit (JSContext* ctx) {
39 | JS_NewClassID(JS_GetRuntime(ctx), &WrapNormalEventID);
40 | JS_NewClass(JS_GetRuntime(ctx), WrapNormalEventID, &NormalEventWrapClass);
41 | JSValue proto = JS_NewObject(ctx);
42 | JS_SetPropertyFunctionList(ctx, proto, component_proto_funcs, countof(component_proto_funcs));
43 | JS_SetClassProto(ctx, WrapNormalEventID, proto);
44 | }
45 |
--------------------------------------------------------------------------------
/src/render/native/core/event/normal/normal.hpp:
--------------------------------------------------------------------------------
1 | #pragma once
2 |
3 | #include
4 |
5 | extern "C" {
6 |
7 | #include "private.h"
8 | }
9 |
10 | #include "native/core/event/event.hpp"
--------------------------------------------------------------------------------
/src/render/native/core/event/select/select.hpp:
--------------------------------------------------------------------------------
1 | #pragma once
2 |
3 | #include
4 |
5 | extern "C" {
6 |
7 | #include "private.h"
8 | }
9 |
10 | #include "native/core/event/event.hpp"
--------------------------------------------------------------------------------
/src/render/native/core/event/value_change/value_change.hpp:
--------------------------------------------------------------------------------
1 | #pragma once
2 |
3 | #include
4 |
5 | extern "C" {
6 |
7 | #include "private.h"
8 | }
9 |
10 | #include "native/core/event/event.hpp"
--------------------------------------------------------------------------------
/src/render/native/core/img/gif/gif.cpp:
--------------------------------------------------------------------------------
1 | #include "./gif.hpp"
2 |
3 | bool isgif (uint16_t* buf) {
4 | uint16_t GIF[2] = {0x4947, 0x3846 };
5 | if (buf[0] == GIF[0] && buf[1] == GIF[1]) {
6 | return true;
7 | }
8 | return false;
9 | };
10 |
11 | void GetGIFInfo (uint8_t* buf, uint32_t* width, uint32_t* height) {
12 | uint8_t* data = buf;
13 | data += 6;
14 |
15 | *width = data[0] << 8 | data[1];
16 | data += 2;
17 | *height = data[0] << 8 | data[1];
18 | };
--------------------------------------------------------------------------------
/src/render/native/core/img/gif/gif.hpp:
--------------------------------------------------------------------------------
1 | #pragma once
2 |
3 | #include "lvgl/lvgl.h"
4 |
5 | bool isgif (uint16_t* buf);
6 |
7 | void GetGIFInfo(uint8_t* buf, uint32_t* width, uint32_t* height);
--------------------------------------------------------------------------------
/src/render/native/core/img/img.cpp:
--------------------------------------------------------------------------------
1 | #include "./img.hpp"
2 |
3 | uint8_t* GetImgDesc (uint8_t* buf, size_t len, lv_img_dsc_t_1* image_desc) {
4 | uint8_t* img_data = NULL;
5 | uint32_t width;
6 | uint32_t height;
7 | IMAGE_TYPE image_type = IMAGE_TYPE_UNKNOWN;
8 |
9 | if (ispng((uint16_t*)(buf))) {
10 | uint32_t error = lodepng_decode32(&img_data, &width, &height, (unsigned char*)buf, len);
11 | if(error) {
12 | if(img_data != NULL) {
13 | lodepng_free(img_data);
14 | }
15 | printf("error %u: %s\n", error, lodepng_error_text(error));
16 | return nullptr;
17 | }
18 | convert_color_depth(img_data, width * height);
19 | image_type = IMAGE_TYPE_PNG;
20 | } else if (isgif((uint16_t*)(buf))) {
21 | image_type = IMAGE_TYPE_GIF;
22 | GetGIFInfo(buf, &width, &height);
23 | img_data = (uint8_t*)malloc(len);
24 | memcpy(img_data, buf, len);
25 | }
26 |
27 | if (image_type == IMAGE_TYPE_UNKNOWN) {
28 | LV_LOG_USER("Image type unknown");
29 | return nullptr;
30 | }
31 |
32 | lv_img_dsc_t_1* prev_desc = image_desc;
33 | image_desc->type = image_type;
34 |
35 | image_desc->header.always_zero = 0;
36 | image_desc->header.w = width;
37 | image_desc->header.h = height;
38 | image_desc->header.cf = LV_IMG_CF_TRUE_COLOR_ALPHA;
39 | image_desc->data_size = width * height * LV_IMG_PX_SIZE_ALPHA_BYTE;
40 | image_desc->data = img_data;
41 |
42 | return img_data;
43 | };
--------------------------------------------------------------------------------
/src/render/native/core/img/img.hpp:
--------------------------------------------------------------------------------
1 | #pragma once
2 |
3 | #include "lvgl/lvgl.h"
4 | #include "./png/png.hpp"
5 | #include "./gif/gif.hpp"
6 |
7 | typedef enum {
8 | IMAGE_TYPE_PNG,
9 | IMAGE_TYPE_GIF,
10 | IMAGE_TYPE_UNKNOWN,
11 | } IMAGE_TYPE;
12 |
13 | typedef struct {
14 | lv_img_header_t header;
15 | uint32_t data_size;
16 | const uint8_t* data;
17 | IMAGE_TYPE type;
18 | } lv_img_dsc_t_1;
19 |
20 | uint8_t* GetImgDesc (uint8_t* buf, size_t len, lv_img_dsc_t_1* image_desc);
--------------------------------------------------------------------------------
/src/render/native/core/img/png/png.hpp:
--------------------------------------------------------------------------------
1 | #pragma once
2 |
3 | #include "lvgl/lvgl.h"
4 | #include "render/native/core/img/img.hpp"
5 |
6 | #include "./lodepng.h"
7 |
8 | void lv_png_init(void);
9 |
10 | bool ispng (uint16_t* buf);
11 |
12 | void convert_color_depth(uint8_t * img, uint32_t px_cnt);
--------------------------------------------------------------------------------
/src/render/native/core/refresh/refresh.cpp:
--------------------------------------------------------------------------------
1 | #include "./refresh.hpp"
2 |
3 | // bool cmp(std::pair& l, std::pair& r)
4 | // {
5 | // if(l.first == r.first) return true;
6 | // else if(l.first.length() != r.first.length()) return l.first.length() > r.first.length();
7 | // else return l.first > r.first;
8 | // };
9 |
10 | static JSValue NativeRenderRefreshScreen(JSContext *ctx, JSValueConst this_val, int argc, JSValueConst *argv) {
11 | // std::vector> result(comp_map.begin(), comp_map.end());
12 | // sort(result.begin(), result.end(), cmp);
13 |
14 | for(auto& desc : comp_map) {
15 | printf("%s \n", desc.second->uid.c_str());
16 | lv_obj_mark_layout_as_dirty(desc.second->instance);
17 | }
18 | lv_obj_mark_layout_as_dirty(GetWindowInstance());
19 |
20 | lv_obj_update_layout(GetWindowInstance());
21 |
22 | lv_refr_now(NULL);
23 |
24 | LV_LOG_USER("Refresh Screen Now!");
25 |
26 | return JS_UNDEFINED;
27 | };
28 |
29 | static const JSCFunctionListEntry util_funcs[] = {
30 | TJS_CFUNC_DEF("refreshWindow", 0, NativeRenderRefreshScreen),
31 | };
32 |
33 | void NativeRenderUtilInit (JSContext* ctx, JSValue& ns) {
34 | JSValue obj = JS_NewObject(ctx);
35 | JS_SetPropertyStr(ctx, ns, "RenderUtil", obj);
36 | JS_SetPropertyFunctionList(ctx, obj, util_funcs, countof(util_funcs));
37 | };
--------------------------------------------------------------------------------
/src/render/native/core/refresh/refresh.hpp:
--------------------------------------------------------------------------------
1 | #pragma once
2 |
3 | #include
4 | #include
5 | #include
6 |
7 | extern "C" {
8 | #include "lvgl.h"
9 |
10 | #include "private.h"
11 | };
12 |
13 | void NativeRenderUtilInit (JSContext* ctx, JSValue& ns);
14 |
15 | #include "native/components/window/window.hpp"
--------------------------------------------------------------------------------
/src/render/native/core/style/font/font.cpp:
--------------------------------------------------------------------------------
1 | #include "font.hpp"
2 |
3 | void CompSetFontSize (lv_obj_t* comp, lv_style_t* style, JSContext* ctx, JSValue obj) {
4 | int x;
5 | JS_ToInt32(ctx, &x, obj);
6 |
7 | lv_style_set_text_font(style, &builtin_font_list[x]);
8 | };
9 |
10 | void CompSetFontSize1 (lv_obj_t* comp, lv_style_t* style, JSContext* ctx, JSValue obj) {
11 | int x;
12 | JS_ToInt32(ctx, &x, obj);
13 |
14 | lv_style_set_text_font(style, &builtin_font_list[x]);
15 | };
--------------------------------------------------------------------------------
/src/render/native/core/style/font/font.hpp:
--------------------------------------------------------------------------------
1 | #pragma once
2 |
3 | #include
4 |
5 | extern "C" {
6 | #include "lvgl.h"
7 | #include "private.h"
8 | };
9 |
10 | static const lv_font_t builtin_font_list[] = {
11 | lv_font_montserrat_8,
12 | lv_font_montserrat_10,
13 | lv_font_montserrat_12,
14 | lv_font_montserrat_14,
15 | lv_font_montserrat_16,
16 | lv_font_montserrat_18,
17 | lv_font_montserrat_20,
18 | lv_font_montserrat_22,
19 | lv_font_montserrat_24,
20 | lv_font_montserrat_26,
21 | lv_font_montserrat_28,
22 | lv_font_montserrat_30,
23 | lv_font_montserrat_32,
24 | lv_font_montserrat_34,
25 | lv_font_montserrat_36,
26 | lv_font_montserrat_38,
27 | lv_font_montserrat_40,
28 | lv_font_montserrat_42,
29 | lv_font_montserrat_44,
30 | lv_font_montserrat_46,
31 | lv_font_montserrat_48,
32 | };
33 |
34 | void CompSetFontSize (lv_obj_t* comp, lv_style_t* style, JSContext* ctx, JSValue obj);
35 |
36 | void CompSetFontSize1 (lv_obj_t* comp, lv_style_t* style, JSContext* ctx, JSValue obj);
--------------------------------------------------------------------------------
/src/render/native/core/style/style.hpp:
--------------------------------------------------------------------------------
1 | #pragma once
2 |
3 | extern "C" {
4 | #include "lvgl.h"
5 |
6 | #include "private.h"
7 | };
8 |
9 | #include
10 | #include
11 |
12 | #include "native/core/style/font/font.hpp"
13 | #include "native/core/basic/comp.hpp"
14 |
15 | using CompSetStyle = void (lv_obj_t*, lv_style_t*, JSContext*, JSValue);
16 |
17 | class StyleManager {
18 | public:
19 | static std::unordered_map styles;
20 | };
21 |
22 | void CompSetTransition (
23 | lv_style_t* style,
24 | lv_style_transition_dsc_t* trans,
25 | lv_style_prop_t props[],
26 | std::string func_str,
27 | int32_t time,
28 | int32_t delay
29 | );
30 |
31 | void CompSetAnimation (
32 | lv_obj_t* comp,
33 | void* opaque,
34 | lv_anim_t* animate,
35 | JSContext* ctx,
36 | JSValue obj
37 | );
--------------------------------------------------------------------------------
/src/render/native/core/theme/theme.hpp:
--------------------------------------------------------------------------------
1 | #pragma once
2 |
3 | extern "C" {
4 | #include "lvgl.h"
5 |
6 | #include "private.h"
7 | };
8 |
9 | #include "native/core/style/font/font.hpp"
10 |
11 | static lv_theme_t theme_default;
12 |
13 | static bool theme_default_init = false;
14 |
15 | void NativeThemeInit (JSContext* ctx, JSValue& ns);
--------------------------------------------------------------------------------
/src/render/native/core/utils/utils.cpp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lvgl/lv_binding_js/57ae57042087f617a80c06ab3526a5dd15b2d6c2/src/render/native/core/utils/utils.cpp
--------------------------------------------------------------------------------
/src/render/react/components/Arc/config.ts:
--------------------------------------------------------------------------------
1 | import { HostConfig } from "react-reconciler";
2 | import { ArcComp, ArcProps } from "./comp";
3 | import { LvgljsComponentConfig } from "../config";
4 |
5 | export default class ArcConfig implements LvgljsComponentConfig {
6 | tagName = "Arc";
7 | native = null;
8 | shouldSetTextContent() {
9 | return false;
10 | }
11 | createInstance(newProps: ArcProps, rootInstance, context, workInProgress, uid) {
12 | const instance = new ArcComp({ uid });
13 | instance.setProps(newProps, {});
14 | return instance;
15 | }
16 | commitMount(instance, newProps: ArcProps, internalInstanceHandle) {}
17 | commitUpdate(instance, updatePayload, oldProps: ArcProps, newProps: ArcProps, finishedWork) {
18 | instance.setProps(newProps, oldProps);
19 | }
20 | setProps(newProps: ArcProps, oldProps: ArcProps) {}
21 | insertBefore(child, beforeChild) {}
22 | appendInitialChild(child) {}
23 | appendChild(child) {}
24 | removeChild(child) {}
25 | }
--------------------------------------------------------------------------------
/src/render/react/components/Button/config.ts:
--------------------------------------------------------------------------------
1 | import { LvgljsComponentConfig } from "../config";
2 | import { ButtonComp, ButtonProps } from "./comp";
3 |
4 | export default class ButtonConfig implements LvgljsComponentConfig {
5 | tagName = "Button";
6 | native = null;
7 | shouldSetTextContent() {
8 | return false;
9 | }
10 | createInstance(newProps: ButtonProps, rootInstance, context, workInProgress, uid) {
11 | const instance = new ButtonComp({ uid });
12 | instance.setProps(newProps, {});
13 | return instance;
14 | }
15 | commitMount(instance, newProps: ButtonProps, internalInstanceHandle) {}
16 | commitUpdate(instance, updatePayload, oldProps: ButtonProps, newProps: ButtonProps, finishedWork) {
17 | instance.setProps(newProps, oldProps);
18 | }
19 | setProps(newProps: ButtonProps, oldProps: ButtonProps) {}
20 | insertBefore(child, beforeChild) {}
21 | appendInitialChild(child) {}
22 | appendChild(child) {}
23 | removeChild(child) {}
24 | }
25 |
--------------------------------------------------------------------------------
/src/render/react/components/Calendar/config.ts:
--------------------------------------------------------------------------------
1 | import { LvgljsComponentConfig } from "../config";
2 | import { CalendarComp, CalendarProps } from "./comp";
3 |
4 | export default class CalendarConfig implements LvgljsComponentConfig {
5 | tagName = "Calendar";
6 | native = null;
7 | shouldSetTextContent() {
8 | return false;
9 | }
10 | createInstance(newProps: CalendarProps, rootInstance, context, workInProgress, uid) {
11 | const instance = new CalendarComp({ uid });
12 | instance.setProps(newProps, {});
13 | return instance;
14 | }
15 | commitMount(instance, newProps: CalendarProps, internalInstanceHandle) {}
16 | commitUpdate(instance, updatePayload, oldProps: CalendarProps, newProps: CalendarProps, finishedWork) {
17 | instance.setProps(newProps, oldProps);
18 | }
19 | setProps(newProps: CalendarProps, oldProps: CalendarProps) {}
20 | insertBefore(child, beforeChild) {}
21 | appendInitialChild(child) {}
22 | appendChild(child) {}
23 | removeChild(child) {}
24 | }
25 |
--------------------------------------------------------------------------------
/src/render/react/components/Canvas/config.ts:
--------------------------------------------------------------------------------
1 | import { LvgljsComponentConfig } from "../config";
2 | import { CanvasComp, CanvasProps } from "./comp";
3 |
4 | export default class CanvasConfig implements LvgljsComponentConfig {
5 | tagName = "Canvas";
6 | native = null;
7 | shouldSetTextContent() {
8 | return false;
9 | }
10 | createInstance(newProps: CanvasProps, rootInstance, context, workInProgress, uid) {
11 | const instance = new CanvasComp({ uid });
12 | instance.setProps(newProps, {});
13 | return instance;
14 | }
15 | commitMount(instance, newProps: CanvasProps, internalInstanceHandle) {}
16 | commitUpdate(instance, updatePayload, oldProps: CanvasProps, newProps: CanvasProps, finishedWork) {
17 | instance.setProps(newProps, oldProps);
18 | }
19 | setProps(newProps: CanvasProps, oldProps: CanvasProps) {}
20 | insertBefore(child, beforeChild) {}
21 | appendInitialChild(child) {}
22 | appendChild(child) {}
23 | removeChild(child) {}
24 | }
25 |
--------------------------------------------------------------------------------
/src/render/react/components/Canvas/context.ts:
--------------------------------------------------------------------------------
1 | class CanvasRect {
2 | draw({
3 | x,
4 | y,
5 | w,
6 | h,
7 | radius,
8 | opacity,
9 | backgroundColor,
10 | backgroundOpacity,
11 | borderColor,
12 | borderWidth,
13 | borderOpacity,
14 | }) {}
15 | }
16 |
17 | export default class CanvasContext {
18 | createRect() {}
19 | }
20 |
--------------------------------------------------------------------------------
/src/render/react/components/Chart/config.ts:
--------------------------------------------------------------------------------
1 | import { LvgljsComponentConfig } from "../config";
2 | import { ChartComp, ChartProps } from "./comp";
3 |
4 | export default class ChartConfig implements LvgljsComponentConfig {
5 | tagName = "Chart";
6 | native = null;
7 | shouldSetTextContent() {
8 | return false;
9 | }
10 | createInstance(newProps: ChartProps, rootInstance, context, workInProgress, uid) {
11 | const instance = new ChartComp({ uid });
12 | instance.setProps(newProps, {});
13 | return instance;
14 | }
15 | commitMount(instance, newProps: ChartProps, internalInstanceHandle) {}
16 | commitUpdate(instance, updatePayload, oldProps: ChartProps, newProps: ChartProps, finishedWork) {
17 | instance.setProps(newProps, oldProps);
18 | }
19 | setProps(newProps: ChartProps, oldProps: ChartProps) {}
20 | insertBefore(child, beforeChild) {}
21 | appendInitialChild(child) {}
22 | appendChild(child) {}
23 | removeChild(child) {}
24 | }
25 |
--------------------------------------------------------------------------------
/src/render/react/components/Checkbox/config.ts:
--------------------------------------------------------------------------------
1 | import { LvgljsComponentConfig } from "../config";
2 | import { CheckboxComp, CheckboxProps } from "./comp";
3 |
4 | export default class CheckboxConfig implements LvgljsComponentConfig {
5 | tagName = "Checkbox";
6 | shouldSetTextContent() {
7 | return false;
8 | }
9 | createInstance(newProps: CheckboxProps, rootInstance, context, workInProgress, uid) {
10 | const instance = new CheckboxComp({ uid });
11 | instance.setProps(newProps, {});
12 | return instance;
13 | }
14 | commitMount(instance, newProps: CheckboxProps, internalInstanceHandle) {}
15 | commitUpdate(instance, updatePayload, oldProps: CheckboxProps, newProps: CheckboxProps, finishedWork) {
16 | instance.setProps(newProps, oldProps);
17 | }
18 | commitUnmount(instance) {}
19 | setProps(newProps: CheckboxProps, oldProps: CheckboxProps) {}
20 | insertBefore(child, beforeChild) {}
21 | appendInitialChild(child) {}
22 | appendChild(child) {}
23 | removeChild(child) {}
24 | }
25 |
--------------------------------------------------------------------------------
/src/render/react/components/Dropdownlist/config.ts:
--------------------------------------------------------------------------------
1 | import { DropdownlistComp, DropdownListProps } from "./comp";
2 | import { LvgljsComponentConfig } from "../config";
3 |
4 | export default class DropdownlistConfig implements LvgljsComponentConfig {
5 | tagName = "Dropdownlist";
6 | native = null;
7 | shouldSetTextContent() {
8 | return false;
9 | }
10 | createInstance(newProps: DropdownListProps, rootInstance, context, workInProgress, uid) {
11 | const instance = new DropdownlistComp({ uid });
12 | instance.setProps(newProps, {});
13 | return instance;
14 | }
15 | commitMount(instance, newProps: DropdownListProps, internalInstanceHandle) {}
16 | commitUpdate(instance, updatePayload, oldProps: DropdownListProps, newProps: DropdownListProps, finishedWork) {
17 | instance.setProps(newProps, oldProps);
18 | }
19 | setProps(newProps: DropdownListProps, oldProps: DropdownListProps) {}
20 | insertBefore(child, beforeChild) {}
21 | appendInitialChild(child) {}
22 | appendChild(child) {}
23 | removeChild(child) {}
24 | }
25 |
--------------------------------------------------------------------------------
/src/render/react/components/GIF/config.ts:
--------------------------------------------------------------------------------
1 | import { LvgljsComponentConfig } from "../config";
2 | import { GIFComp, GIFProps } from "./comp";
3 |
4 | export default class GIFConfig implements LvgljsComponentConfig {
5 | tagName = "GIF";
6 | native = null;
7 | shouldSetTextContent() {
8 | return false;
9 | }
10 | createInstance(newProps: GIFProps, rootInstance, context, workInProgress, uid) {
11 | const instance = new GIFComp({ uid });
12 | instance.setProps(newProps, {});
13 | return instance;
14 | }
15 | commitMount(instance, newProps: GIFProps, internalInstanceHandle) {}
16 | commitUpdate(instance, updatePayload, oldProps: GIFProps, newProps: GIFProps, finishedWork) {
17 | instance.setProps(newProps, oldProps);
18 | }
19 | setProps(newProps: GIFProps, oldProps: GIFProps) {}
20 | insertBefore(child, beforeChild) {}
21 | appendInitialChild(child) {}
22 | appendChild(child) {}
23 | removeChild(child) {}
24 | }
25 |
--------------------------------------------------------------------------------
/src/render/react/components/Image/config.ts:
--------------------------------------------------------------------------------
1 | import { LvgljsComponentConfig } from "../config";
2 | import { ImageComp, ImageProps } from "./comp";
3 |
4 | export default class ImageConfig implements LvgljsComponentConfig {
5 | tagName = "Image";
6 | native = null;
7 | shouldSetTextContent() {
8 | return false;
9 | }
10 | createInstance(newProps: ImageProps, rootInstance, context, workInProgress, uid) {
11 | const instance = new ImageComp({ uid });
12 | instance.setProps(newProps, {});
13 | return instance;
14 | }
15 | commitMount(instance, newProps: ImageProps, internalInstanceHandle) {}
16 | commitUpdate(instance, updatePayload, oldProps: ImageProps, newProps: ImageProps, finishedWork) {
17 | instance.setProps(newProps, oldProps);
18 | }
19 | setProps(newProps: ImageProps, oldProps: ImageProps) {}
20 | insertBefore(child, beforeChild) {}
21 | appendInitialChild(child) {}
22 | appendChild(child) {}
23 | removeChild(child) {}
24 | }
25 |
--------------------------------------------------------------------------------
/src/render/react/components/Input/config.ts:
--------------------------------------------------------------------------------
1 | import { LvgljsComponentConfig } from "../config";
2 | import { InputComp, InputProps } from "./comp";
3 |
4 | export default class InputConfig implements LvgljsComponentConfig {
5 | tagName = "Input";
6 | shouldSetTextContent() {
7 | return false;
8 | }
9 | createInstance(newProps: InputProps, rootInstance, context, workInProgress, uid) {
10 | const instance = new InputComp({ uid });
11 | instance.setProps(newProps, {});
12 | return instance;
13 | }
14 | commitMount(instance, newProps: InputProps, internalInstanceHandle) {}
15 | commitUpdate(instance, updatePayload, oldProps: InputProps, newProps: InputProps, finishedWork) {
16 | instance.setProps(newProps, oldProps);
17 | }
18 | commitUnmount(instance) {}
19 | setProps(newProps: InputProps, oldProps: InputProps) {}
20 | insertBefore(child, beforeChild) {}
21 | appendInitialChild(child) {}
22 | appendChild(child) {}
23 | removeChild(child) {}
24 | }
25 |
--------------------------------------------------------------------------------
/src/render/react/components/Keyboard/config.ts:
--------------------------------------------------------------------------------
1 | import { LvgljsComponentConfig } from "../config";
2 | import { KeyboardComp, KeyboardProps } from "./comp";
3 |
4 | export default class KeyboardConfig implements LvgljsComponentConfig {
5 | tagName = "Keyboard";
6 | shouldSetTextContent() {
7 | return false;
8 | }
9 | createInstance(newProps: KeyboardProps, rootInstance, context, workInProgress, uid) {
10 | const instance = new KeyboardComp({ uid });
11 | instance.setProps(newProps, {});
12 | return instance;
13 | }
14 | commitMount(instance, newProps: KeyboardProps, internalInstanceHandle) {}
15 | commitUpdate(instance, updatePayload, oldProps: KeyboardProps, newProps: KeyboardProps, finishedWork) {
16 | instance.setProps(newProps, oldProps);
17 | }
18 | commitUnmount(instance) {}
19 | setProps(newProps: KeyboardProps, oldProps: KeyboardProps) {}
20 | insertBefore(child, beforeChild) {}
21 | appendInitialChild(child) {}
22 | appendChild(child) {}
23 | removeChild(child) {}
24 | }
25 |
--------------------------------------------------------------------------------
/src/render/react/components/Line/config.ts:
--------------------------------------------------------------------------------
1 | import { LvgljsComponentConfig } from "../config";
2 | import { LineComp, LineProps } from "./comp";
3 |
4 | export default class LineConfig implements LvgljsComponentConfig {
5 | tagName = "Line";
6 | native = null;
7 | shouldSetTextContent() {
8 | return false;
9 | }
10 | createInstance(newProps: LineProps, rootInstance, context, workInProgress, uid) {
11 | const instance = new LineComp({ uid });
12 | instance.setProps(newProps, {});
13 | return instance;
14 | }
15 | commitMount(instance, newProps: LineProps, internalInstanceHandle) {}
16 | commitUpdate(instance, updatePayload, oldProps: LineProps, newProps: LineProps, finishedWork) {
17 | instance.setProps(newProps, oldProps);
18 | }
19 | setProps(newProps: LineProps, oldProp: LineProps) {}
20 | insertBefore(child, beforeChild) {}
21 | appendInitialChild(child) {}
22 | appendChild(child) {}
23 | removeChild(child) {}
24 | }
25 |
--------------------------------------------------------------------------------
/src/render/react/components/Mask/config.ts:
--------------------------------------------------------------------------------
1 | import { LvgljsComponentConfig } from "../config";
2 | import { MaskComp, MaskProps } from "./comp";
3 |
4 | export default class MaskConfig implements LvgljsComponentConfig {
5 | tagName = "Mask";
6 | native = null;
7 | shouldSetTextContent() {
8 | return false;
9 | }
10 | createInstance(newProps: MaskProps, rootInstance, context, workInProgress, uid) {
11 | const instance = new MaskComp({ uid });
12 | instance.setProps(newProps, {});
13 | return instance;
14 | }
15 | commitMount(instance, newProps: MaskProps, internalInstanceHandle) {}
16 | commitUpdate(instance, updatePayload, oldProps: MaskProps, newProps: MaskProps, finishedWork) {
17 | instance.setProps(newProps, oldProps);
18 | }
19 | setProps(newProps: MaskProps, oldProps: MaskProps) {}
20 | insertBefore(child, beforeChild) {}
21 | appendInitialChild(child) {}
22 | appendChild(child) {}
23 | removeChild(child) {}
24 | }
25 |
--------------------------------------------------------------------------------
/src/render/react/components/ProgressBar/config.ts:
--------------------------------------------------------------------------------
1 | import { LvgljsComponentConfig } from "../config";
2 | import { ProgressBarComp, ProgressBarProps } from "./comp";
3 |
4 | export default class ProgressBarConfig implements LvgljsComponentConfig {
5 | tagName = "ProgressBar";
6 | native = null;
7 | shouldSetTextContent() {
8 | return false;
9 | }
10 | createInstance(newProps: ProgressBarProps, rootInstance, context, workInProgress, uid) {
11 | const instance = new ProgressBarComp({ uid });
12 | instance.setProps(newProps, {});
13 | return instance;
14 | }
15 | commitMount(instance, newProps: ProgressBarProps, internalInstanceHandle) {}
16 | commitUpdate(instance, updatePayload, oldProps: ProgressBarProps, newProps: ProgressBarProps, finishedWork) {
17 | instance.setProps(newProps, oldProps);
18 | }
19 | setProps(newProps: ProgressBarProps, oldProps: ProgressBarProps) {}
20 | insertBefore(child, beforeChild) {}
21 | appendInitialChild(child) {}
22 | appendChild(child) {}
23 | removeChild(child) {}
24 | }
25 |
--------------------------------------------------------------------------------
/src/render/react/components/Roller/config.ts:
--------------------------------------------------------------------------------
1 | import { LvgljsComponentConfig } from "../config";
2 | import { RollerComp, RollerProps } from "./comp";
3 |
4 | export default class RollerConfig implements LvgljsComponentConfig {
5 | tagName = "Roller";
6 | native = null;
7 | shouldSetTextContent() {
8 | return false;
9 | }
10 | createInstance(newProps: RollerProps, rootInstance, context, workInProgress, uid) {
11 | const instance = new RollerComp({ uid });
12 | instance.setProps(newProps, {});
13 | return instance;
14 | }
15 | commitMount(instance, newProps: RollerProps, internalInstanceHandle) {}
16 | commitUpdate(instance, updatePayload, oldProps: RollerProps, newProps: RollerProps, finishedWork) {
17 | instance.setProps(newProps, oldProps);
18 | }
19 | setProps(newProps: RollerProps, oldProps: RollerProps) {}
20 | insertBefore(child, beforeChild) {}
21 | appendInitialChild(child) {}
22 | appendChild(child) {}
23 | removeChild(child) {}
24 | }
25 |
--------------------------------------------------------------------------------
/src/render/react/components/Slider/config.ts:
--------------------------------------------------------------------------------
1 | import { LvgljsComponentConfig } from "../config";
2 | import { SliderComp, SliderProps } from "./comp";
3 |
4 | export default class SliderConfig implements LvgljsComponentConfig {
5 | tagName = "Slider";
6 | native = null;
7 | shouldSetTextContent() {
8 | return false;
9 | }
10 | createInstance(newProps: SliderProps, rootInstance, context, workInProgress, uid) {
11 | const instance = new SliderComp({ uid });
12 | instance.setProps(newProps, {});
13 | return instance;
14 | }
15 | commitMount(instance, newProps: SliderProps, internalInstanceHandle) {}
16 | commitUpdate(instance, updatePayload, oldProps: SliderProps, newProps: SliderProps, finishedWork) {
17 | instance.setProps(newProps, oldProps);
18 | }
19 | setProps(newProps: SliderProps, oldProps: SliderProps) {}
20 | insertBefore(child, beforeChild) {}
21 | appendInitialChild(child) {}
22 | appendChild(child) {}
23 | removeChild(child) {}
24 | }
25 |
--------------------------------------------------------------------------------
/src/render/react/components/Switch/config.ts:
--------------------------------------------------------------------------------
1 | import { LvgljsComponentConfig } from "../config";
2 | import { SwitchComp, SwitchProps } from "./comp";
3 |
4 | export default class SwitchConfig implements LvgljsComponentConfig {
5 | tagName = "Switch";
6 | shouldSetTextContent() {
7 | return false;
8 | }
9 | createInstance(newProps: SwitchProps, rootInstance, context, workInProgress, uid) {
10 | const instance = new SwitchComp({ uid });
11 | instance.setProps(newProps, {});
12 | return instance;
13 | }
14 | commitMount(instance, newProps: SwitchProps, internalInstanceHandle) {}
15 | commitUpdate(instance, updatePayload, oldProps: SwitchProps, newProps: SwitchProps, finishedWork) {
16 | instance.setProps(newProps, oldProps);
17 | }
18 | commitUnmount(instance) {}
19 | setProps(newProps: SwitchProps, oldProps: SwitchProps) {}
20 | insertBefore(child, beforeChild) {}
21 | appendInitialChild(child) {}
22 | appendChild(child) {}
23 | removeChild(child) {}
24 | }
25 |
--------------------------------------------------------------------------------
/src/render/react/components/Tabs/config.ts:
--------------------------------------------------------------------------------
1 | import { LvgljsComponentConfig } from "../config";
2 | import { TabsComp, TabsProps } from "./comp";
3 |
4 | export default class TabsConfig implements LvgljsComponentConfig {
5 | tagName = "Tabs";
6 | native = null;
7 | shouldSetTextContent() {
8 | return false;
9 | }
10 | createInstance(newProps: TabsProps, rootInstance, context, workInProgress, uid) {
11 | const instance = new TabsComp({ uid, ...newProps });
12 | instance.setProps(newProps, {});
13 | return instance;
14 | }
15 | commitMount(instance, newProps: TabsProps, internalInstanceHandle) {}
16 | commitUpdate(instance, updatePayload, oldProps: TabsProps, newProps: TabsProps, finishedWork) {
17 | instance.setProps(newProps, oldProps);
18 | }
19 | setProps(newProps: TabsProps, oldProps: TabsProps) {}
20 | insertBefore(child, beforeChild) {}
21 | appendInitialChild(child) {}
22 | appendChild(child) {}
23 | removeChild(child) {}
24 | }
25 |
--------------------------------------------------------------------------------
/src/render/react/components/Text/config.ts:
--------------------------------------------------------------------------------
1 | import { LvgljsComponentConfig } from "../config";
2 | import { TextComp, TextProps } from "./comp";
3 |
4 | export default class TextConfig implements LvgljsComponentConfig {
5 | tagName = "Text";
6 | shouldSetTextContent() {
7 | return false;
8 | }
9 | createInstance(newProps: TextProps, rootInstance, context, workInProgress, uid) {
10 | const instance = new TextComp({ uid });
11 | instance.setProps(newProps, {});
12 | return instance;
13 | }
14 | commitMount(instance, newProps: TextProps, internalInstanceHandle) {}
15 | commitUpdate(instance, updatePayload, oldProps: TextProps, newProps: TextProps, finishedWork) {
16 | instance.setProps(newProps, oldProps);
17 | }
18 | commitUnmount(instance) {}
19 | setProps(newProps: TextProps, oldProps: TextProps) {}
20 | insertBefore(child, beforeChild) {}
21 | appendInitialChild(child) {}
22 | appendChild(child) {}
23 | removeChild(child) {}
24 | }
25 |
--------------------------------------------------------------------------------
/src/render/react/components/Textarea/config.ts:
--------------------------------------------------------------------------------
1 | import { LvgljsComponentConfig } from "../config";
2 | import { TextareaComp, TextAreaProps } from "./comp";
3 |
4 | export default class TextareaConfig implements LvgljsComponentConfig {
5 | tagName = "Textarea";
6 | shouldSetTextContent() {
7 | return false;
8 | }
9 | createInstance(newProps: TextAreaProps, rootInstance, context, workInProgress, uid) {
10 | const instance = new TextareaComp({ uid });
11 | instance.setProps(newProps, {});
12 | return instance;
13 | }
14 | commitMount(instance, newProps: TextAreaProps, internalInstanceHandle) {}
15 | commitUpdate(instance, updatePayload, oldProps: TextAreaProps, newProps: TextAreaProps, finishedWork) {
16 | instance.setProps(newProps, oldProps);
17 | }
18 | commitUnmount(instance) {}
19 | setProps(newProps: TextAreaProps, oldProps: TextAreaProps) {}
20 | insertBefore(child, beforeChild) {}
21 | appendInitialChild(child) {}
22 | appendChild(child) {}
23 | removeChild(child) {}
24 | }
25 |
--------------------------------------------------------------------------------
/src/render/react/components/View/config.ts:
--------------------------------------------------------------------------------
1 | import { LvgljsComponentConfig } from "../config";
2 | import { ViewComp, ViewProps } from "./comp";
3 |
4 | export default class ViewConfig implements LvgljsComponentConfig {
5 | tagName = "View";
6 | shouldSetTextContent() {
7 | return false;
8 | }
9 | createInstance(newProps: ViewProps, rootInstance, context, workInProgress, uid) {
10 | const instance = new ViewComp({ uid });
11 | instance.setProps(newProps, {});
12 | return instance;
13 | }
14 | commitMount(instance, newProps: ViewProps, internalInstanceHandle) {}
15 | commitUpdate(instance, updatePayload, oldProps: ViewProps, newProps: ViewProps, finishedWork) {
16 | instance.setProps(newProps, oldProps);
17 | }
18 | commitUnmount(instance) {}
19 | setProps(newProps: ViewProps, oldProps: ViewProps) {}
20 | insertBefore(child, beforeChild) {}
21 | appendInitialChild(child) {}
22 | appendChild(child) {}
23 | removeChild(child) {}
24 | }
25 |
--------------------------------------------------------------------------------
/src/render/react/components/Window/config.ts:
--------------------------------------------------------------------------------
1 | import { LvgljsComponentConfig } from "../config";
2 | import { Window, WindowProps } from "./comp";
3 |
4 | export default class WindowConfig implements LvgljsComponentConfig {
5 | tagName = "Window";
6 | shouldSetTextContent() {
7 | return false;
8 | }
9 | createInstance(newProps: WindowProps, rootInstance, context, workInProgress, uid) {
10 | const instance = new Window({ uid });
11 | instance.setProps(newProps, {});
12 | return instance;
13 | }
14 | commitMount(instance, props: WindowProps, internalInstanceHandle) {}
15 | commitUpdate(instance, updatePayload, oldProps: WindowProps, newProps: WindowProps, finishedWork) {
16 | instance.setProps(newProps, oldProps);
17 | }
18 | setProps(newProps: WindowProps, oldProps: WindowProps) {}
19 | insertBefore(child, beforeChild) {}
20 | appendInitialChild(child) {}
21 | appendChild(child) {}
22 | removeChild(child) {}
23 | }
24 |
--------------------------------------------------------------------------------
/src/render/react/core/dimensions/index.js:
--------------------------------------------------------------------------------
1 | const bridge = globalThis[Symbol.for('lvgljs')];
2 | const dimensions = bridge.NativeRender.dimensions;
3 |
4 | export const Dimensions = dimensions;
5 |
--------------------------------------------------------------------------------
/src/render/react/core/renderer/index.js:
--------------------------------------------------------------------------------
1 | import reconciler from "../reconciler";
2 |
3 | const containerInfo = new Set();
4 |
5 | export class Renderer {
6 | static container;
7 | static portalContainer;
8 |
9 | static render(element, options) {
10 | const isConcurrent = true;
11 | const hydrate = false;
12 |
13 | Renderer.container = reconciler.createContainer(
14 | containerInfo,
15 | isConcurrent,
16 | hydrate,
17 | );
18 |
19 | const parentComponent = null;
20 | reconciler.updateContainer(element, Renderer.container, parentComponent);
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/src/render/react/core/style/color.ts:
--------------------------------------------------------------------------------
1 | export const builtinColor = {
2 | red: 0xf44336,
3 | pink: 0xe91e63,
4 | purple: 0x9c27b0,
5 | "deep-purple": 0x673ab7,
6 | indigo: 0x3f51b5,
7 | blue: 0x2196f3,
8 | "light-blue": 0x03a9f4,
9 | cyan: 0x00bcd4,
10 | teal: 0x009688,
11 | green: 0x4caf50,
12 | "light-green": 0x8bc34a,
13 | lime: 0xcddc39,
14 | yellow: 0xffeb3b,
15 | amber: 0xffc107,
16 | orange: 0xff9800,
17 | "deep-orange": 0xff5722,
18 | brown: 0x795548,
19 | "blue-grey": 0x607d8b,
20 | grey: 0x9e9e9e,
21 | white: 0xffffff,
22 | black: 0,
23 | };
24 |
25 | /** Either one of the builtin colors or a hex code representing the color e.g. `#ffffff` for white */
26 | export type ColorType = keyof typeof builtinColor | `#${string}`;
27 |
28 | export const colorTransform = (data) => {
29 | if (builtinColor[data]) {
30 | return builtinColor[data];
31 | }
32 | data = data.replace(/(^\s*)|(\s*$)/g, "");
33 | const reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
34 | if (/^(rgb|RGB)/.test(data)) {
35 | const aColor = data.replace(/(?:\(|\)|rgb|RGB)*/g, "").split(",");
36 | let num = "0x";
37 | for (let i = 0; i < aColor.length; i++) {
38 | let hex = Number(aColor[i]).toString(16);
39 | if (hex.length < 2) {
40 | hex = "0" + hex;
41 | }
42 | num += hex;
43 | }
44 | if (num.length !== 8) {
45 | num = "";
46 | }
47 | return num;
48 | } else if (reg.test(data)) {
49 | const aNum = data.replace(/#/, "").split("");
50 | if (aNum.length === 6) {
51 | return Number(`0x${data.substring(1)}`);
52 | } else if (aNum.length === 3) {
53 | let num = "0x";
54 | for (let i = 0; i < aNum.length; i += 1) {
55 | num += aNum[i] + aNum[i];
56 | }
57 | return Number(num);
58 | }
59 | }
60 | return "";
61 | };
62 |
--------------------------------------------------------------------------------
/src/render/react/core/style/pipe/arc.ts:
--------------------------------------------------------------------------------
1 | import { ColorType } from "../color";
2 | import { ProcessBoolean, ProcessColor, ProcessPx } from "../util";
3 |
4 | const obj = {
5 | "arc-width": ProcessPx,
6 | "arc-color": ProcessColor,
7 | "arc-rounded": ProcessBoolean,
8 | };
9 | const keys = Object.keys(obj);
10 |
11 | export type ArcStyleType = {
12 | /** Value in pixels */
13 | "arc-width"?: number;
14 | "arc-color"?: ColorType;
15 | "arc-rounded"?: boolean;
16 | };
17 |
18 | export function ArcStyle(style: ArcStyleType, result, compName) {
19 | keys.forEach((key) => {
20 | if (style[key] !== void 0) {
21 | obj[key](key, style[key], result);
22 | }
23 | });
24 | }
25 |
--------------------------------------------------------------------------------
/src/render/react/core/style/pipe/background.ts:
--------------------------------------------------------------------------------
1 | import { ColorType } from "../color";
2 | import { ProcessColor, ProcessEnum } from "../util";
3 |
4 | const obj = {
5 | "background-color": ProcessColor,
6 | "background-grad-color": ProcessColor,
7 | "background-grad-color-dir": ProcessEnum({
8 | none: 0,
9 | vertical: 1,
10 | horizontal: 2,
11 | }),
12 | };
13 | const keys = Object.keys(obj);
14 |
15 | export type BackgroundStyleType = {
16 | "background-color"?: ColorType;
17 | "background-grad-color"?: ColorType;
18 | "background-grad-color-dir"?: "none" | "vertical" | "horizontal";
19 | };
20 |
21 | export function BackgroundStyle(style: BackgroundStyleType, result, compName) {
22 | keys.forEach((key) => {
23 | if (style[key] !== void 0) {
24 | obj[key](key, style[key], result);
25 | }
26 | });
27 | }
28 |
--------------------------------------------------------------------------------
/src/render/react/core/style/pipe/border.ts:
--------------------------------------------------------------------------------
1 | import { ColorType } from "../color";
2 | import { ProcessColor, ProcessEnum, ProcessPx } from "../util";
3 |
4 | const obj = {
5 | "border-radius": ProcessPx,
6 | "border-width": ProcessPx,
7 | "border-color": ProcessColor,
8 | "border-side": ProcessEnum({
9 | left: 0x04,
10 | right: 0x08,
11 | full: 0x0f,
12 | top: 0x02,
13 | bottom: 0x01,
14 | "top-right": 0x02 | 0x08,
15 | "top-bottom": 0x02 | 0x01,
16 | "top-left": 0x02 | 0x04,
17 | "right-bottom": 0x08 | 0x01,
18 | "right-left": 0x08 | 0x04,
19 | "bottom-left": 0x01 | 0x04,
20 | }),
21 | };
22 | const keys = Object.keys(obj);
23 |
24 | export type BorderStyleType = {
25 | "border-radius"?: number;
26 | "border-width"?: number;
27 | "border-color"?: ColorType;
28 | "border-side"?: "left" | "right" | "full" | "top" | "bottom" | "top-right" | "top-bottom" | "top-left" | "right-bottom" | "right-left" | "bottom-left";
29 | }
30 |
31 | export function BorderStyle(style: BorderStyleType, result, compName) {
32 | keys.forEach((key) => {
33 | if (style[key] !== void 0) {
34 | obj[key](key, style[key], result);
35 | }
36 | });
37 | }
38 |
--------------------------------------------------------------------------------
/src/render/react/core/style/pipe/display.ts:
--------------------------------------------------------------------------------
1 | import { ProcessColor, ProcessPx, ProcessPxOrPercent } from "../util";
2 |
3 | export type DisplayStyleType = {
4 | "display"?: "flex" | "grid" | "block" | "inline" | "none";
5 | }
6 |
7 | export function DisplayStyle(style: DisplayStyleType, result, compName) {
8 | if (style["display"]) {
9 | result["display"] = style["display"];
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/src/render/react/core/style/pipe/line.ts:
--------------------------------------------------------------------------------
1 | import { ColorType } from "../color";
2 | import { ProcessColor, ProcessPx, ProcessPxOrPercent } from "../util";
3 |
4 | const obj = {
5 | "line-width": ProcessPx,
6 | "line-color": ProcessColor,
7 | };
8 | const keys = Object.keys(obj);
9 |
10 | export type LineStyleType = {
11 | "line-width"?: number;
12 | "line-color"?: ColorType;
13 | "line-rounded"?: boolean;
14 | };
15 |
16 | export function LineStyle(style: LineStyleType, result, compName) {
17 | keys.forEach((key) => {
18 | if (style[key] !== void 0) {
19 | obj[key](key, style[key], result);
20 | }
21 | });
22 |
23 | if (style["line-rounded"]) {
24 | result["line-rounded"] = Boolean(style["line-rounded"]);
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/src/render/react/core/style/pipe/misc.ts:
--------------------------------------------------------------------------------
1 | import { ColorType } from "../color";
2 | import { ProcessColor } from "../util";
3 |
4 | export type MiscStyleType = {
5 | "style-transition-time"?: number;
6 | recolor?: ColorType;
7 | };
8 |
9 | export function MiscStyle(style: MiscStyleType, result, compName) {
10 | if (style["recolor"] && compName === "Image") {
11 | ProcessColor("recolor", style["recolor"], result);
12 | }
13 | if (style["style-transition-time"]) {
14 | const value = style["style-transition-time"];
15 | if (!isNaN(value)) {
16 | result["style-transition-time"] = value;
17 | }
18 | }
19 |
20 | return result;
21 | }
22 |
--------------------------------------------------------------------------------
/src/render/react/core/style/pipe/opacity.ts:
--------------------------------------------------------------------------------
1 | function NormalizeOpacity(value) {
2 | if (isNaN(value) || value > 1) return 255;
3 | if (value <= 0) return 0;
4 | return Math.floor(value * 255);
5 | }
6 |
7 | export type OpacityStyleProp = {
8 | opacity?: number;
9 | "background-opacity"?: number;
10 | "border-opacity"?: number;
11 | "outline-opacity"?: number;
12 | "recolor-opacity"?: number;
13 | "shadow-opacity"?: number;
14 | "arc-opacity"?: number;
15 | };
16 |
17 | export function OpacityStyle(style: OpacityStyleProp, result, compName) {
18 | if (style["opacity"] !== void 0) {
19 | if (compName === "Image") {
20 | result["img-opacity"] = NormalizeOpacity(style["opacity"]);
21 | } else {
22 | result["opacity"] = NormalizeOpacity(style["opacity"]);
23 | }
24 | }
25 | if (style["background-opacity"] !== void 0) {
26 | result["background-opacity"] = NormalizeOpacity(
27 | style["background-opacity"],
28 | );
29 | }
30 | if (style["border-opacity"] !== void 0) {
31 | result["border-opacity"] = NormalizeOpacity(style["border-opacity"]);
32 | }
33 | if (style["outline-opacity"] !== void 0) {
34 | result["outline-opacity"] = NormalizeOpacity(style["outline-opacity"]);
35 | }
36 | if (style["recolor-opacity"] !== void 0 && compName === "Image") {
37 | result["recolor-opacity"] = NormalizeOpacity(style["recolor-opacity"]);
38 | }
39 | if (style["shadow-opacity"] !== void 0) {
40 | result["shadow-opacity"] = NormalizeOpacity(style["shadow-opacity"]);
41 | }
42 | if (style["arc-opacity"] !== void 0 && compName === "Arc") {
43 | result["arc-opacity"] = NormalizeOpacity(style["arc-opacity"]);
44 | }
45 |
46 | return result;
47 | }
48 |
--------------------------------------------------------------------------------
/src/render/react/core/style/pipe/outline.ts:
--------------------------------------------------------------------------------
1 | import { ColorType } from "../color";
2 | import { PixelOrPercent, ProcessColor, ProcessPx, ProcessPxOrPercent } from "../util";
3 |
4 | const obj = {
5 | "outline-width": ProcessPx,
6 | "outline-color": ProcessColor,
7 | "outline-padding": ProcessPxOrPercent,
8 | };
9 | const keys = Object.keys(obj);
10 |
11 | export type OutlineStyleType = {
12 | "outline-width"?: number;
13 | "outline-color"?: ColorType;
14 | "outline-padding"?: PixelOrPercent;
15 | };
16 |
17 | export function OutlineStyle(style: OutlineStyleType, result, compName) {
18 | keys.forEach((key) => {
19 | if (style[key] !== void 0) {
20 | obj[key](key, style[key], result);
21 | }
22 | });
23 | }
24 |
--------------------------------------------------------------------------------
/src/render/react/core/style/pipe/pos.ts:
--------------------------------------------------------------------------------
1 | import { PixelOrPercent, ProcessEnum, ProcessPx, ProcessPxOrPercent } from "../util";
2 |
3 | const obj = {
4 | height: ProcessPxOrPercent,
5 | "max-height": ProcessPxOrPercent,
6 | "min-height": ProcessPxOrPercent,
7 | width: ProcessPxOrPercent,
8 | "max-width": ProcessPxOrPercent,
9 | "min-width": ProcessPxOrPercent,
10 | left: ProcessPxOrPercent,
11 | top: ProcessPxOrPercent,
12 | "row-spacing": ProcessPxOrPercent,
13 | "column-spacing": ProcessPxOrPercent,
14 | position: ProcessEnum({
15 | absolute: "absolute",
16 | fixed: "fixed",
17 | }),
18 | };
19 | const keys = Object.keys(obj);
20 |
21 | export type PosStyleType = {
22 | height?: PixelOrPercent;
23 | "max-height"?: PixelOrPercent;
24 | "min-height"?: PixelOrPercent;
25 | width?: PixelOrPercent;
26 | "max-width"?: PixelOrPercent;
27 | "min-width"?: PixelOrPercent;
28 | left?: PixelOrPercent;
29 | top?: PixelOrPercent;
30 | "row-spacing"?: PixelOrPercent;
31 | "column-spacing"?: PixelOrPercent;
32 | position?: "absolute" | "fixed";
33 | };
34 |
35 | export function PosStyle(style: PosStyleType, result, compName) {
36 | keys.forEach((key) => {
37 | if (style[key] !== void 0) {
38 | obj[key](key, style[key], result);
39 | }
40 | });
41 | }
42 |
--------------------------------------------------------------------------------
/src/render/react/core/style/pipe/scoll.ts:
--------------------------------------------------------------------------------
1 | import { ProcessBoolean, ProcessColor, ProcessEnum, ProcessPx } from "../util";
2 |
3 | const obj = {
4 | overflow: ProcessEnum({
5 | hidden: 1,
6 | scroll: 0,
7 | auto: 0,
8 | }),
9 | "overflow-scrolling": ProcessEnum({
10 | auto: 0,
11 | touch: 1,
12 | }),
13 | "scroll-dir": ProcessEnum({
14 | none: 0,
15 | left: 1 << 0,
16 | right: 1 << 1,
17 | top: 1 << 2,
18 | bottom: 1 << 3,
19 | horizontal: (1 << 0) | (1 << 1),
20 | vertical: (1 << 2) | (1 << 3),
21 | all: (1 << 0) | (1 << 1) | (1 << 2) | (1 << 3),
22 | }),
23 | "scroll-snap-x": ProcessEnum({
24 | none: 0,
25 | snap_start: 1,
26 | snap_end: 2,
27 | snap_center: 3,
28 | }),
29 | "scroll-snap-y": ProcessEnum({
30 | none: 0,
31 | snap_start: 1,
32 | snap_end: 2,
33 | snap_center: 3,
34 | }),
35 | "scroll-enable-snap": ProcessBoolean,
36 | };
37 | const keys = Object.keys(obj);
38 |
39 | export type ScrollStyleType = {
40 | overflow?: "hidden" | "scroll" | "auto";
41 | "overflow-scrolling"?: "auto" | "touch";
42 | "scroll-dir"?: "none" | "left" | "right" | "top" | "bottom" | "horizontal" | "vertical" | "all";
43 | "scroll-snap-x"?: "none" | "snap_start" | "snap_end" | "snap_center";
44 | "scroll-snap-y"?: "none" | "snap_start" | "snap_end" | "snap_center";
45 | "scroll-enable-snap"?: boolean;
46 | };
47 |
48 | export function ScrollStyle(style: ScrollStyleType, result, compName) {
49 | keys.forEach((key) => {
50 | if (style[key] !== void 0) {
51 | obj[key](key, style[key], result);
52 | }
53 | });
54 | }
55 |
--------------------------------------------------------------------------------
/src/render/react/core/style/pipe/shadow.ts:
--------------------------------------------------------------------------------
1 | import { ColorType } from "../color";
2 | import { ProcessColor, ProcessPx, ProcessPxOrPercent } from "../util";
3 |
4 | const obj = {
5 | "shadow-width": ProcessPx,
6 | "shadow-color": ProcessColor,
7 | "shadow-offset-x": ProcessPx,
8 | "shadow-offset-y": ProcessPx,
9 | "shadow-spread": ProcessPx,
10 | };
11 | const keys = Object.keys(obj);
12 |
13 | export type ShadowStyleType = {
14 | "shadow-width"?: number;
15 | "shadow-color"?: ColorType;
16 | "shadow-offset-x"?: number;
17 | "shadow-offset-y"?: number;
18 | "shadow-spread"?: number;
19 | };
20 |
21 | export function ShadowStyle(style: ShadowStyleType, result, compName) {
22 | keys.forEach((key) => {
23 | if (style[key] !== void 0) {
24 | obj[key](key, style[key], result);
25 | }
26 | });
27 | }
28 |
--------------------------------------------------------------------------------
/src/render/react/core/style/symbol.ts:
--------------------------------------------------------------------------------
1 | export const BUILT_IN_SYMBOL = {
2 | audio: "\uF001",
3 | video: "\uF008",
4 | list: "\uF00B",
5 | ok: "\uF00C",
6 | close: "\uF00D",
7 | power: "\uF011",
8 | settings: "\uF013",
9 | home: "\uF015",
10 | download: "\uF019",
11 | drive: "\uF01C",
12 | refresh: "\uF021",
13 | mute: "\uF026",
14 | volume_mid: "\uF027",
15 | volume_max: "\uF028",
16 | image: "\uF03E",
17 | tint: "\uF043",
18 | prev: "\uF048",
19 | play: "\uF04B",
20 | pause: "\uF04C",
21 | stop: "\uF04D",
22 | next: "\uF051",
23 | eject: "\uF052",
24 | left: "\uF053",
25 | right: "\uF054",
26 | plus: "\uF067",
27 | minus: "\uF068",
28 | eye_open: "\uF06E",
29 | eye_close: "\uF070",
30 | warning: "\uF071",
31 | shuffle: "\uF074",
32 | up: "\uF077",
33 | down: "\uF078",
34 | loop: "\uF079",
35 | directory: "\uF07B",
36 | upload: "\uF093",
37 | call: "\uF095",
38 | cut: "\uF0C4",
39 | copy: "\uF0C5",
40 | save: "\uF0C7",
41 | bars: "\uF0C9",
42 | envelope: "\uF0E0",
43 | charge: "\uF0E7",
44 | paste: "\uF0EA",
45 | bell: "\uF0F3",
46 | keyboard: "\uF11C",
47 | gps: "\uF124",
48 | file: "\uF158",
49 | wifi: "\uF1EB",
50 | battery_full: "\uF240",
51 | battery_3: "\uF241",
52 | battery_2: "\uF242",
53 | battery_1: "\uF243",
54 | battery_empty: "\uF244",
55 | usb: "\uF287",
56 | bluetooth: "\uF293",
57 | trash: "\uF2ED",
58 | edit: "\uF304",
59 | backspace: "\uF55A",
60 | sd_card: "\uF7C2",
61 | new_line: "\uF8A2",
62 | };
63 |
--------------------------------------------------------------------------------
/src/render/react/core/theme/index.js:
--------------------------------------------------------------------------------
1 | const bridge = globalThis[Symbol.for('lvgljs')];
2 | const nativeTheme = bridge.NativeRender.theme;
3 |
4 | export const Theme = {
5 | setTheme({ primaryColor, secondPrimaryValue, fontSize }) {
6 | nativeTheme.setTheme({
7 | primaryColor,
8 | secondPrimaryValue,
9 | fontSize,
10 | });
11 | },
12 | resetTheme() {
13 | nativeTheme.resetTheme();
14 | },
15 | };
16 |
--------------------------------------------------------------------------------
/src/render/react/package-lock.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "lvgljs-ui",
3 | "version": "0.0.1",
4 | "lockfileVersion": 3,
5 | "requires": true,
6 | "packages": {
7 | "": {
8 | "name": "lvgljs-ui",
9 | "version": "0.0.1",
10 | "license": "ISC"
11 | }
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/src/render/react/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "lvgljs-ui",
3 | "version": "0.0.1",
4 | "description": "lvgljs react frame",
5 | "main": "index.js",
6 | "scripts": {
7 | "build": "esbuild index.ts --outfile=index.js",
8 | "test": "echo \"Error: no test specified\" && exit 1"
9 | },
10 | "author": "Sxs7513",
11 | "license": "ISC"
12 | }
13 |
--------------------------------------------------------------------------------
/src/render/react/utils/helpers.ts:
--------------------------------------------------------------------------------
1 | export function throwUnsupported(instance) {
2 | throw new Error(
3 | `Unsupported operation performed in ${instance.constructor.name}`,
4 | );
5 | }
6 |
7 | export function isValidUrl(str: string) {
8 | if (!str) return false;
9 | try {
10 | const url = new URL(str);
11 | return url.protocol === "http:" || url.protocol === "https:";
12 | } catch (_) {
13 | return false;
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/test/assets/icons/01d.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lvgl/lv_binding_js/57ae57042087f617a80c06ab3526a5dd15b2d6c2/test/assets/icons/01d.png
--------------------------------------------------------------------------------
/test/assets/icons/01n.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lvgl/lv_binding_js/57ae57042087f617a80c06ab3526a5dd15b2d6c2/test/assets/icons/01n.png
--------------------------------------------------------------------------------
/test/assets/icons/02d.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lvgl/lv_binding_js/57ae57042087f617a80c06ab3526a5dd15b2d6c2/test/assets/icons/02d.png
--------------------------------------------------------------------------------
/test/assets/icons/02n.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lvgl/lv_binding_js/57ae57042087f617a80c06ab3526a5dd15b2d6c2/test/assets/icons/02n.png
--------------------------------------------------------------------------------
/test/assets/icons/03d.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lvgl/lv_binding_js/57ae57042087f617a80c06ab3526a5dd15b2d6c2/test/assets/icons/03d.png
--------------------------------------------------------------------------------
/test/assets/icons/03n.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lvgl/lv_binding_js/57ae57042087f617a80c06ab3526a5dd15b2d6c2/test/assets/icons/03n.png
--------------------------------------------------------------------------------
/test/assets/icons/04d.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lvgl/lv_binding_js/57ae57042087f617a80c06ab3526a5dd15b2d6c2/test/assets/icons/04d.png
--------------------------------------------------------------------------------
/test/assets/icons/04n.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lvgl/lv_binding_js/57ae57042087f617a80c06ab3526a5dd15b2d6c2/test/assets/icons/04n.png
--------------------------------------------------------------------------------
/test/assets/icons/09d.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lvgl/lv_binding_js/57ae57042087f617a80c06ab3526a5dd15b2d6c2/test/assets/icons/09d.png
--------------------------------------------------------------------------------
/test/assets/icons/09n.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lvgl/lv_binding_js/57ae57042087f617a80c06ab3526a5dd15b2d6c2/test/assets/icons/09n.png
--------------------------------------------------------------------------------
/test/assets/icons/10d.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lvgl/lv_binding_js/57ae57042087f617a80c06ab3526a5dd15b2d6c2/test/assets/icons/10d.png
--------------------------------------------------------------------------------
/test/assets/icons/10n.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lvgl/lv_binding_js/57ae57042087f617a80c06ab3526a5dd15b2d6c2/test/assets/icons/10n.png
--------------------------------------------------------------------------------
/test/assets/icons/11d.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lvgl/lv_binding_js/57ae57042087f617a80c06ab3526a5dd15b2d6c2/test/assets/icons/11d.png
--------------------------------------------------------------------------------
/test/assets/icons/11n.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lvgl/lv_binding_js/57ae57042087f617a80c06ab3526a5dd15b2d6c2/test/assets/icons/11n.png
--------------------------------------------------------------------------------
/test/assets/icons/13d.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lvgl/lv_binding_js/57ae57042087f617a80c06ab3526a5dd15b2d6c2/test/assets/icons/13d.png
--------------------------------------------------------------------------------
/test/assets/icons/13n.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lvgl/lv_binding_js/57ae57042087f617a80c06ab3526a5dd15b2d6c2/test/assets/icons/13n.png
--------------------------------------------------------------------------------
/test/assets/icons/50d.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lvgl/lv_binding_js/57ae57042087f617a80c06ab3526a5dd15b2d6c2/test/assets/icons/50d.png
--------------------------------------------------------------------------------
/test/assets/icons/50n.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lvgl/lv_binding_js/57ae57042087f617a80c06ab3526a5dd15b2d6c2/test/assets/icons/50n.png
--------------------------------------------------------------------------------
/test/assets/icons/na.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lvgl/lv_binding_js/57ae57042087f617a80c06ab3526a5dd15b2d6c2/test/assets/icons/na.png
--------------------------------------------------------------------------------
/test/assets/images/sky.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lvgl/lv_binding_js/57ae57042087f617a80c06ab3526a5dd15b2d6c2/test/assets/images/sky.jpg
--------------------------------------------------------------------------------
/test/assets/png_decoder_test.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lvgl/lv_binding_js/57ae57042087f617a80c06ab3526a5dd15b2d6c2/test/assets/png_decoder_test.png
--------------------------------------------------------------------------------
/test/button/1/index.jsx:
--------------------------------------------------------------------------------
1 | import { View, Render, Text, Image, Button, Dimensions } from 'lvgljs-ui';
2 | import React, { useState } from 'react';
3 |
4 | const { width, height } = Dimensions.window
5 |
6 | function App () {
7 | return (
8 |
9 |
12 |
15 |
16 |
17 | )
18 | };
19 |
20 | const style = {
21 | window: {
22 | 'width': width,
23 | 'height': height,
24 | 'display': 'flex',
25 | 'justify-content': 'center',
26 | 'align-items': 'center'
27 | },
28 | button: {
29 | 'width': '100px',
30 | 'height': '100px',
31 | 'border-width': '3px',
32 | 'border-color': 'grey',
33 | 'background-color': 'white',
34 | 'transition-property': 'border-width, background-color',
35 | 'transition-duration': '100ms',
36 | 'transition-timing-function': 'linear',
37 | 'transition-delay': '200ms',
38 | 'text-color': 'blue',
39 | 'display': 'flex',
40 | 'justify-content': 'center',
41 | 'align-items': 'center'
42 | },
43 | buttonPress: {
44 | 'border-width': '6px',
45 | 'border-color': '#DC143C',
46 | 'background-color': 'red',
47 | 'transition-property': 'border-width, background-color',
48 | 'transition-duration': '500ms',
49 | 'transition-timing-function': 'linear',
50 | 'transition-delay': '0',
51 | 'display': 'flex',
52 | 'justify-content': 'center',
53 | 'align-items': 'center'
54 | }
55 | };
56 |
57 | Render.render();
--------------------------------------------------------------------------------
/test/button/2/index.jsx:
--------------------------------------------------------------------------------
1 | import { View, Render, Text, Image, Button, Dimensions } from 'lvgljs-ui';
2 | import React, { useState } from 'react';
3 |
4 | const { width, height } = Dimensions.window
5 |
6 | function App () {
7 | return (
8 |
9 |
12 |
13 | )
14 | };
15 |
16 | const style = {
17 | window: {
18 | 'width': width,
19 | 'height': height,
20 | 'display': 'flex',
21 | 'justify-content': 'center',
22 | 'align-items': 'center'
23 | },
24 | button: {
25 | 'text-color': 'white',
26 | 'display': 'flex',
27 | 'justify-content': 'center',
28 | 'align-items': 'center',
29 | 'background-color': 'blue',
30 |
31 | 'transition-property': 'transform-width, transform-height',
32 | 'transition-duration': '250ms',
33 | 'transition-timing-function': 'ease-in-out',
34 | 'transition-delay': '250ms',
35 | },
36 | buttonPress: {
37 | 'transform': 'transform-width(10), transform-height(-10)',
38 | 'letter-spacing': 10,
39 |
40 | 'transition-property': 'transform-width, transform-height',
41 | 'transition-duration': '250ms',
42 | 'transition-timing-function': 'overshoot',
43 | 'transition-delay': '250ms',
44 |
45 | 'width': 'auto'
46 | }
47 | };
48 |
49 | Render.render();
--------------------------------------------------------------------------------
/test/calendar/1/index.jsx:
--------------------------------------------------------------------------------
1 | import { Calendar, Render, Line, EAlignType, Button } from 'lvgljs-ui';
2 | import React, { useState } from 'react';
3 |
4 | function App () {
5 |
6 | return (
7 | { console.log(e.value) }}
20 | />
21 | )
22 | };
23 |
24 | const style = {
25 | calendar: {
26 | 'width': 285,
27 | 'height': 285,
28 | }
29 | };
30 |
31 | Render.render();
--------------------------------------------------------------------------------
/test/chart/1/index.jsx:
--------------------------------------------------------------------------------
1 | import { Chart, Render, Line, EAlignType } from 'lvgljs-ui';
2 | import React, { useState, useEffect } from 'react';
3 |
4 | let index1 = 0
5 | let index2 = 0
6 |
7 | function App () {
8 | const [data1, setData1] = useState([65,10,10,10,10,10,10,30,70,90])
9 | const [data2, setData2] = useState([90,70,65,65,65,65,65,65,65,65])
10 |
11 | useEffect(() => {
12 | setInterval(() => {
13 | const data11 = [...data1]
14 | const data22 = [...data2]
15 | data11[index1++] = Math.floor(Math.random() * 100)
16 | data22[index2++] = Math.floor(Math.random() * 100)
17 |
18 | if (index1 >= data1.length) {
19 | index1 = 0
20 | }
21 | if (index2 >= data2.length) {
22 | index2 = 0
23 | }
24 |
25 | setData1(data11)
26 | setData2(data22)
27 | }, 200)
28 | }, [])
29 |
30 | return (
31 |
47 | )
48 | };
49 |
50 | const style = {
51 | chart: {
52 | 'width': 200,
53 | 'height': 150,
54 | }
55 | };
56 |
57 | Render.render();
--------------------------------------------------------------------------------
/test/chart/5/index.jsx:
--------------------------------------------------------------------------------
1 | import { Chart, Render, Line, EAlignType } from 'lvgljs-ui';
2 | import React, { useState, useEffect } from 'react';
3 |
4 | function getRandom (n, m) {
5 | var num = Math.floor(Math.random() * (m - n + 1) + n)
6 | return num
7 | }
8 |
9 | let index = 0
10 |
11 | function App () {
12 | const [data, setData] = useState(Array(50).fill(0).map(item => [getRandom(0, 200), getRandom(0, 1000)]))
13 |
14 | useEffect(() => {
15 | setInterval(() => {
16 | const d = [...data]
17 | d[index] = [getRandom(0, 200), getRandom(0, 1000)]
18 | setData(d)
19 | index++
20 | }, 200)
21 | }, [])
22 |
23 | return (
24 |
55 | )
56 | };
57 |
58 | const style = {
59 | chart: {
60 | 'width': 200,
61 | 'height': 150,
62 | },
63 | itemStyle: {
64 | 'line-width': 0
65 | }
66 | };
67 |
68 | Render.render();
--------------------------------------------------------------------------------
/test/checkbox/1/index.jsx:
--------------------------------------------------------------------------------
1 | import { View, Render, Text, Dimensions, Checkbox } from 'lvgljs-ui';
2 | import React, { useState } from 'react';
3 |
4 | const { width, height } = Dimensions.window
5 |
6 | function App () {
7 | return (
8 |
9 | console.log('checkbox1 checked: ', e.checked)}
13 | />
14 | console.log('checkbox2 checked: ', e.checked)}
18 | />
19 | console.log('checkbox3 checked: ', e.checked)}
24 | />
25 | console.log('checkbox4 checked: ', e.checked)}
29 | />
30 |
31 | )
32 | };
33 |
34 | const style = {
35 | window: {
36 | width,
37 | height,
38 | 'display': 'flex',
39 | 'justify-content': 'center',
40 | 'align-items': 'flex-start',
41 | 'flex-direction': 'column',
42 | 'align-content': 'center'
43 | }
44 | };
45 |
46 | Render.render();
--------------------------------------------------------------------------------
/test/dropdownlist/1/index.jsx:
--------------------------------------------------------------------------------
1 | import { Text, Render, Dimensions, Dropdownlist, EAlignType, Button, View } from 'lvgljs-ui';
2 | import React, { useState } from 'react';
3 |
4 | const { width, height } = Dimensions.window
5 |
6 | const items1 = [
7 | "Apple",
8 | "Banana",
9 | "Orange",
10 | "Cherry",
11 | "Grape",
12 | "Raspberry",
13 | "Melon",
14 | "Orange",
15 | "Lemon",
16 | "Nuts",
17 | ]
18 |
19 | const items2 = [
20 | "1",
21 | "2",
22 | "3",
23 | "4",
24 | "5",
25 | "6",
26 | "7",
27 | "8",
28 | "9",
29 | ]
30 |
31 | function App () {
32 | const [list, setList] = useState(items1)
33 |
34 | return (
35 |
36 |
41 |
46 | {
53 | console.log(e.value)
54 | }}
55 | />
56 |
57 | )
58 | };
59 |
60 | const style = {
61 | window: {
62 | width,
63 | height
64 | },
65 | button1: {
66 | left: 5,
67 | top: 5,
68 | },
69 | button2: {
70 | left: 5,
71 | top: 45
72 | }
73 | };
74 |
75 | Render.render();
--------------------------------------------------------------------------------
/test/dropdownlist/3/index.jsx:
--------------------------------------------------------------------------------
1 | import { View, Render, Dimensions, Dropdownlist, EAlignType, EDropdownlistDirection, EDropdownListArrowDirection } from 'lvgljs-ui';
2 | import React, { useState } from 'react';
3 |
4 | const items1 = [
5 | "Apple",
6 | "Banana",
7 | "Orange",
8 | "Cherry",
9 | ]
10 |
11 | const { width, height } = Dimensions.window
12 |
13 | function App () {
14 | const [list, setList] = useState(items1)
15 |
16 | return (
17 |
18 | {
25 | console.log(e.value)
26 | }}
27 | text={"Menu"}
28 | highlightSelect={false}
29 | />
30 |
31 | )
32 | };
33 |
34 | const style = {
35 | window: {
36 | width,
37 | height
38 | },
39 | };
40 |
41 | Render.render();
--------------------------------------------------------------------------------
/test/event/1/index.jsx:
--------------------------------------------------------------------------------
1 | import { View, Render, Text, Dimensions, Button } from 'lvgljs-ui';
2 | import React, { useState } from 'react';
3 |
4 | const { width, height } = Dimensions.window
5 |
6 | function App () {
7 | const [num, setNum] = useState('Click me!')
8 |
9 | return (
10 |
11 |
25 |
26 | )
27 | };
28 |
29 | const style = {
30 | window: {
31 | width,
32 | height,
33 | 'display': 'flex',
34 | 'justify-content': 'center',
35 | 'align-items': 'center'
36 | },
37 | button: {
38 | 'width': '100px',
39 | 'height': '50px',
40 | 'display': 'flex',
41 | 'justify-content': 'center',
42 | 'align-items': 'center'
43 | },
44 | };
45 |
46 | Render.render();
--------------------------------------------------------------------------------
/test/event/2/index.jsx:
--------------------------------------------------------------------------------
1 | import { View, Render, Dimensions, Text, Image, Button } from 'lvgljs-ui';
2 | import React, { useState } from 'react';
3 |
4 | const { width, height } = Dimensions.window
5 |
6 | function App () {
7 | const [num, setNum] = useState('Click me!')
8 |
9 | return (
10 |
11 |
29 |
30 | )
31 | };
32 |
33 | const style = {
34 | window: {
35 | width,
36 | height,
37 | 'display': 'flex',
38 | 'justify-content': 'center',
39 | 'align-items': 'center'
40 | },
41 | button: {
42 | 'width': '100px',
43 | 'height': '50px',
44 | 'display': 'flex',
45 | 'justify-content': 'center',
46 | 'align-items': 'center'
47 | },
48 | };
49 |
50 | Render.render();
--------------------------------------------------------------------------------
/test/event/3/index.jsx:
--------------------------------------------------------------------------------
1 | import { Render, Dimensions, Text, Button, View } from 'lvgljs-ui';
2 | import React, { useState } from 'react';
3 |
4 | const { width, height } = Dimensions.window
5 |
6 | function App () {
7 | const [backgroungColors, setBackgroundColors] = useState(Array(30).fill(false))
8 |
9 | return (
10 | {
12 | const { target } = e
13 | const { dataset } = target
14 | if (!dataset) return
15 | const { index } = dataset
16 | if (index == void 0) return
17 | backgroungColors[index] = !backgroungColors[index]
18 | setBackgroundColors([...backgroungColors])
19 | }}
20 | >
21 | {
22 | Array(30).fill(0).map((item, i) => {
23 | return (
24 |
30 | )
31 | })
32 | }
33 |
34 | )
35 | };
36 |
37 | const style = {
38 | window: {
39 | width,
40 | height,
41 | 'display': 'flex',
42 | 'flex-direction': 'row',
43 | 'flex-wrap': 'wrap',
44 | 'padding': '8px'
45 | },
46 | button: {
47 | 'width': '80px',
48 | 'height': '50px',
49 | 'display': 'flex',
50 | 'justify-content': 'center',
51 | 'align-items': 'center',
52 | },
53 | };
54 |
55 | Render.render();
--------------------------------------------------------------------------------
/test/flex/2/index.jsx:
--------------------------------------------------------------------------------
1 | import { View, Render, Text, EAlignType, Dimensions } from 'lvgljs-ui';
2 | import React, { useState } from 'react';
3 |
4 | const { width, height } = Dimensions.window
5 |
6 | function App () {
7 | return (
8 |
9 |
12 | {
13 | Array(8).fill(0).map((_, i) => (
14 |
17 | {i}
18 |
19 | ))
20 | }
21 |
22 |
23 | )
24 | };
25 |
26 | const style = {
27 | window: {
28 | width,
29 | height,
30 | 'display': 'flex',
31 | 'align-items': 'center',
32 | 'justify-content': 'center'
33 | },
34 | view1: {
35 | 'width': '300px',
36 | 'height': '220px',
37 | 'display': 'flex',
38 | 'flex-wrap': 'wrap',
39 | 'flex-direction': 'row',
40 | 'justify-content': 'space-evenly',
41 | 'background-color': 'white',
42 | 'border-radius': 4,
43 | 'padding': '4px',
44 | 'border-width': '2px',
45 | 'border-color': 'grey',
46 | },
47 | view2: {
48 | 'width': '70px',
49 | 'height': 'auto',
50 | 'background-color': 'white',
51 | 'border-radius': 4,
52 | 'padding': '4px',
53 | 'border-width': '2px',
54 | 'border-color': 'grey',
55 | 'display': 'flex',
56 | 'align-items': 'center',
57 | 'justify-content': 'center'
58 | }
59 | };
60 |
61 | Render.render();
--------------------------------------------------------------------------------
/test/gif/1/index.jsx:
--------------------------------------------------------------------------------
1 | import { View, Render, GIF, EAlignType, Dimensions } from 'lvgljs-ui';
2 | import React, { useState } from 'react';
3 |
4 | const { width, height } = Dimensions.window
5 |
6 | function App () {
7 | return (
8 |
9 |
16 |
17 | )
18 | };
19 |
20 | const style = {
21 | window: {
22 | 'width': width,
23 | 'height': height,
24 | },
25 | gif: {
26 | 'width': 'auto',
27 | 'height': 'auto',
28 | 'transform': 'rotate(60deg)'
29 | }
30 | };
31 |
32 | Render.render();
--------------------------------------------------------------------------------
/test/grid/1/index.jsx:
--------------------------------------------------------------------------------
1 | import { View, Render, Text, Dimensions, Button } from 'lvgljs-ui';
2 | import React, { useState } from 'react';
3 |
4 | const arr = Array(9).fill(1)
5 |
6 | const { width, height } = Dimensions.window
7 |
8 | function App () {
9 | return (
10 |
11 | {
12 | arr.map((item, index) => (
13 |
20 | ))
21 | }
22 |
23 | )
24 | };
25 |
26 | const style = {
27 | window: {
28 | 'width': width,
29 | 'height': height,
30 | 'display': 'grid',
31 | 'grid-template-columns': '70 70 70',
32 | 'grid-template-rows': '50 50 50'
33 | },
34 | view: {
35 | 'grid-child': true,
36 | 'align-self': 'stretch',
37 | 'justify-self': 'stretch',
38 | 'display': 'flex',
39 | 'justify-content': 'center',
40 | 'align-items': 'center'
41 | }
42 | };
43 |
44 | Render.render();
--------------------------------------------------------------------------------
/test/grid/2/index.jsx:
--------------------------------------------------------------------------------
1 | import { View, Render, Text, EAlignType, Dimensions } from 'lvgljs-ui';
2 | import React, { useState } from 'react';
3 |
4 | const arr = Array(9).fill(1)
5 |
6 | const { width, height } = Dimensions.window
7 |
8 | function App () {
9 | return (
10 |
11 | {/* line1 */}
12 |
13 | {"c0, r0"}
14 |
15 |
16 | {"c1, r0"}
17 |
18 |
19 | {"c2, r0"}
20 |
21 |
22 | {/* line2 */}
23 |
27 | {"c1-2, r1"}
28 |
29 |
30 |
34 | {"c2, r0"}
35 |
36 |
37 | )
38 | };
39 |
40 | const style = {
41 | window: {
42 | 'width': width,
43 | 'height': height,
44 | 'display': 'grid',
45 | 'grid-template-columns': '70 70 70',
46 | 'grid-template-rows': '50 50 50'
47 | },
48 | };
49 |
50 | Render.render();
--------------------------------------------------------------------------------
/test/grid/3/index.jsx:
--------------------------------------------------------------------------------
1 | import { View, Render, Text, EAlignType, Dimensions } from 'lvgljs-ui';
2 | import React, { useState } from 'react';
3 |
4 | const arr = Array(9).fill(1)
5 |
6 | const { width, height } = Dimensions.window
7 |
8 | function App () {
9 | return (
10 |
11 | {
12 | arr.map((item, index) => (
13 |
16 |
17 | {`c${index % 3}, r${Math.floor(index / 3)}`}
18 |
19 |
20 | ))
21 | }
22 |
23 | )
24 | };
25 |
26 | const style = {
27 | window: {
28 | width,
29 | height,
30 | 'display': 'grid',
31 | 'grid-template-columns': '60 1fr 2fr',
32 | 'grid-template-rows': '50 1fr 50',
33 | 'padding': 4,
34 | 'border-radius': 0
35 | },
36 | view: {
37 | 'grid-child': true,
38 | 'align-self': 'stretch',
39 | 'justify-self': 'stretch',
40 | 'display': 'flex',
41 | 'justify-content': 'center',
42 | 'align-items': 'center',
43 | 'overflow': 'hidden'
44 | },
45 | };
46 |
47 | Render.render();
--------------------------------------------------------------------------------
/test/grid/4/index.jsx:
--------------------------------------------------------------------------------
1 | import { View, Render, Text, Dimensions, Button } from 'lvgljs-ui';
2 | import React, { useState } from 'react';
3 |
4 | const arr = Array(9).fill(1)
5 |
6 | const { width, height } = Dimensions.window
7 |
8 | function App () {
9 | return (
10 |
11 | {
12 | arr.map((item, index) => (
13 |
16 |
17 | {`c${index % 3}, r${Math.floor(index / 3)}`}
18 |
19 |
20 | ))
21 | }
22 |
23 | )
24 | };
25 |
26 | const style = {
27 | window: {
28 | width,
29 | height,
30 | 'display': 'grid',
31 | 'grid-template-columns': '60 60 60',
32 | 'grid-template-rows': '45 45 45',
33 | 'padding': 4,
34 | 'border-radius': 0,
35 | 'justify-content': 'space-between',
36 | 'align-items': 'end'
37 | },
38 | view: {
39 | 'grid-child': true,
40 | 'align-self': 'stretch',
41 | 'justify-self': 'stretch',
42 | 'display': 'flex',
43 | 'justify-content': 'center',
44 | 'align-items': 'center',
45 | 'overflow': 'hidden'
46 | },
47 | };
48 |
49 | Render.render();
--------------------------------------------------------------------------------
/test/image/1/1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lvgl/lv_binding_js/57ae57042087f617a80c06ab3526a5dd15b2d6c2/test/image/1/1.png
--------------------------------------------------------------------------------
/test/image/1/2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lvgl/lv_binding_js/57ae57042087f617a80c06ab3526a5dd15b2d6c2/test/image/1/2.png
--------------------------------------------------------------------------------
/test/image/1/index.jsx:
--------------------------------------------------------------------------------
1 | import { View, Render, Dimensions, Text, Image, Button } from 'lvgljs-ui';
2 | import React, { useState } from 'react';
3 |
4 | const { width, height } = Dimensions.window
5 |
6 | function App () {
7 | return (
8 |
9 |
10 |
11 |
12 | )
13 | };
14 |
15 | const style = {
16 | window: {
17 | width,
18 | height,
19 | 'display': 'flex',
20 | 'justify-content': 'center',
21 | 'align-items': 'center',
22 | },
23 | image1: {
24 | 'width': '175px',
25 | 'height': '120px',
26 | },
27 | image2: {
28 | 'width': 'auto',
29 | 'height': 'auto',
30 | }
31 | };
32 |
33 | Render.render();
--------------------------------------------------------------------------------
/test/image/2/2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lvgl/lv_binding_js/57ae57042087f617a80c06ab3526a5dd15b2d6c2/test/image/2/2.png
--------------------------------------------------------------------------------
/test/image/3/3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lvgl/lv_binding_js/57ae57042087f617a80c06ab3526a5dd15b2d6c2/test/image/3/3.png
--------------------------------------------------------------------------------
/test/image/4/index.jsx:
--------------------------------------------------------------------------------
1 | import { View, Render, Dimensions, Text, Image, Button } from 'lvgljs-ui';
2 | import React, { useState } from 'react';
3 |
4 | const { width, height } = Dimensions.window
5 |
6 | function App () {
7 | return (
8 |
9 |
10 |
11 | )
12 | };
13 |
14 | const style = {
15 | window: {
16 | width,
17 | height,
18 | 'display': 'flex',
19 | 'justify-content': 'center',
20 | 'align-items': 'center'
21 | },
22 | image1: {
23 | 'width': '175px',
24 | 'height': '120px',
25 | 'border-width': '2px',
26 | 'border-color': 'black',
27 | },
28 | };
29 |
30 | Render.render();
--------------------------------------------------------------------------------
/test/line/1/index.jsx:
--------------------------------------------------------------------------------
1 | import { View, Render, Dimensions, Line, EAlignType, Button } from 'lvgljs-ui';
2 | import React, { useState } from 'react';
3 |
4 | const points = [[5, 5], [70, 70], [120, 10], [180, 60], [240, 10]]
5 |
6 | const { width, height } = Dimensions.window
7 |
8 | function App () {
9 |
10 | return (
11 |
12 |
16 |
17 | )
18 | };
19 |
20 | const style = {
21 | window: {
22 | width,
23 | height
24 | },
25 | line: {
26 | 'line-width': 8,
27 | 'line-color': 'blue',
28 | 'line-rounded': true
29 | }
30 | };
31 |
32 | Render.render();
--------------------------------------------------------------------------------
/test/progressbar/1/index.jsx:
--------------------------------------------------------------------------------
1 | import { View, Render, Dimensions, Text, ProgressBar, EAlignType, Animate, EAnimateEasingFunc } from 'lvgljs-ui';
2 | import React, { useRef, useEffect } from 'react';
3 |
4 | const { width, height } = Dimensions.window
5 |
6 | function App () {
7 | return (
8 |
9 |
17 |
18 | )
19 | };
20 |
21 | const style = {
22 | window: {
23 | width,
24 | height
25 | },
26 | bar: {
27 | 'width': 200,
28 | 'height': 20,
29 | }
30 | };
31 |
32 | Render.render();
--------------------------------------------------------------------------------
/test/progressbar/2/index.jsx:
--------------------------------------------------------------------------------
1 | import { View, Render, Dimensions, Text, ProgressBar, EAlignType, Animate, EAnimateEasingFunc } from 'lvgljs-ui';
2 | import React, { useRef, useEffect } from 'react';
3 |
4 | const { width, height } = Dimensions.window
5 |
6 | function App () {
7 | return (
8 |
9 |
19 |
20 | )
21 | };
22 |
23 | const style = {
24 | window: {
25 | width,
26 | height
27 | },
28 | bar: {
29 | 'width': 200,
30 | 'height': 20,
31 | 'border-color': 'blue',
32 | 'border-width': 2,
33 | 'padding': 6,
34 | 'border-radius': 6
35 | },
36 | indicator: {
37 | 'background-color': 'blue',
38 | 'border-radius': 3
39 | }
40 | };
41 |
42 | Render.render();
--------------------------------------------------------------------------------
/test/roller/1/index.jsx:
--------------------------------------------------------------------------------
1 | import { View, Text, Render, Dimensions, Roller, EAlignType, Button } from 'lvgljs-ui';
2 | import React, { useState } from 'react';
3 |
4 | const { width, height } = Dimensions.window
5 |
6 | const items1 = [
7 | "Apple",
8 | "Banana",
9 | "Orange",
10 | "Cherry",
11 | "Grape",
12 | "Raspberry",
13 | "Melon",
14 | "Orange",
15 | "Lemon",
16 | "Nuts",
17 | ]
18 |
19 | const items2 = [
20 | "1",
21 | "2",
22 | "3",
23 | "4",
24 | "5",
25 | "6",
26 | "7",
27 | "8",
28 | "9",
29 | ]
30 |
31 | function App () {
32 | const [list, setList] = useState(items1)
33 |
34 | return (
35 |
36 |
41 |
46 | {
55 | console.log(e.value)
56 | }}
57 | infinity={true}
58 | />
59 |
60 | )
61 | };
62 |
63 | const style = {
64 | window: {
65 | width,
66 | height
67 | },
68 | button1: {
69 | left: 5,
70 | top: 5,
71 | },
72 | button2: {
73 | left: 5,
74 | top: 45
75 | }
76 | };
77 |
78 | Render.render();
--------------------------------------------------------------------------------
/test/runtime/fetch/1/index.js:
--------------------------------------------------------------------------------
1 | const assert = require('assert')
2 |
3 | async function basicFetch() {
4 | const r = await fetch('https://httpbin.org/get');
5 | assert.eq(r.status, 200, 'status is 200');
6 | };
7 |
8 | async function abortFetch() {
9 | const controller = new AbortController();
10 | const signal = controller.signal;
11 | setTimeout(() => {
12 | controller.abort();
13 | }, 500);
14 | try {
15 | await fetch('https://httpbin.org/delay/3', { signal });
16 | } catch (e) {
17 | assert.eq(e.name, 'AbortError', 'fetch was aborted');
18 | }
19 | };
20 |
21 | async function fetchWithPostAndBody() {
22 | const data = JSON.stringify({ foo: 'bar', bar: 'baz' });
23 | const r = await fetch('https://httpbin.org/post', {
24 | method: 'POST',
25 | headers: {
26 | 'Content-Type': 'application/json'
27 | },
28 | body: data
29 | });
30 | assert.eq(r.status, 200, 'status is 200');
31 | const json = await r.json();
32 | assert.eq(json.data, data, 'sent and received data match');
33 | };
34 |
35 |
36 | (async () => {
37 | await basicFetch();
38 | await abortFetch();
39 | await fetchWithPostAndBody();
40 | })();
--------------------------------------------------------------------------------
/test/runtime/fs/01d.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lvgl/lv_binding_js/57ae57042087f617a80c06ab3526a5dd15b2d6c2/test/runtime/fs/01d.png
--------------------------------------------------------------------------------
/test/style/background/index.jsx:
--------------------------------------------------------------------------------
1 | import { View, Render, Dimensions, Text, EAlignType, Button } from 'lvgljs-ui';
2 | import React, { useState } from 'react';
3 |
4 | const { width, height } = Dimensions.window
5 |
6 | function App () {
7 |
8 | return (
9 |
10 |
16 |
17 |
18 | )
19 | };
20 |
21 | const style = {
22 | window: {
23 | width,
24 | height
25 | },
26 | view: {
27 | 'border-radius': '5px',
28 | 'background-color': 'grey',
29 | 'background-grad-color': 'blue',
30 | 'background-grad-color-dir': 'vertical',
31 | 'opacity': 1
32 | }
33 | };
34 |
35 | Render.render();
--------------------------------------------------------------------------------
/test/style/border/index.jsx:
--------------------------------------------------------------------------------
1 | import { View, Render, Dimensions, Text, EAlignType, Button } from 'lvgljs-ui';
2 | import React, { useState } from 'react';
3 |
4 | const { width, height } = Dimensions.window
5 |
6 | function App () {
7 |
8 | return (
9 |
10 |
16 |
17 |
18 | )
19 | };
20 |
21 | const style = {
22 | window: {
23 | width,
24 | height
25 | },
26 | view: {
27 | 'border-radius': '10px',
28 | 'background-color': 'grey',
29 | 'border-color': 'blue',
30 | 'border-width': 5,
31 | 'border-side': 'right-bottom',
32 | 'opacity': 1
33 | }
34 | };
35 |
36 | Render.render();
--------------------------------------------------------------------------------
/test/style/outline/index.jsx:
--------------------------------------------------------------------------------
1 | import { View, Render, Dimensions, Text, EAlignType, Button } from 'lvgljs-ui';
2 | import React, { useState } from 'react';
3 |
4 | const { width, height } = Dimensions.window
5 |
6 | function App () {
7 |
8 | return (
9 |
10 |
16 |
17 |
18 | )
19 | };
20 |
21 | const style = {
22 | window: {
23 | width,
24 | height
25 | },
26 | view: {
27 | 'border-radius': '10px',
28 | 'background-color': 'grey',
29 | 'outline-color': 'blue',
30 | 'outline-width': 2,
31 | 'outline-padding': 8,
32 | 'opacity': 1
33 | }
34 | };
35 |
36 | Render.render();
--------------------------------------------------------------------------------
/test/style/shadow/index.jsx:
--------------------------------------------------------------------------------
1 | import { View, Render, Dimensions, Text, EAlignType, Button } from 'lvgljs-ui';
2 | import React, { useState } from 'react';
3 |
4 | const { width, height } = Dimensions.window
5 |
6 | function App () {
7 |
8 | return (
9 |
10 |
16 |
17 |
18 | )
19 | };
20 |
21 | const style = {
22 | window: {
23 | width,
24 | height
25 | },
26 | view: {
27 | 'border-radius': '10px',
28 | 'background-color': 'grey',
29 | 'shadow-color': 'blue',
30 | 'shadow-width': 55,
31 | 'shadow-offset-x': 10,
32 | 'shadow-offset-y': 20,
33 | 'opacity': 1
34 | }
35 | };
36 |
37 | Render.render();
--------------------------------------------------------------------------------
/test/style/size/index.jsx:
--------------------------------------------------------------------------------
1 | import { View, Render, Dimensions, Text, EAlignType, Button } from 'lvgljs-ui';
2 | import React, { useState } from 'react';
3 |
4 | const { width, height } = Dimensions.window
5 |
6 | function App () {
7 |
8 | return (
9 |
10 |
11 | Hello
12 |
13 |
14 | )
15 | };
16 |
17 | const style = {
18 | window: {
19 | width,
20 | height
21 | },
22 | view: {
23 | 'border-radius': '5px',
24 | 'width': '150px',
25 | 'height': 'auto',
26 | 'padding': '20px 20px 20px 5px',
27 | 'left': '50%',
28 | 'top': '80px'
29 | }
30 | };
31 |
32 | Render.render();
--------------------------------------------------------------------------------
/test/style/text/index.jsx:
--------------------------------------------------------------------------------
1 | import { View, Render, Text, EAlignType, Dimensions } from 'lvgljs-ui';
2 | import React, { useState } from 'react';
3 |
4 | const { width, height } = Dimensions.window
5 |
6 | function App () {
7 |
8 | return (
9 |
10 | {`Text of a label`}
13 |
14 | )
15 | };
16 |
17 | const style = {
18 | window: {
19 | width,
20 | height
21 | },
22 | text: {
23 | 'text-color': 'blue',
24 | 'letter-spacing': 5,
25 | 'line-spacing': 20,
26 | 'text-decoration': 'underline',
27 | 'text-overflow': 'auto',
28 | 'height': 'auto',
29 | 'border-radius': '5',
30 | 'border-width': 2,
31 | 'border-color': 'blue',
32 | 'padding': 10,
33 | 'width': '150px'
34 | }
35 | };
36 |
37 | Render.render();
--------------------------------------------------------------------------------
/test/style/transition/index.jsx:
--------------------------------------------------------------------------------
1 | import { View, Render, Dimensions, Text, EAlignType, Button } from 'lvgljs-ui';
2 | import React, { useState } from 'react';
3 |
4 | const { width, height } = Dimensions.window
5 |
6 | function App () {
7 |
8 | return (
9 |
10 | {`Text of a label`}
17 |
18 | )
19 | };
20 |
21 | const style = {
22 | window: {
23 | width,
24 | height
25 | },
26 | view: {
27 | 'transition-property': 'background-color, border-color, border-width',
28 | 'transition-duration': '0.1s',
29 | 'transition-timing-function': 'linear',
30 | 'transition-delay': '0.2s',
31 | },
32 | pressedStyle: {
33 | 'border-width': 6,
34 | 'border-color': 'red',
35 | 'background-color': 'red',
36 |
37 | 'transition-property': 'background-color, border-color, border-width',
38 | 'transition-duration': '0.5s',
39 | 'transition-timing-function': 'linear',
40 | 'transition-delay': '0',
41 | }
42 | };
43 |
44 | Render.render();
--------------------------------------------------------------------------------
/test/switch/1/index.jsx:
--------------------------------------------------------------------------------
1 | import { View, Render, Dimensions, Switch, EAlignType, Button } from 'lvgljs-ui';
2 | import React, { useState } from 'react';
3 |
4 | const { width, height } = Dimensions.window
5 |
6 | function App () {
7 | return (
8 |
9 | {
11 | console.log('switch1 checked: ', e.checked)
12 | }}
13 | />
14 | {
16 | console.log('switch2 checked: ', e.checked)
17 | }}
18 | checked={true}
19 | />
20 | {
22 | console.log('switch3 checked: ', e.checked)
23 | }}
24 | disabled={true}
25 | />
26 | {
28 | console.log('switch4 checked: ', e.checked)
29 | }}
30 | checked={true}
31 | disabled={true}
32 | />
33 |
34 | )
35 | };
36 |
37 | const style = {
38 | window: {
39 | width,
40 | height,
41 | 'display': 'flex',
42 | 'flex-direction': 'column',
43 | 'justify-content': 'center',
44 | 'align-items': 'center',
45 | },
46 | };
47 |
48 | Render.render();
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "module": "NodeNext",
4 | "typeRoots": [
5 | "node_modules/@txikijs/types",
6 | "node_modules/@types"
7 | ]
8 | },
9 | "include": ["src/**/*"],
10 | "exclude": ["**/*.spec.ts"]
11 | }
--------------------------------------------------------------------------------