3.9 KiB
layout, title, description, date, sidebar, comments, sharing, footer
| layout | title | description | date | sidebar | comments | sharing | footer |
|---|---|---|---|---|---|---|---|
| page | Frontend development | Tips and hints if you are starting on Home Assistant frontend development | 2014-12-21 13:32 | false | false | true | true |
Home Assistant uses Polymer for the frontend. Polymer allows building encapsulated and interoperable custom elements that extend HTML itself.
{% linkable_title Turning on development mode %}
Home Assistant will by default serve the compiled version of the frontend. To change it so that the components are served separately, update your configuration.yaml to have these lines:
http:
development: 1
After turning on development mode, you will have to install the web components that the frontend depends on. You can do this by running the build_frontend script.
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.
{% linkable_title Building the frontend %}
To build the frontend you need to install node and the npm packages bower and vulcanize.
npm install -g bower vulcanize
After that you can run ./build_frontend from the project directory. This will take all the used web components and 'vulcanize' it into a single file to be served by Home Assistant. The script also updates homeassistant/components/http/frontend.py with an MD5 hash of the frontend.
{% linkable_title Adding state cards %}
The main interface of Home Assistant is a list of current states in the State Machine. It will filter out the group states and offers options to filter by groups on the top.
Currently there are two supported card types:
- Display: shows the state on the card
- Toggle: allows the user to toggle a device on/off from the card
To add your own card type, follow the following steps:
- Adjust the cardType property of the State class in home-assistant-api.html to return your new card type when appropriate.
- Create a new component following the naming convention state-card-CARDTYPE.html in /cards/.
- Import your new component in /cards/state-card-content.html.
{% linkable_title More info screens for custom types %}
When you click on a card, the more info dialog will open for that card. This will allow you to see more information and more options to control that entity.
The more info dialog for a light allows us to control the color and the brightness.
To add your own more info dialog, follow the following steps:
- Adjust the moreInfoType property of the State class in home-assistant-api.html to return your new more info type when appropriate.
- Create a new component following the naming convention more-info-CARDTYPE.html in /more-infos/.
- Import your new component in /more-infos/more-info-content.html.