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 18:06:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

Replace HTML with component

Browse Source
This commit is contained in:
Fabian Affolter 2016-07-30 10:19:08 +02:00
parent 7f13522b60
commit c26b8bb53f
No known key found for this signature in database
GPG Key ID: DDF3D6F44AAB1336
1 changed files with 66 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
source/developers/frontend_creating_custom_panels.markdown
View File

@ -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. 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 ```python
"""Custom panel example using Server-sent events.""" """A minimal custom panel example."""
import os import os
from homeassistant.components.frontend import register_panel from homeassistant.components.frontend import register_panel
DOMAIN = 'sse_panel' DOMAIN = 'hello_panel'
DEPENDENCIES = ['frontend'] 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): def setup(hass, config):
"""Initialize the custom SSE panel.""" """Initialize a minimal custom panel."""
title = config.get(DOMAIN, {}).get('title') title = config.get(DOMAIN, {}).get('title')
config = None if title is None else {'title': title} config = None if title is None else {'title': title}
register_panel(hass, 'sse', PANEL_PATH, title='Hello SSE', register_panel(hass, 'hello', PANEL_PATH, title='Hello World',
icon='mdi:checkbox-marked-outline', config=config) icon='mdi:appnet', config=config)
return True 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 ```html
<!DOCTYPE html> <dom-module id='ha-panel-hello'>
<html> <template>
<body> <style>
<h1>Getting Home Assistant server events</h1> :host {
<div id="events"></div> background: #f5f5f5;
<script type="text/javascript"> display: block;
var source = new EventSource("/api/stream"); height: 100%;
source.onmessage = function(event) { overflow: auto;
document.getElementById("events").innerHTML += event.data + "<br>"; }
}; .mount {
</script> font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
</body> line-height: 1.4em;
</html> color: #4d4d4d;
min-width: 230px;
max-width: 550px;
margin: 0 auto;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
font-smoothing: antialiased;
font-weight: 300;
}
</style>
<p>Hello {{who}}. Greetings from Home Assistant.</p>
</template>
</dom-module>
</script>
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'
}
}
});
</script>
``` ```
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
sse_panel: hello_panel:
title: 'Server-sent Envent' title: 'Custom panel'
``` ```
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.