{"id":7166,"date":"2024-05-18T10:25:48","date_gmt":"2024-05-18T08:25:48","guid":{"rendered":"https:\/\/www.sigalou-domotique.fr\/?p=7166"},"modified":"2026-01-04T21:25:23","modified_gmt":"2026-01-04T19:25:23","slug":"aide-memoire-test-de-cartes-home-assistant","status":"publish","type":"post","link":"https:\/\/www.sigalou-domotique.fr\/en\/aide-memoire-test-de-cartes-home-assistant","title":{"rendered":"Memory Help Card Testing Home Assistant"},"content":{"rendered":"<h2>My goal<\/h2>\r\n<p>This page serves as an aide-memoire but can be useful for others.<\/p>\r\n<p>I would like to test changes on Home Assistant cards, in order to propose improvements to developers.<\/p>\r\n<p>In this page, I will edit a map of the series of cards of Pronote de delphiki.<!--more--><\/p>\r\n<h2>Organizing Files on Home Assistant<\/h2>\r\n<p>Maps are JavaScript scripts that are normally saved in \/homeassistant\/www\/community<\/p>\r\n<p><a href=\"https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2024\/05\/cartes.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-7168\" src=\"https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2024\/05\/cartes.png\" alt=\"\" width=\"352\" height=\"625\" srcset=\"https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2024\/05\/cartes.png 352w, https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2024\/05\/cartes-169x300.png 169w\" sizes=\"auto, (max-width: 352px) 100vw, 352px\" \/><\/a><\/p>\r\n<p>In these folders, we find the JS file and its compacted version in GZ.<\/p>\r\n<p><a href=\"https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2024\/05\/cartes2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-7169\" src=\"https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2024\/05\/cartes2.png\" alt=\"\" width=\"562\" height=\"154\" srcset=\"https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2024\/05\/cartes2.png 562w, https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2024\/05\/cartes2-300x82.png 300w\" sizes=\"auto, (max-width: 562px) 100vw, 562px\" \/><\/a><\/p>\r\n<h2>Organizing Files on GitHub<\/h2>\r\n<p>So I take the example of <a href=\"https:\/\/github.com\/delphiki\/lovelace-pronote\" target=\"_blank\" rel=\"noopener\">Pronote Card Deposit<\/a>.<\/p>\r\n<p><a href=\"https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2024\/05\/cartes3.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-7170\" src=\"https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2024\/05\/cartes3.png\" alt=\"\" width=\"707\" height=\"172\" srcset=\"https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2024\/05\/cartes3.png 707w, https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2024\/05\/cartes3-600x146.png 600w, https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2024\/05\/cartes3-300x73.png 300w\" sizes=\"auto, (max-width: 707px) 100vw, 707px\" \/><\/a><\/p>\r\n<p>The source files of the cards are in lovelace-xx\/src\/cards.<\/p>\r\n<h2>I get a JS card file and place it on my HA<\/h2>\r\n<p>In my example of the day, I will recover the card <a class=\"Link--primary\" title=\"absences-card.js\" href=\"https:\/\/github.com\/delphiki\/lovelace-pronote\/blob\/main\/src\/cards\/absences-card.js\" target=\"_blank\" rel=\"noopener\" aria-label=\"absences-card.js, (File)\">absences-card.js<\/a> and I place it in the folder \/homeassistant\/www\/community\/lovelace-pronote\/cards of my HA.<\/p>\r\n<p><a href=\"https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2024\/05\/cartes4.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-7171\" src=\"https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2024\/05\/cartes4.png\" alt=\"\" width=\"372\" height=\"65\" srcset=\"https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2024\/05\/cartes4.png 372w, https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2024\/05\/cartes4-300x52.png 300w\" sizes=\"auto, (max-width: 372px) 100vw, 372px\" \/><\/a><\/p>\r\n<h2>I must declare this card as a Resource in HA<\/h2>\r\n<p>In Settings \/ Dashboards \/ Resources (3 dots at the top right), I click<\/p>\r\n<p><a href=\"https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2024\/05\/cartes5.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-7172\" src=\"https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2024\/05\/cartes5.png\" alt=\"\" width=\"248\" height=\"61\" \/><\/a><\/p>\r\n<p>I am therefore adding my JS file: \/hacsfiles\/lovelace-pronote\/cards\/absences-card.js<\/p>\r\n<p><a href=\"https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2024\/05\/cartes6.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-7173\" src=\"https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2024\/05\/cartes6.png\" alt=\"\" width=\"611\" height=\"472\" srcset=\"https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2024\/05\/cartes6.png 611w, https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2024\/05\/cartes6-600x464.png 600w, https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2024\/05\/cartes6-300x232.png 300w\" sizes=\"auto, (max-width: 611px) 100vw, 611px\" \/><\/a><\/p>\r\n<p>It is over, at this stage the card will work on the Dashboard.<\/p>\r\n<p>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.<\/p>\r\n<h2>I'm testing an absence card on the Dashboard<\/h2>\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"yaml\">Type: custom:pronote-absences-card entity: sensor.pronote _xx _coralie _ absences display _header: true child_name: Coralie<\/pre>\r\n<p>It works:<a href=\"https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2024\/05\/cartes7.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-7174\" src=\"https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2024\/05\/cartes7.png\" alt=\"\" width=\"700\" height=\"241\" srcset=\"https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2024\/05\/cartes7.png 700w, https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2024\/05\/cartes7-600x207.png 600w, https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2024\/05\/cartes7-300x103.png 300w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/a><\/p>\r\n<h2>I'm doing a modification test.<\/h2>\r\n<p>I do a modification test to verify that my absences-card.js code is the one that generates the card.<\/p>\r\n<p>I edit the file absences-card.js and I will change the line<\/p>\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">&lt;ha-icon icon=\"mdi:check\"&gt;&lt;\/ha-icon&gt;<\/pre>\r\n<p>by line<\/p>\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">&lt;ha-icon icon=\"mdi:account-school-outline\"&gt;&lt;\/ha-icon&gt;<\/pre>\r\n<p>to change the check mark for absence.<\/p>\r\n<p><em><strong>Important<\/strong><\/em> !!!! You have to update the JS file that is cached in the browser, so you have to open it and make a small F5.<\/p>\r\n<p>So in another browser window, I open the file:<\/p>\r\n<p>http:\/\/homeassistant.local:8123\/hacsfiles\/lovelace-pronote\/cards\/absences-card.js<\/p>\r\n<p>I return to my Pronote tab and update the page, the tick has changed:<\/p>\r\n<p><a href=\"https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2024\/05\/cartes8.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-7177\" src=\"https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2024\/05\/cartes8.png\" alt=\"\" width=\"218\" height=\"237\" \/><\/a><\/p>\r\n<h2>So I can change the code<\/h2>\r\n<p>So at this point, I can change the code of the JS file that generates the card.<\/p>\r\n<p>So, if I can offer developers improvements, instead of playing \u2026<\/p>\r\n<p><a href=\"https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2024\/05\/yaquafautquon.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-7178\" src=\"https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2024\/05\/yaquafautquon.jpg\" alt=\"\" width=\"243\" height=\"243\" srcset=\"https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2024\/05\/yaquafautquon.jpg 1024w, https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2024\/05\/yaquafautquon-300x300.jpg 300w, https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2024\/05\/yaquafautquon-100x100.jpg 100w, https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2024\/05\/yaquafautquon-600x600.jpg 600w, https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2024\/05\/yaquafautquon-150x150.jpg 150w, https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2024\/05\/yaquafautquon-768x768.jpg 768w\" sizes=\"auto, (max-width: 243px) 100vw, 243px\" \/><\/a><\/p>\r\n<p>Any resemblance to existing or having existed persons is purely fortuitous and unintentional. \ud83e\udd73<\/p>\r\n<p>&nbsp;<\/p>","protected":false},"excerpt":{"rendered":"<p>My goal This page serves as a checklist 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.<\/p>","protected":false},"author":1,"featured_media":7167,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[14,166],"tags":[],"class_list":["post-7166","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-domotique","category-retex"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.sigalou-domotique.fr\/en\/wp-json\/wp\/v2\/posts\/7166","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.sigalou-domotique.fr\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.sigalou-domotique.fr\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.sigalou-domotique.fr\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sigalou-domotique.fr\/en\/wp-json\/wp\/v2\/comments?post=7166"}],"version-history":[{"count":0,"href":"https:\/\/www.sigalou-domotique.fr\/en\/wp-json\/wp\/v2\/posts\/7166\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.sigalou-domotique.fr\/en\/wp-json\/wp\/v2\/media\/7167"}],"wp:attachment":[{"href":"https:\/\/www.sigalou-domotique.fr\/en\/wp-json\/wp\/v2\/media?parent=7166"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sigalou-domotique.fr\/en\/wp-json\/wp\/v2\/categories?post=7166"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sigalou-domotique.fr\/en\/wp-json\/wp\/v2\/tags?post=7166"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}