223 lines
8.6 KiB
HTML
223 lines
8.6 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
||
|
||
|
||
|
||
<!--<link rel="shortcut icon" href="https://www.openhab.org/favicon.png"></link>-->
|
||
<title>openHAB 2 - Empowering the Smart Home</title>
|
||
|
||
<!-- CSS -->
|
||
<link type="text/css" rel="stylesheet" href="/v2.1/css/materialize.css" media="screen,projection" />
|
||
<link type="text/css" rel="stylesheet" href="/v2.1/css/pygments-jekyll-style.css" />
|
||
<link type="text/css" rel="stylesheet" href="/v2.1/css/styles.css" />
|
||
<link type="text/css" rel="stylesheet" href="/v2.1/css/openhab.css" />
|
||
<link type="text/css" rel="stylesheet" href="/v2.1/css/collapsible.css" />
|
||
|
||
<!-- Font -->
|
||
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
|
||
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:300,400,700" />
|
||
<link rel="canonical" href="http://docs.openhab.org/tutorials/beginner/uis.html" />
|
||
<script type="text/javascript">var gaProperty = 'UA-47717934-3';var disableStr = 'ga-disable-' + gaProperty;if (document.cookie.indexOf(disableStr + '=true') > -1) {window[disableStr] = true;}</script>
|
||
<script>
|
||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
||
ga('create', 'UA-47717934-3', 'auto');
|
||
ga('set', 'anonymizeIp', true);
|
||
ga('send', 'pageview');
|
||
</script>
|
||
</head>
|
||
|
||
|
||
<body class="documentation">
|
||
<div id="header" class="navbar-fixed">
|
||
<nav role="navigation">
|
||
<div class="container">
|
||
<div class="nav-wrapper">
|
||
<a href="/v2.1/index.html"><img id="logo" src="/images/logo.png" /></a>
|
||
<a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a>
|
||
<ul class="right hide-on-med-and-down">
|
||
<li><a href="/tutorials/index.html">Tutorials</a></li>
|
||
<li><a href="/v2.1/introduction.html">User Manual</a></li>
|
||
<li><a href="/developers/index.html">Developer Guide</a></li>
|
||
<li><a target="_blank" href="https://community.openhab.org">Community Forum</a></li>
|
||
<li><a target="_blank" href="https://github.com/openhab">GitHub</a></li>
|
||
<li class="search"><i class="material-icons">search</i></li>
|
||
<li class="search">
|
||
<form method="GET" id="searchform" class="search-form" action="/search">
|
||
<input id="query" name="q" type="text" class="search-form-input" placeholder="search" />
|
||
</form>
|
||
</li>
|
||
</ul>
|
||
<ul id="nav-mobile" class="side-nav">
|
||
<li><a href="/v2.1/index.html">Home</a></li>
|
||
<li><a href="/tutorials/index.html">Tutorials</a></li>
|
||
<li><a href="/v2.1/introduction.html">User Manual</a></li>
|
||
<li><a href="/developers/index.html">Developer Guide</a></li>
|
||
<li><a target="_blank" href="https://community.openhab.org">Community Forum</a></li>
|
||
<li><a target="_blank" href="https://github.com/openhab">GitHub</a></li>
|
||
<li class="search">
|
||
<form method="GET" id="searchformmob" class="search-form" action="/search">
|
||
<input id="querymob" name="q" type="text" class="search-form-input" placeholder="search" />
|
||
</form>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
</div>
|
||
|
||
|
||
<section id="documentation" class="text content-wrapper">
|
||
<div class="container">
|
||
<div class="side-nav-wrapper">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<ul class="nav">
|
||
<li>Tutorial (Beginner)</li>
|
||
<ul>
|
||
<li><a href="/v2.1/tutorials/beginner/index.html">Overview</a></li>
|
||
<li><a href="/v2.1/tutorials/beginner/1sttimesetup.html">First-time setup</a></li>
|
||
<li><a href="/v2.1/tutorials/beginner/uis.html">User Interfaces</a></li>
|
||
<li><a href="/v2.1/tutorials/beginner/configuration.html">Configuring openHAB and installing add-ons</a></li>
|
||
<li><a href="/v2.1/tutorials/beginner/sitemap.html">Creating a sitemap</a></li>
|
||
<li><a href="/v2.1/tutorials/beginner/rules.html">Working with rules</a></li>
|
||
<li><a href="/v2.1/tutorials/beginner/logs.html">Looking to the logs</a></li>
|
||
<li><a href="/v2.1/tutorials/beginner/persistence.html">Working with persistence</a></li>
|
||
</ul>
|
||
</ul>
|
||
|
||
</div>
|
||
<div class="content">
|
||
|
||
<h1 id="openhab-2-uis">OpenHAB 2 UIs</h1>
|
||
|
||
<p>OpenHAB 2 offers different UIs in its standard configuration: the <em>Paper UI</em>, the <em>Basic UI</em> and the <em>Classic UI</em> (this has to be installed manually from within Paper UI or via config file).</p>
|
||
|
||
<h2 id="the-paper-ui">The Paper UI</h2>
|
||
|
||
<p>The Paper UI is a new interface that helps setting up and configuring your openHAB instance.
|
||
It does not (yet) cover all aspects, so you still need to resort to textual configuration files, but it already offers the following:</p>
|
||
|
||
<ul>
|
||
<li>
|
||
<p>Add-on management: Easily install or uninstall openHAB add-ons
|
||
<img src="images/picture_05.jpg" alt="" /></p>
|
||
</li>
|
||
<li>
|
||
<p>Thing discovery: See devices and services found on your network and add them to your setup.
|
||
<img src="images//picture_09.jpg" alt="" /></p>
|
||
</li>
|
||
<li>
|
||
<p>Linking items to channels: Instead of adding a binding configuration to your item file, you can directly link Thing channels to your items.
|
||
<img src="images//picture_21.jpg" alt="" /></p>
|
||
</li>
|
||
</ul>
|
||
|
||
<p>Note that you still need to define your items, sitemaps, persistence configurations and rules in the according configuration files (as done in openHAB 1). Such functionality will be added bit by bit to the Paper UI only.</p>
|
||
|
||
<p>All these aspects are explained in the rest of this tutorial.</p>
|
||
|
||
<p>Here you can find a small screencast about the Paper UI:</p>
|
||
|
||
<p><a href="http://www.youtube.com/watch?v=MV2a5qwtmRE"><img src="http://img.youtube.com/vi/MV2a5qwtmRE/0.jpg" alt="Paper UI" /></a></p>
|
||
|
||
<h2 id="the-basic-ui">The Basic UI</h2>
|
||
|
||
<p>The Basic UI is a web interface based on Material Design Lite from Google. This interface is used to present the different sitemaps.</p>
|
||
|
||
<p>The UIs features are:</p>
|
||
|
||
<ul>
|
||
<li>Responsive layout suitable for various screen sizes</li>
|
||
<li>AJAX navigation</li>
|
||
<li>Live update<sup>1</sup></li>
|
||
</ul>
|
||
|
||
<p><sup>1</sup>: as for now, only control states and icons are updated. Visibility changes require a page reload.</p>
|
||
|
||
<p><img src="images/screenshot-1-full.png" alt="" /></p>
|
||
|
||
<p><img src="images/screenshot-2-full.png" alt="" /></p>
|
||
|
||
<h2 id="the-classic-ui">The Classic UI</h2>
|
||
|
||
<p>The Classic UI offers the same services that the Basic UI but with a different look and feel, close to an old iOS one.</p>
|
||
|
||
<p><img src="images/classicui1.png" alt="" /></p>
|
||
|
||
<p><img src="images/classicui2.png" alt="" /></p>
|
||
|
||
<p>Now let’s start with the <a href="/v2.1/tutorials/beginner/configuration.html">configuration of openHAB 2</a></p>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<footer>
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col s12 m7">
|
||
Copyright © 2017 by the <a href="https://github.com/openhab">openHAB Community</a> and the <a href="http://www.openhabfoundation.org/">openHAB Foundation e.V.</a>
|
||
</div>
|
||
<div class="col s12 m5">
|
||
<ul class="list-inline right-align">
|
||
<li><a href="/imprint.html">Imprint</a></li>
|
||
<li><a href="/privacy.html">Privacy Policy</a></li>
|
||
<li><a href="http://www.openhab.org">openHAB Website</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
<script src="/v2.1/js/jquery.min.js"></script>
|
||
<script src="/v2.1/js/jquery.scrollme.min.js"></script>
|
||
<script src="/v2.1/js/jquery.sticky.js"></script>
|
||
<script src="/v2.1/js/materialize.min.js"></script>
|
||
<script src="/v2.1/js/init.js"></script>
|
||
|
||
<script>
|
||
$(document).ready(function () {
|
||
|
||
$('#oh2-checkbox').change(function () {
|
||
if (this.checked) $('.since-2x').show('slow');
|
||
else $('.source-oh2').hide('slow');
|
||
});
|
||
|
||
$('#oh1-checkbox').change(function () {
|
||
if (this.checked) $('.since-1x').show('slow');
|
||
else $('.source-oh1').hide('slow');
|
||
});
|
||
|
||
$('#legacy-checkbox').change(function () {
|
||
if (this.checked) $('.install-legacy').show('slow');
|
||
else $('.install-legacy').hide('slow');
|
||
});
|
||
|
||
$('#manual-checkbox').change(function () {
|
||
if (this.checked) $('.install-manual').show('slow');
|
||
else $('.install-manual').hide('slow');
|
||
});
|
||
|
||
});
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|
||
|