When trying to compile the following
esphome:
name: pooltoy
friendly_name: PoolToy
platformio_options:
board_build.flash_mode: dio
on_boot:
- delay: 5s
- lvgl.widget.hide: boot_screen
# Enable logging
logger:
level: DEBUG
# Enable Home Assistant API
api:
encryption:
key: "jmCgYDFZCCMHuXIolnsws4oYXRb4keFvCwkx85oxHu0="
on_client_connected:
- if:
condition:
lambda: 'return (0 == client_info.find("Home Assistant "));'
then:
- lvgl.widget.show: lbl_hastatus
on_client_disconnected:
- if:
condition:
lambda: 'return (0 == client_info.find("Home Assistant "));'
then:
- lvgl.widget.hide: lbl_hastatus
ota:
- platform: esphome
password: "d34814fd15e289a7d66c34829fffe162"
wifi:
ssid: !secret wifi_ssid
password: !secret wifi_password
use_address: pooltoy.iot
# Enable fallback hotspot (captive portal) in case wifi connection fails
ap:
ssid: "Pooltoy Fallback Hotspot"
password: "senzafili"
captive_portal:
substitutions:
lightbulb: "\U000F0335"
ceiling_light: "\U000F0769"
floor_lamp: "\U000F08DD"
string_lights: "\U000F12BA"
left: "\U000F12BA"
right: "\U000F12BB"
home: "\U000F12BC"
connection: "\U000F12BD"
#-------------------------------------------
# ESPHOME PLATFORM SETTINGS
#-------------------------------------------
#esphome:
# name: 480screen
# friendly_name: 480screen
# platformio_options:
# board_build.flash_mode: dio
#-------------------------------------------
# ESP MCU SETTINGS for
# Guition ESP32-S3-4848S040
#-------------------------------------------
esp32:
board: esp32-s3-devkitc-1
variant: esp32s3
flash_size: 16MB
framework:
type: esp-idf
sdkconfig_options:
CONFIG_ESP32S3_DEFAULT_CPU_FREQ_240: "y"
CONFIG_ESP32S3_DATA_CACHE_64KB: "y"
CONFIG_ESP32S3_DATA_CACHE_LINE_64B: "y"
CONFIG_SPIRAM_FETCH_INSTRUCTIONS: y
CONFIG_SPIRAM_RODATA: y
psram:
mode: octal
speed: 80MHz
# Enable Home Assistant API
web_server:
port: 80
external_components:
- source: github://pr#6363
refresh: 10min
components: [lvgl]
time:
- platform: sntp
id: sntp_time
timezone: America/New_York
servers:
- 0.pool.ntp.org
- 1.pool.ntp.org
- 2.pool.ntp.org
on_time_sync:
- script.execute: time_update
on_time:
- minutes: '*'
seconds: 0
then:
- script.execute: time_update
script:
- id: time_update
then:
- lvgl.label.update:
id: display_time
text: !lambda |-
static char time_buf[17];
auto now = id(sntp_time).now();
bool is_pm = now.hour >= 12;
int hour_12 = now.hour % 12;
if (hour_12 == 0) {
hour_12 = 12; // 12 AM/PM should be displayed as 12, not 0
}
snprintf(time_buf, sizeof(time_buf), "%02d:%02d%s", hour_12, now.minute, is_pm ? "pm" : "am");
return time_buf;
#-------------------------------------------
# Buttons
#-------------------------------------------
switch:
- platform: lvgl
name: Kitchen
widget: lv_button_1
on_turn_on:
then:
- lvgl.widget.update:
id: lv_button_1_icon
text_color: 0xFFFF00
- homeassistant.service:
service: light.turn_on
data:
entity_id: light.cespuglio_ingresso
on_turn_off:
then:
- lvgl.widget.update:
id: lv_button_1_icon
text_color: 0xB6B6B6
- homeassistant.service:
service: light.turn_off
data:
entity_id: light.cespuglio_ingresso
- platform: lvgl
name: Outdoor
widget: lv_button_2
on_turn_on:
then:
- lvgl.widget.update:
id: lv_button_2_icon
text_color: 0xFFFF00
on_turn_off:
then:
- lvgl.widget.update:
id: lv_button_2_icon
text_color: 0xB6B6B6
#-------------------------------------------
# lvgl Buttons
#-------------------------------------------
lvgl:
# on_idle:
# timeout: 90s
# then:
# - logger.log: "LVGL is idle"
# - light.turn_off: backlight
# - lvgl.pause:
theme:
# label:
# text_font: roboto24 # set all your labels to use your custom defined font
btn:
width: 120
height: 120
bg_color: 0xFFFFFF #0x2F8CD8
bg_grad_color: 0xFFFFFF #0x005782
bg_grad_dir: VER
bg_opa: COVER
border_color: 0x0077b3
border_width: 1
text_color: 0x000000 #0xFFFFFF
pressed: # set some btn colors to be different in pressed state
bg_color: 0x006699
bg_grad_color: 0x00334d
checked: # set some btn colors to be different in checked state
bg_color: 0x1d5f96
bg_grad_color: 0x03324A
text_color: 0xfff300
btnmatrix:
bg_opa: TRANSP
border_color: 0x0077b3
border_width: 0
text_color: 0xFFFFFF
pad_all: 0
items: # set all your btnmatrix buttons to use your custom defined styles and font
bg_color: 0x2F8CD8
bg_grad_color: 0x005782
bg_grad_dir: VER
bg_opa: COVER
border_color: 0x0077b3
border_width: 1
text_color: 0xFFFFFF
# text_font: roboto24
pressed:
bg_color: 0x006699
bg_grad_color: 0x00334d
checked:
bg_color: 0x1d5f96
bg_grad_color: 0x03324A
text_color: 0x005580
switch:
bg_color: 0xC0C0C0
bg_grad_color: 0xb0b0b0
bg_grad_dir: VER
bg_opa: COVER
checked:
bg_color: 0x1d5f96
bg_grad_color: 0x03324A
bg_grad_dir: VER
bg_opa: COVER
knob:
bg_color: 0xFFFFFF
bg_grad_color: 0xC0C0C0
bg_grad_dir: VER
bg_opa: COVER
slider:
border_width: 1
border_opa: 15%
bg_color: 0xcccaca
bg_opa: 15%
indicator:
bg_color: 0x1d5f96
bg_grad_color: 0x03324A
bg_grad_dir: VER
bg_opa: COVER
knob:
bg_color: 0x2F8CD8
bg_grad_color: 0x005782
bg_grad_dir: VER
bg_opa: COVER
border_color: 0x0077b3
border_width: 1
text_color: 0xFFFFFF
style_definitions:
- id: header_footer
# text_font: light32
bg_color: 0x2F8CD8
bg_grad_color: 0x005782
bg_grad_dir: VER
bg_opa: COVER
border_width: 0
radius: 0
pad_all: 0
pad_row: 0
pad_column: 0
border_color: 0x0077b3
text_color: 0xFFFFFF
width: 100%
height: 30
displays:
- display_id: my_display
touchscreens:
- touchscreen_id: my_touchscreen
# style_definitions:
# - id: style_line
# line_color: 0x0000FF
# line_rounded: true
## line_width: 8
# - id: date_style
# text_font: roboto24
# align: center
# text_color: 0x333333
# bg_opa: cover
# radius: 4
# pad_all: 2
# theme:
# btn:
# text_font: roboto24
# scroll_on_focus: true
# radius: 25
# group: general
# width: 150
# height: 109
# pad_left: 10px
# pad_top: 10px
# pad_bottom: 10px
# pad_right: 10px
# shadow_width: 0
# bg_color: 0x313131
# text_color: 0xB6B6B6
# checked:
# bg_color: 0xCC5E14
# text_color: 0xB6B6B6
top_layer:
widgets:
- btnmatrix:
align: bottom_mid
styles: header_footer
pad_all: 0
outline_width: 0
id: top_layer
items:
styles: header_footer
rows:
- buttons:
- id: page_prev
text: "\uF053"
on_press:
then:
lvgl.page.previous:
- id: page_home
text: "\uF015"
on_press:
then:
lvgl.page.show: stato_piscina
- id: page_next
text: "\uF054"
on_press:
then:
lvgl.page.next:
- label:
text: "\uF1EB"
id: lbl_hastatus
hidden: true
align: top_right
text_align: right
text_color: 0xFFFFFF
- obj:
id: boot_screen
x: 0
y: 0
width: 100%
height: 100%
bg_color: 0xffffff
bg_opa: COVER
radius: 0
pad_all: 0
border_width: 0
widgets:
- img:
align: CENTER
src: boot_logo
- spinner:
align: CENTER
y: 150
height: 50
width: 50
spin_time: 1s
arc_length: 60deg
arc_width: 8
indicator:
arc_color: 0x18bcf2
arc_width: 8
on_press:
- lvgl.widget.hide: boot_screen
page_wrap: true
pages:
- id: stato_piscina
widgets:
- obj:
id: statoph
align: TOP_MID
styles: header_footer
widgets:
- label:
text: "Stato"
align: CENTER
text_align: CENTER
text_color: 0xFFFFFF
- obj:
id: statopp
align: CENTER
width: 480
height: 420
text_font: montserrat_26
pad_all: 0
pad_column: 0
scrollable: OFF
layout:
type: GRID
grid_rows: [ FR(52), FR(52),FR(52),FR(52),FR(52),FR(52),FR(52),FR(52)]
grid_columns: [FR(60), FR(420)]
widgets:
#ROW 1
- img:
src: temperatura_esterna
grid_cell_row_pos: 0
grid_cell_column_pos: 0
- label:
text: "Temperatura Ambiente"
text_align: RIGHT
grid_cell_row_pos: 0
grid_cell_column_pos: 1
#ROW 2
- img:
src: temperatura_acqua
grid_cell_row_pos: 1
grid_cell_column_pos: 0
- label:
text: "Temperatura Acqua"
id: lbl_temperatura_acqua
text_align: RIGHT
grid_cell_row_pos: 1
grid_cell_column_pos: 1
# ROW 3
- img:
src: raggi_uv
grid_cell_row_pos: 2
grid_cell_column_pos: 0
- obj:
grid_cell_row_pos: 2
grid_cell_column_pos: 1
width: 420
height: 52
scrollable: OFF
radius: 0
pad_all: 0
bg_opa: cover
widgets:
- obj:
x: 0
width: 84
height: 48
radius: 0
- obj:
x: 84
width: 84
height: 48
radius: 0
- obj:
x: 168
width: 84
height: 48
radius: 0
- obj:
x: 252
width: 84
height: 48
radius: 0
- obj:
x: 336
width: 84
height: 48
radius: 0
# ROW 4
- img:
src: ph
grid_cell_row_pos: 3
grid_cell_column_pos: 0
- bar:
pad_top: 5
pad_bottom: 5
grid_cell_row_pos: 3
grid_cell_column_pos: 1
id: bar_id1
align: CENTER
value: 75
min_value: 1
max_value: 100
width: 420
height: 28
radius: 0
- img:
src: orp
grid_cell_row_pos: 4
grid_cell_column_pos: 0
- label:
text: "orp"
text_align: RIGHT
grid_cell_row_pos: 4
grid_cell_column_pos: 1
- img:
src: salinita
grid_cell_row_pos: 5
grid_cell_column_pos: 0
- label:
text: "salinita"
text_align: RIGHT
grid_cell_row_pos: 5
grid_cell_column_pos: 1
- img:
src: livello_tanica
grid_cell_row_pos: 6
grid_cell_column_pos: 0
- label:
text: "Livello Tanica"
text_align: RIGHT
grid_cell_row_pos: 6
grid_cell_column_pos: 1
- img:
src: manutenzione
grid_cell_row_pos: 7
grid_cell_column_pos: 0
- label:
text: "Ultimo Controlavaggio"
text_align: RIGHT
grid_cell_row_pos: 7
grid_cell_column_pos: 1
- id: luci_e_interruttori
layout:
type: flex
flex_flow: ROW_WRAP
flex_align_main: SPACE_EVENLY
flex_align_cross: SPACE_EVENLY
widgets:
- obj:
align: TOP_MID
styles: header_footer
widgets:
- label:
text: "Luci e Interruttori"
align: CENTER
text_align: CENTER
text_color: 0xFFFFFF
- btn:
checkable: true
id: lv_button_1
widgets:
- label:
text_font: light32
align: top_left
text: $lightbulb
id: lv_button_1_icon
- label:
align: bottom_left
text: "Cespuglio Ingresso"
long_mode: dot
- btn:
checkable: true
id: lv_button_2
widgets:
- label:
text_font: light32
align: top_left
text: $string_lights
id: lv_button_2_icon
- label:
align: bottom_left
text: "Outdoor"
long_mode: dot
- btn:
checkable: true
id: lv_button_3
widgets:
#- label:
# text_font: light32
# align: top_left
# text: $floor_lamp
# id: lv_button_3_icon
#- label:
# align: bottom_left
# text: "Living Room"
# long_mode: dot
- img:
align: CENTER
src: wink
id: salinita_id
- label:
align: bottom_left
text: "Cespuglio Ingresso"
long_mode: dot
- btn:
checkable: true
id: lv_button_4
widgets:
- label:
text_font: light32
align: top_left
text: $lightbulb
id: lv_button_4_icon
- label:
align: bottom_left
text: "Accent"
long_mode: dot
- btn:
checkable: true
id: lv_button_5
widgets:
- label:
text_font: light32
align: top_left
text: $lightbulb
id: lv_button_5_icon
- label:
align: bottom_left
text: "Bed Room"
long_mode: dot
- btn:
checkable: true
id: lv_button_6
widgets:
- label:
text_font: light32
align: top_left
text: $lightbulb
id: lv_button_6_icon
- label:
id: display_time
align: bottom_left
text: "00:00am"
long_mode: dot
- btn:
checkable: true
id: lv_button_7
widgets:
- label:
text_font: light32
align: top_left
text: $lightbulb
id: lv_button_7_icon
- label:
align: bottom_left
text: "Fan"
long_mode: dot
- btn:
checkable: true
id: lv_button_8
widgets:
- label:
text_font: light32
align: top_left
text: $lightbulb
id: lv_button_8_icon
- label:
align: bottom_left
text: "Timer"
long_mode: dot
- btn:
checkable: true
id: lv_button_9
widgets:
- label:
text_font: light32
align: top_left
text: $lightbulb
id: lv_button_9_icon
- label:
align: bottom_left
text: "Lamp"
long_mode: dot
- id: musica
layout:
type: flex
flex_flow: COLUMN_WRAP
widgets:
- obj:
align: TOP_MID
styles: header_footer
widgets:
- label:
text: "Musica"
align: CENTER
text_align: CENTER
text_color: 0xFFFFFF
- bar:
x: 10
y: 100
id: bar_id
align: CENTER
width: 480
height: 100
value: 75
min_value: 1
max_value: 100
- id: sicurezza
layout:
type: flex
flex_flow: COLUMN_WRAP
widgets:
- obj:
align: TOP_MID
styles: header_footer
widgets:
- label:
text: "Sicurezza"
align: CENTER
text_align: CENTER
text_color: 0xFFFFFF
- img:
align: CENTER
src: wink
#-------------------------------------------
# Internal outputs
#-------------------------------------------
output:
# Backlight LED
- platform: ledc
pin: GPIO38
id: GPIO38
frequency: 100Hz
# Built in 240v relay
- id: internal_relay_1
platform: gpio
pin: 40
#-------------------------------------------
# Graphicsd and Fonts
#-------------------------------------------
image:
- file: https://esphome.io/_images/logo.png
id: boot_logo_original
resize: 480x480
type: RGB565
# - file: "images/001.png"
# id: wallsconce_180
# resize: 20x20
# - file: "images/carbon.jpg"
# id: wall_carbon
# resize: 480x480
# type: RGB565
# sensori
- file: "images/pooltoy/pooltoy.png"
id: boot_logo
resize: 480x480
type: RGB565
- file: "images/pooltoy/noun-grounding-rod-6993401.jpg"
id: orp_2
resize: 52x52
type: RGB565
- file: "images/pooltoy/noun-ph-5797721.jpg"
id: ph
resize: 52x52
type: RGB565
- file: "images/pooltoy/noun-soil-salinity-6490657.jpg"
id: salinita
resize: 52x52
type: RGB565
- file: "images/pooltoy/noun-temperatureexternal-6844994.jpg"
id: temperatura_esterna
resize: 52x52
type: RGB565
- file: "images/pooltoy/noun-temperature-6970346.jpg"
id: temperatura_acqua
resize: 52x52
type: RGB565
- file: "images/pooltoy/noun-uv-protection-6043887.jpg"
id: raggi_uv
resize: 52x52
type: RGB565
- file: "images/pooltoy/noun-beaker-7710.jpg"
id: livello_tanica
resize: 52x52
type: RGB565
- file: "images/pooltoy/noun-orp.jpg"
id: orp
resize: 52x52
type: RGB565
- file: "images/pooltoy/wink.png"
id: wink
resize: 52x52
type: RGB565
# Luci e Interruttori
- file: "images/pooltoy/noun-grass-5105978.jpg"
id: luci_giardino
resize: 52x52
type: RGB565
- file: "images/pooltoy/noun-olive-tree-6942066.jpg"
id: luci_ulivo
resize: 52x52
type: RGB565
- file: "images/pooltoy/noun-lamp-4897109.jpg"
id: luci_esterno_casa
resize: 52x52
type: RGB565
- file: "images/pooltoy/noun-maintenance-6731622.jpg"
id: manutenzione
resize: 52x52
type: RGB565
- file: "images/pooltoy/noun-pool-pump-6952149.jpg"
id: pompa_piscina
resize: 52x52
type: RGB565
- file: "images/pooltoy/noun-pool-6935336.jpg"
id: luci_piscina
resize: 52x52
type: RGB565
font:
- file: "fonts/materialdesignicons-webfont.ttf"
id: icons_100
size: 100
bpp: 4
glyphs: [
"\U000F0594", # clear-night
"\U000F0590", # cloudy
"\U000F0F2F", # exceptional
"\U000F0591", # fog
"\U000F0592", # hail
"\U000F0593", # lightning
"\U000F067E", # lightning-rainy
"\U000F0595", # partlycloudy
"\U000F0596", # pouring
"\U000F0597", # rainy
"\U000F0598", # snowy
"\U000F067F", # snowy-rainy
"\U000F0599", # sunny
"\U000F059D", # windy
"\U000F059E", # windy-variant
"\U000F14E4", # sunny-off
]
- file: "gfonts://Roboto"
id: roboto24
size: 24
bpp: 4
extras:
- file: 'fonts/materialdesignicons-webfont.ttf' # http://materialdesignicons.com/cdn/7.4.47/
glyphs: [
"\U000F004B",
"\U0000f0ed",
"\U000F006E",
"\U000F012C",
"\U000F179B",
"\U000F0748",
"\U000F1A1B",
"\U000F02DC",
"\U000F0A02",
"\U000F035F",
"\U000F0156",
"\U000F0C5F",
"\U000f0084",
"\U000f0091",
]
- file: 'fonts/materialdesignicons-webfont.ttf' # http://materialdesignicons.com/cdn/7.4.47/
id: weather70
size: 70
bpp: 4
glyphs: &mdi-weather-glyphs
- "\U000F0590" # mdi-weather-cloudy
- "\U000F0F2F" # mdi-weather-cloudy-alert
- "\U000F0E6E" # mdi-weather-cloudy-arrow-right
- "\U000F0591" # mdi-weather-fog
- "\U000F0592" # mdi-weather-hail
- "\U000F0F30" # mdi-weather-hazy
- "\U000F0898" # mdi-weather-hurricane
- "\U000F0593" # mdi-weather-lightning
- "\U000F067E" # mdi-weather-lightning-rainy
- "\U000F0594" # mdi-weather-clear-night
- "\U000F0F31" # mdi-weather-night-partly-cloudy
- "\U000F0595" # mdi-weather-partly-cloudy
- "\U000F0F32" # mdi-weather-partly-lightning
- "\U000F0F33" # mdi-weather-partly-rainy
- "\U000F0F34" # mdi-weather-partly-snowy
- "\U000F0F35" # mdi-weather-partly-snowy-rainy
- "\U000F0596" # mdi-weather-pouring
- "\U000F0597" # mdi-weather-rainy
- "\U000F0598" # mdi-weather-snowy
- "\U000F0F36" # mdi-weather-snowy-heavy
- "\U000F067F" # mdi-weather-snowy-rainy
- "\U000F0599" # mdi-weather-sunny
- "\U000F0F37" # mdi-weather-sunny-alert
- "\U000F14E4" # mdi-weather-sunny-off
- "\U000F059A" # mdi-weather-sunset
- "\U000F059B" # mdi-weather-sunset-down
- "\U000F059C" # mdi-weather-sunset-up
- "\U000F0F38" # mdi-weather-tornado
- "\U000F059D" # mdi-weather-windy
- "\U000F059E" # mdi-weather-windy-variant
- file: 'fonts/materialdesignicons-webfont.ttf' # http://materialdesignicons.com/cdn/7.4.47/
id: light32
size: 32
bpp: 4
glyphs: [
"\U000F0335", # mdi-lightbulb
"\U000F0769", # mdi-ceiling-light
"\U000F08DD", # mdi-floor-lamp
"\U000F12BA", # mdi-string-lights
"\U000F12BB", # mdi-string-lights
"\U000F12BC", # mdi-string-lights
"\U000F12BD", # mdi-string-lights
"\U000F12BE", # mdi-string-lights
]
- file: "gfonts://Roboto"
id: roboto10
size: 10
bpp: 4
#-------------------------------------------
# Touchscreen gt911 i2c
#-------------------------------------------
i2c:
- id: bus_a
sda: GPIO19
scl: GPIO45
#frequency: 100kHz
touchscreen:
platform: gt911
transform:
mirror_x: false
mirror_y: false
id: my_touchscreen
display: my_display
on_touch:
- logger.log:
format: Touch at (%d, %d)
args: [touch.x, touch.y]
- lambda: |-
ESP_LOGI("cal", "x=%d, y=%d, x_raw=%d, y_raw=%0d",
touch.x,
touch.y,
touch.x_raw,
touch.y_raw
);
on_release:
- if:
condition: lvgl.is_paused
then:
- logger.log: "LVGL resuming"
- lvgl.resume:
- lvgl.widget.redraw:
- light.turn_on: backlight
#-------------------------------------------
# Display st7701s spi
#-------------------------------------------
spi:
- id: lcd_spi
clk_pin: GPIO48
mosi_pin: GPIO47
display:
- platform: st7701s
id: my_display
update_interval: never
auto_clear_enabled: True
data_rate: 2MHz
spi_mode: MODE3
color_order: RGB
invert_colors: false
dimensions:
width: 480
height: 480
transform:
mirror_x: false
mirror_y: false
cs_pin: 39
# reset not defined
de_pin: 18
hsync_pin: 16
vsync_pin: 17
pclk_pin: 21
init_sequence:
- 1
- [0xFF, 0x77, 0x01, 0x00, 0x00, 0x10] # CMD2_BKSEL_BK0
- [0xCD, 0x00] # disable MDT flag
pclk_frequency: 12MHz
pclk_inverted: false
data_pins:
red:
- 11 # R1
- 12 # R2
- 13 # R3
- 14 # R4
- 0 # R5
green:
- 8 # G0
- 20 # G1
- 3 # G2
- 46 # G3
- 9 # G4
- 10 # G5
blue:
- 4 # B1
- 5 # B2
- 6 # B3
- 7 # B4
- 15 # B5
binary_sensor:
- platform: homeassistant
id: cespuglio_ingresso
entity_id: light.cespuglio_ingresso
publish_initial_state: true
on_state:
then:
lvgl.widget.update:
id: lv_button_1
state:
checked: !lambda return x;
text:
- platform: lvgl
name: fr_cond_icon
widget: lbl_temperatura_acqua
mode: text
- platform: lvgl
name: fr_cond_name
widget: lbl_temperatura_acqua
mode: text
#-------------------------------------------
# LIGHTS
#-------------------------------------------
light:
- platform: monochromatic
output: GPIO38
name: Backlight
id: backlight
restore_mode: ALWAYS_ON
# - platform: binary
# output: internal_relay_1
# name: Internal Light
# id: internal_light
# on_turn_on:
# then:
# - lvgl.widget.update:
# id: lv_button_1_icon
# text_color: 0xFFFF00
# - lvgl.widget.update:
# id: lv_button_1
# state:
# checked: true
# on_turn_off:
# then:
# - lvgl.widget.update:
# id: lv_button_1_icon
# text_color: 0xB6B6B6
# - lvgl.widget.update:
# id: lv_button_1
# state:
# checked: false
If I try to add a
bg_color:
option at the page stato_piscina - ROW 3
either at parent object or at children (as below)
- obj:
grid_cell_row_pos: 2
grid_cell_column_pos: 1
width: 420
height: 52
scrollable: OFF
radius: 0
pad_all: 0
bg_opa: cover
widgets:
- obj:
x: 0
--- bg_color: #000000
width: 84```
I get the following error
Couldn't find any component that can be used for 'Color'. Are you missing a hub declaration?.
No quick fix available
