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-19 07:17:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update for new panel_custom component (#751)

Browse Source
This commit is contained in:
Fabian Affolter 2016-08-08 18:36:53 +02:00 committed by GitHub
parent 9ba7da10a1
commit cb6bce4520
2 changed files with 17 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
source/_cookbook/custom_panel_using_react.markdown
View File

@ -20,11 +20,17 @@ This is a [React](https://facebook.github.io/react/) implementation of [TodoMVC]
All you need is available as a [custom component](https://github.com/home-assistant/home-assistant/tree/dev/config/custom_components/react_panel). All you need is available as a [custom component](https://github.com/home-assistant/home-assistant/tree/dev/config/custom_components/react_panel).
Create a entry for the panel in your `configuration.yaml` file to enable it. Set a title if you like. Create a entry for the panel in your `configuration.yaml` file to enable it.
```yaml ```yaml
react_panel: panel_custom:
title: 'React' - name: todomvc
sidebar_title: TodoMVC
sidebar_icon: mdi:work
url_path: my-todomvc
webcomponent_path: <config dir>/panels/<component name>.html
config:
hello: world
``` ```
This video shows the example in action. This video shows the example in action.

33
source/developers/frontend_creating_custom_panels.markdown
View File

@ -11,30 +11,9 @@ 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. 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.
Adding a custom panel to your component is easy. For this example we're assuming your component is in `hello_panel.py`. Start by converting your panel to a folder. Create a folder called `hello_panel` and move `hello_panel.py` to `hello_panel/__init__.py`. In that same folder, create a file `panel.html`. Create a file called `hello.html` in your <config dir>/panels/.
Your component should register the panel. The minimum required code for your component is: The `hello.html` contains the needed building blocks to create the elements inside the view.
```python
"""A minimal custom panel example."""
import os
from homeassistant.components.frontend import register_panel
DOMAIN = 'hello_panel'
DEPENDENCIES = ['frontend']
PANEL_PATH = os.path.join(os.path.dirname(__file__), 'panel.html')
def setup(hass, config):
"""Initialize a minimal custom panel."""
register_panel(hass, 'hello', PANEL_PATH, title='Hello World',
icon='mdi:appnet', config=config.get(DOMAIN, {}))
return True
```
The `panel.html` contains the needed building blocks to create the elements inside the view.
```javascript ```javascript
<dom-module id='ha-panel-hello'> <dom-module id='ha-panel-hello'>
@ -87,8 +66,12 @@ Polymer({
Create an entry for the new panel in your `configuration.yaml` file: Create an entry for the new panel in your `configuration.yaml` file:
```yaml ```yaml
hello_panel: panel_custom:
who: 'You' - name: hello_world
sidebar_title: Hello World
sidebar_icon: mdi:hand-pointing-right
url_path: hello_world
webcomponent_path: <config dir>/panels/hello.html
``` ```
For more examples, see the [Custom panel Examples](/cookbook#custom-panel-examples) on our examples page. For more examples, see the [Custom panel Examples](/cookbook#custom-panel-examples) on our examples page.