{"id":5170,"date":"2023-10-07T16:04:07","date_gmt":"2023-10-07T14:04:07","guid":{"rendered":"https:\/\/www.sigalou-domotique.fr\/?p=5170"},"modified":"2026-01-02T16:57:06","modified_gmt":"2026-01-02T14:57:06","slug":"jajoute-un-gif-anime-transparent-a-mon-dashboard-ha","status":"publish","type":"post","link":"https:\/\/www.sigalou-domotique.fr\/en\/jajoute-un-gif-anime-transparent-a-mon-dashboard-ha","title":{"rendered":"I add a transparent animated gif to my HA Dashboard"},"content":{"rendered":"<h3>My goal<\/h3>\r\n<p>My goal is to make an animation via an animated gif.<\/p>\r\n<p>I can change gif depending on the state of an entity.<\/p>\r\n<p><a href=\"https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2023\/10\/jusaucompteur.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-5171\" src=\"https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2023\/10\/jusaucompteur.gif\" alt=\"\" width=\"467\" height=\"459\" \/><\/a><!--more--><\/p>\r\n<h3>I will draw the two balls (one red one blue)<\/h3>\r\n<p>A little shot of Photoshop or other and here is the basic file<\/p>\r\n<p><a href=\"https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2023\/10\/2boules.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-5175\" src=\"https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2023\/10\/2boules.png\" alt=\"\" width=\"36\" height=\"16\" \/><\/a><\/p>\r\n<h3>I will create the animation in Canva<\/h3>\r\n<p>As my version of photoshop is old, I don\u2019t have the editing functionality at home, I use Canva (online).<\/p>\r\n<p>To avoid a white mark when turning, I put the bottom of my HA screen in the background, the result is:<\/p>\r\n<p><a href=\"https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2023\/10\/resultatCanva.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone  wp-image-5176\" src=\"https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2023\/10\/resultatCanva.gif\" alt=\"\" width=\"102\" height=\"255\" \/><\/a><\/p>\r\n<h3>I'm going to rock on a transparent background<\/h3>\r\n<p>I couldn\u2019t figure out how to do this with Canva, I use an online tool<\/p>\r\n<ul>\r\n<li><a href=\"https:\/\/onlinegiftools.com\/remove-gif-background\" target=\"_blank\" rel=\"noopener\">https:\/\/onlinegiftools.com\/remove-gif-background<\/a><\/li>\r\n<\/ul>\r\n<p>The result is\u00a0<\/p>\r\n<p><a href=\"https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2023\/10\/anime8.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone  wp-image-5177\" src=\"https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2023\/10\/anime8.gif\" alt=\"\" width=\"105\" height=\"263\" \/><\/a><\/p>\r\n<h3>I do two other animations<\/h3>\r\n<p>To have three states, I generate two other files, one faster and one slower, so three files in total:<\/p>\r\n<table style=\"border-collapse: collapse; width: 100%;\">\r\n<tbody>\r\n<tr>\r\n<td style=\"width: 33.3333%;\"><a href=\"https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2023\/10\/rapide-1.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-5182\" src=\"https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2023\/10\/rapide-1.gif\" alt=\"\" width=\"400\" height=\"1000\" \/><\/a><\/td>\r\n<td style=\"width: 33.3333%;\"><a href=\"https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2023\/10\/moyenne.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-5183\" src=\"https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2023\/10\/moyenne.gif\" alt=\"\" width=\"400\" height=\"1000\" \/><\/a><\/td>\r\n<td style=\"width: 33.3333%;\"><a href=\"https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2023\/10\/lente.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-5184\" src=\"https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2023\/10\/lente.gif\" alt=\"\" width=\"400\" height=\"1000\" \/><\/a><\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n<h3>I add a template that will match the power consumed\u00a0<\/h3>\r\n<p>In my templates.yaml file, I add<\/p>\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"yaml\">- name: Consumption _Single speed _id: sensor.consumption _speed state: &gt;- {% if (states('sensor.linky_power_apparent')|float) &lt; 400 %} slow {% elif (states('sensor.linky_apparent _power')|float) &gt;4000 %} fast {% else %} average {% endif %} <\/pre>\r\n<p>On the dashboard, I add a card that will display one of the 3 animated gif, depending on the value of sensor.consumption _speed.<\/p>\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"yaml\">- type: image entity: sensor.consumption _speed tap_action: Action: none style: width: 7% top: 91.6% left: 26.7% state_image: slow: \/local\/home\/Conso\/lente.gif average: \/local\/home\/Conso\/medium.fast gif: \/local\/home\/Conso\/fast.gif<\/pre>\r\n<p>\u00a0<\/p>","protected":false},"excerpt":{"rendered":"<p>Mon objectif Mon objectif est de r\u00e9aliser une animation via un gif anim\u00e9. Je pourrai changer de gif en fonction de l&rsquo;\u00e9tat d&rsquo;une entit\u00e9.<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[14,53,166],"tags":[81],"class_list":["post-5170","post","type-post","status-publish","format-standard","hentry","category-domotique","category-home-assistant","category-retex","tag-developpement"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.sigalou-domotique.fr\/en\/wp-json\/wp\/v2\/posts\/5170","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=5170"}],"version-history":[{"count":0,"href":"https:\/\/www.sigalou-domotique.fr\/en\/wp-json\/wp\/v2\/posts\/5170\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.sigalou-domotique.fr\/en\/wp-json\/wp\/v2\/media?parent=5170"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sigalou-domotique.fr\/en\/wp-json\/wp\/v2\/categories?post=5170"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sigalou-domotique.fr\/en\/wp-json\/wp\/v2\/tags?post=5170"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}