BasicUI allows one to have multiple sitemaps; and in the top level “home” screen it allows you to select which one to load as shown in the image below…
However, once you have selected a specific sitemap, there seems to be no way to navigate back to the top level “home” screen again; I would have expected that the house icon would be linked to the top level home screen (see NOT image below)…
Is there a reason for this? Or is BasicUI basically broken?
I think sitemaps are expected to be used for different display or site situations,
Groups are designed for menuing within a sitemap, I believe.
It’s a feature that has never been requested and/or no developer has been willing to volunteer to create it. I believe the use case envisioned by the developers for BasicUI/ClassicUI is that a sitemap is wholly self contained. Instead of creating different sitemaps for different parts of your home automation, you would create different sitemaps for different users of your home automation.
You would define a sitemap that includes everything that that given user is expected to do. Switching between sitemaps is not something that is expected to be done.
Not Groups. Groups give you no control. You want to use Frames and subelements. For example:
Text item=gIndoorTemps label="Climate [%.0f °F]"{
Frame label="Status and Controls" {
Setpoint item=aNest_TargetTemp minValue=50 maxValue=75 step=1
Switch item=aNest_Fan
Text item=vNest_State
Text item=vNest_Online
Text item=vNest_LastConnection
Switch item=aMBR_Humidifier
Slider item=vMBR_Target_Humidity
}
Frame item=gIndoorTemps label="Current [%.0f °F]" {
Text item=gIndoorTemps
Text item=gIndoorHumidity
Text item=vMBR_Temperature
Text item=vMBR_Humidity
Text item=vNateBR_Temperature
Text item=vNateBR_Humidity
Text item=vNest_Temp
Text item=vNest_Humidity
Text item=vBasement_Temperature
Text item=vBasement_Humidity
// Temperature
Switch item=ChartVisibility mappings=[h=Hour,d=Day,w=Week,M=Month,y=Year]
Image url="http://argus:8080/static/temp.jpg" refresh=1000
// Humidity
Switch item=ChartVisibility mappings=[h=Hour,d=Day,w=Week,M=Month,y=Year]
Image url="http://argus:8080/static/hum.jpg" refresh=1000
}
Pay attention to the curly brackets. When you create an element (e.g. Text in this case) and supply curly brackets, everthing defined inside the curly brackets is put in a subpage of the sitemap. In this case, the indoor climate information for my house. NOTE: this subsection pasted in above is not complete, you must have a closing } for every {.
Clicking on “Climate” leads to
Clicking on the back arrow goes back to the previous sitemap page.
You can file an issue on the openhab-uis repo, but I believe that BasicUI is also on the chopping block along with PaperUI with one unified UI being built to replace them both so I’m not sure much would be done to create a home button unless you implement it yourself at this point…
HABPanel does support navigation between panels. And you can probably make something work using a Webview.
I’m pretty sure it was discussed, but I can’t remember when or where. I’ll see if I can find the link to the discussion.
This is it, I think.
Thanks @rlkoshak for the good advice about how to navigate DOWN the branches of a tree; this is very helpful. Nevertheless my question was actually about how to navigate UP to the top of the tree. Apparently (oddly) the advice is that OH has no way to navigate to the top of the tree, and the advice is (strangely) only to use the browser back button, or a bookmark. Really??
If you look at my screen shot, you will see a back arrow in the upper left corner. That navigates back to the previous screen. If you are two it more screens down, indeed, there is no way to jump straight to the home screen.
If you want that kind control, you need to look at HAB Panel.
Ok @rlkoshak your point is taken, thanks.
On a somewhat Off Topic question, I was intrigued by the graph you have on your home screen with historical climate info from “http://argus:8080”; this looks really cool, can you kindly point me to further info about how to do this?
InfluxDB+Grafana persistence and graphing is where you want to start.
Grafana is a really powerful charting package.
I use Grafana Image Charts to generate static images for the UIs, though you can embed a more dynamic version of the charts straight on you sitemap or HABPanel. Though I don’t think they work in the Android app that way.
Hey all,
I also wanted a Home Button to go back to my default sitemap from every subpage. So I build my own css and javascript to solve this problem. It based on this post here: Customizing Basic UI with CSS
Now the Home Button ( house in the left corner ) will be visible all the time and will direct you to the base uri of your sitemap. The url could also be changed.
See:
The picture show subpage. If you click on the arrow you will go just one step back, if you click on the house you will go back to the base uri, red framed part off the url.
The additional part you have to add to your own css file:
.mdl-layout__header-row {
padding: 0 0px 0 0px; /* to have no space from the window border to the arrow on small windows */
max-width: 1400px; /* to have some space from the window border to the arrow on large windows */
margin: 0 auto; /* to have some space from the window border to the arrow on large windows */
}
.navigation-page .navigation__button-home {
display: block; /* to get the house visible */
}
.mdl-layout__header-button {
position: unset; /* to get the house next to the arrow */
}
a {
color: #ffffff; /* to get the house white, because is a hyperlink now */
}
My full own *.html file
<head>
<style>
</style>
</head>
<body>
<script type="text/javascript">
function addStyleSheet(filename) {
// check if script runs before
if( window.parent.document.body.getElementsByClassName("own_hyperlink_class").length > 0 )
return;
var head = window.parent.document.head
, link = window.parent.document.createElement('link')
link.type = 'text/css'
link.rel = 'stylesheet'
link.href = filename
head.appendChild(link)
// Hide the last web element of the page ...
_webViewElements = window.parent.document.body.getElementsByClassName("mdl-form__row mdl-form__row--height-auto mdl-cell mdl-cell--12-col ");
_lastWebViewElement = _webViewElements[_webViewElements.length - 1];
_lastWebViewElement.style.display = "none";
_webViewElements = window.parent.document.body.getElementsByClassName("mdl-form__row mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet ");
_lastWebViewElement = _webViewElements[_webViewElements.length - 1];
_lastWebViewElement.style.display = "none";
// add a link to the Home Button
var mydiv = window.parent.document.body.getElementsByClassName("navigation__button-home ");
mydiv = mydiv[0];
var myI = mydiv.getElementsByClassName("material-icons ");
var aTag = document.createElement('a');
// mydiv.baseURI could be also any other url in "", like "http://MyServer:8089/basicui/app?sitemap=MyOwnSitemap"
aTag.setAttribute('href', mydiv.baseURI);
aTag.setAttribute('class', "own_hyperlink_class");
aTag.appendChild(myI[0]);
mydiv.appendChild(aTag);
}
addStyleSheet("http://server:8089/static/css/own_dark.css")
</script>
</body>
How to get all this to run you will find in the post linked before.
Hope that will help someone!
Cheers Jonas