My goal

This page serves as an aide-memoire but can be useful for others.

I would like to test changes on Home Assistant cards, in order to propose improvements to developers.

In this page, I will edit a map of the series of cards of Pronote de delphiki.

Organizing Files on Home Assistant

Maps are JavaScript scripts that are normally saved in /homeassistant/www/community

In these folders, we find the JS file and its compacted version in GZ.

Organizing Files on GitHub

So I take the example of Pronote Card Deposit.

The source files of the cards are in lovelace-xx/src/cards.

I get a JS card file and place it on my HA

In my example of the day, I will recover the card absences-card.js and I place it in the folder /homeassistant/www/community/lovelace-pronote/cards of my HA.

I must declare this card as a Resource in HA

In Settings / Dashboards / Resources (3 dots at the top right), I click

I am therefore adding my JS file: /hacsfiles/lovelace-pronote/cards/absences-card.js

It is over, at this stage the card will work on the Dashboard.

I wondered if the pronote.js card should be removed from the resources to test the new card, in order to avoid double reporting. Apparently no, it is the news that is taken into account. I do not know how HA manages the priority of JS codes, I will complete this paragraph if I can understand.

I'm testing an absence card on the Dashboard

Type: custom:pronote-absences-card entity: sensor.pronote _xx _coralie _ absences display _header: true child_name: Coralie

It works:

I'm doing a modification test.

I do a modification test to verify that my absences-card.js code is the one that generates the card.

I edit the file absences-card.js and I will change the line

<ha-icon icon="mdi:check"></ha-icon>

by line

<ha-icon icon="mdi:account-school-outline"></ha-icon>

to change the check mark for absence.

Important !!!! You have to update the JS file that is cached in the browser, so you have to open it and make a small F5.

So in another browser window, I open the file:

http://homeassistant.local:8123/hacsfiles/lovelace-pronote/cards/absences-card.js

I return to my Pronote tab and update the page, the tick has changed:

So I can change the code

So at this point, I can change the code of the JS file that generates the card.

So, if I can offer developers improvements, instead of playing …

Any resemblance to existing or having existed persons is purely fortuitous and unintentional. 🥳