@openhab-ui/setup-and-maintenance
Version:
Configuration and maintenance interface for openHAB
33 lines • 11.6 kB
HTML
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1,user-scalable=yes"><link rel="icon" href="img/favicon.ico"><link rel="manifest" href="/manifest.json"><link rel="preload" href="fonts/fa-regular-400.woff2" as="font" type="font/woff2" crossorigin="anonymous"><link rel="preload" href="fonts/fa-solid-900.woff2" as="font" type="font/woff2" crossorigin="anonymous"><link rel="preload" href="fonts/roboto-v18-latin-ext_greek_cyrillic_cyrillic-ext_greek-ext_latin_vietnamese-regular.woff2" as="font" type="font/woff2" crossorigin="anonymous"><link rel="preload" href="fonts/roboto-v18-latin-ext_greek_cyrillic_cyrillic-ext_greek-ext_latin_vietnamese-500.woff2" as="font" type="font/woff2" crossorigin="anonymous"><link rel="preload" href="fonts/roboto-v18-latin-ext_greek_cyrillic_cyrillic-ext_greek-ext_latin_vietnamese-700.woff2" as="font" type="font/woff2" crossorigin="anonymous"><link rel="preload" href="img/pattern_opacity.png" as="image"><link rel="preload" href="img/openhab-logo.svg" as="image"><link rel="stylesheet" href="css/main.css" type="text/css"><link rel="stylesheet" href="css/main_deferred.css" type="text/css"><script type="module" src="js/app.js" async></script><script type="module" src="js/vue.js" async></script><script type="module" src="js/ohcomponents.js" async></script><script type="module" src="js/uicomponents.js" async></script><script type="module">async function applyTheme() {
if (localStorage.getItem("darktheme") === "true") {
let darkthemecss = document.getElementById("darkthemecss");
if (!darkthemecss) {
let head = document.getElementsByTagName('head')[0];
let link = document.createElement('style');
link.id = "darkthemecss";
link.innerHTML = await fetch('css/dark.css').then(d => d.text());
head.appendChild(link);
document.dispatchEvent(new Event("themechanged"));
}
} else {
let darkthemecss = document.getElementById("darkthemecss");
if (darkthemecss) darkthemecss.remove();
}
if (localStorage.getItem("widetheme") === "true") {
document.querySelector("body").classList.add("wide");
} else {
document.querySelector("body").classList.remove("wide");
}
window.requestAnimationFrame(() => {
window.dispatchEvent(new Event("resize"));
});
}
window.toggleWideTheme = function (event) {
event.preventDefault();
let isEnabled = localStorage.getItem("widetheme") === "true";
localStorage.setItem("widetheme", !isEnabled);
applyTheme();
}
applyTheme();
window.addEventListener('storage', e => { if (e.key == "darktheme") applyTheme(); });
document.addEventListener('themechange', e => applyTheme());</script><title>openHAB - Empowering the smart home</title><title>openHAB - Empowering the smart home</title><link rel="prev" href="tutorial-rules.html"><link rel="next" href="tutorial-exercises.html"><link rel="parent" href="index.html"></head><body><link rel="stylesheet" href="css/tutorial.css" type="text/css"><nav><div class="sidebar leftright fixedwrapper"><h4 class="ml-2">Table of content</h4><ol style="text-align: left"><oh-nav-auto-link></oh-nav-auto-link><li><a data-no-reload="nav" href="tutorial.html">Introduction</a></li><li><a data-no-reload="nav" href="tutorial-addons.html">Extend openHAB</a></li><li><a data-no-reload="nav" href="tutorial-conceptional.html">Conceptional overview</a></li><li><a data-no-reload="nav" href="tutorial-things.html">Things & Channels</a></li><li><a data-no-reload="nav" href="tutorial-items.html">Items & Links</a></li><li><a data-no-reload="nav" href="tutorial-scheduler.html">Scheduler</a></li><li><a data-no-reload="nav" href="tutorial-scenes.html">Scenes</a></li><li><a data-no-reload="nav" href="tutorial-rules.html">Rules</a></li><li><a data-no-reload="nav" href="tutorial-control-ui.html">Control interfaces</a></li><li><a data-no-reload="nav" href="tutorial-exercises.html">Excercises</a></li></ol></div></nav><header class="navbarui"><a class="sidebar-button" href="#" onclick="toggleSidebar(event)"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon" style="max-width: 20px;"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg> </a><a class="home" id="home" href="index.html"><div alt="openHAB" class="logo"></div></a><nav><oh-nav-auto-link></oh-nav-auto-link><div><a id="navmaintenance" href="maintenance.html">Maintenance</a></div><div><a id="navbindings" href="bindings.html">Add-ons</a></div><div><a id="navinbox" href="inbox.html" style="display: inline-flex;align-items: center;">Inbox<oh-form-bind adapter="modeladapter_forms/inboxcounter" objectid=""></oh-form-bind><oh-vue-form></oh-vue-form><template><span class="ml-2 badge badge-pill badge-orange">{{inboxcounter}}</span></template></a></div><div><a id="navthings" href="things.html">Things</a></div><div><a id="navitems" href="items.html">Items</a></div><div><a id="navscheduler" href="schedules.html">Scheduler</a></div><div><a id="navscenes" href="scenes.html">Scenes</a></div><div><a id="navrules" href="rules.html">Automation</a></div></nav></header><nav-ajax-page-load></nav-ajax-page-load><div id="alert-area" class="alert-area"></div><template id="alert-template"><div class="alert-box"><div class="alert-content"><slot></slot></div><a class="alert-close no-loader" data-close href="#"></a></div></template><section class="header"><div><oh-prop-bind attribute="label" queryparameter="title"></oh-prop-bind><nav-breadcrumb label="Control interfaces"></nav-breadcrumb></div><span class="link roundbtn" onclick="toggleWideTheme(event)"><i class="fas fa-arrows-alt-h"></i></span><oh-doc-link toggle class="link helpbtn roundbtn" title="Open/Close context help"><i class="fas fa-times"></i><i class="fas fa-question"></i></oh-doc-link></section><main class="tutorial"><details class="alert alert-info" role="alert"><summary>Watch a video to see just how easy it is to build an interface with HabPanel</summary><ui-youtube videoid="gUDWCrSG8zA" videoparams="modestbranding=1&showinfo=0&controls=1&vq=hd720"></ui-youtube></details><h4>Control interfaces</h4><p>In this section you learn about the fun part of setting up your openHAB system - the user interface! This is the most rewarding part of your configuration. You’ll now actually get to see real-time results of all your work until now, and interact with your home automation things directly via the user interface.</p><img class="tutimage" src="img/tutorial/user_interfaces.png"><p>This is where you need to leave <b>"Setup and Maintenance"</b> ☹.</p><p>We have different concepts implemented in the openHAB 2 core for interaction and the community has provided even more. Depending on the <a class="demolink" href="addons.html">Add-ons</a> you have installed, you get direct support for Apple HomeKit (and its control Apps), Amazon Alexa and the corresponding applications, or any Hue App to control your setup. But we also provide some Apps ourselves, see below.</p><hr><h5>Widgets everywhere - HABpanel</h5><img style="max-width: 60%;max-height: 100%;float:right;padding-right: 20px;" src="img/tutorial/habpanel.png"><p>HABpanel is a touch-friendly user interface for tablets. It layouts your Items via so called <b>Widgets</b>.</p><p>Widgets are html with javascript snippets and can therefore express any design and functionality. We have a default set of Widgets for rendering our known Item types. The community also created dedicated Widgets for Spotify, Alexa, Weather services and so on.</p><p>If you had nothing but computers and tablets controlling your home automation system, you could easily get away with only using HABpanel.</p><div class="bs-callout bs-callout-info mb-4">Caveat: You need to configure your HABpanel pages yourself first and also configure some Widgets to do the Right Thing™.</div><p>Make sure you have installed HABpanel in the <a class="demolink" href="addons.html">Add-ons</a> section.</p><div class="clearfix"></div><hr class="mt-4"><h5>Dashboards - HABdashboard</h5><img style="max-width: 60%;max-height: 100%;float:right;padding-right: 20px;" src="img/tutorial/basicui.png"><p>Widgets tend to use a lot of screen real-estate and often require configuration. For the phone screen and also for kickstarting your control needs, there is a better option.</p><p>openHABs second solution for control interfaces are <b>Dashboards</b>.</p><p>Dashboards define the layout and handling of items, and tell dashboard based user interfaces how to interact with your Items. You would use Dashboards to:</p><ul><li>Group Items per Room</li><li>Use binding provided dashboard components. Those are compositions of related Items to form more complex controls.</li></ul><div class="bs-callout bs-callout-info mb-4">Dashboards must be configured and layed out by you.</div><p>openHAB provides a "dynamic" dashboard, that is auto-layouted and grouped by Things and Channels.</p><p>Make sure you have installed HABdashboard in the <a class="demolink" href="addons.html">Add-ons</a> section.</p><div class="clearfix"></div><hr class="mt-4"><h5>Cards & Chat UI - HABot</h5><img style="max-width: 60%;max-height: 300px;float:right;padding-right: 20px;" src="img/tutorial/habot.gif"><p>HABot is a <a href="https://www.openhab.org/docs/concepts/audio.html">natural language interpreter</a>. You can ask it questions about your items in plain language, or perform actions. HABot uses machine-learning natural language processing to figure out what you mean.</p><p>In this regard, it's similar to voice assistants like Alexa, Siri, Google Assistant or Cortana, but is focused on your openHAB smart home. <b>No cloud service required</b>.</p><div class="clearfix mb-4"></div><img style="max-width: 60%;max-height: 100%;float:left;padding-right: 20px;" src="img/tutorial/habot-cards.png"><p>A major feature of its chat-based user interface is that it will also provide visual information in the form of a “card” along with the natural language answer. These cards may contain read-only information or interactive controls like switches, sliders and buttons.</p><p>A common use case for HABot is to ask it to find items in a natural way, instead of giving an order.<br><u>For example</u> to ask for the <i>“lights on the first floor”</i> and to use the controls on the card.</p><p>Make sure you have installed HABot in the <a class="demolink" href="addons.html">Add-ons</a> section.</p><h5 style="clear: both">Android / iOS App</h5><p>If you want to enjoy the native speed of your phone platform and a fluent, animated and integrated interface consider our mobile apps. Both Apps use Dashboards for displaying your Items.</p></main><footer><nav-buttons class="m-4"></nav-buttons></footer><aside></aside></body></html>