Organize btn templates

2026-09-06 18:08:45 +00:00 · 2020-12-08 10:48:32 +02:00
parent 5b538146fa
commit fd4aa65c22
12 changed files with 0 additions and 0 deletions
@@ -0,0 +1,64 @@
+progress:
+  variables:
+    min_value: 5
+    max_value: 40
+    normal_value: 19
+    high_value: 23
+    low_color: "var(--primary-color)"
+    normal_color: "var(--color-green)"
+    high_color: "var(--color-red)"
+    degrees: 180
+  triggers_update: all
+  show_state: true
+  show_name: true
+  styles:
+    name:
+      - position: absolute
+      - top: "[[[ return this.___config.show_state ? '65%' : 'initial' ]]]"
+      - display: flex
+      - align-items: center
+      - justify-content: center
+      - width: 100%
+      - height: "[[[ return this.___config.show_state ? 'initial' : '100%' ]]]"
+      - font-size: 1em
+    state:
+      - position: absolute
+      - top: "[[[ return this.___config.show_name ? '22%' : 'initial' ]]]"
+      - display: flex
+      - align-items: center
+      - justify-content: center
+      - width: 100%
+      - height: "[[[ return this.___config.show_name ? 'initial' : '100%' ]]]"
+      - font-size: 1.9em
+    icon:
+      - position: absolute
+      - top: 4px
+      - right: -4px
+      - height: 16px
+    img_cell:
+      - position: initial
+    card:
+      - background: >
+          [[[
+            const temp = entity.state;
+
+            const color = temp < variables.normal_value
+              ? variables.low_color
+              : temp < variables.high_value
+                ? variables.normal_color
+                : variables.high_color;
+
+            const min             = variables.min_value;
+            const max             = variables.max_value;
+            const percent         = Math.round((temp - min)/(max - min) * 100);
+            const gradientPercent = 100 - percent;
+
+            const gradient = [
+              `${variables.degrees}deg`,
+              'var(--paper-card-background-color) 0%',
+              `var(--paper-card-background-color) ${gradientPercent}%`,
+              `${color} ${gradientPercent}%`
+            ]
+
+            return `linear-gradient(${gradient.join(',')})`;
+          ]]]