Frame Labels in Basic UI are not visible

rrroonn · December 14, 2018, 10:01pm

A frame defined in sitemap:

	Frame label="House" 
	{
	Text 	item=FrontDoor label="Front Door [MAP(security_contact.map):%s]" valuecolor=[0="orange",1="green", 4="red", >0="silver"]
	Text 	item=BackDoor  label="Back Door [MAP(security_contact.map):%s]"  valuecolor=[0="orange",1="green", 4="red", >0="silver"]
	Text 	item=HallPIR   label="Hall PIR [MAP(security_pir.map):%s]"  	valuecolor=[0="orange",1="green", 4="red", >0="silver"]
	Text 	item=LoungePIR label="Lounge PIR [MAP(security_pir.map):%s]"  valuecolor=[0="orange",1="green", 4="red", >0="silver"]
	}

The “House” label does not render in the BASIC UI whereas it does in Android App and Classic UI.

The HTML looks like this:


<h5 class="mdl-form__title mdl-cell mdl-cell--12-col">
		House
</h5>

http://xxx.xxxx.xxx.xxx:8080/basicui/smarthome.css has:

.mdl-form--no-label 
.mdl-form__title {

 display: none;

}

So it looks like it is being done on purpose? Or maybe its a bug?

What would be the best way to override this behaviour without having to worry about future updates breaking it?

thank you

Ron

rossko57 · December 15, 2018, 12:49am

That’s curious. Frame label=“blah” { } works for me
OH 2.4 M6 , BasicUI, Win 7 Chrome
Same class you see. Got white-on-white text or somethiing?

rrroonn · December 15, 2018, 4:37am

Hi Rossko

Its not white on white,
if you look at the css fragment you can see that the “No Label” is intended!

I am using OH 2.3.0 which seems the latest available with Openhabian.

H102 · December 15, 2018, 3:31pm

Do you see any error messages in the logs and is the sitemap post above everything you have in the file?

The main sitemap label and the file name must match like below.

home.sitmap

sitemap home label="Your-SmartHouse"
{
    Frame label="House" 
	{
	Text item=FrontDoor label="Front Door [MAP(security_contact.map):%s]" valuecolor=[0="orange", 1="green", 4="red", >0="silver"]
	Text item=BackDoor  label="Back Door [MAP(security_contact.map):%s]"  valuecolor=[0="orange", 1="green", 4="red", >0="silver"]
	Text item=HallPIR   label="Hall PIR [MAP(security_pir.map):%s]"  	valuecolor=[0="orange", 1="green", 4="red", >0="silver"]
	Text item=LoungePIR label="Lounge PIR [MAP(security_pir.map):%s]"  valuecolor=[0="orange", 1="green", 4="red", >0="silver"]
        }
}

I also noticed and corrected some of the spacing between orange and 1 that was missing. The space between Text and item was also modified. Not sure if this will solve the issue but worth a try.

rrroonn · December 15, 2018, 9:07pm

@H102 , I have included the full sitemap.

sitemap home label="RWB Home"
{
	Text	label="Security [MAP(security_state.map):%s]" item=SecuritySystemStatus
	{

	Switch item=SecuritySystemStatus label="Security System" mappings=[0="Off", 1="Armed (Away)", 2="Armed (Home)"]
	Text item=SecuritySystemMode label="Reporting: [MAP(security_state.map):%s]"
	Text item=AlarmFailure label="Comms [MAP(fault.map):%s]"  visibility=[AlarmFailure!="CLOSED"] labelcolor=["OPEN"="red"] valuecolor=["OPEN"="red"]
	Frame label="House" 
	{
	Text 	item=FrontDoor label="Front Door [MAP(security_contact.map):%s]" valuecolor=[0="orange", 1="green", 4="red", >0="silver"]
	Text 	item=BackDoor  label="Back Door [MAP(security_contact.map):%s]"  valuecolor=[0="orange", 1="green", 4="red", >0="silver"]
	Text 	item=HallPIR   label="Hall PIR [MAP(security_pir.map):%s]"  	valuecolor=[0="orange", 1="green", 4="red", >0="silver"]
	Text 	item=LoungePIR label="Lounge PIR [MAP(security_pir.map):%s]"  valuecolor=[0="orange", 1="green", 4="red", >0="silver"]
	}		
	Frame label="Out Buildings"
	{
	Text 	item=ShedDoor label="Shed Door [MAP(security_contact.map):%s]" valuecolor=[0="orange", 1="green", 4="red", >0="silver"]
	Text 	item=GarageDoor  label="Garage Door [MAP(security_contact.map):%s]" valuecolor=[0="orange", 1="green", 4="red", >0="silver"]
	Text 	item=ShedPIR   label="Shed PIR [MAP(security_pir.map):%s]" valuecolor=[0="orange", 1="green", 4="red", >0="silver"]
	Text 	item=GaragePIR label="Garage PIR [MAP(security_pir.map):%s]" valuecolor=[0="orange", 1="green", 4="red", >0="silver"]
	}

	Frame label="Status"
	{
	Text item=SirenCount	label="Alarms: [%d]" valuecolor=[>0="red"] labelcolor=[>0="red"] visibility=[SecuritySystemStatus>0]
    Group item=gEventLog    label="Security Event Log" labelcolor=[SirenCount>0="red"] 
	Text label="* bypassed zones - not active" icon="none" labelcolor=["silver"] visibility=[SecuritySystemStatus==2]
	}
	}
}

I do not get any errors in the logs.

You can see that the label is being published to the html but being hidden by css - only in the basic UI.

spacing between orange and 1 that

Thanks, though does not make a difference.

I have added a couple of screenshots.

Classic:

Basic:

You can see in the Basic UI that the display-element is removed from the display - not just white-on-white. There is no space for the frame label.

To me it looks like intended behaviour (or a side-effect of some other change).

I am looking for ideas on how to work around. I did try:

but that did not work - though the css was loaded. I am not really good enough with web programming to suss out why.

While writing this response, I figured out why it was not working: I was not specific enough with the CSS - I should have used (and now do use):

rwb.css:

.mdl-form--no-label 
.mdl-form__title
{
display: block;	
}

For reference, this is what I used:

In my sitemap:

	Webview url="/static/rwb.html"

in the html folder, I have a rwb.html, that gets included by the Webview element

<!DOCTYPE html>
<html lang = "en-US">
 <head>
	<style>
	</style>
 </head>
 <body>
    <script type="text/javascript">
        
        function addStyleSheet(filename) {
        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)
        }
        
        function addStyleString(str) {
            var node = window.parent.document.createElement('style');
            node.innerHTML = str;
            window.parent.document.head.appendChild(node);
        }
//        var _headers = window.parent.document.body.getElementsByClassName("mdl-layout__header mdl-layout__header--scroll navigation navigation-home");
//        var _header = _headers[0];
//        _header.style.display = "none";

        // 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";
        
       // Change the style for images ...
       // addStyleString('div > img { border-radius: 15px !important; height: 200px !important; width: 200px !important; position: relative; float: right; }');
       addStyleSheet("/static/rwb.css")
    </script>
	<p>"Testing - ABCD ..."</p>

 </body>
</html>

Shamelessly copied from @patrik_gfeller work.

In the html folder, I also have “rwb.css”

.

mdl-form--no-label 
.mdl-form__title
{
display: block;	
}

Add these three things together and you get frame labels back:

thanks for your help guys.

herve_fache · May 3, 2021, 11:39am

I found out that if I have some items before my first frame, then I don’t have the labels. If I have a frame (even without a label) to start with then I have the labels.