jeans/home-assistant.io
jeans/home-assistant.io
1
0
Fork 0
mirror of https://github.com/home-assistant/home-assistant.io.git synced 2025-07-23 17:27:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add state badges

Browse Source
This commit is contained in:
Fabian Affolter 2016-02-20 20:05:19 +01:00
parent 629603328d
commit 0d8b524e49
1 changed files with 9 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
source/developers/frontend.markdown
View File

@ -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).