{"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\/de\/jajoute-un-gif-anime-transparent-a-mon-dashboard-ha","title":{"rendered":"Ich f\u00fcge meinem HA-Dashboard ein transparentes animiertes GIF hinzu"},"content":{"rendered":"<h3>Mein Ziel<\/h3>\r\n<p>Mein Ziel ist es, eine Animation \u00fcber ein animiertes GIF zu erstellen.<\/p>\r\n<p>Je nach Zustand eines Unternehmens kann ich das GIF \u00e4ndern.<\/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>Ich zeichne beide Kugeln (eine rote eine blaue)<\/h3>\r\n<p>Ein kleiner Schuss Photoshop oder was auch immer und hier ist die Basisdatei<\/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>Ich werde die Animation in Canva erstellen<\/h3>\r\n<p>Da meine Photoshop-Version \u00e4lter ist, habe ich keine Home-Mount-Funktionalit\u00e4t, sondern verwende Canva (online).<\/p>\r\n<p>Um eine wei\u00dfe Markierung beim Beschneiden zu vermeiden, lege ich den Hintergrund meines HA-Bildschirms in den Hintergrund, das Ergebnis ist:<\/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>Ich werde auf einen transparenten Hintergrund kippen<\/h3>\r\n<p>Ich habe nicht herausgefunden, wie ich das mit Canva machen soll, ich nutze ein 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>Das Ergebnis ergibt\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>Ich mache zwei weitere Animationen.<\/h3>\r\n<p>Um drei Zust\u00e4nde zu haben, erzeuge ich zwei weitere Dateien, eine schnellere und eine langsamere, also insgesamt drei Dateien:<\/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>Ich f\u00fcge ein Template hinzu, das der verbrauchten Leistung entspricht.\u00a0<\/h3>\r\n<p>In meiner Datei templates.yaml f\u00fcge ich Folgendes hinzu:<\/p>\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"yaml\">- name: Verbrauch_Einmalgeschwindigkeit_id: sensor.consumation_Geschwindigkeit state: &gt;- {% if (states('sensor.linky_macht_apparente')|float) &lt; 400 %} langsam {% elif (states('sensor.linky_macht_apparente')|float) &gt;4000 %} schnell {% else %} Durchschnitt {% endif %} <\/pre>\r\n<p>Auf dem Dashboard f\u00fcge ich eine Karte hinzu, die je nach dem Wert von sensor.consumation_speed eines der 3 animierten GIFs anzeigt.<\/p>\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"yaml\">- Typ: Bild entity: sensor.consumation_Geschwindigkeit tap_action: Ma\u00dfnahme: none Stil: width: 7% top: 91.6% left: 26.7% state_image: Langsam: \/local\/home\/Conso\/lente.gif Durchschnitt: \/local\/home\/Conso\/mittel.gif schnell: \/local\/home\/Conso\/schnell.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\/de\/wp-json\/wp\/v2\/posts\/5170","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.sigalou-domotique.fr\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.sigalou-domotique.fr\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.sigalou-domotique.fr\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sigalou-domotique.fr\/de\/wp-json\/wp\/v2\/comments?post=5170"}],"version-history":[{"count":0,"href":"https:\/\/www.sigalou-domotique.fr\/de\/wp-json\/wp\/v2\/posts\/5170\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.sigalou-domotique.fr\/de\/wp-json\/wp\/v2\/media?parent=5170"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sigalou-domotique.fr\/de\/wp-json\/wp\/v2\/categories?post=5170"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sigalou-domotique.fr\/de\/wp-json\/wp\/v2\/tags?post=5170"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}