jeans/home-assistant.io
jeans/home-assistant.io
1
0
Fork 0
mirror of https://github.com/home-assistant/home-assistant.io.git synced 2025-07-08 09:56:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update frontend_creating_custom_panels.markdown

Browse Source
This commit is contained in:
Paulus Schoutsen 2017-12-02 10:49:19 -08:00 committed by GitHub
parent 8231f3c00e
commit 3f66bf3934
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 17 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
source/developers/frontend_creating_custom_panels.markdown
View File

@ -9,13 +9,28 @@ sharing: true
footer: true
---
Any component has the possibility to add a panel to the frontend. Panels will be rendered full screen and have real-time access to the Home Assistant object via JavaScript. Examples of this in the app are map, logbook and history.
Panels are pages within Home Assistant that show information within Home Assistant and can allow controlling it. Panels are linked from the sidebar and rendered full screen. The have have real-time access to the Home Assistant object via JavaScript. Examples of panels in the app are map, logbook and history.
Besides components registering panels, users can also register panels using the `panel_custom` component. This allows users to quickly build their own custom interfaces for Home Assistant.
### {% linkable_title Before you get started %}
The Home Assistant user interface is currently served to browsers in modern JavaScript and older JavaScript (ES5). The older version has a wider browser support but that comes at a cost of size, performance and more difficult to get started building panels for authors.
We therefore advice to set up the frontend to serve the modern version of the frontend so that you won't need any build tools while developing. If you realize that your audience requires both, you can add a transpilation step in the future. To set up your frontend to always serve the latest version, add this to your config:
```
frontend:
javascript_version: latest
```
### {% linkable_title Building your first panel %}
Create a file called `hello.html` in your <config dir>/panels/.
The `hello.html` contains the needed building blocks to create the elements inside the view.
```javascript
```html
<dom-module id='ha-panel-hello'>
<template>
<style>