@openhab-ui/setup-and-maintenance
Version:
Configuration and maintenance interface for openHAB
33 lines • 11.3 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-control-ui.html"><link rel="parent" href="index.html"></head><body><link rel="stylesheet" href="css/tutorial.css" type="text/css" data-keep="true"><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="Excercises"></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>We have a huge list of tutorials and how-to's for all kind of situations in our <a href="https://community.openhab.org">Community</a> board.<br>To get you started, here are some interactive exercises.</p><div class="card border-orange"><div class="card-header">Beginner: Integrate external devices</div><ol class="card-body ml-4"><li><oh-tutorial-starter subject="inbox"></oh-tutorial-starter><button class="btn btn-outline-primary btn-outline-visible">Add a Thing from the Inbox</button><br>Subject: <b>The Inbox page</b><br>Objectives:<ul><li>Manually scan for new Things</li><li>Add Things from the Inbox</li></ul></li><li><oh-tutorial-starter subject="things"></oh-tutorial-starter><button class="btn btn-outline-primary btn-outline-visible">Add a Thing manually</button><br>Subject: <b>The Things page</b><br>Objectives:<ul><li>Add & configure a Thing manually</li><li>Add a Channel to a Thing</li><li>Automatically link Items</li></ul></li><li><oh-tutorial-starter subject="items"></oh-tutorial-starter><button class="btn btn-outline-primary btn-outline-visible">Create an item and link it to a channel</button><br>Subject: <b>Channel & Item</b><br>Objectives:<ul><li>Add items</li><li>Semantically tag an Item</li><li>Link Channels to Items</li></ul></li></ol></div><details class="alert alert-info" role="alert"><summary>At this point you can already control your devices via openHAB Apps.</summary><ul class="mt-2"><li>Install the <a target="_blank" href="https://play.google.com/store/apps/details?id=org.openhab.habdroid.beta">Android</a> / iOS App</li><li>Use <a href="/habpanel/index.html">HabPanel</a> (if installed)</li></ul></details><div class="card border-orange"><div class="card-header">Advanced: Automation</div><ol class="card-body ml-4"><li><oh-tutorial-starter subject="rules"></oh-tutorial-starter><button class="btn btn-outline-primary btn-outline-visible">Turn on a light by a button press, but only if it is after 6 pm.</button><br>Subject: <b>Rules</b><br>Objectives:<ul><li>Create a rule that changes an item state.</li><li>Add a condition to it.</li><li>Let it be triggered by an item state.</li></ul></li><li><oh-tutorial-starter subject="scheduler"></oh-tutorial-starter><button class="btn btn-outline-primary btn-outline-visible">Setup a wakeup alarm that turns on the coffee machine and 10 minutes later all lights</button><br>Subject: <b>Scheduled-Tasks</b><br>Objectives:<ul><li>Create a one-shot or periodic task.</li><li>Create a rule and let it be triggered by a scheduled task.</li></ul></li><li><oh-tutorial-starter subject="expire"></oh-tutorial-starter><button class="btn btn-outline-primary btn-outline-visible">5 minutes after a light has been turned on, turn it off again. A motion sensor must reset that timer though.</button><br>Subject: <b>Item expire timer</b><br>Objectives:<ul><li>Setup an item expire timer</li><li>Create a rule that is triggered by an item state (motion sensor) and resets an expire timer.</li></ul></li></ol></div><details class="alert alert-info" role="alert"><summary>Rules are essential for advanced functionality</summary><p class="mt-2">Some bindings add additional Actions that can be performed by Rules. Expect even more bindings to support Actions in the future.</p><p>You still have scratched only the surface. If you want to integrate a new kind of device via generic HTTP, MQTT, CoAP bindings, you also want to read about <a target="_blank" href="https://www.openhab.org/docs/configuration/transformations.html#transformation-services">Transformations</a>.</p><p>We have only used the graphical rule editor so far, to connect triggers with actions on optional conditions. openHAB also has the concept of <a target="_blank" href="https://www.openhab.org/docs/configuration/jsr223.html#jsr223-scripting">Standalone Scripts</a>. A script can interact with your system, an external service, your hardware or just perform item state changes. It can as also react to triggers on conditions, like Rules.</p><mark>Scripts allow you to master any complex scenarios with openHAB.</mark></details><p>Further reading:</p><ul><li><a target="_blank" href="https://www.openhab.org/docs/configuration/transformations.html#transformation-services">Transformations</a></li><li><a target="_blank" href="https://www.openhab.org/docs/concepts/profiles.html">Profiles</a></li><li><a target="_blank" href="https://www.openhab.org/docs/configuration/jsr223.html#jsr223-scripting">JSR223 Scripting (Javascript, Python Rules)</a></li></ul><p>Further reading for binding developers:</p><ul><li><a target="_blank" href="https://www.openhab.org/docs/developer/">Binding developer Guide</a></li></ul></main><footer><nav-buttons class="m-4"></nav-buttons></footer><aside></aside></body></html>