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

Fix HTML/Markdown formatting

Browse source
This commit is contained in:
Paulus Schoutsen 2015-10-28 21:56:55 -07:00
parent 8a49892248
commit 08d65ba714
10 changed files with 303 additions and 326 deletions
Download patch file Download diff file Expand all files Collapse all files

45
source/developers/frontend.markdown
View file

@ -11,9 +11,9 @@ footer: true
Home Assistant uses [Polymer](https://www.polymer-project.org/) for the UI and [NuclearJS](http://optimizely.github.io/nuclear-js/) for all data management.
* Polymer allows building encapsulated custom HTML elements.
* Polymer allows building encapsulated custom HTML elements.
[Home-Assistant-Polymer source code on GitHub.](https://github.com/balloob/home-assistant-polymer)
* NuclearJS is a reactive flux built with ImmutableJS data structures.
* NuclearJS is a reactive flux built with ImmutableJS data structures.
[Home-Assistant-JS source code on GitHub.](https://github.com/balloob/home-assistant-js)
<p class='note warning'>
@ -28,39 +28,29 @@ http:
development: 1
```
Next step is to get the frontend code. When you clone the Home Assistant repository, the frontend
repository is not cloned by default. You will have to trigger this manually by running from the
command line:
Next step is to get the frontend code. When you clone the Home Assistant repository, the frontend repository is not cloned by default. You will have to do this by running from the command line:
```bash
git submodule update --init
$ git submodule update --init
```
After checking out the frontend code, you will have to install the frontend dependencies. Firing off
a build of the frontend by running `script/build_frontend` will ensure they get installed.
After checking out the frontend code, you will have to install the frontend dependencies. Firing off a build of the frontend by running `script/build_frontend` will ensure they get installed.
Once this is done, you can start editting the webcomponents in the folder
`homeassistant/components/frontend/www_static/home-assistant-polymer/src`. To see the changes you've
made, simply refresh your browser.
Once this is done, you can start editting the webcomponents in the folder `homeassistant/components/frontend/www_static/home-assistant-polymer/src`. To see the changes you've made, simply refresh your browser.
## {% linkable_title Enabling JavaScript backend development %}
Polymer is only providing a UI toolkit for Home Assistant. All data management and interaction with
the server is done by `home-assistant-js` leveraging NuclearJS. To enable JavaScript development:
Polymer is only providing a UI toolkit for Home Assistant. All data management and interaction with the server is done by `home-assistant-js` leveraging NuclearJS. To enable JavaScript development:
```bash
cd homeassistant/components/frontend/www_static/home-assistant-polymer/
npm run setup_js_dev
npm run js_dev
$ cd homeassistant/components/frontend/www_static/home-assistant-polymer/
$ npm run setup_js_dev
$ npm run js_dev
```
`npm run js_dev` will start the process that will ensure that your latest changes to the JavaScript
files will be loaded when you refresh the page. This command has to be always running while working
on home-assistant-js.
`npm run js_dev` will start the process that will ensure that your latest changes to the JavaScript files will be loaded when you refresh the page. This command has to be always running while working on home-assistant-js.
After your changes have been accepted into the `home-assistant-js` repository, we'll have to update
Home Assistant Polymer to use the latest version. This can be done by updating `package.json`. Look
for the line that contains `home-assistant-js` and update the SHA to the SHA of your commit.
After your changes have been accepted into the `home-assistant-js` repository, we'll have to update Home Assistant Polymer to use the latest version. This can be done by updating `package.json`. Look for the line that contains `home-assistant-js` and update the SHA to the SHA of your commit.
# {% linkable_title Building the Polymer frontend %}
@ -78,21 +68,18 @@ Building a new version of the frontend is as simple as running `script/build_fro
<p class='img'>
<img src='/images/frontend/polymer-build-architecture.png' alt='Polymer build architecture diagram' />
Polymer build architecture diagram
</p>
# {% 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.
<img src='/images/frontend/frontend-cards.png' />
Some domains will be filtered out of the main view and are available through separate menu options. Examples are `group`, `script`, `scene`.
![Cards in the frontend](/images/frontend/frontend-cards.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)_
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).
@ -108,7 +95,7 @@ Whenever the user taps or clicks on one of the cards, a more info dialog will sh
The more info dialog for a light allows the user to control the color and the brightness.
</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`:
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).