我添加一个透明的动画GIF到我的HA仪表板

我的目标

我的目标是通过动画GIF制作动画。

我可以根据实体的状态更改 gif。

我将画两个球(一个红色的蓝色)

一个小照片的Photoshop或其他,这里是基本文件。

我将在Canva中创建动画

由于我的Photoshop版本很老,我在家里没有编辑功能,我使用Canva(在线)。

为了避免在转动时出现白色标记,我把HA屏幕的底部放在后台,结果是:

我要在透明的背景上摇晃

我无法弄清楚如何使用Canva,我使用在线工具。

其结果是 

我做另外两个动画

为了有三个状态,我生成另外两个文件,一个更快,一个较慢,所以总共三个文件:

我添加了一个模板,将匹配所消耗的功率 

在我的Templates.yaml文件中,我添加了

姓名: 消费_单速_id: Sensor.Consumption _ 速度状态: >- {% if(states('sensor.linky_power_apparent')|float)< 400 %慢速 {% Elif(states('sensor.linky_apparent _power')|float)>4000 %快速 {% 其他 其它 %平均值 {% Endif 的 %} 

在仪表板上,我添加了一张卡片,该卡将显示 3 个动画 gif 中的一个,具体取决于 sensor.consumption _speed 的值。

类型: 图像实体: Sensor.consumption _speed tap_action : 行动: 无风格: 宽度 : 7% 顶部: 91.6% 左: 26.7% state_image : 慢 : /local/home/Conso/lente.gif 平均值: /local/home/Conso/medium.fast gif : /local/home/Conso/fast.gif