Pack style
Square Demo
Temp
23.5
°C
Humidity
58
%
Battery
87
%
Uptime
3d 14h
lvgl:
pages:
- id: component_preview
bg_color: 0x08142D
bg_opa: 100%
widgets:
- obj:
id: grid_screen
x: 0
y: 0
width: 320
height: 320
bg_color: 0x08142D
bg_opa: 100%
border_width: 0
radius: 0
widgets:
- obj:
id: hdr_shb_bar
x: 6
y: 6
width: 308
height: 36
bg_color: 0x070E1B
bg_opa: 95%
border_width: 0
radius: 0
widgets:
- label:
id: hdr_shb_title
x: 14
y: 8
width: 188
height: 20
text: 'Square Demo'
text_color: 0xF1F5F9
text_font: montserrat_16
text_align: LEFT
- label:
id: hdr_shb_batt
x: 274
y: 10
width: 20
height: 20
text: "\uF241"
text_color: 0x10B981
text_font: montserrat_14
text_align: CENTER
- label:
id: hdr_shb_wifi
x: 250
y: 10
width: 20
height: 20
text: "\uF1EB"
text_color: 0x10B981
text_font: montserrat_14
text_align: CENTER
- obj:
id: c1_ic_card
x: 6
y: 48
width: 151
height: 130
scrollbar_mode: OFF
bg_color: 0x070E1B
bg_opa: 95%
border_color: 0x162038
border_width: 1
border_opa: 20%
radius: 11
shadow_width: 0
shadow_color: 0xF59E0B
shadow_opa: 0%
widgets:
- label:
id: c1_ic_icon
x: 13
y: 11
width: 20
height: 20
text: "\uF0E7"
text_color: 0xF59E0B
text_font: montserrat_18
text_align: CENTER
long_mode: CLIP
- label:
id: c1_ic_label
x: 39
y: 11
width: 101
height: 12
text: 'Temp'
text_color: 0x8E9FB8
text_font: montserrat_8
text_align: RIGHT
long_mode: CLIP
- label:
id: c1_ic_value
x: 11
y: 57
width: 88
height: 26
text: '23.5'
text_color: 0xF1F5F9
text_font: montserrat_22
text_align: LEFT
long_mode: CLIP
- label:
id: c1_ic_unit
x: 104
y: 94
width: 36
height: 18
text: '°C'
text_color: 0x8E9FB8
text_font: montserrat_14
text_align: LEFT
long_mode: CLIP
- line:
id: c1_ic_accent
x: 11
y: 117
width: 129
height: 2
points:
- 0, 0
- 129, 0
line_color: 0xF59E0B
line_width: 2
line_rounded: true
- obj:
id: c2_ic_card
x: 163
y: 48
width: 151
height: 130
scrollbar_mode: OFF
bg_color: 0x070E1B
bg_opa: 95%
border_color: 0x162038
border_width: 1
border_opa: 20%
radius: 11
shadow_width: 0
shadow_color: 0x06B6D4
shadow_opa: 0%
widgets:
- label:
id: c2_ic_icon
x: 13
y: 11
width: 20
height: 20
text: "\uF043"
text_color: 0x06B6D4
text_font: montserrat_18
text_align: CENTER
long_mode: CLIP
- label:
id: c2_ic_label
x: 39
y: 11
width: 101
height: 12
text: 'Humidity'
text_color: 0x8E9FB8
text_font: montserrat_8
text_align: RIGHT
long_mode: CLIP
- label:
id: c2_ic_value
x: 11
y: 57
width: 88
height: 26
text: '58'
text_color: 0xF1F5F9
text_font: montserrat_22
text_align: LEFT
long_mode: CLIP
- label:
id: c2_ic_unit
x: 104
y: 94
width: 36
height: 18
text: '%'
text_color: 0x8E9FB8
text_font: montserrat_14
text_align: LEFT
long_mode: CLIP
- line:
id: c2_ic_accent
x: 11
y: 117
width: 129
height: 2
points:
- 0, 0
- 129, 0
line_color: 0x06B6D4
line_width: 2
line_rounded: true
- obj:
id: c3_ic_card
x: 6
y: 184
width: 151
height: 130
scrollbar_mode: OFF
bg_color: 0x070E1B
bg_opa: 95%
border_color: 0x162038
border_width: 1
border_opa: 20%
radius: 11
shadow_width: 0
shadow_color: 0x10B981
shadow_opa: 0%
widgets:
- label:
id: c3_ic_icon
x: 13
y: 11
width: 20
height: 20
text: "\uF241"
text_color: 0x10B981
text_font: montserrat_18
text_align: CENTER
long_mode: CLIP
- label:
id: c3_ic_label
x: 39
y: 11
width: 101
height: 12
text: 'Battery'
text_color: 0x8E9FB8
text_font: montserrat_8
text_align: RIGHT
long_mode: CLIP
- label:
id: c3_ic_value
x: 11
y: 57
width: 88
height: 26
text: '87'
text_color: 0xF1F5F9
text_font: montserrat_22
text_align: LEFT
long_mode: CLIP
- label:
id: c3_ic_unit
x: 104
y: 94
width: 36
height: 18
text: '%'
text_color: 0x8E9FB8
text_font: montserrat_14
text_align: LEFT
long_mode: CLIP
- line:
id: c3_ic_accent
x: 11
y: 117
width: 129
height: 2
points:
- 0, 0
- 129, 0
line_color: 0x10B981
line_width: 2
line_rounded: true
- obj:
id: c4_ic_card
x: 163
y: 184
width: 151
height: 130
scrollbar_mode: OFF
bg_color: 0x070E1B
bg_opa: 95%
border_color: 0x162038
border_width: 1
border_opa: 20%
radius: 11
shadow_width: 0
shadow_color: 0x8B5CF6
shadow_opa: 0%
widgets:
- label:
id: c4_ic_icon
x: 13
y: 11
width: 20
height: 20
text: "\uF021"
text_color: 0x8B5CF6
text_font: montserrat_18
text_align: CENTER
long_mode: CLIP
- label:
id: c4_ic_label
x: 39
y: 11
width: 101
height: 12
text: 'Uptime'
text_color: 0x8E9FB8
text_font: montserrat_8
text_align: RIGHT
long_mode: CLIP
- label:
id: c4_ic_value
x: 11
y: 57
width: 88
height: 26
text: '3d 14h'
text_color: 0xF1F5F9
text_font: montserrat_22
text_align: LEFT
long_mode: CLIP
- label:
id: c4_ic_unit
x: 104
y: 94
width: 36
height: 18
text: ''
text_color: 0x8E9FB8
text_font: montserrat_14
text_align: LEFT
long_mode: CLIP
- line:
id: c4_ic_accent
x: 11
y: 117
width: 129
height: 2
points:
- 0, 0
- 129, 0
line_color: 0x8B5CF6
line_width: 2
line_rounded: true320 × 320
Presets2
Dimensions
1:1 square
Width
px
Height
320px
Padding
px
Gap
px
Free Square Demo (1:1) - ESPHome LVGL Dashboard Scene for ESP32
Square 1:1 free demo scene using Header Bar and four Info Cards. Made for 320x320 round/square demos and quick landing-page previews.
Use the live preview to tweak parameters, then click Open in Designer to drop Free Square Demo (1:1) into your project. The designer exports clean ESPHome LVGL YAML you can paste into any ESP32 firmware configuration - works with ILI9341, ST7789, ST7796, GC9A01 and other supported displays.
Related: dashboard, scene, showcase, free, 1:1, square, demo.
Available in Free Components packBuilt from
Need help with the YAML?
Step-by-step guide
Getting started with ESPHome + LVGL