home-assistant.github.io/components/light.template/index.html
2018-01-27 05:27:50 +00:00

550 lines
28 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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>Template Light - Home Assistant</title>
<meta name="author" content="Home Assistant">
<meta name="description" content="Instructions how to integrate Template Lights into Home Assistant.">
<meta name="viewport" content="width=device-width">
<link rel="canonical" href="https://home-assistant.io/components/light.template/">
<meta property="fb:app_id" content="338291289691179">
<meta property="og:title" content="Template Light">
<meta property="og:site_name" content="Home Assistant">
<meta property="og:url" content="https://home-assistant.io/components/light.template/">
<meta property="og:type" content="article">
<meta property="og:description" content="Instructions how to integrate Template Lights into Home Assistant.">
<meta property="og:image" content="https://home-assistant.io/images/default-social.png">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@home_assistant">
<meta name="twitter:title" content="Template Light">
<meta name="twitter:description" content="Instructions how to integrate Template Lights into Home Assistant.">
<meta name="twitter:image" content="https://home-assistant.io/images/default-social.png">
<link href="/stylesheets/screen.css" media="screen, projection, print" 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 class='site-header'>
<div class="grid-wrapper">
<div class="grid">
<div class="grid__item three-tenths lap-two-sixths palm-one-whole ha-title">
<a href="/" class="site-title">
<img width='40' src='/demo/favicon-192x192.png'>
<span>Home Assistant</span>
</a>
</div>
<div class="grid__item seven-tenths lap-four-sixths palm-one-whole">
<nav>
<input type="checkbox" id="toggle">
<label for="toggle" class="toggle" data-open="Main Menu" data-close="Close Menu"></label>
<ul class="menu pull-right">
<li><a href="/getting-started/">Getting started</a></li>
<li><a href="/components/">Components</a></li>
<li><a href="/docs/">Docs</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>
<li><a href='#' class='show-search'><i class="icon-search"></i></a></li>
</ul>
</nav>
<div class='search-container' style='display: none'>
<div class='search'>
<i class="icon-search"></i>
<input id='search' placeholder='Search the docs…'>
<a href='#' class='close'><i class="icon-remove-sign"></i></a>
</div>
</div>
</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">
Template Light
</h1>
</header>
<hr class="divider">
<p>The <code class="highlighter-rouge">template</code> platform creates lights that combine components and provides the
ability to run scripts or invoke services for each of the on, off, and
brightness commands of a light.</p>
<p>To enable Template Lights in your installation, add the following to your
<code class="highlighter-rouge">configuration.yaml</code> file:</p>
<div class="language-yaml highlighter-rouge"><pre class="highlight"><code><span class="c1"># Example configuration.yaml entry</span>
<span class="s">light</span><span class="pi">:</span>
<span class="pi">-</span> <span class="s">platform</span><span class="pi">:</span> <span class="s">template</span>
<span class="s">lights</span><span class="pi">:</span>
<span class="s">theater_lights</span><span class="pi">:</span>
<span class="s">friendly_name</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Theater</span><span class="nv"> </span><span class="s">Lights"</span>
<span class="s">level_template</span><span class="pi">:</span> <span class="s2">"</span><span class="s">{{</span><span class="nv"> </span><span class="s">sensor.theater_brightness.attributes.lux|int</span><span class="nv"> </span><span class="s">}}"</span>
<span class="s">value_template</span><span class="pi">:</span> <span class="s2">"</span><span class="s">{{</span><span class="nv"> </span><span class="s">sensor.theater_brightness.attributes.lux|int</span><span class="nv"> </span><span class="s">&gt;</span><span class="nv"> </span><span class="s">0</span><span class="nv"> </span><span class="s">}}"</span>
<span class="s">turn_on</span><span class="pi">:</span>
<span class="s">service</span><span class="pi">:</span> <span class="s">script.theater_lights_on</span>
<span class="s">turn_off</span><span class="pi">:</span>
<span class="s">service</span><span class="pi">:</span> <span class="s">script.theater_lights_off</span>
<span class="s">set_level</span><span class="pi">:</span>
<span class="s">service</span><span class="pi">:</span> <span class="s">script.theater_lights_level</span>
<span class="s">data_template</span><span class="pi">:</span>
<span class="s">brightness</span><span class="pi">:</span> <span class="s2">"</span><span class="s">{{</span><span class="nv"> </span><span class="s">brightness</span><span class="nv"> </span><span class="s">}}"</span>
</code></pre>
</div>
<div class="config-vars">
<h3><a class="title-link" name="configuration-variables" href="#configuration-variables"></a> Configuration Variables</h3>
<dl class="">
<dt><a class="title-link" name="lights" href="#lights"></a> lights</dt>
<dd>
<p class="desc"><span class="type">(<span class="map">map</span>)</span><span class="required">(Required)</span><span class="description">List of your lights.</span></p>
</dd>
<dd>
<dl class="nested">
<dt><a class="title-link" name="friendly_name" href="#friendly_name"></a> friendly_name</dt>
<dd>
<p class="desc"><span class="type">(<span class="string">string</span>)</span><span class="required">(Optional)</span><span class="description">Name to use in the frontend.</span></p>
</dd>
<dt><a class="title-link" name="value_template" href="#value_template"></a> value_template</dt>
<dd>
<p class="desc"><span class="type">(<span class="template"><a href="/docs/configuration/templating/">template</a></span>)</span><span class="required">(Optional)</span><span class="description">Defines a template to get the state of the light.</span></p>
<p class="default">Default value: optimistic</p>
</dd>
<dt><a class="title-link" name="level_template" href="#level_template"></a> level_template</dt>
<dd>
<p class="desc"><span class="type">(<span class="template"><a href="/docs/configuration/templating/">template</a></span>)</span><span class="required">(Optional)</span><span class="description">Defines a template to get the brightness of the light.</span></p>
<p class="default">Default value: optimistic</p>
</dd>
<dt><a class="title-link" name="turn_on" href="#turn_on"></a> turn_on</dt>
<dd>
<p class="desc"><span class="type">(<span class="action"><a href="/docs/scripts/">action</a></span>)</span><span class="required">(Required)</span><span class="description">Defines an action to run when the light is turned on.</span></p>
</dd>
<dt><a class="title-link" name="turn_off" href="#turn_off"></a> turn_off</dt>
<dd>
<p class="desc"><span class="type">(<span class="action"><a href="/docs/scripts/">action</a></span>)</span><span class="required">(Required)</span><span class="description">Defines an action to run when the light is turned off.</span></p>
</dd>
<dt><a class="title-link" name="set_level" href="#set_level"></a> set_level</dt>
<dd>
<p class="desc"><span class="type">(<span class="action"><a href="/docs/scripts/">action</a></span>)</span><span class="required">(Optional)</span><span class="description">Defines an action to run when the light is given a brightness command.</span></p>
</dd>
</dl>
</dd>
</dl>
</div>
<h2><a class="title-link" name="considerations" href="#considerations"></a> Considerations</h2>
<p>If you are using the state of a platform that takes extra time to load, the
Template Light may get an <code class="highlighter-rouge">unknown</code> state during startup. This results
in error messages in your log file until that platform has completed loading.
If you use <code class="highlighter-rouge">is_state()</code> function in your template, you can avoid this situation.
For example, you would replace
<code class="highlighter-rouge"><span class="p">{</span><span class="err">{</span><span class="w"> </span><span class="err">states.switch.source.state</span><span class="w"> </span><span class="err">==</span><span class="w"> </span><span class="err">'on'</span><span class="w"> </span><span class="p">}</span><span class="err">}</span></code>
with this equivalent that returns <code class="highlighter-rouge">true</code>/<code class="highlighter-rouge">false</code> and never gives an unknown
result:
<code class="highlighter-rouge"><span class="p">{</span><span class="err">{</span><span class="w"> </span><span class="err">is_state('switch.source',</span><span class="w"> </span><span class="err">'on')</span><span class="w"> </span><span class="p">}</span><span class="err">}</span></code></p>
<h2><a class="title-link" name="examples" href="#examples"></a> Examples</h2>
<p>In this section you will find some real life examples of how to use this light.</p>
<h3><a class="title-link" name="theater-volume-control" href="#theater-volume-control"></a> Theater Volume Control</h3>
<p>This example shows a light that is actually a home theaters volume. This
component gives you the flexibility to provide whatever youd like to send as
the payload to the consumer including any scale conversions you may need to
make; the <a href="/components/media_player/">Media Player component</a> needs a floating
point percentage value from <code class="highlighter-rouge">0.0</code> to <code class="highlighter-rouge">1.0</code>.</p>
<div class="language-yaml highlighter-rouge"><pre class="highlight"><code><span class="s">light</span><span class="pi">:</span>
<span class="pi">-</span> <span class="s">platform</span><span class="pi">:</span> <span class="s">template</span>
<span class="s">lights</span><span class="pi">:</span>
<span class="s">theater_volume</span><span class="pi">:</span>
<span class="s">friendly_name</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Receiver</span><span class="nv"> </span><span class="s">Volume"</span>
<span class="s">value_template</span><span class="pi">:</span> <span class="pi">&gt;-</span>
<span class="no">{% if is_state('media_player.receiver', 'on') %}</span>
<span class="no">{% if states.media_player.receiver.attributes.is_volume_muted %}</span>
<span class="no">off</span>
<span class="no">{% else %}</span>
<span class="no">on</span>
<span class="no">{% endif %}</span>
<span class="no">{% else %}</span>
<span class="no">off</span>
<span class="no">{% endif %}</span>
<span class="no">turn_on:</span>
<span class="no">service: media_player.volume_mute</span>
<span class="no">data:</span>
<span class="no">entity_id: media_player.receiver</span>
<span class="no">is_volume_muted: false</span>
<span class="no">turn_off:</span>
<span class="no">service: media_player.volume_mute</span>
<span class="no">data:</span>
<span class="no">entity_id: media_player.receiver</span>
<span class="no">is_volume_muted: true</span>
<span class="no">set_level:</span>
<span class="no">service: media_player.volume_set</span>
<span class="no">data_template:</span>
<span class="no">entity_id: media_player.receiver</span>
<span class="no">volume_level: "{{ (brightness / 255 * 100)|int / 100 }}"</span>
<span class="no">level_template: &gt;-</span>
<span class="no">{% if is_state('media_player.receiver', 'on') %}</span>
<span class="no">{{ (states.media_player.receiver.attributes.volume_level|float * 255)|int }}</span>
<span class="no">{% else %}</span>
<span class="no">0</span>
<span class="no">{% endif %}</span>
</code></pre>
</div>
<h3><a class="title-link" name="change-the-icon" href="#change-the-icon"></a> Change The Icon</h3>
<p>This example shows how to change the icon based on the light state.</p>
<div class="language-yaml highlighter-rouge"><pre class="highlight"><code><span class="s">light</span><span class="pi">:</span>
<span class="pi">-</span> <span class="s">platform</span><span class="pi">:</span> <span class="s">template</span>
<span class="s">lights</span><span class="pi">:</span>
<span class="s">theater_volume</span><span class="pi">:</span>
<span class="s">friendly_name</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Receiver</span><span class="nv"> </span><span class="s">Volume"</span>
<span class="s">value_template</span><span class="pi">:</span> <span class="pi">&gt;-</span>
<span class="no">{% if is_state('media_player.receiver', 'on') %}</span>
<span class="no">{% if states.media_player.receiver.attributes.is_volume_muted %}</span>
<span class="no">off</span>
<span class="no">{% else %}</span>
<span class="no">on</span>
<span class="no">{% endif %}</span>
<span class="no">{% else %}</span>
<span class="no">off</span>
<span class="no">{% endif %}</span>
<span class="no">icon_template: &gt;-</span>
<span class="no">{% if is_state('media_player.receiver', 'on') %}</span>
<span class="no">{% if states.media_player.receiver.attributes.is_volume_muted %}</span>
<span class="no">mdi:lightbulb-off</span>
<span class="no">{% else %}</span>
<span class="no">mdi:lightbulb-on</span>
<span class="no">{% endif %}</span>
<span class="no">{% else %}</span>
<span class="no">mdi:lightbulb-off</span>
<span class="no">{% endif %}</span>
<span class="no">turn_on:</span>
<span class="no">service: media_player.volume_mute</span>
<span class="no">data:</span>
<span class="no">entity_id: media_player.receiver</span>
<span class="no">is_volume_muted: false</span>
<span class="no">turn_off:</span>
<span class="no">service: media_player.volume_mute</span>
<span class="no">data:</span>
<span class="no">entity_id: media_player.receiver</span>
<span class="no">is_volume_muted: true</span>
</code></pre>
</div>
<h3><a class="title-link" name="change-the-entity-picture" href="#change-the-entity-picture"></a> Change The Entity Picture</h3>
<p>This example shows how to change the entity picture based on the light state.</p>
<div class="language-yaml highlighter-rouge"><pre class="highlight"><code><span class="s">light</span><span class="pi">:</span>
<span class="pi">-</span> <span class="s">platform</span><span class="pi">:</span> <span class="s">template</span>
<span class="s">lights</span><span class="pi">:</span>
<span class="s">theater_volume</span><span class="pi">:</span>
<span class="s">friendly_name</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Receiver</span><span class="nv"> </span><span class="s">Volume"</span>
<span class="s">value_template</span><span class="pi">:</span> <span class="pi">&gt;-</span>
<span class="no">{% if is_state('media_player.receiver', 'on') %}</span>
<span class="no">{% if states.media_player.receiver.attributes.is_volume_muted %}</span>
<span class="no">off</span>
<span class="no">{% else %}</span>
<span class="no">on</span>
<span class="no">{% endif %}</span>
<span class="no">{% else %}</span>
<span class="no">off</span>
<span class="no">{% endif %}</span>
<span class="no">icon_template: &gt;-</span>
<span class="no">{% if is_state('media_player.receiver', 'on') %}</span>
<span class="no">{% if states.media_player.receiver.attributes.is_volume_muted %}</span>
<span class="no">/local/lightbulb-off.png</span>
<span class="no">{% else %}</span>
<span class="no">/local/lightbulb-on.png</span>
<span class="no">{% endif %}</span>
<span class="no">{% else %}</span>
<span class="no">/local/lightbulb-off.png</span>
<span class="no">{% endif %}</span>
<span class="no">turn_on:</span>
<span class="no">service: media_player.volume_mute</span>
<span class="no">data:</span>
<span class="no">entity_id: media_player.receiver</span>
<span class="no">is_volume_muted: false</span>
<span class="no">turn_off:</span>
<span class="no">service: media_player.volume_mute</span>
<span class="no">data:</span>
<span class="no">entity_id: media_player.receiver</span>
<span class="no">is_volume_muted: true</span>
</code></pre>
</div>
</article>
</div>
<aside id="sidebar" class="grid__item one-third lap-one-whole palm-one-whole">
<div class="grid">
<section class="aside-module grid__item one-whole lap-one-half">
<div class='edit-github'><a href='https://github.com/home-assistant/home-assistant.github.io/tree/current/source/_components/light.template.markdown'>Edit this page on GitHub</a></div>
<div class='brand-logo-container section'>
<img src='/images/supported_brands/home-assistant.png' />
</div>
<div class='section'>
IoT class<sup><a href='/blog/2016/02/12/classifying-the-internet-of-things/#classifiers'><i class="icon-info-sign"></i></a></sup>: Local Push
</div>
<div class='section'>
Introduced in release: 0.46
</div>
<div class='section'>
Source:
<a href='https://github.com/home-assistant/home-assistant/blob/master/homeassistant/components/light/template.py'>light/template.py</a>
</div>
<div class='section'>
This is a platform for
<a href='/components/light/'>the Lights component</a>.
</div>
<div class='section'>
<h1 class='title delta'>Related components</h1>
<ul class='divided'>
<li><a href='/components/binary_sensor.template/'>
Template Binary Sensor
</a></li>
<li><a href='/components/cover.template/'>
Template Cover
</a></li>
<li><a href='/components/sensor.template/'>
Template Sensor
</a></li>
<li><a href='/components/switch.template/'>
Template Switch
</a></li>
</ul>
</div>
<div class='section'>
<h1 class="title delta">Category Light</h1>
<ul class='divided'>
<li>
<a href='/components/light.ads/'>ADS Light</a>
</li>
<li>
<a href='/components/light.abode/'>Abode Light</a>
</li>
<li>
<a href='/components/light.avion/'>Avi-on</a>
</li>
<li>
<a href='/components/light.wemo/'>Belkin WeMo Lights</a>
</li>
<li>
<a href='/components/light.blinksticklight/'>Blinkstick</a>
</li>
<li>
<a href='/components/light.blinkt/'>Blinkt!</a>
</li>
<li>
<a href='/components/light.enocean/'>EnOcean Light</a>
</li>
<li>
<a href='/components/light.flux_led/'>Flux Led/MagicLight</a>
</li>
<li>
<a href='/components/light.greenwave/'>Greenwave Reality (TCP Connected) Lights</a>
</li>
<li>
<a href='/components/light.hive/'>Hive Light</a>
</li>
<li>
<a href='/components/light.homematic/'>Homematic Light</a>
</li>
<li>
<a href='/components/light.hyperion/'>Hyperion</a>
</li>
<li>
<a href='/components/light.ihc/'>IHC Light</a>
</li>
<li>
<a href='/components/light.tradfri/'>IKEA Trådfri lights</a>
</li>
<li>
<a href='/components/light.isy994/'>ISY994 Light</a>
</li>
<li>
<a href='/components/light.insteon_local/'>Insteon (Local) Light</a>
</li>
<li>
<a href='/components/light.insteon_hub/'>Insteon Hub Light</a>
</li>
<li>
<a href='/components/light.insteon_plm/'>Insteon PLM Light</a>
</li>
<li>
<a href='/components/light.knx/'>KNX Light</a>
</li>
<li>
<a href='/components/light.lifx/'>LIFX</a>
</li>
<li>
<a href='/components/light.decora/'>Leviton Decora</a>
</li>
<li>
<a href='/components/light.decora_wifi/'>Leviton Decora Wi-Fi</a>
</li>
<li>
<a href='/components/light.limitlessled/'>LimitlessLED</a>
</li>
<li>
<a href='/components/light.litejet/'>LiteJet Light</a>
</li>
<li>
<a href='/components/light.lutron_caseta/'>Lutron Caseta Light</a>
</li>
<li>
<a href='/components/light.lutron/'>Lutron Light</a>
</li>
<li>
<a href='/components/light.mqtt_json/'>MQTT JSON Light</a>
</li>
<li>
<a href='/components/light.mqtt/'>MQTT Light</a>
</li>
<li>
<a href='/components/light.mqtt_template/'>MQTT Template Light</a>
</li>
<li>
<a href='/components/light.mochad/'>Mochad Light</a>
</li>
<li>
<a href='/components/light.mysensors/'>MySensors Light</a>
</li>
<li>
<a href='/components/light.osramlightify/'>Osram Lightify</a>
</li>
<li>
<a href='/components/light.rpi_gpio_pwm/'>PWM LED</a>
</li>
<li>
<a href='/components/light.hue/'>Philips Hue Light</a>
</li>
<li>
<a href='/components/light.piglow/'>Piglow</a>
</li>
<li>
<a href='/components/light.qwikswitch/'>QwikSwitch Light</a>
</li>
<li>
<a href='/components/light.rflink/'>RFLink Light</a>
</li>
<li>
<a href='/components/light.rfxtrx/'>RFXtrx Light</a>
</li>
<li>
<a href='/components/light.scsgate/'>SCSGate Light</a>
</li>
<li>
<a href='/components/light.sensehat/'>Sense HAT Light</a>
</li>
<li>
<a href='/components/light.skybell/'>Skybell Light</a>
</li>
<li>
<a href='/components/light.tplink/'>TP-Link Bulb</a>
</li>
<li>
<a href='/components/light.tellstick/'>TellStick Light</a>
</li>
<li>
Template Light
</li>
<li>
<a href='/components/light.tikteck/'>Tikteck</a>
</li>
<li>
<a href='/components/light.velbus/'>Velbus lights</a>
</li>
<li>
<a href='/components/light.vera/'>Vera Light</a>
</li>
<li>
<a href='/components/light.wink/'>Wink Light</a>
</li>
<li>
<a href='/components/light.x10/'>X10</a>
</li>
<li>
<a href='/components/light.xiaomi_aqara/'>Xiaomi Light</a>
</li>
<li>
<a href='/components/light.xiaomi_miio/'>Xiaomi Philips Light</a>
</li>
<li>
<a href='/components/light.yeelightsunflower/'>Yeelight Sunflower Bulb</a>
</li>
<li>
<a href='/components/light.yeelight/'>Yeelight Wifi Bulb</a>
</li>
<li>
<a href='/components/light.zwave/'>Z-Wave Light</a>
</li>
<li>
<a href='/components/light.zengge/'>Zengge</a>
</li>
<li>
<a href='/components/light.zha/'>ZigBee Home Automation Light</a>
</li>
<li>
<a href='/components/light.zigbee/'>ZigBee Light</a>
</li>
<li>
<a href='/components/light.deconz/'>deCONZ lights</a>
</li>
<li>
<a href='/components/light.iglo/'>iGlo</a>
</li>
<li>
<a href='/components/light.mystrom/'>myStrom WiFi Bulb</a>
</li>
</ul>
</div>
</section>
</div>
</aside>
</div>
</div>
<footer>
<div class="grid-wrapper">
<div class="grid">
<div class="grid__item">
<div class="copyright">
<a rel="me" href='https://twitter.com/home_assistant'><i class="icon-twitter"></i></a>
<a rel="me" href='https://facebook.com/homeassistantio'><i class="icon-facebook"></i></a>
<a rel="me" href='https://plus.google.com/110560654828510104551'><i class="icon-google-plus"></i></a>
<a rel="me" href='https://github.com/home-assistant/home-assistant'><i class="icon-github"></i></a>
<div class="credit">
Contact us at <a href='mailto:hello@home-assistant.io'>hello@home-assistant.io</a> (no support!).<br>
Website powered by <a href='http://jekyllrb.com/'>Jekyll</a> and the <a href='https://github.com/coogie/oscailte'>Oscalite theme</a>.<br />
Hosted by <a href='https://pages.github.com/'>GitHub</a> and served by <a href='https://cloudflare.com'>CloudFlare</a>.
</div>
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png" /></a><br /><span xmlns:dct="http://purl.org/dc/terms/" property="dct:title">home-assistant.io</span> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License</a>.
</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>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
<script type="text/javascript">
docsearch({
apiKey: 'ae96d94b201c5444c8a443093edf3efb',
indexName: 'home-assistant',
inputSelector: '#search',
debug: false // Set debug to true if you want to inspect the dropdown
});
document.querySelector('.search .close').addEventListener('click', function(ev) {
ev.preventDefault();
document.querySelector('.search-container').style.display = 'none';
});
document.querySelector('.show-search').addEventListener('click', function(ev) {
ev.preventDefault();
document.querySelector('.search-container').style.display = 'block';
document.getElementById('toggle').checked = false;
document.querySelector('.search-container input').focus();
});
</script>
</body>
</html>