Pack style
lvgl:
pages:
- id: component_preview
bg_color: 0x08142D
bg_opa: 100%
widgets:
- obj:
id: grid_screen
x: 0
y: 0
width: 480
height: 320
bg_color: 0x08142D
bg_opa: 100%
border_width: 0
radius: 0
scrollbar_mode: "OFF"
widgets:
- obj:
id: hdr_shb_bar
x: 4
y: 4
width: 472
height: 36
scrollbar_mode: "OFF"
bg_color: 0x070E1B
bg_opa: 95%
border_width: 0
radius: 0
widgets:
- label:
id: hdr_shb_title
x: 14
y: 8
width: 352
height: 20
text: 'Component Gallery'
text_color: 0xF1F5F9
text_font: montserrat_16
long_mode: CLIP
text_align: LEFT
- label:
id: hdr_shb_batt
x: 438
y: 10
width: 20
height: 20
text: "\uF241"
text_color: 0x10B981
text_font: montserrat_14
long_mode: CLIP
text_align: CENTER
- label:
id: hdr_shb_wifi
x: 414
y: 10
width: 20
height: 20
text: "\uF1EB"
text_color: 0x10B981
text_font: montserrat_14
long_mode: CLIP
text_align: CENTER
- obj:
id: ms1_ms_card
x: 4
y: 44
width: 234
height: 36
scrollbar_mode: OFF
bg_color: 0x070E1B
bg_opa: 95%
border_color: 0x162038
border_width: 1
border_opa: 20%
radius: 9
shadow_width: 0
shadow_color: 0xF59E0B
shadow_opa: 0%
widgets:
- label:
id: ms1_ms_icon
x: 10
y: 9
width: 18
height: 18
text: "\uF0E7"
text_color: 0xF59E0B
text_font: montserrat_14
text_align: CENTER
long_mode: CLIP
- label:
id: ms1_ms_value
x: 34
y: 7
width: 154
height: 22
text: '23.5'
text_color: 0xF1F5F9
text_font: montserrat_18
text_align: LEFT
long_mode: CLIP
- label:
id: ms1_ms_unit
x: 193
y: 11
width: 32
height: 14
text: '°C'
text_color: 0x8E9FB8
text_font: montserrat_10
text_align: LEFT
long_mode: CLIP
- obj:
id: ms2_ms_card
x: 242
y: 44
width: 234
height: 36
scrollbar_mode: OFF
bg_color: 0x070E1B
bg_opa: 95%
border_color: 0x162038
border_width: 1
border_opa: 20%
radius: 9
shadow_width: 0
shadow_color: 0x06B6D4
shadow_opa: 0%
widgets:
- label:
id: ms2_ms_icon
x: 10
y: 9
width: 18
height: 18
text: "\uF043"
text_color: 0x06B6D4
text_font: montserrat_14
text_align: CENTER
long_mode: CLIP
- label:
id: ms2_ms_value
x: 34
y: 7
width: 154
height: 22
text: '58'
text_color: 0xF1F5F9
text_font: montserrat_18
text_align: LEFT
long_mode: CLIP
- label:
id: ms2_ms_unit
x: 193
y: 11
width: 32
height: 14
text: '%'
text_color: 0x8E9FB8
text_font: montserrat_10
text_align: LEFT
long_mode: CLIP
- obj:
id: ic1_ic_card
x: 4
y: 84
width: 234
height: 84
scrollbar_mode: OFF
bg_color: 0x070E1B
bg_opa: 95%
border_color: 0x162038
border_width: 1
border_opa: 20%
radius: 12
shadow_width: 0
shadow_color: 0x10B981
shadow_opa: 0%
widgets:
- label:
id: ic1_ic_icon
x: 14
y: 12
width: 22
height: 22
text: "\uF241"
text_color: 0x10B981
text_font: montserrat_18
text_align: CENTER
long_mode: CLIP
- label:
id: ic1_ic_label
x: 42
y: 13
width: 180
height: 12
text: 'Battery'
text_color: 0x8E9FB8
text_font: montserrat_8
text_align: RIGHT
long_mode: CLIP
- label:
id: ic1_ic_value
x: 12
y: 34
width: 165
height: 28
text: '87'
text_color: 0xF1F5F9
text_font: montserrat_24
text_align: LEFT
long_mode: CLIP
- label:
id: ic1_ic_unit
x: 182
y: 47
width: 40
height: 18
text: '%'
text_color: 0x8E9FB8
text_font: montserrat_14
text_align: LEFT
long_mode: CLIP
- line:
id: ic1_ic_accent
x: 12
y: 70
width: 210
height: 2
points:
- 0, 0
- 210, 0
line_color: 0x10B981
line_width: 2
line_rounded: true
- obj:
id: ic2_ic_card
x: 242
y: 84
width: 234
height: 84
scrollbar_mode: OFF
bg_color: 0x070E1B
bg_opa: 95%
border_color: 0x162038
border_width: 1
border_opa: 20%
radius: 12
shadow_width: 0
shadow_color: 0x8B5CF6
shadow_opa: 0%
widgets:
- label:
id: ic2_ic_icon
x: 14
y: 12
width: 22
height: 22
text: "\uF013"
text_color: 0x8B5CF6
text_font: montserrat_18
text_align: CENTER
long_mode: CLIP
- label:
id: ic2_ic_label
x: 42
y: 13
width: 180
height: 12
text: 'Uptime'
text_color: 0x8E9FB8
text_font: montserrat_8
text_align: RIGHT
long_mode: CLIP
- label:
id: ic2_ic_value
x: 12
y: 34
width: 165
height: 28
text: '3d 14h'
text_color: 0xF1F5F9
text_font: montserrat_24
text_align: LEFT
long_mode: CLIP
- label:
id: ic2_ic_unit
x: 182
y: 47
width: 40
height: 18
text: ''
text_color: 0x8E9FB8
text_font: montserrat_14
text_align: LEFT
long_mode: CLIP
- line:
id: ic2_ic_accent
x: 12
y: 70
width: 210
height: 2
points:
- 0, 0
- 210, 0
line_color: 0x8B5CF6
line_width: 2
line_rounded: true
- obj:
id: sw_rs1_card
x: 4
y: 172
width: 234
height: 56
scrollbar_mode: OFF
bg_color: 0x070E1B
bg_opa: 95%
border_color: 0x162038
border_width: 1
border_opa: 20%
radius: 16
shadow_width: 0
shadow_color: 0x10B981
shadow_opa: 0%
widgets:
- bar:
id: sw_rs1_bar
x: 4
y: 12
width: 3
height: 32
value: 100
min_value: 0
max_value: 100
bg_color: 0x0F1929
bg_opa: 100%
indicator:
bg_color: 0x10B981
bg_opa: 80%
radius: 16
- led:
id: sw_rs1_led
x: 19
y: 24
width: 8
height: 8
color: 0x10B981
brightness: 70%
border_width: 0
radius: 50
shadow_width: 12
shadow_color: 0x10B981
- label:
id: sw_rs1_lbl_name
x: 39
y: 18
width: 133
height: 18
text: 'Living Room'
text_color: 0xF1F5F9
text_font: montserrat_14
text_align: LEFT
long_mode: CLIP
- label:
id: sw_rs1_lbl_sub
x: 39
y: 38
width: 133
height: 14
text: '3 devices on'
text_color: 0x8E9FB8
text_font: montserrat_10
text_align: LEFT
long_mode: CLIP
- switch:
id: sw_rs1_sw
x: 174
y: 14
width: 48
height: 28
bg_color: 0x0F1929
bg_opa: 100%
radius: 11
indicator:
bg_color: 0x10B981
bg_opa: 100%
knob:
bg_color: 0xFFFFFF
bg_opa: 100%
radius: 100%
- obj:
id: mb_mb1_card
x: 242
y: 172
width: 234
height: 56
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: 0x3B82F6
shadow_opa: 0%
widgets:
- label:
id: mb_mb1_lbl_name
x: 10
y: 10
width: 168
height: 12
text: 'WiFi Signal'
text_color: 0xF1F5F9
text_font: montserrat_8
text_align: LEFT
long_mode: CLIP
- label:
id: mb_mb1_lbl_value
x: 182
y: 9
width: 42
height: 14
text: '-42 dBm'
text_color: 0x3B82F6
text_font: montserrat_8
text_align: RIGHT
long_mode: CLIP
- bar:
id: mb_mb1_bar
x: 10
y: 25
width: 214
height: 6
value: 78
min_value: 0
max_value: 100
bg_color: 0x0F1929
bg_opa: 100%
indicator:
bg_color: 0x3B82F6
bg_opa: 80%
radius: 3
- label:
id: mb_mb1_lbl_sub
x: 10
y: 35
width: 214
height: 8
text: 'Connected'
text_color: 0x8E9FB8
text_font: montserrat_8
text_align: LEFT
long_mode: CLIP
- obj:
id: dm_dm_card
x: 4
y: 232
width: 472
height: 84
scrollbar_mode: OFF
bg_color: 0x070E1B
bg_opa: 95%
border_color: 0x162038
border_width: 1
border_opa: 20%
radius: 20
shadow_width: 0
shadow_color: 0xFBBF24
shadow_opa: 0%
widgets:
- bar:
id: dm_dm_bar_accent
x: 10
y: 10
width: 4
height: 64
value: 100
min_value: 0
max_value: 100
bg_color: 0x0F1929
bg_opa: 100%
indicator:
bg_color: 0xFBBF24
bg_opa: 80%
radius: 3
- label:
id: dm_dm_lbl_room
x: 20
y: 12
width: 356
height: 20
text: 'Desk Lamp'
text_color: 0xF1F5F9
text_font: montserrat_16
text_align: LEFT
long_mode: CLIP
- label:
id: dm_dm_lbl_pct
x: 382
y: 7
width: 80
height: 28
text: '65%'
text_color: 0xFBBF24
text_font: montserrat_24
text_align: RIGHT
long_mode: CLIP
- label:
id: dm_dm_lbl_sub
x: 20
y: 38
width: 442
height: 14
text: 'Brightness'
text_color: 0x8E9FB8
text_font: montserrat_10
text_align: LEFT
long_mode: CLIP
- slider:
id: dm_dm_slider
x: 20
y: 58
width: 442
height: 16
value: 38
min_value: 0
max_value: 100
bg_color: 0x0F1929
border_width: 0
indicator:
bg_color: 0xFBBF24
bg_opa: 80%
radius: 8
knob:
bg_color: 0xFFFFFF
bg_opa: 100%
border_width: 0
radius: 50
pad_all: 0
animated: true480 × 320
Presets3
Dimensions
Width
px
Height
px
Padding
px
Gap
px
Wide landscape gallery with every major free component - Header Bar, Mini Sensor, Info Card, Switch Card, Dimmer Card, and Metric Bar. For ILI9488 landscape and similar 3:2 displays.
Built from
header-bar