Issue With Lovelace UI

Configuration Frontend
1

I hope this is the right place to post this…

I am trying to dive into Lovelace for the first time. I modified the example picture-elements card to fit my needs as a first test, however I can’t get anything to load. Whenever I visit the Lovelace page, it throws this error in the logs:

2018-07-11 21:26:42 ERROR (MainThread) [frontend.js.latest.201807080] http://ipaddress:8123/frontend_latest/app-47a9b8a28d18c1f03ce16f220e977662.js:2:12634 Uncaught TypeError: Cannot read property 'length' of undefined

This is my config file:

- type: picture-elements
  image: /local/floorplan.png
  elements:
    - type: state-icon
      tap_action: toggle
      entity: light.kitchen
      style:
        top: 47%
        left: 42%
    - type: state-icon
      tap_action: toggle
      entity: light.livingroom
      style:
        top: 30%
        left: 15%
    - type: state-label
      entity: sensor.outside_temperature
      style:
        top: 82%
        left: 79%
    - type: service-button
      title: Turn lights off
      style:
        top: 95%
        left: 60%
      service: light.turn_off
      service_data:
          entity_id: group.all_lights

Have I done something wrong with my config or is it something else?

2

well, the only thing that would have a length attribute would be the state-label or the service-button. And all home assistant instances have a ‘all_lights’ group, so I believe your issue is with the sensor.outside_template state-label. Try removing that or using a sensor that returns a result?

EDIT:

Also, do you have all the view information that’s needed? your lovelace file needs to contain the top level objects. What you have posted needs to go in the cards section on a view.

see the example of a full UI:

3

Thanks @petro! The views section was my issue. I guess I just forgot about the rest of the file.

1 Like