redesign 1

lvgl · Dec 12, 2024 · 8623982 · 8623982
1 parent 060aadf
commit 8623982
Show file tree

Hide file tree

Showing 13 changed files with 98 additions and 50 deletions.
diff --git a/examples/components/buttons/button_default.xml b/examples/components/buttons/button_default.xml
@@ -1,18 +1,26 @@
 <component>
 
     <api>
-		<prop name="text" type="string" default="Button"/>
+		<prop name="button_text" type="string" default="Button"/>
 	</api>
 
-    <consts>
-        <color name="dark_color" value="0x222222"/>
-    </consts>    
-
     <styles>
-        <style name="main" bg_color="#dark_color" border_width="2" radius="100"/>
+        <style name="main" 
+        bg_color="0x222222" 
+        pad_hor="24" pad_ver="12"  
+        border_width="0" 
+        radius="12" 
+        shadow_width="0"
+        />
+        <style name="pr" 
+        bg_color="0x333333" 
+        shadow_width="20"
+        shadow_color="0x000000"
+        shadow_opa="40"
+        />
     </styles>
 
-    <view extends="lv_button" styles="main">
-        <h2 text="$text" align="center"/>
+    <view extends="lv_button" styles="main pr:pressed">
+        <h3 text="$button_text" align="center"/>
     </view>
 </component>
diff --git a/examples/components/buttons/button_error.xml b/examples/components/buttons/button_error.xml
@@ -5,10 +5,23 @@
 	</api>
 
     <styles>
-        <style name="main" bg_color="0xff3322" border_width="2" border_color="0x555555" radius="100"/>
+        <style name="main" 
+        bg_color="0xf03c0f" 
+        pad_hor="24" pad_ver="12"  
+        border_width="0" 
+        radius="12" 
+        shadow_width="0"
+        />
+
+        <style name="pr" 
+        bg_color="0xfc5f38" 
+        shadow_width="20"
+        shadow_color="0x000000"
+        shadow_opa="40"
+        />
     </styles>
 
-    <view extends="lv_button" styles="main">
-        <h2 text="$text" align="center"/>
+    <view extends="lv_button" styles="main pr:pressed">
+        <h3 text="$text" align="center"/>
     </view>
 </component>
diff --git a/examples/components/buttons/button_warning.xml b/examples/components/buttons/button_warning.xml
@@ -5,10 +5,23 @@
 	</api>
 
     <styles>
-        <style name="main" bg_color="0xff9900" border_width="2"  radius="100"/>
+        <style name="main" 
+        bg_color="0xf0b005" 
+        pad_hor="24" pad_ver="12"  
+        border_width="0" 
+        radius="12" 
+        shadow_width="0"
+        />
+
+        <style name="pr" 
+        bg_color="0xf9ca4e" 
+        shadow_width="20"
+        shadow_color="0x000000"
+        shadow_opa="40"
+        />
     </styles>
 
     <view extends="lv_button" styles="main">
-        <h2 text="$text" align="center"/>
+        <h3 text="$text" align="center"/>
     </view>
 </component>
diff --git a/examples/components/headings/h1.xml b/examples/components/headings/h1.xml
@@ -4,7 +4,7 @@
 	</api>
 
     <styles>
-        <style name="main" text_font="arial_22" />
+        <style name="main" text_font="inter_xl"/>
     </styles>
 
     <view extends="lv_label" styles="main" text="$text">

diff --git a/examples/components/headings/h2.xml b/examples/components/headings/h2.xml
@@ -4,7 +4,7 @@
 	</api>
 
     <styles>
-        <style name="main" text_font="arial_18"/>
+        <style name="main" text_font="inter_md"/>
     </styles>
 
     <view extends="lv_label" styles="main" text="$text">

diff --git a/examples/components/headings/h3.xml b/examples/components/headings/h3.xml
@@ -4,7 +4,7 @@
 	</api>
 
     <styles>
-        <style name="main" text_font="arial_14"/>
+        <style name="main" text_font="inter_sm"/>
     </styles>
 
     <view extends="lv_label" styles="main"  text="$text">

diff --git a/examples/components/scratchpad.xml b/examples/components/scratchpad.xml
@@ -0,0 +1,18 @@
+
+<component>
+    <consts>
+        <int name="long" value="250"/>
+    </consts>
+
+    <view extends="lv_obj" width="100%" height="100%" flex_flow="column">
+        <button_default width="#long" button_text="Hello"/>
+        <button_default width="#long" button_text="Hello"/>
+        <button_default width="#long" button_text="Hello"/>
+        <button_error width="#long" button_text="Hello"/>
+        <button_warning width="#long" button_text="Hello"/>
+        <button_default width="#long" button_text="Hello"/>
+        <button_default width="#long" button_text="Hello"/>
+        <button_default width="#long" button_text="Hello"/>
+        <button_default width="#long" button_text="Hello"/>
+    </view>        
+</component>
diff --git a/examples/fonts/Inter-SemiBold.ttf b/examples/fonts/Inter-SemiBold.ttf
diff --git a/examples/fonts/arial.ttf b/examples/fonts/arial.ttf
diff --git a/examples/globals.xml b/examples/globals.xml
@@ -4,8 +4,8 @@
         <data name="wink" src_path="A:/images/wink.png" file_format="png"/>
     </images>
      <fonts>
-        <tinyttf name="arial_14" src_path="A:/fonts/arial.ttf" size="14"/>
-        <tinyttf name="arial_18" src_path="A:/fonts/arial.ttf" size="18"/>
-        <tinyttf name="arial_22" src_path="A:/fonts/arial.ttf" size="22"/>
+        <tinyttf name="inter_sm" src_path="A:/fonts/Inter-SemiBold.ttf" size="14"/>
+        <tinyttf name="inter_md" src_path="A:/fonts/Inter-SemiBold.ttf" size="18"/>
+        <tinyttf name="inter_xl" src_path="A:/fonts/Inter-SemiBold.ttf" size="22"/>
     </fonts>   
 </globals>
diff --git a/examples/widgets/dark_slider/dark_slider.xml b/examples/widgets/dark_slider/dark_slider.xml
@@ -5,18 +5,22 @@
 
     <styles>
         <style name="main" 
-               bg_color="0x333333" bg_opa="255" 
-               border_width="2" border_color="0xaaaaaa" 
+               bg_color="0x333333" bg_opa="255"  
                radius="10"
                width="120"
-               height="16"
-               pad_all="4"/> 
+               height="10"
+               pad_all="0"/> 
         <style name="light_knob" 
                bg_color="0xeeeeee" bg_opa="255" 
-               border_width="2" radius="100" border_color="0xaaaaaa" pad_all="5"/>
+               shadow_width="20"
+               shadow_opa="120"
+               shadow_offset_y="2" 
+               radius="100" 
+               pad_all="5"/>
         <style name="blue_indicator" 
                bg_color="0x0000ff" bg_opa="255" 
-               radius="100"/>
+               radius="100"
+               />
     </styles>
 
     <view extends="lv_slider" 

diff --git a/examples/widgets/dark_slider/dark_slider_gen.c b/examples/widgets/dark_slider/dark_slider_gen.c
@@ -81,18 +81,19 @@ static void dark_slider_constructor(const lv_obj_class_t * class_p, lv_obj_t * o
         lv_style_init(&style_main);
         lv_style_set_bg_color(&style_main, lv_color_hex(0x333333));
         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, 100);
+        lv_style_set_radius(&style_main, 10);
         lv_style_set_width(&style_main, 120);
-        lv_style_set_height(&style_main, 16);
+        lv_style_set_height(&style_main, 10);
+        lv_style_set_pad_all(&style_main, 0);
 
         lv_style_init(&style_light_knob);
         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_shadow_width(&style_light_knob, 20);
+        lv_style_set_shadow_opa(&style_light_knob, 120);
+        lv_style_set_shadow_offset_y(&style_light_knob, 2);
+        lv_style_set_pad_all(&style_light_knob, 5);
         lv_style_set_radius(&style_light_knob, 100);
-        lv_style_set_border_color(&style_light_knob, lv_color_hex(0xaaaaaa));
 
         lv_style_init(&style_blue_indicator);
         lv_style_set_bg_color(&style_blue_indicator, lv_color_hex(0x0000ff));

diff --git a/examples/widgets/slider_box/slider_box.xml b/examples/widgets/slider_box/slider_box.xml
@@ -9,34 +9,25 @@
                radius="20"
                width="180" height="content"
                layout="flex"
-               flex_flow="column" 
+               flex_flow="row_wrap" 
                flex_cross_place="center" flex_track_place="center" 
                pad_row="10"
                pad_all="10"/> 
 
-        <style name="transp_cont"
-               bg_opa="0"
-               border_width="1" 
-               layout="flex"
-               flex_flow="row" flex_cross_place="center"
-               pad_column="15"
-               pad_all="2"/> 
-
+
         <style name="button"
                radius="100" /> 
     </styles>
     <view extends="lv_obj" styles="main" align="center"> 
 
-        <lv_label align="top_mid" text="$title" style_text_color="0x000000" width="content" long_mode="scroll"/>
+        <lv_button width="30"  height="30" styles="button">
+            <lv_label text="-"/>
+        </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_obj width="100%" height="content" styles="transp_cont">
-            <lv_button width="30"  height="30" styles="button">
-                <lv_label text="-"/>
-            </lv_button>
-            <dark_slider  flex_grow="1" color="0xff00ff"/>
-            <lv_button styles="button">
-                <lv_label text="+"/>
-            </lv_button>
-        </lv_obj>
+        <lv_button styles="button">
+            <lv_label text="+"/>
+        </lv_button>
+        <dark_slider  width="100%" color="0xff00ff"/>
     </view>
 </widget>