Examples of your Basic UI

Hey guys,

i am struggling how to setup and order my whole basic ui sitemaps!
I want to see how you build up yours to get some ideas for the future structure :slight_smile:

Post your screenshots below :slight_smile:


If it works (trying mobile upload) these are a few from mine. It’s very messy/experimental.


Here is an exampel of mine:


@Multisaft7 if you’re on latest openHAB, check out the Home Builder user interface Add-on.
It will generate a Sitemap for you along with all the items and even a HABPanel dashboard :slight_smile:

I’m yet to write a proper tutorial/example for the tool, but you should definitely play around with it.



Hey guys! Below you’ll find my sitemap.

My Sitemap Best Practice Recommendations

In the screenshots and the underlying sitemap source code you will recognize the following concepts:

  • Clean Main Page: Only the most important and summarized elements are shown, e.g. Speedtest, Kodi, Heating
  • Summary Elements Almost all front page text elements are rule-based summaries of a more complex Item structure. The summary element often contains a nested subframe with all the (relevant) details and controls. See for example the Sonos Summary Item
  • Conditional Presentation: Elements are only shown if relevant, e.g. Sunset/Sunrise, Kodi Controls
  • Error Indicators: If a device, Binding or any other aspect behind an Item is not working correctly, the corresponding sitemap element is replaced by an error element. A sitemap element should never wrongfully offer information or an action which are not available. See here for an example.
  • No Groups: Groups are NOT used in the main part as the way how their presentation can be influenced is very limited. Pay attention to two exceptions: The Admin area described below and the Element Text item=gLights, here the number of active lights based on the group is shown.
  • Admin Area: In this area at the bottom of my example I’ll find ALL my items automatically sorted by groups. This is a huge part of my sitemap but only a few lines in the sitemap file. This part should be available in every installation for debugging, tests and experiments. I’ve seen users with a dedicated sitemap for this and that might be beneficial if others have access to the sitemap and shouldn’t mess around with raw Items.

Nested Subviews


This is my progress so far, but i am still building up this thing :smiley:



I build my home automation to primarily just do it’s thing without manual intervention so I’ve not spent a lot of time on BasicUI. But I will second all of Thom’s advice.

The only thing I’ll add is commonly used controls should be at the top and readily accessible. This is more useful when you only have a few such manual controls, in my case just the garage door openers, lights, and the furnace.

I won’t show every submenu, just some of the more interesting ones. But notice that all the submenus have a summary value where applicable so I can quickly glance on my main page and see most of the info I would care about. If there is something off on one of those menu entries, I can drill down to the submenu and get details. For example, if Sensor Status shows “offline” I can click and see which sensors or services are offline.

Note, my Grafana is broken right now and not generating prerendered charts so where ever you see the Hour, Day, Week, Month buttons you would normally see some charts.

Note that if I switch off Christmas Season, the Christmas Lights control on the main page gets hidden.


May I ask you about power meter for whole house? Which device do you use?

1 Like

It’s an Aeon Labs Smart Energy Monitor. I found one for really cheap and got it on a whim. I don’t really have much use for it but I try to keep it up and running.


How do I Change the color of the backgrounds etc.?

@Multisaft7 see here:

INFO: there are some changes in OH 2.2 CSS - so i updated my CSS, my comment on the thread is old and 2.1 related.

if you need some infos from my current CSS - feel free to ask

1 Like

Thanks for the information :slight_smile: Will you share your css? I will take a look at this and try to modify it to my behaviors :slight_smile:

my css for OH 2.2. so far:

/* =================================== HEADER FARBE */
.mdl-layout__header {
  background-color: #333;
.mdl-layout__header:after {
  content: "";
  background: url("http://www.clker.com/cliparts/4/b/0/c/1321299533595757907zebra%20background.jpg");
  opacity: 0.1;
  top: -10px;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;

/* =================================== HINTERGRUND FARBE - SEITE */

.page-content {
  background-color: #1e1e1e;
/*  HINTERGRUND Links/Rechts Wrapper */
.mdl-color--grey-100 {
  background-color: #1e1e1e !important;

body {
  --primary-color:#1e1e1e !important;
  --header-text-color:#5ddd90 !important;
  --body-bg:#1e1e1e !important;
  --container-bg:#1e1e1e !important;
  --container-text-color:rgb(230, 230, 230) !important;
  --switch-on-track-bg:#1e1e1e !important;
  --border-color:#1e1e1e !important

/* =================================== STEUERELEMENTE LINE-HEIGHT */

html.ui-layout-condensed .mdl-form__row {
    height: 45px;

/* =================================== STEUERELEMENTE HINTERGRUND FARBE  */

.mdl-color--white {
    background-color: #383838 !important;

/* =================================== STEUERELEMENT FARBE */

.mdl-color-text--grey-700 {
    color: #e0e0e0 !important;
/* STEUERELEMENTE - Zwischenstriche Farbe */
.mdl-form__row {
    border-bottom: 1px solid #2d2d2d;

/* =================================== STEUERELEMENT FRAME TEXT HEADLINE NAME */
.mdl-color-text--grey-700  h5 {
    color: rgba(93, 221, 144, 0.4);
    text-transform: uppercase;
    font-weight: 300;

/* =================================== STEUERELEMENT VALUE TEXT FARBE */
.mdl-form__value {
    color: rgba(93, 221, 144, 0.6);
.mdl-form__text {
    color: rgba(93, 221, 144, 0.6);

/* =================================== SWITCH FARBE OFF */

/* SWITCH Button Farbe */
.mdl-switch__thumb {
  background-color: #fff;
/* SWITCH Button Track */
.mdl-switch__track {
    background: #9b4f4f;
/* SWITCH Button Button-Farbe */
.mdl-switch__thumb {
  background: #5b5757;

/* =================================== SWITCH FARBE ON */
/* SWITCH Button Button-Farbe */
.mdl-switch.is-checked .mdl-switch__thumb {
    background: #d8d8d8;
/* SWITCH Button Track-Farbe*/
.mdl-switch.is-checked .mdl-switch__track {
    background: #66d693;
/* =================================== FRAME Rundungen */

/* Fenster / Abschnitt Rundungen */
.mdl-form {
  /*+border-radius: 10px;*/
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  -khtml-border-radius: 3px;
  border-radius: 3px;

/* =================================== BUTTON FARBE - OFF */

BUTTON.mdl-button--accent {
  border: 1px solid #5ddd90;
  /*+box-shadow: 0px 0px !important;*/
  /*-moz-box-shadow: 0px 0px !important;
  -webkit-box-shadow: 0px 0px !important;
  box-shadow: 0px 0px !important;*/
  background-color: #333 !important;
  color: #5ddd90 !important;
/* =================================== BUTTON FARBE - ON */

.mdl-form__setpoint BUTTON, .mdl-form__rollerblind BUTTON, .mdl-form__buttons BUTTON {
  color: white;
  background-color: #545454;
  /*+border-radius: 5px;*/
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  -khtml-border-radius: 2px;
  border-radius: 2px;

/* =================================== BUTTON FARBE - HOVER */

BUTTON.mdl-button:hover {
  background-color: #5ddd90;

/* =================================== VOLUME SLIDER LOWER */
.mdl-slider__background-lower, .mdl-slider__background-upper {
  color: #5ddd90 !important;

.mdl-slider__background-lower {
    background: #5ddd90;

mdl-form__control mdl-form__slider

.mdl-switch .is-checked .mdl-switch__thumb {
  background-color: #fff;

.mdl-switch .is-checked .mdl-switch__track {
  background: #fff;

.mdl-switch .is-checked .mdl-switch__thumb {
  background-color: #fff;
} */

.mdl-form__row {
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
} */

.mdl-form__image IMG {
  height: 200px;
  width: 200px;
  /*+box-shadow: -10px 10px 40px -8px;*/
  -moz-box-shadow: -10px 10px 40px -8px;
  -webkit-box-shadow: -10px 10px 40px -8px;
  box-shadow: -10px 10px 40px -8px;
  /*+border-radius: 20px;*/
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  -khtml-border-radius: 20px;
  border-radius: 20px;
  float: right;
  margin-right: 8px;
  border: 4px solid black;

/* Button Schatten - hässlich  */
BUTTON.mdl-button.mdl-button--raised {
  /*+box-shadow: -3px 3px 5px #D3D8DF;*/
  -moz-box-shadow: -3px 3px 5px #D3D8DF;
  -webkit-box-shadow: -3px 3px 5px #D3D8DF;
  box-shadow: -3px 3px 5px #D3D8DF;
} */


Thats good :wink:

1 Like

Looks great, how did you set up your sitemap so that is shows the current icon for the today and tomorrow conditions?

Wow, how did you manage to change the color scheme? Or is this not the basic UI?

He has posted screenshots of his Android openHAB App using the Dark or Black/AMOLED Theme.

Thank you - I like the look; but I didn’t find a similar theme in the iOS app. Or did I miss it?

I don’t use Apple products so I don’t know.