floorplan, humudity sensor alert changes, spotify update

www/lovelace/resources/color-lite-card.js

@@ -0,0 +1,64 @@
+class ColorLite extends HTMLElement {
+    set hass(hass) {
+      if (!this.content) {
+        const card = document.createElement('ha-card');  
+        this.content = document.createElement('div');	
+        card.appendChild(this.content);	  
+        card.style.background = 'none';	  
+        this.appendChild(card);	  
+      }
+  
+      const entityId = this.config.entity;  	
+      const state = hass.states[entityId];
+          
+      
+  //  if the light is on	
+  if(state){
+      if(state.state == 'on'){
+      
+          const imageURLId = this.config.image;			
+          var ImURL = imageURLId;		
+          const imageURLCId = this.config.color_image;				
+          var rgbval = state.attributes.rgb_color;			
+          var hsval = state.attributes.hs_color;			
+          var hsar = "";			
+          if (hsval) {
+              if (rgbval != "255,255,255") {				
+                  var hsar = ' hue-rotate(' + hsval[0] + 'deg)';			
+                  if (imageURLCId) {
+                  ImURL = imageURLCId;		
+                  }
+              }
+          }		
+          var bbritef = state.attributes.brightness;	
+          var bbrite = (bbritef / 205);	
+      
+          this.content.innerHTML = `	
+  <!-- Custom Lite Card for x${rgbval}x -->	
+  <img src="${ImURL}" style="filter: opacity(${bbrite})${hsar}!important;" width="100%" height="100%">
+  `;
+      
+      } else {			
+          this.content.innerHTML = `
+      <!-- Custom Lite Card for ${entityId} is turned off -->
+      `;			
+      }	
+    }  
+  }  
+  
+  
+    setConfig(config) {
+      if (!config.entity) {
+        throw new Error('You need to define an entity');
+      }
+      this.config = config;
+    }  
+    
+    // The height of your card. Home Assistant uses this to automatically
+    // distribute all cards over the available columns.
+    getCardSize() {
+      return 3;
+    }
+  }
+  
+  customElements.define('color-lite-card', ColorLite);

www/lovelace/resources/now-playing-card.js

@@ -0,0 +1,102 @@
+class NowPlayingPoster extends HTMLElement {
+    set hass(hass) {
+      if (!this.content) {
+        const card = document.createElement('ha-card');  
+        this.content = document.createElement('div');	
+        
+        
+        //this.content.style = "!important;";
+        
+        
+        card.appendChild(this.content);
+        card.style = "background: none;";
+        this.appendChild(card);
+        
+        
+      }
+  
+      const offposter = this.config.off_image;		
+      const entityId = this.config.entity;
+      const state = hass.states[entityId];	
+      const stateStr = state ? state.state : 'unavailable';
+      
+      
+      
+      if (state) {		
+      
+          const movposter = state.attributes.entity_picture;	
+      
+          if (stateStr == "playing") {
+              if ( !movposter ) {			
+                  if ( offposter ) {				
+                      this.content.innerHTML = `
+                      <!-- now playing card ${entityId} -->
+                      <img src="${offposter}" width=100% align="center" style="">
+                      `;						
+                  } 		
+                  else			
+                  {		
+                      this.content.innerHTML = `		
+                      <!-- now playing card ${entityId}  no image-->			
+                      `;				
+                  }
+              } 	
+              else		
+              {
+              this.content.innerHTML = `		
+              <!-- now playing card ${entityId}  -->
+              <img src="${movposter}" width=100% height=100%">	  
+              `;			
+              }
+          } 	
+          else		
+          {		
+              
+              if ( offposter ) {				
+                  this.content.innerHTML = `
+                  <!-- now playing card ${entityId} -->
+                  <img src="${offposter}" width=100% align="center" style="">
+                  `;						
+              } 		
+              else			
+              {		
+                  this.content.innerHTML = `		
+                  <!-- now playing card ${entityId}  no image-->			
+                  `;				
+              }			
+          
+          }
+  
+    
+      } 	
+      else		
+      {
+      
+          
+      this.content.innerHTML = `		
+      <!-- now playing card ${entityId} not playing --> 
+      `;
+      
+      }
+      
+    }
+    
+    
+   
+    
+    setConfig(config) {
+      if (!config.entity) {
+        throw new Error('You need to define an entity');
+      }
+      this.config = config;
+    }
+  
+    
+    // The height of your card. Home Assistant uses this to automatically
+    // distribute all cards over the available columns.
+    getCardSize() {
+      return 3;
+    }
+  }
+  
+  customElements.define('now-playing-poster', NowPlayingPoster);