Need help - Getting error under lovelace

Abeksis · October 10, 2018, 6:32pm

I get the following error:

https://ip/frontend_latest/27194aefb40e6f5b8d5f.chunk.js:1160:87351 TypeError: undefined is not an object (evaluating 'Object.keys(element.style)')

Under the following code:

 - icon: mdi:toggle-switch-off
name: on/off
cards:
  - type: vertical-stack
    cards:          
      - type: picture-elements
        image: /local/lovelace/device_tracker/device_tracking_01.gif
        elements:
          - type: state-label
            entity: device_tracker.avi_note8                     

      - type: horizontal-stack
        cards:
          - type: picture-entity
            entity: device_tracker.service_balcony
            show_name: false
            image: /local/lovelace/device_tracker/device_tracker_service_balcony.jpg
            
          - type: picture-entity
            entity: device_tracker.sonofftris
            show_name: false
            image: /local/lovelace/device_tracker/device_tracker.sonofftris.jpg
              
          - type: picture-entity
            entity: device_tracker.sonofprozdor
            show_name: false
            image: /local/lovelace/device_tracker/sonofprozdor.jpg

      - type: vertical-stack
        cards:
          - type: horizontal-stack
            cards:
              - type: picture-entity
                entity: device_tracker.sonofs20
                name: Power S20
                image: /local/lovelace/device_tracker/sonofs20.png
            
              - type: picture-entity
                entity: device_tracker.sonoffmiklahat
                name: Shower Sonoff
                image: /local/lovelace/device_tracker/device_tracker.sonoffmiklahat.jpg 

          - type: picture-entity
            entity: device_tracker.xiaomimibox
            image: /local/lovelace/device_tracker/device_tracker.xiaomimibox.jpg
            
          
  - type: vertical-stack
    cards: 
      - type: picture-elements
        image: /local/lovelace/device_tracker/device_tracking_02.gif
        elements:
          - type: state-label
            entity: device_tracker.yeelinklightstrip1_miio98683770

      - type: picture-entity
        image: /local/lovelace/device_tracker/device_tracker.amzonecho.jpg
        entity: device_tracker.amzonecho
        name: Device Tracker Amzon Echo
          
      - type: picture-entity
        entity: device_tracker.xiaomirobot
        name: Device Tracker Xiaomi Robot
        image: /local/lovelace/device_tracker/device_tracker.xiaomirobot.jpg

          
  - type: vertical-stack
    cards: 
      - type: picture-elements
        image: /local/lovelace/device_tracker/device_tracking_03.jpg
        elements:
          - type: state-label
            entity: device_tracker.2c3ae84f491c

      - type: horizontal-stack
        cards:
          - type: picture-entity
            entity: device_tracker.xiaomicamera
            show_name: false
            image: /local/lovelace/device_tracker/device_tracker_xiaomicamera.jpg
            
          - type: picture-entity
            entity: device_tracker.foscam
            show_name: false
            image: /local/lovelace/device_tracker/device_tracker.foscam.jpg
              
          - type: picture-entity
            entity: device_tracker.ipad
            show_name: false
            image: /local/lovelace/device_tracker/device_tracker.ipad.jpg

      - type: vertical-stack
        cards:
          - type: horizontal-stack
            cards:
              - type: picture-entity
                entity: device_tracker.broadlink
                name: Broadlink
                image: /local/lovelace/device_tracker/broadlink_02.jpg
            
              - type: picture-entity
                entity: device_tracker.macbookpro
                name: Yeelinklight Strip
                image: /local/lovelace/device_tracker/device_tracker.yeelinklightstrip1_miio98683770.jpg 

          - type: picture-entity
            entity: device_tracker.macbookpro
            image: /local/lovelace/device_tracker/device_tracker.macbookpro.jpg

Can someone please help? It drives me crazy.

jimpower · October 10, 2018, 6:41pm

Do you have this in your configuration.yaml?

frontend:
  javascript_version: latest

Abeksis · October 10, 2018, 6:43pm

yes:

frontend:
javascript_version: latest
extra_html_url:

/local/custom_ui/state-card-custom-ui.html
extra_html_url_es5:

/local/custom_ui/state-card-custom-ui-es5.html

jimpower · October 10, 2018, 6:43pm

Is this your complete ui-lovelace.yaml?

Abeksis · October 10, 2018, 6:45pm

It’s part of it. I will give you the full details of the file?

jimpower · October 10, 2018, 6:47pm

I can see the problem it is with your picture-elements card you are missing style see mine below.

- type: picture-elements
  image: /local/lovelace/home/james_3.jpg
  elements:
     - type: state-label
       entity: sensor.james
       prefix: "James -- "
       style: {color: white, left: 30%, top: 93%} 
     - type: state-icon
       entity: sensor.battery_james
       style: {color: white, left: 73%, top: 92%}
     - type: state-label
       entity: sensor.battery_james
       style: {color: white, left: 87%, top: 93%}

Abeksis · October 10, 2018, 6:49pm

Can you please point me out (or fix please :)) my part - my eyes are already out of place.

jimpower · October 10, 2018, 6:54pm

cards:
  - type: vertical-stack
    cards:          
      - type: picture-elements
        image: /local/lovelace/device_tracker/device_tracking_01.gif
        elements:
          - type: state-label
            entity: device_tracker.avi_note8
            style: {color: white, left: 87%, top: 93%}

You need to add the style line to tell the card what position it needs to show your element

Abeksis · October 10, 2018, 6:58pm

my fix:
I keep getting the error

icon: mdi:toggle-switch-off
name: מצב פעיל/לא פעיל
cards:
- type: vertical-stack
  cards:
  - type: picture-elements
    image: /local/lovelace/device_tracker/device_tracking_01.gif
    elements:
    - type: state-label
      entity: device_tracker.avi_note8
      style: {color: white, left: 87%, top: 93%}
  - type: horizontal-stack
    cards:
    - type: picture-entity
      entity: device_tracker.service_balcony
      show_name: false
      image: /local/lovelace/device_tracker/device_tracker_service_balcony.jpg
    - type: picture-entity
      entity: device_tracker.sonofftris
      show_name: false
      image: /local/lovelace/device_tracker/device_tracker.sonofftris.jpg
    - type: picture-entity
      entity: device_tracker.sonofprozdor
      show_name: false
      image: /local/lovelace/device_tracker/sonofprozdor.jpg
  - type: vertical-stack
    cards:
    - type: horizontal-stack
      cards:
      - type: picture-entity
        entity: device_tracker.sonofs20
        name: Power S20
        image: /local/lovelace/device_tracker/sonofs20.png
      - type: picture-entity
        entity: device_tracker.sonoffmiklahat
        name: Shower Sonoff
        image: /local/lovelace/device_tracker/device_tracker.sonoffmiklahat.jpg
    - type: picture-entity
      entity: device_tracker.xiaomimibox
      image: /local/lovelace/device_tracker/device_tracker.xiaomimibox.jpg
- type: vertical-stack
  cards:
  - type: picture-elements
    image: /local/lovelace/device_tracker/device_tracking_02.gif
    elements:
    - type: state-label
      entity: device_tracker.yeelinklightstrip1_miio98683770
      prefix: "James – "
      style: {color: white, left: 30%, top: 93%}
  - type: picture-entity
    image: /local/lovelace/device_tracker/device_tracker.amzonecho.jpg
    entity: device_tracker.amzonecho
    name: Device Tracker Amzon Echo
  - type: picture-entity
    entity: device_tracker.xiaomirobot
    name: Device Tracker Xiaomi Robot
    image: /local/lovelace/device_tracker/device_tracker.xiaomirobot.jpg
- type: vertical-stack
  cards:
  - type: picture-elements
    image: /local/lovelace/device_tracker/device_tracking_03.jpg
    elements:
    - type: state-label
      entity: device_tracker.2c3ae84f491c
      prefix: "James – "
      style: {color: white, left: 30%, top: 93%}
  - type: horizontal-stack
    cards:
    - type: picture-entity
      entity: device_tracker.xiaomicamera
      show_name: false
      image: /local/lovelace/device_tracker/device_tracker_xiaomicamera.jpg
    - type: picture-entity
      entity: device_tracker.foscam
      show_name: false
      image: /local/lovelace/device_tracker/device_tracker.foscam.jpg
    - type: picture-entity
      entity: device_tracker.ipad
      show_name: false
      image: /local/lovelace/device_tracker/device_tracker.ipad.jpg
  - type: vertical-stack
    cards:
    - type: horizontal-stack
      cards:
      - type: picture-entity
        entity: device_tracker.broadlink
        name: Broadlink
        image: /local/lovelace/device_tracker/broadlink_02.jpg
      - type: picture-entity
        entity: device_tracker.macbookpro
        name: Yeelinklight Strip
        image: /local/lovelace/device_tracker/device_tracker.yeelinklightstrip1_miio98683770.jpg
    - type: picture-entity
      entity: device_tracker.macbookpro
      image: /local/lovelace/device_tracker/device_tracker.macbookpro.jpg

jimpower · October 10, 2018, 7:00pm

Can you please format code correctly like it shows you at the top of the page.

Can you post your entire lovelace config

Abeksis · October 10, 2018, 7:08pm

Now it’s all right. …

There was a mistake in the code for me. But he shows me a name I do not want him to show there. Only a picture has a possibility?

my full file: https://gist.github.com/abeksis/fae16706d8c542cfe39186fbd8107bf7

jimpower · October 10, 2018, 7:24pm

I’m not sure what you want to do here show , if its just the background image you would be better off with the picture card here https://www.home-assistant.io/lovelace/picture/

If you use a picture-elements card you must add atleast one element, with picture card you don’t

Abeksis · October 10, 2018, 7:27pm

Thanks for the help. Everything works great now without errors. What’s new with you? Adding stuff since you showed me

jimpower · October 10, 2018, 7:32pm

I’m currently working on power consumption page lots of templating and stats sensors to pull all info I want like today, yesterday, this week, last week, month last month etc. Its been a massive headache but will show when its complete.

I was playing around and made this yesterday

I have changed all my stats cards from the top of each page to mini-graph cards also

Abeksis · October 10, 2018, 7:36pm

You can share some code - boring me

jimpower · October 10, 2018, 7:38pm

I will upload to my repo when its ready

Abeksis · October 10, 2018, 7:39pm

Thank you very much - looks very interesting what you do, I like your work very clean and quality.

Abeksis · October 11, 2018, 6:03am

How do you measure your power consumption?