All SDL is the same. It’s a standard library. That’s the point. Once you have it it just works. I followed the directions you link to and that’s all I did to get it working.
Simple.
1 Like
That’s interesting… .when i tested my guition i got a bunch of errors while compiling… after that i didn’t explore why, i just returned to testing/developing “in real” with my lcd…
I’ll play some more with that once…i guess if it works for you it should for me, too…
Thanks for explanation.
Hi, Me again. What do you need to change to make the weather work? I followed the instruction to setup accuweather, my weather entity is called weather_sunnyside but I wasn’t sure how to add that part into the config. at the moment the guition is showing the correct time and date but the forecast and icons are on their placeholder values. i assume i need to remove the comments in the accuweather yaml file and put my entitiy name in there but wasn’t sure of all the steps…
Thanks again for all the help with this!! My son is very pleased with his new lightswitch/night clock.
I’ve tinkered with Figma also but no easy way to convert to ESPHome…
Take a look at the homeassistant_config folder in my git repo. These are Home Assistant configs needed to get different pages working.
You need to add accuweather_forcast.yaml to your Home Assistant configs. ESPHome does not have the ability to pull arrays of data from Home Assistant. This breaks up the data from accuweather into single entries for ESPHome.
You can see where you need to add your weather sensor mine is called “weather.home”
Hi plplaaa2 I really liked your setup, have you tried it with voice assistant thanks
If you mean if you can have audio on this LCD: yes and no… I’m just playing with audio part in LVGL. Until very recently I2S audio was supposely not possible with esp-idf, only with arduino, while LVGL doesn’t run with arduino, so i was basically stuck.
Then i found merge from january, and it works with 7 inch display (esp32-8048s070) so i guess it should work with this lcd, too, but i’m afraid that you’ll have to forget relays, since audio chip uses same 3 GPIO’s as relays, so it’s either relays or audio.
If you’re up to it perhaps you could play a bit with hardware and see if you can use and re-wire sd card’s pins for any of two (since sd card is not used / not possible in esphome at the moment).
HERE are github instructions. Disregard warning:
Note that this requires changes to the core
const.pyfile from #8163, so it cannot be easily tested as an external component until that is merged! Once merged, you should be able to test if you build with the ESPHome dev branch.
since it was merged and it works.
Well, i have managed to get the hang of it. I have programmed a working display with several screens, anti burn in and idle off. I have shared the code on Git
Github Code
Thanks for al the info in the thread
2 Likes
Hi, I have a 480x480px Guiton device with ESP32-S3. How many HomeAssistant sensors can it manage? I’ve added sensors for the weather, daily forecast, hourly forecast, management of 8 blinds, 7 thermostats, 12 lights, time sensors, temperature sensors, presence sensors, doors, etc. But there comes a time when I add more sensors the device starts to fail. If I remove sensors, it works correctly again. Is there a limit? Is my project too ambitious? Thanks for your answers.
I have never found a limit and I have a lot of buttons on mine.
define “starts to fail.” what actually happens??
Can you post a link to a git repo with your code?
My code is very long. I’ll copy the main part for you so you can get an idea of the Home Assistant sensors I use.
packages:
device: !include { file: devices/Guition-esp32-4848S040.yaml }
# Común
common: !include { file: lvgl/common.yaml }
# boot screen
boot_screen_sensors: !include { file: lvgl/boot_screen/sensors.yaml }
# Sensores Encabezado
header_sensors: !include { file: lvgl/header/sensors.yaml }
# Sensores Persianas
cover_common: !include { file: lvgl/layouts/cover_common.yaml }
cover_despacho: !include { file: lvgl/layouts/cover.yaml, vars: {cover: "despacho", fname: "Despacho", entity: "cover.persiana_despacho"} }
cover_dormitorio_fran: !include { file: lvgl/layouts/cover.yaml, vars: {cover: "dormitorio_fran", fname: "Dorm. Fran", entity: "cover.persiana_dormitorio_fran"} }
cover_dormitorio_principal: !include { file: lvgl/layouts/cover.yaml, vars: {cover: "dormitorio_principal", fname: "Dorm. Principal", entity: "cover.persiana_dormitorio_principal"} }
cover_salon1: !include { file: lvgl/layouts/cover.yaml, vars: {cover: "salon1", fname: "Salón 1", entity: "cover.persiana1_salon"} }
cover_salon2: !include { file: lvgl/layouts/cover.yaml, vars: {cover: "salon2", fname: "Salón 2", entity: "cover.persiana2_salon"} }
cover_salon3: !include { file: lvgl/layouts/cover.yaml, vars: {cover: "salon3", fname: "Salón 3", entity: "cover.persiana3_salon"} }
cover_galeria: !include { file: lvgl/layouts/cover.yaml, vars: {cover: "galeria", fname: "Galería", entity: "cover.persiana4_galeria"} }
# Sensores Luces
light_rooms_sensors: !include { file: lvgl/lights/sensors.yaml }
# Sensores Termoestatos
climate_common: !include { file: lvgl/layouts/climate_common.yaml }
climate_despacho: !include { file: lvgl/layouts/climate.yaml, vars: {room: "despacho", fname: "Despacho"} }
climate_bano: !include { file: lvgl/layouts/climate.yaml, vars: {room: "bano", fname: "Baño"} }
climate_dormitorio_principal: !include { file: lvgl/layouts/climate.yaml, vars: {room: "dormitorio_principal", fname: "Dorm. Principal"} }
climate_dormitorio_fran: !include { file: lvgl/layouts/climate.yaml, vars: {room: "dormitorio_fran", fname: "Dorm. Fran"} }
climate_sotano: !include { file: lvgl/layouts/climate.yaml, vars: {room: "sotano", fname: "Sotano"} }
climate_salon: !include { file: lvgl/layouts/climate.yaml, vars: {room: "salon", fname: "Salon"} }
climate_recibidor: !include { file: lvgl/layouts/climate.yaml, vars: {room: "recibidor", fname: "Recibidor"} }
# Messages widget
# menssages_sensors: !include { file: lvgl/messages/sensors.yaml }
# Messages widget
brightness_sensors: !include { file: lvgl/brightness/sensors.yaml }
# Iconos Tiempo
weather_icons_200: !include { file: lvgl/images/images_weather.yaml, vars: {size: 200} }
weather_sensors: !include { file: lvgl/weather/sensors.yaml, vars: {size: 200} }
# Build icon set from .svg files
weather_icons_80: !include { file: lvgl/images/images_weather.yaml, vars: {size: 80 } }
weather_forcast_80_0: !include { file: lvgl/weather/forcast_sensor_day.yaml , vars: { day: 0, size: 80 }}
weather_forcast_80_1: !include { file: lvgl/weather/forcast_sensor_day.yaml , vars: { day: 1, size: 80 }}
weather_forcast_80_2: !include { file: lvgl/weather/forcast_sensor_day.yaml , vars: { day: 2, size: 80 }}
weather_forcast_80_3: !include { file: lvgl/weather/forcast_sensor_day.yaml , vars: { day: 3, size: 80 }}
weather_forcast_80_4: !include { file: lvgl/weather/forcast_sensor_day.yaml , vars: { day: 4, size: 80 }}
# weather_forcast_hour_80_0: !include { file: lvgl/weather/forcast_sensor_hour.yaml , vars: { hour: 0, size: 80 }}
# weather_forcast_hour_80_1: !include { file: lvgl/weather/forcast_sensor_hour.yaml , vars: { hour: 1, size: 80 }}
# weather_forcast_hour_80_2: !include { file: lvgl/weather/forcast_sensor_hour.yaml , vars: { hour: 2, size: 80 }}
# weather_forcast_hour_80_3: !include { file: lvgl/weather/forcast_sensor_hour.yaml , vars: { hour: 3, size: 80 }}
# weather_forcast_hour_80_4: !include { file: lvgl/weather/forcast_sensor_hour.yaml , vars: { hour: 4, size: 80 }}
# Display weather forcast using icon set (defined above)
# weather_forcast_80: !include
# file: lvgl/weather/forcast_sensors.yaml
# vars:
# size: 80
font: !include lvgl/fonts/fonts.yaml
#-------------------------------------------
# LVGL Buttons
#-------------------------------------------
lvgl:
displays:
- my_display
touchscreens:
- touchscreen_id: my_touchscreen
disp_bg_color: lightgrey
theme: !include lvgl/themes/main.yaml
style_definitions:
- <<: !include lvgl/styles/header_footer.yaml
top_layer:
widgets:
- <<: !include { file: lvgl/header/widgets.yaml }
# - <<: !include { file: lvgl/messages/widgets.yaml }
- <<: !include { file: lvgl/brightness/widgets.yaml }
- <<: !include { file: lvgl/footer/widget.yaml }
- <<: !include { file: lvgl/boot_screen/widget.yaml }
page_wrap: true
pages:
- id: pagina_principal
widgets:
- obj:
align: center
width: 204
height: 400
border_width: 0
widgets:
- <<: !include { file: lvgl/layouts/wg_cover.yaml, vars: {cover: "despacho", fname: "Despacho", entity: "cover.persiana_despacho"} }
- <<: !include { file: lvgl/layouts/wg_cover.yaml, vars: {cover: "dormitorio_fran", fname: "Dorm. Fran", entity: "cover.persiana_dormitorio_fran"} }
- <<: !include { file: lvgl/layouts/wg_cover.yaml, vars: {cover: "dormitorio_principal", fname: "Dorm. Principal", entity: "cover.persiana_dormitorio_principal"} }
- <<: !include { file: lvgl/layouts/wg_cover.yaml, vars: {cover: "salon1", fname: "Salón 1", entity: "cover.persiana1_salon"} }
- <<: !include { file: lvgl/layouts/wg_cover.yaml, vars: {cover: "salon2", fname: "Salón 2", entity: "cover.persiana2_salon"} }
- <<: !include { file: lvgl/layouts/wg_cover.yaml, vars: {cover: "salon3", fname: "Salón 3", entity: "cover.persiana3_salon"} }
- <<: !include { file: lvgl/layouts/wg_cover.yaml, vars: {cover: "galeria", fname: "Galería", entity: "cover.persiana4_galeria"} }
on_load:
- lvgl.label.update:
id: lb_header_title
text: "PERSIANAS"
- id: pag_termoestatos
widgets:
- obj:
align: center
width: 204
height: 400
border_width: 0
widgets:
- <<: !include { file: lvgl/layouts/wg_climate.yaml, vars: {room: "despacho", fname: "Despacho"} }
- <<: !include { file: lvgl/layouts/wg_climate.yaml, vars: {room: "bano", fname: "Baño"} }
- <<: !include { file: lvgl/layouts/wg_climate.yaml, vars: {room: "dormitorio_principal", fname: "Dorm. Principal"} }
- <<: !include { file: lvgl/layouts/wg_climate.yaml, vars: {room: "dormitorio_fran", fname: "Drom. Fran"} }
- <<: !include { file: lvgl/layouts/wg_climate.yaml, vars: {room: "sotano", fname: "Sotano"} }
- <<: !include { file: lvgl/layouts/wg_climate.yaml, vars: {room: "salon", fname: "Salon"} }
- <<: !include { file: lvgl/layouts/wg_climate.yaml, vars: {room: "recibidor", fname: "Recibidor"} }
on_load:
- lvgl.label.update:
id: lb_header_title
text: "TERMOESTATOS"
- id: pag_Luces_habitacion
widgets:
- <<: !include { file: lvgl/lights/widgets.yaml }
on_load:
- lvgl.label.update:
id: lb_header_title
text: "LUCES"
- id: pag_tiempo
<<: !include { file: lvgl/weather/widgets.yaml }
on_load:
- lvgl.label.update:
id: lb_header_title
text: "TIEMPO"
#-------------------------------------------
# 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: False
spi_mode: MODE3
data_rate: 2MHz
color_order: RGB
invert_colors: False
dimensions:
width: 480
height: 480
cs_pin: 39
de_pin: 18
hsync_pin: 16
vsync_pin: 17
pclk_pin: 21
pclk_frequency: 12MHz
pclk_inverted: False
hsync_pulse_width: 8
hsync_front_porch: 10
hsync_back_porch: 20
vsync_pulse_width: 8
vsync_front_porch: 10
vsync_back_porch: 10
init_sequence:
- 1
# Custom sequences are an array, first byte is command, the rest are data.
- [0xFF, 0x77, 0x01, 0x00, 0x00, 0x10] # CMD2_BKSEL_BK0
- [0xCD, 0x00] # disable MDT flag
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
Is it feasible for the hardware to handle this code comfortably?
Hey, I looked at your github pics - pretty cool! A (possibly stupid) question: how do you power it without the USB? Did you disassemble it and somehow access the board from the back? (Sorry if this question has been answered; I couldn’t easily find it.)
Ha! Thanks for the reply. So easy!
1 Like
Don’t power up by 120V and use USB at the same time. You will burn the board, applying 5V from 2 sources
2 Likes
When I add more Home Assistant sensors and upload the firmware, I get this error:
Compiling .pioenvs/gu48dormprin/src/main.cpp.o
Linking .pioenvs/gu48dormprin/firmware.elf
RAM: [= ] 13.6% (used 44512 bytes from 327680 bytes)
Flash: [===== ] 51.7% (used 4199301 bytes from 8126464 bytes)
Building .pioenvs/gu48dormprin/firmware.bin
Creating esp32s3 image...
Successfully created esp32s3 image.
esp32_create_combined_bin([".pioenvs/gu48dormprin/firmware.bin"], [".pioenvs/gu48dormprin/firmware.elf"])
Wrote 0x4114f0 bytes to file /config/.esphome/build/gu48dormprin/.pioenvs/gu48dormprin/firmware.factory.bin, ready to flash to offset 0x0
esp32_copy_ota_bin([".pioenvs/gu48dormprin/firmware.bin"], [".pioenvs/gu48dormprin/firmware.elf"])
======================== [SUCCESS] Took 227.29 seconds ========================
INFO Successfully compiled program.
INFO Connecting to 192.168.68.124 port 3232...
INFO Connected to 192.168.68.124
INFO Uploading /config/.esphome/build/gu48dormprin/.pioenvs/gu48dormprin/firmware.bin (4199664 bytes)
Uploading: [============================================================] 100% Done...
INFO Upload took 19.32 seconds, waiting for result...
INFO OTA successful
INFO Successfully uploaded program.
INFO Starting log output from 192.168.68.124 using esphome API
WARNING Can't connect to ESPHome API for gu48dormprin @ 192.168.68.124: Error connecting to [AddrInfo(family=<AddressFamily.AF_INET: 2>, type=<SocketKind.SOCK_STREAM: 1>, proto=6, sockaddr=IPv4Sockaddr(address='192.168.68.124', port=6053))]: [Errno 111] Connect call failed ('192.168.68.124', 6053) (SocketAPIError)
INFO Trying to connect to gu48dormprin @ 192.168.68.124 in the background
thanks for your reply
I posted this in my camper project topic, but am proud of what I was able to do with my camper HVAC, albeit Openhasp - yet to try esphome. A little context on my camper - I have a gas furnace, a portable electric heater which I plug in occasionally and a dumb air conditioner, each of which are controlled with a relay/switching device. I created a template switch “dual heater” which mirrors the electric heater when it’s available or the gas furnace when it’s not. I then combined the dual heater switch with the AC switch into the dual mode generic thermostat. Finally I created a multi-mode thermostat control for my guition that controls all these devices… and feels very similar to HA’s control.
6 Likes
Has anyone managed to come up with an LVGL-friendly calendar yet?
I have a template sensor in HA that produces a list of upcoming events, however I’ve had no success in getting these to place nicely with LVGL.
Hi
I have same problem my pages overlap my footer.
Any pointers.
Thats really nice can you share the code with us?