FHEM Forum

FHEM => Frontends => TabletUI => Thema gestartet von: stobor am 15 September 2020, 22:45:31

Titel: TabletUI: circlemenue teilweise verdeckt
Beitrag von: stobor am 15 September 2020, 22:45:31
Hallo,ich nutze die CircleMenu Funktion:

<li data-row="5" data-col="2" data-sizey="1" data-sizex="1">
<div>
<div data-type="switch"
data-device="switchSummerOff"
data-icons='["oa-secur_alarm","oa-secur_alarm"]'
data-colors='["#505050","#505050"]'
data-set-states='["off","off"]'
data-states='["on","off"]'
data-background-colors='["#2a2a2a", "#2a2a2a"]'
class="display-topcenter tall">
</div>
<div data-type="label"
class="display-bottomcenter big">AlarmSummer aus
</div>
</div>
</li>

<li data-row="5" data-col="3" data-sizey="1" data-sizex="1">

<div>
<div data-type="circlemenu" class="cell circlemenu display-topcenter bigger" data-item-diameter="150" data-circle-radius="150" >
<!-- https://www.youtube.com/watch?v=O5DsCKTNF8c  http://knowthelist.github.io/fhem/tablet/demo_circlemenu.html#link1.html -->
<ul>
<li><div data-type="push" data-icon="fa-thermometer-full"></div></li>
<li><div class="big" data-type="link" data-color="white" data-url="javascript:go('myURL=2306&new_value=1')">WC</div></li>
<li><div class="big" data-type="link" data-color="white" data-url="javascript:go('myURL=1275&new_value=1')">Flur</div></li>
<li><div class="big"  data-type="link" data-color="white" data-url="javascript:go('myURL=2193&new_value=1')">Küche</div></li>
<li><div class="big"  data-type="link" data-color="white" data-url="javascript:go('myURL=1493&new_value=1')">Wohnen</div></li>
<li><div class="big"  data-type="link" data-color="white" data-url="javascript:go('myURL=1774&new_value=1')">Bad</div></li>
<li><div class="big"  data-type="link" data-color="white" data-url="javascript:go('myURL=1661&new_value=1')">Kind</div></li>
<li><div class="big"  data-type="link" data-color="white" data-url="javascript:go('myURL=1548&new_value=1')">Schlafen</div></li>
<li><div class="big"  data-type="link" data-color="white" data-url="javascript:go('myURL=1887&new_value=1')">Arbeiten</div></li>
</ul>
</div>
<div data-type="label"
class="display-bottomcenter big">Boost
</div>
</div>

</li>

<li data-row="5" data-col="4" data-sizey="1" data-sizex="1">
<div>
<div data-type="switch"
data-device="switchSummerOff"
data-icons='["oa-secur_alarm","oa-secur_alarm"]'
data-colors='["#505050","#505050"]'
data-set-states='["off","off"]'
data-states='["on","off"]'
data-background-colors='["#2a2a2a", "#2a2a2a"]'
class="display-topcenter tall">
</div>
<div data-type="label"
class="display-bottomcenter big">AlarmSummer aus
</div>
</div>
</li>


Jetzt wird allerdings das geöffnete KreisMenü vom rechts daneben liegenden Widget überdeckt - siehe Screenshot anbei.
Mich wundert, dass sich der geöffnete Kreis über das linke Widget legt, aber nicht über das rechts daneben liegende.
Wie bekomme ich es hin, dass das Kreismenü komplett im Vordergrund liegt?


Auch wenn ich bspw. Icons anstatt Text verwende, passiert das Gleiche:
<ul>
<li><div data-type="push" data-icon="fa-thermometer-full"></div></li>
<li><div data-icon="mi-wc" data-type="link" data-color="white" data-url="javascript:go('myURL=2306&new_value=1')"></div></li><!--WC-->
<li><div data-icon="fs-floor" data-type="link" data-color="white" data-url="javascript:go('myURL=1275&new_value=1')"></div></li><!--Flur-->
<li><div data-icon="fs-hue_room_kitchen" data-type="link" data-color="white" data-url="javascript:go('myURL=2193&new_value=1')"></div></li><!--Küche-->
<li><div data-icon="fs-hue_room_living" data-type="link" data-color="white" data-url="javascript:go('myURL=1493&new_value=1')"></div></li><!--Wohnen-->
<li><div data-icon="fa-bath" data-type="link" data-color="white" data-url="javascript:go('myURL=1774&new_value=1')"></div></li><!--Bad-->
<li><div data-icon="oa-scene_childs_room" data-type="link" data-color="white" data-url="javascript:go('myURL=1661&new_value=1')"></div></li><!--Kind-->
<li><div data-icon="oa-scene_sleeping" data-type="link" data-color="white" data-url="javascript:go('myURL=1548&new_value=1')"></div></li><!--Schlafen-->
<li><div data-icon="oa-light_office" data-type="link" data-color="white" data-url="javascript:go('myURL=1887&new_value=1')"></div></li><!--Arbeiten-->
</ul>


Außerdem wundert mich, dass diese Icons zunächst deaktiviert scheinen (sie sind nicht weiß, sondern hell-grau). Ich muss sie zunächst einmal anklicken. Dann werden sie weiß. Und nach einem erneuten Anklicken lösen sie ihre Aktion aus. Idee?

Danke für eure Hilfe.
Titel: Antw:TabletUI: circlemenue teilweise verdeckt
Beitrag von: roelleke am 05 März 2021, 22:54:54
Hallo,
ich habe jetzt das gleiche Problem.
Gibt es hier vielleicht schon eine Lösung?