@openhab-ui/setup-and-maintenance
Version:
Configuration and maintenance interface for openHAB
33 lines • 8.69 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><link rel="next" href="tutorial-addons.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="OpenHAB User Interface Guide"></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"><p>You will now learn all necessary basics to get you going with openHAB.<br>Right now you are using the <b>"Setup and Maintenance"</b> interface.</p><details class="alert alert-info" role="alert"><summary>This tutorial and also this interface is strictly using new openHAB 2 technology.</summary><p class="mt-2">Please be careful when reading user topics in our community, as those can reference older techniques. You want to avoid topics about:</p><ul><li>Sitemaps</li><li>DSL Rules (<i>.rules</i> files)</li><li><i>.thing</i>, <i>.item</i> files</li></ul></details><h4>What openHAB can do for you</h4><img style="float:left;width: 160px;" src="img/openhab-logo-square.png"><p>openHAB is a mature home automation platform that is protocol agnostic, meaning it can connect to nearly any home automation hardware on the market today.</p><p>You need to extend openHAB with additional software, called <i>Add-ons</i>, via this web interface. Add-ons add device & services feature detection and moments later you can already control your external solution.</p><p>Via scheduled tasks and rules you start automating your installation. For instance turning your lights on when your phone is in WiFi range, but only if it is already later than 6 pm. <b>Only your imagination is the limit.</b></p><p>openHAB also <i class="fas fa-heart"></i> and supports <abbr title="Do-it-yourself">DIY</abbr> and moddable hardware. We speak about this later on.</p><h4>About this interface</h4><p>Use this interface to setup new devices, configure existing ones, create automation rules and timers.</p><p>Every section (except this tutorial) has a context help. Click on the question mark that appears next to the title.</p><div class="bs-callout bs-callout-info mb-4">You do not <b>control</b> your devices via this interface. Download the <a target="_blank" href="https://play.google.com/store/apps/details?id=org.openhab.habdroid.beta">Android App</a>, iOS App, HaBot or use HabPanel instead. The last section of this tutorial deals with the different control interfaces.</div></main><footer><nav-buttons class="m-4"></nav-buttons></footer><aside></aside></body></html>