341 lines
20 KiB
HTML
341 lines
20 KiB
HTML
<!doctype html>
|
||
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
|
||
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
|
||
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
|
||
<!--[if gt IE 8]><!--> <html> <!--<![endif]-->
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||
<title>Creating custom panels - Home Assistant</title>
|
||
<meta name="author" content="Home Assistant">
|
||
<meta name="description" content="Introduction to create custom panels for Home Assistant.">
|
||
<meta name="viewport" content="width=device-width">
|
||
<link rel="canonical" href="https://home-assistant.io/developers/frontend_creating_custom_panels/">
|
||
<meta property="fb:app_id" content="338291289691179">
|
||
<meta property="og:title" content="Creating custom panels">
|
||
<meta property="og:site_name" content="Home Assistant">
|
||
<meta property="og:url" content="https://home-assistant.io/developers/frontend_creating_custom_panels/">
|
||
<meta property="og:type" content="website">
|
||
<meta property="og:description" content="Introduction to create custom panels for Home Assistant.">
|
||
<meta property="og:image" content="https://home-assistant.io/images/default-social.png">
|
||
<meta name="twitter:card" content="summary_large_image">
|
||
<meta name="twitter:site" content="@home_assistant">
|
||
<meta name="twitter:title" content="Creating custom panels">
|
||
<meta name="twitter:description" content="Introduction to create custom panels for Home Assistant.">
|
||
<meta name="twitter:image" content="https://home-assistant.io/images/default-social.png">
|
||
<link href="/stylesheets/screen.css" media="screen, projection, print" rel="stylesheet">
|
||
<link href="/atom.xml" rel="alternate" title="Home Assistant" type="application/atom+xml">
|
||
<link rel='shortcut icon' href='/images/favicon.ico' />
|
||
<link rel='icon' type='image/png' href='/images/favicon-192x192.png' sizes='192x192' />
|
||
</head>
|
||
<body >
|
||
<header class='site-header'>
|
||
<div class="grid-wrapper">
|
||
<div class="grid">
|
||
<div class="grid__item three-tenths lap-two-sixths palm-one-whole ha-title">
|
||
<a href="/" class="site-title">
|
||
<img width='40' src='/demo/favicon-192x192.png'>
|
||
<span>Home Assistant</span>
|
||
</a>
|
||
</div>
|
||
<div class="grid__item seven-tenths lap-four-sixths palm-one-whole">
|
||
<nav>
|
||
<input type="checkbox" id="toggle">
|
||
<label for="toggle" class="toggle" data-open="Main Menu" data-close="Close Menu"></label>
|
||
<ul class="menu pull-right">
|
||
<li><a href="/getting-started/">Getting started</a></li>
|
||
<li><a href="/components/">Components</a></li>
|
||
<li><a href="/docs/">Docs</a></li>
|
||
<li><a href="/cookbook/">Examples</a></li>
|
||
<li><a href="/developers/">Developers</a></li>
|
||
<li><a href="/blog/">Blog</a></li>
|
||
<li><a href="/help/">Need help?</a></li>
|
||
<li><a href='#' class='show-search'><i class="icon-search"></i></a></li>
|
||
</ul>
|
||
</nav>
|
||
<div class='search-container' style='display: none'>
|
||
<div class='search'>
|
||
<i class="icon-search"></i>
|
||
<input id='search' placeholder='Search the docs…'>
|
||
<a href='#' class='close'><i class="icon-remove-sign"></i></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
<div class="grid-wrapper">
|
||
<div class="grid grid-center">
|
||
<div class="grid__item two-thirds lap-one-whole palm-one-whole">
|
||
<article class="page">
|
||
<header>
|
||
<h1 class="title indent">
|
||
Creating custom panels
|
||
</h1>
|
||
</header>
|
||
<hr class="divider">
|
||
<p>Panels are pages within Home Assistant that show information within Home Assistant and can allow controlling it. Panels are linked from the sidebar and rendered full screen. The have have real-time access to the Home Assistant object via JavaScript. Examples of panels in the app are map, logbook and history.</p>
|
||
<p>Besides components registering panels, users can also register panels using the <code class="highlighter-rouge">panel_custom</code> component. This allows users to quickly build their own custom interfaces for Home Assistant.</p>
|
||
<h3><a class="title-link" name="before-you-get-started" href="#before-you-get-started"></a> Before you get started</h3>
|
||
<p>The Home Assistant user interface is currently served to browsers in modern JavaScript and older JavaScript (ES5). The older version has a wider browser support but that comes at a cost of size, performance and more difficult to get started building panels for authors.</p>
|
||
<p>We therefore advice to set up the frontend to serve the modern version of the frontend so that you won’t need any build tools while developing. If you realize that your audience requires both, you can add a transpilation step in the future. To set up your frontend to always serve the latest version, add this to your config:</p>
|
||
<div class="highlighter-rouge"><pre class="highlight"><code>frontend:
|
||
javascript_version: latest
|
||
</code></pre>
|
||
</div>
|
||
<h3><a class="title-link" name="building-your-first-panel" href="#building-your-first-panel"></a> Building your first panel</h3>
|
||
<p>Create a file called <code class="highlighter-rouge">hello.html</code> in your <config dir="">/panels/.</config></p>
|
||
<p>The <code class="highlighter-rouge">hello.html</code> contains the needed building blocks to create the elements inside the view.</p>
|
||
<div class="language-html highlighter-rouge"><pre class="highlight"><code><span class="nt"><dom-module</span> <span class="na">id=</span><span class="s">'ha-panel-hello'</span><span class="nt">></span>
|
||
<span class="nt"><template></span>
|
||
<span class="nt"><style></span>
|
||
<span class="nt">p</span> <span class="p">{</span>
|
||
<span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span>
|
||
<span class="p">}</span>
|
||
<span class="nt"></style></span>
|
||
<span class="nt"><p></span>Hello {{who}}. Greetings from Home Assistant.<span class="nt"></p></span>
|
||
<span class="nt"></template></span>
|
||
<span class="nt"></dom-module></span>
|
||
|
||
<span class="nt"><script></span>
|
||
<span class="kr">class</span> <span class="nx">HaPanelHello</span> <span class="kr">extends</span> <span class="nx">Polymer</span><span class="p">.</span><span class="nx">Element</span> <span class="p">{</span>
|
||
<span class="kr">static</span> <span class="nx">get</span> <span class="nx">is</span><span class="p">()</span> <span class="p">{</span> <span class="k">return</span> <span class="s1">'ha-panel-hello'</span><span class="p">;</span> <span class="p">}</span>
|
||
|
||
<span class="kr">static</span> <span class="nx">get</span> <span class="nx">properties</span><span class="p">()</span> <span class="p">{</span>
|
||
<span class="k">return</span> <span class="p">{</span>
|
||
<span class="c1">// Home Assistant object</span>
|
||
<span class="na">hass</span><span class="p">:</span> <span class="nb">Object</span><span class="p">,</span>
|
||
<span class="c1">// If should render in narrow mode</span>
|
||
<span class="na">narrow</span><span class="p">:</span> <span class="p">{</span>
|
||
<span class="na">type</span><span class="p">:</span> <span class="nb">Boolean</span><span class="p">,</span>
|
||
<span class="na">value</span><span class="p">:</span> <span class="kc">false</span><span class="p">,</span>
|
||
<span class="p">},</span>
|
||
<span class="c1">// If sidebar is currently shown</span>
|
||
<span class="na">showMenu</span><span class="p">:</span> <span class="p">{</span>
|
||
<span class="na">type</span><span class="p">:</span> <span class="nb">Boolean</span><span class="p">,</span>
|
||
<span class="na">value</span><span class="p">:</span> <span class="kc">false</span><span class="p">,</span>
|
||
<span class="p">},</span>
|
||
<span class="c1">// Home Assistant panel info</span>
|
||
<span class="c1">// panel.config contains config passed to register_panel serverside</span>
|
||
<span class="na">panel</span><span class="p">:</span> <span class="nb">Object</span><span class="p">,</span>
|
||
<span class="na">who</span><span class="p">:</span> <span class="p">{</span>
|
||
<span class="na">type</span><span class="p">:</span> <span class="nb">String</span><span class="p">,</span>
|
||
<span class="na">computed</span><span class="p">:</span> <span class="s1">'computeWho(panel)'</span><span class="p">,</span>
|
||
<span class="p">},</span>
|
||
<span class="p">};</span>
|
||
<span class="p">}</span>
|
||
|
||
<span class="nx">computeWho</span><span class="p">(</span><span class="nx">panel</span><span class="p">)</span> <span class="p">{</span>
|
||
<span class="k">return</span> <span class="nx">panel</span> <span class="o">&&</span> <span class="nx">panel</span><span class="p">.</span><span class="nx">config</span> <span class="o">&&</span> <span class="nx">panel</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">who</span> <span class="p">?</span> <span class="nx">panel</span><span class="p">.</span><span class="nx">config</span><span class="p">.</span><span class="nx">who</span> <span class="p">:</span> <span class="s1">'World'</span><span class="p">;</span>
|
||
<span class="p">}</span>
|
||
<span class="p">}</span>
|
||
<span class="nx">customElements</span><span class="p">.</span><span class="nx">define</span><span class="p">(</span><span class="nx">HaPanelHello</span><span class="p">.</span><span class="nx">is</span><span class="p">,</span> <span class="nx">HaPanelHello</span><span class="p">);</span>
|
||
<span class="nt"></script></span>
|
||
</code></pre>
|
||
</div>
|
||
<p>Create an entry for the new panel in your <code class="highlighter-rouge">configuration.yaml</code> file:</p>
|
||
<div class="language-yaml highlighter-rouge"><pre class="highlight"><code><span class="s">panel_custom</span><span class="pi">:</span>
|
||
<span class="pi">-</span> <span class="s">name</span><span class="pi">:</span> <span class="s">hello</span>
|
||
<span class="s">sidebar_title</span><span class="pi">:</span> <span class="s">Hello World</span>
|
||
<span class="s">sidebar_icon</span><span class="pi">:</span> <span class="s">mdi:hand-pointing-right</span>
|
||
<span class="s">url_path</span><span class="pi">:</span> <span class="s">hello</span>
|
||
</code></pre>
|
||
</div>
|
||
<p>For more possibilities, see the <a href="/cookbook/#user-interface">Custom panel section</a> on our Examples page.</p>
|
||
</article>
|
||
</div>
|
||
<aside id="sidebar" class="grid__item one-third lap-one-whole palm-one-whole">
|
||
<div class="grid">
|
||
<section class="aside-module grid__item one-whole lap-one-half">
|
||
<div class='edit-github'><a href='https://github.com/home-assistant/home-assistant.github.io/tree/current/source/developers/frontend_creating_custom_panels.markdown'>Edit this page on GitHub</a></div>
|
||
<div class='section'>
|
||
<h1 class="title delta">Development Guide</h1>
|
||
<ul class='divided sidebar-menu'>
|
||
<li>
|
||
<a href='/developers/'>Introduction </a>
|
||
<ul>
|
||
<li><a href='/developers/architecture/'>Architecture </a></li>
|
||
<li><a href='/developers/architecture_components/'>Components </a></li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<a href='/developers/development/'>Starting with Development </a>
|
||
<ul>
|
||
<li><a href='/developers/development_environment/'>Setting up Environment </a></li>
|
||
<li><a href='/developers/development_submitting/'>Submit your Work </a></li>
|
||
<li><a href='/developers/development_checklist/'>Checklist </a></li>
|
||
<li><a href='/developers/development_guidelines/'>Style guidelines </a></li>
|
||
<li><a href='/developers/development_testing/'>Testing </a></li>
|
||
<li><a href='/developers/development_catching_up/'>Catching up with Reality </a></li>
|
||
<li><a href='/developers/development_validation/'>Validation </a></li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<a href='/developers/development_101/'>Development 101 </a>
|
||
<ul>
|
||
<li><a href='/developers/development_hass_object/'>Hass object </a></li>
|
||
<li><a href='/developers/development_events/'>Events </a></li>
|
||
<li><a href='/developers/development_states/'>States </a></li>
|
||
<li><a href='/developers/development_services/'>Services </a></li>
|
||
<li><a href='/developers/development_config/'>Config </a></li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<a href='/developers/add_new_platform/'>Creating a new platform (to support a new device) </a>
|
||
<ul>
|
||
<li><a href='/developers/code_review_platform/'>Checklist creating a platform </a></li>
|
||
<li><a href='/developers/platform_example_sensor/'>Example sensor platform </a></li>
|
||
<li><a href='/developers/platform_example_light/'>Example light platform </a></li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<a href='/developers/creating_components/'>Adding a new component </a>
|
||
<ul>
|
||
<li><a href='/developers/code_review_component/'>Checklist creating a component </a></li>
|
||
<li><a href='/developers/component_loading/'>Loading components </a></li>
|
||
<li><a href='/developers/component_deps_and_reqs/'>Requirements & Dependencies </a></li>
|
||
<li><a href='/developers/component_events/'>Handling events </a></li>
|
||
<li><a href='/developers/component_states/'>States </a></li>
|
||
<li><a href='/developers/component_visibility/'>Visibility </a></li>
|
||
<li><a href='/developers/component_generic_discovery/'>Loading Platforms </a></li>
|
||
<li><a href='/developers/component_discovery/'>Component Discovery </a></li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<a href='/developers/intent/'>Intents (handling voice responses) </a>
|
||
<ul>
|
||
<li><a href='/developers/intent/firing/'>Firing intents </a></li>
|
||
<li><a href='/developers/intent/handling/'>Handling intents </a></li>
|
||
<li><a href='/developers/intent/conversation/'>Registering sentences </a></li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<a href='/developers/asyncio/'>Asynchronous Programming </a>
|
||
<ul>
|
||
<li><a href='/developers/asyncio_101/'>Introduction to asyncio </a></li>
|
||
<li><a href='/developers/asyncio_categorizing_functions/'>Categorizing Functions </a></li>
|
||
<li><a href='/developers/asyncio_working_with_async/'>Working with Async </a></li>
|
||
<li><a href='/developers/asyncio_misc/'>Miscellaneous </a></li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<a href='/developers/frontend/'>Frontend Development </a>
|
||
<ul>
|
||
<li><a href='/developers/frontend_add_card/'>Add State Card </a></li>
|
||
<li><a href='/developers/frontend_add_more_info/'>Add More Info Dialog </a></li>
|
||
<li><a class='active' href='/developers/frontend_creating_custom_panels/'>Add Custom Panels </a></li>
|
||
<li><a href='/developers/frontend_creating_custom_ui/'>Add Custom UI </a></li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<a href='/developers/internationalization/'>Internationalization </a>
|
||
<ul>
|
||
<li><a href='/developers/internationalization/backend_localization/'>Backend Localization </a></li>
|
||
<li><a href='/developers/internationalization/custom_component_localization/'>Custom Component Localization </a></li>
|
||
<li><a href='/developers/internationalization/translation/'>Translation </a></li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<a href='/developers/hassio/architecture/'>Hass.io architecture </a>
|
||
<ul>
|
||
<li><a href='/developers/hassio/debugging/'>Debugging Hass.io </a></li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<a href='/developers/hassio/addon_development/'>Hass.io Add-on Development </a>
|
||
<ul>
|
||
<li><a href='/developers/hassio/addon_tutorial/'>Tutorial: Making your first add-on </a></li>
|
||
<li><a href='/developers/hassio/addon_config/'>Configuration </a></li>
|
||
<li><a href='/developers/hassio/addon_communication/'>Communication </a></li>
|
||
<li><a href='/developers/hassio/addon_testing/'>Local Testing </a></li>
|
||
<li><a href='/developers/hassio/addon_publishing/'>Publishing </a></li>
|
||
<li><a href='/developers/hassio/addon_presentation/'>Presentation </a></li>
|
||
<li><a href='/developers/hassio/addon_repository/'>Repositories </a></li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<a href='/developers/api/'>API </a>
|
||
<ul>
|
||
<li><a href='https://dev-docs.home-assistant.io/en/dev/'>Python API </a></li>
|
||
<li><a href='/developers/websocket_api/'>Websocket API </a></li>
|
||
<li><a href='/developers/rest_api/'>REST API </a></li>
|
||
<li><a href='/developers/python_api/'>Python REST API </a></li>
|
||
<li><a href='/developers/server_sent_events/'>Server-sent events </a></li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<a href='/developers/documentation/'>Website/Documentation </a>
|
||
<ul>
|
||
<li><a href='/developers/documentation/standards/'>Standards </a></li>
|
||
<li><a href='/developers/documentation/create_page/'>Create a new page </a></li>
|
||
</ul>
|
||
</li>
|
||
<li><a href='/developers/helpers/'>Online helpers </a></li>
|
||
<li><a href='/developers/releasing/'>Releasing </a></li>
|
||
<li><a href='/developers/maintenance/'>Maintenance </a></li>
|
||
<li>
|
||
Governance
|
||
<ul>
|
||
<li><a href='/developers/cla/'>Contributor License Agreement </a></li>
|
||
<li><a href='/privacy/'>Privacy Policy </a></li>
|
||
<li><a href='/tos/'>Terms of Service </a></li>
|
||
<li><a href='/code_of_conduct/'>Code of Conduct </a></li>
|
||
<li><a href='/developers/credits/'>Credits </a></li>
|
||
<li><a href='/developers/license/'>License </a></li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</aside>
|
||
</div>
|
||
</div>
|
||
<footer>
|
||
<div class="grid-wrapper">
|
||
<div class="grid">
|
||
<div class="grid__item">
|
||
<div class="copyright">
|
||
<a rel="me" href='https://twitter.com/home_assistant'><i class="icon-twitter"></i></a>
|
||
<a rel="me" href='https://facebook.com/homeassistantio'><i class="icon-facebook"></i></a>
|
||
<a rel="me" href='https://plus.google.com/110560654828510104551'><i class="icon-google-plus"></i></a>
|
||
<a rel="me" href='https://github.com/home-assistant/home-assistant'><i class="icon-github"></i></a>
|
||
<div class="credit">
|
||
Contact us at <a href='mailto:hello@home-assistant.io'>hello@home-assistant.io</a> (no support!).<br>
|
||
Website powered by <a href='http://jekyllrb.com/'>Jekyll</a> and the <a href='https://github.com/coogie/oscailte'>Oscalite theme</a>.<br />
|
||
Hosted by <a href='https://pages.github.com/'>GitHub</a> and served by <a href='https://cloudflare.com'>CloudFlare</a>.
|
||
</div>
|
||
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png" /></a><br /><span xmlns:dct="http://purl.org/dc/terms/" property="dct:title">home-assistant.io</span> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License</a>.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
<script>
|
||
var _gaq=[['_setAccount','UA-57927901-1'],['_trackPageview']];
|
||
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
|
||
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
|
||
s.parentNode.insertBefore(g,s)}(document,'script'));
|
||
</script>
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" />
|
||
<script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
|
||
<script type="text/javascript">
|
||
docsearch({
|
||
apiKey: 'ae96d94b201c5444c8a443093edf3efb',
|
||
indexName: 'home-assistant',
|
||
inputSelector: '#search',
|
||
debug: false // Set debug to true if you want to inspect the dropdown
|
||
});
|
||
document.querySelector('.search .close').addEventListener('click', function(ev) {
|
||
ev.preventDefault();
|
||
document.querySelector('.search-container').style.display = 'none';
|
||
});
|
||
document.querySelector('.show-search').addEventListener('click', function(ev) {
|
||
ev.preventDefault();
|
||
document.querySelector('.search-container').style.display = 'block';
|
||
document.getElementById('toggle').checked = false;
|
||
document.querySelector('.search-container input').focus();
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|