184 lines
9.3 KiB
HTML
184 lines
9.3 KiB
HTML
<!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>Panel iFrame - Home Assistant</title>
|
|
<meta name="author" content="Home Assistant">
|
|
<meta name="description" content="Instructions how to add iFrames in the frontend of Home Assistant.">
|
|
<meta name="viewport" content="width=device-width">
|
|
<link rel="canonical" href="https://home-assistant.io/components/panel_iframe/">
|
|
<meta property="fb:app_id" content="338291289691179">
|
|
<meta property="og:title" content="Panel iFrame">
|
|
<meta property="og:site_name" content="Home Assistant">
|
|
<meta property="og:url" content="https://home-assistant.io/components/panel_iframe/">
|
|
<meta property="og:type" content="article">
|
|
<meta property="og:description" content="Instructions how to add iFrames in the frontend of 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="Panel iFrame">
|
|
<meta name="twitter:description" content="Instructions how to add iFrames in the frontend of 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">
|
|
Panel iFrame
|
|
</h1>
|
|
</header>
|
|
<hr class="divider">
|
|
<p>The <code class="highlighter-rouge">panel_iframe</code> support allows you to add additional panels to your Home Assistant frontend. The panels are listed in the sidebar and can contain external resources like the web frontend of your router, your monitoring system, or your media server.</p>
|
|
<p class="note warning">If you are accessing home Assistant over HTTPS using SSL, you cannot access HTTP sites through an iframe panel.</p>
|
|
<p>To enable Panel iFrames 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">panel_iframe</span><span class="pi">:</span>
|
|
<span class="s">router</span><span class="pi">:</span>
|
|
<span class="s">title</span><span class="pi">:</span> <span class="s1">'</span><span class="s">Router'</span>
|
|
<span class="s">url</span><span class="pi">:</span> <span class="s1">'</span><span class="s">http://192.168.1.1'</span>
|
|
<span class="s">fridge</span><span class="pi">:</span>
|
|
<span class="s">title</span><span class="pi">:</span> <span class="s1">'</span><span class="s">Fridge'</span>
|
|
<span class="s">url</span><span class="pi">:</span> <span class="s1">'</span><span class="s">http://192.168.1.5'</span>
|
|
</code></pre>
|
|
</div>
|
|
<p>Configuration variables:</p>
|
|
<ul>
|
|
<li><strong>[panel_name]</strong> (<em>Required</em>): Name of the panel.
|
|
<ul>
|
|
<li><strong>title</strong> (<em>Required</em>): Friendly title for the panel. Will be used in the sidebar.</li>
|
|
<li><strong>icon</strong> (<em>Optional</em>): Icon for entry. Pick an icon that you can find on <a href="https://materialdesignicons.com/">materialdesignicons.com</a> to use for your input and prefix the name with <code class="highlighter-rouge">mdi:</code>. For example <code class="highlighter-rouge">mdi:car</code>, <code class="highlighter-rouge">mdi:ambulance</code>, or <code class="highlighter-rouge">mdi:motorbike</code>.</li>
|
|
<li><strong>url</strong> (<em>Required</em>): The URL to open.</li>
|
|
</ul>
|
|
</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='edit-github'><a href='https://github.com/home-assistant/home-assistant.github.io/tree/current/source/_components/panel_iframe.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'>
|
|
Introduced in release: 0.25
|
|
</div>
|
|
<div class='section'>
|
|
<h1 class="title delta">Category Front end</h1>
|
|
<ul class='divided'>
|
|
<li>
|
|
<a href='/components/config/'>Config</a>
|
|
</li>
|
|
<li>
|
|
<a href='/components/panel_custom/'>Panel Custom</a>
|
|
</li>
|
|
<li>
|
|
Panel iFrame
|
|
</li>
|
|
<li>
|
|
<a href='/components/rss_feed_template/'>RSS feed template</a>
|
|
</li>
|
|
<li>
|
|
<a href='/components/weblink/'>Weblink</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>
|