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 
Post your screenshots below
BR
Carsten
2 Likes
@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
I’m yet to write a proper tutorial/example for the tool, but you should definitely play around with it.
3 Likes
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
19 Likes
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.
11 Likes
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 Will you share your css? I will take a look at this and try to modify it to my behaviors
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 */
/* HINTERGRUND STEUERELEMENTE */
.page-content {
background-color: #1e1e1e;
}
/* HINTERGRUND Links/Rechts Wrapper */
.mdl-color--grey-100 {
background-color: #1e1e1e !important;
}
body {
--primary-color:#1e1e1e !important;
--header-bg:var(--primary-color);
--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 */
/* ZEILENHĂ–HE */
html.ui-layout-condensed .mdl-form__row {
height: 45px;
}
/* =================================== STEUERELEMENTE HINTERGRUND FARBE */
/* STEUERELEMENTE - HINTERGRUND FARBE */
.mdl-color--white {
background-color: #383838 !important;
}
/* =================================== STEUERELEMENT FARBE */
/* STEUERELEMENTE - TEXT 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 SELECTED */
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 */
/* BUTTON DESELECTED */
.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 HOVER FARBE */
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
/* KEINE AHNUNG
.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;
} */
/* KEINE AHNUNG
.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;
} */
3 Likes
Thats good 
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.
2 Likes