Trouble with using a custom .js file as a card on a panel dashboard

Configuration Frontend
1

I’ve copied the following .js file into my www folder:

https://github.com/konnectedvn/lovelace-vertical-slider-cover-card/blob/61b42f3061572955e6d842f3c39d23f55a18d95b/vertical-slider-cover-card.js

Then I went to Settings → Dashboard → (Menu) → Resources and added “vertical-slider-cover-card.js” to this list. I’ve also tried different variation of it such as

  • /vertical-slider-cover-card.js
  • /www/vertical-slider-cover-card.js
  • local/vertical-slider-cover-card.js
    */local/vertical-slider-cover-card.js

But no matter what I do, I can’t get the card to show on the dash board. All I get is an error where the card would be which says, “Custom element doesn’t exist: vertical-slider-cover-card”

I’m searched and searched and can’t figure out what I’m doing wrong. Can someone point me in the right direction?

2

Why not install via HACS instead?

3

It’s less about the best to install it. I’m trying to get anything to work. Like the light slider at this link:

https://github.com/DBuit/hass-smart-home-panel-card

I drop the .js file in my www folder but it doesn’t show up anywhere. I dropped it in www/switch but it doesn’t work there either. That’s why I added so many different variations in resources.

4

I figured it out. It was the indenting.

Instead of this:

- type: "custom:custom-smart-home-panel-card"
  title: Test
  icon: mdi:floor-lamp
  showButton: "show"
  buttonText: "Test"
  buttonPath: "/lovelace/0"
  background: "#1c1d1f"
  entities:
    - entity: light.beganegrond
    - entity: light.voordeurlicht

It has to be like this:

type: "custom:custom-smart-home-panel-card"
title: Test
icon: mdi:floor-lamp
showButton: "show"
buttonText: "Test"
buttonPath: "/lovelace/0"
background: "#1c1d1f"
entities:
  - entity: light.beganegrond
  - entity: light.voordeurlicht