Vertikale Positionierung zu eng + Retina Skalierung

[Thyraz]

Hallo zusammen.

Habe erst heute TabletUI installiert und lese schon den ganzen Morgen durch das Wiki und dieses Unterforum hier.
Erste CSS Anpassungen hab ich schon hinbekommen und ein paar Lampen + Dimmer als Test integriert.

Allerdings sieht das etwas vertikal gequetscht aus.
Meine User-CSS hat nur Farben und border-radius drin. Die Positionierung ist also komplett Standard.

Ist das normal und man muss sich um die Elemente innerhalb der li-Elemente selbst kümmern?
Ich hab das Ganze jetzt mal extrem abgespeckt für den Testzwecke hier:

(https://www.dropbox.com/s/31wuw73herrwqsw/TabletUI1.png?dl=1)

Code Auswählen Erweitern


<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
    <header>Schlafzimmer</header>
    <div data-type="dimmer"
    data-device="RGBWController01"
    data-get="dimmerVal"
    data-get-off="0"
    data-get-on="[1-9][0-9]*"
    data-set-on="on"
    data-set-off="off"
    data-dim="dim"
    data-min="0"
    data-max="99"
    data-on-background-color='#0a81db'
    data-off-background-color='#43434f'
    data-off-color='#ffffff'
    data-on-color='#ffffff'></div>
    <div data-type="label" class="small narrow darker">LED-Stripes</div>
</li>
</ul>
</div>


Außerdem sieht die Schrift und die Striche vom Dimmer-Modul total verwaschen aus auf dem Retina Display, als ob sie nur in halbierter Auflösung gerendert würde.
Gibt es dafür eine Lösung?

Hier mal noch der Screenshot ohne das drübergeschobene Label, dann sieht man es besser:
(https://www.dropbox.com/s/ia5htg7ejknl9gp/TabletUI2.png?dl=1)

[setstate]

Zum Renderer kann ich nix sagen, aber die vertikale Positionierung kann man per top-space, top-space-2x und top-space-3x beeinflussen.

Code Auswählen Erweitern


<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
    <header>Schlafzimmer</header>
    <div data-type="dimmer"
    data-device="RGBWController01"
    data-get="dimmerVal"
    data-get-off="0"
    data-get-on="[1-9][0-9]*"
    data-set-on="on"
    data-set-off="off"
    data-dim="dim"
    data-min="0"
    data-max="99"
    data-on-background-color='#0a81db'
    data-off-background-color='#43434f'
    data-off-color='#ffffff'
    data-on-color='#ffffff'
    class="top-space"></div>
    <div data-type="label" class="small top-space darker">LED-Stripes</div>
</li>


[Thyraz]

Vielen Dank für die schnelle Antwort. 

Evtl. findet sich ja noch ein Retina iPad User der mir sagen kann, ob das normal oder gar zu lösen ist...

Btw. Super Arbeit mit dem Frontend.
Werde da mit Sicherheit noch einiges mit probieren und ein paar selbst erstellte Icons als Iconfont zur Verfügung stellen wenn ich die Konvertierung von SVG irgendwie hinbekomme...

Hab dir auf alle Fälle mal 10€ gespendet, damit du deinem neuen MacBook wieder etwas näher kommst.

[StefanD]

Also mein iPad mini 2, auch Retina, rendert i.d.r. alles sauber und scharf. Lediglich der Dimmerbalken unter dem Icon ist matschig.

Da ich erst einen Dimmer verbaut habe, habe ich mich um die Einbindung in FTUI noch nicht weiter gekümmert. Möchte die Helligkeit auch in 10% Schritten dimmen, da die 1% Schritte auch keiner wahrnimmt.

VG
Stefan