199 lines
8.1 KiB
HTML
199 lines
8.1 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.2/css/materialize.css" media="screen,projection" />
|
||
<link type="text/css" rel="stylesheet" href="/v2.2/css/pygments-jekyll-style.css" />
|
||
<link type="text/css" rel="stylesheet" href="/v2.2/css/styles.css" />
|
||
<link type="text/css" rel="stylesheet" href="/v2.2/css/openhab.css" />
|
||
<link type="text/css" rel="stylesheet" href="/v2.2/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="https://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.2/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.2/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.2/index.html">Home</a></li>
|
||
<li><a href="/tutorials/index.html">Tutorials</a></li>
|
||
<li><a href="/v2.2/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.2/tutorials/beginner/index.html">Overview</a></li>
|
||
<li><a href="/v2.2/tutorials/beginner/1sttimesetup.html">First-time setup</a></li>
|
||
<li><a href="/v2.2/tutorials/beginner/uis.html">User Interfaces</a></li>
|
||
<li><a href="/v2.2/tutorials/beginner/configuration.html">Configuring openHAB and installing add-ons</a></li>
|
||
<li><a href="/v2.2/tutorials/beginner/sitemap.html">Creating a sitemap</a></li>
|
||
<li><a href="/v2.2/tutorials/beginner/rules.html">Working with rules</a></li>
|
||
<li><a href="/v2.2/tutorials/beginner/logs.html">Looking to the logs</a></li>
|
||
<li><a href="/v2.2/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.2/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>
|
||
<li><a href=# onclick="printPage()">Print This Page</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
<script src="/v2.2/js/jquery.min.js"></script>
|
||
<script src="/v2.2/js/jquery.scrollme.min.js"></script>
|
||
<script src="/v2.2/js/jquery.sticky.js"></script>
|
||
<script src="/v2.2/js/materialize.min.js"></script>
|
||
<script src="/v2.2/js/init.js"></script>
|
||
<script src="/v2.2/js/functions.js"></script>
|
||
</body>
|
||
</html>
|
||
|