Lovelace help

i cant make lovelace work, can someone can make a tutorial how to start with the lovelace feature?

https://developers.home-assistant.io/docs/en/lovelace_index.html

  1. Create a yaml file <config>/ui-lovelace.yaml
  2. Insert new interface configuration (you have to start from scratch, like rewriting your “groups.yaml” file with the new structure)
  3. go to http://<homeassistant-ip>:8123/lovelace and start tinkering.

Not sure if you saw this from the release, but this has some great examples as well

Moved docs to: https://home-assistant.io/lovelace

Update: Change URL to official docs that now have the same content

there’s any way to add lovelace as a panel_custom on the sidebar?

There will be in 0.73 a way to use overview for it: https://github.com/ciotlosm/docs-lovelace/tree/0.73.0#overview-binding

Update: Starting with 0.73.1 you will get Lovelace as Overview when setting it as default in dev-info panel

what I dont seem to understand is the premise of input.boolean. The docs say to add entries to your conifg.yaml. so does that mean for every entity I want in my UI I need an input.boolean entry in the lovelace.yaml and config.yamil? What am I not understanding here? Thanks.

-end user dummy

Nope, that is only for demonstration purpose. You don’t need to change your configuration.yaml, but you have to add your entities in the lovelace.yaml file. Think of it as an analogous of your current groups.yaml file.

totally. that makes sense. dont understand why that instruction is there

Noticed you’re managing the github - any idea why when navigating to ha.url:8123/lovelace I get a 404: not found error now? Any help is appreciated!

Figured this out, cannot add an iframe for lovelace or it will fail to load

question regarding the picture elements card. is there a limit on image size? Resolution? Does it resize it? Thanks

playing with it

1 Like

Could anybody tell me how to format my yaml, to have some of this appear on the same page.

I can’t seem to figure it out.

title: Maxim House
resources:
  - url: /local/custom_ui/dark-sky-weather-card.js?v=6
    type: js
  - url: /local/custom_ui/plan-coordinates.js
    type: js
  - url: /local/custom_ui/bignumber_card.js
    type: js
  - url: /local/kiosk.js
    type: js
background: center / cover no-repeat url("/background.png") fixed
# Exclude entities from "Unused entities" view
#excluded_entities:
views:
  - title: Floor Plan
    background: radial-gradient(crimson, skyblue)
    panel: true
    theme: dark-mode
    cards:
    - type: vertical-stack
      cards:
        - type: custom:bignumber-card
          entity: sensor.time
          scale: 40px
        - type: custom:bignumber-card
          entity: sensor.date
          scale: 20px
        - type: custom:plan-coordinates
        - type: picture-elements
          image: /local/floorplan/house.png
          elements:
            - type: state-icon
              entity: light.cabinet
              tap_action: toggle
              style:
                top: 37%
                left: 50%
            - type: state-icon
              entity: switch.flower_lamp
              tap_action: toggle
              style:
                top: 58%
                left: 36%
            - type: state-icon
              entity: group.kitchen_ceiling_lights
              tap_action: toggle
              style:
                top: 45%
                left: 41.5%
            - type: state-icon
              entity: input_boolean.fireplace
              tap_action: toggle
              style:
                top: 41%
                left: 15%
            - type: state-icon
              entity: input_boolean.television
              tap_action: toggle
              style:
                top: 72%
                left: 34%
            - type: state-icon
              entity: light.floor_lamp
              tap_action: toggle
              style:
                top: 87%
                left: 56%
            - type: state-icon
              entity: light.hallway
              tap_action: toggle
              style:
                top: 56%
                left: 65%
            - type: state-icon
              entity: light.hue_g
              tap_action: toggle
              style:
                top: 27%
                left: 16%
            - type: state-icon
              entity: light.hue_iris
              tap_action: toggle
              style:
                top: 92%
                left: 34%
            - type: state-icon
              entity: sensor.dark_sky_temperature
              tap_action: state-label
              style:
                top: 7%
                left: 25%
            - type: state-icon
              entity: switch.dining_room_fan
              tap_action: toggle
              style:
                top: 34%
                left: 21%
            - type: state-icon
              entity: switch.living_room_fan
              tap_action: toggle
              style:
                top: 72%
                left: 47%
            - type: state-icon
              entity: light.backyard
              tap_action: toggle
              style:
                top: 13%
                left: 41%
            - type: state-icon
              entity: light.bathroom
              tap_action: toggle
              style:
                top: 33%
                left: 59%
            - type: state-icon
              entity: light.bed_lamp_2
              tap_action: toggle
              style:
                top: 28%
                left: 87%
            - type: state-icon
              entity: light.bed_lamp_1
              tap_action: toggle
              style:
                top: 50%
                left: 87%
            - type: state-icon
              entity: light.bed_lamp_2
              tap_action: toggle
              style:
                top: 75%
                left: 86%
            - type: state-icon
              entity: light.cj_floor_lamp
              tap_action: toggle
              style:
                top: 66%
                left: 70%
            - type: state-icon
              entity: light.dimmer_dining_room
              tap_action: toggle
              style:
                top: 51%
                left: 36%
            - type: state-icon
              entity: light.hutch
              tap_action: toggle
              style:
                top: 88%
                left: 35%
            - type: state-label
              entity: sensor.living_room_thermostat_temperature
              tap_action: toggle
              style:
                top: 53%
                left: 57%



  - title: TV
    cards:
      - type: entities
        entities:
          - input_select.tv_inputs
          - input_select.tv_channels
          - input_select.digital_frame
          - media_player.fire_speaker
      - type: picture-entity
        entity: input_boolean.television
        tap_action: toggle
        image: /local/icons/tv.jpg
        state_image:
          'on': /local/icons/tv.jpg
        state_filter:
          'on': drop-shadow(-5px 0 10px gold)
          'off': brightness(80%) saturate(0.8)

      - type: custom:bignumber-card
        entity: sensor.time
      - type: custom:bignumber-card
        entity: sensor.date
  - title: Weather
    cards:
      - type: custom:dark-sky-weather-card
        entity_sun: sun.sun
        entity_daily_summary: sensor.dark_sky_daily_summary
        entity_current_conditions: sensor.dark_sky_icon
        entity_humidity: sensor.dark_sky_humidity
        entity_pressure: sensor.dark_sky_pressure
        entity_temperature: sensor.dark_sky_temperature
        entity_visibility: sensor.dark_sky_visibility
        entity_wind_bearing: sensor.dark_sky_wind_bearing
        entity_wind_speed: sensor.dark_sky_wind_speed
        entity_forecast_high_temp_1: sensor.dark_sky_daytime_high_temperature_1
        entity_forecast_high_temp_2: sensor.dark_sky_daytime_high_temperature_2
        entity_forecast_high_temp_3: sensor.dark_sky_daytime_high_temperature_3
        entity_forecast_high_temp_4: sensor.dark_sky_daytime_high_temperature_4
        entity_forecast_high_temp_5: sensor.dark_sky_daytime_high_temperature_5
        entity_forecast_low_temp_1: sensor.dark_sky_overnight_low_temperature
        entity_forecast_low_temp_2: sensor.dark_sky_overnight_low_temperature_1
        entity_forecast_low_temp_3: sensor.dark_sky_overnight_low_temperature_2
        entity_forecast_low_temp_4: sensor.dark_sky_overnight_low_temperature_3
        entity_forecast_low_temp_5: sensor.dark_sky_overnight_low_temperature_4
        entity_forecast_icon_1: sensor.dark_sky_icon_1
        entity_forecast_icon_2: sensor.dark_sky_icon_2
        entity_forecast_icon_3: sensor.dark_sky_icon_3
        entity_forecast_icon_4: sensor.dark_sky_icon_4
        entity_forecast_icon_5: sensor.dark_sky_icon_5



  - title: At Home
    panel: true
    cards:
      - type: horizontal-stack
        cards:
          - type: picture-entity
            entity: binary_sensor.corey_home
            tap_action: toggle
            image: /local/icons/corey.png
            state_image:
              'on': /local/icons/corey.png
            state_filter:
              'on': drop-shadow(-5px 0 10px gold)
              'off': brightness(80%) saturate(0.8)
          - type: picture-entity
            entity: binary_sensor.wendy_home
            tap_action: toggle
            image: /local/icons/wendy.png
            state_image:
              'on': /local/icons/wendy.png
            state_filter:
              'on': drop-shadow(-5px 0 10px gold)
              'off': brightness(80%) saturate(0.8)
          - type: picture-entity
            entity: binary_sensor.cameron_home
            tap_action: toggle
            image: /local/icons/cameron.png
            state_image:
              'on': /local/icons/cameron.png
            state_filter:
              'on': drop-shadow(-5px 0 10px gold)
              'off': brightness(80%) saturate(0.8)
          - type: picture-entity
            entity: binary_sensor.morgan_home
            tap_action: toggle
            image: /local/icons/morgan.png
            state_image:
              'on': /local/icons/morgan.png
            state_filter:
              'on': drop-shadow(-5px 0 10px gold)
              'off': brightness(80%) saturate(0.8)
          - type: picture-entity
            entity: binary_sensor.courtney_home
            tap_action: toggle
            image: /local/icons/courtney.png
            state_image:
              'on': /local/icons/courtney.png
            state_filter:
              'on': drop-shadow(-5px 0 10px gold)
              'off': brightness(80%) saturate(0.8)
          - type: picture-entity
            entity: binary_sensor.mom_home
            tap_action: toggle
            image: /local/icons/mom.png
            state_image:
              'on': /local/icons/mom.png
            state_filter:
              'on': drop-shadow(-5px 0 10px gold)
              'off': brightness(80%) saturate(0.8)
  - title: Guests
    cards:
      - type: horizontal-stack
        cards:
          - type: picture-entity
            entity: binary_sensor.jasmine_home
            tap_action: toggle
            image: /local/icons/jasmine.png
            state_image:
              'on': /local/icons/jasmine.png
            state_filter:
              'on': drop-shadow(-5px 0 10px gold)
              'off': brightness(80%) saturate(0.8)
          - type: picture-entity
            entity: binary_sensor.brandon_home
            tap_action: toggle
            image: /local/icons/brandon.png
            state_image:
              'on': /local/icons/brandon.png
            state_filter:
              'on': drop-shadow(-5px 0 10px gold)
              'off': brightness(80%) saturate(0.8)
          - type: picture-entity
            entity: binary_sensor.andy_home
            tap_action: toggle
            image: /local/icons/andy.png
            state_image:
              'on': /local/icons/andy.png
            state_filter:
              'on': drop-shadow(-5px 0 10px gold)
              'off': brightness(80%) saturate(0.8)


  - title: Home Security
    cards:
      - type: entities
        show_header_toggle: false
        entities:
          - binary_sensor.door_window_sensor_158d000227976c
          - binary_sensor.motion_sensor_158d0002227665

what do you mean some of this. you posted a huge yaml file.

I don’t need it all just want to know how to put anything together, it’s hard to find good examples to put things on one page. I have been trying for hours
maybe this and this.

- title: At Home
    panel: true
    cards:
      - type: horizontal-stack
        cards:
          - type: picture-entity
            entity: binary_sensor.corey_home
            tap_action: toggle
            image: /local/icons/corey.png
            state_image:
              'on': /local/icons/corey.png
            state_filter:
              'on': drop-shadow(-5px 0 10px gold)
              'off': brightness(80%) saturate(0.8)
          - type: picture-entity
            entity: binary_sensor.wendy_home
            tap_action: toggle
            image: /local/icons/wendy.png
            state_image:
              'on': /local/icons/wendy.png
            state_filter:
              'on': drop-shadow(-5px 0 10px gold)
              'off': brightness(80%) saturate(0.8)
          - type: picture-entity
            entity: binary_sensor.cameron_home
            tap_action: toggle
            image: /local/icons/cameron.png
            state_image:
              'on': /local/icons/cameron.png
            state_filter:
              'on': drop-shadow(-5px 0 10px gold)
              'off': brightness(80%) saturate(0.8)
          - type: picture-entity
            entity: binary_sensor.morgan_home
            tap_action: toggle
            image: /local/icons/morgan.png
            state_image:
              'on': /local/icons/morgan.png
            state_filter:
              'on': drop-shadow(-5px 0 10px gold)
              'off': brightness(80%) saturate(0.8)
          - type: picture-entity
            entity: binary_sensor.courtney_home
            tap_action: toggle
            image: /local/icons/courtney.png
            state_image:
              'on': /local/icons/courtney.png
            state_filter:
              'on': drop-shadow(-5px 0 10px gold)
              'off': brightness(80%) saturate(0.8)
          - type: picture-entity
            entity: binary_sensor.mom_home
            tap_action: toggle
            image: /local/icons/mom.png
            state_image:
              'on': /local/icons/mom.png
            state_filter:
              'on': drop-shadow(-5px 0 10px gold)
              'off': brightness(80%) saturate(0.8)
  - title: Guests
    cards:
      - type: horizontal-stack
        cards:
          - type: picture-entity
            entity: binary_sensor.jasmine_home
            tap_action: toggle
            image: /local/icons/jasmine.png
            state_image:
              'on': /local/icons/jasmine.png
            state_filter:
              'on': drop-shadow(-5px 0 10px gold)
              'off': brightness(80%) saturate(0.8)
          - type: picture-entity
            entity: binary_sensor.brandon_home
            tap_action: toggle
            image: /local/icons/brandon.png
            state_image:
              'on': /local/icons/brandon.png
            state_filter:
              'on': drop-shadow(-5px 0 10px gold)
              'off': brightness(80%) saturate(0.8)
          - type: picture-entity
            entity: binary_sensor.andy_home
            tap_action: toggle
            image: /local/icons/andy.png
            state_image:
              'on': /local/icons/andy.png
            state_filter:
              'on': drop-shadow(-5px 0 10px gold)
              'off': brightness(80%) saturate(0.8)

Maybe to show on one page, but be separated by people that live here and guests. And is there a way to get rid of the names at the bottom? On my phone the names take up a lot of space.

I mean, I have no clue what you are talking about because I can’t see your interface. If you want things on one page, then place them into a single view:

if you want to remove names on picture-entity cards, use the remove names attribute:

I’m having an issue where in hass.io, loading lovelace says “Error while loading this panel”.

It was working the other day, now it’s not. I’ve made no changes to my working lovelace config file.

HomeAssistant 0.75.1
Hass.io supervisor Version 123

1 Like

Update: On a whim I decided to remove my default_view group from groups.yaml, reloaded groups, and now lovelace is working again.

There was only 1 breaking change in 0.75. The discord chat server has link to the changes. It had to do with entity card I believe.

Is there a way to combine filters or conditions with picture element? I want a page with a background that shows things that are on, open, home etc.
Or maybe make the cards transparent and the image can be a background?
Thanks