Skip to content

Commit 6feefb2

Browse files
f18mCopilot
f18m
and
Copilot
committed
Change from fixed coordinates to layout:horizontal for the temperature rows
Co-authored-by: Copilot <copilot@github.com>
1 parent 6fcbb5e commit 6feefb2

6 files changed

Lines changed: 115 additions & 85 deletions

‎AGENTS.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ This repository contains an ESPHome-based Home Assistant interface panel for the
2828
## Project Conventions
2929

3030
- Prefer small YAML package edits over duplicating config blocks across entrypoints.
31+
- Use 2-spaces indentation in YAML files
3132
- Keep [main.yaml](./main.yaml) and [dev-sdl.yaml](./dev-sdl.yaml) aligned for shared substitutions, colors, fonts, and UI behavior unless the difference is strictly hardware-specific.
3233
- Put hardware-specific changes in [include/hw_waveshare-esp32-s3-touch-lcd-3.5b.yaml](./include/hw_waveshare-esp32-s3-touch-lcd-3.5b.yaml) or [include/hw_sdl.yaml](./include/hw_sdl.yaml), not in LVGL page files.
3334
- Keep secrets and deployment-specific values in consumer configs or `secrets.yaml`; do not hardcode real credentials in package files.

‎dev-sdl.yaml‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -36,8 +36,8 @@ substitutions:
3636
tab_rooms_enabled: "1"
3737
tab_heating_set_temp_enabled: "1"
3838
tab_heating_details_enabled: "1"
39-
tab_cover_enabled: "0"
40-
tab_scenes_enabled: "0"
39+
tab_cover_enabled: "1"
40+
tab_scenes_enabled: "1"
4141
tab_info_enabled: "0"
4242

4343
# --------------------------------------------------------------------------
@@ -46,11 +46,11 @@ substitutions:
4646
# and Home Assistant entity IDs for its sensors/actuators.
4747
# --------------------------------------------------------------------------
4848

49-
num_rooms: '4'
49+
num_rooms: '3'
5050

5151
# Room 1
5252
room1_id: "room1"
53-
room1_name: "Room 1"
53+
room1_name: "Room 1 with Long Name"
5454
room1_ha_temperature_sensor: "sensor.room1_temperature"
5555
room1_ha_humidity_sensor: "sensor.room1_humidity"
5656
room1_ha_window_contact_sensor: "binary_sensor.room1_window_contact"
@@ -75,7 +75,7 @@ substitutions:
7575
room3_ha_floor_heating_switch: "switch.room3_floor_heating"
7676
room3_ha_cover: "cover.room3_cover"
7777

78-
# Room 4
78+
# Room 4 -- HIDDEN
7979
room4_id: "room4"
8080
room4_name: "Room 4"
8181
room4_ha_temperature_sensor: "sensor.room4_temperature"
@@ -101,6 +101,7 @@ substitutions:
101101

102102
# Current target temperature sensor
103103
ha_temperature_target_sensor: "sensor.temperature_target"
104+
temp_current_target_label: "Target Temperature"
104105

105106
# --------------------------------------------------------------------------
106107
# Scene configuration

‎include/lvgl_box_room_heating_status.yaml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ obj:
2424
width: 90
2525
#height: 50
2626
text: "${room_name}"
27-
text_font: nunito_20
27+
text_font: visuelt_20
2828
text_align: CENTER
2929
text_color: $label_title_color
3030
long_mode: WRAP

‎include/lvgl_box_room_status.yaml‎

Lines changed: 61 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,14 @@ obj:
1313
border_width: 2
1414
border_color: $border_color
1515
radius: 10
16+
scrollable: false
1617
#width: 100%
1718
width: 100
19+
layout: vertical
20+
pad_all: 5
1821
widgets:
1922
- label:
20-
x: 5
21-
y: 5
22-
width: 90
23+
#width: 90
2324
#height: 50
2425
text: "${room_name}"
2526
text_font: visuelt_20
@@ -28,58 +29,68 @@ obj:
2829
long_mode: WRAP
2930

3031
# TEMPERATURE
32+
- obj:
33+
width: 100%
34+
layout:
35+
type: flex
36+
flex_flow: row
37+
flex_align_main: center
38+
flex_align_cross: center
39+
flex_align_track: center
40+
pad_column: 4
41+
widgets:
42+
- label:
43+
width: 24 # this makes the icon a bit smaller to save some space
44+
text: "${mdi_thermometer}"
45+
text_font: $icon_font_small
46+
text_color: $icon_temp_color
3147

32-
- label:
33-
x: 0
34-
y: 70
35-
width: 50
36-
height: 40
37-
text: "${mdi_thermometer}"
38-
text_font: $icon_font_small
39-
text_color: $icon_temp_color
40-
41-
- label:
42-
id: lbl_current_temp_${room_id}
43-
x: 30
44-
y: 70
45-
width: 60
46-
height: 50
47-
text: "22.0°C"
48-
text_font: nunito_18
49-
text_color: $icon_temp_color
48+
- label:
49+
id: lbl_current_temp_${room_id}
50+
#width: 60
51+
text: "22.0°C"
52+
text_font: nunito_18
53+
text_color: $icon_temp_color
5054

5155
# HUMIDITY
52-
53-
- label:
54-
x: 0
55-
y: 110
56-
width: 50
57-
height: 40
58-
text: "${mdi_water_percent}"
59-
text_font: $icon_font_small
60-
text_color: $icon_humidity_color
61-
62-
- label:
63-
id: lbl_current_humidity_${room_id}
64-
x: 30
65-
y: 115
66-
width: 60
67-
height: 50
68-
text: "55%"
69-
text_font: nunito_18
70-
text_color: $icon_humidity_color
56+
- obj:
57+
width: 100%
58+
layout:
59+
type: flex
60+
flex_flow: row
61+
flex_align_main: center
62+
flex_align_cross: center
63+
flex_align_track: center
64+
pad_column: 4
65+
widgets:
66+
- label:
67+
width: 24 # this makes the icon a bit smaller to save some space
68+
text: "${mdi_water_percent}"
69+
text_font: $icon_font_small
70+
text_color: $icon_humidity_color
71+
- label:
72+
id: lbl_current_humidity_${room_id}
73+
#width: 60
74+
text: "55%"
75+
text_font: nunito_18
76+
text_color: $icon_humidity_color
7177

7278
# WINDOW CONTACT SENSOR
73-
74-
- label:
75-
id: lbl_icon_window_${room_id}
76-
x: 30
77-
y: 160
78-
width: 50
79-
height: 30
80-
text: "${mdi_window_closed_variant}"
81-
text_font: $icon_font_small
82-
text_color: $icon_on_color
79+
- obj:
80+
width: 100%
81+
layout:
82+
type: flex
83+
flex_flow: row
84+
flex_align_main: center
85+
flex_align_cross: center
86+
flex_align_track: center
87+
widgets:
88+
- label:
89+
id: lbl_icon_window_${room_id}
90+
width: 24 # this makes the icon a bit smaller to save some space
91+
text: "${mdi_window_closed_variant}"
92+
text_font: $icon_font_small
93+
text_color: $icon_on_color
8394

8495
# - label:
8596
# id: lbl_window_status_${room_id}

‎include/lvgl_row_current_temperature.yaml‎

Lines changed: 20 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -9,41 +9,48 @@
99
#
1010

1111
obj:
12-
x: 0
13-
y: 0
1412
width: 450
1513
height: 70
14+
layout: horizontal # a row
15+
pad_all: 5
1616
bg_color: $bg_color
1717
border_color: $border_color
1818
border_width: 2
1919
radius: 10
20+
scrollable: false
2021
widgets:
2122
- label:
22-
x: 0
23-
y: 5
24-
width: 220
25-
height: 60
26-
text: "Temperatura Target\nAttuale:"
23+
#x: 0
24+
#y: 5
25+
#width: 220
26+
height: 30
27+
flex_grow: 1 # only item that can grow in this row (horizontally)
28+
text: "${temp_current_target_label}"
2729
text_align: CENTER
2830
text_color: $label_description_color
2931
long_mode: WRAP
3032
- label:
3133
id: lbl_current_target_temperature
32-
x: 250
33-
y: 20
34-
#width: 100%
34+
#x: 250
35+
#y: 20
36+
width: 80
3537
height: 30
38+
flex_grow: 0 # do not grow at all
3639
text: "20.0°C"
3740
text_align: CENTER
3841
text_color: $label_description_color
3942
# bg color not working???
4043
#bg_color: $white
4144
- label:
4245
id: lbl_current_target_temperature_icon
43-
x: 350
44-
y: 15
46+
#x: 350
47+
#y: 15
4548
width: 40
4649
height: 30
50+
flex_grow: 0 # do not grow at all
4751
text: "${mdi_sun_thermometer}"
48-
text_font: $icon_font
52+
text_font: $icon_font_small
4953
text_color: $icon_temp_color
54+
- obj: # this is a small spacer just to avoid the icon goes too close to the border
55+
width: 10
56+
flex_grow: 0 # do not grow at all

‎include/lvgl_row_set_temperature.yaml‎

Lines changed: 26 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -10,38 +10,46 @@
1010
#
1111

1212
obj:
13-
x: 0
14-
y: 0
1513
width: 450
1614
height: 70
15+
layout: horizontal # a row
16+
pad_all: 5
1717
bg_color: $bg_color
1818
border_color: $border_color
1919
border_width: 2
2020
radius: 10
21+
scrollable: false
2122
widgets:
23+
- obj: # this is a small spacer just to avoid the icon goes too close to the border
24+
width: 10
25+
flex_grow: 0 # do not grow at all
2226
- label:
2327
id: lbl_icon_${id}
24-
x: 15
25-
y: 15
28+
#x: 15
29+
#y: 15
2630
width: 40
2731
height: 30
32+
flex_grow: 0 # do not grow at all
2833
text: "${icon}"
29-
text_font: $icon_font
34+
text_font: $icon_font_small
3035
text_color: $icon_temp_color
3136
- label:
3237
id: lbl_floor_${id}
33-
x: 80
34-
y: 20
35-
width: 170
38+
#x: 80
39+
#y: 20
40+
#width: 170
3641
height: 30
42+
#width: 100%
43+
flex_grow: 1 # only item that can grow in this row (horizontally)
3744
text: "${time_schedule}"
3845
text_color: $label_title_color
3946
- button:
4047
id: btn_spin_down_daytime_${id}
41-
x: 180
42-
y: 5
48+
#x: 180
49+
#y: 5
4350
width: 70
44-
height: 55
51+
height: 50
52+
flex_grow: 0 # do not grow at all
4553
bg_color: $icon_temp_color
4654
pressed:
4755
bg_color: darkorange
@@ -56,10 +64,11 @@ obj:
5664
align: CENTER
5765
- spinbox:
5866
id: spinbox_temperature_${id}
59-
x: 270
60-
y: 15
67+
#x: 270
68+
#y: 10
6169
width: 70
6270
height: 40
71+
flex_grow: 0 # do not grow at all
6372
value: 15
6473
range_from: 15
6574
range_to: 25
@@ -80,10 +89,11 @@ obj:
8089
value: !lambda return x;
8190
- button:
8291
id: btn_spin_up_daytime_${id}
83-
x: 355
84-
y: 5
92+
#x: 355
93+
#y: 5
8594
width: 70
86-
height: 55
95+
height: 50
96+
flex_grow: 0 # do not grow at all
8797
bg_color: $icon_temp_color
8898
pressed:
8999
bg_color: darkorange

0 commit comments

Comments
 (0)