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
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
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
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.
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.
Im DOIF gibt es das Attribut uiTable, bzw. uiState, mit denen man tabellarisch (auch mit ccs-Attribute) seine Werte darstellen kann.
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.
<table border="4" width='250px'>
<tr>
<th align="left" valign="left">Leistung aktuell</th>
<th align="right" valign="right">[$name:Leistung] Watt </th>
</tr>
<tr>
<td align="left" valign="left">Gesamt Zähler</td>
<td align="right" valign="right">[$name:Gesamt:r2] kWh </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
"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
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
Zitat von: Stelaku am 27 November 2021, 19:08:16
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
style='border-bottom-style: solid; in jeder Zeile reicht doch auch aus um gut auszusehen, wenn man überhaupt einen braucht :P
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
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"> ; ; ; ;[$name:Leistung] Watt ; ;</th>\
</tr>\
<tr>\
<th align="left" valign="left"> ;</th>\
<th align="right" valign="right"> ;</th>\
</tr>\
<tr>\
<th align="left" valign="left">Gesamt Zähler</th>\
<th align="right" valign="right">[$name:Gesamt:r2] kWh ; ;</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\
\
" ; ;Leistung"|[WerkstattZaehler:Leistung:d2:"$1 Watt ; ;"]## erste Tabellenzeile\
\
" ; ;Gesamt"|[WerkstattZaehler:Gesamt:d2:"$1 kWh ; ;"] ## 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"> ; ; ; ;0 Watt ; ;</th>\
</tr>\
<tr>\
<th align="left" valign="left"> ;</th>\
<th align="right" valign="right"> ;</th>\
</tr>\
<tr>\
<th align="left" valign="left">Gesamt Zähler</th>\
<th align="right" valign="right">0.39 kWh ; ;</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.
$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.
$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
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:
defmod tabelle DOIF {}
attr tabelle uiTable {$TABLE = "border:solid;; border-color: black;; border-width: 4px 8px 8px 4px;;"}\
"bla1"|"bla2"\
"bla3"|"bla4"
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
Nebenbei.
Man kann die Daten mit geringem Aufwand auch etwas grafisch aufpeppen:
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)\