Adding a Volume Control for media Player

[carsten-wolf]

I've like to add a volume control for my media player. I've tried to use a Slider but it didn't work I've got the error:

lvgl: [source /config/esphome/walldisplay.yaml:540]
  id: my_lvgl
  log_level: WARN
  bg_color: 16777215
  displays: 
    - my_display
  
  string value cannot be dictionary or list.
  touchscreens: []
  pages: 
    - id: page_0
      widgets: 
        - label: 
            x: 98
            y: 15
            width: 330
            height: 65
            text: Walldisplay
            text_font: font_raleway_400_50
            text_color: 16777215
            text_align: CENTER
        
        Unknown widget type: img.
        - img: 
            x: 117
            y: 199

Code for the Slider looks like this:

        # widget:lvgl_slider id:w_mq7tuubcy2a57 type:lvgl_slider x:143 y:325 w:200 h:20 entity:media_player.wohnung grid_cell_row_span:1 grid_cell_column_span:1 grid_cell_x_align:STRETCH grid_cell_y_align:STRETCH min:0 max:100 value:30 color:white bg_color:gray border_width:2 mode:NORMAL vertical:false
        - slider:
            x: 143
            y: 325
            width: 200
            height: 20
            min_value: 0
            max_value: 100
            value: 30
            border_width: 2
            bg_color: 0x808080
            indicator:
              bg_color: 0xFFFFFF
            knob:
              bg_color: 0xFFFFFF
              border_width: 2
              border_color: 0xFFFFFF
            mode: NORMAL
script:
  - id: change_page_to
    parameters:
      target_page: int
    then:
      - lambda: |-
          int pages_count = 1;
          int target = target_page;
          while (target < 0) target += pages_count;
          target %= pages_count;
          
          if (id(display_page) != target) {
            id(display_page) = target;
            id(last_page_switch_time) = millis();
            id(my_display).update();
            ESP_LOGI("display", "Switched to page %d", target);
            // Restart refresh logic
            if (id(manage_run_and_sleep).is_running()) id(manage_run_and_sleep).stop();
            id(manage_run_and_sleep).execute();
          }
  - id: manage_run_and_sleep
    mode: restart
    then:
      - logger.log: "Waiting for sync..."
      - wait_until:
          condition:
            lambda: 'return id(ha_time).now().is_valid() && api_is_connected();'
          timeout: 60s
      - delay: 5s
      - lambda: 'id(page_refresh_current_s) = id(page_refresh_default_s);'
      - component.update: my_display
      - delay: !lambda 'return id(page_refresh_current_s) * 1000;'
      - script.execute: manage_run_and_sleep

I'll like to use up / down buttons any idea to do this with button and not with a slider?

Regards
Carsten

[koosoli]

Thanks for the report, please have a look at version RC20 and let me know if it works now for you. Cheers

[carsten-wolf]

Thanks for the fast reply. Did a update to rc20 and a restart of HA.
Sill get the same error. Maybe I'm doing something wrong:

INFO ESPHome 2026.5.3
INFO Reading configuration /config/esphome/walldisplay.yaml...
WARNING GPIO19 is used by the USB-Serial-JTAG interface. Using this pin as GPIO will conflict with USB-Serial-JTAG.
WARNING GPIO45 is a strapping PIN and should only be used for I/O with care.
Attaching external pullup/down resistors to strapping pins can cause unexpected failures.
See https://esphome.io/guides/faq/#why-am-i-getting-a-warning-about-strapping-pins
WARNING GPIO20 is used by the USB-Serial-JTAG interface. Using this pin as GPIO will conflict with USB-Serial-JTAG.
WARNING GPIO20 is used by the USB-Serial-JTAG interface. Using this pin as GPIO will conflict with USB-Serial-JTAG.
INFO Detected timezone 'Europe/Berlin'
Failed config

lvgl: [source /config/esphome/walldisplay.yaml:540]
  id: my_lvgl
  log_level: WARN
  bg_color: 16777215
  displays: 
    - my_display
  
  string value cannot be dictionary or list.
  touchscreens: []
  pages: 
    - id: page_0
      widgets: 
        - label: 
            x: 98
            y: 15
            width: 330
            height: 65
            text: Walldisplay
            text_font: font_raleway_400_50
            text_color: 16777215
            text_align: CENTER
        
        Unknown widget type: img.
        - img: 
            x: 117
            y: 199

Let me know if you need more debug informtaion.