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

Site updated at 2016-04-13 04:25:48 UTC

Browse source
This commit is contained in:
Travis CI 2016-04-13 04:25:48 +00:00
parent 6ac75e6e67
commit fb1d8f1228
400 changed files with 958 additions and 958 deletions
Download patch file Download diff file Expand all files Collapse all files

28
developers/frontend/index.html
View file

@ -103,7 +103,7 @@
<article class="page">
<div class='edit-github'><a href='https://github.com/balloob/home-assistant.io/tree/master/source/developers/frontend.markdown'>Edit this page on GitHub</a></div>
<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>
@ -119,9 +119,9 @@
<ul>
<li>Polymer allows building encapsulated custom HTML elements.<br />
<a href="https://github.com/balloob/home-assistant-polymer">Home-Assistant-Polymer source code on GitHub.</a></li>
<a href="https://github.com/home-assistant/home-assistant-polymer">Home-Assistant-Polymer source code on GitHub.</a></li>
<li>NuclearJS is a reactive flux built with ImmutableJS data structures.<br />
<a href="https://github.com/balloob/home-assistant-js">Home-Assistant-JS source code on GitHub.</a></li>
<a href="https://github.com/home-assistant/home-assistant-js">Home-Assistant-JS source code on GitHub.</a></li>
</ul>
<p class="note warning">
@ -197,21 +197,21 @@ Polymer build architecture diagram
<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/balloob/home-assistant-polymer/tree/master/src/state-summary">here</a>.</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/balloob/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>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/balloob/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/balloob/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/balloob/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/balloob/home-assistant-polymer/blob/master/src/state-summary/state-card-content.html">state-card-content.html</a>.</li>
<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>
@ -226,10 +226,10 @@ Polymer build architecture diagram
<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/balloob/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/balloob/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/balloob/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/balloob/home-assistant-polymer/blob/master/src/more-infos/more-info-content.html">more-info-content.html</a></li>
<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>
@ -248,7 +248,7 @@ Polymer build architecture diagram
<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://github.com/balloob/home-assistant'><i class="icon-github"></i></a>
<a rel="me" href='https://github.com/home-assistant/home-assistant'><i class="icon-github"></i></a>
<div class="credit">
Website powered by <a href='http://jekyllrb.com/'>Jekyll</a> and the <a href='https://github.com/coogie/oscailte'>Oscalite theme</a>.<br />