Blank in Lovelace #6

nealeydee · 2019-12-11T16:03:39Z

Hello. Thanks for this. Trying to get it working, but with the card is blank and not shown once I save my lovelace config.

Using MQTT Explorer, I have two topics related to my WLED controller:

I have tried setting both in the lovelace card, but nothing works.
I have also tried moving the files to www/community and changing the lovelace resources to reflect that - same result.

Any ideas why it might be completely blank?

I am using hass.io on a VM and have used the WLED integration in HA to discover and integrate my WLED controller. I am running WLED on a ESP32 device.

Thanks in advance.

Shaegi · 2019-12-11T18:00:25Z

Hello, can you provide your whole lovelace.yml settings? The card not showing up shouldn't be a problem with MQTT, its rather a problem within the config.

nealeydee · 2019-12-11T18:16:02Z

Thanks for your quick response.

Here is my lovelace yaml file
HOwever, further readon leads me to believe that I may need to manually configure my WLED device in configuration.yaml, rather than let the discovery find and configure it.

How does this depend on the manual config if it indeed does?

Thanks

cch:
  chevrons: true
  clock_am_pm: false
  clock_format: '24'
  date_locale: kk
  options: clock
  redirect: false
resources:
  - type: js
    url: /local/plugins/slider-entity-row.js
  - type: module
    url: /community_plugin/weather-card/weather-card.js
  - type: module
    url: /community_plugin/compact-custom-header/compact-custom-header.js
  - type: module
    url: /community_plugin/mini-graph-card/mini-graph-card-bundle.js
  - type: module
    url: /community_plugin/flex-horseshoe-card/flex-horseshoe-card.js
  - type: js
    url: /community_plugin/calendar-card/dist/calendar-card.js
  - type: css
    url: /local/lib/tingle.min.css
  - type: css
    url: /local/wled_control/static/wled.css
  - type: js
    url: /local/wled_control/static/effects.js
  - type: js
    url: /local/wled_control/static/fastLEDPallete.js
  - type: js
    url: /local/lib/tingle.min.js
  - type: js
    url: /local/lib/iro.min.js
  - type: module
    url: /local/wled_control/wled_control.js
title: 'Dowling Family Home, Eloise'
views:
  - badges:
      - entity: sensor.yrweather_symbol
      - entity: sensor.dark_sky_apparent_temperature
      - entity: sensor.dark_sky_temperature
      - entity: device_tracker.ddiphone
      - entity: device_tracker.neale_dowling_s_mi_8_pro
      - entity: person.neale_dowling
    cards:
      - current: true
        details: false
        entity: weather.eloise
        forecast: true
        name: Eloise
        type: 'custom:weather-card'
      - animate: true
        color_thresholds:
          - color: '#f39c12'
            value: 20
          - color: '#d35400'
            value: 22.6
          - color: '#c0392b'
            value: 24.2
        entities:
          - entity: sensor.ht_living_temp
        hours_to_show: 48
        refresh_interval: 10
        show:
          labels: true
          labels_secondary: true
        title: Living Room Climate
        type: 'custom:mini-graph-card'
      - cards:
          - cards:
              - entity: group.downstairs_lights
                hold_action:
                  action: more-info
                icon: 'mdi:ceiling-light'
                name: Downstairs Lights
                show_icon: true
                show_name: true
                tap_action:
                  action: toggle
                theme: Backend-selected
                type: entity-button
              - entity: script.close_downstairs_shutters
                hold_action:
                  action: more-info
                icon: 'mdi:window-shutter'
                name: Close Downstairs
                show_icon: true
                show_name: true
                tap_action:
                  action: call-service
                  service: script.close_downstairs_shutters
                theme: Backend-selected
                type: entity-button
              - entity: script.open_downstairs_shutters
                hold_action:
                  action: more-info
                icon: 'mdi:window-shutter-open'
                name: Open Downstairs
                show_icon: true
                show_name: true
                tap_action:
                  action: call-service
                  service: script.open_downstairs_shutters
                theme: Backend-selected
                type: entity-button
            type: horizontal-stack
        type: vertical-stack
      - entity: light.60130676b4e62d50ecdd
        name: Office RGB
        theme: default
        type: light
      - cards:
          - cards:
              - entity: light.kitchen_main_light
                name: Kitchen Main
                type: light
              - cards:
                  - entity: light.kitchen_hob_light
                    name: Kitchen Hob
                    type: entity-button
                  - entity: light.kitchen_cabinet_light
                    name: Kitchen Cabinet
                    type: entity-button
                type: vertical-stack
            type: horizontal-stack
          - cards:
              - entity: light.dining_room_light
                name: Dining
                type: entity-button
              - entity: light.living_room_light
                name: Living
                type: entity-button
              - entity: light.outside_light
                name: Outside
                type: entity-button
            type: horizontal-stack
          - cards:
              - entity: light.hall_light
                name: Hall
                type: entity-button
              - entity: light.outside_light
                name: Outside
                type: entity-button
            type: horizontal-stack
          - cards:
              - entity: light.corridor_light
                name: Corridor
                type: entity-button
              - entity: light.office_light
                name: Office
                type: entity-button
            type: horizontal-stack
          - cards:
              - entity: light.bathroom_light
                name: Bathroom
                type: entity-button
              - entity: light.bathroom_wall_light
                name: Bathroom Wall
                type: entity-button
            type: horizontal-stack
        type: vertical-stack
      - entities:
          - entity: cover.livingfront_cover
          - entity: cover.livingfront_cover
            full_row: true
            type: 'custom:slider-entity-row'
          - entity: cover.kitchen_cover
          - entity: cover.kitchen_cover
            full_row: true
            type: 'custom:slider-entity-row'
          - entity: cover.livingterrace_cover
          - entity: cover.livingterrace_cover
            full_row: true
            type: 'custom:slider-entity-row'
          - entity: cover.dining_cover
          - entity: cover.dining_cover
            full_row: true
            type: 'custom:slider-entity-row'
          - entity: cover.office_cover
          - entity: cover.office_cover
            full_row: true
            type: 'custom:slider-entity-row'
        show_header_toggle: false
        title: Downstairs Shutters
        type: entities
      - cards:
          - cards:
              - entity: switch.pellet_stove
                icon: 'mdi:fireplace'
                name: Pellet Stove
                type: entity-button
              - entity: switch.electric_blanket
                icon: 'mdi:bed-empty'
                name: Electric Blankets
                tap_action:
                  action: call-service
                  service: homeassistant.toggle
                  service_data:
                    entity_id: group.electric_blankets
                type: entity-button
            type: horizontal-stack
          - cards:
              - entity: switch.pool_pump
                icon: 'mdi:pool'
                name: Pool Pump
                type: entity-button
              - entity: switch.bathroom_heater
                icon: 'mdi:hot-tub'
                name: Bathroom Heater
                type: entity-button
            type: horizontal-stack
        type: vertical-stack
      - entities:
          - entity: sensor.ht_living_temp
          - entity: sensor.ht_living_humidity
          - entity: switch.pellet_stove
          - entity: sensor.ht_living_battery
        title: Pellet Stove
        type: glance
      - entities:
          - entity: cover.bedroom_cover
          - entity: cover.bedroom_cover
            full_row: true
            type: 'custom:slider-entity-row'
          - entity: cover.lucas_cover
          - entity: cover.lucas_cover
            full_row: true
            type: 'custom:slider-entity-row'
          - entity: cover.mias_cover
          - entity: cover.mias_cover
            full_row: true
            type: 'custom:slider-entity-row'
        show_header_toggle: false
        title: Upstairs Shutters
        type: entities
      - entities:
          - entity: input_select.stoveamstart
          - entity: input_select.stoveamstop
          - entity: input_select.stovepmstart
          - entity: input_select.stovepmstop
          - entity: input_number.max_living_temp
          - entity: input_number.set_living_temp
          - entity: input_number.min_living_temp
          - entity: input_select.stove_flame_set
        show_header_toggle: false
        theme: Backend-selected
        title: Stove Settings
        type: entities
      - dateBottomFormat: ddd
        dateTopFormat: DD
        endText: End
        entities:
          - calendar.delphine_work
        eventsLimit: '99'
        fullDayEventText: All day
        hideHeader: false
        hidePastEvents: false
        hideTime: false
        highlightToday: false
        ignoreEventsByLocationExpression: ''
        ignoreEventsExpression: ''
        maxHeight: false
        numberOfDays: '7'
        progressBar: true
        showEventOrigin: false
        showLocation: false
        showLocationIcon: true
        showMultiDay: false
        startText: Start
        timeFormat: 'HH:mm'
        title: D*****e Work
        type: 'custom:calendar-card'
    icon: 'mdi:home-automation'
    panel: false
    path: downstairs_view
    title: Home
    views:
      - badges:
          - person.neale_dowling
          - device_tracker.mibox3
          - device_tracker.n****e_d******_s_mi_8_pro
          - device_tracker.bedroom_tv
          - sun.sun
        cards:
          - entities:
              - cover.livingfront_cover
            show_header_toggle: true
            title: Living Room Front Shutter
            type: entities
          - entities:
              - cover.livingterrace_cover
            show_header_toggle: true
            title: Living Room Terrace Shutter
            type: entities
          - entities:
              - cover.kitchen_cover
            show_header_toggle: true
            title: Kitchen Shutter
            type: entities
          - entities:
              - cover.dining_cover
            show_header_toggle: true
            title: Dining Room Shutter
            type: entities
          - entities:
              - cover.office_cover
            show_header_toggle: true
            title: Office Shutter
            type: entities
          - entities:
              - cover.kitchen_cover
              - cover.dining_cover
              - cover.livingterrace_cover
              - cover.livingfront_cover
              - cover.office_cover
            show_header_toggle: true
            title: Downstairs
            type: entities
          - entities:
              - automation.kitchen_mqtt_button1_on_up
              - automation.kitchen_mqtt_button1_off_up
              - automation.kitchen_mqtt_button2_off_down
              - automation.kitchen_mqtt_button2_on_down
              - automation.kitchen_timer_stopped
              - automation.dining_mqtt_button1_on_up
              - automation.dining_mqtt_button2_on_down
              - automation.dining_mqtt_button1_off_up
              - automation.dining_mqtt_button2_off_down
              - automation.dining_timer_stopped
              - automation.livingterrace_mqtt_button1_on_up
              - automation.livingterrace_mqtt_button2_on_down
              - automation.livingterrace_mqtt_button1_off_up
              - automation.livingterrace_mqtt_button2_off_down
              - automation.livingterrace_timer_stopped
              - automation.livingfront_mqtt_button1_on_up
              - automation.livingfront_mqtt_button2_on_down
              - automation.livingfront_mqtt_button1_off_up
              - automation.livingfront_mqtt_button2_off_down
              - automation.livingfront_timer_stopped
              - automation.office_mqtt_button1_on_up
              - automation.office_mqtt_button2_on_down
              - automation.office_mqtt_button1_off_up
              - automation.office_mqtt_button2_off_down
              - automation.office_timer_stopped
            title: Automation
            type: entities
          - entities:
              - cover.livingfront_cover
              - cover.kitchen_cover
              - cover.livingterrace_cover
              - cover.dining_cover
              - cover.office_cover
            title: Cover
            type: entities
        path: downstairs_view
        title: Downstairs
      - cards: []
  - badges: []
    cards:
      - entities:
          - entity: cover.kitchen_cover
          - entity: cover.kitchen_cover
            full_row: true
            type: 'custom:slider-entity-row'
          - entity: cover.dining_cover
          - entity: cover.dining_cover
            full_row: true
            type: 'custom:slider-entity-row'
          - entity: cover.livingterrace_cover
          - entity: cover.livingterrace_cover
            full_row: true
            type: 'custom:slider-entity-row'
          - entity: cover.livingfront_cover
          - entity: cover.livingfront_cover
            full_row: true
            type: 'custom:slider-entity-row'
          - entity: cover.office_cover
          - entity: cover.office_cover
            full_row: true
            type: 'custom:slider-entity-row'
        show_header_toggle: false
        title: Downstairs
        type: entities
      - entities:
          - entity: cover.bedroom_cover
          - entity: cover.bedroom_cover
            full_row: true
            type: 'custom:slider-entity-row'
          - entity: cover.lucas_cover
          - entity: cover.lucas_cover
            full_row: true
            type: 'custom:slider-entity-row'
          - entity: cover.mias_cover
          - entity: cover.mias_cover
            full_row: true
            type: 'custom:slider-entity-row'
        show_header_toggle: false
        title: Upstairs Shutters
        type: entities
    icon: 'mdi:blinds'
    title: Shutters
  - badges: []
    cards:
      - entities:
          - automation.kitchen_mqtt_button1_on_up
          - automation.kitchen_mqtt_button2_on_down
          - automation.kitchen_mqtt_button1_off_up
          - automation.kitchen_mqtt_button2_off_down
          - automation.kitchen_timer_stopped
          - automation.dining_mqtt_button1_on_up
          - automation.dining_mqtt_button2_on_down
          - automation.dining_mqtt_button1_off_up
          - automation.dining_mqtt_button2_off_down
          - automation.dining_timer_stopped
          - automation.livingterrace_mqtt_button1_on_up
          - automation.livingterrace_mqtt_button2_on_down
          - automation.livingterrace_mqtt_button1_off_up
          - automation.livingterrace_mqtt_button2_off_down
          - automation.livingterrace_timer_stopped
          - automation.livingfront_mqtt_button1_on_up
          - automation.livingfront_mqtt_button2_on_down
          - automation.livingfront_mqtt_button1_off_up
          - automation.livingfront_mqtt_button2_off_down
          - automation.livingfront_timer_stopped
          - automation.office_mqtt_button1_on_up
          - automation.office_mqtt_button2_on_down
          - automation.office_mqtt_button1_off_up
          - automation.office_mqtt_button2_off_down
          - automation.office_timer_stopped
        title: Automation
        type: entities
    icon: 'mdi:'
    title: Unused
  - badges:
      - entity: person.neale_dowling
      - entity: device_tracker.n**e_d****_s_mi_8_pro
      - entity: device_tracker.ddiphone
      - entity: person.de******e_d*****g
      - entity: sun.sun
    cards:
      - entity: media_player.spotify
        type: media-control
    icon: 'mdi:library-music'
    path: default_view
    title: Media

Shaegi · 2019-12-11T18:22:05Z

Thats a huge config for sure... But I think one piece is missing, the part where you have to configure my wled card....

As mentioned in the readme at the 3. point you have to add the card to your lovelace config. Which should be as the following:

- type: custom:wled-control-card
        topic: "wled/[MQTTCHANNEL]"
        ip: "[WLEDIP]"
        title: WLED Strip

Discovery of hassio has nothing to do with the card since its setup over HTTP and MQTT calls so as long as your hassio is a MQTT Broker you are ready to go.

I hope that will help you!

nealeydee · 2019-12-11T18:50:20Z

Of course! I deleted the card, and did not add it back before copying the yaml contents! However, that is not my problem.

Here is my card configuration:

type: 'custom:wled-control-card'
topic: homeassistant/light/WLED-6a7288
ip: 192.168.1.45
title: WLED Strip

or

type: 'custom:wled-control-card'
topic: wled/6a7288
ip: 192.168.1.45
title: WLED Strip

With it added back, this is the result (The bottom card that can be seen in editing mode).

I have tried with topic: wled/6a7288 and also homeassistant/light/WLED-6a7288 (See my above post with a screenshot from MQTT explorer) both give me a blank card.

Shaegi · 2019-12-11T19:02:37Z

Alright. The card wont show up until it has loaded its state from the WLED via HTTP, so if the request is blocked by anything the card will show up with a huge delay (like 15-20sec) or so. Is there any chance it does show up after a brief delay? To verify this you could also lookup in browser devtools and look for the WLED request. In chrome they will appear under the name "win".
E.g. mine:

trbolexis · 2019-12-19T10:43:32Z

I am having this same issue with the card being blank.

Can you please walk me through the steps for checking the Developer tool Console?

I am seeing a lot of errors there - not sure if it is relevant:

Shaegi · 2019-12-19T11:05:35Z

Hi there,
as mentioned in #5 the problem is that your hassio instance is running over HTTPS and WLED only supports HTTP.
Requesting HTTP ressources from an HTTPS site is not allowed to insure SSL integrity. Unfortunatly there is not much I can do on my site to fix this issue since WLED doesn't support HTTPS. You could try to open an issue on the WLED repo to implement SSL certification for WLED.
The only other method is to serve hassio over HTTP which is unsecure.

declanshanaghy · 2020-02-19T17:34:51Z

I'm also running into this issue. At least when accessing my hassio over it's public DNS name using SSL. However the card did not show up this morning when i was accessing it internally either. I did not inspect the network tab at that time though, so will try that again leter.

There is another issue here in that the card talks directly to the wled API which in the most common cases will be a network internal IP address, hence unavailable over the public internet.

What could be changed here to make this card function outside of the local network? Could it use an MQTT connection provided by the hassio backend?

Shaegi · 2020-02-19T18:26:19Z

The communication between the card and hassio is made over MQTT but receiving the state on load is not possible or at least not that easy as over http since hassio would have to save the current mqtt state somehow (maybe in a custom entity, which would require some python and hassio knowledge). I'm not sure how exactly this can be achieved. Maybe someone else has a good idea?

declanshanaghy · 2020-02-20T15:35:09Z

Here is the response from the win endpoint when on my local network. The card still doesn't show up on the screen

<?xml version="1.0" ?>
<vs>
    <ac>0</ac>
    <cl>109</cl>
    <cl>145</cl>
    <cl>255</cl>
    <cs>0</cs>
    <cs>0</cs>
    <cs>0</cs>
    <ns>0</ns>
    <nr>1</nr>
    <nl>0</nl>
    <nf>1</nf>
    <nd>60</nd>
    <nt>0</nt>
    <fx>23</fx>
    <sx>128</sx>
    <ix>128</ix>
    <fp>0</fp>
    <wv>-1</wv>
    <ws>0</ws>
    <cy>0</cy>
    <ds>BBQ LEDs</ds>
    <ss>0</ss>
</vs>

declanshanaghy · 2020-02-20T15:36:49Z

And here's the lovelace card

      - ip: 192.168.30.35
        title: BBQ LEDs
        topic: wled/d5ca8c
        type: 'custom:wled-control-card'

Shaegi · 2020-02-20T15:41:27Z

Do you get any error in devtools? Also how did you import the dependencies, just to be sure?

declanshanaghy · 2020-02-20T15:43:49Z

MQTT Explorer
https://photos.app.goo.gl/YLUpSUeuwv5KLrPe7

Empty lovelace card
https://photos.app.goo.gl/3EWY7q5cfFXm94fp7
https://photos.app.goo.gl/57KZHQRowP5DKSRF9

declanshanaghy · 2020-02-20T15:46:28Z

Ahh, yes.
ITs complaining that it can't find tingle. I put the files in place like the README says, maybe i got something wrong. checking...

load_resource.ts:36 GET http://hassio:8123/local/lib/tingle.min.css net::ERR_ABORTED 404 (Not Found)

declanshanaghy · 2020-02-20T15:48:27Z

Ahh, i had copied the src files from tingle to www/lib so the min file wasn't there

declanshanaghy · 2020-02-20T15:56:31Z

Still seeing this warning in the console, can you shed some light on what it means?

DevTools failed to parse SourceMap: http://hassio:8123/local/lib/iro.min.js.map

Shaegi · 2020-02-20T16:04:01Z

Does the Card Show up now? According to a quick Google search this shouldnt be an issue... If it still wont show I will give it a look later

OptimusGREEN · 2020-06-15T22:53:17Z

same issue here

Log Details (ERROR)
Logger: frontend.js.latest.202006033
Source: components/system_log/__init__.py:209
First occurred: 23:49:20 (1 occurrences)
Last logged: 23:49:20

http://192.168.7.1:8123/local/lib/tingle.min.js:1:116 Uncaught TypeError: Cannot set property 'tingle' of undefined

thalvars · 2020-10-20T10:00:55Z

same issue here with :
http://hassio.local:8123/local/lib/tingle.min.js:1:116 Uncaught TypeError: Cannot set property 'tingle' of undefined

tek0011 · 2020-11-27T00:04:57Z

same issues as well:

chatainsim · 2020-12-02T22:20:45Z

Hello,
I have the same issue.

tek0011 · 2020-12-03T01:00:41Z

If it helps anyone, I found just using the webpage card in HA, set as a panel, works amazingly.

Shaegi · 2021-01-03T14:48:08Z

I guess that the dependencies are not locked within the project is a huge problem. I guess it would be a major advantage to get tingle and iro installed via NPM instead to be loaded separatly. But that would also require an external bundler/build process like webpack to get it working. I'll open an issue.

yannick10012 · 2021-02-15T16:39:12Z

I also experience the card staying blank, even after minutes of waiting, are there any mistakes made in the pictures below?

yannick10012 · 2021-02-15T16:39:41Z

Shaegi · 2021-02-15T17:29:11Z

Looking good to me. Do you have any errors in your console which might indicate what your problem is? Maybe you can try the version with builtin dependencies from the development-branch

yannick10012 · 2021-02-15T21:37:47Z

Thanks for the quick response! I do have some errors:

yannick10012 · 2021-02-15T21:37:53Z

yashmulgaonkar · 2021-08-06T08:43:20Z

Same issue as above:

tek0011 · 2021-08-06T15:53:44Z

My method requires no setup, and works the exact same.

If it helps anyone, I found just using the webpage card in HA, set as a panel, works amazingly.

Shaegi self-assigned this Dec 12, 2019

Shaegi mentioned this issue Jan 3, 2021

Lock dependencies and build project #14

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Blank in Lovelace #6

Blank in Lovelace #6

nealeydee commented Dec 11, 2019

Shaegi commented Dec 11, 2019

nealeydee commented Dec 11, 2019 •

edited

Loading

Shaegi commented Dec 11, 2019 •

edited

Loading

nealeydee commented Dec 11, 2019 •

edited

Loading

Shaegi commented Dec 11, 2019

trbolexis commented Dec 19, 2019

Shaegi commented Dec 19, 2019

declanshanaghy commented Feb 19, 2020

Shaegi commented Feb 19, 2020

declanshanaghy commented Feb 20, 2020

declanshanaghy commented Feb 20, 2020

Shaegi commented Feb 20, 2020

declanshanaghy commented Feb 20, 2020

declanshanaghy commented Feb 20, 2020

declanshanaghy commented Feb 20, 2020

declanshanaghy commented Feb 20, 2020

Shaegi commented Feb 20, 2020

OptimusGREEN commented Jun 15, 2020 •

edited

Loading

thalvars commented Oct 20, 2020

tek0011 commented Nov 27, 2020

chatainsim commented Dec 2, 2020

tek0011 commented Dec 3, 2020

Shaegi commented Jan 3, 2021

yannick10012 commented Feb 15, 2021

yannick10012 commented Feb 15, 2021

Shaegi commented Feb 15, 2021

yannick10012 commented Feb 15, 2021

yannick10012 commented Feb 15, 2021

yashmulgaonkar commented Aug 6, 2021

tek0011 commented Aug 6, 2021

Blank in Lovelace #6

Blank in Lovelace #6

Comments

nealeydee commented Dec 11, 2019

Shaegi commented Dec 11, 2019

nealeydee commented Dec 11, 2019 • edited Loading

Shaegi commented Dec 11, 2019 • edited Loading

nealeydee commented Dec 11, 2019 • edited Loading

Shaegi commented Dec 11, 2019

trbolexis commented Dec 19, 2019

Shaegi commented Dec 19, 2019

declanshanaghy commented Feb 19, 2020

Shaegi commented Feb 19, 2020

declanshanaghy commented Feb 20, 2020

declanshanaghy commented Feb 20, 2020

Shaegi commented Feb 20, 2020

declanshanaghy commented Feb 20, 2020

declanshanaghy commented Feb 20, 2020

declanshanaghy commented Feb 20, 2020

declanshanaghy commented Feb 20, 2020

Shaegi commented Feb 20, 2020

OptimusGREEN commented Jun 15, 2020 • edited Loading

thalvars commented Oct 20, 2020

tek0011 commented Nov 27, 2020

chatainsim commented Dec 2, 2020

tek0011 commented Dec 3, 2020

Shaegi commented Jan 3, 2021

yannick10012 commented Feb 15, 2021

yannick10012 commented Feb 15, 2021

Shaegi commented Feb 15, 2021

yannick10012 commented Feb 15, 2021

yannick10012 commented Feb 15, 2021

yashmulgaonkar commented Aug 6, 2021

tek0011 commented Aug 6, 2021

nealeydee commented Dec 11, 2019 •

edited

Loading

Shaegi commented Dec 11, 2019 •

edited

Loading

nealeydee commented Dec 11, 2019 •

edited

Loading

OptimusGREEN commented Jun 15, 2020 •

edited

Loading