jeena/home-assistant.github.io
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

Extract developer site (#5249)

Browse source 
* Extract developer site

* Fix title in sidebar

* Update dev section reference

* Update edit in github link on help page
This commit is contained in:
Paulus Schoutsen 2018-04-26 11:14:55 -04:00 • committed by GitHub
parent a83fd1d874
commit 80b268cd65
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
75 changed files with 282 additions and 4166 deletions
Download patch file Download diff file Expand all files Collapse all files

20
source/developers/frontend_add_card.markdown
View file

@ -9,20 +9,6 @@ sharing: true
footer: true
---
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-cards1.png)
The different card types can be found [here](https://github.com/home-assistant/home-assistant-polymer/tree/master/src/state-summary).
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.html`](https://github.com/home-assistant/home-assistant-polymer/blob/master/src/components/entity/ha-state-label-badge.html).
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`:
1. Add `'camera'` to the array `DOMAINS_WITH_CARD` in the file [/util/hass-util.html](https://github.com/home-assistant/home-assistant-polymer/blob/master/src/util/hass-util.html#L11).
2. Create the files `state-card-camera.html` in the folder [/state-summary/](https://github.com/home-assistant/home-assistant-polymer/tree/master/src/state-summary).
4. Add `<link rel="import" href="state-card-camera.html">` to [state-card-content.html](https://github.com/home-assistant/home-assistant-polymer/blob/master/src/state-summary/state-card-content.html).
<script>
window.location = 'https://developers.home-assistant.io/docs/en/frontend_add_card.html';
</script>