update readingsGroup

justme1968 · 14 November 2014, 11:36:31

anbei eine test version mit den folgenden neuen möglichkeiten:

es gibt ein neues flag ! bei der angabe der readings um einen eintrag auch dann anzuzeigen wenn es das reading im device nicht gibt. verwendung z.b. für überschriften, text links, kommandos, ... per commands, valueFormat, valueStyle, valueColumns, ... beeinflussbar. der &nbsp workaround für überschriften mit lesezeichen ist damit nicht mehr nötig, es kann einfach valueFormat verwendet werden. das funktioniert auch in verbindung mit der reading@device variante und in verbindung mit + und ? für internals und attribute. ein beispiel findet sich hier: http://forum.fhem.de/index.php/topic,28855.msg219032.html#msg219032

perl code ist jetzt überall auch in im value eines hash erlaubt: { ... => '{...}' }

neues attribut visibility:
sobald es gesetzt ist gibt es einen kleinen button links neben dem readingsGroup namen. durck klicken lässt sich die readingsGroup ein- und ausklappen. die zur zeit möglichen werte sind:
- hidden -> default ist versteckt
- hideable -> default sichtbar
wenn eine readingsGroup ausgeklappt wird werden alle anderen readingsGroups in der gleichen fhem gruppe zusammengeklappt. damit lässt sich (auch innerhalb des dashboard oder des mehrspaltig modus eine art akkordeon menü bauen. zum stylen muss ich mir noch etwas überlegen.
auf den screenshots ist da ganze (mit drei langweiligen identischen readingsGroups) zu sehen. das > symbol wird in der endgültigen version ein dreieck das je nach zustand nach unten oder rechts zeigt sein.

es gibt ein neues attribut cellStyle:
- 'normale' zeilen und spalten werden mit 1 beginnend gezählt
- die spalte mit den zeilentiteln hat die nummer 0
- perl code hat zugriff auf $ROW und $COLUMN
- als key für den hash lookup kann 'r:#' (zeile nummer #) oder 'c:#' (spalte nummer #) oder 'r:#y,c:#x' (die tabellen zelle in zeile #y und spalte #x) verwendet werden
um die spalte mit den device namen links bündig zu machen also z.b. so etwas: attr <rg> cellStyle { 'c:0' => 'style="text-align:left"' }
oder hiermit: attr <rg> cellStyle {sprintf("style=\"color:#%02X%02X00\"",50+$ROW*50,25+$COLUMN*25)} bekommt man so etwas:
(http://forum.fhem.de/index.php?action=dlattach;topic=25195.0;attach=17392)

gruss
andre

wkarl · 15 November 2014, 21:53:57

Hallo Andre,

bzgl nameStyle wie ist hier die Priorisierung? D.h gewinnt die Definition von nameStyle oder cellStyle?

Mein Verständnis wäre, dass cellStyle sich durchsetzt.

ciao walter

fhainz · 15 November 2014, 22:19:30

Das mit dem Auf/Zuklappen ist wirklich nice!

Meinst du wäre es optional möglich den späteren Button per direkten Aufruf in der readingsGroup darzustellen? Sprich zB in die erste Zeile (Überschrift) zu packen? Hab gerade bemerkt das wenn das noHeading Attribut gesetzt ist, sieht man den Pfeil nicht.

Grüße

justme1968 · 15 November 2014, 23:02:03

@wkarl: ich denke es sollte sich valueStyle durchsetzen. das ist eigentlich spezifischer da es für einen bestimmtes reading oder sogar für einen bestimmten wert eines readings ist. cellStyle ist ist 'genereller' da es zwar für eine bestimme stelle aber für jedes reading das dort steht ist.

ich denke in der praxis ist vermutlich die schwelle so etwas direkt per css file zu machen erreicht wenn die priorisierung in der readingsGroup probleme macht.

ich will aber sowieso noch die möglichkeit per css file zu stylen etwas vereinfachen.

@fhainz:ja. das kommt. als zwei zusätzliche mögliche werte collapsed und collapsible bevor ich das einbaue will ich die css geschichte fertig haben weil ich das in verbindung mit diesen widgets wie auf dem screenshot hier: http://forum.fhem.de/index.php/topic,27291.msg202299.html#msg202299 haben möchte. die widgets würden dann bis auf die jeweilige titelzeile zusammenklappen und in der zitelzeile würde neben dem namen noch eine art zusammenfassung stehen. d.h. man könnte z.b. eine ganze reihe der heizungs widgets in eine spalte packen und bei jedem eine zusammenfassung sehen. wenn man etwas verstellen will kann man eines aufklappen und einstellen.

gruss
andre

wkarl · 15 November 2014, 23:19:29

Hallo Andre,

nicht valueStyle, ich sprach von nameStyle. Für das erstere sehe ich das auch so, bei nameStyle bestimme ich ja das Aussehen der 1. Reihe und 1. Spalte. Mit cellStyle werde ich spezifischer, dann müsste dies sich durchsetzen!??!

ciao walter

fhainz · 15 November 2014, 23:21:14

Das klingt echt super. Freu mich schon darauf!

Was das stylen angeht, das geht jetzt schon ziemlich gut.
Ich hab alle meine Devices in ReadingsGroups gepackt die mir zusätzlich einige Readings anzeigen. Wenn ich im Smallscreen (iPhone) diese ReadingsGroup ansehe, wird im Horizontalen Modus nur der Name und das Icon angezeigt. Wenn ich das iPhone drehe zeigt es mir die gleichen Infos wie im Web. Die Plots werden auch nur im vertikalen Modus angezeigt.

In der ReadingsGroup wird style auf zB

Code Auswählen

class="block wide rgBreit"
gesetzt.

Das dazugeörige CSS für die Device Group:

Code Auswählen

/*  Device Readings Groups */
table.rgBreit tr td{ text-align: center; }
table.rgBreit tr:first-child td:nth-child(2){ text-align: center; }
table.rgBreit tr td:first-child{ width: 45px; text-align: center; }
table.rgBreit tr td:nth-child(2){ width: 33%; text-align: left; }
table.rgBreit tr td:nth-child(3){ width: 15%; }
table.rgBreit tr td:nth-child(4){ width: 15%; }
table.rgBreit tr td:nth-child(5){ width: 15%; }

In der smallscreen.css kann man dann mit

Code Auswählen

@media all and (orientation:landscape) { weiterer css code }
bzw

Code Auswählen

@media all and (orientation:portrait) { weiterer css code }
die überflüssigen spalten ein/ausblenden

Grüße

justme1968 · 15 November 2014, 23:23:08

ich kann dir gerade nicht sagen ob ich hier konsequent auf die priorität geachtet habe. ich hoffe es ist jedenfalls konsistent. versuch es einfach mal.

ich würde aber sagen nimm cellStyle und vergiss nameStyle oder nimm für die überschriften die das neue ! flag und valueStyle zum formatieren.

nameStyle war schon immer etwas stiefkind mit weniger möglichkeiten.

gruss
andre

justme1968 · 15 November 2014, 23:28:42

@fhaiz: das gefällt mir. das gehört ins wiki

da soll noch mal jemand sagen wie brauchen ein neues frontend...

es geht viel mehr als die meisten wissen. es ist nur oft noch zu umständlich umzusetzen.

gruß
andre

fhainz · 15 November 2014, 23:39:47

Ich habe schon vor einen Wiki-Artikel darüber zu schreiben nur ... du kennst das ja

Aber ich werd mich mal dahinter klemmen!

Zitat von: justme1968 am 15 November 2014, 23:28:42
da soll noch mal jemand sagen wie brauchen ein neues frontend...

sehe ich genauso. mit fhemweb, ReadingsGroup und css ist da sehr viel möglich. Das mit dem ausklappbaren inhalt war schon immer ein traum

auf dieser (traum) liste steht nur mehr sowas wie eine readingsgroup gruppe die mehrere readingsgroups in einem tab gesteuerten table anzeigt. aber das ist ein anderes thema

Grüße

fhainz · 16 November 2014, 13:31:55

Wiki-Artikel ist fertig

http://www.fhemwiki.de/wiki/ReadingsGroup#readingsGroup_Styling_mit_CSS

Grüße

igami · 16 November 2014, 13:57:43

Sieht sehr schick aus, besonders da mit dem Portrait/Landscape Modus gefällt mir. Da lässt sich doch einiges machen.

justme1968 · 16 November 2014, 18:46:55

@fhainz: sehr schön. danke

RoBra81 · 18 November 2014, 12:54:22

Hallo,

eine Frage: ist es denn mit der neuen Version irgendwie möglich, ein Colspan für ein Icon zu definieren?

Ronny

justme1968 · 18 November 2014, 13:12:35

mit dem neuen ! flag.

mit ...,!xyz,... zeigst du ein reading xyz an das es eigentlich nicht gibt. dieses kannst du aber wie ein normales reading per valueIcon auf ein icon mappen und per valueColumns colspan setzen.

gruss
andre

RoBra81 · 18 November 2014, 14:10:47

Funktioniert leider nicht: ich kann das mit !xyz definierte Reading zwar über mehrere Spalten strecken, aber sobald ich ihm ein Icon zuweise, ist es wieder nur eine Spalte breit...