fixing the layout

thermostat.yml

@@ -92,7 +92,7 @@ time:
               id: time_label
               text: !lambda |-
                 auto time = id(hass_time).now();
-                return time.strftime("%a %m/%d/%y  %I:%M");
+                return time.strftime("%a %b %e, %I:%M %p");
           # - script.execute: update_date_time_label
 sensor:
   - platform: bme280_i2c
@@ -108,6 +108,10 @@ sensor:
               text: !lambda |-
                 auto temp = x * (9.0/5.0) + 32.0;
                 return str_truncate(to_string(temp), 4);
+          - lvgl.indicator.update:
+              id: current_temp_needle
+              value: !lambda |-
+                return x * 10.0;
     humidity:
       name: "Humidity"
       id: humidity
@@ -162,11 +166,27 @@ climate:
       - name: Home
         default_target_temperature_low: 67 °F
         default_target_temperature_high: 78 °F
+      - name: Summer
+        default_target_temperature_low: 60 °F
+        default_target_temperature_high: 77 °F
+      - name: Winter
+        default_target_temperature_low: 68 °F
+        default_target_temperature_high: 85 °F
       - name: Away
         default_target_temperature_low: 60 °F
         default_target_temperature_high: 85 °F
     on_state:
       then:
+        - lvgl.indicator.update:
+            id: hvac_temp_ticks
+            start_value: !lambda |-
+              return x.target_temperature_high * 10.0;
+            end_value: !lambda |-
+              return x.target_temperature_low * 10.0;
+        - lvgl.arc.update:
+            id: hvac_temp_knob
+            value: !lambda |-
+              return x.target_temperature_high * 10.0;
         - if:
             condition:
               lambda: "return x.mode != CLIMATE_MODE_OFF;"
@@ -438,19 +458,18 @@ lvgl:
   pages:
     - id: main_page
       bg_color: 0x282A36
-      layout:
-        type: flex
-        pad_row: 4
-        pad_column: 4
-        flex_align_main: CENTER
-        flex_align_cross: CENTER
-        flex_align_track: CENTER
       widgets:
         - obj:
-            align: top_mid
+            align: center
             bg_color: 0x282A36
+            border_width: 0
             height: 480
-            flex_grow: 1
+            width: 800
+            scrollable: false
+            widgets:
+              - obj:
+                  bg_color: ${color_bg}
+                  width: 100%
                   border_width: 0
                   widgets:
                     - label:
@@ -459,86 +478,16 @@ lvgl:
                         text_color: ${color_darker_white}
                         text_font: h3
                         align: top_left
-                  x: 10
-                  y: 10
                     - label:
                         id: wifi_label
                         text: "󰖩"
                         text_color: ${color_darker_white}
                         align: top_right
                         text_font: sm_icons
-                  y: 10
-                  x: -10
-              - button:
-                  id: beat_button
-                  height: 60
-                  width: 60
-                  x: 30
-                  y: 50
-                  bg_color: 0x34353e
-                  border_width: 2
-                  border_color: 0xE2E4E5
-                  radius: 20
-                  checkable: true
-                  checked:
-                    bg_color: 0xff5c57
-                  on_click:
-                    then:
-                      - switch.toggle: heater
-                  widgets:
-                    - label:
-                        text: "\U000F0238"
-                        align: center
-                        text_font: icons
-                        text_color: 0xE2E4E5
-              - button:
-                  id: k_button
-                  height: 60
-                  width: 60
-                  x: 40
-                  y: 120
-                  bg_color: 0x34353e
-                  border_width: 2
-                  border_color: 0xE2E4E5
-                  radius: 20
-                  checkable: true
-                  checked:
-                    bg_color: 0x9aedfe
-                  on_click:
-                    then:
-                      - switch.toggle: ac
-                  widgets:
-                    - label:
-                        text: "\U000F0717"
-                        align: center
-                        text_font: icons
-                        text_color: 0xE2E4E5
-              - button:
-                  id: f_button
-                  height: 60
-                  width: 60
-                  x: 40
-                  y: 200
-                  bg_color: 0x34353e
-                  border_width: 2
-                  border_color: 0xE2E4E5
-                  radius: 20
-                  checkable: true
-                  checked:
-                    bg_color: 0x9aedfe
-                  on_click:
-                    then:
-                      - switch.toggle: fan
-                  widgets:
-                    - label:
-                        text: "\U000F0717"
-                        align: center
-                        text_font: icons
-                        text_color: 0xE2E4E5
               - obj:
-            bg_color: 0x282A36
+                  bg_opa: 0
                   height: 480
-            flex_grow: 2
+                  width: 100%
                   border_width: 0
                   widgets:
                     - obj:
@@ -726,7 +675,7 @@ lvgl:
                             # Curremt temperature needle
                             - line:
                                 id: current_temp_needle
-                          color: ${color_green}
+                                color: ${color_red}
                                 width: 3
                                 r_mod: 10
                                 value: 340 # 34°C Should be the same as the current temperature label
@@ -735,8 +684,8 @@ lvgl:
                                 id: hvac_temp_ticks
                                 start_value: 160
                                 end_value: 240 # 24°C Should be the same as the set temperature label
-                          color_start: ${color_red}
+                                color_start: ${color_green}
-                          color_end: ${color_red}
+                                color_end: ${color_green}
                                 width: 2
                     # Meter inner Ring only for visual effect
                     - obj:
@@ -780,7 +729,7 @@ lvgl:
                                   - climate.control:
                                       id: climape
                                       target_temperature_high: !lambda |-
-                                  return (x - 32.0) / (9.0 / 5.0);
+                                        return x / 10;
                             - if:
                                 condition:
                                   lambda: "return id(climape).mode == CLIMATE_MODE_FAN_ONLY;"
@@ -788,7 +737,7 @@ lvgl:
                                   - climate.control:
                                       id: climape
                                       target_temperature_high: !lambda |-
-                                  return (x - 32.0) / (9.0 / 5.0);
+                                        return x / 10;
                             - if:
                                 condition:
                                   lambda: "return id(climape).mode == CLIMATE_MODE_HEAT;"
@@ -796,7 +745,7 @@ lvgl:
                                   - climate.control:
                                       id: climape
                                       target_temperature_low: !lambda |-
-                                  return (x - 32.0) / (9.0 / 5.0);
+                                        return x / 10;
               
               
               
@@ -870,3 +819,4 @@ lvgl:
                         y: -10
                         text_color: 0xE2E4E5
                       
+