Lovelace: Custom UI

Share your Projects! Dashboards & Frontend
1

I am trying to use some of the Lovelace Custom UI elements but each time it seems to work but before the element is displayed correctly a red panel flashes up and displays the source code from the ui-lovelave.yaml together with the error message “custom element doesn’t exist : slider-entity-row”. However the element is then displayed correctly. Any ideas?

The extract from my ui-lovelace.yaml is below and the Home Assistant version is .75.3

resources: 
  - url: /local/custom_ui/slider-entity-row.js?v=0.1
    type: js


views:
  - title: Test
    id: Test
    cards:
      - type: entities
        entities:
          - entity: light.bedside_glyn
            name: Bedside Glyn
            type: custom:slider-entity-row
1 Like
2

It’s a known behaviour for lovelace custom cards. The way core Lovelace handles custom cards, it assume they are not going to load (showing a red box) and when they finish loading it renders them. I think it requires a fix in Core to have a better experience.

1 Like
3

Yeah same problem here, would be nice to have this fixed…

4

does anyone have any info on this? is there a issue opened on git ?

5

This should be resolved with 0.78. See: https://github.com/home-assistant/home-assistant-polymer/pull/1670

6

Maybe 0.79?

7

@winter You right. The frontend version is 20180916.0, the fix however was merged 2018-09-17. So it can’t be included, unfortunately. I thought otherwise.

Anyway it will be in 0.79.

2 Likes
8

Hi There.
Thanks for your efforts.
…but unfortunately…in 0.79.3… I still have the red message “Custom element doesn’t exist”.

Followed all instructions in
Custom animated weather card for Lovelace (…not working anything :frowning: )
“https://github.com/covrig/homeassistant-iframe-card” (…not working anything :frowning: )

Highly appreciate any help.
Maybe my homeassistant installation does not look into ./www/custom_ui ???

Thanks.

edit…p.s.:
also switched front javascript between es5, auto, latest…doesn’t affect anything :frowning:
pls. tell me what logs to post…I highly appreciate any hint.

9

@webwurli Just to clarify, you are talking about Lovelace and your custom element isn’t loaded at all, right?

Can you post your ui-lovelace.yaml (either completely or the relevant parts: resources and the entity for which you want to use it) as well as the custom component itself.

Please use codeblocks ``` for these, that will make reviewing a lot easier.

10

Thank You @cdce8p.

In the meantime, I got it running under Lovelace (but not under standard-UI.)
But… I had to change the following:

Copy the javascript out of the “CONFIG/www/custom_ui/lovelace-iframe.html” into “CONFIG/www/custom_ui/lovelace-iframe.js”

Removed the according “extra_html…” entry for “lovelace-iframe.html” in the “frontend”-section and instead:

Added a resource in “CONFIG/ui-lovelace.yaml”:

resources:
  - url: /local/custom_ui/lovelace-iframe.js?v=0
    type: module

BR,
Stephan

1 Like
11

Got it running now…completely (lovelace and standard-UI)
…without above mentioned workaround. (forget it :wink: )

Here’s a snippet out of my configuration.yaml:

customizer:
  custom_ui: local

frontend:
  javascript_version: auto
  extra_html_url:
    - /local/custom_ui/state-card-iframe.html
    - /local/custom_ui/lovelace-iframe.html
  extra_html_url_es5:
    - /local/custom_ui/state-card-iframe-es5.html
    - /local/custom_ui/lovelace-iframe.html
2 Likes
12

Hey there, I was searching around because I’m having this same issue. I was wondering what you meant by ‘copy the js’ to the new file. What parts of the HTML document did you copy? Sorry i’m not great with programming languages so I’m not sure what to even look for. Figuring this stuff out as I go…

Thanks

13

hello , may i know more about this? i still cannot run standard-UI under lovelace… but i really wanna use the feature in custom-ui, but custom-ui is base standard-UI and only working with standard-UI , cannot work with lovelace, but once i use your way to success , i think i can use custom-ui in lovelace. !!!

14

and also where can i download state-card-iframe-es5.html ? i cannot find any link or file .