circlemenu und switch widgets zeigen gleiche Icons nicht auf gleicher Höhe

[spi3845]

Hallo,

ich nutze Flexbox statt Gridster und habe einige Switch und Circlemenu Widgets eingerichtet - z. B. zur Steuerung meiner Dimmer und normaler Lampen (ein/aus). Dabei ist mir aufgefallen, dass die Icons nicht auf gleicher Höhe dargestellt werden. Ok, das sind nur ganz wenige Pixel Unterschied, mich würde trotzdem interessieren, wie man das wegbekommt. Ansonsten funktionieren Switch und Circlemenu wie gewünscht - die Icons ändern ihr Aussehen und im ausgklappten Circlemenu wird der ausgwählte Wert hervorgehoben. Screenshots anbei.

2. Frage: wenn ich mein Tablet hochkant drehe, wird die Darstellung auseinander gerissen. Woran könnte das liegen?

Die Lampen in der 1. Zeile sind:
Küche = Switch
Theke = Circlemenu
Essen = Switch
Sofa = Circlemenu

Rollläden in der 2. Zeile (Küche, WoZi links, WoZi rechts) sind alle Circlemenu.

Mein Code für Switch Küche und Circlemenu Theke sieht so aus (alle anderen sind analog konfiguriert):

Code Auswählen Erweitern


        <div class="hbox items-space-between">
                <div data-type="switch" data-device="eg_LichtKueche_Decke"
                    data-states='["off","on"]'
                    data-colors='["green","red"]'
                    data-icons='["fa-lightbulb-o","fa-lightbulb"]'
                    data-background-icon="-"
                    class="normal">
                </div>
                <div class="grow-1 left-align left-narrow">
                    <div data-type="label" class="normal">K&uuml;che</div>
                </div>

                <div data-type="circlemenu" data-direction="right-half">
                    <ul class="menu">
                        <li><div data-type="symbol" class="normal"
                            data-device="eg_DimmerKueche_Decke"
                            data-states='["off","on","[1-3]*[0-9]","[4-6][0-9]","[7-9][0-9]"]'
                            data-colors='["green","red","GoldenRod","GoldenRod","GoldenRod"]'
                            data-icons='["fa-lightbulb-o","fa-lightbulb","fa-lightbulb","fa-lightbulb","fa-lightbulb"]'
                        ></div></li>
                        <li><div data-type="switch" data-device="eg_DimmerKueche_Decke" data-get-on="on" data-get-off="!on" data-set-off="" data-icon="" class="normal">100</div></li>
                        <li><div data-type="switch" data-device="eg_DimmerKueche_Decke" data-get-on="70" data-get-off="!on" data-set-off="" data-icon="" class="normal">70</div></li>
                        <li><div data-type="switch" data-device="eg_DimmerKueche_Decke" data-get-on="50" data-get-off="!on" data-set-off="" data-icon="" class="normal">50</div></li>
                        <li><div data-type="switch" data-device="eg_DimmerKueche_Decke" data-get-on="30" data-get-off="!on" data-set-off="" data-icon="" class="normal">30</div></li>
                        <li><div data-type="switch" data-device="eg_DimmerKueche_Decke" data-get-on="off" data-get-off="!on" data-set-off="" data-icon="" class="normal">0</div></li>
                    </ul>
                </div>
                <div class="grow-1 left-align left-narrow">
                    <div data-type="label">Theke</div>
                    <div data-type="label" data-device="eg_DimmerKueche_Decke" data-get="pct" data-unit="%" data-fix="0"></div>
                </div>
        </div>



Update 1: Noch etwas vergessen: habe fhem-tablet-ui.css angepasst und als sp-tablet-ui.css eingebunden, um das schmale Menü am linken Rand hinzubekommen. Das Problem mit Hochkantdrehen wird durch Circlemenu verursacht - kommentire ich es aus, kann ich das Tablet hochkant drehen und das linke Menü wird dann aus- und eingeklappt.

Update 2: Die Icons beim Circlemenu werden durch das eingebettete symbol auf einer etwas anderen Höhe gezeichnet. Ich habe mir jetzt damit geholfen, dass ich die switch-Anweisung

Code Auswählen Erweitern


                <div data-type="switch" data-device="eg_LichtKueche_Decke"
                    data-states='["off","on"]'
                    data-colors='["green","red"]'
                    data-icons='["fa-lightbulb-o","fa-lightbulb"]'
                    data-background-icon="-"
                    class="normal">
                </div>
                <div class="grow-1 left-align left-narrow">
                    <div data-type="label" class="normal">K&uuml;che</div>
                </div>

ersetze durch

Code Auswählen Erweitern


                <div data-type="switch" data-device="eg_LichtKueche_Decke"
                    data-icon="-"
                    data-background-icon="-">
                        <div data-type="symbol" class="normal"
                            data-device="eg_LichtKueche_Decke"
                            data-states='["off","on"]'
                            data-colors='["green","red"]'
                            data-icons='["fa-lightbulb-o","fa-lightbulb"]'
                        ></div>
                </div>
                <div class="grow-1 left-align left-narrow">
                    <div data-type="label" class="normal">K&uuml;che</div>
                </div>


Damit sind die Icons der switch und circlemenu-Anweisungen wieder auf gleicher Höhe. Etwas umständich, aber funktioniert erst einmal. Vermutlich kriegt man das auch durch einen Eingriff in die css hin, aber das ist für mich nicht so leicht umzusetzen. Die Anweisungen data-icon="-" und data-background-icon="-" sind nötig, damit das Icon nicht doppelt gezeichnet wird (einmal durch switch, das zweite mal durch symbol). Lässt man das weg, sieht man schön, wie die Icons sich in der Position unterscheiden.