Adding a custom card to lovelace

Configuration Frontend
1

I am trying to add a time picker card to lovelace I found one on github that looks like it is just what i need but im having trouble editing my yaml.

I created a file called ui-lovelace.yaml in my config directory
I added the following to configuration.

lovelace:
mode: yaml

I added time-picker-card.js to my WWW folder

Instructions are telling me to add the following to my “config”

resources:

  • url: /local/time-picker-card.js
    type: module

This is where i am getting dead ended. Exactly where does this go?

2

why are you not using HACS? It certainly makes the process easy.

3

i have been avoiding installing that because i have limited experience and from what im reading you can basically “brick” your whole system if it is not done properly

4

Hello,
You can use configuration.yaml (see my example bellow):

image
image645×586 15.9 KB

Or with User Interface:

Configuration > Lovelace Dashboards > Resources > +Add Resource

image
image1801×752 67 KB

image
image1915×912 75.9 KB

5

You are the champ.

6

I know this is an old thread but I was curious - I have a similar setup, with a .js file and I can see my custom card, Great! However I just modified my .js file and my custom card isn’t picking up the new changes. Is there something I need to do to reload my .js file? I’ve tried deleting the resource and re-adding it but with no luck

7

Restart HA

developer-tools/yaml

and clear your browser