home-assistant.github.io/getting-started/customizing-devices/index.html
2016-05-14 15:27:05 +00:00

230 lines
No EOL
10 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>Customizing devices and services - Home Assistant</title>
<meta name="author" content="Paulus Schoutsen">
<meta name="description" content="Simple customization for devices and services in the frontend.">
<meta name="viewport" content="width=device-width">
<link rel="canonical" href="https://home-assistant.io/getting-started/customizing-devices/">
<meta property="fb:app_id" content="338291289691179">
<meta property="og:title" content="Customizing devices and services">
<meta property="og:site_name" content="Home Assistant">
<meta property="og:url" content="https://home-assistant.io/getting-started/customizing-devices/">
<meta property="og:type" content="website">
<meta property="og:description" content="Simple customization for devices and services in 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="Customizing devices and services">
<meta name="twitter:description" content="Simple customization for devices and services in 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 href='/getting-started/'>Getting started</a></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">
Customizing Devices and Services
</h1>
</header>
<hr class="divider">
<p>By default, all of your devices will be visible and have a default icon determined by their domain. You can customize the look and feel of your front <br />
page by altering some of these parameters. This can be done by adding the following configuration inside the <code>homeassistant:</code> section.</p>
<p>Devices that you dont want to have visible can be hidden with <code>hidden</code>. <br />
<code>entity_picture</code>entries, badges, <code>device_tracker</code> pictures, etc. can either be external URLs (e.g. <code>http://example.com/example.jpg</code>) or <br />
of the form <code>/local/filename.jpg</code>, where <code>/local</code> represents the directory <code>www</code> in the HASS configuration directory. <br />
You may have to create the <code>www</code> directory yourself as it is not made automatically.</p>
<p>You can also use <code>icon</code> and refer to any icon from <a href="http://MaterialDesignIcons.com">MaterialDesignIcons.com</a>.</p>
<p>For switches with an assumed state two buttons are shown (turn off, turn on) instead of a switch. By setting <code>assumed_state</code> to <code>false</code> you will get the default switch icon.</p>
<div class="highlighter-coderay"><div class="CodeRay">
<div class="code"><pre><span class="comment"># Example configuration.yaml entry</span>
<span class="key">homeassistant</span>:
<span class="comment"># Add this to your existing configuration</span>
<span class="comment"># Only the `entity_id` is required. All other options are optional.</span>
<span class="key">customize</span>:
<span class="key">sensor.living_room_motion</span>:
<span class="key">hidden</span>: <span class="string"><span class="content">true</span></span>
<span class="key">thermostat.family_roomfamily_room</span>:
<span class="key">entity_picture</span>: <span class="string"><span class="content">https://dl.dropboxusercontent.com/u/12345/images/nest.jpg</span></span>
<span class="key">friendly_name</span>: <span class="string"><span class="content">Nest</span></span>
<span class="key">switch.wemo_switch_1</span>:
<span class="key">friendly_name</span>: <span class="string"><span class="content">Toaster</span></span>
<span class="key">entity_picture</span>: <span class="string"><span class="content">/local/toaster.jpg</span></span>
<span class="key">switch.wemo_switch_2</span>:
<span class="key">friendly_name</span>: <span class="string"><span class="content">Kitchen kettle</span></span>
<span class="key">icon</span>: <span class="string"><span class="content">mdi:kettle</span></span>
<span class="key">switch.rfxtrx_switch</span>:
<span class="key">assumed_state</span>: <span class="string"><span class="content">false</span></span>
</pre></div>
</div>
</div>
<h3><a href="/getting-started/presence-detection/">Next step: Setting up presence detection »</a></h3>
</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.io/tree/master/source/getting-started/customizing-devices.markdown'>Edit this page on GitHub</a></div>
<div class='section'>
<h1 class="title delta">Getting Started Guide</h1>
<ul class='divided sidebar-menu'>
<li>
<a href='/getting-started/'>Installation </a>
<ul>
<li><a href='/getting-started/installation-raspberry-pi/'>Raspberry Pi </a></li>
<li><a href='/getting-started/installation-raspberry-pi-all-in-one/'>Raspberry Pi All-In-One Installer </a></li>
<li><a href='/getting-started/installation-docker/'>Docker </a></li>
<li><a href='/getting-started/installation-synology/'>Synology NAS </a></li>
<li><a href='/getting-started/installation-virtualenv/'>VirtualEnv Linux </a></li>
<li><a href='/getting-started/troubleshooting/'>Troubleshooting </a></li>
</ul>
</li>
<li>
Configuration
<ul>
<li><a href='/getting-started/configuration/'>Configuration.yaml </a></li>
<li><a href='/getting-started/devices/'>Setting up devices </a></li>
<li><a class='active' href='/getting-started/customizing-devices/'>Customizing devices and services </a></li>
<li><a href='/getting-started/presence-detection/'>Presence Detection </a></li>
<li><a href='/getting-started/troubleshooting-configuration/'>Troubleshooting </a></li>
</ul>
</li>
<li>
<a href='/getting-started/automation/'>Automation </a>
<ul>
<li><a href='/getting-started/automation-create-first/'>Tutorial </a></li>
<li><a href='/getting-started/automation-trigger/'>Triggers </a></li>
<li><a href='/getting-started/automation-condition/'>Conditions </a></li>
<li><a href='/getting-started/automation-action/'>Actions </a></li>
<li><a href='/getting-started/automation-templating/'>Templates </a></li>
</ul>
</li>
<li>
<a href='/getting-started/scripts/'>Scripts </a>
<ul>
<li><a href='/getting-started/scripts-service-calls/'>Service Calls </a></li>
<li><a href='/getting-started/scripts-conditions/'>Conditions </a></li>
</ul>
</li>
<li>
<a href='/getting-started/autostart/'>Auto-start Home Assistant </a>
<ul>
<li><a href='/getting-started/autostart-systemd/'>Linux - systemd </a></li>
<li><a href='/getting-started/autostart-upstart/'>Linux - Upstart </a></li>
<li><a href='/getting-started/autostart-macos/'>OS X </a></li>
<li><a href='/getting-started/autostart-synology/'>Synology NAS </a></li>
</ul>
</li>
<li><a href='/topics/'>Advanced Topics</a></li>
<li><a href='/getting-started/android/'>Add to Android Homescreen </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>