cleanup examples

lvgl · Dec 9, 2024 · 47ad4d0 · 47ad4d0
1 parent cfb85a4
commit 47ad4d0
Show file tree

Hide file tree

Showing 18 changed files with 572 additions and 57 deletions.
diff --git a/examples/components/buttons/button_default.xml b/examples/components/buttons/button_default.xml
@@ -1,11 +1,18 @@
 <component>
+
     <api>
 		<prop name="text" type="string" default="Button"/>
 	</api>
+
+    <consts>
+        <color name="dark_color" value="0x222222"/>
+    </consts>    
+
     <styles>
-        <style name="main" bg_color="0x22222" border_width="2" border_color="0x333333" radius="100"/>
+        <style name="main" bg_color="#dark_color" border_width="2" border_color="0x555555" radius="100"/>
     </styles>
-    <view extends="lv_button" styles="main" width="$my_width">
+
+    <view extends="lv_button" styles="main">
         <h2 text="$text" align="center"/>
     </view>
 </component>
diff --git a/examples/components/buttons/button_error.xml b/examples/components/buttons/button_error.xml
@@ -1,7 +1,14 @@
 <component>
+
+    <api>
+		<prop name="text" type="string" default="Button"/>
+	</api>
+
     <styles>
-        <style name="main" bg_color="0xff3322" text_color="0xffffff" border_color="0x333333" radius="100"/>
+        <style name="main" bg_color="0xff3322" border_width="2" border_color="0x555555" radius="100"/>
     </styles>
-    <view extends="button_default" styles="main" text="$text">
-    </view> 
-</component>
+
+    <view extends="lv_button" styles="main">
+        <h2 text="$text" align="center"/>
+    </view>
+</component>
diff --git a/examples/components/buttons/button_warning.xml b/examples/components/buttons/button_warning.xml
@@ -1,7 +1,14 @@
 <component>
+
+    <api>
+		<prop name="text" type="string" default="Button"/>
+	</api>
+
     <styles>
-        <style name="main" bg_color="0xffbb44" text_color="0x000000" border_color="0x333333" radius="100"/>
+        <style name="main" bg_color="0xffbb44" border_width="2" border_color="0x555555" radius="100"/>
     </styles>
-    <view extends="button_default" styles="main" text="$text">
+
+    <view extends="lv_button" styles="main">
+        <h2 text="$text" align="center"/>
     </view>
-</component>
+</component>
diff --git a/examples/components/headings/h1.xml b/examples/components/headings/h1.xml
@@ -1,7 +1,12 @@
-<component>
+<component>    
+    <api>
+		<prop name="text" type="string" default="Label"/>
+	</api>
+
     <styles>
-        <style name="main" text_font="lv_montserrat_18" />
+        <style name="main" text_font="arial_22" />
     </styles>
-    <view extends="lv_label" styles="main">
+
+    <view extends="lv_label" styles="main" text="$text">
     </view>
 </component>
diff --git a/examples/components/headings/h2.xml b/examples/components/headings/h2.xml
@@ -1,7 +1,12 @@
 <component>
+    <api>
+		<prop name="text" type="string" default="Label"/>
+	</api>
+
     <styles>
-        <style name="main" text_font="lv_montserrat_16"/>
+        <style name="main" text_font="arial_18"/>
     </styles>
+
     <view extends="lv_label" styles="main" text="$text">
     </view>
 </component>
diff --git a/examples/components/headings/h3.xml b/examples/components/headings/h3.xml
@@ -1,7 +1,12 @@
 <component>
+    <api>
+		<prop name="text" type="string" default="Label"/>
+	</api>
+
     <styles>
-        <style name="main" text_font="lv_montserrat_14" />
+        <style name="main" text_font="arial_14"/>
     </styles>
-    <view extends="lv_label" styles="main">
+
+    <view extends="lv_label" styles="main"  text="$text">
     </view>
 </component>
diff --git a/examples/components/home.xml b/examples/components/home.xml
@@ -1,11 +1,54 @@
 <component>
-    <view extends="lv_obj" width="100%" height="100%" style_radius="0" style_border_width="0">
-        <lv_obj flex_flow="column" width="50%" height="100%">
-            <slider_box title="First"/>
-            <slider_box title="Temperature of the Living room"/>
-            <slider_box title="The last one"/>
-        </lv_obj>
+    <styles>
+        <style name="main"
+               bg_color="0x000000"
+               radius="0" 
+               border_width="0"
+               layout="flex"
+               flex_flow="row"
+               width="100%" height="100%"
+               pad_all="0"
+               pad_column="0"/>
+
+        <style name="cont"
+               height="100%"
+               bg_color="0x333333"
+               flex_flow="column"
+               layout="flex"
+               radius="0" 
+               pad_all="0"
+               border_width="2" />
+
+        <style name="left_cont"
+               width="content"/>     
+
 
-        <button_error text="Default" align="center"/>
+        <style name="right_cont"
+               layout="flex"
+               bg_opa="130"
+               border_width="0"
+               flex_flow="column"
+               flex_track_place="center"
+               flex_cross_place="center"
+               pad_all="16"
+               />     
+    </styles>
+
+    <view extends="lv_obj" styles="main"> 
+        <lv_obj styles="cont left_cont">
+            <slider_box/>
+            <slider_box/>
+            <slider_box/>
+        </lv_obj>  
+
+        <lv_obj styles="cont right_cont" flex_grow="1">
+            <button_default text="First button"/>
+            <button_default text="Second button"/>
+            <dark_slider width="100" height="15" color="0xff0000"/>
+            <button_warning text="Third button"/>
+            <button_warning text="Forth button"/>
+            <button_error text="Fifth button"/>
+            <button_error text="Sixth button"/>
+        </lv_obj>
     </view>        
-</component>
+</component>
diff --git a/examples/widgets/dark_slider/dark_slider.c b/examples/widgets/dark_slider/dark_slider.c
@@ -32,6 +32,12 @@
  *   GLOBAL FUNCTIONS
  **********************/
 
+void dark_slider_set_color(lv_obj_t * obj, lv_color_t c)
+{
+    lv_obj_set_style_bg_color(obj, c, LV_PART_INDICATOR);
+    lv_obj_set_style_bg_color(obj, lv_color_darken(c, 80), LV_PART_INDICATOR | LV_STATE_PRESSED);
+}
+
 void dark_slider_constructor_hook(lv_obj_t * obj)
 {
 
@@ -44,11 +50,57 @@ void dark_slider_destructor_hook(lv_obj_t * obj)
 
 void dark_slider_event_hook(lv_event_t * e)
 {
-
+    lv_event_code_t code = lv_event_get_code(e);
+    lv_obj_t * obj = lv_event_get_target(e);
+
+    if(code == LV_EVENT_REFR_EXT_DRAW_SIZE) {
+        int32_t * s = lv_event_get_param(e);
+        *s = LV_MAX(*s, 60);
+    }
+    else if(code == LV_EVENT_DRAW_TASK_ADDED) {
+        lv_draw_task_t * draw_task = lv_event_get_param(e);
+        if(draw_task == NULL || lv_draw_task_get_type(draw_task) != LV_DRAW_TASK_TYPE_FILL) return;
+        lv_draw_rect_dsc_t * draw_rect_dsc = lv_draw_task_get_draw_dsc(draw_task);
+
+        if(draw_rect_dsc->base.part == LV_PART_KNOB && lv_obj_has_state(obj, LV_STATE_PRESSED)) {
+            char buf[8];
+            lv_snprintf(buf, sizeof(buf), "%"LV_PRId32, lv_slider_get_value(obj));
+
+            lv_point_t text_size;
+            lv_text_get_size(&text_size, buf, LV_FONT_DEFAULT, 0, 0, LV_COORD_MAX, LV_TEXT_FLAG_NONE);
+
+            lv_area_t txt_area;
+            lv_area_t draw_task_area;
+            lv_draw_task_get_area(draw_task, &draw_task_area);
+            txt_area.x1 = draw_task_area.x1 + lv_area_get_width(&draw_task_area) / 2 - text_size.x / 2;
+            txt_area.x2 = txt_area.x1 + text_size.x;
+            txt_area.y2 = draw_task_area.y1 - 10;
+            txt_area.y1 = txt_area.y2 - text_size.y;
+
+            lv_area_t bg_area;
+            bg_area.x1 = txt_area.x1 - LV_DPX(8);
+            bg_area.x2 = txt_area.x2 + LV_DPX(8);
+            bg_area.y1 = txt_area.y1 - LV_DPX(8);
+            bg_area.y2 = txt_area.y2 + LV_DPX(8);
+
+            lv_draw_rect_dsc_t rect_dsc;
+            lv_draw_rect_dsc_init(&rect_dsc);
+            rect_dsc.bg_color = lv_palette_darken(LV_PALETTE_GREY, 3);
+            rect_dsc.radius = LV_DPX(5);
+            lv_draw_rect(draw_rect_dsc->base.layer, &rect_dsc, &bg_area);
+
+            lv_draw_label_dsc_t label_dsc;
+            lv_draw_label_dsc_init(&label_dsc);
+            label_dsc.color = lv_color_white();
+            label_dsc.text = buf;
+            label_dsc.text_local = 1;
+            lv_draw_label(draw_rect_dsc->base.layer, &label_dsc, &txt_area);
+        }
+    }
 }
 
 
 
 /**********************
  *   STATIC FUNCTIONS
- **********************/
+ **********************/
diff --git a/examples/widgets/dark_slider/dark_slider.xml b/examples/widgets/dark_slider/dark_slider.xml
@@ -1,19 +1,25 @@
 <widget>
+    <api>
+        <prop name="color" type="color"/>
+    </api>
+
     <styles>
         <style name="main" 
                bg_color="0x333333" bg_opa="255" 
                border_width="2" border_color="0xaaaaaa" 
                radius="100"
                width="120"
-               pad_all="3"/> 
+               height="16"
+               pad_all="4"/> 
         <style name="light_knob" 
                bg_color="0xeeeeee" bg_opa="255" 
-               border_width="2" border_color="0xaaaaaa" pad_all="10"/>
+               border_width="2" radius="100" border_color="0xaaaaaa" pad_all="5"/>
         <style name="blue_indicator" 
-               bg_color="0x0000ff" bg_opa="255"/>
+               bg_color="0x0000ff" bg_opa="255" 
+               radius="100"/>
     </styles>
     <view extends="lv_slider" 
           styles="main light_knob:knob blue_indicator:indicator" 
-          align="center">
+          align="center" value="30" range="20 40">
     </view>
 </widget>
diff --git a/examples/widgets/dark_slider/dark_slider_gen.c b/examples/widgets/dark_slider/dark_slider_gen.c
@@ -78,8 +78,9 @@ static void dark_slider_constructor(const lv_obj_class_t * class_p, lv_obj_t * o
 
     if(!style_main_inited) {
         lv_style_init(&style_main);
-                lv_style_set_bg_color(&style_main, lv_color_hex(0x333333));
+        lv_style_set_bg_color(&style_main, lv_color_hex(0x333333));
         lv_style_set_border_width(&style_main, 2);
+        lv_style_set_bg_opa(&style_main, 255);
         lv_style_set_radius(&style_main, 100);
         style_main_inited = true;
     }
@@ -91,26 +92,29 @@ static void dark_slider_constructor(const lv_obj_class_t * class_p, lv_obj_t * o
 
     if(!style_light_knob_inited) {
         lv_style_init(&style_light_knob);
-                lv_style_set_bg_color(&style_light_knob, lv_color_hex(0xeeeeee));
+        lv_style_set_bg_color(&style_light_knob, lv_color_hex(0xeeeeee));
+        lv_style_set_bg_opa(&style_light_knob, 255);
         lv_style_set_border_width(&style_light_knob, 2);
+        lv_style_set_radius(&style_light_knob, 10);
         style_light_knob_inited = true;
     }
 
-    lv_obj_add_style(obj, &style_light_knob, LV_PART_MAIN | LV_STATE_DEFAULT);
+    lv_obj_add_style(obj, &style_light_knob, LV_PART_KNOB | LV_STATE_DEFAULT);
 
     static lv_style_t style_blue_indicator;
     static bool style_blue_indicator_inited = false;
 
     if(!style_blue_indicator_inited) {
         lv_style_init(&style_blue_indicator);
-                lv_style_set_bg_color(&style_blue_indicator, lv_color_hex(0x0000ff));
+        lv_style_set_bg_color(&style_blue_indicator, lv_color_hex(0x0000ff));
+        lv_style_set_bg_opa(&style_blue_indicator, 255);
         style_blue_indicator_inited = true;
     }
 
-    lv_obj_add_style(obj, &style_blue_indicator, LV_PART_MAIN | LV_STATE_DEFAULT);
+    lv_obj_add_style(obj, &style_blue_indicator, LV_PART_INDICATOR | LV_STATE_DEFAULT);
 
+    lv_obj_add_flag(obj, LV_OBJ_FLAG_SEND_DRAW_TASK_EVENTS);
     dark_slider_t * dark_slider = (dark_slider_t *)obj;
-
 
     dark_slider_constructor_hook(obj);
 

diff --git a/examples/widgets/dark_slider/dark_slider_gen.h b/examples/widgets/dark_slider/dark_slider_gen.h
@@ -35,7 +35,7 @@ extern "C" {
  */
 lv_obj_t * dark_slider_create(lv_obj_t * parent);
 
-
+void dark_slider_set_color(lv_obj_t * obj, lv_color_t c);
 
 
 /**********************

diff --git a/examples/widgets/dark_slider/dark_slider_xml_parser.c b/examples/widgets/dark_slider/dark_slider_xml_parser.c
@@ -39,8 +39,7 @@
 void * dark_slider_xml_create(lv_xml_parser_state_t * state, const char ** attrs)
 {
     LV_UNUSED(attrs);
-    void * item = state->item;
-
+    void * item =  dark_slider_create(lv_xml_state_get_parent(state));
     if(item == NULL) {
         LV_LOG_ERROR("Failed to create dark_slider");
         return NULL;
@@ -51,21 +50,15 @@ void * dark_slider_xml_create(lv_xml_parser_state_t * state, const char ** attrs
 
 void dark_slider_xml_apply(lv_xml_parser_state_t * state, const char ** attrs)
 {
-    void * item = dark_slider_create(lv_xml_state_get_parent(state));
 
     lv_xml_obj_apply(state, attrs);
 
-
-
+    lv_obj_t * obj = lv_xml_state_get_item(state);
     for(int i = 0; attrs[i]; i += 2) {
         const char * name = attrs[i];
-        const char * value = attrs[i + 1];
-
-
+        const char * value = attrs[i + 1];    
+        if(lv_streq(name, "color")) dark_slider_set_color(obj, lv_xml_to_color(value));    
     }
-
-
-
 }
 
 void dark_slider_register(void)
-Original file line number
+Diff line change
@@ Expand Up / @@ -35,7 +35,7 @@ extern "C" { @@
      */
     lv_obj_t * dark_slider_create(lv_obj_t * parent);
+    void dark_slider_set_color(lv_obj_t * obj, lv_color_t c);
     /**********************
@@ Expand Down @@