jeena/home-assistant.github.io
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions
home-assistant.github.io/developers/frontend.html
Paulus Schoutsen f7e7e07d56 Site updated at 2014-12-26 08:54:45 UTC
2014-12-26 00:54:45 -08:00

194 lines
No EOL
7.5 KiB
HTML
Raw Blame History

<!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>Frontend development - Home Assistant</title>
<meta name="author" content="Paulus Schoutsen">
<meta name="description" content="Tips and hints if you are starting on Home Assistant frontend development">
<meta name="viewport" content="width=device-width">
<link rel="canonical" href="https://home-assistant.io">
<meta property="fb:app_id" content="338291289691179">
<meta property="og:title" content="Frontend development">
<meta property="og:site_name" content="Home Assistant">
<meta property="og:url" content="https://home-assistant.io/developers/frontend.html/">
<meta property="og:type" content="website">
<meta property="og:description" content="Tips and hints if you are starting on Home Assistant frontend development">
<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='/images/favicon-192x192.png'> Home Assistant
</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="/developers/">Developers</a>
<ul>
<li><a href="/developers/architecture.html">Architecture</a></li>
<li><a href="/developers/frontend.html">Frontend development</a></li>
<li><a href="/developers/creating_components.html">
Creating components
</a></li>
<li><a href="/developers/add_new_platform.html">
Adding platform support
</a></li>
<li><a href="/developers/api.html">Rest API</a></li>
</ul>
</li>
<li><a href="/blog/">Blog</a></li>
<li><a href="https://groups.google.com/forum/#!forum/home-assistant-dev">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">
Frontend Development
</h1>
</header>
<hr class="divider">
<p>Home Assistant uses <a href="https://www.polymer-project.org/">Polymer</a> for the frontend. Polymer allows building encapsulated and interoperable custom elements that extend HTML itself.</p>
<h1>Turning on development mode</h1>
<p>Home Assistant will by default serve the compiled version of the frontend. To change it so that the components are served separately, update your <code>home-assistant.conf</code> to have these lines:</p>
<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>[http]
</span><span class='line'>api_password=YOUR_PASSWORD
</span><span class='line'>development=1</span></code></pre></td></tr></table></div></figure>
<p>After turning on development mode, you will have to install the webcomponents that the frontend depends on. You can do this by running the <code>build_frontend</code> script.</p>
<p class='note warning'>
Do not use development mode in production. Home Assistant uses aggresive caching to improve the mobile experience. This is disabled during development so that you do not have to restart the server in between changes.
</p>
<h1>Building the frontend</h1>
<p>To build the frontend you need to install node and the npm packages bower and vulcanize.</p>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'>npm install -g bower vulcanize
</span></code></pre></td></tr></table></div></figure>
<p>After that you can run <a href="https://github.com/balloob/home-assistant/blob/master/build_frontend"><code>./build_frontend</code></a> from the project directory. This will take all the used webcomponents and &lsquo;vulcanize&rsquo; it into a single file to be served by Home Assistant. The script also updates <a href="https://github.com/balloob/home-assistant/blob/master/homeassistant/components/http/frontend.py"><code>homeassistant/components/http/frontend.py</code></a> with an MD5 hash of the frontend.</p>
<h1>Adding new state cards</h1>
<p>The main interface of Home Assistant is a list of current states in the State Machine. It will filter out the group states and offers options to filter by groups on the top.</p>
<p>Currently there are two supported card types:</p>
<ul>
<li>Display: shows the state in the card</li>
<li>Toggle: allows the user to toggle a device on/off from its state</li>
</ul>
<p>To add your own card type, follow the following steps:</p>
<ol>
<li>Adjust the cardType property of the State class in <a href="https://github.com/balloob/home-assistant/blob/master/homeassistant/components/http/www_static/polymer/home-assistant-api.html">home-assistant-api.html</a> to return your new card type when appropriate.</li>
<li>Create a new component following the naming convention state-card-CARDTYPE.html.</li>
<li>Import your new component and add a template for it in <a href="https://github.com/balloob/home-assistant/blob/master/homeassistant/components/http/www_static/polymer/states-cards.html">states-cards.html</a>.</li>
</ol>
</article>
</div>
</div>
</div>
<footer>
<div class="grid-wrapper">
<div class="grid">
<div class="grid__item">
<p class="copyright">
<span class="credit">Powered by <a href="http://octopress.org">Octopress</a>, <a href='http://jekyllrb.com/'>Jekyll</a> and the <a href='https://github.com/coogie/oscailte'>Oscalite theme</a>. Hosted by <a href='https://pages.github.com/'>GitHub</a> and served by <a href='https://cloudflare.com'>CloudFlare</a>.</span>
</p>
</div>
</div>
</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>
Reference in a new issue View git blame Copy permalink