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

1
developers/add_new_platform.html
View file

@ -1 +0,0 @@
<script>document.location = '/developers/add_new_platform/';</script>

115
developers/add_new_platform/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/add_new_platform.markdown'>Edit this page on GitHub</a></div>
<header>
@ -207,44 +189,6 @@ setup_platform(hass, config, add_devices, discovery_info=<span class="predefined
</div>
</div>
<h2><a class="title-link" name="allowing-your-platform-to-be-discovered" href="#allowing-your-platform-to-be-discovered"></a> Allowing your platform to be discovered</h2>
<p>Home Assistant has a discovery service running in the background to discover new devices. Whenever a new device is discovered, an <code>SERVICE_DISCOVERED</code> event will be fired with the found service and the information. The <code>discovery</code> component has some knowledge about which components handle which type of services and will ensure those are loaded and listening before firing the <code>SERVICE_DISCOVERED</code> event.</p>
<h3><a class="title-link" name="add-discovery-instructions" href="#add-discovery-instructions"></a> Add discovery instructions</h3>
<p>Device discovery for Home Assistant has been extracted into an external library called <a href="https://github.com/balloob/netdisco">NetDisco</a>. This library is integrated using <a href="https://github.com/home-assistant/home-assistant/blob/dev/homeassistant/components/discovery.py">the <code>discovery</code> component</a> and scans the network in intervals for uPnP and zeroconf/mDNS services.</p>
<p>To have your device be discovered, you will have to extend the NetDisco library to be able to find your device. This is done by adding a new discoverable. <a href="https://github.com/balloob/netdisco/tree/master/netdisco/discoverables">See the repository for examples of existing discoverables.</a></p>
<h3><a class="title-link" name="listening-to-service_discovered-events" href="#listening-to-service_discovered-events"></a> Listening to <code>SERVICE_DISCOVERED</code> events</h3>
<p>From your component, you will have to set up the listening for specific services. Below an example how one would listen for discovered Chromecasts:</p>
<div class="highlighter-coderay"><div class="CodeRay">
<div class="code"><pre><span class="keyword">from</span> <span class="include">homeassistant.loader</span> <span class="keyword">import</span> <span class="include">get_component</span>
<span class="keyword">def</span> <span class="function">setup</span>(hass, config):
discovery = get_component(<span class="string"><span class="delimiter">'</span><span class="content">discovery</span><span class="delimiter">'</span></span>)
<span class="keyword">def</span> <span class="function">chromecast_discovered</span>(service, info):
<span class="docstring"><span class="delimiter">&quot;&quot;&quot;</span><span class="content"> Called when a Chromecast has been discovered. </span><span class="delimiter">&quot;&quot;&quot;</span></span>
print(<span class="string"><span class="delimiter">&quot;</span><span class="content">Discovered a new Chromecast: {}</span><span class="delimiter">&quot;</span></span>.format(info))
discovery.listen(
hass, discovery.services.GOOGLE_CAST, chromecast_discovered)
</pre></div>
</div>
</div>
<h3><a class="title-link" name="auto-loading-your-component-upon-discovery" href="#auto-loading-your-component-upon-discovery"></a> Auto-loading your component upon discovery</h3>
<p>The Discovery component is capable of setting up your components before firing the <code>SERVICE_DISCOVERD</code> event. To do this you will have to update the <a href="https://github.com/home-assistant/home-assistant/blob/dev/homeassistant/components/discovery.py#L29"><code>SERVICE_HANDLERS</code></a> constant in <a href="https://github.com/home-assistant/home-assistant/blob/dev/homeassistant/components/discovery.py">the <code>discovery</code> component</a>.</p>
<p class="note warning">
This option is currently limited to built-in components.
</p>
</article>
@ -252,6 +196,56 @@ This option is currently limited to built-in components.
</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 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 class='active' 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>
@ -273,16 +267,11 @@ This option is currently limited to built-in components.
</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>

1
developers/api.html
View file

@ -1 +0,0 @@
<script>document.location = '/developers/api/';</script>

168
developers/api/index.html
View file

@ -1,168 +0,0 @@
<!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>Home Assistant API/SSE - Home Assistant</title>
<meta name="author" content="Paulus Schoutsen">
<meta name="description" content="Home Assistant API/SSE documentation">
<meta name="viewport" content="width=device-width">
<link rel="canonical" href="https://home-assistant.io/developers/api/">
<meta property="fb:app_id" content="338291289691179">
<meta property="og:title" content="Home Assistant API/SSE">
<meta property="og:site_name" content="Home Assistant">
<meta property="og:url" content="https://home-assistant.io/developers/api/">
<meta property="og:type" content="website">
<meta property="og:description" content="Home Assistant API/SSE documentation">
<meta property="og:image" content="https://home-assistant.io/images/home-assistant-logo-2164x2164.png">
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@home_assistant">
<meta name="twitter:title" content="Home Assistant API/SSE">
<meta name="twitter:description" content="Home Assistant API/SSE documentation">
<meta name="twitter:image" content="https://home-assistant.io/images/home-assistant-logo-2164x2164.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>Getting started <i class="icon icon-caret-down"></i></a>
<ul>
<li><a href='/getting-started/'>Installing Home Assistant</a></li>
<li><a href='/getting-started/configuration/'>Configuration Basics</a></li>
<li><a href='/getting-started/devices/'>Adding devices</a></li>
<li><a href='/getting-started/presence-detection/'>Presence Detection</a></li>
<li><a href='/getting-started/automation/'>Automation</a></li>
<li><a href='/topics/'>Advanced Topics</a></li>
</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="/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">
<div class='edit-github'><a href='https://github.com/home-assistant/home-assistant.io/tree/master/source/developers/api.markdown'>Edit this page on GitHub</a></div>
<header>
<h1 class="title indent">
Home Assistant API/SSE
</h1>
</header>
<hr class="divider">
<p>Home Assistant is offering a RESTful API and a Python API for convenient access to a Home Assistant instance over HTTP.</p>
<ul>
<li><a href="/developers/rest_api/">RESTful API</a></li>
<li><a href="/developers/python_api/">Python API</a></li>
</ul>
<p>There is also support for <a href="/developers/server_sent_events">server-sent events</a>.</p>
</article>
</div>
</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://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 />
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>
<!--[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>

1
developers/architecture.html
View file

@ -1 +0,0 @@
<script>document.location = '/developers/architecture/';</script>

173
developers/architecture/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/architecture.markdown'>Edit this page on GitHub</a></div>
<header>
@ -146,102 +128,6 @@
Overview of the Home Assistant core architecture
</p>
<p>Home Assistant can be extended by <strong>components</strong>. Each component is responsible for a specific domain within Home Assistant. Components can listen for or trigger events, offer services and maintain states. Components are written in Python and can do all the goodness that Python has to offer. Out of the box, Home Assistant offers a bunch of <a href="/components/">built-in components</a>.</p>
<p>We can differentiate between two different types of components within Home Assistant.</p>
<h4><a class="title-link" name="components-that-interact-with-an-internet-of-things-domain" href="#components-that-interact-with-an-internet-of-things-domain"></a> Components that interact with an Internet of Things domain</h4>
<p>These components will track devices within a specific domain and consist of a core part and platform-specific logic. These components make their information available via the State Machine and the Event Bus. The component will also register services in the Service Registry to expose control of the devices.</p>
<p>For example, one of the built-in components is the <code>switch</code> component. This component is responsible for interaction with different types of switches.</p>
<p>A platform provides support for a particular kind/brand of device. For example, a switch could use a WeMo or Orvibo platform, and a light component might interact with the Hue or LiFX platform.</p>
<p>If you are planning to add support for a new platform, please check out the <a href="/developers/add_new_platform/">add new platform section</a>.</p>
<h4><a class="title-link" name="components-that-respond-to-events-that-happen-within-home-assistant" href="#components-that-respond-to-events-that-happen-within-home-assistant"></a> Components that respond to events that happen within Home Assistant</h4>
<p>These components provide small pieces of home automation logic or services that do common tasks within your house.</p>
<p>For example the <a href="/components/device_sun_light_trigger/"><code>device_sun_light_trigger</code> component</a> tracks the state of devices and the sun to make sure that the lights are turned on when it gets dark and there are people home. The component uses logic along the following lines:</p>
<div class="highlighter-coderay"><div class="CodeRay">
<div class="code"><pre> In the event that device 'Paulus Nexus 5' changes to the 'Home' state:
If the sun has set and the lights are not on:
Turn on the lights
</pre></div>
</div>
</div>
<div class="highlighter-coderay"><div class="CodeRay">
<div class="code"><pre> In the event that the combined state of all tracked devices changes to 'Not Home':
If the lights are on:
Turn off the lights
</pre></div>
</div>
</div>
<div class="highlighter-coderay"><div class="CodeRay">
<div class="code"><pre> In the event of the sun setting:
If the lights are off and the combined state of all tracked device equals 'Home':
Turn on the lights
</pre></div>
</div>
</div>
<p>An extended example of a home automation component can be found <a href="https://github.com/home-assistant/home-assistant/blob/master/config/custom_components/example.py">here</a>.</p>
<h3><a class="title-link" name="the-full-picture" href="#the-full-picture"></a> The full picture</h3>
<p>When we put all the different pieces of Home Assistant together we see that we match pretty close to the initial sketched home automation overview. The smart home AI is not implemented yet and therefore omitted from the following picture.</p>
<p class="img">
<a href="/images/architecture/ha_full_architecture.png">
<img src="/images/architecture/ha_full_architecture.png" />
</a>
Overview of the full Home Assistant architecture with a couple of loaded components and platforms.
</p>
<p>The platform logic for components uses 3rd party Python libraries to communicate with the devices. This is done so that we can leverage great device libraries that are out there in the Python community.</p>
<h2><a class="title-link" name="multiple-connected-instances" href="#multiple-connected-instances"></a> Multiple connected instances</h2>
<p>Home Assistant supports running multiple synchronized instances using a master-slave model. Whenever <code>events.fire</code> or <code>states.set</code> is called on the salve it will forward it to the master. The master will replicate all events and changed states to its slaves.</p>
<p class="img">
<a href="/images/architecture/architecture-remote.png">
<img src="/images/architecture/architecture-remote.png" />
</a>
Overview of the Home Assistant architecture for multiple devices.
</p>
<p>A slave instance can be started with the following code and has the same support for components as a master instance.</p>
<div class="highlighter-coderay"><div class="CodeRay">
<div class="code"><pre><span class="keyword">import</span> <span class="include">homeassistant.remote</span> <span class="keyword">as</span> remote
<span class="keyword">import</span> <span class="include">homeassistant.bootstrap</span> <span class="keyword">as</span> bootstrap
<span class="comment"># Location of the Master API: host, password, port.</span>
<span class="comment"># Password and port are optional.</span>
remote_api = remote.API(<span class="string"><span class="delimiter">&quot;</span><span class="content">127.0.0.1</span><span class="delimiter">&quot;</span></span>, <span class="string"><span class="delimiter">&quot;</span><span class="content">password</span><span class="delimiter">&quot;</span></span>, <span class="integer">8124</span>)
<span class="comment"># Initialize slave</span>
hass = remote.HomeAssistant(remote_api)
<span class="comment"># To add an interface to the slave on localhost:8123</span>
bootstrap.setup_component(hass, <span class="string"><span class="delimiter">'</span><span class="content">frontend</span><span class="delimiter">'</span></span>)
hass.start()
hass.block_till_stopped()
</pre></div>
</div>
</div>
<p class="note">
Because each slave maintains its own Service Registry it is possible to have multiple slaves respond to one service call.
</p>
</article>
@ -249,6 +135,56 @@ Because each slave maintains its own Service Registry it is possible to have mul
</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 class='active' 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 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>
@ -270,16 +206,11 @@ Because each slave maintains its own Service Registry it is possible to have mul
</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>

244
developers/architecture_components/index.html Normal file
View file

@ -0,0 +1,244 @@
<!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>Components Architecture - Home Assistant</title>
<meta name="author" content="Paulus Schoutsen">
<meta name="description" content="Overview of components within the Home Assistant architecture.">
<meta name="viewport" content="width=device-width">
<link rel="canonical" href="https://home-assistant.io/developers/architecture_components/">
<meta property="fb:app_id" content="338291289691179">
<meta property="og:title" content="Components Architecture">
<meta property="og:site_name" content="Home Assistant">
<meta property="og:url" content="https://home-assistant.io/developers/architecture_components/">
<meta property="og:type" content="website">
<meta property="og:description" content="Overview of components within the Home Assistant architecture.">
<meta property="og:image" content="https://home-assistant.io/images/home-assistant-logo-2164x2164.png">
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@home_assistant">
<meta name="twitter:title" content="Components Architecture">
<meta name="twitter:description" content="Overview of components within the Home Assistant architecture.">
<meta name="twitter:image" content="https://home-assistant.io/images/home-assistant-logo-2164x2164.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>Getting started <i class="icon icon-caret-down"></i></a>
<ul>
<li><a href='/getting-started/'>Installing Home Assistant</a></li>
<li><a href='/getting-started/configuration/'>Configuration Basics</a></li>
<li><a href='/getting-started/devices/'>Adding devices</a></li>
<li><a href='/getting-started/presence-detection/'>Presence Detection</a></li>
<li><a href='/getting-started/automation/'>Automation</a></li>
<li><a href='/topics/'>Advanced Topics</a></li>
</ul>
</li>
<li><a href='/components/'>Components</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">
Components Architecture
</h1>
</header>
<hr class="divider">
<p>Home Assistant can be extended by <strong>components</strong>. Each component is responsible for a specific domain within Home Assistant. Components can listen for or trigger events, offer services and maintain states. Components are written in Python and can do all the goodness that Python has to offer. Out of the box, Home Assistant offers a bunch of <a href="/components/">built-in components</a>.</p>
<p>We can differentiate between two different types of components within Home Assistant.</p>
<h4><a class="title-link" name="components-that-interact-with-an-internet-of-things-domain" href="#components-that-interact-with-an-internet-of-things-domain"></a> Components that interact with an Internet of Things domain</h4>
<p>These components will track devices within a specific domain and consist of a core part and platform-specific logic. These components make their information available via the State Machine and the Event Bus. The component will also register services in the Service Registry to expose control of the devices.</p>
<p>For example, one of the built-in components is the <code>switch</code> component. This component is responsible for interaction with different types of switches.</p>
<p>A platform provides support for a particular kind/brand of device. For example, a switch could use a WeMo or Orvibo platform, and a light component might interact with the Hue or LiFX platform.</p>
<p>If you are planning to add support for a new platform, please check out the <a href="/developers/add_new_platform/">add new platform section</a>.</p>
<h4><a class="title-link" name="components-that-respond-to-events-that-happen-within-home-assistant" href="#components-that-respond-to-events-that-happen-within-home-assistant"></a> Components that respond to events that happen within Home Assistant</h4>
<p>These components provide small pieces of home automation logic or services that do common tasks within your house.</p>
<p>For example the <a href="/components/device_sun_light_trigger/"><code>device_sun_light_trigger</code> component</a> tracks the state of devices and the sun to make sure that the lights are turned on when it gets dark and there are people home. The component uses logic along the following lines:</p>
<div class="highlighter-coderay"><div class="CodeRay">
<div class="code"><pre> In the event that device 'Paulus Nexus 5' changes to the 'Home' state:
If the sun has set and the lights are not on:
Turn on the lights
</pre></div>
</div>
</div>
<div class="highlighter-coderay"><div class="CodeRay">
<div class="code"><pre> In the event that the combined state of all tracked devices changes to 'Not Home':
If the lights are on:
Turn off the lights
</pre></div>
</div>
</div>
<div class="highlighter-coderay"><div class="CodeRay">
<div class="code"><pre> In the event of the sun setting:
If the lights are off and the combined state of all tracked device equals 'Home':
Turn on the lights
</pre></div>
</div>
</div>
<p>An extended example of a home automation component can be found <a href="https://github.com/home-assistant/home-assistant/blob/master/config/custom_components/example.py">here</a>.</p>
<h3><a class="title-link" name="the-full-picture" href="#the-full-picture"></a> The full picture</h3>
<p>When we put all the different pieces of Home Assistant together we see that we match pretty close to the initial sketched home automation overview. The smart home AI is not implemented yet and therefore omitted from the following picture.</p>
<p class="img">
<a href="/images/architecture/ha_full_architecture.png">
<img src="/images/architecture/ha_full_architecture.png" />
</a>
Overview of the full Home Assistant architecture with a couple of loaded components and platforms.
</p>
<p>The platform logic for components uses 3rd party Python libraries to communicate with the devices. This is done so that we can leverage great device libraries that are out there in the Python community.</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='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 class='active' 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 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>
<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://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 />
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>

1
developers/creating_components.html
View file

@ -1 +0,0 @@
<script>document.location = '/developers/creating_components/';</script>

77
developers/creating_components/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/creating_components.markdown'>Edit this page on GitHub</a></div>
<header>
@ -220,6 +202,56 @@ Home Assistant will use the directory that contains your config file as the dire
</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 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 class='active' 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>
@ -241,16 +273,11 @@ Home Assistant will use the directory that contains your config file as the dire
</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>

1
developers/credits.html
View file

@ -1 +0,0 @@
<script>document.location = '/developers/credits/';</script>

77
developers/credits/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/credits.markdown'>Edit this page on GitHub</a></div>
<header>
@ -246,6 +228,56 @@
</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 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 class='active' href='/developers/credits/'>Credits </a></li>
</ul>
</div>
</section>
</div>
</aside>
</div>
</div>
@ -267,16 +299,11 @@
</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>

252
developers/development_environment/index.html Normal file
View file

@ -0,0 +1,252 @@
<!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>Setup Development - Home Assistant</title>
<meta name="author" content="Paulus Schoutsen">
<meta name="description" content="Everything to get you started developing for Home Assistant.">
<meta name="viewport" content="width=device-width">
<link rel="canonical" href="https://home-assistant.io/developers/development_environment/">
<meta property="fb:app_id" content="338291289691179">
<meta property="og:title" content="Setup Development">
<meta property="og:site_name" content="Home Assistant">
<meta property="og:url" content="https://home-assistant.io/developers/development_environment/">
<meta property="og:type" content="website">
<meta property="og:description" content="Everything to get you started developing for Home Assistant.">
<meta property="og:image" content="https://home-assistant.io/images/home-assistant-logo-2164x2164.png">
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@home_assistant">
<meta name="twitter:title" content="Setup Development">
<meta name="twitter:description" content="Everything to get you started developing for Home Assistant.">
<meta name="twitter:image" content="https://home-assistant.io/images/home-assistant-logo-2164x2164.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>Getting started <i class="icon icon-caret-down"></i></a>
<ul>
<li><a href='/getting-started/'>Installing Home Assistant</a></li>
<li><a href='/getting-started/configuration/'>Configuration Basics</a></li>
<li><a href='/getting-started/devices/'>Adding devices</a></li>
<li><a href='/getting-started/presence-detection/'>Presence Detection</a></li>
<li><a href='/getting-started/automation/'>Automation</a></li>
<li><a href='/topics/'>Advanced Topics</a></li>
</ul>
</li>
<li><a href='/components/'>Components</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">
Setup Development
</h1>
</header>
<hr class="divider">
<p>Home Assistant is built from the ground up to be easily-extensible by other developers using components. It uses <a href="https://www.python.org/">Python 3</a> for the backend and <a href="https://www.polymer-project.org/">Polymer (Web components)</a> for the frontend.</p>
<p>Home Assistant is open-source and MIT licensed. The source can be found here:</p>
<ul>
<li><a href="https://github.com/home-assistant/home-assistant">home-assistant</a> - Python server backend</li>
<li><a href="https://github.com/home-assistant/home-assistant-js">home-assistant-js</a> - JavaScript backend powering the client</li>
<li><a href="https://github.com/home-assistant/home-assistant-polymer">home-assistant-polymer</a> - Polymer UI</li>
</ul>
<h3><a class="title-link" name="starting-development" href="#starting-development"></a> Starting development</h3>
<p>You will need to set up a development environment if you want to start developing a new feature or component for Home Assistant. Please follow these steps to get setup.<br />
Visit the <a href="https://github.com/home-assistant/home-assistant">the Home Assistant repository</a> first and click fork in the top right.</p>
<p>We suggest that you setup a <a href="https://docs.python.org/3.4/library/venv.html">virtual environment</a> aka <code>venv</code> before running the setup script.</p>
<div class="highlighter-coderay"><div class="CodeRay">
<div class="code"><pre>$ git clone https://github.com/YOUR_GIT_USERNAME/home-assistant.git
$ cd home-assistant
$ git remote add upstream https://github.com/home-assistant/home-assistant.git
$ script/setup
</pre></div>
</div>
</div>
<p>Testing your work requires <code>tox</code> to be installed:</p>
<div class="highlighter-coderay"><div class="CodeRay">
<div class="code"><pre>$ pip3 install tox
</pre></div>
</div>
</div>
<p>After following these steps, running <code>hass</code> will invoke your local installation.</p>
<h3><a class="title-link" name="submitting-improvements" href="#submitting-improvements"></a> Submitting improvements</h3>
<p>Improvements to Home Assistant should be submitted one feature at a time using GitHub <a href="https://help.github.com/articles/using-pull-requests">pull requests</a>.</p>
<ol>
<li>From your fork, create a new branch to hold your changes<br />
<code>git checkout -b some-feature</code></li>
<li>Make the changes you want</li>
<li>Test your changes and check for style violations<br />
<code>tox</code></li>
<li>Commit the changes<br />
<code>git add .</code><br />
<code>git commit -m "Added some-feature"</code></li>
<li>Push your committed changes back to your fork on GitHub<br />
<code>git push origin HEAD</code></li>
<li>Follow <a href="https://help.github.com/articles/creating-a-pull-request/">these steps</a> to create your pull request.</li>
</ol>
<h3><a class="title-link" name="further-reading" href="#further-reading"></a> Further reading</h3>
<ul>
<li><a href="/developers/architecture/">Home Assistant Architecture</a></li>
<li><a href="/developers/frontend/">Frontend development</a></li>
<li><a href="/developers/creating_components/">Creating a custom component</a></li>
<li><a href="/developers/add_new_platform/">Adding support for a new platform</a></li>
<li><a href="/developers/api/">Rest API</a></li>
<li><a href="/developers/server_sent_events/">Server-sent events</a></li>
<li><a href="/developers/website/">Website</a></li>
</ul>
</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='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 class='active' href='/developers/development_environment/'>Setup Dev Environment </a></li>
</ul>
</li>
<li>
Frontend Development
<ul>
<li><a 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>
<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://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 />
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>

1
developers/frontend.html
View file

@ -1 +0,0 @@
<script>document.location = '/developers/frontend/';</script>

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>

206
developers/frontend_add_card/index.html Normal file
View file

@ -0,0 +1,206 @@
<!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 state card - Home Assistant</title>
<meta name="author" content="Paulus Schoutsen">
<meta name="description" content="Adding a state card to the frontend">
<meta name="viewport" content="width=device-width">
<link rel="canonical" href="https://home-assistant.io/developers/frontend_add_card/">
<meta property="fb:app_id" content="338291289691179">
<meta property="og:title" content="Adding state card">
<meta property="og:site_name" content="Home Assistant">
<meta property="og:url" content="https://home-assistant.io/developers/frontend_add_card/">
<meta property="og:type" content="website">
<meta property="og:description" content="Adding a state card to the frontend">
<meta property="og:image" content="https://home-assistant.io/images/home-assistant-logo-2164x2164.png">
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@home_assistant">
<meta name="twitter:title" content="Adding state card">
<meta name="twitter:description" content="Adding a state card to the frontend">
<meta name="twitter:image" content="https://home-assistant.io/images/home-assistant-logo-2164x2164.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>Getting started <i class="icon icon-caret-down"></i></a>
<ul>
<li><a href='/getting-started/'>Installing Home Assistant</a></li>
<li><a href='/getting-started/configuration/'>Configuration Basics</a></li>
<li><a href='/getting-started/devices/'>Adding devices</a></li>
<li><a href='/getting-started/presence-detection/'>Presence Detection</a></li>
<li><a href='/getting-started/automation/'>Automation</a></li>
<li><a href='/topics/'>Advanced Topics</a></li>
</ul>
</li>
<li><a href='/components/'>Components</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 State Card
</h1>
</header>
<hr class="divider">
<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>
</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='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 href='/developers/frontend/'>Setup Frontend Environment </a></li>
<li><a class='active' 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>
<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://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 />
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>

201
developers/frontend_add_more_info/index.html Normal file
View file

@ -0,0 +1,201 @@
<!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="Paulus Schoutsen">
<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/home-assistant-logo-2164x2164.png">
<meta name="twitter:card" content="summary">
<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/home-assistant-logo-2164x2164.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>Getting started <i class="icon icon-caret-down"></i></a>
<ul>
<li><a href='/getting-started/'>Installing Home Assistant</a></li>
<li><a href='/getting-started/configuration/'>Configuration Basics</a></li>
<li><a href='/getting-started/devices/'>Adding devices</a></li>
<li><a href='/getting-started/presence-detection/'>Presence Detection</a></li>
<li><a href='/getting-started/automation/'>Automation</a></li>
<li><a href='/topics/'>Advanced Topics</a></li>
</ul>
</li>
<li><a href='/components/'>Components</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>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>
</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 href='/developers/frontend/'>Setup Frontend Environment </a></li>
<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>
</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>
<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://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 />
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>

158
developers/index.html
View file

@ -7,26 +7,26 @@
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Setup Development - Home Assistant</title>
<title>Developers - Home Assistant</title>
<meta name="author" content="Paulus Schoutsen">
<meta name="description" content="Everything to get you started developing for Home Assistant.">
<meta name="description" content="Everything you need to know to get started with Home Assistant development.">
<meta name="viewport" content="width=device-width">
<link rel="canonical" href="https://home-assistant.io/developers/">
<meta property="fb:app_id" content="338291289691179">
<meta property="og:title" content="Setup Development">
<meta property="og:title" content="Developers">
<meta property="og:site_name" content="Home Assistant">
<meta property="og:url" content="https://home-assistant.io/developers/">
<meta property="og:type" content="website">
<meta property="og:description" content="Everything to get you started developing for Home Assistant.">
<meta property="og:description" content="Everything you need to know to get started with Home Assistant development.">
<meta property="og:image" content="https://home-assistant.io/images/home-assistant-logo-2164x2164.png">
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@home_assistant">
<meta name="twitter:title" content="Setup Development">
<meta name="twitter:description" content="Everything to get you started developing for Home Assistant.">
<meta name="twitter:title" content="Developers">
<meta name="twitter:description" content="Everything you need to know to get started with Home Assistant development.">
<meta name="twitter:image" content="https://home-assistant.io/images/home-assistant-logo-2164x2164.png">
<link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet">
@ -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,85 +87,17 @@
<article class="page">
<div class='edit-github'><a href='https://github.com/home-assistant/home-assistant.io/tree/master/source/developers/index.markdown'>Edit this page on GitHub</a></div>
<header>
<h1 class="title indent">
Setup Development
Developers
</h1>
</header>
<hr class="divider">
<p>Home Assistant is built from the ground up to be easily-extensible by other developers using components. It uses <a href="https://www.python.org/">Python 3</a> for the backend and <a href="https://www.polymer-project.org/">Polymer (Web components)</a> for the frontend.</p>
<p>Home Assistant is open-source and MIT licensed. The source can be found here:</p>
<ul>
<li><a href="https://github.com/home-assistant/home-assistant">home-assistant</a> - Python server backend</li>
<li><a href="https://github.com/home-assistant/home-assistant-js">home-assistant-js</a> - JavaScript backend powering the client</li>
<li><a href="https://github.com/home-assistant/home-assistant-polymer">home-assistant-polymer</a> - Polymer UI</li>
</ul>
<h3><a class="title-link" name="starting-development" href="#starting-development"></a> Starting development</h3>
<p>You will need to set up a development environment if you want to start developing a new feature or component for Home Assistant. Please follow these steps to get setup.<br />
Visit the <a href="https://github.com/home-assistant/home-assistant">the Home Assistant repository</a> first and click fork in the top right.</p>
<p>We suggest that you setup a <a href="https://docs.python.org/3.4/library/venv.html">virtual environment</a> aka <code>venv</code> before running the setup script.</p>
<div class="highlighter-coderay"><div class="CodeRay">
<div class="code"><pre>$ git clone https://github.com/YOUR_GIT_USERNAME/home-assistant.git
$ cd home-assistant
$ git remote add upstream https://github.com/home-assistant/home-assistant.git
$ script/setup
</pre></div>
</div>
</div>
<p>Testing your work requires <code>tox</code> to be installed:</p>
<div class="highlighter-coderay"><div class="CodeRay">
<div class="code"><pre>$ pip3 install tox
</pre></div>
</div>
</div>
<p>After following these steps, running <code>hass</code> will invoke your local installation.</p>
<h3><a class="title-link" name="submitting-improvements" href="#submitting-improvements"></a> Submitting improvements</h3>
<p>Improvements to Home Assistant should be submitted one feature at a time using GitHub <a href="https://help.github.com/articles/using-pull-requests">pull requests</a>.</p>
<ol>
<li>From your fork, create a new branch to hold your changes<br />
<code>git checkout -b some-feature</code></li>
<li>Make the changes you want</li>
<li>Test your changes and check for style violations<br />
<code>tox</code></li>
<li>Commit the changes<br />
<code>git add .</code><br />
<code>git commit -m "Added some-feature"</code></li>
<li>Push your committed changes back to your fork on GitHub<br />
<code>git push origin HEAD</code></li>
<li>Follow <a href="https://help.github.com/articles/creating-a-pull-request/">these steps</a> to create your pull request.</li>
</ol>
<h3><a class="title-link" name="further-reading" href="#further-reading"></a> Further reading</h3>
<ul>
<li><a href="/developers/architecture/">Home Assistant Architecture</a></li>
<li><a href="/developers/frontend/">Frontend development</a></li>
<li><a href="/developers/creating_components/">Creating a custom component</a></li>
<li><a href="/developers/add_new_platform/">Adding support for a new platform</a></li>
<li><a href="/developers/api/">Rest API</a></li>
<li><a href="/developers/server_sent_events/">Server-sent events</a></li>
<li><a href="/developers/website/">Website</a></li>
</ul>
<p>Welcome to the Home Assistant development documentation. This is the place to learn all about how Home Assistant works and how you can extend it with support for your devices and services!</p>
</article>
@ -189,6 +106,56 @@ $ script/setup
</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 class='active' 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 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>
@ -210,16 +177,11 @@ $ script/setup
</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>

220
developers/multiple_instances/index.html Normal file
View file

@ -0,0 +1,220 @@
<!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>Multiple Instances - Home Assistant</title>
<meta name="author" content="Paulus Schoutsen">
<meta name="description" content="Quick primer on how multiple instances work together.">
<meta name="viewport" content="width=device-width">
<link rel="canonical" href="https://home-assistant.io/developers/multiple_instances/">
<meta property="fb:app_id" content="338291289691179">
<meta property="og:title" content="Multiple Instances">
<meta property="og:site_name" content="Home Assistant">
<meta property="og:url" content="https://home-assistant.io/developers/multiple_instances/">
<meta property="og:type" content="website">
<meta property="og:description" content="Quick primer on how multiple instances work together.">
<meta property="og:image" content="https://home-assistant.io/images/home-assistant-logo-2164x2164.png">
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@home_assistant">
<meta name="twitter:title" content="Multiple Instances">
<meta name="twitter:description" content="Quick primer on how multiple instances work together.">
<meta name="twitter:image" content="https://home-assistant.io/images/home-assistant-logo-2164x2164.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>Getting started <i class="icon icon-caret-down"></i></a>
<ul>
<li><a href='/getting-started/'>Installing Home Assistant</a></li>
<li><a href='/getting-started/configuration/'>Configuration Basics</a></li>
<li><a href='/getting-started/devices/'>Adding devices</a></li>
<li><a href='/getting-started/presence-detection/'>Presence Detection</a></li>
<li><a href='/getting-started/automation/'>Automation</a></li>
<li><a href='/topics/'>Advanced Topics</a></li>
</ul>
</li>
<li><a href='/components/'>Components</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">
Multiple Instances
</h1>
</header>
<hr class="divider">
<p>Home Assistant supports running multiple synchronized instances using a master-slave model. Whenever <code>events.fire</code> or <code>states.set</code> is called on the salve it will forward it to the master. The master will replicate all events and changed states to its slaves.</p>
<p class="img">
<a href="/images/architecture/architecture-remote.png">
<img src="/images/architecture/architecture-remote.png" />
</a>
Overview of the Home Assistant architecture for multiple devices.
</p>
<p>A slave instance can be started with the following code and has the same support for components as a master instance.</p>
<div class="highlighter-coderay"><div class="CodeRay">
<div class="code"><pre><span class="keyword">import</span> <span class="include">homeassistant.remote</span> <span class="keyword">as</span> remote
<span class="keyword">import</span> <span class="include">homeassistant.bootstrap</span> <span class="keyword">as</span> bootstrap
<span class="comment"># Location of the Master API: host, password, port.</span>
<span class="comment"># Password and port are optional.</span>
remote_api = remote.API(<span class="string"><span class="delimiter">&quot;</span><span class="content">127.0.0.1</span><span class="delimiter">&quot;</span></span>, <span class="string"><span class="delimiter">&quot;</span><span class="content">password</span><span class="delimiter">&quot;</span></span>, <span class="integer">8124</span>)
<span class="comment"># Initialize slave</span>
hass = remote.HomeAssistant(remote_api)
<span class="comment"># To add an interface to the slave on localhost:8123</span>
bootstrap.setup_component(hass, <span class="string"><span class="delimiter">'</span><span class="content">frontend</span><span class="delimiter">'</span></span>)
hass.start()
hass.block_till_stopped()
</pre></div>
</div>
</div>
<p class="note">
Because each slave maintains its own Service Registry it is possible to have multiple slaves respond to one service call.
</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='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 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 class='active' 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>
<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://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 />
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>

221
developers/platform_discovery/index.html Normal file
View file

@ -0,0 +1,221 @@
<!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>Platform Discovery - Home Assistant</title>
<meta name="author" content="Paulus Schoutsen">
<meta name="description" content="How to make platform discovery work.">
<meta name="viewport" content="width=device-width">
<link rel="canonical" href="https://home-assistant.io/developers/platform_discovery/">
<meta property="fb:app_id" content="338291289691179">
<meta property="og:title" content="Platform Discovery">
<meta property="og:site_name" content="Home Assistant">
<meta property="og:url" content="https://home-assistant.io/developers/platform_discovery/">
<meta property="og:type" content="website">
<meta property="og:description" content="How to make platform discovery work.">
<meta property="og:image" content="https://home-assistant.io/images/home-assistant-logo-2164x2164.png">
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@home_assistant">
<meta name="twitter:title" content="Platform Discovery">
<meta name="twitter:description" content="How to make platform discovery work.">
<meta name="twitter:image" content="https://home-assistant.io/images/home-assistant-logo-2164x2164.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>Getting started <i class="icon icon-caret-down"></i></a>
<ul>
<li><a href='/getting-started/'>Installing Home Assistant</a></li>
<li><a href='/getting-started/configuration/'>Configuration Basics</a></li>
<li><a href='/getting-started/devices/'>Adding devices</a></li>
<li><a href='/getting-started/presence-detection/'>Presence Detection</a></li>
<li><a href='/getting-started/automation/'>Automation</a></li>
<li><a href='/topics/'>Advanced Topics</a></li>
</ul>
</li>
<li><a href='/components/'>Components</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">
Platform Discovery
</h1>
</header>
<hr class="divider">
<p class="note warning">
This option is only available to built-in components.
</p>
<p>Home Assistant has a discovery service running in the background to discover new devices. Whenever a new device is discovered, an <code>SERVICE_DISCOVERED</code> event will be fired with the found service and the information. The <code>discovery</code> component has some knowledge about which components handle which type of services and will ensure those are loaded and listening before firing the <code>SERVICE_DISCOVERED</code> event.</p>
<h3><a class="title-link" name="add-discovery-instructions" href="#add-discovery-instructions"></a> Add discovery instructions</h3>
<p>Device discovery for Home Assistant has been extracted into an external library called <a href="https://github.com/home-assistant/netdisco">NetDisco</a>. This library is integrated using <a href="https://github.com/home-assistant/home-assistant/blob/dev/homeassistant/components/discovery.py">the <code>discovery</code> component</a> and scans the network in intervals for uPnP and zeroconf/mDNS services.</p>
<p>To have your device be discovered, you will have to extend the NetDisco library to be able to find your device. This is done by adding a new discoverable. <a href="https://github.com/home-assistant/netdisco/tree/master/netdisco/discoverables">See the repository for examples of existing discoverables.</a></p>
<h3><a class="title-link" name="listening-to-service_discovered-events" href="#listening-to-service_discovered-events"></a> Listening to <code>SERVICE_DISCOVERED</code> events</h3>
<p>From your component, you will have to set up the listening for specific services. Below an example how one would listen for discovered Chromecasts:</p>
<div class="highlighter-coderay"><div class="CodeRay">
<div class="code"><pre><span class="keyword">from</span> <span class="include">homeassistant.loader</span> <span class="keyword">import</span> <span class="include">get_component</span>
<span class="keyword">def</span> <span class="function">setup</span>(hass, config):
discovery = get_component(<span class="string"><span class="delimiter">'</span><span class="content">discovery</span><span class="delimiter">'</span></span>)
<span class="keyword">def</span> <span class="function">chromecast_discovered</span>(service, info):
<span class="docstring"><span class="delimiter">&quot;&quot;&quot;</span><span class="content"> Called when a Chromecast has been discovered. </span><span class="delimiter">&quot;&quot;&quot;</span></span>
print(<span class="string"><span class="delimiter">&quot;</span><span class="content">Discovered a new Chromecast: {}</span><span class="delimiter">&quot;</span></span>.format(info))
discovery.listen(
hass, discovery.services.GOOGLE_CAST, chromecast_discovered)
</pre></div>
</div>
</div>
<h3><a class="title-link" name="auto-loading-your-component-upon-discovery" href="#auto-loading-your-component-upon-discovery"></a> Auto-loading your component upon discovery</h3>
<p>The Discovery component is capable of setting up your components before firing the <code>SERVICE_DISCOVERD</code> event. To do this you will have to update the <a href="https://github.com/home-assistant/home-assistant/blob/dev/homeassistant/components/discovery.py#L29"><code>SERVICE_HANDLERS</code></a> constant in <a href="https://github.com/home-assistant/home-assistant/blob/dev/homeassistant/components/discovery.py">the <code>discovery</code> component</a>.</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='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 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 class='active' 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>
<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://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 />
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>

1
developers/python_api.html
View file

@ -1 +0,0 @@
<script>document.location = '/developers/python_api/';</script>

77
developers/python_api/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/python_api.markdown'>Edit this page on GitHub</a></div>
<header>
@ -285,6 +267,56 @@ remote.call_service(api, domain, <span class="string"><span class="delimiter">'<
</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 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 class='active' 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>
@ -306,16 +338,11 @@ remote.call_service(api, domain, <span class="string"><span class="delimiter">'<
</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>

1
developers/rest_api.html
View file

@ -1 +0,0 @@
<script>document.location = '/developers/rest_api/';</script>

77
developers/rest_api/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/rest_api.markdown'>Edit this page on GitHub</a></div>
<header>
@ -633,6 +615,56 @@ If your client does not support <code>DELETE</code> HTTP requests you can add an
</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 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 class='active' 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>
@ -654,16 +686,11 @@ If your client does not support <code>DELETE</code> HTTP requests you can add an
</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>

77
developers/server_sent_events/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/server_sent_events.markdown'>Edit this page on GitHub</a></div>
<header>
@ -163,6 +145,56 @@
</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 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 class='active' 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>
@ -184,16 +216,11 @@
</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>

1
developers/website.html
View file

@ -1 +0,0 @@
<script>document.location = '/developers/website/';</script>

77
developers/website/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/website.markdown'>Edit this page on GitHub</a></div>
<header>
@ -188,6 +170,56 @@ That means that creating a new page is simple. The pages are written in <a href=
</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 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 class='active' href='/developers/website/'>Home-Assitant.io </a></li>
<li><a href='/developers/credits/'>Credits </a></li>
</ul>
</div>
</section>
</div>
</aside>
</div>
</div>
@ -209,16 +241,11 @@ That means that creating a new page is simple. The pages are written in <a href=
</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>