Add a Nest specific card to frontend

homeassistant/components/demo.py

@@ -14,6 +14,8 @@ from homeassistant.const import (
     ATTR_ENTITY_PICTURE, ATTR_ENTITY_ID, CONF_LATITUDE, CONF_LONGITUDE)
 from homeassistant.components.light import (
     ATTR_XY_COLOR, ATTR_RGB_COLOR, ATTR_BRIGHTNESS, GROUP_NAME_ALL_LIGHTS)
+from homeassistant.components.thermostat import (
+    ATTR_TARGET_TEMPERATURE, ATTR_AWAY_MODE)
 from homeassistant.util import split_entity_id, color_RGB_to_xy
 
 DOMAIN = "demo"
@@ -158,4 +160,12 @@ def setup(hass, config):
                         'unit_of_measurement': '%'
                     })
 
+    # Nest demo
+    hass.states.set("thermostat.Nest", "15.6",
+                    {
+                        'unit_of_measurement': '°C',
+                        ATTR_TARGET_TEMPERATURE: '23.6',
+                        ATTR_AWAY_MODE: STATE_OFF
+                    })
+
     return True

homeassistant/components/http/frontend.py

@@ -1,2 +1,2 @@
 """ DO NOT MODIFY. Auto-generated by build_frontend script """
-VERSION = "daba5365569540aa4a3072be4d1a552d"
+VERSION = "7dec66ac57c858565b26db16e150a3b5"

homeassistant/components/http/www_static/polymer/cards/state-card-content.html

@@ -2,6 +2,7 @@
 
 <link rel="import" href="state-card-display.html">
 <link rel="import" href="state-card-toggle.html">
+<link rel="import" href="state-card-thermostat.html">
 
 <polymer-element name="state-card-content" attributes="api stateObj">
 <template>

homeassistant/components/http/www_static/polymer/cards/state-card-thermostat.html

@@ -0,0 +1,40 @@
+<script src="../bower_components/moment/moment.js"></script>
+<link rel="import" href="../bower_components/polymer/polymer.html">
+
+<link rel="import" href="../components/state-info.html">
+
+<polymer-element name="state-card-thermostat" attributes="stateObj api">
+<template>
+  <style>
+  .state {
+    margin-left: 16px;
+    text-transform: capitalize;  
+    font-weight: 300;
+    font-size: 1.3rem;
+    text-align: right;
+  }
+
+  .extra {
+    text-transform: none;
+    font-size: 1rem;
+  }
+  </style>
+
+  <div horizontal justified layout> 
+    <state-info stateObj="{{stateObj}}"></state-info>
+    <div class='state'>
+      {{stateObj.stateDisplay}}
+      <template if="{{stateObj.attributes.target_temperature && stateObj.attributes.target_temperature != stateObj.state}}">
+        -> {{stateObj.attributes.target_temperature}} {{stateObj.attributes.unit_of_measurement}}
+      </template>
+
+      <div class='extra'>
+        Away mode is {{stateObj.attributes.away_mode}}
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+Polymer({});
+</script>
+</polymer-element>

homeassistant/components/http/www_static/polymer/home-assistant-api.html

@@ -39,6 +39,7 @@
     <state-card-dialog id="stateCardDialog" api={{api}}></state-card-dialog>
   </template>
   <script>
+  var domainsWithCard = ['thermostat'];
   var domainsWithMoreInfo = ['light', 'group', 'sun'];
 
   State = function(json, api) {
@@ -91,7 +92,9 @@
     // how to render the card for this state
     cardType: {
       get: function() {
-        if(this.canToggle) {
+        if(domainsWithCard.indexOf(this.domain) !== -1) {
+          return this.domain;
+        } else if(this.canToggle) {
           return "toggle";
         } else {
           return "display";