Merge pull request #8 from queimadus/config-breakpoits

Allow specifying how many bars to show for a given cover's position
queimadus · Nov 13, 2021 · 714d479 · 714d479
2 parents 178e6ad + 92d06f2
commit 714d479
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 11 deletions.
diff --git a/README.md b/README.md
@@ -22,3 +22,12 @@ elements:
 image: /local/images/floorplan.svg
 type: picture-elements
 ```
+
+### Options
+
+| Name              | Type    | Requirement  | Description                                 | Default             |
+| ----------------- | ------- | ------------ | ------------------------------------------- | ------------------- |
+| type              | string  | **Required** | `custom:cover-icon-element`                 |                     |
+| entity            | string  | **Required** | Home Assistant cover entity ID.             |                     |
+| breakpoints       | array   | **Optional** | Sorted array of 4 elements which maps a cover's position to the number of bars shown in the Icon. <br /> <pre>     0 - arr[0] => 4 bars <br/>arr[0] - arr[1] => 3 bars<br/>arr[1] - arr[2] => 2 bars<br/>arr[2] - arr[3] => 1 bars<br/>arr[3] - 100    => 0 bars</pre>    | `[1, 50, 75, 100]`    |
+| style             | object  | **Optional** | CSS style properties to apply               |                     | 
diff --git a/cover-icon-element.js b/cover-icon-element.js
@@ -1,8 +1,12 @@
 class CoverIconElement extends HTMLElement {
 
+  defaults = {
+    breakpoints: [1, 50, 75, 100]
+  }
+
   setImage(hass) {
     if (hass && this._config) {
-      let image = CoverIconElement.dataImage0;
+      let image = CoverIconElement.dataImage4;
 
       if (this._config.entity) {
         const stateObj = hass.states[this._config.entity];
@@ -12,16 +16,16 @@ class CoverIconElement extends HTMLElement {
 
           if (state === "closing") {
             image = CoverIconElement.dataImageClosing;
-	  } else if(state === "opening") {
+          } else if(state === "opening") {
             image = CoverIconElement.dataImageOpening;
-	  } else if (position === 0) {
-            image = CoverIconElement.dataImage4;
-          } else if (position > 0 && position <= 50) {
-            image = CoverIconElement.dataImage3;
-          } else if (position > 50 && position <= 77) {
-            image = CoverIconElement.dataImage2;
-          } else if (position > 77 && position <= 99) {
+          } else if (position >= this._config.breakpoints[3]) {
+            image = CoverIconElement.dataImage0;
+          } else if (position >= this._config.breakpoints[2]) {
             image = CoverIconElement.dataImage1;
+          } else if (position >= this._config.breakpoints[1]) {
+            image = CoverIconElement.dataImage2;
+          } else if (position >= this._config.breakpoints[0]) {
+            image = CoverIconElement.dataImage3;
           }
         }
       }
@@ -36,12 +40,31 @@ class CoverIconElement extends HTMLElement {
     }
   }
 
-  async setConfig(config) {
+  validateConfig(oldConfig) {
+    const config = {...this.defaults, ...oldConfig};
+
+    if (!(Array.isArray(config.breakpoints) && config.breakpoints.length === 4)) {
+      throw new Error("Config 'breakpoints' must be an 4 element number array");
+    } else {
+      config.breakpoints.reduce((prev, curr) => {
+        if (prev >= curr) {
+          throw new Error("Config 'breakpoints' elements must be sorted in ascending order");
+        }
+      })
+    }
+
+    return config;
+  }
+
+  setConfig(config) {
     if (!this.img) {
       this.img = document.createElement('hui-image-element');
       this.appendChild(this.img);
     }
-    this._config = config;
+
+    const configWithDefaults = this.validateConfig(config);
+
+    this._config = configWithDefaults;
     this.setImage();
   }