search

Shaegi / Homeassistant-WLED-Card

Home Assistant Lovelace Card to control https://github.com/Aircoookie/WLED solution to "controlling WS2812B RGB LEDs with an ESP8266 over WiFi"
45 stars 5 forks source link

Blank in Lovelace #6

Open nealeydee opened 4 years ago

nealeydee commented 4 years ago

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: image 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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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).

image

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 commented 4 years ago

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: image

trbolexis commented 4 years ago

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:

image

Shaegi commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

And here's the lovelace card 

      - ip: 192.168.30.35
        title: BBQ LEDs
        topic: wled/d5ca8c
        type: 'custom:wled-control-card'
Shaegi commented 4 years ago

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

declanshanaghy commented 4 years ago

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

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

declanshanaghy commented 4 years ago

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 commented 4 years ago

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

declanshanaghy commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 3 years ago

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

tek0011 commented 3 years ago

same issues as well: image

chatainsim commented 3 years ago

Hello, I have the same issue. image

tek0011 commented 3 years ago

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

Shaegi commented 3 years ago

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 commented 3 years ago

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

image

image

image

image

image

yannick10012 commented 3 years ago

image

Shaegi commented 3 years ago

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 commented 3 years ago

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

yannick10012 commented 3 years ago

image

yashmulgaonkar commented 3 years ago

Same issue as above: image

tek0011 commented 3 years ago

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.