I like your idea of adding a OTA progress display. I copied your code from some weeks ago into my custom yaml. But it seems when OTA is active I see the progress text label flickering all over the screen in multiple smaller boxes. I added the progress bar label in the top_layer :
##########Top layer####################
top_layer:
widgets:
# OTA popup widget
- obj:
id: ota_widget
hidden: true
width: 480
height: 450
align: center
clickable: false
bg_color: color_slate_blue_gray
#border_opa: transp
#shadow_opa: transp
radius: 0
widgets:
- label:
id: ota_label_primary
y: -50
align: center
text_font: nunito_20
text_color: color_misty_blue
text: "Starting OTA!"
- label:
id: ota_label_secondary
y: -20
align: center
text_font: nunito_18
text_color: color_misty_blue
text: "Wait..."
- bar:
id: ota_bar_value
y: 20
width: 300
value: 0
align: center
min_value: 0
max_value: 100
animated: true
bg_color: color_steel_blue
indicator:
bg_color: color_misty_blue
- buttonmatrix:
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: main_page
- id: page_next
text: "\uF054"
on_press:
then:
lvgl.page.next:
##########Pages####################
page_wrap: true
pages:
##########Page 1: main####################
- id: main_page
skip: false
layout:
type: grid
grid_rows: [25%, 25%, 25%, 25%]
grid_columns: [33%, 33%, 33%]
pad_row: 1
pad_column: 1
width: 100%
bg_color: 0x000000
bg_opa: cover
pad_all: 5
widgets:
- obj:
checkable: true
id: lv_button_1
widgets:
- label:
text_font: light32
align: top_left
text: $light_recessed
id: lv_button_1_icon
- label:
align: bottom_mid
text: "Iris bed"
long_mode: dot
on_short_click:
- homeassistant.service:
service: light.toggle
data:
entity_id: light.hue_iris_1
- obj:
checkable: true
id: lv_button_2
widgets:
- label:
text_font: light32
align: top_mid
text: $string_lights
id: lv_button_2_icon
- label:
align: bottom_mid
text: "Nachthal"
long_mode: dot
on_short_click:
- homeassistant.service:
service: light.toggle
data:
entity_id: light.nachthal
- obj:
checkable: true
id: lv_button_3
widgets:
- label:
text_font: light32
align: top_right
text: $floor_lamp
id: lv_button_3_icon
- label:
align: bottom_mid
text: "Keuken dimmer"
long_mode: dot
on_short_click:
- homeassistant.service:
service: light.toggle
data:
entity_id: light.dimmer_keuken_current_value
- obj:
checkable: true
id: lv_button_4
widgets:
- label:
text_font: light32
align: top_left
text: $lightbulb
id: lv_button_4_icon
- label:
align: bottom_mid
text: "Patio wit"
long_mode: dot
on_short_click:
- homeassistant.service:
service: light.toggle
data:
entity_id: light.patio_vast_wit
- obj:
checkable: true
id: lv_button_5
widgets:
- label:
text_font: light32
align: top_mid
text: $lightbulb
id: lv_button_5_icon
- label:
align: bottom_mid
text: "Kachel wit"
long_mode: dot
on_short_click:
- homeassistant.service:
service: light.toggle
data:
entity_id: light.kachel_vast_wit
- obj:
checkable: true
id: lv_button_6
widgets:
- label:
text_font: light32
align: top_right
text: $clock
id: lv_button_6_icon
- label:
align: bottom_mid
text: "Lichtboom"
long_mode: dot
on_short_click:
- homeassistant.service:
service: switch.toggle
data:
entity_id: stopcontact_lichtboom_current_value
- obj:
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: "Salon kleur"
long_mode: dot
on_short_click:
- homeassistant.service:
service: light.toggle
data:
entity_id: light.salon_kleur
- obj:
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: "Terras wit"
long_mode: dot
on_short_click:
- homeassistant.service:
service: light.toggle
data:
entity_id: light.terras_dyn_wit
- obj:
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: "TL keukenkast"
long_mode: dot
on_short_click:
- homeassistant.service:
service: light.toggle
data:
entity_id: light.tl_lampen_keukenkast
- obj:
checkable: true
id: lv_button_10
widgets:
- label:
text_font: light32
align: top_left
text: $lightbulb
id: lv_button_10_icon
- label:
align: bottom_left
text: "TL dampkap"
long_mode: dot
on_short_click:
- homeassistant.service:
service: light.toggle
data:
entity_id: light.tl_lamp_dampkap
- button:
checkable: true
id: lv_button_11
widgets:
- label:
text_font: light32
align: top_left
text: $curtains
id: lv_button_11_icon
- label:
align: bottom_left
text: "Covers"
long_mode: dot
- button:
checkable: true
id: lv_button_12
widgets:
- label:
text_font: mdi_icons_52
align: top_left
text: $shield_home_icon
id: lv_button_12_icon
- label:
align: bottom_left
text: "Alarm"
long_mode: dot
on_press:
- lvgl.page.show:
id: alarm_panel_page
animation: OUT_RIGHT
time: 300ms
my OTA code is current (AI generated):
current is to avoid flickering but it does not work.
Second in comment was more like your code, but it also flickers on the whole screen.
Problem is when a grid view is visible (like my other page) and the progress bar is visible on top of it I see my progress bar & label in very small text resizing all over the display in smaller boxes and flickering effect.
I also added a fixed navigation bar button below on the top layer (visible on all screens), maybe that canât work with the progress OTA label ?
Or do i have to adapt my other screens in a away they can coexist with the OTA progress label ?
ota:
- platform: esphome
id: ota_state
#password: !secret display_ota
password: "ae1eafab4cf49f00224f4243215ca282"
on_begin:
- logger.log: "OTA Start"
- light.turn_on: display_backlight
- lambda: |-
// Show OTA screen once
lv_obj_clear_flag(id(ota_widget), LV_OBJ_FLAG_HIDDEN);
lv_label_set_text(id(ota_label_primary), "Starting OTA!");
lv_label_set_text(id(ota_label_secondary), "Wait...");
lv_bar_set_value(id(ota_bar_value), 0, LV_ANIM_OFF);
on_progress:
- lambda: |-
static int last = -1;
int val = (int)x;
if (val != last) {
last = val;
lv_bar_set_value(id(ota_bar_value), val, LV_ANIM_OFF);
char buf[64];
snprintf(buf, sizeof(buf), "Firmware progress %0.1f%%", x);
lv_label_set_text(id(ota_label_secondary), buf);
}
on_end:
- lambda: |-
lv_bar_set_value(id(ota_bar_value), 100, LV_ANIM_OFF);
lv_label_set_text(id(ota_label_primary), "Update complete!");
lv_label_set_text(id(ota_label_secondary), "Rebooting...");
on_error:
- lambda: |-
lv_label_set_text(id(ota_label_primary), "Update ERROR!");
lv_label_set_text(id(ota_label_secondary), "Rebooting...");
# on_begin:
# - logger.log: "OTA Start"
# - light.turn_on: display_backlight
# - lvgl.widget.show: ota_widget
# - lvgl.label.update:
# id: ota_label_primary
# text: "Starting OTA!"
# - lvgl.label.update:
# id: ota_label_secondary
# text: "Wait..."
# - lvgl.bar.update:
# id: ota_bar_value
# value: 0
# # Only call LVGL loop once after all updates
# - lambda: |-
# id(lvgl_comp).loop();
# on_progress:
# - lvgl.bar.update:
# id: ota_bar_value
# value: !lambda "return (int)x;"
# - lvgl.label.update:
# id: ota_label_secondary
# text: !lambda |-
# static char buffer[64];
# snprintf(buffer, sizeof(buffer), "Firmware progress %0.1f%%", x);
# return buffer;
# # Only call LVGL loop once after all updates
# - lambda: |-
# id(lvgl_comp).loop();
# on_end:
# - logger.log: "OTA End"
# - lvgl.bar.update:
# id: ota_bar_value
# value: 100
# - lvgl.label.update:
# id: ota_label_primary
# text: "Update complete!"
# - lvgl.label.update:
# id: ota_label_secondary
# text: "Rebooting..."
# # Only call LVGL loop once after all updates
# - lambda: |-
# id(lvgl_comp).loop();
# on_error:
# - logger.log:
# format: "OTA update error %d"
# args: ["x"]
# - lvgl.label.update:
# id: ota_label_primary
# text: "Update ERROR!"
# - lvgl.label.update:
# id: ota_label_secondary
# text: "Rebooting..."
# # Only call LVGL loop once after all updates
# - lambda: |-
# id(lvgl_comp).loop();
