Servus setstate,
nach anfänglicher Euphorie ob einer Darstellung mittels Sheet > Row > Cell muss ich gestehen, dass diese langsam Frustration weicht. Allerdings vermute ich den Grund hierfür bei mir. Irgendwie verstehe ich entweder die Syntax nicht, oder aber das funktioniert nur, wenn ALLE cells die exakt gleiche "Zeichenlänge" (wäre ja bei einzelnen Symbolen fast so) haben.
Mein Versuch mit unten stehendem Code reiht zwar alle Widgets einer Reihe aneinander, macht aber keine Abstände zwischen den Widgets. Die 2. Reihe sieht genauso aus, ist aber auf Grund unterschiedlicher Werte in der Gesamtlänge anders. Somit haut es auch mit Abstandsdefinitionen wie left-space oder right-space nicht hin. Die einzelnen Widgets wollen einfach nicht von Zeile zu Zeile genau untereinander stehen. Hab nun ich Deine Aussage falsch verstanden und Sheet > Row > Cell ist gar kein table-Ersatz, oder mach ich etwas falsch?
<div class="sheet">
<div class="row rank1">
<div data-type="label" data-device="Wetter" data-get="forecast_simpleforecast_forecastday_01_date_weekday" class="cell left-align calendar"></div>
<div data-type="weather" data-device="Wetter" data-imageset="meteocons" data-get="forecast_simpleforecast_forecastday_01_icon" class="cell left-align calendar tiny"></div>
<div data-type="label" data-device="Wetter" data-get="forecast_simpleforecast_forecastday_01_high_celsius" class="cell left-align calendar"></div>
<div data-type="label" data-device="Wetter" data-get="forecast_simpleforecast_forecastday_01_low_celsius" class="cell left-align calendar"></div>
<div data-type="label" data-device="Wetter" data-get="forecast_simpleforecast_forecastday_01_avewind_dir" class="cell left-align calendar"></div>
<div data-type="label" data-device="Wetter" data-get="forecast_simpleforecast_forecastday_01_avewind_kph" class="cell left-align calendar"></div>
<div data-type="label" class="cell left-align calendar">km/h</div>
</div>
<div class="row rank2">
<div data-type="label" data-device="Wetter" data-get="forecast_simpleforecast_forecastday_02_date_weekday" class="cell left-align calendar"></div>
<div data-type="weather" data-device="Wetter" data-imageset="meteocons" data-get="forecast_simpleforecast_forecastday_02_icon" class="cell left-align calendar tiny"></div>
<div data-type="label" data-device="Wetter" data-get="forecast_simpleforecast_forecastday_02_high_celsius" class="cell left-align calendar"></div>
<div data-type="label" data-device="Wetter" data-get="forecast_simpleforecast_forecastday_02_low_celsius" class="cell left-align calendar"></div>
<div data-type="label" data-device="Wetter" data-get="forecast_simpleforecast_forecastday_02_avewind_dir" class="cell left-align calendar"></div>
<div data-type="label" data-device="Wetter" data-get="forecast_simpleforecast_forecastday_02_avewind_kph" class="cell left-align calendar"></div>
<div data-type="label" class="cell left-align calendar">km/h</div>
</div>
</div>
Kannst Du etwas Licht in die Angelegenheit bringen?
Danke & LG,
Tom
ich habe nu auch echt kein Bock mehr...
Für heute bin ich erledigt... mal sehen ob sich morgen wieder Lust weiter zu machen aufbaut :-\ :-\
Vielleicht solltest Du mal Row > Col ausprobieren, statt Row > Cell. Bei Col kannst Du die Spaltenbreite angeben.
Bin gerade zufällig darauf gestoßen, habe es aber nicht ausprobiert: https://github.com/knowthelist/fhem-tablet-ui#format
Das isses! Danke Standarduser!
Muss ich wohl nur noch anpassen, damit ich alle meine Spalten unterbringe.
Da lag die Fehlerursache Mal wieder 50cm vor dem Monitor...
Sorry, wenn mein Posting oben etwas "negativ" geklungen hat. War aus der Situation heraus...
Beim Sheet > Row > Cell Layout gehen nur gleiche Anzahl der Zellen und alle gleiche Breite. Wie in einem Spreadsheet-Tool z.B. Excel. Mergen von Zellen gibt es hier aber nicht. Man kann also nicht in der ersten Reihe 2 Zellen haben und in der 3. Reihe 3 Zellen. Wenn man das so bauen würde, würden die 2 Zellen der 2. Reihe über den Zelle 1 und 2 der 3.Reihe liegen
1 2
1 2 3
Die Breite der Zellen kann man aber ändern, indem man cell-1-2 (50%) oder cell-50 angibt. Aber immer innerhalb eine Spalte gleiche Breite !!! Wenn man unterschiedliche Breiten braucht, muss man ein neues Sheet anfangen, dann kann man wieder andere Cell-Breiten angeben.
Oder man nutzt das Row > Col Layout, dort sind unterschiedliche Breiten in jeder Reihe möglich. Beim Row > Col Layout werden aber die Reihen nicht so schön gleichmässig auf die Kachel-Höhe verteilt, wie beim Sheet > Row > Cell Layout.
Danke setstate!
Das mit cell-1-2, etc. ist mir beim Studium des CSS inzwischen auch untergekommen.
Verzeih mir bitte meinen etwas harschen Ton im OP, aber zu diesem Zeitpunkt war ich echt gefrustet. Ich kann mich nur nochmal entschuldigen.
Nachdem ich mich aber ein bissl tiefer eingearbeitet habe, muss ich - trotz des "zerschossenen" Layouts nach dem Update - unumwunden zugeben:
Das FTUI ist mächtig geworden! Seeehr mächtig!
Danke, Danke, Danke für Deine Arbeit. An dieser Stelle darf ich deshalb nochmal auf folgenden Link verweisen:
https://github.com/knowthelist/fhem-tablet-ui/blob/master/README.md#donation
Kurzes Update:
Sheet->Row->Col funktioniert einwandfrei! Ich musste zwar noch ein paar weitere Styles (col-5, col-1-12, col-15, etc.) definieren, aber danach hatte ich eine wunderbar formatierte Tabellendarstellung. Kleiner Tipp hierzu:
Definiert Euch im fhem-tablet-ui.css bei den entsprechenden Style-Einträgen für die Erstellung einfach eine semitransparente background-color, dann seht ihr genau, ob die Spaltenbreite für Eure Widget-Outputs passt oder nicht. Ohne das fand ich das "Debugging" extrem schwer.
Beispiel:
.col-5-6 {
width: 83% !important;
background-color: rgba(255,255,200,0.4);
}
Kommt danach natürlich wieder raus aus dem Stylesheet ;-)
ich habe mir jetzt mal ein Sheet > Row > Cell Gerüst gebaut welches eigentlich schon ganz gut aussieht.
Folgende Frage, ich kann ja die Zellen mit % versehen z.B. cell-20, cell-50 geht das auch bei row..?
Ich bekomme die Formatierung noch nicht ganz so hin wie ich es möchte.
1. möchte ich gern das Circle Menü zentriert haben, gelingt mir aber noch nicht so richtig, habe ich mit den align Werten gespielt aber bekomme ich nicht ganz hin. Das Problem ist die Schrift darunter "Position" kann ich nicht hin und her schieben so das die mittig unter dem Circlemenü ist.
EDIT:// ich habe da "top-align" gefunden ;)
2. die Schrift unter den jeweiligen Button etwas höher, damit sie besser zugeordnet sind.. kann ich das mit class="" erreichen oder eben wenn es geht mit den Prozentangaben der row, was ist da besser zu händeln
Hier mal mein Menü und der Screenshot:
<li data-row="3" data-col="7" data-sizex="4" data-sizey="4" class="semitransparent3d">
<header class="semitransparent3dtable">Rollladen - Schlafzimmer</header>
<div class="sheet">
<!-- ============= Reihe 1 =========== -->
<div class="row">
<div class="cell-20" data-type="label"></div>
<div class="cell-30"
data-type="push"
data-device="RollladenSZ"
data-on-background-color="#4169e1"
data-off-background-color="#4169e1"
data-icon="fa-chevron-up"
data-on-color="#DC143C"
data-off-color="#808080"
data-background-icon="fa-square-o"
data-set-on="on">
</div>
<div class="cell-50"
data-type="push"
data-cmd="set"
data-device="RollladenSZ"
data-set-on="75"
data-icon=""
data-on-color="#E6FF57"
data-off-color="#808080"
data-on-background-color="#4169e1"
data-off-background-color="#4169e1"
data-background-icon="fa-circle-thin">75
</div>
</div>
<!-- ============= Reihe 2 =========== -->
<div class="row">
<div class="cell-20" data-type="label"></div>
<div class="cell-30 medium narrow whiter" data-type="label">Hoch</div>
<div class="cell-50 medium narrow whiter" data-type="label">Home 75 %</div>
</div>
<!-- ============= Reihe 3 =========== -->
<div class="row">
<div class="cell-20"
data-type="circlemenu"
data-item-width="52"
data-item-hight="52"
data-device="RollladenSZ"
data-direction="right-half"
data-circle-radius="90">
<ul>
<li class="circleborder"><div data-type="label" data-device="RollladenSZ"></div></li>
<li><div data-type="push" data-cmd="set" data-device="RollladenSZ" data-set-on="on" data-icon="">⇧</div></li>
<li><div data-type="push" data-cmd="set" data-device="RollladenSZ" data-set-on="75" data-icon="">75</div></li>
<li><div data-type="push" data-cmd="set" data-device="RollladenSZ" data-set-on="50" data-icon="">50</div></li>
<li><div data-type="push" data-cmd="set" data-device="RollladenSZ" data-set-on="25" data-icon="">25</div></li>
<li><div data-type="push" data-cmd="set" data-device="RollladenSZ" data-set-on="75" data-icon="">⩸</div></li>
<li><div data-type="push" data-cmd="set" data-device="RollladenSZ" data-set-on="off" data-icon="">⇩</div></li>
</ul>
</div>
<div class="cell-30"
data-type="push"
data-device="RollladenSZ"
data-on-background-color="#4169e1"
data-off-background-color="#4169e1"
data-icon="fa-minus"
data-on-color="#DC143C"
data-off-color="#808080"
data-background-icon="fa-square-o"
data-set-on="stop">
</div>
<div class="cell-50"
data-type="push"
data-cmd="set"
data-device="RollladenSZ"
data-set-on="50"
data-icon=""
data-on-color="#E6FF57"
data-off-color="#808080"
data-on-background-color="#4169e1"
data-off-background-color="#4169e1"
data-background-icon="fa-circle-thin">50
</div>
</div>
<!-- ============= Reihe 4 =========== -->
<div class="row">
<div class="cell-20 medium narrow ligthblue" data-type="label">Position</div>
<div class="cell-30 medium narrow whiter" data-type="label">Stop</div>
<div class="cell-50 medium narrow whiter" data-type="label">Beschattung 50 %</div>
</div>
<!-- ============= Reihe 5 =========== -->
<div class="row">
<div class="cell-20" data-type="label"></div>
<div class="cell-30"
data-type="push"
data-device="RollladenSZ"
data-on-background-color="#4169e1"
data-off-background-color="#4169e1"
data-icon="fa-chevron-down"
data-on-color="#DC143C"
data-off-color="#808080"
data-background-icon="fa-square-o"
data-set-on="off">
</div>
<div class="cell-50"
data-type="push"
data-cmd="set"
data-device="RollladenSZ"
data-set-on="25"
data-icon=""
data-on-color="#E6FF57"
data-off-color="#808080"
data-on-background-color="#4169e1"
data-off-background-color="#4169e1"
data-background-icon="fa-circle-thin">25
</div>
</div>
<!-- ============= Reihe 6 =========== -->
<div class="row">
<div class="cell-20" data-type="label"></div>
<div class="cell-30 medium narrow whiter" data-type="label">Runter</div>
<div class="cell-50 medium narrow whiter" data-type="label">Beschattung 25 %</div>
</div>
</div>
</li>
Probiere mal immer ein Buttun und dessen Text zusammen in eine gemeinsame Cell einzuschließen.
<div class="cell">
<div data-type="switch" ... </div>
<div>Text</div>
</div>
das hatte ich am Anfang so, aber das geht gar nicht, der Text landet überall nur nicht darunter... bitte bedenken es ist das Circlemeü, evtl. verhält sich das dann anders...?
Deshalb habe ich alles in eigene cells gepackt um es dann richtig zu positionieren, aber das bekomme ich eben beim Text unter dem Circlemenü nicht hin
Diese Klassen habe ich getestet, mal landet der Text im Kreis, mal rechts daneben und verschiebt alles andere nach rechts, dann wieder schräg rechts drüber, aber niemals drunter und schon gar nicht zentriert
Alignment: left-align, right-align, top-align, bottom-align
nur der relevante Teil aus meinem Code, jetzt so mit dem Text wie du es vorgeschlagen hast
<div class="row">
<div class="cell-20 top-align"
data-type="circlemenu"
data-item-width="55"
data-item-hight="55"
data-device="RollladenSZ"
data-direction="right-half"
data-circle-radius="90">
<ul>
<li class="circleborder"><div data-type="label" data-device="RollladenSZ"></div></li>
<li><div data-type="push" data-cmd="set" data-device="RollladenSZ" data-set-on="on" data-icon="">⇧</div></li>
<li><div data-type="push" data-cmd="set" data-device="RollladenSZ" data-set-on="75" data-icon="">75</div></li>
<li><div data-type="push" data-cmd="set" data-device="RollladenSZ" data-set-on="50" data-icon="">50</div></li>
<li><div data-type="push" data-cmd="set" data-device="RollladenSZ" data-set-on="25" data-icon="">25</div></li>
<li><div data-type="push" data-cmd="set" data-device="RollladenSZ" data-set-on="75" data-icon="">⩸</div></li>
<li><div data-type="push" data-cmd="set" data-device="RollladenSZ" data-set-on="off" data-icon="">⇩</div></li>
</ul>
</div>
<div class="left-align">Text</div>
Da ist ja das Circlemenu schon die cell. Ich meine das eher so
<div class="cell-20 top-align" >
<div data-type="circlemenu"
data-item-width="55"
das hatte ich schon alles, aber schau mal bitte den Screenshot an... ich habe 3 Spalten und 6 Reihen definiert und in jeder Cell ist ein Teil drin... die ganze rechte Seite (12 Teile) funktioneirt
Ganz links die Spalte die ich mit cell-20 definiert ist OK dort habe ich mehrere Leerfelder drin wo gar nichts drin steht um die Reihen/Spalten zu erhalten (du hast ja geschrieben das es sonst nicht geht)
hier kann ich das circlemenü welches in der 3 Reihe ist nicht positionieren und der Text "Position" klebt immer links dran und ist auch nicht so zu positionieren (center z.B.) wie der andere Text, also muss das circle irgend etwas verschieben.
Es heißt also im Klartext ich bekomme das Circlemenü und den Text dazu nicht richtig mittig zueinander positioniert...
Code hänge ich nochmal komplett dran
Vielen Dank fürs drauf schauen
<li data-row="3" data-col="7" data-sizex="4" data-sizey="4" class="semitransparent3d">
<header class="semitransparent3dtable">Rollladen - Schlafzimmer</header>
<div class="sheet">
<!-- ============= Reihe 1 =========== -->
<div class="row">
<div class="cell-20" data-type="label"></div>
<div class="cell-30"
data-type="push"
data-device="RollladenSZ"
data-on-background-color="#4169e1"
data-off-background-color="#4169e1"
data-icon="fa-chevron-up"
data-on-color="#DC143C"
data-off-color="#808080"
data-background-icon="fa-square-o"
data-set-on="on">
</div>
<div class="cell-50"
data-type="push"
data-cmd="set"
data-device="RollladenSZ"
data-set-on="75"
data-icon=""
data-on-color="#DC143C"
data-off-color="#808080"
data-on-background-color="#4169e1"
data-off-background-color="#4169e1"
data-background-icon="fa-circle-thin">75
</div>
</div>
<!-- ============= Reihe 2 =========== -->
<div class="row">
<div class="cell-20" data-type="label"></div>
<div class="cell-30 top-align large narrow whiter" data-type="label">Hoch</div>
<div class="cell-50 top-align medium narrow whiter" data-type="label">Home 75 %</div>
</div>
<!-- ============= Reihe 3 =========== -->
<div class="row">
<div class="cell-20 top-align"
data-type="circlemenu"
data-item-width="55"
data-item-hight="55"
data-device="RollladenSZ"
data-direction="right-half"
data-circle-radius="90">
<ul>
<li class="circleborder"><div data-type="label" data-device="RollladenSZ"></div></li>
<li><div data-type="push" data-cmd="set" data-device="RollladenSZ" data-set-on="on" data-icon="">⇧</div></li>
<li><div data-type="push" data-cmd="set" data-device="RollladenSZ" data-set-on="75" data-icon="">75</div></li>
<li><div data-type="push" data-cmd="set" data-device="RollladenSZ" data-set-on="50" data-icon="">50</div></li>
<li><div data-type="push" data-cmd="set" data-device="RollladenSZ" data-set-on="25" data-icon="">25</div></li>
<li><div data-type="push" data-cmd="set" data-device="RollladenSZ" data-set-on="75" data-icon="">⩸</div></li>
<li><div data-type="push" data-cmd="set" data-device="RollladenSZ" data-set-on="off" data-icon="">⇩</div></li>
</ul>
</div>
<div class="cell-30"
data-type="push"
data-device="RollladenSZ"
data-on-background-color="#4169e1"
data-off-background-color="#4169e1"
data-icon="fa-minus"
data-on-color="#DC143C"
data-off-color="#808080"
data-background-icon="fa-square-o"
data-set-on="stop">
</div>
<div class="cell-50"
data-type="push"
data-cmd="set"
data-device="RollladenSZ"
data-set-on="50"
data-icon=""
data-on-color="#DC143C"
data-off-color="#808080"
data-on-background-color="#4169e1"
data-off-background-color="#4169e1"
data-background-icon="fa-circle-thin">50
</div>
</div>
<!-- ============= Reihe 4 =========== -->
<div class="row">
<div class="cell-20 top-align large narrow ligthblue" data-type="label">Position</div>
<div class="cell-30 top-align large narrow whiter" data-type="label">Stop</div>
<div class="cell-50 top-align medium narrow whiter" data-type="label">Beschattung 50 %</div>
</div>
<!-- ============= Reihe 5 =========== -->
<div class="row">
<div class="cell-20" data-type="label"></div>
<div class="cell-30"
data-type="push"
data-device="RollladenSZ"
data-on-background-color="#4169e1"
data-off-background-color="#4169e1"
data-icon="fa-chevron-down"
data-on-color="#DC143C"
data-off-color="#808080"
data-background-icon="fa-square-o"
data-set-on="off">
</div>
<div class="cell-50"
data-type="push"
data-cmd="set"
data-device="RollladenSZ"
data-set-on="25"
data-icon=""
data-on-color="#DC143C"
data-off-color="#808080"
data-on-background-color="#4169e1"
data-off-background-color="#4169e1"
data-background-icon="fa-circle-thin">25
</div>
</div>
<!-- ============= Reihe 6 =========== -->
<div class="row">
<div class="cell-20" data-type="label"></div>
<div class="cell-30 top-align large narrow whiter" data-type="label">Runter</div>
<div class="cell-50 top-align medium narrow whiter" data-type="label">Beschattung 25 %</div>
</div>
</div>
</li>
Ich glaube, setstate meint so wie auf dem Bild.
Überleg Dir aber Mal die Anordnung in eine Art Table mit sheet row col zu packen. Dann stehen die Widget-Kombos auch wunderbar untereinander
Zitat von: tomster am 27 Januar 2017, 15:36:28
Überleg Dir aber Mal die Anordnung in eine Art Table mit sheet row col zu packen. Dann stehen die Widget-Kombos auch wunderbar untereinander
vielen Dank für deine Unterstützung ;)
schau mal in meinen Code, ich habe es doch in
sheet row col nur eben in mehreren Reihen... heißt jeder Teil ob nun Button oder Text in einer celle
Ich habe andere Kombinationen wo es wunderbar funktioniert
nur in dem Bereich des circlemenüs nicht..!
Schau mal auf meinen Screenshot ich habe mal ein anderes Icon genommen und das Circlemenü raus und schon funktioniert es..wenn du den Text direkt darunter schreibst landet er immer rechts daneben, da kann man formatieren was man will, ist das bei dir anders..?
Da hat das Circlemenu bestimmt noch so blöde feste Offsets drin, die ich weiter oben meinte. Dumme Workarounds, damit es irgendwie in Linie liegt.
Das entferne ich noch, damit sich alle Widgets gleich alignen.
Ich habe schon fast verzweifelt und dachte ich bin zu doof zu begreifen..... Aber gut wenn man die ganzen class nicht kennt ;)
Ich hatte mir schon einige Seiten auf dem System aufgebaut und finde es schon sehr gut zu händeln, wenn man das überall gut hinbekommt und dann kommt dieses "blöde" circle dazwischen und ich war gefrustet...
Jetzt sollte Circlemenu auch passen
auf dem Screenshot, das Wort "Position" im Circlemenü von vorhin klebt immer noch links an der Seite, setze ich dort ein anderes Icon ohne Circlemenü hin geht das wunderbar, also irgend etwas ist da noch nicht richtig.
Oder was muss ich in der class definieren.?
nun habe ich noch eine Frage zu meiner Wetter Seite, die ich grad letzte Woche fertig hatte, da ist jetzt einiges im argen.
Soll ich die komplett neu aufbauen mit Sheet > Row > Cell oder bekomme ich die so wieder hin, denn es hat sich einiges verschoben.
Der header ist komplett weg, und der Rest ist nach oben und unten verschoben, man sieht unten die Werte nicht mehr.
Aber eben bevor ich anfange frage ich lieber. (sieh Screenshot)
Code:
<!-- ========= Wettervorhersage =========== -->
<!-- ====================================== -->
<li data-row="3" data-col="3" data-sizex="8" data-sizey="4" class="semitransparent3d">
<div class="container weather">
<header>Wetter in <div data-type="label"
data-device="MeinWetter"
data-get="city"
style="display:inline"></div>
</header>
<table border="0px" width="100%">
<tr>
<td class="container weather"><div data-type="label" class="cell medium narrow whiter">Temperatur Norden<br></div>
<center><div data-type="label"
data-device="Temperatur_Norden"
data-get="temperature"
data-limits="[-50,0,10,25,30,40]"
data-colors='["#9999ff","#ffbdff","#aa6900","#ff6900","#ff3333","#ff0000"]'
data-unit="%B0C%0A"
class="cell larger">
</div>
</center>
</td>
<td><center><div data-type="label" class="cell medium narrow whiter"><big>↑</big> Sonnenaufgang<br></div>
<span style="color:#00FA9A">
<div data-type="label"
data-device="myTwilight"
data-get="sr_civil"
class="cell larger">
</div></span>
</center>
</td>
<td><center><div data-type="label" class="cell medium narrow whiter"><big>↓</big> Sonnenuntergang<br></div>
<span style="color:#2E64FE">
<div data-type="label"
data-device="myTwilight"
data-get="ss_civil"
class="cell larger">
</div></span>
</center>
</td>
<td><center><div data-type="label" class="cell medium narrow whiter">Sichtweite<br></div>
<div data-type="label"
data-device="MeinWetter"
data-get="visibility"
data-unit=" km"
class="cell larger">
</center>
</td>
</tr>
<tr>
<td><div data-type="label" class="cell medium narrow whiter">Feuchte<br></div>
<center><div data-type="label"
data-device="Temperatur_Norden"
data-get="humidity"
data-limits="[0,40,60]"
data-colors='["#9999ff","#aa6900","#ff6900"]'
data-unit=" %"
class="cell larger">
</div>
</center></td>
<td class="container weather" colspan="2" rowspan="2">
<center><div data-type="weather"
data-device="MeinWetter"
data-get="condition"
data-imageset="kleinklima"
style="width:150px" class="inline"></div>
<br>
<div data-type="label"
data-device="MeinWetter"
data-get="condition"
class="cell larger"></div>
</center>
</td>
<td><center><div data-type="wind_direction"
data-device="MeinWetter"
data-direction="wind_direction"
data-speed="wind_speed"
data-calm="-"
data-size="70"
data-tickstep="45"
data-angleoffset="0"></div>
</center></td>
</tr>
<tr>
<td><div data-type="label" class="cell medium narrow whiter">Temperatur Süden<br></div>
<center><div data-type="label"
data-device="Temperatur_Terrasse"
data-get="temperature"
data-limits="[-50,0,10,25,30,40]"
data-colors='["#9999ff","#ffbdff","#aa6900","#ff6900","#ff3333","#ff0000"]'
data-unit="%B0C%0A"
class="cell larger">
</div>
</center>
</td>
<td><center><div data-type="label" class="cell medium narrow whiter">Wind<br></div>
<div data-type="label"
data-device="WetterProplanta"
data-get="wind_speed"
data-unit=" km/h"
data-limits="[0, 19, 28, 38, 49, 74, 102, 117]"
data-colors='["#ffffff","#dddddd","#aa6900","#aa6900","#ff9999","#ff6666","#ff3333","#ff0000"]'
class="cell larger">
</div>
</center>
</td>
</tr>
<tr>
<td><center><div data-type="label" class="cell medium narrow whiter">UV-Index<br></div>
<div data-type="label"
data-device="WetterProplanta"
data-get="fc0_uv"
data-limits="[0,2,10]"
data-colors='["grey","orange","red"]'
class="cell larger">
</div>
</center>
</td>
<td><center><div data-type="label" class="cell medium narrow whiter">Regen<br></div>
<br>
<i class="fa fa-umbrella"></i>
<div data-type="label"
data-device="WetterProplanta"
data-get="fc0_chOfRainDay"
data-unit=" %"
style="display:inline"
class="cell larger"
data-limits="[0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100]"
data-colors='["#32AD4F","#3AAB2C","green","green","green","#F6AA1D","green","green","green","green","#F6451D"]'></div>
<i class="fa fa-tint"></i>
<div data-type="label"
data-device="WetterProplanta"
data-get="rain_day"
data-unit=" l"
data-limits="[0, 2, 5, 7, 10, 15, 20, 25, 30, 40, 50]"
data-colors=["#C0FF3E","#B3EE3A","#9ACD32","#CDC673","#FFA500","#EE9A00","#FF7F50","#FF7256","#EE6A50","#FF3030","#FF0000"]
style="display:inline"
class="cell larger">
</div>
</center>
</td>
<td><center><div data-type="label" class="cell medium narrow whiter">Luftdruck<br></div>
<br>
<div data-type="label"
data-device="Temperatur_Terrasse"
data-get="pressure"
data-unit=" hPa"
data-limits="[0,950,1000]"
style="display:inline"
data-colors='["#ff9999","#aa6900","#9999ff"]'></div>
<div data-type="label"
data-device="MeinWetter"
data-get="pressure_trend_sym"
style="display:inline">
</div></center>
</td>
<td><center><div data-type="label" class="cell medium narrow whiter">Frost<br></div>
<br>
<div data-type="symbol"
data-device="WetterProplanta"
data-get="fc0_frost"
data-get-off='0'
data-get-on='1'
data-off-color='#262626'
data-on-color='#9999ff'
data-icon="fs-frost"
class="inline top-narrow center cell">
</div>
</center>
</td>
<!--<td><center><div data-type="label" class="inline"><small>Taupunkt<br></small></div>
<div data-type="label"
data-device="WetterProplanta"
data-get="dewPoint"
data-unit="%B0C%0A"></div>
</center>
</td>-->
</tr>
</table>
</li>
Zu den einzelnen Tagen die habe ich angefangen mit Sheet > Row > Cell aber hier bekomme ich das Wettericon nicht kleiner zweite Screenshot
(linke Seite neu, rechte Seite die alte Variante)
der code dazu:
<!-- ======= Wettervorhersage 2.Tag ======= -->
<!-- ====================================== -->
<li data-row="7" data-col="3" data-sizex="2" data-sizey="3" class="semitransparent3d">
<header><div data-type="label"
data-device="MeinWetter"
data-get="fc2_day_of_week"
style="display:inline">
</div>
</header>
<div class="sheet">
<!-- ============= Reihe 1 =========== -->
<div class="row">
<div class="cell"
data-type="weather"
data-device="MeinWetter"
data-get="fc2_condition"
data-imageset="kleinklima">
</div>
</div>
<!-- ============= Reihe 2 =========== -->
<div class="row">
<div class="cell top-align medium whiter" style="font-size:120%"
data-type="label"
data-device="MeinWetter"
data-get="fc2_condition">
</div>
</div>
<!-- ============= Reihe 3 =========== -->
<div class="row">
<big>↓</big>
<div class="inline large top-align"
data-type="label"
data-device="WetterProplanta"
data-get="fc1_tempMin"
data-limits="[-50,0,10,25,30,40]"
data-colors='["#9999ff","#ffbdff","#aa6900","#ff6900","#ff3333","#ff0000"]'
data-unit="%B0C%0A">
</div>
<big>↑</big>
<div class="inline" style="font-size:150%"
data-type="label"
data-device="WetterProplanta"
data-get="fc1_tempMax"
data-limits="[-25,0,10,25,30,40]"
data-colors='["#9999ff","#ffbdff","#aa6900","#ff6900","#ff3333","#ff0000"]'
data-unit="%B0C%0A">
</div>
</div>
<!-- ============= Reihe 4 =========== -->
<div class="row">
<!--div class="cell top-align large whiter" data-type="label">Ein - Aus</div-->
<i class="newline"></i>
<i class="fa fa-umbrella"></i>
<div class="inline top-align" style="font-size:150%"
data-type="label"
data-device="WetterProplanta"
data-get="fc1_chOfRainDay"
data-limits="[0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100]"
data-colors=["#32AD4F","#3AAB2C","green","green","green","#F6AA1D","green","green","green","green","#F6451D"]
data-unit=" %">
</div>
</div>
</div>
</li>
Beim Weather Widget gab es keine Änderungen. Die "kleinklima" Images werden immer mit Width 100% gezeichnet.
Ich habe aber jetzt CSS Klassen für img angelegt. Dann kann man bei data-imageset="kleinklima" die Images z.B. mit class="small" kleiner machen, oder class="mini" oder auch größer class="big"
Ok das mit den einzelnen Tagen (screenshot 2) habe ich jetzt hinbekommen, aber erst nachdem ich ein weiteres Update gemacht habe ;)
Nun muss ich mich mal an die große Wetteranzeige (screenshot 1) auf der Seite machen, die wird sicher schwieriger das alles wieder zu richten, selbst größer machen hat nichts gebracht der header ist halb weg.
Nochmals die Frage sollte ich weg von der Tabelle gehen und das mit "Sheet > Row > Cell" machen. Denn die Tabelle hat es mir ja komplett verschoben..! :-\
Zitat von: moonsorrox am 28 Januar 2017, 13:29:17
Nochmals die Frage sollte ich weg von der Tabelle gehen und das mit "Sheet > Row > Cell" machen. Denn die Tabelle hat es mir ja komplett verschoben..! :-\
Du musst nicht wechseln. Alles ist möglich. Du musst nur schauen, was das Verschieben verursacht. Am besten alle class="" erst einmal raus. Weniger ist mehr.
OK ich habe aber gemerkt das <table> sich schwer tut, bis ich das hinformatiert habe bin ich 100... ;)
Ich habe umgestellt auf Row > Cell und stoße jetzt an meine Grenzen.
Vllt. kannst du mal drauf schauen... (ich habe extra in jeder Celle etwas drin stehen da ich nicht weiß ob es sich sonst verschiebt)
Wie du siehst am Screenshot habe ich vier Spalten/Col und 4 Reihen/Row
Ich möchte folgendes erreichen in der Mitte sollen die 4 Cellen beschriftet mit Wert1 - Wert 4 ein Feld ergeben in dem möchte ich ein großes Wetter Icon mit der Schrift/Kondition darunter darstellen, wenn ich das in ein normales Feld bringe schiebt er das ganze Layout auseinander, deshalb also die Frage wie ich das in meinem Code einbaue, meine Versuche scheitern kläglich.. :-\
Evtl reicht es auch schon nur Wert 1/2 zu verbinden und in Wert 3/4 die Schrift/Kondition rein zu bringen. Oder so wie mein Gedanke ist eben alles in die 4 Felder zu bringen..
Formatiert habe ich da noch fast gar nichts und es steht eigentlich schon relativ gut da, ich habe rechts den Wind zweimal drin weil ich da eine leere Cell hatte, aber ich denke das bekommt man noch mit formatieren hin.
Hie rmal mein Code
<li data-row="3" data-col="3" data-sizex="8" data-sizey="5" class="semitransparent3d">
<header>Sheet > Row > Cell</header>
<div class="sheet">
<!-- ============= Reihe 1 =========== -->
<div class="row">
<div class="col">
<div class="row">
<div class="col-1-4">
<div data-type="label" class="cell medium narrow whiter">Temperatur Norden</div>
<div class="cell larger"
data-type="label"
data-device="Temperatur_Norden"
data-get="temperature"
data-limits="[-50,0,10,25,30,40]"
data-colors='["#9999ff","#ffbdff","#aa6900","#ff6900","#ff3333","#ff0000"]'
data-unit="%B0C%0A">
</div>
</div>
<div class="col-1-4">
<div class="cell medium narrow whiter" data-type="label"><big>↑</big>Sonnenaufgang</div>
<div class="cell larger" style="color:#00FA9A" data-type="label" data-device="myTwilight" data-get="sr_civil"></div>
</div>
<div class="col-1-4">
<div class="cell medium narrow whiter" data-type="label"><big>↓</big>Sonnenuntergang</div>
<div class="cell larger" style="color:#2E64FE" data-type="label" data-device="myTwilight" data-get="ss_civil"></div>
</div>
<div class="col-1-4">
<div class="cell medium narrow whiter" data-type="label" >Sichtweite</div>
<div class="cell larger" data-type="label" data-device="MeinWetter" data-get="visibility" data-unit=" km"></div>
</div>
<!-- ============= Reihe 2 =========== -->
<div class="row">
<div class="col-1-4">
<div class="row">
<div class="col">
<div class="cell medium narrow whiter" data-type="label">Feuchte</div>
<div class="cell larger" data-type="label" data-device="Temperatur_Norden" data-get="humidity"
data-limits="[0,40,60]" data-colors='["#9999ff","#aa6900","#ff6900"]' data-unit=" %">
</div>
</div>
</div>
</div>
<div class="col-1-4">
<div data-type="label" class="">Wert 1</div>
</div>
<div class="col-1-4">
<div data-type="label" class="">Wert 2</div>
</div>
<div class="col-1-4">
<div class="row">
<div class="col-1-4">
<div data-type="wind_direction" data-device="MeinWetter" data-direction="wind_direction" data-speed="wind_speed" data-calm="-" data-size="70" data-tickstep="45" data-angleoffset="0"></div>
<div class="cell medium narrow whiter" data-type="label">Wind</div>
</div>
</div>
</div>
</div>
<!-- ============= Reihe 3 =========== -->
<div class="row">
<div class="col-1-4">
<div class="cell medium narrow whiter" data-type="label">Temperatur Süden</div>
<div class="cell larger" data-type="label" data-device="Temperatur_Terrasse" data-get="temperature" data-limits="[-50,0,10,25,30,40]"
data-colors='["#9999ff","#ffbdff","#aa6900","#ff6900","#ff3333","#ff0000"]' data-unit="%B0C%0A">
</div>
</div>
<div class="col-1-4">
<div data-type="label" class="">Wert 3</div>
</div>
<div class="col-1-4">
<div data-type="label" class="">Wert 4</div>
</div>
<div class="col-1-4">
<div class="cell medium narrow whiter" data-type="label">Wind</div>
<div data-type="label" class=""></div>
</div>
</div>
<!-- ============= Reihe 4 =========== -->
<div class="row">
<div class="col-1-4">
<div class="cell medium narrow whiter" data-type="label">Luftdruck<br></div>
<div data-type="label"
data-device="Temperatur_Terrasse"
data-get="pressure"
data-unit=" hPa"
data-limits="[0,950,1000]"
style="display:inline"
data-colors='["#ff9999","#aa6900","#9999ff"]'>
</div>
<div data-type="label" data-device="MeinWetter" data-get="pressure_trend_sym" style="display:inline">
</div>
</div>
<div class="col-1-4">
<div class="cell medium narrow whiter" data-type="label">Regen</div>
<i class="fa fa-umbrella"></i>
<div class="cell larger" style="display:inline" data-type="label" data-device="WetterProplanta"
data-get="fc0_chOfRainDay"
data-unit=" %"
data-limits="[0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100]"
data-colors='["#32AD4F","#3AAB2C","green","green","green","#F6AA1D","green","green","green","green","#F6451D"]'>
</div>
<i class="fa fa-tint"></i>
<div data-type="label" data-device="WetterProplanta"
data-get="rain_day"
data-unit=" l"
data-limits="[0, 2, 5, 7, 10, 15, 20, 25, 30, 40, 50]"
data-colors=["#C0FF3E","#B3EE3A","#9ACD32","#CDC673","#FFA500","#EE9A00","#FF7F50","#FF7256","#EE6A50","#FF3030","#FF0000"]
style="display:inline"
class="cell larger">
</div>
</div>
<div class="col-1-4">
<div class="cell medium narrow whiter" data-type="label">UV-Index</div>
<div class="cell larger" data-type="label" data-device="WetterProplanta" data-get="fc0_uv" data-limits="[0,2,10]" data-colors='["grey","orange","red"]'>
</div>
</div>
<div class="col-1-4">
<div class="cell medium narrow whiter" data-type="label">Frost</div>
<div class="cell top-narrow center" data-type="symbol" data-device="WetterProplanta" data-get="fc0_frost" data-get-off='0' data-get-on='1' data-off-color='#262626'
data-on-color='#9999ff' data-icon="fs-frost">
</div>
</div>
</div>
</div>
<!--div class="col-1-2">
<div data-type="volume" data-device='Volume1' class="" ></div>
</div-->
</div>
</div>
</li>
Das würde ich anders machen
- data-colors=["#C0FF3E",...
muss
data-colors='["#C0FF3E",...
sein. Einmal einfache Hochkomma für das Array und pro Element doppelte Hochkommas
- Wo keine Datenaustausch mit FHEM stattfinden soll, bedarf es auch keines data-type="label" <- für bessere Performance
- Ich kenne viele CSS Klassen nicht: whiter, larger ...
- ich würde alles was untereinander stehen soll, in eine Cell packen
<div class="sheet">
<div class="row">
<div class="cell">
<div data-type="symbol" data-device="dummy1" data-icons='["fa-arrow-up","fa-arrow-right","fa-arrow-down"]' data-on-colors='["#32a054","#6666cc","#ad3333"]' data-get-on='["Wert1","Wert2","Wert3"]' class=""></div>
<div data-type="label" class="small narrow darker">Status</div>
</div>
</div>
</div>
Zitat von: setstate am 29 Januar 2017, 14:06:45
Das würde ich anders machen
- data-colors=["#C0FF3E",...
muss
data-colors='["#C0FF3E",...
sein. Einmal einfache Hochkomma für das Array und pro Element doppelte Hochkommas
ja ist kleiner Fehler von mir, habe ich so nicht gesehen
Zitat von: setstate am 29 Januar 2017, 14:06:45
- Wo keine Datenaustausch mit FHEM stattfinden soll, bedarf es auch keines data-type="label" <- für bessere Performance
einfach weglassen, oder..?
Zitat von: setstate am 29 Januar 2017, 14:06:45
- Ich kenne viele CSS Klassen nicht: whiter, larger ...
von mir angelegt in der xxx-user.css
Zitat von: setstate am 29 Januar 2017, 14:06:45
- ich würde alles was untereinander stehen soll, in eine Cell packen
genau das habe ich probiert, aber diese mit row/col zu versehen ist mir da in der mitte nicht gelungen, war immer alles verschoben...
weiterhin habe ich noch einen Fehler, der hat wohl mit dem Windrichtungsanzeiger zutun..?!
Error
widget_volume.js:231
ReferenceError: Modul_knob is not defined
Hallo,
das beigefügte Bild basiert auf Columns mit definierter Breite. Deren Summe ist 100. Warum kommt dann links und rechts ein so breiter Rand?
</li>
<li data-row="6" data-col="4" data-sizex="4" data-sizey="1">
<div class="row">
<div class="col-12">
<div class="container">
<div data-type="wind_direction"
data-device="WetterProplanta"
data-direction="windDir"
data-speed="wind"
data-calm="-"
data-size="50"
data-tickstep="45"
data-angleoffset="0"></div>
<div class="cell big" data-type="label" data-device="WetterProplanta" data-get="wind" data-unit="km/h" data-fix="0"></div>
</div>
</div>
<div class="col-19">
<div class="container">
<div class="cell big bottom-align" data-type="label"
data-device="WetterProplanta"
data-get="pressure"
data-unit="hPa"
data-fix="0"></div>
<div class="cell" data-type="label">Luftdruck</div>
</div>
</div>
<div class="col-19">
<div class="container">
<div class="cell big bottom-align" data-type="label"
data-device="WetterProplanta"
data-get="humidity"
data-unit="%"
data-fix="0"></div>
<div class="cell" data-type="label">Feuchte</div>
</div>
</div>
<div class="col-19">
<div class="container">
<div class="cell big bottom-align" data-type="label"
data-device="WetterProplanta"
data-get="visibility"
data-unit="km"
data-fix="0"></div>
<div class="cell" data-type="label">Sicht</div>
</div>
</div>
<div class="col-19">
<div class="container">
<div data-type="label" data-icon="J" class="cell weather"></div>
<div data-type="label" data-device="Sun" data-get="Sonnenaufgang" data-part=".*(\d\d:\d\d):\d\d.*" class="cell large narrow"></div>
<div data-type="label" data-device="Sun" data-get="Sonnenuntergang" data-part=".*(\d\d:\d\d):\d\d.*" class="cell large"></div>
</div>
</div>
<div class="col-12">
<div class="container ">
<div data-type="label" data-icon="K" class="cell weather"></div>
<div data-type="label" data-device="WetterProplanta" data-get="fc0_moonRise" class="cell large narrow"></div>
<div data-type="label" data-device="WetterProplanta" data-get="fc0_moonSet" class="cell large"></div>
</div>
</div>
</div>
</li>
Kann mir jemand helfen?
left-space reagiert nicht bei der Kombi sheet -> row> cell auf den text.
Ziel-> Das Denon und TV übereinander sind
Denon:
<section>
<div class="sheet">
<div class="row">
<div class="cell-1-2 left-align[color=red] left-space-2x[/color]" onclick="if ($('#dropavr').is(':hidden')) { $('#dropavr').slideDown(250); $('#dropdownavr > i.fa').addClass('fa-rotate-180'); } else { $('#dropavr').slideUp(250); $('#dropdownavr > i.fa').removeClass('fa-rotate-180'); }"
id="dropdownavr">Denon
<!--i class="fa fa-angle-double-down big cell left-space-3x"></i-->
</div>
<div class="normal cell-1-4 right-align"
data-type="switch"
data-device="TV_02">
</div>
<div class="cell-1-4 normal right-align"
data-type="push"
data-device="Turm"
data-set="ct"
data-set-on="380"
data-icon="fa-paint-brush"
data-off-background-color="#FFFFFF">
</div>
</div>
</div>
</section>
TV:
<section>
<div class="sheet">
<div class="row">
<div class="cell-1-2">
<div data-type="label" class="normal left-align left-space">TV</div>
</div>
<div class="cell-1-4 right-align right-space">
<div data-type="switch"
data-label="Home"
data-device="TV_01"
class="right-space"></div>
<!--div data-type="label" class="normal">1</div-->
</div>
<div class="cell-1-4 right-align">
<div data-type="switch"
data-label="Home"
data-device="TV_01"
class="right-space"></div>
<!--div data-type="label" class="normal right-space">Wohnzimmer</div-->
</div>
</div>
</div>
</section>
Schau doch mal, bei Denen steht ganz viel Müll in Class drin
left-space-2x" onclick="if ($('#dropavr').is(':hidden')) { $('#dropavr').slideDown(250); $('#dropdownavr > i.fa').addClass('fa-rotate-180'); } else { $('#dropavr').slideUp(250); $('#dropdownavr > i.fa').removeClass('fa-rotate-180'); }"
id="dropdownavr">Denon
Das muss alles weg und dann "left-space" rein -> funzt
Habe da leider nicht so viel Müll gesehen :( ich wollte mit " left-space-2x" im Code rot formatieren
Das cell-1-2 auch weg? Da fehlt doch die grössen Angabe?
Also ohne läuft es auch ::)
So funktioniert es:
<div class="sheet">
<div class="row">
<div class="left-align left-space" onclick="if ($('#dropturm').is(':hidden')) { $('#dropturm').slideDown(250); $('#dropdownturm > i.fa').addClass('fa-rotate-180'); } else { $('#dropturm').slideUp(250); $('#dropdownturm > i.fa').removeClass('fa-rotate-180'); }"
id="dropdownturm">Turm
<i class="fa fa-angle-double-down big cell"></i>
</div>
<div class="cell-1-4 normal right-align"
data-type="switch"
data-device="Turm"
data-get="state"
data-get-on="on.*"
data-get-off="off"
data-set-on="on"
data-set-off="off"
data-on-color="#eee"
data-off-color="#eee"
data-on-background-color="#0088CC"
data-off-background-color="#888">
</div>
<div class="right-align right-space"
data-type="push"
data-device="Turm"
data-set="ct"
data-set-on="380"
data-icon="fa-paint-brush"
data-off-background-color="#FFFFFF">
</div>
</div>
</div>
Ein kleines Verständis Problem zu der Positionierung habe ich noch:
Kann man col-2 und col-1-2 zusammen verwenden? Welche WErte kann man nutzen? Alle die in der css vorhanden sind?