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

Merge pull request #250 from balloob/master

Browse source 
Keeping next up to date with latest changes
This commit is contained in:
Paulus Schoutsen 2016-02-22 22:25:16 -08:00
commit 6f8b525cb8
52 changed files with 870 additions and 96 deletions
Download patch file Download diff file Expand all files Collapse all files

8
source/developers/creating_components.markdown
View file

@ -9,9 +9,9 @@ sharing: true
footer: true
---
Home Assistant offers [built-in components]({{site_root}}/components/) but it is easy to build your own. If you are the kind of person that likes to learn from code rather then guide then head over to the [`config/custom_components`](https://github.com/balloob/home-assistant/tree/master/config/custom_components) folder in the repository for two example components.
Home Assistant offers [built-in components]({{site_root}}/components/) but it is easy to build your own. If you are the kind of person that likes to learn from code rather then guide then head over to the [`config/custom_components`](https://github.com/balloob/home-assistant/tree/master/config/custom_components) folder in the repository for two example components. Or visit the [Custom Python Component Examples]({{site_root}}/cookbook/#custom-python-component-examples).
The first is [hello_world.py](https://github.com/balloob/home-assistant/blob/master/config/custom_components/hello_world.py), which is the classic Hello World example for Home Assistant. The second one is [example.py](https://github.com/balloob/home-assistant/blob/master/config/custom_components/example.py) which showcases various ways you can tap into Home Assistant to be notified when certain events occur.
The first is [hello_world.py](https://github.com/balloob/home-assistant/blob/master/config/custom_components/hello_world.py) (this is similar to the [Basic State Setting Example](https://home-assistant.io/cookbook/python_component_basic_state/)), which is the classic "Hello World" example for Home Assistant. The second one is [example.py](https://github.com/balloob/home-assistant/blob/master/config/custom_components/example.py) which showcases various ways you can tap into Home Assistant to be notified when certain events occur.
If you want to load these components in Home Assistant, add the following lines to your `configuration.yaml` file:
@ -55,7 +55,7 @@ After loading, the bootstrapper will call `setup(hass, config)` method on the co
### {% linkable_title `hass`: the Home Assistant instance %}
The Home Assistant instace contains three objects to help you interact with the system.
The Home Assistant instance contains three objects to help you interact with the system.
| Object | Description |
| ------ | ----------- |
@ -66,7 +66,7 @@ The Home Assistant instace contains three objects to help you interact with the
### {% linkable_title `config`: User given configuration. %}
The `config` paramter is a dictionary containing the user supplied configuration. The keys of the dictionary are the component names and the value is another dictionary with the component configuration.
The `config` parameter is a dictionary containing the user supplied configuration. The keys of the dictionary are the component names and the value is another dictionary with the component configuration.
If your configuration file contains the following lines:

29
source/developers/frontend.markdown
View file

@ -72,18 +72,24 @@ 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.
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).
![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`:
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).
# {% linkable_title More info screens for custom types %}
@ -95,9 +101,8 @@ Whenever the user taps or clicks on one of the cards, a more info dialog will sh
</p>
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`:
_(All files in this example link to their source-code)_
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/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)

8
source/developers/index.markdown
View file

@ -40,7 +40,7 @@ Improvements to Home Assistant should be submitted one feature at a time using G
`git checkout -b some-feature`
2. Make the changes you want
3. Test your changes and check for style violations
`./script/test`
`tox`
4. Commit the changes
`git add .`
`git commit -m "Added some-feature"`
@ -48,6 +48,12 @@ Improvements to Home Assistant should be submitted one feature at a time using G
`git push origin HEAD`
6. Follow [these steps](https://help.github.com/articles/creating-a-pull-request/) to create your pull request.
Note that the above requires `tox` to be installed. If you don't have it, do this:
```bash
$ pip3 install tox
```
### {% linkable_title Further reading %}
- [Home Assistant Architecture](/developers/architecture/)