New FHEM Tablet UI

[mw_fhem]

Ich habe alle Dateien ausgetauscht (der Update-Mechsniamus wollte wieder mal nicht). Hat leider nichts gebracht bei den Symbolen.

[tomster]

Wird ja immer besser hier!

Ich bastel gerade an einem Layout, bei dem ich beabsichtige ein CONTENT-Window in der Mitte zu platzieren, welches je nach gewähltem Menü-Punkt entsprechend den Inhalt verändert. Irgendwann in grauer Vorzeit hab ich Mal sowas für eine Web-App mit netten Übergängen zusammengefrickelt. Mal schaun, ob ich die Dateien noch finde.
Bis es aber auch hier zu dieser Lösung kommt spiel ich mich derweil noch mit den "einfacheren" Layout-Aufgaben.
Ich scheitere aber schon am ersten Datenfenster (WETTERWERTE TAL) am Layout. Hier wäre es "schön", wenn man die (Wetter-)Daten in einer Reihe mit vorangestellten Icons setzen könnte (siehe oben links "WETTERWERTE TAL), also inline.
Wie man sieht, ist der horizontale Abstand zwischen dem (Symbol-)Widget und dem (Label-)Widget viel zu groß. Ich tipp mir zwar schon css-seitig die Finger wund, bring's aber nicht hin. Hat jemand eine Idee?

[nesges]

Wie man sieht, ist der horizontale Abstand zwischen dem (Symbol-)Widget und dem (Label-)Widget viel zu groß. Ich tipp mir zwar schon css-seitig die Finger wund, bring's aber nicht hin. Hat jemand eine Idee?

Zeig mal was du bisher hast, wahrscheinlich fehlt nicht mehr viel. Grundsätzlich bringt die vordefinierte Klasse "left" alles dafür mit. Gib beiden Elementen "left" und pack sie in einen Container der Klasse "centered", dann sollte's passen.

[tomster]

Sorry, hat ein bissl gedauert. hab mir das Layout inzwischen schon wieder zerschossen gehabt

Hier der aktuelle Status:

Code Auswählen Erweitern


<div class="container">
        <div class="inline">
                <div data-type="symbol" data-icon="oa-temp_temperature" class="cell narrow"></div>
        <div class="inline">
                <div data-type="label" data-device="Wetterstation" data-get="temperature" data-limits='[-73,19,23]' data-colors='["#6699FF","#aa6900","#bb6242"]' data-unit="%B0C%0A" class="cell big narrow"></div>
        </div>
        </div>
</div>

[nesges]

Probier mal, ob das das gewünschte ist:

Code Auswählen Erweitern

<div class="centered container">
    <div class="left">
        <div data-type="symbol" data-icon="oa-temp_temperature"></div>
    </div>
    <div class="left">
        <div data-type="label" data-device="Wetterstation" data-get="temperature" data-limits='[-73,19,23]' data-colors='["#6699FF","#aa6900","#bb6242"]' data-unit="%B0C%0A"></div>
    </div>
</div>

Wenn nicht, dann füge narrow und cell nochmal zu den inersten Elementen hinzu. Da muss man ein wenig rumprobieren

[tomster]

Mit dem class="left" für die beiden Widgets verschiebt er mir den Temp-Wert ganz nach links und das Icon rechts daneben.
Irgendwelche css-Elemente kommen sich da wohl in die Quere...

--edit--
Schmarrn, es vertauscht die beiden Elemente nur, wenn man ein </div> vergisst

Dennoch ändert sich nix am Problem. Die beiden Widgets wollen einfach nicht näher zusammenrutschen. Vielleicht mögen die sich gar nicht

[setstate]

Ich habe alle Dateien ausgetauscht (der Update-Mechsniamus wollte wieder mal nicht). Hat leider nichts gebracht bei den Symbolen.

Was steht bei dir in Zeile 21 in der
www/tablet/lib/openautomation.css
12px ??
Wüsste jetzt nicht, warum du mehr bräuchtest. Evtl. Überlagerung mit anderen Style Vorgaben

[nesges]

Dennoch ändert sich nix am Problem. Die beiden Widgets wollen einfach nicht näher zusammenrutschen. Vielleicht mögen die sich gar nicht

Gib dem Label noch was in der Richtung

Code Auswählen Erweitern

style="margin-left:-20px"

[setstate]

  ich hoffe, wir vermischen die Themen gerade nicht.
Meine Frage bezog sich auf das Thema openautomation Icons auf Button. Nicht das Widget Layout Thema.

[tomster]

Code Auswählen Erweitern

style="margin-left:-20px"

So bekomm ich's näher aneinenander, aber nur, wenn ich class="cell" weglasse. Danke! Jetzt noch v-alignen...

[tomster]

ich hoffe, wir vermischen die Themen gerade nicht.
Meine Frage bezog sich auf das Thema openautomation Icons auf Button. Nicht das Widget Layout Thema.

Dann vermischen wir gerade. Sorry, mein Fehler!

[setstate]

So bekomm ich's näher aneinenander, aber nur, wenn ich class="cell" weglasse. Danke! Jetzt noch v-alignen...

Schau mal in die Readme. Ich habe ein paar nutzvolle Klassen dafür hinterlegt: top-space, left-space, left-space-2x, narrow usw.

Die Klasse cell gibt einem Widget mehr Freiraum nach oben und links

[mw_fhem]

Zum Problem mit OpenAutomation-Icons:

Was steht bei dir in Zeile 21 in der
www/tablet/lib/openautomation.css
12px ??
Wüsste jetzt nicht, warum du mehr bräuchtest. Evtl. Überlagerung mit anderen Style Vorgaben

Ich habe die Basis-Größe der Widgets auf 57 bzw. 70 geändert. Das hat aber keine Auswirkung, wie ich eben getestet habe. Der Code sieht zum Beispiel so aus:

Code Auswählen Erweitern


<li data-row="6" data-col="1" datasizex="2" datasizey="2">
   <header><fontsize="+1" color="E6E6E6">Heizung</font></header>
   <div class="cell big">
     <div data-type="button" data-icon="oa-sani_heating" data-url="heizung_eg.html"></div>
   </div>
</li>


[setstate]

Zum Problem mit OpenAutomation-Icons:

Ich habe die Basis-Größe der Widgets auf 57 bzw. 70 geändert. Das hat aber keine Auswirkung, wie ich eben getestet habe. Der Code sieht zum Beispiel so aus:

Okay, verstanden. Das sind unerwartete Größenänderungen, die ich erst einmal selbst bei mir durchspielen muss

[mw_fhem]

Okay, verstanden. Das sind unerwartete Größenänderungen, die ich erst einmal selbst bei mir durchspielen muss

Aber wie geschrieben, auch mit der "Standard"-Größe besteht das Problem. Danke, dass du dich so intensiv kümmerst!