Merge pull request #4 from luixal/3-picture-name-string-stored-in-entity

3 picture name string stored in entity
luixal · Dec 30, 2023 · fa0944b · fa0944b
2 parents 535cc59 + f4b344f
commit fa0944b
Show file tree

Hide file tree

Showing 2 changed files with 101 additions and 11 deletions.
diff --git a/README.md b/README.md
@@ -79,6 +79,57 @@ tap_action:
 
 If no `target` is provided, the `entity_id` field is used.
 
+### Templating
+You can use templates in the `image` field. In fact, you can use jinja2 and javascript templates.
+
+The main difference is that jinja templates are rendered in the server and tend to hit perfomance overall while javascript templates run locally in the browser and need no additional messaging with the server.
+
+Personally, I prefer javascript templates :)
+
+#### Jinja2 Templates
+You can use jinja templates like this:
+
+```yaml
+type: custom:media-source-image-card
+image: |
+  media-source://media_source/local/{{ states('input_text.image') }}
+entity_id: input_boolean.boolean_test
+apply_grayscale: true
+tap_action:
+  action: call-service
+  service: input_boolean.turn_on
+  target:
+    entity_id: input_boolean.boolean_test
+```
+
+#### Javascript Templates
+You can also provide a javascript template like this:
+
+```yaml
+type: custom:media-source-image-card
+image: |
+  [[[
+    return `media-source://media_source/local/${ hass.states['input_text.texting'].state }`;
+  ]]]
+entity_id: input_boolean.boolean_test
+apply_grayscale: true
+tap_action:
+  action: call-service
+  service: input_boolean.turn_on
+  target:
+    entity_id: input_boolean.boolean_test
+```
+
+You need to enclose your function between triple brackets ('[[[' and ']]]'). The variables available in the function are:
+
+| Variable | Description |
+| -------- | ----------- |
+| hass | The whole hass object where you can access everything |
+| states | The states object inside `hass` |
+| user | The object with information about the logged user |
+| config | The card config itself |
+
+
 ## Examples
 
 ### Simple Image

diff --git a/media-source-image-card.js b/media-source-image-card.js
@@ -32,6 +32,11 @@ class MediaSourceImageCard extends HTMLElement {
                 -webkit-filter: grayscale();
             }
 
+            .error {
+              font-size: large;
+              color: red;
+            }
+
         </style>
         <ha-card>
             <div class="card-content">
@@ -44,6 +49,37 @@ class MediaSourceImageCard extends HTMLElement {
     }
   }
 
+  renderTemplate(template) {
+    return new Promise(
+      resolve => {
+        this._hass.connection.subscribeMessage(
+          output => {
+            return resolve(output.result);
+          },
+          {
+            type: 'render_template',
+            template
+          }
+        );
+      }
+    );
+  }
+
+  renderJsTemplate(template) {
+    let _template = template.replace('[[[', '').replace(']]]', '');
+    return new Function('hass', 'states', 'user', 'config', `'use strict'; ${_template}`).call(this, this._hass, this._hass.states, this._hass.user, this.config);
+  }
+
+  getImageUrl(image) {
+    return new Promise(
+      resolve => {
+        if (this.config.image.indexOf('{{') > -1) return resolve(this.renderTemplate(image));
+        if (this.config.image.indexOf('[[[') > -1) return resolve(this.renderJsTemplate(image));
+        return resolve(image);
+      }
+    );
+  }
+
   setConfig(config) {
     if (!config.image) {
       throw new Error('You have to provide an url for a media source image');
@@ -57,16 +93,19 @@ class MediaSourceImageCard extends HTMLElement {
     if (!this.content) this.renderBase();
     // resolve image from media source and render it:
     if (!this.image || this.image != this.config.image) {
-      this.image = this.config.image;
-      hass.callWS({
-        type: "media_source/resolve_media",
-        media_content_id: this.config.image
-      }).then(response => {
-        this.content.innerHTML = `
-                      <img src=${response.url} class="${(this.config.entity_id && this.config.apply_grayscale) ? hass.states[this.config.entity_id].state : ''}">
-                  `;
-      }
-      );
+      this.getImageUrl(this.config.image)
+        .then(imageUrl => {
+          this.image = imageUrl;
+          hass.callWS({
+            type: "media_source/resolve_media",
+            media_content_id: this.image
+          }).then(response => {
+            this.content.innerHTML = `<img src=${response.url} class="${(this.config.entity_id && this.config.apply_grayscale) ? hass.states[this.config.entity_id].state : ''}">`;
+          }).catch(error => {
+            this.content.innerHTML = `<span class="error">Error loading image: ${error.message} </span>`;
+            console.error({config: this.config, error});
+          });
+        })
     }
     // apply grayscale:
     if (this.config.entity_id) {
@@ -124,7 +163,7 @@ window.customCards.push({
 });
 
 console.info(
-  `%c  MEDIA SOURCE IMAGE CARD %c Version 0.1.0 `,
+  `%c  MEDIA SOURCE IMAGE CARD %c Version 0.1.2 `,
   'color: orange; font-weight: bold; background: black',
   'color: white; font-weight: bold; background: dimgray',
 );