First working version

README.md

@@ -1,2 +1,39 @@
 # lovelace-auto-update-image-card
-Auto Update Image Card
+Simple card to load and image from an URL and auto update it from time to time.
+
+## Usage
+Usage is quite simple, you have to set it up as a custom card and provide and url and some other optional params:
+
+|Paramenter|Description|Required|Default Value|
+|:---------|:----------|:-------|:------------|
+|url|Image's URL|**YES**||
+|update_interval|Time between updates, in seconds|No|60|
+|title|Card title|No||
+|width|Card's width|No|Default HA card|
+
+## Examples and Screenshots
+Simple example, no title and normal size (same of a default card):
+
+```yaml
+type: custom:auto-update-image-card
+update_interval: 180
+url: http://infocar.dgt.es/etraffic/data/camaras/605.jpg
+```
+
+it renders like this:
+
+![example-1.png](./screenshots/example-1.png)
+
+Full example with title and a bigger card:
+
+```yaml
+type: custom:auto-update-image-card
+title: Title Test
+update_interval: 180
+url: http://infocar.dgt.es/etraffic/data/camaras/605.jpg
+width: 130%
+```
+
+gives you this card:
+
+![example-2.png](./screenshots/example-2.png)

dist/auto-update-image-card.js

@@ -0,0 +1,58 @@
+// Auto Update Image Card
+//
+// Options:
+//   - url: required. Image's URL.
+//   - update_interval: time between image updates, in seconds. Defaults to 60 (1 minute).
+//   - title: title text shown above the image.
+//   - width: card's width. In case you need a bigger card to show a big image.
+//
+// Yaml example:
+//
+// type: custom:auto-update-image-card
+// title: Title Test
+// update_interval: 180
+// url: http://infocar.dgt.es/etraffic/data/camaras/605.jpg
+// width: 130%
+
+class AutoUpdateImageCard extends HTMLElement {
+  // whenever state changes, a new hass object is set:
+  set hass(hass) {
+
+    if (!this.content) {
+      this.innerHTML = `
+        <ha-card style="width: ${this.config.width || '100%'};">
+        </ha-card>
+      `;
+      this.content = this.querySelector('ha-card');
+    }
+
+    // console.log(this.config);
+
+    this.content.innerHTML = `
+      ${this.config.title ? `<h1 class="card-header">${this.config.title}</h1>` : ''}
+      <img id="refreshing" src="${this.config.url}" style="display: block; width: 100%; border-radius: var(--ha-card-border-radius, 4px);" />
+    `;
+
+    // only set timer if update_interval is provided and no previous timer is running:
+    if (this.config.update_interval && !this.timeout) this.timeout = window.setInterval(
+      () => {
+        this.setConfig({ url: `${this.config.url}?v=${new Date().getTime()}` });
+      },
+      (this.config.update_interval || 60) * 1000
+    );
+  }
+
+  // user supplied configuration:
+  setConfig(config) {
+    console.log(config);
+    if (!config.url) throw new Error('You need to give me an URL to load image from!');
+    this.config = config;
+  }
+
+  // height of card:
+  getCardSize() {
+    return 1;
+  }
+}
+
+customElements.define('auto-update-image-card', AutoUpdateImageCard);

hacs.json

@@ -0,0 +1,4 @@
+{
+    "name": "Auto Update Image Card",
+    "render_readme": true
+}