stateFormat Text links und rechtsbündig in einer Zeile in der Raumübersicht

[Stelaku]

Hallo alle zusammen

Ich hoffe ich bin im Anfängerbereich nicht komplett falsch. Aber auch nach längerem suche konnte ich keinen anderen Forum Bereich finden in dem meine Frage besser rein gepasst hätte.
Bitte sagt mir bescheid wenn ich das Thema in einen anderen Bereich verschieben soll.

Ich habe in einem DOIF ein stateFormat so erstellt das ich in der Device Übersicht mein gewünschtes Ziel erreiche das der Text linksbündung und rechtsbündig dargestellt wird. Siehe Bild DeviceUebersicht
Wenn ich aber jetzt in die Raumübersicht gehe in der sich das DOIF befindet wird der Text nicht mehr links und rechtsbündig in einer Zeile angezeigt.
Der Text wird jetzt linksbündig und eine Zeile tiefer rechtsbündig dargestellt. Siehe Bild Raumuebersicht.

hier einmal das List vom DOIF mit meinen stateFormat

Code Auswählen Erweitern


Internals:
   DEF        ([ESPEasy_Werkstatt_Zaehler_Zaehler:Count])
(
setreading $SELF Zaehler {([ESPEasy_Werkstatt_Zaehler_Zaehler:Count] + [$SELF:Zaehler,"0"])},
)


   FUUID      619bbfad-f33f-4b4d-4339-ebd59e189609336a
   MODEL      FHEM
   NAME       WerkstattZaehler
   NOTIFYDEV  global,ESPEasy_Werkstatt_Zaehler_Zaehler
   NR         36
   NTFY_ORDER 50-WerkstattZaehler
   STATE      <div style="display:block; text-align:left; float:left;">Aktuelle Leistung</div>
<div style="display:block; text-align:right;">0.30 Watt</div>
<br>
<div style="display:block; text-align:left; float:left;">Total Zähler</div>
<div style="display:block; text-align:right;">0.00 kWh</div>
<br>


   TYPE       DOIF
   VERSION    24905 2021-09-01 18:35:54
   READINGS:
     2021-11-27 13:12:09   Device          ESPEasy_Werkstatt_Zaehler_Zaehler
     2021-11-27 13:12:09   Gesamt          0.002
     2021-11-27 13:12:01   Leistung        0.3
     2021-11-27 13:11:59   Zaehler         2
     2021-11-27 13:11:59   cmd             1
     2021-11-27 13:11:59   cmd_event       ESPEasy_Werkstatt_Zaehler_Zaehler
     2021-11-27 13:11:59   cmd_nr          1
     2021-11-27 13:12:09   e_ESPEasy_Werkstatt_Zaehler_Zaehler_Count 0
     2021-11-26 15:03:48   mode            enabled
     2021-11-27 13:11:59   state           cmd_1
   Regex:
     accu:
     collect:
     cond:
       ESPEasy_Werkstatt_Zaehler_Zaehler:
         0:
           Count      ^ESPEasy_Werkstatt_Zaehler_Zaehler$:^Count:
   attr:
     cmdState:
     wait:
       0:
       1:
         

       2:
         
600
     waitdel:
   condition:
     0          ::ReadingValDoIf($hash,'ESPEasy_Werkstatt_Zaehler_Zaehler','Count')
   do:
     0:
       0            setreading WerkstattZaehler Zaehler {([ESPEasy_Werkstatt_Zaehler_Zaehler:Count] + [WerkstattZaehler:Zaehler,"0"])},
     1:
   helper:
     DEVFILTER  ^global$|^ESPEasy_Werkstatt_Zaehler_Zaehler$
     NOTIFYDEV  global|ESPEasy_Werkstatt_Zaehler_Zaehler
     event      Time: 0,Count: 0
     globalinit 1
     last_timer 0
     sleeptimer -1
     timerdev   ESPEasy_Werkstatt_Zaehler_Zaehler
     timerevent Count: 1,Time: 6026801,Total: 126
     triggerDev ESPEasy_Werkstatt_Zaehler_Zaehler
     timerevents:
       Count: 1
       Time: 6026801
       Total: 126
     timereventsState:
       Count: 1
       Time: 6026801
       Total: 126
     triggerEvents:
       Time: 0
       Count: 0
     triggerEventsState:
       Time: 0
       Count: 0
   internals:
   perlblock:
   readings:
     all         ESPEasy_Werkstatt_Zaehler_Zaehler:Count
   trigger:
   uiState:
   uiTable:
Attributes:
   devStateStyle style=text-align:left;font-weight:bold;color:black
   do         always
   readingList Zaehler
   room       Werkstatt
   setList    Zaehler
   stateFormat <div style="display:block; text-align:left; float:left;">Aktuelle Leistung</div>
<div style="display:block; text-align:right;">[$name:Leistung:r2] Watt</div>
<br>
<div style="display:block; text-align:left; float:left;">Total Zähler</div>
<div style="display:block; text-align:right;">[$name:Gesamt:r2] kWh</div>
<br>


   userReadings Gesamt {
ReadingsVal ($NAME,"Zaehler","0") / 1000
}
   wait       :
:
600


Um mein Ziel zu erreichen habe ich schon so einiges ausprobiert und habe bis jetzt nur eine wie ich finde sehr unschöne Lösung mir zusammengefuscht.
Im Raum Werkstatt befindet sich noch ein weiters DOIF. Dieses habe ich mit einen stateFormat so formatiert, das es einfach 30 Zeichen in der selben Farbe
wie den Hintergrund der Raumübersicht darstellt . Also nicht sichtbar.
Dadurch werden die Felder für die beiden DOIF´s länger und das stateFormat des ersten DOIF funktioniert so wie ich es haben möchte. Siehe Bild hingefuscht.

falls jemand das mal schnell nachstellen möchte hier die raw der beiden Device´s mit der gefuschten Lösung.
als erstes das Werkstatt Zaehler DOIF kopieren. Dann wird es im Raum Werkstatt so angezeigt wie auf dem Bild Raumuebersicht.

Werkstatt Zaehler

Code Auswählen Erweitern


defmod WerkstattZaehler DOIF ([ESPEasy_Werkstatt_Zaehler_Zaehler:Count])\
(\
setreading $SELF Zaehler {([ESPEasy_Werkstatt_Zaehler_Zaehler:Count] + [$SELF:Zaehler,"0"])},\
)\
\

attr WerkstattZaehler devStateStyle style=text-align:left;;font-weight:bold;;color:black
attr WerkstattZaehler do always
attr WerkstattZaehler readingList Zaehler
attr WerkstattZaehler room Werkstatt
attr WerkstattZaehler setList Zaehler
attr WerkstattZaehler stateFormat <div style="display:block;; text-align:left;; float:left;;">Aktuelle Leistung</div>\
<div style="display:block;; text-align:right;;">[$name:Leistung:r2] Watt</div>\
<br>\
<div style="display:block;; text-align:left;; float:left;;">Total Zähler</div>\
<div style="display:block;; text-align:right;;">[$name:Gesamt:r2] kWh</div>\
<br>\
\

attr WerkstattZaehler userReadings Gesamt {\
ReadingsVal ($NAME,"Zaehler","0") / 1000\
}
attr WerkstattZaehler wait :\
:\
600

setstate WerkstattZaehler <div style="display:block;; text-align:left;; float:left;;">Aktuelle Leistung</div>\
<div style="display:block;; text-align:right;;">0.00 Watt</div>\
<br>\
<div style="display:block;; text-align:left;; float:left;;">Total Zähler</div>\
<div style="display:block;; text-align:right;;">0.00 kWh</div>\
<br>\
\

setstate WerkstattZaehler 2021-11-27 13:12:09 Device ESPEasy_Werkstatt_Zaehler_Zaehler
setstate WerkstattZaehler 2021-11-27 13:22:11 Gesamt 0.002
setstate WerkstattZaehler 2021-11-27 13:22:11 Leistung 0
setstate WerkstattZaehler 2021-11-27 13:11:59 Zaehler 2
setstate WerkstattZaehler 2021-11-27 13:11:59 cmd 1
setstate WerkstattZaehler 2021-11-27 13:11:59 cmd_event ESPEasy_Werkstatt_Zaehler_Zaehler
setstate WerkstattZaehler 2021-11-27 13:11:59 cmd_nr 1
setstate WerkstattZaehler 2021-11-27 13:12:09 e_ESPEasy_Werkstatt_Zaehler_Zaehler_Count 0
setstate WerkstattZaehler 2021-11-26 15:03:48 mode enabled
setstate WerkstattZaehler 2021-11-27 13:11:59 state cmd_1



Als zweites jetzt Werkstatt Leistung einfügen. Dann wird es so angezeigt wie ich es haben will. Siehe Bild hingefuscht

Werkstatt Leistung

Code Auswählen Erweitern


defmod WerkstattLeistung DOIF ([ESPEasy_Werkstatt_Zaehler_Leistung:Leistung])\
(setreading WerkstattZaehler Leistung [$SELF:e_ESPEasy_Werkstatt_Zaehler_Leistung_Leistung])\
\
DOELSEIF\
\
([ESPEasy_Werkstatt_Zaehler_Leistung:Leistung] == 0)\
(setreading WerkstattZaehler Leistung 0)
attr WerkstattLeistung devStateStyle style=text-align:left;;font-weight:bold;;color:#F0F0D8
attr WerkstattLeistung do always
attr WerkstattLeistung room Werkstatt
attr WerkstattLeistung stateFormat 123456789012345678901234567890
attr WerkstattLeistung wait :\
600
attr WerkstattLeistung widgetOverride devStateStyle:textField-long

setstate WerkstattLeistung 123456789012345678901234567890
setstate WerkstattLeistung 2021-11-27 13:12:11 Device ESPEasy_Werkstatt_Zaehler_Leistung
setstate WerkstattLeistung 2021-11-27 13:22:11 cmd 2
setstate WerkstattLeistung 2021-11-27 13:22:11 cmd_event ESPEasy_Werkstatt_Zaehler_Leistung
setstate WerkstattLeistung 2021-11-27 13:22:11 cmd_nr 2
setstate WerkstattLeistung 2021-11-27 13:12:11 e_ESPEasy_Werkstatt_Zaehler_Leistung_Leistung 0
setstate WerkstattLeistung 2021-11-26 15:02:06 mode enabled
setstate WerkstattLeistung 2021-11-27 13:22:11 state cmd_2
setstate WerkstattLeistung 2021-11-27 13:22:11 wait_timer no timer



Ich würde dies alles gerne mit den stateFormat des ersten DOIF´s erledigen wenn das denn möglich ist.
Da gibt es bestimmt schönere Lösungen. Würde mich sehr über Tips freuen.

Viele Grüsse

Stephan

Und noch ganz zum Schluss mein verwendeter style ist f18 und mein Fhem ist auf den aktuellen Stand update gestern.

[TomLee]

Eine, von bestimmt vielen Möglichkeiten:

Statt divs eine Tabelle verwenden und die Zellinhalte dann rechts/links ausrichten ?
Habs nicht ausprobiert, gehe aber davon aus das die nicht umgebrochen wird und du dir dann auch das 30 Zeichen lange (edit: in der Farbe angepasste) Konstrukt sparen kannst.

[Damian]

Im DOIF gibt es das Attribut uiTable, bzw. uiState, mit denen man tabellarisch (auch mit ccs-Attribute) seine Werte darstellen kann.

[Stelaku]

Vielen dank für die Tips

Haben mir sehr weitergeholfen.

@TomLee

Der Tip mit der Tabelle war wirklich hilfreich. Nach einiger Suche im Netz ist es mir gelungen mein stateFormat so zu formatieren,
das ich die Gewünschten Werte neben den Devicenamen links wie rechts ausgerichtet angezeigt bekommen habe. Siehe Bild LösungMit_css_stateFormat.
Das stateFormate im DOIF sieht jetzt wie folgt aus.

Code Auswählen Erweitern


<table border="4" width='250px'>
  <tr>
    <th align="left" valign="left">Leistung aktuell</th>
    <th align="right" valign="right">[$name:Leistung] Watt&nbsp;&nbsp;</th>
  </tr>
  <tr>
    <td align="left" valign="left">Gesamt Zähler</td>
    <td align="right" valign="right">[$name:Gesamt:r2] kWh&nbsp;&nbsp;</td>
   </tr>
</table>


Als kleiner goody war auch noch ein Rahmen mit dabei. CSS alles noch ein Buch mit 7 Siegeln . Aber wenns funktioniert ... .

@Damian

uiTable hab ich mich noch überhaupt nicht mit beschäftigt ist aber auch eine klasse Sache.
ich hab da mal ein wenig mit rumprobiert bin aber zu keinem anderen Ergebnis gekommen wie mit diesem
attr WerkstattZaehler uiTable

Code Auswählen Erweitern


"aktuelle Leistung  "|[WerkstattZaehler:Leistung]|"  Watt"
"ZählerTotal  "|[WerkstattZaehler:Gesamt]|"  kWh"


damit bekomme ich auch eine Tabelle. Diese wird aber unter den Devicenamen gebildet und nicht wie ich gerne hätte rechts neben den Devicenamen.
siehe Bild mit_uiTable

Das wird mit DOIF bestimmt auch alles gehen aber da bin ich noch weit von entfernt das zu blicken... .

Vielen dank euch beiden ich glaube die Lösung über stateFormat mit Tabelle gefällt mir schon sehr gut.

Viele Grüsse

Stephan

[Damian]

mit

$TC{1} = "align='right'";

würde man die zweite Spalte rechtsbündig formatieren, siehe:

https://wiki.fhem.de/wiki/DOIF/uiTable_Schnelleinstieg#CSS-Variablen_und_Steuerungsattribute

Edit: Es gibt auch das Attribut uiState für die Statuszeile in einem Perl-DOIF

[TomLee]

Als kleiner goody war auch noch ein Rahmen mit dabei. CSS alles noch ein Buch mit 7 Siegeln . Aber wenns funktioniert ... .

einen Rahmen um alles find ich too much, einen nur unten

Code Auswählen Erweitern

style='border-bottom-style: solid; in jeder Zeile reicht doch auch aus um gut auszusehen, wenn man überhaupt einen braucht 

[Stelaku]

Hallo Damian

Ein paar Tage später und nach wirklich unendlichen Versuchen habe ich es leider noch nicht so richtig mit uitable hinbekommen.
Mit stateFormat habe ich ja mein Ziel schön erreicht aber die Web-Interface Möglichkeiten die Du beim DOIF hinterlegt hast reizen mich schon.

Um die Tabelle mit meinen Leistungs und Zählerdaten im Status angezeigt zu bekommen musste ich ja erstmal mein DOIF auf perl-mode umschreiben.
Was für mich überhaupt nicht so leicht war, und nach gefühlten 1000 Versuchen habe ich es geschaft mein DOIF so umzuschreiben das es macht was vorher
zwei DOIF´s im FHEM-mode gemacht haben. Es ist halt im FHEM mode wie ich persönlich finde einfacher (gewohnter)    .

hier mal eine raw von meinem DOIF

Code Auswählen Erweitern


defmod WerkstattZaehler DOIF Zaehler\
\
{ if ([ESPEasy_Werkstatt_Zaehler_Zaehler:"^Total:.*$"]){\
set_Reading("Zaehler",[ESPEasy_Werkstatt_Zaehler_Zaehler:Count] + [$SELF:Zaehler],1)\
}\
}\
\
Leistung\
\
{ if ([ESPEasy_Werkstatt_Zaehler_Leistung:Leistung] > 0){\
set_Reading("Leistung",[ESPEasy_Werkstatt_Zaehler_Leistung:Leistung],1)\
}\
if ([ESPEasy_Werkstatt_Zaehler_Leistung:Leistung] == 0){\
set_Exec("NullStellung",120,'set_Reading("Leistung","0",1)');;\
}\
}\
\

attr WerkstattZaehler devStateStyle style="text-align:left;;;;font-weight:bold;;;;"
attr WerkstattZaehler do always
attr WerkstattZaehler readingList Zaehler
attr WerkstattZaehler room Werkstatt
attr WerkstattZaehler setList Zaehler
attr WerkstattZaehler stateFormat <table style= "\
border:solid;;;;\
color: black;;;;\
border-width: 4px 8px 8px 4px;;;;">\
<tr>\
    <th align="left" valign="left">Leistung aktuell</th>\
    <th align="right" valign="right">&nbsp;;&nbsp;;&nbsp;;&nbsp;;[$name:Leistung] Watt&nbsp;;&nbsp;;</th>\
  </tr>\
  <tr>\
    <th align="left" valign="left">&nbsp;;</th>\
    <th align="right" valign="right">&nbsp;;</th>\
   </tr>\
   <tr>\
    <th align="left" valign="left">Gesamt Zähler</th>\
    <th align="right" valign="right">[$name:Gesamt:r2] kWh&nbsp;;&nbsp;;</th>\
   </tr>\
</table>
attr WerkstattZaehler uiTable { ## Perlblock für globale Tabellendefinitionen\
$TABLE = "width:250px;;;; height:100px;;;;";;;;\
$TC{0}="align='left'";;;; ## Ausrichtung der ersten Spalte\
$TC{1}="align='right'";;;; ## Ausrichtung der zweiten Spalte\
## die Zelle der ersten Zeile und der ersten Spalte soll rechts eine Rahmenlinie haben\
$TD{0,1}{0} = "style='border-left-style:solid;;;; border-left-width:4px'";;;;\
$TD{1}{0,1} = "style='border-bottom-style:solid;;;; border-botton-width:4px'";;;;\
##$TD{0,1}{0} = "style='border-left-style:solid;;;; border-right-width:4px'";;;;\
##$TD{1}{0} = "style='border-left-style:solid;;;; border-right-width:4px'";;;;\
##$TD{0,1}{0,1} = "style='border:solid;;;; border-width:4px'";;;;\
}\
\
## Tabellendefinition\
\
"&nbsp;;&nbsp;;Leistung"|[WerkstattZaehler:Leistung:d2:"$1 Watt&nbsp;;&nbsp;;"]## erste Tabellenzeile\
\
"&nbsp;;&nbsp;;Gesamt"|[WerkstattZaehler:Gesamt:d2:"$1 kWh&nbsp;;&nbsp;;"] ## zweite Tabellenzeile\

attr WerkstattZaehler userReadings Gesamt {\
ReadingsVal ($NAME,"Zaehler","0") / 1000\
}
attr WerkstattZaehler widgetOverride devStateStyle:textField-long

setstate WerkstattZaehler <table style= "\
border:solid;;;;\
color: black;;;;\
border-width: 4px 8px 8px 4px;;;;">\
<tr>\
    <th align="left" valign="left">Leistung aktuell</th>\
    <th align="right" valign="right">&nbsp;;&nbsp;;&nbsp;;&nbsp;;0 Watt&nbsp;;&nbsp;;</th>\
  </tr>\
  <tr>\
    <th align="left" valign="left">&nbsp;;</th>\
    <th align="right" valign="right">&nbsp;;</th>\
   </tr>\
   <tr>\
    <th align="left" valign="left">Gesamt Zähler</th>\
    <th align="right" valign="right">0.39 kWh&nbsp;;&nbsp;;</th>\
   </tr>\
</table>
setstate WerkstattZaehler 2021-12-01 17:50:56 Device ESPEasy_Werkstatt_Zaehler_Leistung
setstate WerkstattZaehler 2021-12-01 17:52:56 Gesamt 0.39
setstate WerkstattZaehler 2021-12-01 17:52:56 Leistung 0
setstate WerkstattZaehler 2021-12-01 17:50:46 Zaehler 390
setstate WerkstattZaehler 2021-12-01 17:50:56 block_Leistung executed
setstate WerkstattZaehler 2021-12-01 17:50:56 block_Zaehler executed
setstate WerkstattZaehler 2021-12-01 17:50:56 e_ESPEasy_Werkstatt_Zaehler_Leistung_Leistung 0
setstate WerkstattZaehler 2021-12-01 17:50:56 e_ESPEasy_Werkstatt_Zaehler_Zaehler_Count 0
setstate WerkstattZaehler 2021-12-01 17:50:56 e_ESPEasy_Werkstatt_Zaehler_Zaehler_events Cou: 0 Tim: 0 Tot: 390
setstate WerkstattZaehler 2021-12-01 17:50:46 e_WerkstattZaehler_Zaehler 390
setstate WerkstattZaehler 2021-12-01 17:49:33 mode enabled
setstate WerkstattZaehler 2021-12-01 17:49:33 state initialized


Ich hänge jetzt bei den Rahmen den ich gerne um die Tabelle haben möchte. Nicht wundern ist noch alles im uitable. Um es dann finale im state zu haben
brauche ich ja nur alles in das attr uiState kopieren.

Ich komme mit der $TD nicht so richtig klar. Bei meiner jetztigen Einstellung wird ein Rahmen in der Ersten Spalte Erste und zweite Zeile gezogen.

Code Auswählen Erweitern


$TD{0,1}{0} = "style='border-left-style:solid;; border-left-width:4px'";;


das funktioniert auch für sich alleine.
Wenn ich jetzt einen zweiten Rahmen unten in der ersten und zweiten Spalte und zweite Zeile lege wird dieser zwar gezeichnet aber der Rahmen links in Spalte zwei Zeile zwei wird gelöscht.

Code Auswählen Erweitern


$TD{0,1}{0} = "style='border-left-style:solid;; border-left-width:4px'";;
$TD{1}{0,1} = "style='border-bottom-style:solid;; border-botton-width:4px'";;


siehe Bild.

da muss ich bestimmt irgend etwas anders belegen. Habe aber selber auch nach unzähligen Versuchen keine Lösung gefunden.
Würde mich da sehr freuen wenn Du mir weiterhelfen könntest.

Viele Grüsse

Stephan

[Damian]

Du willst doch nur einen Außenrahmen haben, so wie du den in stateFormat definiert hast.

Das Gleiche erreichst du ja, indem du die border-Attribute für die Tabelle setzt und nicht für die einzelnen Zellen:

Code Auswählen Erweitern

defmod tabelle DOIF {}
attr tabelle uiTable {$TABLE = "border:solid;; border-color: black;; border-width: 4px 8px 8px 4px;;"}\
"bla1"|"bla2"\
"bla3"|"bla4"


[Stelaku]

Super da bin ich mal wieder viel zu kompliziert an die Sache herangegangen.
Vielen dank für die schnelle Antwort.
Jetzt funktioniert es auch wie ich es mir vorgestellt habe.

Viele Grüsse

Stephan

[Damian]

Nebenbei.

Man kann die Daten mit geringem Aufwand auch etwas grafisch aufpeppen:

Code Auswählen Erweitern

defmod Werkstattzaehler DOIF {}
attr Werkstattzaehler room test5
attr Werkstattzaehler uiState {package ui_Table}\
"Leistung aktuell"|ring([$SELF:Leistung],0,1200,0,120,'Watt',"100,1")\
"Gesamt Zähler"|ring([$SELF:gesamt],0,1,0,120,'kWh',"100,1",undef,3)\