Hallo Wissende,
seit ein paar Tagen beschäftige ich mich nun mit TabletUi.
Spiele mich zurzeit mit den Beispielen von Nesges und Setstate und dabei bin ich auf eine Ungereimtheit gestoßen, die sicher hier schon mal angesprochen wurden.
Leider habe ich die richtige Antwort noch nicht gefunden.
In meinem Test-Menü sieht etwa so aus: ,,Button – Circlemenue – Button – Button" small Icons.
(Bild1) Wie man Sieht ist der Abstand(1) ,,Button – Circlemenue" größer als der Abstand(2) ,,Button – Button", weiters sind die Icons Button und Circlemenue nicht auf gleicher Linie(3).
Bild2 betrifft das Circlemenue: Wird das Circlemenue aktiviert erscheint ein Aktivfläche, deren Durchmesser ich mit ,,data-item-diameter" beeinflussen kann, nur das Icon sitzt nicht mittig.
Momentan drehe ich mich im Kreis, könnte man so etwas in der CSS ändern?
<!-- ============ Index-Menü ============= -->
<li data-row="1" data-col="1" data-sizex="1" data-sizey="6">
<header>Menü</header>
<div class="cell">
<!-- ============ Menüpunkt Index ============= -->
<div data-type="button"
data-url="index.html"
data-icon="fa-home"
data-on-background-color="rgb(111,69,0)"
data-off-background-color="rgb(111,69,0)"
data-on-color="#2a2a2a"
data-off-color="#2a2a2a"
class="cell small">
</div>
<!-- ============ Menüpunkt Wohnzimmer ============= -->
<div data-type="circlemenu"
class="cell circlemenu"
data-item-diameter="44"
data-direction="right-half"
data-circle-radius="90">
<ul class="menu">
<li>
<div data-type="symbol"
id="room_wohnzimmer"
data-icon="nesges-sofa"
data-on-background-color="rgb(111,69,0)"
data-off-background-color="rgb(111,69,0)"
data-on-color="#2a2a2a"
data-off-color="#2a2a2a"
data-background-icon="fa-circle"
class="cell small centered">
</div>
</li>
<li>
<div data-type="button"
data-url="wohnzimmer.html"
data-icon="fa-line-chart"
data-off-background-color="#aa6900"
class="cell small">
</div>
</li>
Schaue ich mir gerne an, wenn ich nach dem WE wieder zuhause bin.
Folgende Änderungen würde ich machen
<!-- ============ Index-Menü ============= -->
<li data-row="1" data-col="1" data-sizex="1" data-sizey="6">
<header>Menü</header>
<div class="centered">
<!-- ============ Menüpunkt Index ============= -->
<div data-type="button"
data-url="index.html"
data-icon="fa-home"
data-on-background-color="rgb(111,69,0)"
data-off-background-color="rgb(111,69,0)"
data-on-color="#2a2a2a"
data-off-color="#2a2a2a"
class="cell small">
</div>
<!-- ============ Menüpunkt Wohnzimmer ============= -->
<div data-type="circlemenu"
class="cell circlemenu"
data-direction="right-half"
data-circle-radius="90">
<ul>
<li>
<div data-type="symbol"
id="room_wohnzimmer"
data-icon="nesges-sofa"
data-on-background-color="rgb(111,69,0)"
data-off-background-color="rgb(111,69,0)"
data-on-color="#2a2a2a"
data-off-color="#2a2a2a"
data-background-icon="fa-circle"
class="small">
</div>
</li>
<li>
<div data-type="button"
data-url="wohnzimmer.html"
data-icon="fa-line-chart"
data-off-background-color="#aa6900"
class="small">
</div>
</li>
...
Herzlichen Dank für die Änderungen,
werde es am Wochenende testen und weiter spielen.
Thomas
Hallo Mario,
ich finde dein Programm ,,Fhem Tablet-Ui" sehr gelungen
und bin dir auch über jede Unterstützung dankbar.
Was ich hier jetzt mache ist mäkeln auf sehr hohem Niveau
und erwarte gar keine Antwort darauf.
Ich spiele seit ungefähr einer Woche mit diesem Programm und
reize es auch hierbei bis zu den Grenzen aus,
um es besser kennen zu lernen und Ungereimtheiten und Fehler zu finden.
Wie gerade jetzt im Bereich Menue (Button, Circlemenue).
Zum Test habe ich hier Button – Circlemenue – Button – Button angelegt.
Wie man auf dem Bild sieht, ist der Abstand der Symbole nicht gleich.
Der Abstand Button zum Circlemenue (A) entspricht etwa dem Abstand
Button – Button (C), der Abstand Circlemenue – Button (B) ist wesentlich größer.
Die Abstände (A) und (B) sind abhängig vom Diameter Durchmesser.
Auch die Position des Icons des Circlemenue ist abhängig vom Diameter Durchmesser.
Kann es sein, daß die Position des Circlemenue auf den Item-Diameter
ausgerichtet ist und nicht auf das Icon selbst?
Zwischen Bild1 und Bild2 wurde nur das Item-Diameter von 37 auf 90 erhöht.
Gruß Thomas
Ist tatsächlich so. Der diameter Parameter verschiebt die Position des Circlemenüs. Es gibt nur einen Wert, der optimal ist (zufällig der default wert :-) Das Control habe ich auch nur im Netz gefunden und als Widget eingebunden. Das Problem zu lösen macht den gleichen Aufwand, wie alles gleich ganz neu zu bauen. Das will ich mir gerade nicht antun. Ich hoffe immer, dass schlaue Entwicklerprofis mit einem Patch um die Ecke kommen oder mir eine Alternative über den Weg läuft. ;D
Ich bin gestern auf den gleichen Effekt gestoßen. Bei mir ist das circlemenu allerdings hinter einem Symbol-Widget, welches unauffällig in einer Reihe mit weiteren "normalen" Symbol-Widgets stehen soll. Das Problem ist das gleiche wie hier geschildert: Die Abstände stimmen nicht überein.
Vielleicht gibt es dafür ja inzwischen eine Lösung? Ich habe eine ganze Zeit mit verschiedenen css-Eigenschaften herumgespielt, aber nichts zufriedenstellendes gefunden.