Added support for entity pictures

This commit is contained in:
Paulus Schoutsen 2014-11-02 11:22:22 -08:00
parent f9462613f5
commit 1bab576be7
8 changed files with 259 additions and 143 deletions

View File

@ -27,6 +27,9 @@ ATTR_ENTITY_ID = 'entity_id'
# String with a friendly name for the entity
ATTR_FRIENDLY_NAME = "friendly_name"
# A picture to represent entity
ATTR_ENTITY_PICTURE = "entity_picture"
STATE_ON = 'on'
STATE_OFF = 'off'
STATE_HOME = 'home'

View File

@ -9,8 +9,8 @@ import random
import homeassistant as ha
import homeassistant.components.group as group
from homeassistant.components import (SERVICE_TURN_ON, SERVICE_TURN_OFF,
STATE_ON, STATE_OFF, get_component,
extract_entity_ids)
STATE_ON, STATE_OFF, ATTR_ENTITY_PICTURE,
get_component, extract_entity_ids)
from homeassistant.components.light import (ATTR_XY_COLOR, ATTR_BRIGHTNESS,
GROUP_NAME_ALL_LIGHTS)
from homeassistant.util import split_entity_id
@ -92,8 +92,13 @@ def setup(hass, config):
hass.states.set("process.XBMC", STATE_ON)
# Setup device tracker
hass.states.set("device_tracker.Paulus", "home")
hass.states.set("device_tracker.Anne_Therese", "not_home")
hass.states.set("device_tracker.Paulus", "home",
{ATTR_ENTITY_PICTURE:
"http://graph.facebook.com/schoutsen/picture"})
hass.states.set("device_tracker.Anne_Therese", "not_home",
{ATTR_ENTITY_PICTURE:
"http://graph.facebook.com/anne.t.frederiksen/picture"})
hass.states.set("group.all_devices", "home",
{
"auto": True,

View File

@ -61,7 +61,7 @@ def setup(hass, config):
conf = config[DOMAIN]
if not ha.CONF_TYPE in conf:
if ha.CONF_TYPE not in conf:
logger.error(
'Missing required configuration item in {}: {}'.format(
DOMAIN, ha.CONF_TYPE))
@ -175,7 +175,8 @@ class DeviceTracker(object):
known_dev[device]['last_seen'] = now
self.states.set(
known_dev[device]['entity_id'], components.STATE_HOME)
known_dev[device]['entity_id'], components.STATE_HOME,
known_dev[device]['default_state_attr'])
# For all devices we did not find, set state to NH
# But only if they have been gone for longer then the error time span
@ -185,7 +186,8 @@ class DeviceTracker(object):
if now - known_dev[device]['last_seen'] > self.error_scanning:
self.states.set(known_dev[device]['entity_id'],
components.STATE_NOT_HOME)
components.STATE_NOT_HOME,
known_dev[device]['default_state_attr'])
# If we come along any unknown devices we will write them to the
# known devices file but only if we did not encounter an invalid
@ -211,7 +213,8 @@ class DeviceTracker(object):
writer = csv.writer(outp)
if is_new_file:
writer.writerow(("device", "name", "track"))
writer.writerow((
"device", "name", "track", "picture"))
for device in unknown_devices:
# See if the device scanner knows the name
@ -219,9 +222,10 @@ class DeviceTracker(object):
name = (self.device_scanner.get_device_name(device)
or "unknown_device")
writer.writerow((device, name, 0))
writer.writerow((device, name, 0, ""))
known_dev[device] = {'name': name,
'track': False}
'track': False,
'picture': ""}
except IOError:
self.logger.exception((
@ -253,6 +257,13 @@ class DeviceTracker(object):
row['track'] = True if row['track'] == '1' else False
if row['picture']:
row['default_state_attr'] = {
components.ATTR_ENTITY_PICTURE: row['picture']}
else:
row['default_state_attr'] = None
# If we track this device setup tracking variables
if row['track']:
row['last_seen'] = default_last_seen
@ -276,6 +287,8 @@ class DeviceTracker(object):
row['entity_id'] = entity_id
used_entity_ids.append(entity_id)
row['picture'] = row['picture']
known_devices[device] = row
if not known_devices:

View File

@ -1,2 +1,2 @@
""" DO NOT MODIFY. Auto-generated by build_polymer script """
VERSION = "0be01a612c785f83a9631d97b54d069a"
VERSION = "a460b05ee24f1e2372c820c552e815c3"

View File

@ -17780,11 +17780,13 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<template>
<style>
:host {
position: relative;
display: inline-block;
width: 45px;
background-color: #4fc3f7;
color: white;
border-radius: 23px;
border-radius: 50%;
transition: all .3s ease-in-out;
}
div {
@ -17792,18 +17794,76 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
text-align: center;
}
#picture {
border-radius: 50%;
}
domain-icon {
margin: 0 auto;
}
/* Color the icon if light or sun is on */
domain-icon[data-domain=light][data-state=on],
domain-icon[data-domain=sun][data-state=above_horizon] {
color: #fff176;
}
</style>
<div horizontal="" layout="" center="">
<domain-icon domain="{{stateObj.domain}}" state="{{stateObj.state}}">
<domain-icon id="icon" domain="{{stateObj.domain}}" state="{{stateObj.state}}">
</domain-icon>
<div fit="" id="picture" style="{{'background-image: url('+stateObj.attributes.entity_picture+')'}}"></div>
</div>
</template>
<script>Polymer('state-badge');</script></polymer-element>
<script>
Polymer('state-badge',{
observe: {
'stateObj.state': 'stateChanged',
'stateObj.attributes.entity_picture': 'entityPictureChanged'
},
stateChanged: function(oldVal, newVal) {
var state = this.stateObj;
// for domain light, set color of icon to light color if available
if(state.domain == "light" && newVal == "on" &&
state.attributes.brightness && state.attributes.xy_color) {
var rgb = this.xyBriToRgb(state.attributes.xy_color[0],
state.attributes.xy_color[1],
state.attributes.brightness);
this.style.color = "rgb(" + rgb.map(Math.floor).join(",") + ")";
} else {
this.style.color = 'white';
}
},
// 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;
Y = bri / 255.0; // Brightness of lamp
X = (Y / y) * x;
Z = (Y / y) * z;
r = X * 1.612 - Y * 0.203 - Z * 0.302;
g = -X * 0.509 + Y * 1.412 + Z * 0.066;
b = X * 0.026 - Y * 0.072 + Z * 0.962;
r = r <= 0.0031308 ? 12.92 * r : (1.0 + 0.055) * Math.pow(r, (1.0 / 2.4)) - 0.055;
g = g <= 0.0031308 ? 12.92 * g : (1.0 + 0.055) * Math.pow(g, (1.0 / 2.4)) - 0.055;
b = b <= 0.0031308 ? 12.92 * b : (1.0 + 0.055) * Math.pow(b, (1.0 / 2.4)) - 0.055;
maxValue = Math.max(r,g,b);
r /= maxValue;
g /= maxValue;
b /= maxValue;
r = r * 255; if (r < 0) { r = 255 };
g = g * 255; if (g < 0) { g = 255 };
b = b * 255; if (b < 0) { b = 255 };
return [r, g, b]
}
});
</script>
</polymer-element>
<polymer-element name="state-card" attributes="stateObj cb_turn_on, cb_turn_off cb_edit" assetpath="polymer/">
@ -17826,19 +17886,12 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
state-badge {
float: left;
cursor: pointer;
transition: background-color .2s ease-in-out, color .5s ease-in-out;
}
state-badge:hover {
background-color: #039be5;
}
/* Color the icon if light or sun is on */
state-badge[data-domain=light][data-state=on],
state-badge[data-domain=sun][data-state=above_horizon] {
color: #fff176;
}
.name, .state.text {
text-transform: capitalize;
font-weight: 300;
@ -17877,7 +17930,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<div horizontal="" justified="" layout="">
<div class="entity">
<state-badge id="badge" stateobj="{{stateObj}}" data-domain="{{stateObj.domain}}" data-state="{{stateObj.state}}" on-click="{{editClicked}}">
<state-badge stateobj="{{stateObj}}" on-click="{{editClicked}}">
</state-badge>
<div class="info">
@ -17952,20 +18005,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
stateChanged: function(oldVal, newVal) {
this.stateUnknown = newVal == null;
this.toggleChecked = newVal == "on"
var state = this.stateObj;
// for domain light, set color of icon to light color if available
if(state.domain == "light" && newVal == "on" &&
state.attributes.brightness && state.attributes.xy_color) {
var rgb = this.xyBriToRgb(state.attributes.xy_color[0],
state.attributes.xy_color[1],
state.attributes.brightness);
this.$.badge.style.color = "rgb(" + rgb.map(Math.floor).join(",") + ")";
} else {
this.$.badge.style.color = null;
}
},
turn_on: function() {
@ -17998,27 +18037,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
}
},
// 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;
Y = bri / 255.0; // Brightness of lamp
X = (Y / y) * x;
Z = (Y / y) * z;
r = X * 1.612 - Y * 0.203 - Z * 0.302;
g = -X * 0.509 + Y * 1.412 + Z * 0.066;
b = X * 0.026 - Y * 0.072 + Z * 0.962;
r = r <= 0.0031308 ? 12.92 * r : (1.0 + 0.055) * Math.pow(r, (1.0 / 2.4)) - 0.055;
g = g <= 0.0031308 ? 12.92 * g : (1.0 + 0.055) * Math.pow(g, (1.0 / 2.4)) - 0.055;
b = b <= 0.0031308 ? 12.92 * b : (1.0 + 0.055) * Math.pow(b, (1.0 / 2.4)) - 0.055;
maxValue = Math.max(r,g,b);
r /= maxValue;
g /= maxValue;
b /= maxValue;
r = r * 255; if (r < 0) { r = 255 };
g = g * 255; if (g < 0) { g = 255 };
b = b * 255; if (b < 0) { b = 255 };
return [r, g, b]
}
});
</script>
</polymer-element>
@ -18198,7 +18216,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
},
handleRefreshClick: function() {
this.api.fetchStates();
this.api.fetchAll();
},
handleEventClick: function() {
@ -19977,11 +19995,55 @@ core-item {
<state-set-dialog id="stateDialog" api="{{api}}"></state-set-dialog>
</template>
<script>
State = function(json, api) {
this.api = api;
this.attributes = json.attributes;
this.entity_id = json.entity_id;
var parts = json.entity_id.split(".");
this.domain = parts[0];
this.entity = parts[1];
if(this.attributes.friendly_name) {
this.entityDisplay = this.attributes.friendly_name;
} else {
this.entityDisplay = this.entity.replace(/_/g, " ");
}
this.state = json.state;
this.last_changed = json.last_changed;
};
Object.defineProperties(State.prototype, {
"stateDisplay": {
get: function() {
return this.state.replace(/_/g, " ");
}
},
"isCustomGroup": {
get: function() {
return this.domain == "group" && !this.attributes.auto;
}
},
"canToggle": {
get: function() {
// groups that have the on/off state or if there is a turn_on service
return ((this.domain == 'group' &&
(this.state == 'on' || this.state == 'off')) ||
this.api.hasService(this.domain, 'turn_on'));
}
}
});
Polymer('home-assistant-api',{
auth: "not-set",
states: [],
services: {},
events: {},
services: [],
events: [],
stateUpdateTimeout: null,
computed: {
@ -19998,11 +20060,19 @@ core-item {
// local methods
getState: function(entityId) {
for(var i = 0; i < this.states.length; i++) {
if(this.states[i].entity_id == entityId) {
return this.states[i];
}
}
var found = this.states.filter(function(state) {
return state.entity_id == entityId;
}, this);
return found.length > 0 ? found[0] : null;
},
hasService: function(domain, service) {
var found = this.services.filter(function(serv) {
return serv.domain == domain && serv.services.indexOf(service) !== -1;
}, this);
return found.length > 0;
},
_laterFetchStates: function() {
@ -20043,30 +20113,20 @@ core-item {
}
if(!stateFound) {
this._enhanceState(state);
this.states.push(new_state);
this.states.push(new State(new_state, this));
this._sortStates(this.states);
}
this.fire('states-updated')
},
_enhanceState: function(state) {
var parts = state.entity_id.split(".");
state.domain = parts[0];
state.entity = parts[1];
state.stateDisplay = state.state.replace(/_/g, " ");
state.canToggle = state.state == "on" || state.state == "off";
state.isCustomGroup = state.domain == "group" && !state.attributes.auto;
if(state.attributes.friendly_name) {
state.entityDisplay = state.attributes.friendly_name;
} else {
state.entityDisplay = state.entity.replace(/_/g, " ");
}
// call api methods
fetchAll: function() {
this.fetchStates();
this.fetchServices();
this.fetchEvents();
},
// call api methods
fetchState: function(entityId) {
var successStateUpdate = function(new_state) {
this._pushNewState(new_state);
@ -20078,40 +20138,52 @@ core-item {
fetchStates: function(onSuccess, onError) {
var successStatesUpdate = function(newStates) {
this._sortStates(newStates);
newStates.map(this._enhanceState);
this.states = newStates;
this.states = newStates.map(function(json) {
return new State(json, this);
}.bind(this));
this.fire('states-updated')
this._laterFetchStates();
if(onSuccess) {
onSuccess(newStates);
onSuccess(this.states);
}
}
this.call_api("GET", "states", null, successStatesUpdate.bind(this), onError);
this.call_api(
"GET", "states", null, successStatesUpdate.bind(this), onError);
},
fetchEvents: function() {
fetchEvents: function(onSuccess, onError) {
var successEventsUpdated = function(events) {
this.events = events;
this.events = this.events;
this.fire('events-updated')
if(onSuccess) {
onSuccess(events);
}
}
this.call_api("GET", "events", null, successEventsUpdated.bind(this));
this.call_api(
"GET", "events", null, successEventsUpdated.bind(this), onError);
},
fetchServices: function() {
fetchServices: function(onSuccess, onError) {
var successServicesUpdated = function(services) {
this.services = services;
this.fire('services-updated')
if(onSuccess) {
onSuccess(this.services);
}
}
this.call_api("GET", "services", null,
successServicesUpdated.bind(this));
this.call_api(
"GET", "services", null, successServicesUpdated.bind(this), onError);
},
turn_on: function(entity_id) {
@ -20327,6 +20399,7 @@ core-item {
// log out functionality
if(newVal == "" && this.state == "valid_auth") {
this.state = "no_auth";
this.$.validateMessage.innerHTML = "Validating password...";
}
},
@ -20342,10 +20415,12 @@ core-item {
this.$.validateMessage.removeAttribute('hidden');
var passwordValid = function(result) {
this.api.fetchServices();
this.$.validateMessage.innerHTML = "Loading data...";
this.api.fetchEvents();
this.state = "valid_auth";
this.api.fetchStates(function() {
this.state = "valid_auth";
}.bind(this));
}
var passwordInvalid = function(result) {
@ -20361,7 +20436,7 @@ core-item {
this.$.passwordInput.focus();
}
this.api.fetchStates(passwordValid.bind(this), passwordInvalid.bind(this));
this.api.fetchServices(passwordValid.bind(this), passwordInvalid.bind(this));
}
});

View File

@ -49,7 +49,10 @@
"canToggle": {
get: function() {
return this.api.hasService(this.domain, 'turn_on');
// groups that have the on/off state or if there is a turn_on service
return ((this.domain == 'group' &&
(this.state == 'on' || this.state == 'off')) ||
this.api.hasService(this.domain, 'turn_on'));
}
}
});

View File

@ -2,15 +2,17 @@
<link rel="import" href="domain-icon.html">
<polymer-element name="state-badge" attributes="stateObj" noscript>
<polymer-element name="state-badge" attributes="stateObj">
<template>
<style>
:host {
position: relative;
display: inline-block;
width: 45px;
background-color: #4fc3f7;
color: white;
border-radius: 23px;
border-radius: 50%;
transition: all .3s ease-in-out;
}
div {
@ -18,15 +20,75 @@
text-align: center;
}
#picture {
border-radius: 50%;
}
domain-icon {
margin: 0 auto;
}
/* Color the icon if light or sun is on */
domain-icon[data-domain=light][data-state=on],
domain-icon[data-domain=sun][data-state=above_horizon] {
color: #fff176;
}
</style>
<div horizontal layout center>
<domain-icon domain="{{stateObj.domain}}" state="{{stateObj.state}}">
<domain-icon id="icon"
domain="{{stateObj.domain}}" state="{{stateObj.state}}">
</domain-icon>
<div fit id="picture"
style="{{'background-image: url('+stateObj.attributes.entity_picture+')'}}"></div>
</div>
</template>
<script>
Polymer({
observe: {
'stateObj.state': 'stateChanged',
'stateObj.attributes.entity_picture': 'entityPictureChanged'
},
stateChanged: function(oldVal, newVal) {
var state = this.stateObj;
// for domain light, set color of icon to light color if available
if(state.domain == "light" && newVal == "on" &&
state.attributes.brightness && state.attributes.xy_color) {
var rgb = this.xyBriToRgb(state.attributes.xy_color[0],
state.attributes.xy_color[1],
state.attributes.brightness);
this.style.color = "rgb(" + rgb.map(Math.floor).join(",") + ")";
} else {
this.style.color = 'white';
}
},
// 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;
Y = bri / 255.0; // Brightness of lamp
X = (Y / y) * x;
Z = (Y / y) * z;
r = X * 1.612 - Y * 0.203 - Z * 0.302;
g = -X * 0.509 + Y * 1.412 + Z * 0.066;
b = X * 0.026 - Y * 0.072 + Z * 0.962;
r = r <= 0.0031308 ? 12.92 * r : (1.0 + 0.055) * Math.pow(r, (1.0 / 2.4)) - 0.055;
g = g <= 0.0031308 ? 12.92 * g : (1.0 + 0.055) * Math.pow(g, (1.0 / 2.4)) - 0.055;
b = b <= 0.0031308 ? 12.92 * b : (1.0 + 0.055) * Math.pow(b, (1.0 / 2.4)) - 0.055;
maxValue = Math.max(r,g,b);
r /= maxValue;
g /= maxValue;
b /= maxValue;
r = r * 255; if (r < 0) { r = 255 };
g = g * 255; if (g < 0) { g = 255 };
b = b * 255; if (b < 0) { b = 255 };
return [r, g, b]
}
});
</script>
</polymer-element>

View File

@ -27,19 +27,12 @@
state-badge {
float: left;
cursor: pointer;
transition: background-color .2s ease-in-out, color .5s ease-in-out;
}
state-badge:hover {
background-color: #039be5;
}
/* Color the icon if light or sun is on */
state-badge[data-domain=light][data-state=on],
state-badge[data-domain=sun][data-state=above_horizon] {
color: #fff176;
}
.name, .state.text {
text-transform: capitalize;
font-weight: 300;
@ -79,10 +72,7 @@
<div class="entity">
<state-badge
id="badge"
stateObj="{{stateObj}}"
data-domain="{{stateObj.domain}}"
data-state="{{stateObj.state}}"
on-click="{{editClicked}}">
</state-badge>
@ -158,20 +148,6 @@
stateChanged: function(oldVal, newVal) {
this.stateUnknown = newVal == null;
this.toggleChecked = newVal == "on"
var state = this.stateObj;
// for domain light, set color of icon to light color if available
if(state.domain == "light" && newVal == "on" &&
state.attributes.brightness && state.attributes.xy_color) {
var rgb = this.xyBriToRgb(state.attributes.xy_color[0],
state.attributes.xy_color[1],
state.attributes.brightness);
this.$.badge.style.color = "rgb(" + rgb.map(Math.floor).join(",") + ")";
} else {
this.$.badge.style.color = null;
}
},
turn_on: function() {
@ -204,27 +180,6 @@
}
},
// 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;
Y = bri / 255.0; // Brightness of lamp
X = (Y / y) * x;
Z = (Y / y) * z;
r = X * 1.612 - Y * 0.203 - Z * 0.302;
g = -X * 0.509 + Y * 1.412 + Z * 0.066;
b = X * 0.026 - Y * 0.072 + Z * 0.962;
r = r <= 0.0031308 ? 12.92 * r : (1.0 + 0.055) * Math.pow(r, (1.0 / 2.4)) - 0.055;
g = g <= 0.0031308 ? 12.92 * g : (1.0 + 0.055) * Math.pow(g, (1.0 / 2.4)) - 0.055;
b = b <= 0.0031308 ? 12.92 * b : (1.0 + 0.055) * Math.pow(b, (1.0 / 2.4)) - 0.055;
maxValue = Math.max(r,g,b);
r /= maxValue;
g /= maxValue;
b /= maxValue;
r = r * 255; if (r < 0) { r = 255 };
g = g * 255; if (g < 0) { g = 255 };
b = b * 255; if (b < 0) { b = 255 };
return [r, g, b]
}
});
</script>
</polymer-element>