-
-
Save clydebarrow/9d2cffd739cb844e9d6d5005fd29518d to your computer and use it in GitHub Desktop.
| # Gitignore settings for ESPHome | |
| # This is an example and may include too much for your use-case. | |
| # You can modify this file to suit your needs. | |
| /.esphome/ | |
| /secrets.yaml | |
| /wifi.yaml |
| # Before asking any questions - read the docs!: https://deploy-preview-3510--esphome.netlify.app/components/lvgl.html | |
| esphome: | |
| name: t-embed | |
| friendly_name: LVGL Test on T-Embed | |
| platformio_options: | |
| board_build.flash_mode: dio | |
| esp32: | |
| board: esp32-s3-devkitc-1 | |
| variant: esp32s3 | |
| framework: | |
| type: esp-idf | |
| logger: | |
| level: DEBUG | |
| hardware_uart: USB_SERIAL_JTAG | |
| ota: | |
| password: !secret ota_password | |
| wifi: !include wifi.yaml | |
| external_components: | |
| - source: github://clydebarrow/esphome@lvgl | |
| components: [ lvgl ] | |
| power_supply: | |
| - id: power_on | |
| enable_on_boot: true | |
| pin: | |
| ignore_strapping_warning: true | |
| number: GPIO46 | |
| spi: | |
| clk_pin: GPIO12 | |
| mosi_pin: GPIO11 | |
| interface: hardware | |
| output: | |
| - platform: ledc | |
| pin: | |
| number: GPIO15 | |
| id: backlight_output | |
| light: | |
| - platform: monochromatic | |
| output: backlight_output | |
| name: LCD Backlight | |
| id: led | |
| restore_mode: ALWAYS_ON | |
| default_transition_length: 0s | |
| display: | |
| - platform: ili9xxx | |
| id: lcd_display | |
| model: st7789v | |
| dimensions: | |
| height: 170 | |
| width: 320 | |
| offset_height: 35 | |
| offset_width: 0 | |
| transform: | |
| swap_xy: true | |
| mirror_x: false | |
| mirror_y: true | |
| data_rate: 80MHz | |
| cs_pin: 10 | |
| dc_pin: GPIO13 | |
| reset_pin: GPIO9 | |
| update_interval: never | |
| auto_clear_enabled: false | |
| invert_colors: true | |
| sensor: | |
| - platform: rotary_encoder | |
| name: "Rotary Encoder" | |
| id: encoder | |
| pin_a: 2 | |
| pin_b: 1 | |
| internal: true | |
| binary_sensor: | |
| - platform: gpio | |
| id: pushbutton | |
| name: Pushbutton | |
| pin: | |
| number: 0 | |
| inverted: true | |
| ignore_strapping_warning: true | |
| time: | |
| - platform: sntp | |
| id: time_comp | |
| on_time_sync: | |
| then: | |
| - script.execute: time_update | |
| script: | |
| - id: time_update | |
| then: | |
| - lvgl.indicator.line.update: | |
| id: minute_hand | |
| value: !lambda |- | |
| return id(time_comp).now().minute; | |
| - lvgl.indicator.line.update: | |
| id: hour_hand | |
| value: !lambda |- | |
| auto now = id(time_comp).now(); | |
| return std::fmod(now.hour, 12) * 60 + now.minute; | |
| - lvgl.label.update: | |
| id: date_label | |
| text: !lambda |- | |
| static const char * const mon_names[] = {"JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"}; | |
| static char date_buf[8]; | |
| auto now = id(time_comp).now(); | |
| snprintf(date_buf, sizeof(date_buf), "%s %2d", mon_names[now.month-1], now.day_of_month); | |
| return date_buf; | |
| - lvgl.label.update: | |
| id: day_label | |
| text: !lambda |- | |
| static const char * const day_names[] = {"SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"}; | |
| return day_names[id(time_comp).now().day_of_week-1]; | |
| interval: | |
| - interval: 1min | |
| then: | |
| - script.execute: time_update | |
| lvgl: | |
| log_level: INFO | |
| rotary_encoders: | |
| sensor: encoder | |
| binary_sensor: pushbutton | |
| group: general | |
| color_depth: 16 | |
| bg_color: 0x0F0F0F | |
| text_font: unscii_8 | |
| align: center | |
| style_definitions: | |
| - id: date_style | |
| text_font: unscii_8 | |
| align: center | |
| text_color: 0x000000 | |
| bg_opa: cover | |
| radius: 4 | |
| pad_all: 2 | |
| widgets: | |
| - obj: # Clock container | |
| height: size_content | |
| width: size_content | |
| widgets: | |
| - meter: # Gradient color arc | |
| height: 160 | |
| width: 160 | |
| align: center | |
| bg_color: 0 | |
| scales: | |
| angle_range: 360 | |
| rotation: 255 | |
| range_from: 0 | |
| range_to: 12 | |
| ticks: | |
| width: 35 | |
| count: 13 | |
| length: 8 | |
| indicators: | |
| - ticks: | |
| local: true | |
| start_value: 0 | |
| end_value: 12 | |
| color_start: 0xFF0000 | |
| color_end: 0x0000FF | |
| - meter: | |
| height: 160 | |
| width: 160 | |
| align: center | |
| bg_opa: TRANSP | |
| text_color: 0xFFFFFF | |
| scales: | |
| - ticks: | |
| width: 1 | |
| count: 61 | |
| length: 10 | |
| color: 0xFFFFFF | |
| range_from: 0 | |
| range_to: 60 | |
| angle_range: 360 | |
| rotation: 270 | |
| indicators: | |
| - line: | |
| id: minute_hand | |
| width: 3 | |
| color: 0xE0E0E0 | |
| r_mod: -1 | |
| - | |
| angle_range: 330 | |
| rotation: 300 | |
| range_from: 1 | |
| range_to: 12 | |
| ticks: | |
| width: 1 | |
| count: 12 | |
| length: 1 | |
| major: | |
| stride: 1 | |
| width: 4 | |
| length: 8 | |
| color: 0xC0C0C0 | |
| label_gap: 6 | |
| - angle_range: 360 | |
| rotation: 270 | |
| range_from: 0 | |
| range_to: 720 | |
| indicators: | |
| - line: | |
| id: hour_hand | |
| width: 4 | |
| color: 0xA0A0A0 | |
| r_mod: -20 | |
| - label: | |
| styles: date_style | |
| id: day_label | |
| y: -20 | |
| - label: | |
| id: date_label | |
| styles: date_style | |
| y: +20 | |
You just need to center the outer container. The default alignment is top left.
widgets:
- obj: # Clock container
height: size_content
width: size_content
align: center # <--- This
Oh wow that makes sense, and fixed it, thanks. I saw all the other align: center spread throughout so thought one of them was working to center it.
I was wondering if you know what the graphical element (line) on the right and bottom sides of the object container are caused by? If I set the width to "size_content" one is over on the right side almost off the screen, but if i set everything to 480 px they are visible like shown below. the same thing happens on my 240x240px round screen. Only way to get it to not show appears to be with the meter elements much smaller than the container like 150px for the 240px display and then they are not visible.
Maybe these are just expected bugs since the code is not released yet?
Those are scroll bars, your content is too large for the container.
Ahh! scroll bars!! I spent sooo long trying all sorts of settings.. LVGL is too smart ;) Thanks!
scrollbar_mode: "off" under the object settings fixed it for me (probably not the cleanest fix but it works for now)
I suggest you set the size of the outer container in pixels, add a padding spec (pad_all: 4) and size the meters at 100%.
You are right that works perfectly :) still trying to learn LVGL and the new YAML syntax for ESPHome makes it interesting :) but slowly figuring things out!
Trying to get LVGL to run on this neat little 240x240 ESP32 widget the "GeekMagic Small TV Pro" (make sure you get the pro one with touch button on top if you want ESP32) which are about $15 shipped from Aliexpress. It has no CS LCD pin connected which maybe is what's causing me issues with the LVGL component? It works with the default "lambda" display methods using this same display config but not once I put in the LVGL stuff, it just displays static. Any ideas or hints on what could be different with LVGL? no errors its running
display:
- platform: ili9xxx
id: lcd_display
model: st7789v
spi_id: spihwd
data_rate: 20MHz #oringal device uses 20mhz - 40 is default and works - does not work at 80mhz
#cs_pin: GPIO03 #CS pin is connected to gnd I believe
dc_pin: GPIO02
reset_pin: GPIO04
spi_mode: MODE3 #since no cs pin default is mode0
dimensions:
width: 240
height: 240
offset_height: 0
offset_width: 0
invert_colors: true
update_interval: never
auto_clear_enabled: falseThe rest of the code is the clock example
Without further information I would have no idea. Look at the logs for any error messages, attach a complete yaml file and logging output. Does it have PSRAM?
No PSRAM. I just uploaded all the logs + yaml + image of it working with the lambda version - included are the yaml that works with old ESPhome display lambda and logs for both versions. Only thing I can think thats different from my other working displays is that this one doesn't have a CS pin connected, but don't know how that would change it..
https://github.com/clowrey/esphome-geekmagic-small-TV-pro/
Wifi logs don't capture the output between boot and WiFi connection, which is when the interesting stuff happens.
But I suspect you are running out of RAM - add buffer_size: 25% to the lvgl config.
And the docs are here: https://arc.net/l/quote/tggegklw
I will connect a usb-serial adapter to the internal header to get the boot logs - these only have USB C for power but data lines not wired to anything.. I tried the 25% buffer and no noticeable change so far. That link to the docs is super helpful too, thanks!
Okay I tried changing the display dimensions to 160 and that fixed it, so must be related to buffer size like you said.. I'm wondering why as I've run this same code on an ESP32 C3 with similar ram.
dimensions:
width: 160
height: 160
But then I realized I am using the Arduino framework here and had used the esp-idf on the C3.. I had tried both before I got it working with the lambda but not since setting the SPI mode to 3.. And it works! I'm guessing just because esp-idf is more efficient with memory usage, still haven't hooked up serial converter to the debug header. Here is the working yaml https://github.com/clowrey/esphome-geekmagic-small-TV-pro/blob/main/small-tv-pro-lvgl-esp-idf-working.yaml
Thanks for your help again!
You might find the ESPHome debug: component useful: https://arc.net/l/quote/fcwbthud
Ahh!! that is super useful!! This is the output with esp-idf framework and working LCD
[10:58:45][D][debug:079]: ESPHome version 2024.4.0-dev
[10:58:45][D][debug:083]: Free Heap Size: 31360 bytes
[10:58:45][D][debug:162]: Chip: Model=ESP32, Features=WIFI_BGN,BLE,BT, Cores=2, Revision=3
[10:58:45][D][debug:170]: ESP-IDF Version: 4.4.6
[10:58:45][D][debug:175]: EFuse MAC: CC:7B:5C:A7:29:E0
[10:58:45][D][debug:320]: Wakeup Reason: Unknown
[10:58:45][I][lvgl:000]: [Info] (153.339, +987) lv_obj_update_layout: Layout update begin (in lv_obj_pos.c line #314)
[10:58:46][W][component:232]: Component lvgl took a long time for an operation (115 ms).
[10:58:46][W][component:233]: Components should block for at most 30 ms.
[10:58:47][D][sensor:094]: 'Heap Free': Sending state 55012.00000 B with 0 decimals of accuracy
[10:58:47][D][sensor:094]: 'Heap Max Block': Sending state 27648.00000 B with 0 decimals of accuracy
[10:58:47][D][sensor:094]: 'Loop Time': Sending state 125.00000 ms with 0 decimals of accuracy
[10:58:47][D][sensor:094]: 'Free PSRAM': Sending state 0.00000 B with 0 decimals of accuracyand here it is with arduino framework and no LCD - no logs showing LVGL working either unless I go to trace level debug - I am guessing the free heap being larger is because it failed to load the LVGL for some reason.. I will still get the hardware serial connected to investigate boot time errors more.
[11:05:06][D][debug:079]: ESPHome version 2024.4.0-dev
[11:05:06][D][debug:083]: Free Heap Size: 201588 bytes
[11:05:06][D][debug:113]: Flash Chip: Size=8192kB Speed=80MHz Mode=QIO
[11:05:06][D][debug:162]: Chip: Model=ESP32, Features=WIFI_BGN,BLE,BT, Cores=2, Revision=3
[11:05:06][D][debug:170]: ESP-IDF Version: v4.4.2
[11:05:06][D][debug:175]: EFuse MAC: CC:7B:5C:A7:29:E0
[11:05:06][D][debug:275]: Reset Reason: Software Reset CPU
[11:05:06][D][debug:320]: Wakeup Reason: Unknown
[11:05:09][D][sensor:094]: 'Heap Free': Sending state 220112.00000 B with 0 decimals of accuracy
[11:05:09][D][sensor:094]: 'Heap Max Block': Sending state 110580.00000 B with 0 decimals of accuracy
[11:05:09][D][sensor:094]: 'Loop Time': Sending state 43.00000 ms with 0 decimals of accuracy
[11:05:09][D][sensor:094]: 'Free PSRAM': Sending state 0.00000 B with 0 decimals of accuracy
@clydebarrow Thanks for all your work on LVGL in esphome. Its coming along really well. Can you add the value_ofs_x and value_ofs_y properties to a button? I really like have the text offset a bit. I gives more room on the buttons for badges and other information. I can put in a formal features request if you want but this would be a request to update a feature that is not even released yet :)
@clydebarrow Thanks for all your work on LVGL in esphome. Its coming along really well. Can you add the value_ofs_x and value_ofs_y properties to a button?
No, that's not present in LVGL 8.4. I'll move to V9 when it's sufficiently stable.
I'm building with the dev container 2024.7.0-dev and I'm getting this when building.
[ticks] is an invalid option for [indicators]
It's tick_styles now. See https://deploy-preview-3678--esphome.netlify.app/components/lvgl.html#meter
It's
tick_stylesnow. See https://deploy-preview-3678--esphome.netlify.app/components/lvgl.html#meter
Thanks. Not sure how I missed that one. Do you happen to know if the ILI9341 or ILI9342 (aka Cheap Yellow Display) will work with ESPHome and LVGL?
So far the yaml builds, but I just get a static or black screen depending on the resolution I set, and in the log it says "Component lvgl is marked FAILED". I tried a few of the "hello world" examples but they don't seem to be working.
Yes it will work with them, lots of examples in the Esphome Discord server under the Display > LVGL sub thread.
Without PSRAM you will need to set buffer_size to 25%
@clydebarrow is there a way to get a circular button on there? I was trying a sample for this but i was unable to get the button be a circle.
- btn:
group: my_group
align: Left_MID
radius: 65535
clip_corner: True
id: btn_id_3
width: 70
height: 70
checkable: true
widgets:
- label:
align: center
text: "Previous"
on_value:
then:
- lvgl.page.previous:
animation: OUT_LEFT
time: 300ms
Did you try radius: 50%?
Did you try
radius: 50%?
that worked! Thanks for the prompt reply!
One more thing and i can move this to a separate discussion thread if need be.
Do you have a on select sort of feature? So if one uses rotary encoder to move between buttons then using a on_select where it can trigger a label update. This way on smaller screens we can have smaller buttons with icons and a description area.
EDIT: Found it. The on_focus action on the widget
Yes it will work with them, lots of examples in the Esphome Discord server under the Display > LVGL sub thread.
Got it to work. Thanks!
Oooooo nice! thank you so much!
I just installed it on a 5" 480x800 rpi_dpi_rgb display, working well.
only thing I have noticed so far is that it does not center on the display for some reason - maybe doesn't recognize displays this large? not sure..
yaml is here https://github.com/clowrey/esphome-esp32-8048s050-lvgl/