jeena/home-assistant.github.io
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

Site updated at 2016-04-16 22:10:25 UTC

Browse source
This commit is contained in:
Travis CI 2016-04-16 22:10:25 +00:00
parent 96f330b140
commit 4e2ff4e405
417 changed files with 2831 additions and 9861 deletions
Download patch file Download diff file Expand all files Collapse all files

118
developers/frontend/index.html
View file

@ -65,23 +65,8 @@
</ul>
</li>
<li><a href='/components/'>Components</a></li>
<li><a href='/cookbook'>Examples</a></li>
<li>
<a>Developers <i class="icon icon-caret-down"></i></a>
<ul>
<li><a href="/developers/">Setup Development</a></li>
<li><a href="/developers/architecture/">Architecture</a></li>
<li><a href="/developers/frontend/">Frontend Development</a></li>
<li><a href="/developers/creating_components/">
Creating Components
</a></li>
<li><a href="/developers/add_new_platform/">
Adding Platform Support
</a></li>
<li><a href="/developers/api/">API and SSE</a></li>
<li><a href="/developers/credits/">Credits</a></li>
</ul>
</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>
@ -102,9 +87,6 @@
<article class="page">
<div class='edit-github'><a href='https://github.com/home-assistant/home-assistant.io/tree/master/source/developers/frontend.markdown'>Edit this page on GitHub</a></div>
<header>
@ -191,47 +173,6 @@ $ npm run js_dev
Polymer build architecture diagram
</p>
<h1><a class="title-link" name="adding-state-cards" href="#adding-state-cards"></a> Adding state cards</h1>
<p>The main interface of Home Assistant is a list of the current entities and their states. For each entity in the system, a state card will be rendered. State cards will show an icon, the name of the entity, when the state has last changed and the current state or a control to interact with it.</p>
<p><img src="/images/frontend/frontend-cards1.png" alt="Cards in the frontend" /></p>
<p>The different card types can be found <a href="https://github.com/home-assistant/home-assistant-polymer/tree/master/src/state-summary">here</a>.</p>
<p>Sensors, when not <a href="/components/group/">grouped</a>, are shown as so-called badges on top of the state cards.</p>
<p><img src="/images/frontend/frontend-badges.png" alt="Badges in the frontend" /></p>
<p>The different badges are located in the file <a href="https://github.com/home-assistant/home-assistant-polymer/blob/master/src/components/entity/ha-state-label-badge.js"><code>/src/components/entity/ha-state-label-badge.js</code></a>.</p>
<p>Adding a custom card type can be done with a few simple steps. For this example we will add a new state card for the domain <code>camera</code>:</p>
<ol>
<li>Add <code>'camera'</code> to the array <code>DOMAINS_WITH_CARD</code> in the file <a href="https://github.com/home-assistant/home-assistant-polymer/blob/master/src/util/state-card-type.js#L3-L4">/util/state-card-type.js</a>.</li>
<li>Create the files <code>state-card-camera.html</code> and <code>state-card-camera.js</code> in the folder <a href="https://github.com/home-assistant/home-assistant-polymer/tree/master/src/state-summary">/state-summary/</a>.</li>
<li>Add <code>require('./state-card-camera')</code> to <a href="https://github.com/home-assistant/home-assistant-polymer/blob/master/src/state-summary/state-card-content.js">state-card-content.js</a>.</li>
<li>Add <code>&lt;link rel="import" href="state-card-camera.html"&gt;</code> to <a href="https://github.com/home-assistant/home-assistant-polymer/blob/master/src/state-summary/state-card-content.html">state-card-content.html</a>.</li>
</ol>
<h1><a class="title-link" name="more-info-screens-for-custom-types" href="#more-info-screens-for-custom-types"></a> More info screens for custom types</h1>
<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>camera</code>:</p>
<ol>
<li>Add <code>'camera'</code> to the array <code>DOMAINS_WITH_MORE_INFO</code> in the file <a href="https://github.com/home-assistant/home-assistant-polymer/blob/master/src/util/state-more-info-type.js#L1">util/state-more-info-type.js</a>.</li>
<li>Create the files <code>more-info-camera.html</code> and <code>more-info-camera.js</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>require('./more-info-camera')</code> to <a href="https://github.com/home-assistant/home-assistant-polymer/blob/master/src/more-infos/more-info-content.js">more-info-content.js</a></li>
<li>Add <code>&lt;link rel="import" href="more-info-camera.html"&gt;</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>
@ -239,6 +180,56 @@ Polymer build architecture diagram
</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='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>
<li><a href='/developers/development_environment/'>Setup Dev Environment </a></li>
</ul>
</li>
<li>
Frontend Development
<ul>
<li><a class='active' href='/developers/frontend/'>Setup Frontend Environment </a></li>
<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>
</ul>
</li>
<li>
Extending Home Assistant
<ul>
<li><a href='/developers/creating_components/'>Creating Components </a></li>
<li><a href='/developers/add_new_platform/'>Adding Platform Support </a></li>
<li><a href='/developers/platform_discovery/'>Platform Discovery </a></li>
</ul>
</li>
<li>
API
<ul>
<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/multiple_instances/'>Multiple Instances </a></li>
<li><a href='/developers/website/'>Home-Assitant.io </a></li>
<li><a href='/developers/credits/'>Credits </a></li>
</ul>
</div>
</section>
</div>
</aside>
</div>
</div>
@ -260,16 +251,11 @@ Polymer build architecture diagram
</div>
</footer>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
<![endif]-->
<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>