Difficulty adding background image to project

ESPHome
1

Hello everyone,

I’m working on an Elecrow 5" Crowpanel esp32-s3 display that I have gotten to work with @RyanEwen’s project Github Here, and I’m struggling to find a way to add a background image to the project.

this is the code for the display

font: !include
  file: fonts/fonts.yaml
  vars:
    text_sm: 16
    text_md: 20
    text_lg: 24
    icons_sm: 20
    icons_md: 26
    icons_lg: 34

.sizing:
  - &nav_widget_vars
    height: 50px
    padding: 8

  - &page_styles
    <<: !include styles/page_styles.yaml
    pad_top: 50px
    pad_bottom: 50px

  - &container_styles
    <<: !include styles/container_styles.yaml
    pad_top: 0px
    pad_bottom: 0px
    pad_left: 6px
    pad_right: 6px

  - &button_layout
    <<: !include styles/button_layout.yaml
    pad_column: 8px
    pad_row: 8px

  - &button_widget_vars
    width: 49%
    height: 86px

  - &wide_button_widget_vars
    width: 100%
    height: 86px

  - &printer_layout
    <<: !include styles/printer_layout.yaml
    pad_row: 4

  - &printer_widget_vars
    height: 72px
    padding: 8px
    bar_height: 30px
    bar_padding: 8

script:
  - id: go_home
    then:
    - lvgl.page.show: ${home_page}

lvgl:
  default_font: roboto_md
  theme: !include themes/main.yaml
  top_layer:
    widgets: !include { file: widgets/navigation/widget.yaml, vars: { <<: *nav_widget_vars } }
  pages:
    - id: splash
      skip: true
      on_load:
        then:
          script.execute: go_home

    - id: bedroom
      <<: *page_styles
      on_load:
        then:
          lvgl.label.update:
            id: page_title
            text: Bedroom
      widgets:
        - obj:
            <<: *container_styles
            layout:
              <<: *button_layout
            widgets:
              - button: # ceiling light
                  <<: !include
                    file: widgets/buttons/icon_text_buttons/light_buttons/widget.yaml
                    vars:
                      uid: bedroom_light_1
                      entity_id: light.bedroom_light_1
                      text: Ceiling
                      <<: *button_widget_vars

              - button: # futurama
                  <<: !include
                    file: widgets/buttons/text_buttons/stateless.yaml
                    vars:
                      uid: futurama
                      text: Futurama
                      <<: *button_widget_vars
                  on_short_click:
                    - homeassistant.action:
                        action: homeassistant.turn_on
                        data: { entity_id: script.futurama }
                  on_long_press:
                    - homeassistant.action:
                        action: homeassistant.toggle
                        data: { entity_id: media_player.bedroom_android_tv }

              - button: # rachel light
                  <<: !include
                    file: widgets/buttons/icon_text_buttons/light_buttons/widget.yaml
                    vars:
                      uid: bedroom_light_3
                      entity_id: light.bedroom_light_3
                      text: Rachel
                      <<: *button_widget_vars

              - button: # volume up
                  <<: !include
                    file: widgets/buttons/icon_buttons/volume_buttons/vol_up.yaml
                    vars:
                      uid: bedroom_tv_vol_up
                      entity_id: media_player.bedroom_android_tv
                      <<: *button_widget_vars

              - button: # ryan light
                  <<: !include
                    file: widgets/buttons/icon_text_buttons/light_buttons/widget.yaml
                    vars:
                      uid: bedroom_light_2
                      entity_id: light.bedroom_light_2
                      text: Ryan
                      <<: *button_widget_vars

              - button: # volume down
                  <<: !include
                    file: widgets/buttons/icon_buttons/volume_buttons/vol_down.yaml
                    vars:
                      uid: bedroom_tv_vol_down
                      entity_id: media_player.bedroom_android_tv
                      <<: *button_widget_vars

    - id: living_room
      <<: *page_styles
      on_load:
        then:
          lvgl.label.update:
            id: page_title
            text: Living Room
      widgets:
        - obj:
            <<: *container_styles
            layout:
              <<: *button_layout
            widgets:
              - button: # tv power
                  <<: !include
                    file: widgets/buttons/icon_buttons/stateful.yaml
                    vars:
                      uid: 55_onn_roku_tv
                      icon_on: "\U000F0425"
                      icon_off: "\U000F0425"
                      <<: *button_widget_vars
                  on_short_click:
                    - homeassistant.action:
                        action: media_player.toggle
                        data: { entity_id: media_player.55_onn_roku_tv }

              - button: # dim scene
                  <<: !include
                    file: widgets/buttons/text_buttons/stateless.yaml
                    vars:
                      uid: dim
                      text: Dim Lights
                      <<: *button_widget_vars
                  on_short_click:
                    - homeassistant.action:
                        action: homeassistant.turn_on
                        data: { entity_id: scene.living_room_lights_tv_watching }
                  on_long_press:
                    - homeassistant.action:
                        action: light.turn_on
                        data: { entity_id: light.all_living_room_lights, brightness_pct: '100' }

              - button: # play / pause
                  <<: !include
                    file: widgets/buttons/icon_buttons/stateless.yaml
                    vars:
                      uid: living_room_tv_playpause
                      icon: "\U000F040E"
                      <<: *button_widget_vars
                  on_short_click:
                    - homeassistant.action:
                        action: media_player.media_play_pause
                        data: { entity_id: media_player.living_room_tv }

              - button: # volume up
                  <<: !include
                    file: widgets/buttons/icon_buttons/volume_buttons/vol_up.yaml
                    vars:
                      uid: living_room_tv_vol_up
                      entity_id: media_player.living_room_tv
                      <<: *button_widget_vars

              - button: # stop
                  <<: !include
                    file: widgets/buttons/icon_buttons/stateless.yaml
                    vars:
                      uid: living_room_tv_stop
                      icon: "\U000F04DB"
                      <<: *button_widget_vars
                  on_short_click:
                    - homeassistant.action:
                        action: media_player.media_stop
                        data: { entity_id: media_player.living_room_tv }

              - button: # volume down
                  <<: !include
                    file: widgets/buttons/icon_buttons/volume_buttons/vol_down.yaml
                    vars:
                      uid: living_room_tv_vol_down
                      entity_id: media_player.living_room_tv
                      <<: *button_widget_vars

    - id: lighting_1
      <<: *page_styles
      on_load:
        then:
          lvgl.label.update:
            id: page_title
            text: Lighting (1/3)
      widgets:
        - obj:
            <<: *container_styles
            layout:
              <<: *button_layout
            widgets:
              - button: # main floor lights
                  <<: !include
                    file: widgets/buttons/icon_text_buttons/light_group_buttons/widget.yaml
                    vars:
                      uid: main_floor_lights
                      entity_id: light.main_floor_lights
                      text: Main Floor
                      <<: *wide_button_widget_vars

              - button: # living room light
                  <<: !include
                    file: widgets/buttons/icon_text_buttons/light_buttons/widget.yaml
                    vars:
                      uid: all_living_room_lights
                      entity_id: light.all_living_room_lights
                      text: Living Room
                      <<: *button_widget_vars

              - button: # kitchen light
                  <<: !include
                    file: widgets/buttons/icon_text_buttons/light_buttons/widget.yaml
                    vars:
                      uid: smart_plug_mini
                      entity_id: switch.smart_plug_mini
                      text: Matter Plug
                      <<: *button_widget_vars
                  on_short_click:
                    - homeassistant.action:
                        action: homeassistant.turn_on
                        data: { entity_id: script.matter }

              - button: # rachel's office light
                  <<: !include
                    file: widgets/buttons/icon_text_buttons/light_buttons/widget.yaml
                    vars:
                      uid: kauf_bulb
                      entity_id: light.kauf_bulb
                      text: Office!
                      <<: *button_widget_vars
                  on_short_click:
                    - homeassistant.action:
                        action: homeassistant.turn_on
                        data: { entity_id: script.script1 }

              - button: # upstairs hallway light
                  <<: !include
                    file: widgets/buttons/icon_text_buttons/light_buttons/widget.yaml
                    vars:
                      uid: upstairs_hallway_light_p1
                      entity_id: light.upstairs_hallway_light
                      text: Hallway
                      <<: *button_widget_vars

    - id: lighting_2
      <<: *page_styles
      on_load:
        then:
          lvgl.label.update:
            id: page_title
            text: Lighting (2/3)
      widgets:
        - obj:
            <<: *container_styles
            layout:
              <<: *button_layout
            widgets:
              - button: # second floor lights
                  <<: !include
                    file: widgets/buttons/icon_text_buttons/light_group_buttons/widget.yaml
                    vars:
                      uid: second_floor_lights
                      entity_id: light.second_floor_lights
                      text: Second Floor
                      <<: *wide_button_widget_vars

              - button: # bedroom lights
                  <<: !include
                    file: widgets/buttons/icon_text_buttons/light_buttons/widget.yaml
                    vars:
                      uid: all_bedroom_lights
                      entity_id: light.all_bedroom_lights
                      text: Bedroom
                      <<: *button_widget_vars

              - button: # railyn light
                  <<: !include
                    file: widgets/buttons/icon_text_buttons/light_buttons/widget.yaml
                    vars:
                      uid: railyns_light
                      entity_id: light.railyns_light
                      text: Railyn
                      <<: *button_widget_vars

              - button: # ryan's office light
                  <<: !include
                    file: widgets/buttons/icon_text_buttons/light_buttons/widget.yaml
                    vars:
                      uid: all_ryan_s_office_lights
                      entity_id: light.all_ryan_s_office_lights
                      text: Office
                      <<: *button_widget_vars

              - button: # upstairs hallway light
                  <<: !include
                    file: widgets/buttons/icon_text_buttons/light_buttons/widget.yaml
                    vars:
                      uid: upstairs_hallway_light_p2
                      entity_id: light.upstairs_hallway_light
                      text: Hallway
                      <<: *button_widget_vars

    - id: lighting_3
      <<: *page_styles
      on_load:
        then:
          lvgl.label.update:
            id: page_title
            text: Lighting (3/3)
      widgets:
        - obj:
            <<: *container_styles
            layout:
              <<: *button_layout
            widgets:
              - button: # outdoor lights
                  <<: !include
                    file: widgets/buttons/icon_text_buttons/light_group_buttons/widget.yaml
                    vars:
                      uid: all_outside_lights
                      entity_id: light.all_outside_lights
                      text: Outside Lights
                      <<: *wide_button_widget_vars

              - button: # door lights
                  <<: !include
                    file: widgets/buttons/icon_text_buttons/light_buttons/widget.yaml
                    vars:
                      uid: outside_light_1
                      entity_id: light.outside_light_1
                      text: Door Lights
                      <<: *button_widget_vars

              - button: # deck lights
                  <<: !include
                    file: widgets/buttons/icon_text_buttons/light_buttons/widget.yaml
                    vars:
                      uid: outside_light_2
                      entity_id: light.outside_light_2
                      text: Deck Lights
                      <<: *button_widget_vars

    - id: printers
      <<: *page_styles
      on_load:
        then:
          lvgl.label.update:
            id: page_title
            text: Printers
      widgets:
        - obj:
            <<: *container_styles
            layout:
              <<: *printer_layout
            widgets:
              - obj: # printer 1
                  <<: !include
                    file: widgets/printers/widget.yaml
                    vars:
                      uid: printer_1
                      name: 1 - Fred
                      <<: *printer_widget_vars

              - obj: # printer 2
                  <<: !include
                    file: widgets/printers/widget.yaml
                    vars:
                      uid: printer_2
                      name: 2 - Wilma
                      <<: *printer_widget_vars

              - obj: # printer 3
                  <<: !include
                    file: widgets/printers/widget.yaml
                    vars:
                      uid: printer_3
                      name: 3 - Barney
                      <<: *printer_widget_vars

              - obj: # printer 4
                  <<: !include
                    file: widgets/printers/widget.yaml
                    vars:
                      uid: printer_4
                      name: 4 - Betty
                      <<: *printer_widget_vars

              - obj: # printer 5
                  <<: !include
                    file: widgets/printers/widget.yaml
                    vars:
                      uid: printer_5
                      name: 4 - Dinno
                      <<: *printer_widget_vars

packages:
  # navigation
  navigation_sensor: !include { file: widgets/navigation/sensors.yaml }

  # bedroom
  bedroom_tv_widget_sensor: !include { file: widgets/bedroom_tv.sensor.yaml }

  bedroom_light_1_widget_sensor: !include { file: widgets/buttons/icon_text_buttons/light_buttons/sensors.yaml, vars: {
    uid: bedroom_light_1,
    entity_id: light.bedroom_light_1
  }}

  bedroom_light_2_widget_sensor: !include { file: widgets/buttons/icon_text_buttons/light_buttons/sensors.yaml, vars: {
    uid: bedroom_light_2,
    entity_id: light.bedroom_light_2
  }}

  bedroom_light_3_widget_sensor: !include { file: widgets/buttons/icon_text_buttons/light_buttons/sensors.yaml, vars: {
    uid: bedroom_light_3,
    entity_id: light.bedroom_light_3
  }}

  # living_room
  living_room_tv_widget_sensor: !include { file: widgets/buttons/icon_buttons/stateful_sensors.yaml, vars: {
    uid: 55_onn_roku_tv,
    entity_id: media_player.55_onn_roku_tv

  living_room_tv_extra_widgets_sensor: !include { file: widgets/living_room_tv.sensor.yaml }

  # lighting 1
  main_floor_lights_widget_sensor: !include { file: widgets/buttons/icon_text_buttons/light_group_buttons/sensors.yaml, vars: {
    uid: main_floor_lights,
    entity_id: light.main_floor_lights
  }}

  all_living_room_lights_widget_sensor: !include { file: widgets/buttons/icon_text_buttons/light_buttons/sensors.yaml, vars: {
    uid: all_living_room_lights,
    entity_id: light.all_living_room_lights
  }}

  smart_plug_mini_widget_sensor: !include { file: widgets/buttons/icon_text_buttons/light_buttons/sensors.yaml, vars: {
    uid: smart_plug_mini,
    entity_id: switch.smart_plug_mini
  }}

  kauf_bulb_widget_sensor: !include { file: widgets/buttons/icon_text_buttons/light_buttons/sensors.yaml, vars: {
    uid: kauf_bulb,
    entity_id: light.kauf_bulb
  }}

  # lighting 2
  second_floor_lights_widget_sensor: !include { file: widgets/buttons/icon_text_buttons/light_group_buttons/sensors.yaml, vars: {
    uid: second_floor_lights,
    entity_id: light.second_floor_lights
  }}

  all_bedroom_lights_widget_sensor: !include { file: widgets/buttons/icon_text_buttons/light_buttons/sensors.yaml, vars: {
    uid: all_bedroom_lights,
    entity_id: light.all_bedroom_lights
  }}

  railyns_light_widget_sensor: !include { file: widgets/buttons/icon_text_buttons/light_buttons/sensors.yaml, vars: {
    uid: railyns_light,
    entity_id: light.railyns_light
  }}

  ryans_office_light_widget_sensor: !include { file: widgets/buttons/icon_text_buttons/light_buttons/sensors.yaml, vars: {
    uid: all_ryan_s_office_lights,
    entity_id: light.all_ryan_s_office_lights
  }}

  upstairs_hallway_light_p1_widget_sensor: !include { file: widgets/buttons/icon_text_buttons/light_buttons/sensors.yaml, vars: {
    uid: upstairs_hallway_light_p1,
    entity_id: light.upstairs_hallway_light
  }}

  upstairs_hallway_light_p2_widget_sensor: !include { file: widgets/buttons/icon_text_buttons/light_buttons/sensors.yaml, vars: {
    uid: upstairs_hallway_light_p2,
    entity_id: light.upstairs_hallway_light
  }}

  # lighting 3
  all_outside_lights_widget_sensor: !include { file: widgets/buttons/icon_text_buttons/light_group_buttons/sensors.yaml, vars: {
    uid: all_outside_lights,
    entity_id: light.all_outside_lights
  }}

  outside_light_1_widget_sensor: !include { file: widgets/buttons/icon_text_buttons/light_buttons/sensors.yaml, vars: {
    uid: outside_light_1,
    entity_id: light.outside_light_1
  }}

  outside_light_2_widget_sensor: !include { file: widgets/buttons/icon_text_buttons/light_buttons/sensors.yaml, vars: {
    uid: outside_light_2,
    entity_id: light.outside_light_2
  }}

  # printers 1
  printer_1_widget_sensor: !include { file: widgets/printers/sensors.yaml, vars: {
    uid: printer_1,
    entity_id_prefix: p1s_1
  }}

  printer_2_widget_sensor: !include { file: widgets/printers/sensors.yaml, vars: {
    uid: printer_2,
    entity_id_prefix: p1s_2
  }}

  printer_3_widget_sensor: !include { file: widgets/printers/sensors.yaml, vars: {
    uid: printer_3,
    entity_id_prefix: p1s_3
  }}

  printer_4_widget_sensor: !include { file: widgets/printers/sensors.yaml, vars: {
    uid: printer_4,
    entity_id_prefix: p1s_4
  }}

  # printers 2
  printer_5_widget_sensor: !include { file: widgets/printers/sensors.yaml, vars: {
    uid: printer_5,
    entity_id_prefix: p1s_5
  }}

I’m thinking this is the file i would need to modify to place a background image, but it could also be in the main.yaml theme file mentioned in the above code,
here is the code for main.yaml theme

obj:
  bg_color: 0x000000
  text_color: 0x42495A
button:
  bg_color: 0x5A6173
  border_width: 0
  border_color: 0x00B6FF
  radius: 20
  shadow_width: 0
bar:
  bg_color: 0x111111
  text_color: 0xFFFFFF
dropdown:
  bg_color: 0x5A6173
  text_color: 0xFFFFFF
  border_color: 0x00B6FF
  border_width: 1
  shadow_width: 0

Any help is appreciated.
Thank you,
-Gabriel

2

You haven’t actually said what your goal is, or what the problem is.

Where do you want the background image to appear, what have you tried, what happened, did you get any error messages?

And although including full yaml is better than including a small snippet, there’s a lot of stuff in the config you attached, most of which is irrelevant. You would be far more likely to get some useful responses if you started with a small example to demonstrate what you are trying to achieve.

1 Like
3

I’m away from my computer right now, but to put it simply, I’ve been struggling to understand how to place an image in esphome lvgl. The documentation page for lvgl images on esphome.io is very sparse. My goal is to place a background image, centered, with height and width attributes. I’ve been struggling to provide an example of code for placing an image in lvgl on esphome. I’ve experimented with inserting code from my other lvgl projects, but they are in C++ and do not work. I’m almost entirely unfamiliar with how lvgl operates in .yaml and there isn’t very good documentation.

A good example of what I’m trying to achieve is the how the HA Deck readme image looks. HA deck Github

I’m unsure of what code to put in to display a background image, and if I should place it in the main.yaml theme file or in the first code in my post.

4

Sorry, but it’s still not clear what you are trying to achieve. Do you want a background image in a widget, in a page or for the whole display? If you look in the docs for style properties like “bg_image” and “disp_bg_image” you will find more information.

It does seem that you have taken a full-blown project with no insight into how it works, and are looking for a quick answer to making one specific change. If that’s all you will ever need, I suppose that’s fair enough, but if you want to learn how to use the LVGL library in ESPHome, I would recommend starting with a blank layout and trying things out rather than trying to tweak a complex project that you don’t understand.

The docs are quite extensive (which is challenging in itself) but they are never going to have all the answers to every single design question, simply because there is an infinite number of those.

5

For the whole display is what i’m looking for.

Clyde, many people learn through taking examples and learning how to modify existing components within them to fit their desired use case, it’s entirely valid way to build a skill, the fact that I’m having to justify this is absurd.

6

And to be clear, I understand fully how the project works and whats its functions are. the thing im NOT familiar with is lvgl within esphome. The creator of the project I’m modifying did not include any images whatsoever, let alone a background image. It’s insulting that you take me literally stating that its lvgl within esphome that I’m unfamiliar with, not lvgl itself, or esphome, and to conclude that I know nothing of the project.

7

Figured it out after enough trial and error.

For anyone wondering, in regards to this specific project,

I added

image:
  - file: "media/mars.jpg"
    id: mars_image
    resize: 300x300
    type: RGB565

To the bottom of the device.yaml file

and

bg_image_src: mars_image

to the container_styles.yaml file.

marsbackgroundphoto
marsbackgroundphoto692×919 123 KB