Merge pull request denysdovhan#122 from krystiancharubin/feature/live…

…-map fix high cpu usage on live map
DoloresHA · Oct 7, 2020 · 18353a3 · 18353a3
2 parents 5808cfb + c415be7
commit 18353a3
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 12 deletions.
diff --git a/README.md b/README.md
@@ -104,6 +104,7 @@ Here is what every option means:
 | `type`         | `string`  | **Required** | `custom:vacuum-card`                                                    |
 | `entity`       | `string`  | **Required** | An entity_id within the `vacuum` domain.                                |
 | `map`          | `string`  | Optional     | An entity_id within the `camera` domain, for streaming live vacuum map. |
+| `map_refresh`  | `integer` | `5`          | Update interval for map camera in seconds                               |
 | `image`        | `string`  | `default`    | Path to image of your vacuum cleaner. Better to have `png` or `svg`.    |
 | `show_name`    | `boolean` | `true`       | Show friendly name of the vacuum.                                       |
 | `show_status`  | `boolean` | `true`       | Show status of the vacuum.                                              |

diff --git a/src/styles.js b/src/styles.js
@@ -21,15 +21,15 @@ export default css`
     cursor: pointer;
     overflow: hidden;
     position: relative;
+    text-align: center;
   }
 
   .preview.not-available {
     filter: grayscale(1);
   }
 
   .map {
-    display: block;
-    max-width: 100%;
+    max-width: 95%;
     image-rendering: crisp-edges;
   }
 

diff --git a/src/vacuum-card.js b/src/vacuum-card.js
@@ -105,16 +105,6 @@ class VacuumCard extends LitElement {
   }
 
   updated(changedProps) {
-    if (this.map) {
-      const url =
-        this.map.attributes.entity_picture + `&t=${new Date().getTime()}`;
-      const img = new Image();
-      img.onload = () => {
-        this.mapUrl = url;
-      };
-      img.src = url;
-    }
-
     if (
       changedProps.get('hass') &&
       changedProps.get('hass').states[this.config.entity].state !==
@@ -124,6 +114,38 @@ class VacuumCard extends LitElement {
     }
   }
 
+  updateCameraImage() {
+    this.hass
+      .callWS({
+        type: 'camera_thumbnail',
+        entity_id: this.config.map,
+      })
+      .then((val) => {
+        const { content_type: contentType, content } = val;
+        this.mapUrl = `data:${contentType};base64, ${content}`;
+        this.requestUpdate();
+      });
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.map) {
+      this.updateCameraImage();
+      this.thumbUpdater = setInterval(
+        () => this.updateCameraImage(),
+        (this.config.map_refresh || 5) * 1000
+      );
+    }
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this.map) {
+      clearInterval(this.thumbUpdater);
+      this.map_image = null;
+    }
+  }
+
   handleMore() {
     fireEvent(
       this,