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-27 19:26:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

Initial docs for custom panels

Browse Source
This commit is contained in:
Fabian Affolter 2016-07-29 20:56:07 +02:00
parent 0ea8514b1c
commit 0942d40eb3
No known key found for this signature in database
GPG Key ID: DDF3D6F44AAB1336
1 changed files with 64 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
source/developers/creating_custom_panels.markdown Normal file
View File

@ -0,0 +1,64 @@
---
layout: page
title: "Creating custom panels"
description: "Introduction to create custom panels for Home Assistant."
date: 2016-07-29 13:00
sidebar: true
comments: false
sharing: true
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.
```python
"""Custom panel example using Server-sent events."""
import os
from homeassistant.components.frontend import register_panel
DOMAIN = 'sse_panel'
DEPENDENCIES = ['frontend']
PANEL_PATH = os.path.join(os.path.dirname(__file__), 'sse.html')
def setup(hass, config):
"""Initialize the custom SSE 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)
return True
```
Use the sample from the [Server-sent Events](/developers/server_sent_events/)
```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>
```
Create an entry for the new panel in your `configuration.yaml` file:
```yaml
sse_panel:
title: 'Server-sent Envent'
```
For more examples, see the [Custom panel Examples](/cookbook#custom-panel-examples) on our examples page.