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

Update links

Browse source
This commit is contained in:
Fabian Affolter 2016-04-12 11:09:00 +02:00
parent 118def30d7
commit 53dc68cd36
33 changed files with 70 additions and 70 deletions
Download patch file Download diff file Expand all files Collapse all files

24
source/developers/frontend.markdown
View file

@ -12,9 +12,9 @@ footer: true
Home Assistant uses [Polymer](https://www.polymer-project.org/) for the UI and [NuclearJS](http://optimizely.github.io/nuclear-js/) for maintaing the app state.
* Polymer allows building encapsulated custom HTML elements.
[Home-Assistant-Polymer source code on GitHub.](https://github.com/balloob/home-assistant-polymer)
[Home-Assistant-Polymer source code on GitHub.](https://github.com/home-assistant/home-assistant-polymer)
* NuclearJS is a reactive flux built with ImmutableJS data structures.
[Home-Assistant-JS source code on GitHub.](https://github.com/balloob/home-assistant-js)
[Home-Assistant-JS source code on GitHub.](https://github.com/home-assistant/home-assistant-js)
<p class='note warning'>
Do not use development mode in production. Home Assistant uses aggressive caching to improve the mobile experience. This is disabled during development so that you do not have to restart the server in between changes.
@ -76,20 +76,20 @@ The main interface of Home Assistant is a list of the current entities and their
![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).
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.js`](https://github.com/balloob/home-assistant-polymer/blob/master/src/components/entity/ha-state-label-badge.js).
The different badges are located in the file [`/src/components/entity/ha-state-label-badge.js`](https://github.com/home-assistant/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`:
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).
3. Add `require('./state-card-camera')` to [state-card-content.js](https://github.com/balloob/home-assistant-polymer/blob/master/src/state-summary/state-card-content.js).
4. Add `<link rel="import" href="state-card-camera.html">` to [state-card-content.html](https://github.com/balloob/home-assistant-polymer/blob/master/src/state-summary/state-card-content.html).
1. Add `'camera'` to the array `DOMAINS_WITH_CARD` in the file [/util/state-card-type.js](https://github.com/home-assistant/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/home-assistant/home-assistant-polymer/tree/master/src/state-summary).
3. Add `require('./state-card-camera')` to [state-card-content.js](https://github.com/home-assistant/home-assistant-polymer/blob/master/src/state-summary/state-card-content.js).
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).
# {% linkable_title More info screens for custom types %}
@ -102,7 +102,7 @@ Whenever the user taps or clicks on one of the cards, a more info dialog will sh
The instructions to add a more info dialog are very similar to adding a new card type. This example will add a new more info component for the domain `camera`:
1. Add `'camera'` to the array `DOMAINS_WITH_MORE_INFO` in the file [util/state-more-info-type.js](https://github.com/balloob/home-assistant-polymer/blob/master/src/util/state-more-info-type.js#L1).
2. Create the files `more-info-camera.html` and `more-info-camera.js` in the folder [/more-infos](https://github.com/balloob/home-assistant-polymer/tree/master/src/more-infos).
3. Add `require('./more-info-camera')` to [more-info-content.js](https://github.com/balloob/home-assistant-polymer/blob/master/src/more-infos/more-info-content.js)
4. Add `<link rel="import" href="more-info-camera.html">` to [more-info-content.html](https://github.com/balloob/home-assistant-polymer/blob/master/src/more-infos/more-info-content.html)
1. Add `'camera'` to the array `DOMAINS_WITH_MORE_INFO` in the file [util/state-more-info-type.js](https://github.com/home-assistant/home-assistant-polymer/blob/master/src/util/state-more-info-type.js#L1).
2. Create the files `more-info-camera.html` and `more-info-camera.js` in the folder [/more-infos](https://github.com/home-assistant/home-assistant-polymer/tree/master/src/more-infos).
3. Add `require('./more-info-camera')` to [more-info-content.js](https://github.com/home-assistant/home-assistant-polymer/blob/master/src/more-infos/more-info-content.js)
4. Add `<link rel="import" href="more-info-camera.html">` to [more-info-content.html](https://github.com/home-assistant/home-assistant-polymer/blob/master/src/more-infos/more-info-content.html)