230 lines
No EOL
10 KiB
HTML
230 lines
No EOL
10 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>Adding more info dialogs - Home Assistant</title>
|
|
<meta name="author" content="Home Assistant">
|
|
<meta name="description" content="Adding a more info dialog to the frontend">
|
|
|
|
<meta name="viewport" content="width=device-width">
|
|
<link rel="canonical" href="https://home-assistant.io/developers/frontend_add_more_info/">
|
|
|
|
<meta property="fb:app_id" content="338291289691179">
|
|
<meta property="og:title" content="Adding more info dialogs">
|
|
<meta property="og:site_name" content="Home Assistant">
|
|
<meta property="og:url" content="https://home-assistant.io/developers/frontend_add_more_info/">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:description" content="Adding a more info dialog to the frontend">
|
|
<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="Adding more info dialogs">
|
|
<meta name="twitter:description" content="Adding a more info dialog to the frontend">
|
|
<meta name="twitter:image" content="https://home-assistant.io/images/default-social.png">
|
|
|
|
<link href="/stylesheets/screen.css" media="screen, projection" 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>
|
|
<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="/ecosystem/">Ecosystem</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>
|
|
</ul>
|
|
</nav>
|
|
</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">
|
|
Adding More Info Dialogs
|
|
</h1>
|
|
</header>
|
|
<hr class="divider">
|
|
|
|
|
|
<p>Whenever the user taps or clicks on one of the cards, a more info dialog will show. The header of this dialog will be the state card, followed by the history of this entity for the last 24 hours. Below this the more info component is rendered for that entity. The more info component can show more information or allow more ways of control.</p>
|
|
|
|
<p class="img" style="max-width: 400px; margin-left: auto; margin-right: auto;">
|
|
<img src="/images/frontend/frontend-more-info-light.png" />
|
|
The more info dialog for a light allows the user to control the color and the brightness.
|
|
</p>
|
|
|
|
<p>The instructions to add a more info dialog are very similar to adding a new card type. This example will add a new more info component for the domain <code class="highlighter-rouge">camera</code>:</p>
|
|
|
|
<ol>
|
|
<li>Add <code class="highlighter-rouge">'camera'</code> to the array <code class="highlighter-rouge">DOMAINS_WITH_MORE_INFO</code> in the file <a href="https://github.com/home-assistant/home-assistant-polymer/blob/master/src/util/hass-util.html#L24">util/hass-util.html</a>.</li>
|
|
<li>Create the files <code class="highlighter-rouge">more-info-camera.html</code> in the folder <a href="https://github.com/home-assistant/home-assistant-polymer/tree/master/src/more-infos">/more-infos</a>.</li>
|
|
<li>Add <code class="highlighter-rouge"><link rel="import" href="more-info-camera.html"></code> to <a href="https://github.com/home-assistant/home-assistant-polymer/blob/master/src/more-infos/more-info-content.html">more-info-content.html</a></li>
|
|
</ol>
|
|
|
|
|
|
</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_add_more_info.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_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/add_new_platform/'>Support a new device (as a platform) </a>
|
|
<ul>
|
|
<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/component_loading/'>Loading components </a></li>
|
|
<li><a href='/developers/component_deps_and_reqs/'>Requirements & Dependencies </a></li>
|
|
<li><a href='/developers/component_initialization/'>Initialization </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/asyncio/'>Asynchronous Programming </a>
|
|
<ul>
|
|
<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 class='active' href='/developers/frontend_add_more_info/'>Add More Info Dialog </a></li>
|
|
<li><a href='/developers/frontend_creating_custom_panels/'>Add Custom Panels </a></li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
API
|
|
<ul>
|
|
<li><a href='https://dev-docs.home-assistant.io/en/dev/'>Home Assistant API </a></li>
|
|
<li><a href='/developers/websocket_api/'>Websocket API </a></li>
|
|
<li><a href='/developers/rest_api/'>RESTful API </a></li>
|
|
<li><a href='/developers/python_api/'>Python API </a></li>
|
|
<li><a href='/developers/server_sent_events/'>Server-sent events </a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href='/developers/helpers/'>Online helpers </a></li>
|
|
<li><a href='/developers/multiple_instances/'>Multiple Instances </a></li>
|
|
<li><a href='/developers/website/'>Home-Assistant.io </a></li>
|
|
<li><a href='/developers/credits/'>Credits </a></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>.<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>
|
|
</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>
|
|
</body>
|
|
</html> |