https://github.com/embeddedt/lv_css
Experimental CSS-like syntax for LVGL styles
https://github.com/embeddedt/lv_css
Last synced: about 1 year ago
JSON representation
Experimental CSS-like syntax for LVGL styles
- Host: GitHub
- URL: https://github.com/embeddedt/lv_css
- Owner: embeddedt
- License: mit
- Created: 2020-06-02T16:12:03.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2020-08-11T17:39:53.000Z (almost 6 years ago)
- Last Synced: 2025-03-01T19:02:55.262Z (over 1 year ago)
- Language: JavaScript
- Size: 21.5 KB
- Stars: 18
- Watchers: 1
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# lv_css
This is an experimental compiler that translates a CSS-like file into LVGL style function calls.
```css
/* test.css */
.testClass {
background-color: blue;
border-radius: 4px;
}
.testClass:focused, .testClass2 {
background-color: rgba(255, 0, 0, 0.1);
opacity: 0.2;
background-blend-mode: normal;
border-color: red;
}
```
```
./main.js test.css
```
```c
/*
* Autogenerated file; do not edit.
*/
lv_style_t lv_style_testClass;
lv_style_t lv_style_testClass2;
void lv_style_css_init(void) {
lv_style_init(&lv_style_testClass);
lv_style_set_bg_color(&lv_style_testClass, LV_STATE_FOCUSED, LV_COLOR_MAKE(255, 0, 0)); lv_style_set_bg_opa(&lv_style_testClass, LV_STATE_FOCUSED, 26);
lv_style_set_radius(&lv_style_testClass, LV_STATE_NORMAL, 4);
lv_style_set_opa_scale(&lv_style_testClass, LV_STATE_FOCUSED, 51);
lv_style_set_bg_blend_mode(&lv_style_testClass, LV_STATE_FOCUSED, LV_BLEND_MODE_NORMAL);
lv_style_set_border_color(&lv_style_testClass, LV_STATE_FOCUSED, LV_COLOR_MAKE(255, 0, 0)); lv_style_set_border_opa(&lv_style_testClass, LV_STATE_FOCUSED, 255);
lv_style_init(&lv_style_testClass2);
lv_style_set_bg_color(&lv_style_testClass2, LV_STATE_NORMAL, LV_COLOR_MAKE(255, 0, 0)); lv_style_set_bg_opa(&lv_style_testClass2, LV_STATE_NORMAL, 26);
lv_style_set_opa_scale(&lv_style_testClass2, LV_STATE_NORMAL, 51);
lv_style_set_bg_blend_mode(&lv_style_testClass2, LV_STATE_NORMAL, LV_BLEND_MODE_NORMAL);
lv_style_set_border_color(&lv_style_testClass2, LV_STATE_NORMAL, LV_COLOR_MAKE(255, 0, 0)); lv_style_set_border_opa(&lv_style_testClass2, LV_STATE_NORMAL, 255);
}
```