New card configuration option: circle_color

CHANGELOG.md

@@ -1,5 +1,9 @@
 # animated-consumption-card
 
+## 1.3.0 (2020-06-17)
+
+ * New card configuration option: `circle_color`
+
 ## 1.2.0 (2020-05-21)
 
  * Fixing mdi icon size in Home Assistant 0.110.0

README.md

@@ -47,3 +47,4 @@ but you can use it to customize the card.
 | **left_icon** | [`mdi:electron-framework`](https://mdi.bessarabov.com/icon/electron-framework) | Left icon in the card |
 | **right_icon** | [`mdi:home`](https://mdi.bessarabov.com/icon/home) | Right icon in the card |
 | **show_line** | `false` | Showing a line between icons |
+| **circle_color** | `var(--primary-color)` | Color of the moving cirle |

animated-consumption-card.js

@@ -49,6 +49,11 @@ class AnimatedConsumptionCard extends HTMLElement {
       this.showLine = true;
     }
 
+    this.circleColor = "var(--primary-color)";
+    if (config.circle_color !== undefined) {
+      this.circleColor = config.circle_color;
+    }
+
     this.contentIsCreated = false;
 
     this.speed = 0;
@@ -150,7 +155,7 @@ class AnimatedConsumptionCard extends HTMLElement {
     this.accCircle.setAttributeNS(null, "r", "10");
     this.accCircle.setAttributeNS(null, "cx", this.startPosition);
     this.accCircle.setAttributeNS(null, "cy", "20");
-    this.accCircle.setAttributeNS(null, "fill", "var(--primary-color)");
+    this.accCircle.setAttributeNS(null, "fill", this.circleColor);
     this.querySelectorAll("svg").item(0).appendChild(this.accCircle);
 
     this.contentIsCreated = true;

development/ui.yaml

@@ -21,6 +21,7 @@ views:
 
       - type: 'custom:animated-consumption-card'
         entity: input_number.input_number_2
+        circle_color: black
 
       - type: 'custom:animated-consumption-card'