@openhab-ui/setup-and-maintenance
Version:
Configuration and maintenance interface for openHAB
33 lines • 9.12 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-conceptional.html"><link rel="next" href="tutorial-items.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="Things & Channels"></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>Not into walls of text? Watch the video "Things & Bindings".</summary><ui-youtube videoid="6HbGVWjL6II" videoparams="modestbranding=1&showinfo=0&controls=1&vq=hd720"></ui-youtube></details><h4>Things</h4><p>The most basic component or concept of openHAB 2 is a “Thing”. Things for openHAB are simply home automation objects it can interact with or get data from.</p><img class="tutimage" src="img/tutorial/things.jpg"><p>Examples:</p><ul><li>A Phillips Hue light bulb is a Thing which openHAB can control - turning it on or off, setting its color or brightness.</li><li>A home automation sensor (like my NodeMCU Kube pictured here) is a Thing which provides data like temperature, humidity or motion events to openHAB.<p></p></li></ul><p>OpenHAB can control many different things, including smart TVs volume, channel or source, and even the sun and the moon are Things that provide data like sunrise/sunset time, sun elevation, or the moon phase, all of which can be used within openHAB to control other Things (for example, turn on the living room sconces when the sun begins to set).</p><h4>Channels</h4><p>A Thing will usually provide at least one channel to control a feature or get data from it.</p><img class="tutimage" src="img/tutorial/channels.jpeg"><p>For example …</p><ul><li>a Hue light bulb will have one channel to control its color, and another channel to control the color temperature,</li><li>a smart TV will have several channels for things like volume, channel, input source, picture adjustment or guide interaction.</li></ul><div class="bs-callout bs-callout-info mb-4">Things usually require configuration when you add them!</div><p><mark>Note</mark>: There is a specific type of channel on some things, called “triggerChannel”. We’ll skip those for now, but you’ll see them, when we set up the sunrise/sunset events later in the series.</p><p>Add & configure your Things via the <span class="demolink">Things</span> section.</p><h4>Automatically discovered & configured Things: The Inbox</h4><p>Newer devices and services have means to perform a discovery on them.</p><p>If your installed binding supports discovery, it will present its found <i>Things</i> in the <span class="demolink">Inbox</span> section. All Things you will find there are usually already configured for you.</p></main><footer><nav-buttons class="m-4"></nav-buttons></footer><aside></aside></body></html>