Room glance card fixed

- one cannot use hui- cards from home assistant in custom components reliably
- cards are loaded on demand
-> replaced hui-image with a normal img tag

custom_frontend_sources/room-glance-card/package.json

@@ -11,11 +11,11 @@
   "author": "Martin Bauer",
   "license": "GPLv3",
   "devDependencies": {
-    "home-assistant-js-websocket": "^4.2.2",
-    "lit-element": "^2.1.0",
-    "ts-loader": "^6.0.2",
-    "typescript": "^3.5.1",
-    "webpack": "^4.33.0",
-    "webpack-cli": "^3.3.4"
+    "home-assistant-js-websocket": "^4.5.0",
+    "lit-element": "^2.3.1",
+    "ts-loader": "^6.2.2",
+    "typescript": "^3.8.3",
+    "webpack": "^4.42.1",
+    "webpack-cli": "^3.3.11"
   }
 }

custom_frontend_sources/room-glance-card/src/room-glance-card.ts

@@ -1,6 +1,6 @@
 import {LitElement, html, css, customElement, property, TemplateResult, CSSResult} from "lit-element";
 import {classMap} from "lit-html/directives/class-map";
-
+import {styleMap} from "lit-html/directives/style-map";
 import {HomeAssistant} from "./home-assistant-interface";
 
 
@@ -26,19 +26,11 @@ export class RoomGlanceCard extends LitElement {
 
 
     protected render(): TemplateResult | void {
+        const ratio = {'w': 16, 'h': 9};
         return html`
           <ha-card>
-            <hui-image
-              class="${classMap({
-            clickable: true,
-        })}"
-              @ha-click="${this._handleTap}"
-              @ha-hold="${this._handleHold}"
-              .hass="${this.hass}"
-              image="${this._config.image}"
-              aspectRatio="${this._config.aspect_ratio}"
-            ></hui-image>
-            
+            <img style="width: 100%; display: block" src="${this._config.image}">
+
             <div class="box box-upper">
              <div>${this._config.name}</div>
               <div>
@@ -49,7 +41,7 @@ export class RoomGlanceCard extends LitElement {
             <div class="box box-lower">
              <div class="title"></div>
               <div>
-                ${this._config.scenes.map( (sceneButtonCfg) => this.renderSceneButton(sceneButtonCfg))}
+                ${this._config.scenes.map((sceneButtonCfg) => this.renderSceneButton(sceneButtonCfg))}
                 
                 <paper-icon-button
                   icon="mdi:close-circle"
@@ -66,12 +58,8 @@ export class RoomGlanceCard extends LitElement {
                   title="Dunkler"
                   @click=${this.serviceHandler("dimmer", "dim", {offset: -30})}
                 ></paper-icon-button>
-                
               </div>
             </div>
-            
-
-            
           </ha-card>
         `;
     }
@@ -108,16 +96,15 @@ export class RoomGlanceCard extends LitElement {
         `;
     }
 
-    private serviceHandler(domain: string, service: string, serviceData: { [key: string]: any } = {})
-    {
+    private serviceHandler(domain: string, service: string, serviceData: { [key: string]: any } = {}) {
         const thisObj = this;
-        return function(ev) {
+        return function (ev) {
             ev.stopPropagation();
             thisObj.callServiceForAllEntities(domain, service, serviceData);
         }
     }
 
-    private callServiceForAllEntities(domain: string, service:string, serviceData: { [key: string]: any } = {}) {
+    private callServiceForAllEntities(domain: string, service: string, serviceData: { [key: string]: any } = {}) {
 
         if (!serviceData.hasOwnProperty('entity_id')) {
             for (let entity_id of this._config!.entities) {
@@ -148,7 +135,7 @@ export class RoomGlanceCard extends LitElement {
         overflow: hidden;
       }
 
-      hui-image.clickable {
+      my-image.clickable {
         cursor: pointer;
       }
       
@@ -162,7 +149,8 @@ export class RoomGlanceCard extends LitElement {
         position: absolute;
         left: 0;
         right: 0;
-      
+        bottom: 0;
+        
         padding-left: 8px;
         padding-right: 8px;
       
@@ -170,6 +158,7 @@ export class RoomGlanceCard extends LitElement {
         line-height: 40px;
         color: white;
         display: flex;
+        flex-direction: row;
         justify-content: space-between;
         background-color: rgba(0, 0, 0, 0.3);
       }