Autor Thema: TabletUI: circlemenue teilweise verdeckt  (Gelesen 71 mal)

Offline stobor

  • Full Member
  • ***
  • Beiträge: 471
TabletUI: circlemenue teilweise verdeckt
« 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.
« Letzte Änderung: 15 September 2020, 23:03:05 von stobor »
Intel NUC (Ubuntu 18.04.3 LTS)  mit CUL V3.2 (Firmware 1.57 CUL868) für FS20 und CUL V3.4 (Firmware 1.57 CUL868) für HM + Arduino Uno R3 DIL
FHEM Revision: 17469
FS20-Schalter und Dimmer
HM Fensterkontakte, Heizungsthermostate, Temperatursensoren

 

decade-submarginal