From 0d8b524e495cecc300a9b1e32161ccce09d02c9d Mon Sep 17 00:00:00 2001 From: Fabian Affolter Date: Sat, 20 Feb 2016 20:05:19 +0100 Subject: [PATCH] Add state badges --- source/developers/frontend.markdown | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/source/developers/frontend.markdown b/source/developers/frontend.markdown index c1a2d5bd620..ad8d4f97f17 100644 --- a/source/developers/frontend.markdown +++ b/source/developers/frontend.markdown @@ -72,13 +72,19 @@ Polymer build architecture diagram # {% linkable_title Adding state cards %} -The main interface of Home Assistant is a list of the current entities and their states. For each entity in the system, a state card will be rendered. State cards will show a state badge, the name of the entity, when the state has last changed and the current state or a control to interact with it. +The main interface of Home Assistant is a list of the current entities and their states. For each entity in the system, a state card will be rendered. State cards will show an icon, the name of the entity, when the state has last changed and the current state or a control to interact with it. -![Cards in the frontend](/images/frontend/frontend-cards.png) +![Cards in the frontend](/images/frontend/frontend-cards1.png) The different card types can be found [here](https://github.com/balloob/home-assistant-polymer/tree/master/src/state-summary). -Adding a custom card type can be done with a few simple steps. For this example we will add a new state card for the domain `camera`: _(All files in this example link to their source-code)_ +Sensors, when not [grouped](/components/group/), are shown as so-called badges on top of the state cards. + +![Badges in the frontend](/images/frontend/frontend-badges.png) + +The different badges are located in the file [`/src/components/entity/ha-state-label-badge.js`](https://github.com/balloob/home-assistant-polymer/blob/master/src/components/entity/ha-state-label-badge.js). + +Adding a custom card type can be done with a few simple steps. For this example we will add a new state card for the domain `camera`: _(All files in this example link to their source code)_ 1. Add `'camera'` to the array `DOMAINS_WITH_CARD` in the file [`/util/state-card-type.js`](https://github.com/balloob/home-assistant-polymer/blob/master/src/util/state-card-type.js#L3-L4). 2. Create the files `state-card-camera.html` and `state-card-camera.js` in the folder [`/state-summary/`](https://github.com/balloob/home-assistant-polymer/tree/master/src/state-summary).