This is my progress so far, but i am still building up this thing 
NESTED SITES:
8 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
Frame {
Text item=Current_DateTime label="Weather and Astro [%1$tA, %1$td.%1$tm.%1$tY]" icon="sun_clouds" {
Frame label="Now" {
//Switch item=Night_State label="Time of Day" mappings=[OFF="Day", ON="Night"]
Text item=Day_Phase icon="sunmoon"
Text item=Sunrise_Time icon="sunrise" visibility=[Night_State == ON]
Text item=Sunset_Time icon="sunset" visibility=[Night_State == OFF]
Text item=Sun_Elevation icon="sunmoon" visibility=[Sun_Elevation > 0]
Text item=Moon_Elevation icon="sunmoon" visibility=[Moon_Elevation > 0]
Text item=Zodiac_Sign icon="zodiac"
Text item=Moon_Phase
Text item=Moon_Next_Full icon="fullmoon"
visibility=[Moon_Phase == WAXING_CRESCENT,
Moon_Phase == FIRST_QUARTER,
Moon_Phase == WAXING_GIBBOUS,
Moon_Phase == FULL]
Text item=Moon_Next_New icon="fullmoon"
visibility=[Moon_Phase == WANING_GIBBOUS,
Moon_Phase == THIRD_QUARTER,
Moon_Phase == WANING_CRESCENT,
Moon_Phase == NEW]
}
Frame label="Weather Forecast"{
Text label="Coming soon..." icon="sun_clouds"
}
}
Can you discuss a little bit more about how you’re pulling the channel data for these items/things? I’m presuming the Astro binding for the sun/moon information, but what are you using for weather? Also, can you show an image of this particular sub frame? I’m 'trying to visualize what it is supposed to look like, because my attempted implementation of this is coming back empty:
Here’s the “Main” interface:
.
.
And the “Weather and Astro” group:
As chance would have it, there is a whole Tutorial thread on this particular part of my setup out there:
As I guess this will answer all your questions, please let me know if new arise!
1 Like
Brilliant. Thank you!
1 Like
how is the icon name of “iCloud Deatails” ?
It isn´t listed in https://www.openhab.org/docs/configuration/iconsets/classic/
some of my icons are self-made 