diff --git a/source/developers/frontend_creating_custom_panels.markdown b/source/developers/frontend_creating_custom_panels.markdown index 6e6ac08ceaf..b5d8a19be03 100644 --- a/source/developers/frontend_creating_custom_panels.markdown +++ b/source/developers/frontend_creating_custom_panels.markdown @@ -11,54 +11,97 @@ footer: true Starting with 0.25 there is support for custom panels. This means that you can create a frontend in the way you want and hook it into Home Assistant. -Create a `__init__.py` file which is loading the panel in a sub-folder like `sse_panel` of your `.homeassistant/custom_components/` folder. +Create a `__init__.py` file which is loading the panel in a sub-folder like `hello_panel` of your `.homeassistant/custom_components/` folder. ```python -"""Custom panel example using Server-sent events.""" +"""A minimal custom panel example.""" import os from homeassistant.components.frontend import register_panel -DOMAIN = 'sse_panel' +DOMAIN = 'hello_panel' DEPENDENCIES = ['frontend'] -PANEL_PATH = os.path.join(os.path.dirname(__file__), 'sse.html') +PANEL_PATH = os.path.join(os.path.dirname(__file__), 'panel.html') def setup(hass, config): - """Initialize the custom SSE panel.""" + """Initialize a minimal custom panel.""" title = config.get(DOMAIN, {}).get('title') config = None if title is None else {'title': title} - register_panel(hass, 'sse', PANEL_PATH, title='Hello SSE', - icon='mdi:checkbox-marked-outline', config=config) + register_panel(hass, 'hello', PANEL_PATH, title='Hello World', + icon='mdi:appnet', config=config) return True ``` -Use the sample from the [Server-sent Events](/developers/server_sent_events/) +The `panel.html` contains the needed building blocks to create the elements inside the view. ```html - - - -

Getting Home Assistant server events

-
- - - + + + + + +Polymer({ + is: 'ha-panel-hello', + properties: { + // Home Assistant object + hass: { + type: Object, + }, + // If should render in narrow mode + narrow: { + type: Boolean, + value: false, + }, + // If sidebar is currently shown + showMenu: { + type: Boolean, + value: false, + }, + // Home Assistant panel info + // panel.config contains config passed to register_panel serverside + panel: { + type: Object, + }, + who: { + type: String, + value: 'You' + } + } +}); + ``` Create an entry for the new panel in your `configuration.yaml` file: ```yaml -sse_panel: - title: 'Server-sent Envent' +hello_panel: + title: 'Custom panel' ``` For more examples, see the [Custom panel Examples](/cookbook#custom-panel-examples) on our examples page.