OH3 basic UI buttons not responding

Setup, Configuration and Use Items & Sitemaps
1

My current setup:
OH 3.1.0-SNAPSHOT (build #2127)
Oracle java version “11.0.9” 2020-10-20 LTS
macOS Mojave 10.14.6

I’m facing some issues with basicui on my iPhone iOS 14.3.
To control my heat pump I setup some buttons to switch between modes Auto, Party, Ferien, Aus.

My test sitemap:

sitemap test label=“Mini Casa” {
Frame label=“Licht Erdgeschoss” {
Switch item=Licht_Kuechenschrank
Switch item=Hue_Esstisch
}
Frame label=“Heating” {
Text item=Heat_Mode
Text item=Heat_Stat
Text item=Water_Stat
Switch item=Heat_Prog icon=“temperature” label=“Heizung” mappings=[“0”=“Auto”,“2”=“Party”,“3”=“Ferien”,“4”=“Aus”]
Switch item=Water_Prog icon=“temperature” label=“Brauchwasser” mappings=[“0”=“Auto”,“2”=“Party”,“3”=“Ferien”,“4”=“Aus”]
Setpoint item=Heat_HkTemp label=“Heizkurve Abweichung [%.1f °C]” step=0.5 minValue=-5 maxValue=5
Text item=Heat_HkAbweichung label=“Heizkurve Abweichung [%.1f °C]”
Setpoint item=Water_Temp label=“Warmwasser [%.1f °C]” step=0.5 minValue=30 maxValue=50
}
}

My problem is that the button doesn’t respond on single click/tap. I’ve to click the buttons 2-3 times before I can switch between heating modes. Seems to be that some tweak / css is required? Does anybody have an idea?

On my Mac in Safari the buttons work fine. Only error I see on my MacBook:
Failed to load resource. 404 not found https://house.capere.de/icon/number?state=0.5&format=svg&anyFormat=true

thanks

2

anybody got a clue what’s going wrong here? Is this a html/css bug?!?

I tested again. Safari on MacOS is working fine…the buttons also change asap on my iPhone but using the web ui on my iPhone I’ve to click two times on the button.

IMG_297813ECE124-1
IMG_297813ECE124-11170×1619 112 KB

3

No more help needed. I figured it out on my own. You need a custom css to fix this issue:

.mdl-ripple {
  background: #000;
  opacity: 0.001;
}

In order to inject you create a html file and add this to your sitemap:

// Hide default navigation
Webview url="/static/roundDesign/HideHeader.html" icon="none"

The html file:

<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/css/myStyle.css")
   </script>
</body>

You can find more details in this thread: