mirror of
https://github.com/home-assistant/home-assistant.io.git
synced 2025-07-09 18:36:51 +00:00
Initial docs for custom panels
This commit is contained in:
parent
0ea8514b1c
commit
0942d40eb3
64
source/developers/creating_custom_panels.markdown
Normal file
64
source/developers/creating_custom_panels.markdown
Normal 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.
|
Loading…
x
Reference in New Issue
Block a user