Help on customizing custom card's JS file

Share your Projects! Dashboards & Frontend
1

A little background: I used to use TV Remote Card (GitHub - marrobHD/tv-card: đź“ş TV Remote Card) from hacs and I loved it. But since latest hass update it stopped showing buttons and the developer has not responded yet. So I switched to Roku Card from hacs too (GitHub - iantrich/roku-card: đź“ş Roku Remote Card) and just customized it to function the same.

But I really don’t like some of the icon choices, so I dived into it’s inner working (I have some codding experience) and managed to come up with the way I think it works: There are “renderButton” functions that have 3 arguments, one of wich is the icon: this._renderButton('power', 'mdi:power', 'Power')
the first one appears on line 73 of this code roku-card/roku-card.ts at e6d229e02472572017e7a3c1fb8734b2f47b7df3 · iantrich/roku-card · GitHub
One would assume that changing mdi:something for mdi:somethingElse, saving the file and reloading frontend would work, but it changes nothing.

I have no experience codding on JavaScript, so I don’t know if editing www/community/roku-card/roku-card.js and saving it should work, or if I’m making some kind of mistake on the code, or just haven’t found the way to make hass reload the file to see the changes.
I would love if someone with more experience on JS or custom components points me in the right direction

2

Not sure, but i think the file will be overwritten by HACS from the *.js.gz archive in the same folder.
Try to delete (save it anywhere) the *.js.gz file, or save your copy of the *.js file outside of the community folder and edit the path in resources (UI Configuration > Lovelace Dashboards > Resources).
Also it helps to add a version to the resource url after the edit of the js.
For example

...-card.js?v=3
2 Likes
4

Not sure, but i think the file will be overwritten by HACS from the *.js.gz archive in the same folder.
Try to delete (save it anywhere) the *.js.gz file, or save your copy of the *.js file outside of the community folder and edit the path in resources (UI Configuration > Lovelace Dashboards > Resources).
Also it helps to add a version to the resource url after the edit of the js.
For example

...-card.js?v=3

THIS I finally managed to customize it and learn some web codding too. Thanks to your suggestion I found Lovelace Plugins · thomasloven/hass-config Wiki · GitHub wich helped me understand why it wasn’t loading the changes. After grasping the versioning thing I’ve been able to make and see changes.

1636417138021
16364171380211080Ă—1460 77.3 KB

It isn’t final yet, but I’m so happy!

1 Like
5

Very cool my guy. Can you post instructions on how to make those changes? I am running into the exact same issue! This is the first time in my life where I have encountered a situation that is reminiscent of xkcd: Wisdom of the Ancients. You are my DenverCoder9. Only you can solve my problem, and end the cycle.

1 Like
6

Lemme get back form work and I’ll try to help you!

7

Are you back from work yet? :joy:

8

realise this is an old thread but I just stumbled upon it.

Simple instructions that worked for me are:

  1. open studio server code on homeassistant portal (or however you edit your config files).
  2. locate the JS file you are trying to edit. For me it was in www / community.
  3. Create a copy of the file (right click copy and paste in same location). Update name to something identifiable.
  4. make changes as need be and ensure its saved
  5. navigate to the dashboard you are wanting to update. click edit dashboard in the menu button in the top right.
  6. click the top right menu again, and click manage resources.
  7. identify the line that is pointing to the old file, click on it and update it to the new file name.
  8. press update and go back to dashboard and it should be updated (it was for me).