From 911cbb95e877c1ee2ad07a907c83221650664b82 Mon Sep 17 00:00:00 2001
From: Andrew Blackburn <andyblac@icloud.com>
Date: Mon, 9 Oct 2023 12:11:20 +0100
Subject: [PATCH 1/3] Room card: add some animation icons

---
 .../icons/fan_animation.yaml                  | 67 +++++++++++++++++++
 .../icons/garage-door_animation.yaml          | 58 ++++++++++++++++
 .../icons/motion_animation.yaml               | 48 +++++++++++++
 .../icons/shower_animation.yaml               | 67 +++++++++++++++++++
 .../icons/sprinkler_animation.yaml            | 54 +++++++++++++++
 5 files changed, 294 insertions(+)
 create mode 100644 custom_cards/custom_card_andyblac_room/icons/fan_animation.yaml
 create mode 100644 custom_cards/custom_card_andyblac_room/icons/garage-door_animation.yaml
 create mode 100644 custom_cards/custom_card_andyblac_room/icons/motion_animation.yaml
 create mode 100644 custom_cards/custom_card_andyblac_room/icons/shower_animation.yaml
 create mode 100644 custom_cards/custom_card_andyblac_room/icons/sprinkler_animation.yaml

diff --git a/custom_cards/custom_card_andyblac_room/icons/fan_animation.yaml b/custom_cards/custom_card_andyblac_room/icons/fan_animation.yaml
new file mode 100644
index 0000000..bc4a660
--- /dev/null
+++ b/custom_cards/custom_card_andyblac_room/icons/fan_animation.yaml
@@ -0,0 +1,67 @@
+fan_animation:
+  variables:
+    timeout: "[[[ return Date.now() - Date.parse(entity.last_changed); ]]]"
+  triggers_update: "all"
+  show_icon: false
+  custom_fields:
+    icon: >
+      [[[
+        let path = `
+          <path d="M12,11A1,1 0 0,0 11,12A1,1 0 0,0 12,13A1,1 0 0,0 13,12A1,1 0 0,0 12,11M12.5,2C17,2 17.11,5.57 14.75,6.75C13.76,7.24 13.32,8.29 13.13,9.22C13.61,9.42 14.03,9.73 14.35,10.13C18.05,8.13 22.03,8.92 22.03,12.5C22.03,17 18.46,17.1 17.28,14.73C16.78,13.74 15.72,13.3 14.79,13.11C14.59,13.59 14.28,14 13.88,14.34C15.87,18.03 15.08,22 11.5,22C7,22 6.91,18.42 9.27,17.24C10.25,16.75 10.69,15.71 10.89,14.79C10.4,14.59 9.97,14.27 9.65,13.87C5.96,15.85 2,15.07 2,11.5C2,7 5.56,6.89 6.74,9.26C7.24,10.25 8.29,10.68 9.22,10.87C9.41,10.39 9.73,9.97 10.14,9.65C8.15,5.96 8.94,2 12.5,2Z"/>
+        `,
+        style = `
+          <svg viewBox="0 0 24 24">
+            <style>
+              @keyframes rotate {
+                0% {
+                  visibility: visible;
+                  transform: rotate(0deg) translateZ(0);
+                }
+                100% {
+                  transform: rotate(1080deg) translateZ(0);
+                }
+              }
+              .start {
+                animation: rotate 2.8s ease-in;
+                transform-origin: center;
+                visibility: hidden;
+                will-change: transform;
+              }
+              .on {
+                animation: rotate 1.8s linear infinite;
+                transform-origin: center;
+                animation-delay: 2.8s;
+                visibility: hidden;
+                will-change: transform;
+              }
+              .end {
+                animation: rotate 2.8s;
+                transform-origin: center;
+                animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1);
+                will-change: transform;
+              }
+              .start_timeout {
+                animation: rotate 1.8s linear infinite;
+                transform-origin: center;
+                visibility: hidden;
+                will-change: transform;
+              }
+              .end_timeout {
+                transform-origin: center;
+                will-change: transform;
+              }
+            </style>
+        `;
+        if (entity.state === 'on' && variables.timeout < 1000) {
+          return `${style}<g class="start">${path}</g><g class="on">${path}</g></svg>`;
+        }
+        if (entity.state === 'off' && variables.timeout < 1000) {
+          return `${style}<g class="end">${path}</g></svg>`;
+        }
+        if (entity.state === 'on' && variables.timeout > 1000) {
+          return `${style}<g class="start_timeout">${path}</g></svg>`;
+        } else {
+          return `${style}<g class="end_timeout">${path}</g></svg>`;
+        }
+      ]]]
+    img_cell: "[[[  return `<svg viewBox='0 0 24 24'><ellipse stroke='none' fill='none'></ellipse></svg>`; ]]]"
diff --git a/custom_cards/custom_card_andyblac_room/icons/garage-door_animation.yaml b/custom_cards/custom_card_andyblac_room/icons/garage-door_animation.yaml
new file mode 100644
index 0000000..ac84b1b
--- /dev/null
+++ b/custom_cards/custom_card_andyblac_room/icons/garage-door_animation.yaml
@@ -0,0 +1,58 @@
+garage-door_animation:
+  variables:
+    timeout: "[[[ return Date.now() - Date.parse(entity.last_changed); ]]]"
+  # triggers_update: "all"
+  show_icon: false
+  custom_fields:
+    icon: >
+      [[[
+        let path = `
+        <path d="M22 9V20H20V11H4V20H2V9L12 5L22 9M19 12H5V14H19V12M19 18H5V20H19V18M19 15H5V17H19V15Z" />
+        `,
+        style = `
+          <svg viewBox="0 0 24 24">
+            <style>
+              @keyframes door_open {
+                0% { clip-path: inset(0 0 0 0); }
+                25%  { clip-path: polygon(0 0, 100% 0, 100% 100%, 85% 100%, 85% 83%, 15% 83%, 14% 100%, 0 100%); }
+                50%  { clip-path: polygon(0 0, 100% 0, 100% 100%, 85% 100%, 85% 61%, 15% 61%, 14% 100%, 0 100%); }
+                75% { clip-path: polygon(0 0, 100% 0, 100% 100%, 85% 100%, 85% 45%, 15% 45%, 14% 100%, 0 100%); }
+              }
+              @keyframes door_close {
+                0% { clip-path: polygon(0 0, 100% 0, 100% 100%, 85% 100%, 85% 45%, 15% 45%, 14% 100%, 0 100%); }
+                25%  { clip-path: polygon(0 0, 100% 0, 100% 100%, 85% 100%, 85% 61%, 15% 61%, 14% 100%, 0 100%); }
+                50%  { clip-path: polygon(0 0, 100% 0, 100% 100%, 85% 100%, 86% 83%, 15% 83%, 14% 100%, 0 100%); }
+                75% { clip-path: inset(0 0 0 0); }
+              }
+              .start {
+                animation: door_open 3s steps(1);
+              }
+              .on {
+                clip-path: polygon(0 0, 0 100%, 10% 100%, 10% 45%, 85% 45%, 85% 100%, 100% 100%, 100% 0);
+              }
+              .end {
+                animation: door_close 3s steps(1);
+              }
+              .start_timeout {
+                clip-path: polygon(0 0, 0 100%, 10% 100%, 10% 45%, 85% 45%, 85% 100%, 100% 100%, 100% 0);
+              }
+              .end_timeout {
+                transform-origin: center;
+                will-change: transform;
+              }
+            </style>
+        `;
+        if (entity.state === 'open' && variables.timeout < -1000) {
+          return `${style}<g class="start">${path}</g></svg>`;
+        }
+        if (entity.state === 'closed' && variables.timeout < 1000) {
+          return `${style}<g class="end">${path}</g></svg>`;
+        }
+        if (entity.state === 'open' ) {
+          return `${style}<g class="start_timeout">${path}</g></svg>`;
+        } else {
+          return `${style}<g class="end_timeout">${path}</g></svg>`;
+        }
+      ]]]
+
+    img_cell: "[[[  return `<svg viewBox='0 0 24 24'><ellipse stroke='none' fill='none'></ellipse></svg>`; ]]]"
diff --git a/custom_cards/custom_card_andyblac_room/icons/motion_animation.yaml b/custom_cards/custom_card_andyblac_room/icons/motion_animation.yaml
new file mode 100644
index 0000000..6f04ff3
--- /dev/null
+++ b/custom_cards/custom_card_andyblac_room/icons/motion_animation.yaml
@@ -0,0 +1,48 @@
+motion_animation:
+  variables:
+    timeout: "[[[ return Date.now() - Date.parse(entity.last_changed); ]]]"
+  triggers_update: "all"
+  show_icon: false
+  custom_fields:
+    icon: >
+      [[[
+      let path = `
+        <path d="M10,0.2C9,0.2 8.2,1 8.2,2C8.2,3 9,3.8 10,3.8C11,3.8 11.8,3 11.8,2C11.8,1 11,0.2 10,0.2M15.67,1A7.33,7.33 0 0,0 23,8.33V7A6,6 0 0,1 17,1H15.67M18.33,1C18.33,3.58 20.42,5.67 23,5.67V4.33C21.16,4.33 19.67,2.84 19.67,1H18.33M21,1A2,2 0 0,0 23,3V1H21M7.92,4.03C7.75,4.03 7.58,4.06 7.42,4.11L2,5.8V11H3.8V7.33L5.91,6.67L2,22H3.8L6.67,13.89L9,17V22H10.8V15.59L8.31,11.05L9.04,8.18L10.12,10H15V8.2H11.38L9.38,4.87C9.08,4.37 8.54,4.03 7.92,4.03Z" />
+      `,
+        style = `
+          <svg viewBox="0 0 24 24">
+            <style>
+              @keyframes clip {
+                50% { clip-path: polygon(0 0, 55% 0, 100% 100%, 0 100%); }
+              }
+              .start {
+                animation: clip 2s linear infinite;
+              }
+              .on {
+                animation: clip 2s linear infinite;
+              }
+              .end {
+                clip-path: polygon(0 0, 55% 0, 100% 100%, 0 100%);
+              }
+              .start_timeout {
+                animation: clip 2s linear infinite;
+              }
+              .end_timeout {
+                clip-path: polygon(0 0, 55% 0, 100% 100%, 0 100%);
+              }
+            </style>
+        `;
+        if (entity.state === 'on' && variables.timeout < -1000) {
+          return `${style}<g class="start">${path}</g></svg>`;
+        }
+        if (entity.state === 'off' && variables.timeout < 1000) {
+          return `${style}<g class="end">${path}</g></svg>`;
+        }
+        if (entity.state === 'on') {
+          return `${style}<g class="start_timeout">${path}</g></svg>`;
+        } else {
+          return `${style}<g class="end_timeout">${path}</g></svg>`;
+        }
+      ]]]
+
+    img_cell: "[[[  return `<svg viewBox='0 0 24 24'><ellipse stroke='none' fill='none'></ellipse></svg>`; ]]]"
diff --git a/custom_cards/custom_card_andyblac_room/icons/shower_animation.yaml b/custom_cards/custom_card_andyblac_room/icons/shower_animation.yaml
new file mode 100644
index 0000000..47d9759
--- /dev/null
+++ b/custom_cards/custom_card_andyblac_room/icons/shower_animation.yaml
@@ -0,0 +1,67 @@
+shower_animation:
+  variables:
+    timeout: "[[[ return Date.now() - Date.parse(entity.last_changed); ]]]"
+  # triggers_update: "all"
+  show_icon: false
+  custom_fields:
+    icon: >
+      [[[
+        let path = `
+        <path d="M20,20A1,1 0 0,1 21,21A1,1 0 0,1 20,22A1,1 0 0,1 19,21A1,1 0 0,1 20,20M16,20A1,1 0 0,1 17,21A1,1 0 0,1 16,22A1,1 0 0,1 15,21A1,1 0 0,1 16,20M12,20A1,1 0 0,1 13,21A1,1 0 0,1 12,22A1,1 0 0,1 11,21A1,1 0 0,1 12,20M8,20A1,1 0 0,1 9,21A1,1 0 0,1 8,22A1,1 0 0,1 7,21A1,1 0 0,1 8,20M4,20A1,1 0 0,1 5,21A1,1 0 0,1 4,22A1,1 0 0,1 3,21A1,1 0 0,1 4,20M6,17A1,1 0 0,1 7,18A1,1 0 0,1 6,19H6A1,1 0 0,1 5,18A1,1 0 0,1 6,17H6M10,17A1,1 0 0,1 11,18A1,1 0 0,1 10,19A1,1 0 0,1 9,18A1,1 0 0,1 10,17M14,17A1,1 0 0,1 15,18A1,1 0 0,1 14,19A1,1 0 0,1 13,18A1,1 0 0,1 14,17M18,17A1,1 0 0,1 19,18A1,1 0 0,1 18,19A1,1 0 0,1 17,18A1,1 0 0,1 18,17M8,14A1,1 0 0,1 9,15A1,1 0 0,1 8,16A1,1 0 0,1 7,15A1,1 0 0,1 8,14M12,14A1,1 0 0,1 13,15A1,1 0 0,1 12,16A1,1 0 0,1 11,15A1,1 0 0,1 12,14M16,14A1,1 0 0,1 17,15A1,1 0 0,1 16,16A1,1 0 0,1 15,15A1,1 0 0,1 16,14M19,12H5V10H19V12M17.92,9H6.08C6.5,6.5 8.5,4.5 11,4.08V2H13V4.08C15.5,4.5 17.5,6.5 17.92,9Z" />
+        `,
+        style = `
+          <svg viewBox="0 0 24 24">
+            <style>
+              @keyframes clip {
+                0% {
+                  visibility: visible;
+                  clip-path: inset(0 0 45% 0);
+                }
+                100% {
+                  clip-path: inset(0 0 0 0);
+                }
+              }
+              .start {
+                animation: clip 1.4s ease-out;
+                transform-origin: center;
+                visibility: hidden;
+                will-change: transform;
+              }
+              .on {
+                animation: clip 1.4s ease-out infinite;
+                transform-origin: center;
+                animation-delay: 0.7s;
+                visibility: hidden;
+                will-change: transform;
+              }
+              .end {
+                animation: clip 1.4s ease-out;
+                transform-origin: center;
+                animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1);
+                will-change: transform;
+              }
+              .start_timeout {
+                animation: clip 1.4s ease-out infinite;
+                transform-origin: center;
+                visibility: hidden;
+                will-change: transform;
+              }
+              .end_timeout {
+                transform-origin: center;
+                will-change: transform;
+              }
+            </style>
+        `;
+        if (entity.state === 'on' && variables.timeout < 1000) {
+          return `${style}<g class="start">${path}</g><g class="on">${path}</g></svg>`;
+        }
+        if (entity.state === 'off' && variables.timeout < 1000) {
+          return `${style}<g class="end">${path}</g></svg>`;
+        }
+        if (entity.state === 'on' && variables.timeout > 1000) {
+          return `${style}<g class="start_timeout">${path}</g></svg>`;
+        } else {
+          return `${style}<g class="end_timeout">${path}</g></svg>`;
+        }
+      ]]]
+    img_cell: "[[[  return `<svg viewBox='0 0 24 24'><ellipse stroke='none' fill='none'></ellipse></svg>`; ]]]"
diff --git a/custom_cards/custom_card_andyblac_room/icons/sprinkler_animation.yaml b/custom_cards/custom_card_andyblac_room/icons/sprinkler_animation.yaml
new file mode 100644
index 0000000..0d7d1fe
--- /dev/null
+++ b/custom_cards/custom_card_andyblac_room/icons/sprinkler_animation.yaml
@@ -0,0 +1,54 @@
+sprinkler_animation:
+  variables:
+    timeout: "[[[ return Date.now() - Date.parse(entity.last_changed); ]]]"
+  triggers_update: "all"
+  show_icon: false
+  custom_fields:
+    icon: >
+      [[[
+      let path = `
+          <path d="M 11.762099,30.450461 C 11.130999,30.128475 10.75258,29.596437 10.699513,28.95652 L 10.672021,28.625004 H 16 21.327979 L 21.300487,28.95652 C 21.246786,29.604084 20.840682,30.166157 20.211154,30.464224 L 19.871583,30.625004 15.982666,30.622336 12.09375,30.619669 Z M 10.3125,27.562663 C 9.64397,27.48928 9.0181063,27.183762 8.440135,26.648662 7.7133581,25.975795 7.4168181,25.322884 7.3365156,24.218753 7.2147169,22.544068 8.3045844,21.015098 9.96875,20.526003 10.222958,20.451291 10.665862,20.404188 11.34375,20.379771 L 12.34375,20.343753 12.360754,19.171877 12.377758,18.000002 H 16 19.622242 L 19.639246,19.171877 19.65625,20.343753 20.6875,20.381863 C 21.577328,20.414746 21.785842,20.442765 22.207989,20.586179 22.840876,20.801186 23.255373,21.071285 23.714419,21.567816 24.381854,22.289753 24.738364,23.284879 24.670809,24.237391 24.634674,24.746898 24.464542,25.468174 24.343504,25.625003 24.303709,25.676566 24.196499,25.849607 24.105259,26.00954 23.864756,26.43111 23.237761,26.968855 22.642951,27.263697 22.226999,27.469879 22.031423,27.527522 21.611701,27.567636 20.972486,27.628728 10.873868,27.624283 10.3125,27.562663 Z M 10.346591,25.659094 10.5,25.505685 V 24.022497 C 10.5,22.585692 10.49575,22.534785 10.364106,22.394656 10.188382,22.207607 9.9709637,22.210857 9.7784094,22.403412 L 9.625,22.556821 V 24.031396 25.505972 L 9.7903763,25.659238 C 9.9996488,25.853184 10.15254,25.853145 10.346591,25.659094 Z M 12.317308,25.629811 12.5,25.447119 V 24.00197 22.556821 L 12.346591,22.403412 C 12.159829,22.21665 11.94463,22.207092 11.761785,22.377438 11.628294,22.501803 11.625,22.541581 11.625,24.029151 V 25.553431 L 11.789679,25.682967 C 12.009396,25.855796 12.100501,25.846618 12.317308,25.629811 Z M 14.272821,25.682967 14.4375,25.553431 V 24.04637 C 14.4375,22.585055 14.433375,22.534918 14.301606,22.394656 14.136396,22.218799 13.938451,22.20987 13.741299,22.369382 13.594821,22.487895 13.593613,22.499467 13.574903,23.964718 L 13.556057,25.440675 13.741971,25.626589 C 13.962042,25.846661 14.052504,25.856268 14.272821,25.682967 Z M 16.284091,25.659094 16.4375,25.505685 V 24.022497 C 16.4375,22.585692 16.43325,22.534785 16.301606,22.394656 16.131021,22.213077 15.894816,22.209597 15.707153,22.385897 15.563783,22.520587 15.5625,22.535028 15.5625,24.013882 V 25.505972 L 15.727876,25.659238 C 15.937149,25.853184 16.09004,25.853145 16.284091,25.659094 Z M 18.272828,25.633794 18.444042,25.455085 18.425146,23.983971 C 18.407887,22.64035 18.395932,22.501468 18.287188,22.38143 18.133674,22.211973 17.890292,22.213847 17.707153,22.385897 17.563738,22.520629 17.5625,22.534638 17.5625,24.022494 17.5625,25.477281 17.566658,25.527623 17.698394,25.66785 17.880025,25.861186 18.065507,25.85019 18.272828,25.633794 Z M 20.210321,25.682967 20.375,25.553431 V 24.029151 C 20.375,22.541581 20.371706,22.501803 20.238215,22.377438 20.054431,22.206217 19.839961,22.21686 19.650201,22.40662 L 19.493583,22.563238 19.512417,24.037136 19.53125,25.511034 19.70661,25.661769 C 19.920952,25.84601 19.998876,25.849289 20.210321,25.682967 Z M 22.209624,25.659238 22.375,25.505972 V 24.022641 C 22.375,22.585688 22.370751,22.534787 22.239106,22.394656 22.068521,22.213077 21.832316,22.209597 21.644653,22.385897 21.501161,22.520702 21.5,22.533954 21.5,24.037611 V 25.553431 L 21.664679,25.682967 C 21.879565,25.851996 22.007651,25.846419 22.209624,25.659238 Z M 3.5846907,26.435035 C 3.2492533,26.368646 2.7263182,26.104595 2.3903569,25.831965 2.0094514,25.522864 1.6809677,24.829471 1.6392543,24.246471 1.5988999,23.682465 1.7459217,23.122392 2.0631859,22.631523 2.3295138,22.219462 2.5475462,22.036872 3.1075927,21.756893 L 3.4964354,21.562503 H 5.2803674 7.0642994 L 6.8797012,21.92819 C 6.4866681,22.706784 6.4188606,23.012091 6.4195612,24.000003 6.420055,24.695881 6.445145,24.976922 6.5276456,25.210684 6.5867388,25.378121 6.6458194,25.570843 6.6589369,25.638954 6.6720537,25.707066 6.7682219,25.914177 6.8726431,26.099201 6.9770644,26.284226 7.0625,26.450098 7.0625,26.467806 7.0625,26.520717 3.8653913,26.490591 3.5846907,26.435035 Z M 24.9375,26.480183 C 24.9375,26.46369 25.021875,26.289797 25.125,26.093753 25.228125,25.897709 25.3125,25.702299 25.3125,25.659509 25.3125,25.616718 25.353387,25.499747 25.403361,25.399573 25.549869,25.105889 25.643846,24.328359 25.602736,23.750003 25.555256,23.08203 25.429711,22.593137 25.157356,22.015628 L 24.943661,21.562503 H 26.727912 28.512163 L 29.008049,21.820491 C 29.576769,22.116372 29.852804,22.403148 30.143378,23.000003 30.324712,23.372472 30.341266,23.458223 30.342454,24.031253 30.343691,24.627494 30.332977,24.678339 30.109643,25.136224 29.838284,25.692569 29.560924,25.951567 28.902703,26.26326 L 28.46875,26.468753 26.703125,26.489461 C 25.732031,26.50085 24.9375,26.496675 24.9375,26.480183 Z M 11.90625,16.490878 C 11.080274,15.419968 10.92091,15.070539 11.165661,14.867029 11.243016,14.802709 11.598704,14.773434 12.587536,14.750002 L 13.90625,14.718752 V 13.625002 12.531252 L 13.044485,12.500002 C 12.062891,12.464406 12.064956,12.465552 12.063457,11.955471 12.061274,11.212536 12.510921,10.531372 13.240838,10.171872 L 13.653248,9.9687512 15.97905,9.9502962 18.304852,9.9318412 18.688921,10.125719 C 19.204914,10.386191 19.580632,10.745417 19.751923,11.142061 19.906687,11.500435 19.982292,12.22461 19.880645,12.375002 19.831339,12.447952 19.626084,12.475685 18.955515,12.500002 L 18.09375,12.531252 V 13.625002 14.718752 L 19.412464,14.750002 C 20.401296,14.773434 20.756984,14.802709 20.834339,14.867029 21.079278,15.070695 20.917801,15.424524 20.09375,16.489805 L 19.65625,17.055377 16,17.056746 12.34375,17.058115 Z M 19.653409,9.4715918 C 19.488448,9.3066312 19.460104,9.1288299 19.566944,8.9291974 19.649849,8.774288 20.170844,8.4375011 20.327577,8.4375011 20.48151,8.4375011 20.75,8.7123861 20.75,8.8699855 20.75,9.1183061 20.183932,9.6250012 19.906513,9.6250012 19.851681,9.6250012 19.737784,9.5559668 19.653409,9.4715918 Z M 11.740011,9.3736374 C 11.409102,9.1988236 11.231727,8.9507424 11.276736,8.7256942 11.328252,8.4681161 11.424394,8.375001 11.638832,8.375001 12.250573,8.375001 12.727351,9.0226505 12.375,9.3750012 12.219761,9.5302399 12.035698,9.5298443 11.740011,9.3736374 Z M 17.930071,8.6245817 C 17.874423,8.5920667 17.795197,8.4841173 17.754016,8.3846948 17.689977,8.2300942 17.69893,8.1618229 17.815857,7.913071 17.965062,7.5956503 18.198974,7.3750009 18.386269,7.3750009 18.545401,7.3750009 18.8125,7.6489422 18.8125,7.8121497 18.8125,8.0052429 18.589578,8.4071292 18.399565,8.5565929 18.219455,8.698268 18.088611,8.7172155 17.930071,8.6245817 Z M 13.607091,8.4993292 C 13.424519,8.3557179 13.229029,7.8974685 13.260219,7.6862253 13.290717,7.4796753 13.575592,7.286549 13.775691,7.3367709 13.972125,7.3860728 14.241598,7.7747978 14.29119,8.0803985 14.321034,8.2643035 14.299215,8.3314679 14.166524,8.4641592 13.973011,8.6576723 13.820575,8.6672555 13.607091,8.4993292 Z M 21.3125,8.3941273 C 21.160601,8.3398398 21.0625,8.1766985 21.0625,7.9783779 21.0625,7.6641353 21.812951,7.0608653 22.200635,7.0634578 22.393701,7.064749 22.480492,7.1280553 22.553899,7.3211297 22.661958,7.605346 22.478804,7.8583541 21.878389,8.2542754 21.605241,8.4343929 21.498782,8.4607029 21.3125,8.3941273 Z M 10.090361,8.1186885 C 9.92035,8.012091 9.7039062,7.8521416 9.609375,7.7632447 9.2838856,7.4571559 9.4324331,6.9375009 9.8454206,6.9375009 9.9986888,6.9375009 10.446964,7.2129678 10.734375,7.4837672 10.988334,7.7230478 11.018048,8.0614948 10.798593,8.2152073 10.595456,8.3574898 10.436724,8.3358579 10.090361,8.1186885 Z M 15.755023,8.203126 C 15.522028,8.0126991 15.503608,7.3178215 15.725669,7.0957603 15.850189,6.9712402 16.213765,6.9726946 16.339286,7.0982153 16.410807,7.1697371 16.4375,7.3216484 16.4375,7.657171 16.4375,8.0624379 16.420775,8.1296279 16.298593,8.2152073 16.116438,8.3427935 15.920586,8.3384404 15.755023,8.203126 Z M 18.715909,6.9715915 C 18.521129,6.7768115 18.52293,6.637514 18.725466,6.232298 19.049832,5.5833383 19.356759,5.4135774 19.659091,5.7159098 19.856667,5.9134857 19.852422,5.9981829 19.621754,6.4610196 19.299906,7.1068065 19.012895,7.2685778 18.715909,6.9715915 Z M 12.795791,6.9943884 C 12.653166,6.9113484 12.25,6.1120121 12.25,5.9122753 12.25,5.6082746 12.635666,5.4107098 12.896053,5.581322 13.050587,5.6825767 13.5,6.4797477 13.5,6.6526065 13.5,6.8046177 13.215066,7.0627909 13.049716,7.0606003 12.970809,7.0595553 12.856544,7.0297596 12.795791,6.9943884 Z M 23.035714,6.9017865 C 22.911384,6.7774558 22.90895,6.4435752 23.031103,6.269177 23.170243,6.0705263 23.866891,5.6250007 24.038372,5.6250007 24.37599,5.6250007 24.550412,6.0609825 24.33553,6.3677702 24.18458,6.5832814 23.506831,7.0000009 23.307274,7.0000009 23.211934,7.0000009 23.089732,6.9558046 23.035714,6.9017865 Z M 8.375,6.8160477 C 8.2546875,6.7522865 8.0226563,6.5823896 7.859375,6.4384983 7.616565,6.2245221 7.5625,6.1388204 7.5625,5.9679034 7.5625,5.7333637 7.6828012,5.581748 7.9151762,5.5234256 8.036325,5.4930192 8.1669781,5.5493234 8.4943875,5.7730323 9.0593069,6.1590245 9.2182119,6.5317889 8.9375,6.8125009 8.7843388,6.9656621 8.6588069,6.966454 8.375,6.8160477 Z M 15.742041,5.7561232 C 15.614117,5.652537 15.592262,5.5718269 15.572138,5.128673 15.544194,4.5133431 15.599847,4.0965817 15.726932,3.9694972 15.850391,3.8460385 16.214319,3.8482479 16.339286,3.9732148 16.418035,4.0519641 16.4375,4.2253793 16.4375,4.8482149 16.4375,5.5416674 16.42409,5.6384106 16.3125,5.7500007 16.155133,5.9073674 15.931779,5.9097646 15.742041,5.7561232 Z M 24.903409,5.4715916 C 24.725614,5.293796 24.713938,5.1885288 24.844098,4.9368275 24.968921,4.6954466 25.452148,4.4119396 25.652879,4.4623197 26.189454,4.5969915 26.080671,5.2307906 25.473662,5.50648 25.140823,5.657648 25.086119,5.6543011 24.903409,5.4715916 Z M 6.3647625,5.2940991 C 6.0306654,5.0392748 5.9352476,4.8088379 6.0665351,4.573871 6.2415477,4.2606487 6.7167031,4.3344584 7.0627875,4.728627 7.2836181,4.9801394 7.2961513,5.1119716 7.1204637,5.335322 6.9413219,5.5630643 6.7001512,5.5499087 6.3647625,5.2940991 Z M 19.715909,5.1590916 C 19.511123,4.9543053 19.521156,4.8485185 19.796875,4.3054155 20.066024,3.7752535 20.256396,3.6518594 20.551129,3.8165277 20.790702,3.9503776 20.805681,4.2692756 20.592184,4.690592 20.281608,5.303483 20.007078,5.4502604 19.715909,5.1590916 Z M 11.800509,5.128984 C 11.616315,4.9840962 11.25,4.3187206 11.25,4.129036 11.25,3.9622157 11.515193,3.6875005 11.676231,3.6875005 11.878681,3.6875005 12.091091,3.9087222 12.299966,4.3371126 12.54032,4.830065 12.544531,4.8986516 12.346591,5.0965916 12.161716,5.281467 12.006096,5.290698 11.800509,5.128984 Z M 20.715909,3.3465914 C 20.529592,3.1602746 20.521575,2.9502406 20.688304,2.6234245 20.906692,2.1953486 21.2585,2.0799289 21.526879,2.3483084 21.666497,2.4879258 21.648648,2.7074888 21.468834,3.062334 21.235232,3.5233266 20.986536,3.6172184 20.715909,3.3465914 Z M 10.82557,3.3396203 C 10.641556,3.2107317 10.4375,2.8034142 10.4375,2.5649902 10.4375,2.3653941 10.623089,2.1250003 10.777181,2.1250003 10.997362,2.1250003 11.172711,2.2593286 11.330164,2.5486209 11.539942,2.9340525 11.543365,3.0873172 11.346591,3.2840913 11.16902,3.4616624 11.022156,3.4773147 10.82557,3.3396203 Z M 15.827216,2.6865623 C 15.453885,2.5330283 15.486684,1.5294968 15.868999,1.4081547 16.043776,1.3526827 16.306274,1.4340856 16.376649,1.5655806 16.46433,1.729415 16.451917,2.4572357 16.359375,2.5783839 16.258931,2.7098778 16.007963,2.760895 15.827216,2.6865623 Z"/>
+        `,
+        style = `
+          <svg viewBox="0 0 32 32">
+            <style>
+              @keyframes fountain {
+                0%, 100 { clip-path: polygon(0 100%, 0 0, 100% 0, 100% 100%); }
+                50% { clip-path: polygon(0 100%, 0 29%, 100% 29%, 100% 100%); }
+                60% { clip-path: polygon(0 100%, 100% 100%, 100% 37%, 79% 36%, 71% 21%, 56% 25%, 44% 25%, 31% 20%, 20% 36%, 0 36%); }
+                70% { clip-path: polygon(0 100%, 100% 100%, 100% 36%, 79% 36%, 71% 22%, 81% 1%, 24% 0, 31% 21%, 20% 36%, 0 36%); }
+                80% { clip-path: polygon(0 100%, 100% 100%, 100% 36%, 79% 36%, 76% 28%, 100% 0, 0 0, 23% 28%, 20% 36%, 0 36%); }
+              }
+              }
+              .start {
+                animation: fountain 1.5s ease infinite;
+              }
+              .on {
+                animation: fountain 1.5s ease infinite;
+              }
+              .end {
+                animation: fountain 1.5s ease infinite;
+              }
+              .start_timeout {
+                animation: fountain 1.5s ease infinite;
+              }
+              .end_timeout {
+                transform-origin: center;
+                will-change: transform;
+              }
+            </style>
+        `;
+        if (entity.state === 'on' && variables.timeout < -1000) {
+          return `${style}<g class="start">${path}</g></svg>`;
+        }
+        if (entity.state === 'off' && variables.timeout < 1000) {
+          return `${style}<g class="end">${path}</g></svg>`;
+        }
+        if (entity.state === 'on') {
+          return `${style}<g class="start_timeout">${path}</g></svg>`;
+        } else {
+          return `${style}<g class="end_timeout">${path}</g></svg>`;
+        }
+      ]]]
+
+    img_cell: "[[[  return `<svg viewBox='0 0 24 24'><ellipse stroke='none' fill='none'></ellipse></svg>`; ]]]"

From d03d612304b7db29ee85601b4666590b5f9e4a4a Mon Sep 17 00:00:00 2001
From: Andrew Blackburn <andyblac@icloud.com>
Date: Mon, 9 Oct 2023 12:12:33 +0100
Subject: [PATCH 2/3] docs: update Room card to show animation templates.

---
 docs/usage/custom_cards/custom_card_andyblac_room.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/docs/usage/custom_cards/custom_card_andyblac_room.md b/docs/usage/custom_cards/custom_card_andyblac_room.md
index 92143d8..de74bdc 100644
--- a/docs/usage/custom_cards/custom_card_andyblac_room.md
+++ b/docs/usage/custom_cards/custom_card_andyblac_room.md
@@ -134,6 +134,8 @@ If you want to tweak this card a little bit more, below are some examples. The f
       entity_4:
         entity_id: fan.bathroom_extractor
         ulm_custom_card_andyblac_room_icon_color_on: blue
+        templates:
+          - fan_animation
 ```
 
 ??? note "Template Code"

From 0d3ed18b0ca2b74c6faaa1857804007163ecf1f7 Mon Sep 17 00:00:00 2001
From: Andrew Blackburn <andyblac@icloud.com>
Date: Thu, 12 Oct 2023 21:00:22 +0100
Subject: [PATCH 3/3] Room card: fix sensor off colour for animation

---
 .../custom_card_andyblac_room.yaml                          | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/custom_cards/custom_card_andyblac_room/custom_card_andyblac_room.yaml b/custom_cards/custom_card_andyblac_room/custom_card_andyblac_room.yaml
index 54159df..9cbfdc7 100644
--- a/custom_cards/custom_card_andyblac_room/custom_card_andyblac_room.yaml
+++ b/custom_cards/custom_card_andyblac_room/custom_card_andyblac_room.yaml
@@ -1,6 +1,6 @@
 ---
 custom_card_andyblac_room:
-  # v2.0.2
+  # v2.0.3
   template:
     - "ulm_translation_engine"
 
@@ -662,9 +662,9 @@ custom_card_andyblac_room_sensor_icon:
         - fill: >
             [[[
               if (variables.ulm_custom_card_andyblac_room_sensor_color_on == 'theme') {
-                return 'rgba(var(--color-'+variables.ulm_custom_card_andyblac_room_sensor_color_on+'),0.2)';
+                return 'rgba(var(--color-'+variables.ulm_custom_card_andyblac_room_sensor_color+'),0.2)';
               } else {
-                return 'rgba(var(--color-'+variables.ulm_custom_card_andyblac_room_sensor_color_on+'),0.4)';
+                return 'rgba(var(--color-'+variables.ulm_custom_card_andyblac_room_sensor_color+'),0.4)';
               }
             ]]]
   state: