example finalized

lvgl · Dec 12, 2024 · 8b756a8 · 8b756a8
1 parent 8623982
commit 8b756a8
Show file tree

Hide file tree

Showing 11 changed files with 114 additions and 51 deletions.
diff --git a/examples/components/buttons/button_default.xml b/examples/components/buttons/button_default.xml
@@ -1,7 +1,7 @@
 <component>
 
     <api>
-		<prop name="button_text" type="string" default="Button"/>
+		<prop name="button_label" type="string" default="Button"/>
 	</api>
 
     <styles>
@@ -21,6 +21,6 @@
     </styles>
 
     <view extends="lv_button" styles="main pr:pressed">
-        <h3 text="$button_text" align="center"/>
+        <h3 text="$button_label" align="center"/>
     </view>
 </component>
diff --git a/examples/components/buttons/button_error.xml b/examples/components/buttons/button_error.xml
@@ -1,7 +1,7 @@
 <component>
 
     <api>
-		<prop name="text" type="string" default="Button"/>
+		<prop name="button_label" type="string" default="Button"/>
 	</api>
 
     <styles>
@@ -22,6 +22,6 @@
     </styles>
 
     <view extends="lv_button" styles="main pr:pressed">
-        <h3 text="$text" align="center"/>
+        <h3 text="$button_label" align="center"/>
     </view>
 </component>
diff --git a/examples/components/buttons/button_warning.xml b/examples/components/buttons/button_warning.xml
@@ -1,7 +1,7 @@
 <component>
 
     <api>
-		<prop name="text" type="string" default="Button"/>
+		<prop name="button_label" type="string" default="Button"/>
 	</api>
 
     <styles>
@@ -11,6 +11,7 @@
         border_width="0" 
         radius="12" 
         shadow_width="0"
+        text_color="0x111111"
         />
 
         <style name="pr" 
@@ -22,6 +23,6 @@
     </styles>
 
     <view extends="lv_button" styles="main">
-        <h3 text="$text" align="center"/>
+        <h3 text="$button_label" align="center"/>
     </view>
 </component>
diff --git a/examples/components/home.xml b/examples/components/home.xml
@@ -1,7 +1,11 @@
 <component>
+    <consts>
+        <int name="slider_box_width" value="155"/>
+    </consts>
+
     <styles>
         <style name="main"
-               bg_color="0x000000"
+               bg_color="0x111111"
                radius="0" 
                border_width="0"
                layout="flex"
@@ -16,16 +20,18 @@
                flex_flow="column"
                layout="flex"
                radius="0" 
-               pad_all="0"
-               border_width="2" />
+               pad_all="0" 
+               pad_row="16"/>
 
         <style name="left_cont"
-               width="content"/>     
+               width="content"
+               border_width="0"
+               pad_all="16"/>     
 
 
         <style name="right_cont"
                layout="flex"
-               bg_opa="130"
+               bg_opa="0"
                border_width="0"
                flex_flow="column"
                flex_track_place="center"
@@ -36,22 +42,21 @@
 
     <view extends="lv_obj" styles="main"> 
         <lv_obj styles="cont left_cont">
-            <slider_box width="190"/>
-            <slider_box width="190"/>
-            <slider_box width="190"/>
-            <slider_box width="190"/>
-            <slider_box width="190"/>
-            <slider_box width="190"/>
+            <slider_box width="#slider_box_width" title="Room 1"/>
+            <slider_box width="#slider_box_width" title="Room 2"/>
+            <slider_box width="#slider_box_width" title="Room 3"/>
+            <slider_box width="#slider_box_width" title="Room 4"/>
+            <slider_box width="#slider_box_width" title="Room 5"/>
         </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" send_draw_task_events="true"/>
-            <button_warning text="First button"/>
-            <button_warning text="Second button"/>
-            <button_error text="First button"/>
-            <button_error text="Second button"/>
+            <button_default button_label="Ok"/>
+            <button_default button_label="Cancel"/>
+            <dark_slider width="100%"  color="0xf03c0f" send_draw_task_events="true"/>
+            <button_warning button_label="Alert 1"/>
+            <button_warning button_label="Alert 2"/>
+            <button_error button_label="Error 1"/>
+            <button_error button_label="Error 2"/>
         </lv_obj>
     </view>        
 </component>
diff --git a/examples/ui.c b/examples/ui.c
@@ -23,6 +23,9 @@
 /**********************
  *  STATIC VARIABLES
  **********************/
+lv_font_t * inter_sm;
+lv_font_t * inter_md;
+lv_font_t * inter_xl;
 
 /**********************
  *      MACROS
@@ -34,6 +37,14 @@
 
 void ui_init(void)
 {
+	static bool inited = false;
+	if(inited) return;
+	inited = true;
+
+	inter_sm = lv_tiny_ttf_create_file("A:/fonts/Inter-SemiBold.ttf", 14);
+	inter_md = lv_tiny_ttf_create_file("A:/fonts/Inter-SemiBold.ttf", 18);
+	inter_xl = lv_tiny_ttf_create_file("A:/fonts/Inter-SemiBold.ttf", 22);
+
 	example_init();
 }
 

diff --git a/examples/ui.h b/examples/ui.h
@@ -29,6 +29,9 @@ extern "C" {
 /**********************
  * GLOBAL VARIABLES
  **********************/
+ extern lv_font_t * inter_sm;
+ extern lv_font_t * inter_md;
+ extern lv_font_t * inter_xl;
 
 /**********************
  * GLOBAL PROTOTYPES

diff --git a/examples/widgets/dark_slider/dark_slider.xml b/examples/widgets/dark_slider/dark_slider.xml
@@ -25,6 +25,6 @@
 
     <view extends="lv_slider" 
           styles="main light_knob:knob blue_indicator:indicator" 
-          align="center" value="30" range="20 40" send_draw_task_events="true">
+          align="center" range="20 40" send_draw_task_events="true">
     </view>
 </widget>
diff --git a/examples/widgets/dark_slider/dark_slider_gen.c b/examples/widgets/dark_slider/dark_slider_gen.c
@@ -107,7 +107,7 @@ static void dark_slider_constructor(const lv_obj_class_t * class_p, lv_obj_t * o
     lv_obj_add_style(obj, &style_light_knob, LV_PART_KNOB | 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);
-
+    lv_slider_set_range(obj, 20, 40);
     dark_slider_t * dark_slider = (dark_slider_t *)obj;
 
 

diff --git a/examples/widgets/slider_box/slider_box.c b/examples/widgets/slider_box/slider_box.c
@@ -20,6 +20,8 @@
 /**********************
  *  STATIC PROTOTYPES
  **********************/
+ static void increase_event_cb(lv_event_t * e);
+ static void decerease_event_cb(lv_event_t * e);
 
 /**********************
  *  STATIC VARIABLES
@@ -35,6 +37,14 @@
 
 void slider_box_constructor_hook(lv_obj_t * obj)
 {
+    slider_box_t * slider_box = (slider_box_t *)obj;
+
+    lv_obj_add_event_cb(slider_box->lv_button, decerease_event_cb, LV_EVENT_CLICKED, slider_box->dark_slider);
+    lv_obj_add_event_cb(slider_box->lv_button,decerease_event_cb, LV_EVENT_LONG_PRESSED_REPEAT, slider_box->dark_slider);
+
+    lv_obj_add_event_cb(slider_box->lv_button2, increase_event_cb, LV_EVENT_CLICKED, slider_box->dark_slider);
+    lv_obj_add_event_cb(slider_box->lv_button2, increase_event_cb, LV_EVENT_LONG_PRESSED_REPEAT, slider_box->dark_slider);
+
 
 }
 
@@ -48,20 +58,35 @@ void slider_box_event_hook(lv_event_t * e)
 
 }
 
-
 void slider_box_set_title(lv_obj_t * obj, const char * title)
 {
-    slider_box_t * item = (slider_box_t *)obj;
-    item->title = title;
-    lv_label_set_text(item->lv_label, title);
+    slider_box_t * slider_box = (slider_box_t *)obj;
+    slider_box->title = title;
+    lv_label_set_text(slider_box->lv_label, title);
 }
 
 const char * slider_box_get_title(lv_obj_t * obj)
 {
-    slider_box_t * item = (slider_box_t *)obj;
-    return lv_label_get_text(item->lv_label);
+    slider_box_t * slider_box = (slider_box_t *)obj;
+    return lv_label_get_text(slider_box->lv_label);
 }
 
 /**********************
  *   STATIC FUNCTIONS
- **********************/
+ **********************/
+
+ static void increase_event_cb(lv_event_t * e)
+ {
+    lv_obj_t * slider = lv_event_get_user_data(e);
+
+    int32_t v = lv_slider_get_value(slider);
+    lv_slider_set_value(slider, v + 1, LV_ANIM_ON);
+ }
+
+ static void decerease_event_cb(lv_event_t * e)
+ {
+    lv_obj_t * slider = lv_event_get_user_data(e);
+
+    int32_t v = lv_slider_get_value(slider);
+    lv_slider_set_value(slider, v - 1, LV_ANIM_ON);
+ }
diff --git a/examples/widgets/slider_box/slider_box.xml b/examples/widgets/slider_box/slider_box.xml
@@ -5,29 +5,34 @@
     <styles>
         <style name="main" 
                bg_color="0x666666" bg_opa="255" 
-               border_width="2" border_color="0xaaaaaa" 
-               radius="20"
+               radius="12"
                width="180" height="content"
                layout="flex"
                flex_flow="row_wrap" 
                flex_cross_place="center" flex_track_place="center" 
-               pad_row="10"
-               pad_all="10"/> 
+               pad_row="10" 
+               pad_column="4"
+               pad_all="16"
+               text_font="inter_sm"
+               text_color="0xffffff"/> 
 
 
         <style name="button"
-               radius="100" /> 
+               radius="100" 
+               text_font="inter_xl"
+               shadow_width="0"
+               bg_color="0x222222"
+               /> 
     </styles>
     <view extends="lv_obj" styles="main" align="center"> 
-
-        <lv_button width="30"  height="30" styles="button">
-            <lv_label text="-"/>
+        <lv_button width="30" height="30" styles="button">
+            <lv_label text="-"  align="center"/>
         </lv_button>
-        <lv_label align="top_mid" text="Title" flex_grow="1" style_text_align="center" style_text_color="0x000000" width="content" long_mode="scroll"/>
+        <lv_label align="top_mid" text="Title" flex_grow="1" style_text_align="center" width="content" long_mode="scroll"/>
 
-        <lv_button styles="button">
-            <lv_label text="+"/>
+        <lv_button  width="30"  height="30" styles="button">
+            <lv_label text="+" align="center"/>
         </lv_button>
-        <dark_slider  width="100%" color="0xff00ff"/>
+        <dark_slider  width="100%" color="0x44aaff" style_margin_hor="10"/>
     </view>
 </widget>
diff --git a/examples/widgets/slider_box/slider_box_gen.c b/examples/widgets/slider_box/slider_box_gen.c
@@ -68,6 +68,7 @@ lv_obj_t * slider_box_create(lv_obj_t * parent)
 
 static void slider_box_constructor(const lv_obj_class_t * class_p, lv_obj_t * obj)
 {
+    ui_init();
     LV_UNUSED(class_p);
     LV_TRACE_OBJ_CREATE("begin");
 
@@ -80,20 +81,24 @@ static void slider_box_constructor(const lv_obj_class_t * class_p, lv_obj_t * ob
     	lv_style_init(&style_main);
     	lv_style_set_bg_color(&style_main, lv_color_hex(0x666666));
     	lv_style_set_bg_opa(&style_main, 255);
-    	lv_style_set_border_width(&style_main, 2);
-    	lv_style_set_border_color(&style_main, lv_color_hex(0xaaaaaa));
-    	lv_style_set_radius(&style_main, 20);
+    	lv_style_set_radius(&style_main, 12);
     	lv_style_set_width(&style_main, 180);
     	lv_style_set_height(&style_main, LV_SIZE_CONTENT);
     	lv_style_set_layout(&style_main, LV_LAYOUT_FLEX);
     	lv_style_set_flex_flow(&style_main, LV_FLEX_FLOW_ROW_WRAP);
     	lv_style_set_flex_cross_place(&style_main, LV_FLEX_ALIGN_CENTER);
     	lv_style_set_flex_track_place(&style_main, LV_FLEX_ALIGN_CENTER);
+    	lv_style_set_pad_column(&style_main, 4);
     	lv_style_set_pad_row(&style_main, 10);
-    	lv_style_set_pad_all(&style_main, 10);
+    	lv_style_set_pad_all(&style_main, 16);
+    	lv_style_set_text_color(&style_main, lv_color_hex(0xffffff));
+    	lv_style_set_text_font(&style_main, inter_sm);
 
     	lv_style_init(&style_button);
     	lv_style_set_radius(&style_button, 100);
+    	lv_style_set_text_font(&style_button, inter_xl);
+    	lv_style_set_bg_color(&style_button, lv_color_hex(0x222222));
+    	lv_style_set_shadow_width(&style_button, 0);
     	style_main_inited = true;
     }
 
@@ -108,6 +113,7 @@ static void slider_box_constructor(const lv_obj_class_t * class_p, lv_obj_t * ob
 
     slider_box->lv_label2 = lv_label_create(slider_box->lv_button);
     lv_label_set_text(slider_box->lv_label2, "-");
+    lv_obj_center(slider_box->lv_label2);
 
     slider_box->lv_label = lv_label_create(obj);
     lv_obj_set_align(slider_box->lv_label, LV_ALIGN_TOP_MID);
@@ -116,16 +122,23 @@ static void slider_box_constructor(const lv_obj_class_t * class_p, lv_obj_t * ob
     lv_obj_set_flex_grow(slider_box->lv_label, 1);
     lv_label_set_long_mode(slider_box->lv_label, LV_LABEL_LONG_MODE_SCROLL);
     lv_obj_set_style_text_align(slider_box->lv_label, LV_TEXT_ALIGN_CENTER, 0);
+    lv_obj_set_style_text_color(slider_box->lv_label, lv_color_hex(0xffffff), 0);
+
 
     slider_box->lv_button2 = lv_button_create(obj);
     lv_obj_add_style(slider_box->lv_button2, &style_button, LV_PART_MAIN | LV_STATE_DEFAULT);
-
+    lv_obj_set_width(slider_box->lv_button2, 30);
+    lv_obj_set_height(slider_box->lv_button2, 30);
+
     slider_box->lv_label3 = lv_label_create(slider_box->lv_button2);
     lv_label_set_text(slider_box->lv_label3, "+");
+    lv_obj_center(slider_box->lv_label3);
 
     slider_box->dark_slider = dark_slider_create(obj);
     lv_obj_set_width(slider_box->dark_slider, lv_pct(100));
-
+    lv_obj_set_style_margin_hor(slider_box->dark_slider, 8, 0);
+    dark_slider_set_color(slider_box->dark_slider, lv_color_hex(0x44aaff));
+
     slider_box_constructor_hook(obj);
 
     LV_TRACE_OBJ_CREATE("finished");