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-17 14:26:51 +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.
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
<!DOCTYPE html>
<html>
<body>
<h1>Getting Home Assistant server events</h1>
<div id="events"></div>
<script type="text/javascript">
var source = new EventSource("/api/stream");
source.onmessage = function(event) {
document.getElementById("events").innerHTML += event.data + "<br>";
};
</script>
</body>
</html>
<dom-module id='ha-panel-hello'>
<template>
<style>
:host {
background: #f5f5f5;
display: block;
height: 100%;
overflow: auto;
}
.mount {
font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
line-height: 1.4em;
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:
```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.