Cleanup of state-badge.html

homeassistant/components/http/www_static/polymer/bower.json

@@ -20,6 +20,7 @@
     "core-item": "Polymer/core-item#~0.5.1",
     "core-input": "Polymer/core-input#~0.5.1",
     "core-icons": "polymer/core-icons#~0.5.1",
+    "core-image": "polymer/core-image#~0.5.1",
     "paper-toast": "Polymer/paper-toast#~0.5.1",
     "paper-dialog": "Polymer/paper-dialog#~0.5.1",
     "paper-spinner": "Polymer/paper-spinner#~0.5.1",

homeassistant/components/http/www_static/polymer/state-badge.html

@@ -1,4 +1,5 @@
 <link rel="import" href="bower_components/polymer/polymer.html">
+<link rel="import" href="bower_components/core-image/core-image.html">
 
 <link rel="import" href="domain-icon.html">
 
@@ -20,7 +21,7 @@
       text-align: center;
     }
 
-    #picture {
+    core-image {
       border-radius: 50%;
     }
 
@@ -40,7 +41,11 @@
         domain="{{stateObj.domain}}" data-domain="{{stateObj.domain}}"
         state="{{stateObj.state}}" data-state="{{stateObj.state}}">
       </domain-icon>
-      <div fit id="picture"></div>
+      <template if="{{stateObj.attributes.entity_picture}}">
+        <core-image
+          sizing="cover" fit
+          src="{{stateObj.attributes.entity_picture}}"></core-image>
+      </template>
     </div>
 
   </template>
@@ -50,8 +55,7 @@
       'stateObj.state': 'updateIconColor',
       'stateObj.attributes.brightness': 'updateIconColor',
       'stateObj.attributes.xy_color[0]': 'updateIconColor',
-      'stateObj.attributes.xy_color[1]': 'updateIconColor',
-      'stateObj.attributes.entity_picture': 'entityPictureChanged'
+      'stateObj.attributes.xy_color[1]': 'updateIconColor'
     },
 
     /**
@@ -73,17 +77,6 @@
       }
     },
 
-    /**
-     * Called when the attribute for entity_picture has changed.
-     */
-    entityPictureChanged: function(oldVal, newVal) {
-      if(newVal) {
-        this.$.picture.style.backgroundImage = 'url(' + newVal + ')';
-      } else {
-        this.$.picture.style.backgroundImage = null;
-      }
-    },
-
     // from http://stackoverflow.com/questions/22894498/philips-hue-convert-xy-from-api-to-hex-or-rgb
     xyBriToRgb: function (x, y, bri) {
       z = 1.0 - x - y;