OK still learning Home assistant
Version: HassOS 3.12

Added to raw configuration editor:
resources:

• type: css
  url: /lib/tingle.min.css
• type: css
  url: /wled_control/static/wled.css
• type: js
  url: /wled_control/static/effects.js
• type: js
  url: /wled_control/static/fastLEDPallete.js
• type: js
  url: /lib/tingle.min.js
• type: js
  url: /lib/iro.min.js
• type: module
  url: /wled_control/wled_control.js

Added to config folder:
lib folder containing:

Added to wled_contol

My tree is like this:

I added the card and and getting Custom element doesn't exist: wled-control-card

When I go in chrome and look at the errors I get 404 files not found

In firefox I get get this error saying it was block

Nothing is SSL and I don't see anything related in the other issues (or I missed it)

I have restore to a version before I tried this and redid everything still with no luck.

All the paths appear to be correct. Really stumped on this one.

Looking for where to start.

Thanks

Hi there, sorry im not used to github this is my first time using it to showcase some work.
I fixed the broken version of this where javascript modules refused to load and I have also found a small workaround for the https issue where a secured home assistant instance cant access a WLED on HTTP.
my code and some bad instructions can be found at https://github.com/jake92918/Homeassistant-WLED-Card

for those interested in the https fix:
install the nginx proxy manager.
add a proxy host using an external IP or internal

for internal/Lan:(
domain name = ip of homeassistant server
scheme = https
forward hostname/ip = ip of homeassistant server
forward port = port of homeassistant [usually 8123]
websockets support = on

under custom locations add
location = /anyword you want
scheme = HTTP
forward hostname/ip = ip of WLED server
forward port = 80

under SSL add:
make a new SSL certificate
)

for external/Wan:(
domain name = wan ip or dns hostname
scheme = https
forward hostname/ip = lan ip of homeassistant server
forward port = port of homeassistant [usually 8123]
websockets support = on

under custom locations add
location = /anyword you want
scheme = HTTP
forward hostname/ip = localip of WLED server
forward port = 80

under SSL add:
make a new SSL certificate
)

then on line 33 of wled_control.js where it says fetch('http://${this.config.ip}/win', {
change it to fetch('https://${this.config.ip}/win', {

lastly when you add the card put

"
type: 'custom:wled-control-card'
topic: *wled/mqqt-topic
ip: hostname or ip of WLED server
title: WLED Strip
"

ip should be whatever you used for nginx proxy in the domain field followed by / and what you put for custom location field
an example of what the ip should be is example.com/wledserver.
thanks

The card works fine on my MacBook with Firefox. But when I use the iOS app, the card remains blank. Is there a solution for this or is it a problem with the app?

Hello I added all the files into my www folder but I m getting this:

here is the my resource file:

Is there a way to change the icon? Seems to be defaulted to the lamp, as Lamp123. Is there any way to change the icon to something else?

hey guys,

i am a rookie to hassio

and i made a wled controller yesterday.

now i want it to add this controlpanel to my hassio.
but i cant figure out what to add to the lib folder.
can someone help me out?
maybe with sharing a screenshot?

or something?

kind regards
damian

Fallowed your instructions but I think it's because I'm using https for home assistant I no longer get the error but I get this isnted when I inspect the page in chrome
wled_control.js:20 Mixed Content: The page at 'https://username.duckdns.org:8123/lovelace/hidden_view' was loaded over HTTPS, but requested an insecure resource 'http://192.168.86.223/win'. This request has been blocked; the content must be served over HTTPS.

I feel this issue is related, at least I have the same results so far. I've added the light to my config.yaml, I can control it from the unused entities section (when I don't have it tied to the card) but the card doesn't even show up unless I'm in the UI Editor.

From my config.yaml:
light:
- platform: mqtt
name: "striplights1"
brightness_state_topic: "wled/1/g"
rgb_state_topic: "wled/1/c"
command_topic: "wled/1"
brightness_command_topic: "wled/1"
rgb_command_topic: "wled/1/col"
rgb_command_template: "{{ '#%02x%02x%02x' | format(red, green, blue)}}"
effect_command_topic : "wled/1/api"
effect_list:
- "[FX=00] Solid"
- "[FX=01] Blink"
- "[FX=02] Breathe"
- "[FX=03] Wipe"
....

And the custom card code:
cards:
- entity: light.striplights1
ip: 192.168.xxx.xxx
title: WLED Strip 1
topic: wled/1
type: 'custom:wled-control-card'

I'm hoping it's a simple issue somewhere that I've just missed now that I'm thinking it's more complicated, but who knows... Any support would be great! Thanks!

As mentioned in #6 and #13 there are a lot of problems with integrating the dependencies separatly. It will be a huge advantage to bundle dependencies (via webpack or something else) right into one file and get this one loaded by HASSIO instead of multiple files.

I'm most likely doing something stupid but i get this error
You need to define an entity
{
"type": "custom:wled-control-card",
"topic": "wled/stripone",
"ip": "192.168.86.32",
"title": "WLED Strip"
}

This is my yaml code
cards:

• type: vertical-stack
  cards:
  • type: horizontal-stack
    cards:
    • type: custom:wled-control-card
      topic: "wled/stripone"
      ip: "192.168.86.32"
      title: WLED Strip

Hi
just trying the card for WLED

when i add teh config, its says its missing the entity, if i add the entity for the wled strip, then get a blank display

in regrads to adding the resource to my lovelaceui-yaml, there are some resources in the example that are missing, do i need to download those?

nothing i can't get it to work

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.

I dont have config/lovelace.ui.yaml, should I create it?