Moin!
Ich mal wieder :(
Da ich ja grade meine Tablet UI etwas schicker und frauenfreundlicher gestalten möchte, bleib ich wieder hängen dabei, eine vernünftige Formatierung hinzubekommen.
Es geht einfach nur um die Uhrzeit der Preisänderung vom Super E5
Hier mal das RAW der Tankstelle:
defmod TankstelleAralHX HTTPMOD http://www.clever-tanken.de/tankstelle_details/10884 600
attr TankstelleAralHX alias AralHX
attr TankstelleAralHX enableControlSet 1
attr TankstelleAralHX event-on-change-reading .*
attr TankstelleAralHX group Benzinpreis
attr TankstelleAralHX icon gasoline
attr TankstelleAralHX reading01Name SuperE5
attr TankstelleAralHX reading01Regex "current-price-3">(\d.\d{2})
attr TankstelleAralHX reading02Name SuperPlus
attr TankstelleAralHX reading02Regex "current-price-4">(\d.\d{2})
attr TankstelleAralHX readingsName_aktZeit aktZeit
attr TankstelleAralHX readingsRegex_aktZeit Letzte Aktualisierung: ((31|30|[012]\d|\d)\.(0\d|1[012]|\d)\.(\d{1,6}) ([01]?\d|2[0-3]):([0-5]?\d))
attr TankstelleAralHX room Spritpreise
attr TankstelleAralHX stateFormat {sprintf("SuperE5: %.2f € - SuperPlus: %.2f €",ReadingsVal("TankstelleAralHX","SuperE5",0),ReadingsVal("TankstelleAralHX","SuperPlus",0))}
attr TankstelleAralHX timeout 5
setstate TankstelleAralHX SuperE5: 1.87 € - SuperPlus: 2.07 €
setstate TankstelleAralHX 2020-12-03 05:16:56 Diesel 1.189
setstate TankstelleAralHX 2020-12-03 05:16:56 SuperE10 1.339
setstate TankstelleAralHX 2023-01-04 03:43:15 SuperE5 1.87
setstate TankstelleAralHX 2023-01-04 03:43:15 SuperPlus 2.07
setstate TankstelleAralHX 2023-01-04 03:43:15 aktZeit-1 04.01.2023 03:03
setstate TankstelleAralHX 2023-01-04 03:43:15 aktZeit-2 04
setstate TankstelleAralHX 2023-01-04 03:43:15 aktZeit-3 01
setstate TankstelleAralHX 2023-01-04 03:43:15 aktZeit-4 2023
setstate TankstelleAralHX 2023-01-04 03:43:15 aktZeit-5 03
setstate TankstelleAralHX 2023-01-04 03:43:15 aktZeit-6 03
setstate TankstelleAralHX 2020-12-03 04:57:54 attrTemplateVersion 20201129
setstate TankstelleAralHX 2023-01-04 03:13:14 statSuperE5Day Min: 1.870 Avg: 1.870 Max: 1.870
setstate TankstelleAralHX 2023-01-03 23:59:55 statSuperE5DayLast Min: 1.750 Avg: 1.823 Max: 1.950
setstate TankstelleAralHX 2023-01-04 03:13:14 statSuperE5Hour Min: 1.870 Avg: 1.870 Max: 1.870
setstate TankstelleAralHX 2023-01-04 02:59:55 statSuperE5HourLast Min: 1.870 Avg: 1.870 Max: 1.870
setstate TankstelleAralHX 2023-01-04 03:13:14 statSuperE5Month Min: 1.710 Avg: 1.811 Max: 1.950
setstate TankstelleAralHX 2022-12-31 23:59:55 statSuperE5MonthLast Min: 1.630 Avg: 1.761 Max: 1.950
setstate TankstelleAralHX 2023-01-04 03:13:14 statSuperE5Year Min: 1.710 Avg: 1.811 Max: 1.950
setstate TankstelleAralHX 2022-12-31 23:59:55 statSuperE5YearLast Min: 1.610 Avg: 1.931 Max: 2.330
setstate TankstelleAralHX 2023-01-04 03:13:14 statSuperPlusDay Min: 2.07 Avg: 2.07 Max: 2.07
setstate TankstelleAralHX 2023-01-03 23:59:55 statSuperPlusDayLast Min: 1.95 Avg: 2.02 Max: 2.15
setstate TankstelleAralHX 2023-01-04 03:13:14 statSuperPlusHour Min: 2.07 Avg: 2.07 Max: 2.07
setstate TankstelleAralHX 2023-01-04 02:59:55 statSuperPlusHourLast Min: 2.07 Avg: 2.07 Max: 2.07
setstate TankstelleAralHX 2023-01-04 03:13:14 statSuperPlusMonth Min: 1.91 Avg: 2.01 Max: 2.15
setstate TankstelleAralHX 2022-12-31 23:59:55 statSuperPlusMonthLast Min: 1.83 Avg: 1.96 Max: 2.15
setstate TankstelleAralHX 2023-01-04 03:13:14 statSuperPlusYear Min: 1.91 Avg: 2.01 Max: 2.15
setstate TankstelleAralHX 2022-12-31 23:59:55 statSuperPlusYearLast Min: 1.81 Avg: 2.13 Max: 2.53
Und hier noch das List vom Device:
Internals:
BUSY 0
DEF http://www.clever-tanken.de/tankstelle_details/10884 600
FUUID 5fc86a53-f33f-4afb-82ac-a2f47aea23311be5
Interval 600
MainURL http://www.clever-tanken.de/tankstelle_details/10884
ModuleVersion 4.1.14 - 19.8.2022
NAME TankstelleAralHX
NOTIFYDEV global
NR 163
NTFY_ORDER 50-TankstelleAralHX
STATE SuperE5: 1.87 € - SuperPlus: 2.07 €
TYPE HTTPMOD
eventCount 1
value
CompiledRegexes:
HTTPCookieHash:
csrftoken;:
Name csrftoken
Options expires=Wed, 03 Jan 2024 02:53:14 GMT; Max-Age=31449600; Path=/; SameSite=Lax
Path
Value kJ3sUkggXYKq40HcQcy2mCbl9plpKTAoucpvHXez6IcCEbZCvjp8vxMwl88lQ4CF
HttpUtils:
NAME
addr https://www.clever-tanken.de:443
auth 0
code 200
compress 1
conn
data
displayurl https://www.clever-tanken.de/tankstelle_details/10884
header Cookie: csrftoken=kJ3sUkggXYKq40HcQcy2mCbl9plpKTAoucpvHXez6IcCEbZCvjp8vxMwl88lQ4CF
host www.clever-tanken.de
httpheader HTTP/1.1 200 OK
Date: Wed, 04 Jan 2023 02:53:14 GMT
Server: Apache/2.4.29 (Ubuntu)
Vary: Cookie,Accept-Encoding
Content-Encoding: gzip
Content-Type: text/html; charset=utf-8
Set-Cookie: csrftoken=kJ3sUkggXYKq40HcQcy2mCbl9plpKTAoucpvHXez6IcCEbZCvjp8vxMwl88lQ4CF; expires=Wed, 03 Jan 2024 02:53:14 GMT; Max-Age=31449600; Path=/; SameSite=Lax
Connection: close
httpversion 1.0
hu_blocking 0
hu_filecount 1
hu_port 443
hu_portSfx
ignoreredirects 1
loglevel 4
path /tankstelle_details/10884
protocol https
redirects 0
timeout 5
url https://www.clever-tanken.de/tankstelle_details/10884
sslargs:
QUEUE:
READINGS:
2020-12-03 05:16:56 Diesel 1.189
2020-12-03 05:16:56 SuperE10 1.339
2023-01-04 03:53:15 SuperE5 1.87
2023-01-04 03:53:15 SuperPlus 2.07
2023-01-04 03:53:15 aktZeit-1 04.01.2023 03:03
2023-01-04 03:53:15 aktZeit-2 04
2023-01-04 03:53:15 aktZeit-3 01
2023-01-04 03:53:15 aktZeit-4 2023
2023-01-04 03:53:15 aktZeit-5 03
2023-01-04 03:53:15 aktZeit-6 03
2020-12-03 04:57:54 attrTemplateVersion 20201129
2023-01-04 03:13:14 statSuperE5Day Min: 1.870 Avg: 1.870 Max: 1.870
2023-01-03 23:59:55 statSuperE5DayLast Min: 1.750 Avg: 1.823 Max: 1.950
2023-01-04 03:13:14 statSuperE5Hour Min: 1.870 Avg: 1.870 Max: 1.870
2023-01-04 02:59:55 statSuperE5HourLast Min: 1.870 Avg: 1.870 Max: 1.870
2023-01-04 03:13:14 statSuperE5Month Min: 1.710 Avg: 1.811 Max: 1.950
2022-12-31 23:59:55 statSuperE5MonthLast Min: 1.630 Avg: 1.761 Max: 1.950
2023-01-04 03:13:14 statSuperE5Year Min: 1.710 Avg: 1.811 Max: 1.950
2022-12-31 23:59:55 statSuperE5YearLast Min: 1.610 Avg: 1.931 Max: 2.330
2023-01-04 03:13:14 statSuperPlusDay Min: 2.07 Avg: 2.07 Max: 2.07
2023-01-03 23:59:55 statSuperPlusDayLast Min: 1.95 Avg: 2.02 Max: 2.15
2023-01-04 03:13:14 statSuperPlusHour Min: 2.07 Avg: 2.07 Max: 2.07
2023-01-04 02:59:55 statSuperPlusHourLast Min: 2.07 Avg: 2.07 Max: 2.07
2023-01-04 03:13:14 statSuperPlusMonth Min: 1.91 Avg: 2.01 Max: 2.15
2022-12-31 23:59:55 statSuperPlusMonthLast Min: 1.83 Avg: 1.96 Max: 2.15
2023-01-04 03:13:14 statSuperPlusYear Min: 1.91 Avg: 2.01 Max: 2.15
2022-12-31 23:59:55 statSuperPlusYearLast Min: 1.81 Avg: 2.13 Max: 2.53
REQUEST:
context reading
data
header
ignoreredirects 0
num unknown
priority 1
retryCount 0
type update
url https://www.clever-tanken.de/tankstelle_details/10884
defptr:
readingBase:
SuperE5 reading
SuperPlus reading
aktZeit-1 reading
aktZeit-2 reading
aktZeit-3 reading
aktZeit-4 reading
aktZeit-5 reading
aktZeit-6 reading
readingNum:
SuperE5 01
SuperPlus 02
aktZeit-1 _aktZeit
aktZeit-2 _aktZeit
aktZeit-3 _aktZeit
aktZeit-4 _aktZeit
aktZeit-5 _aktZeit
aktZeit-6 _aktZeit
readingOutdated:
readingSubNum:
aktZeit-1 -1
aktZeit-2 -2
aktZeit-3 -3
aktZeit-4 -4
aktZeit-5 -5
aktZeit-6 -6
requestReadings:
update:
SuperE5 reading 01
SuperPlus reading 02
aktZeit-1 reading _aktZeit-1
aktZeit-2 reading _aktZeit-2
aktZeit-3 reading _aktZeit-3
aktZeit-4 reading _aktZeit-4
aktZeit-5 reading _aktZeit-5
aktZeit-6 reading _aktZeit-6
helper:
_98_statistics SpritpreiseStatistik
Attributes:
alias AralHX
enableControlSet 1
event-on-change-reading .*
group Benzinpreis
icon gasoline
reading01Name SuperE5
reading01Regex "current-price-3">(\d.\d{2})
reading02Name SuperPlus
reading02Regex "current-price-4">(\d.\d{2})
readingsName_aktZeit aktZeit
readingsRegex_aktZeit Letzte Aktualisierung: ((31|30|[012]\d|\d)\.(0\d|1[012]|\d)\.(\d{1,6}) ([01]?\d|2[0-3]):([0-5]?\d))
room Spritpreise
stateFormat {sprintf("SuperE5: %.2f € - SuperPlus: %.2f €",ReadingsVal("TankstelleAralHX","SuperE5",0),ReadingsVal("TankstelleAralHX","SuperPlus",0))}
timeout 5
So, ich möchte jetzt einfach nur die Uhrzeit in einer Reihe haben.
Leider wird das Datum samt Zeit komplett angezeigt (Reading aktZeit-1).
Nun breche ich mir einen dabei ab, mit einem simplen Userreading (reicht vollkommen) das aktZeit-1 Reading auf die reine Uhrzeit zu kürzen....
Könnte mir dabei bitte wieder jemand helfen?
Danke!
Zitat von: B.Stromberg am 04 Januar 2023, 03:57:28
Internals:
NAME TankstelleAralHX
2023-01-04 03:53:15 aktZeit-1 04.01.2023 03:03
So, ich möchte jetzt einfach nur die Uhrzeit in einer Reihe haben.
Vielleicht mal als Anregung in der Richtung:
my $reading = ReadingsVal("TankstelleAralHX,"aktZeit-1","01.01.0001 00:00")
my $uhrzeit = substr ($reading,11,5)bzw. vom Ende des Strings her betrachtet:
my $reading = ReadingsVal("TankstelleAralHX,"aktZeit-1","01.01.0001 00:00")
my $uhrzeit = substr ($reading,-5)Oder über split am Leerzeichen in zwei Teile ausfteilen.
Zitat von: B.Stromberg am 04 Januar 2023, 03:57:28
So, ich möchte jetzt einfach nur die Uhrzeit in einer Reihe haben.
Ich vermute mal, dass es ausschließlich um die Anzeige in FTUI geht, oder ?
Wenn ja, bräuchtest Du eigentlich kein userReading ...
Hilfreich wäre, wenn Du noch den passenden HTML-Block zeigen würdest ...
Kann man das nicht einfach in HTTPMOD mit readingxxOExpr lösen?
Das ist doch genau dafür gedacht, die ermittelten Ergebnisse zu modifizieren.
Zitat von: betateilchen am 04 Januar 2023, 09:33:00
Kann man das nicht einfach in HTTPMOD mit readingxxOExpr lösen?
Das ist doch genau dafür gedacht, die ermittelten Ergebnisse zu modifizieren.
Wenn einem das Datum grundsätzlich egal wäre, könnte man auch das angesprochene Attribut nutzen oder legt unter mehrmaligen Einsatz des Attributes direkt Reading aktDatum-X (nur Datum) bzw. AktZeit-X (nur Zeit) an.
Wenn es nur in FTUI egal wäre, dann gäbe es dort das notwendige Attribut zum "Ausschneiden".
Moin Jungs!
Danke für die Antworten schon mal:
Ja, es geht eigentlich "nur" um die FTUI.
Code für eine Tankstelle sieht dann so aus:
<tr>
<td><div data-type="label" data-device="TankstelleQ1Polle" data-get="SuperE5" data-pre-text="Q1 Polle (" data-post-text=" €)" class="big inline left"></div></td>
<td><div data-type="label" data-device="TankstelleQ1Polle" data-get="Uhrzeit" data-unit=" Uhr" class="big inline right"></div></td>
</tr>
Denke aber, es geht auch mit dem RegEx in der fhem.cfg? Steige da nur nicht durch.
attr TankstelleQ1Polle readingsName_aktZeit aktZeit
attr TankstelleQ1Polle readingsRegex_aktZeit Letzte Aktualisierung: ((31|30|[012]\d|\d)\.(0\d|1[012]|\d)\.(\d{1,6}) ([01]?\d|2[0-3]):([0-5]?\d))
Die RegEx holt ja von der Clever Tanken Seite die Daten:
define TankstelleQ1Polle HTTPMOD http://www.clever-tanken.de/tankstelle_details/24806 600
Es gab auch mal eine Seite, wo man das testen konnte, finde die aber nicht mehr.
Komme mir langsam auch etwas "blöd" vor, schon wegen so etwas wahrscheinlich einfachem hier zu fragen...
Naja, sind ja im Anfänger Forum :)
Hi,
Zitatattr TankstelleAralHX readingsRegex_aktZeit Letzte Aktualisierung: ((31|30|[012]\d|\d)\.(0\d|1[012]|\d)\.(\d{1,6}) ([01]?\d|2[0-3]):([0-5]?\d))
liefert doch
Zitat2023-01-04 03:53:15 aktZeit-1 04.01.2023 03:03
2023-01-04 03:53:15 aktZeit-2 04
2023-01-04 03:53:15 aktZeit-3 01
2023-01-04 03:53:15 aktZeit-4 2023
2023-01-04 03:53:15 aktZeit-5 03
2023-01-04 03:53:15 aktZeit-6 03
(der Smily :( kommt vom Doppelpunkt....)
Bin zwar nicht so tief in httpmod drin, denke aber durch ändern der Klammern bekommst Du Dein Ergebnis:
aktZeit-1 scheint die Klammer () um alles zu sein, dann folgen innerhalb die aktZeit-2 für Tag, aktZeit-3 für Monat etc.
Probier doch mal das hier:
Zitatattr TankstelleAralHX readingsRegex_aktZeit Letzte Aktualisierung: ((31|30|[012]\d|\d)\.(0\d|1[012]|\d)\.(\d{1,6}) ([01]?\d|2[0-3]:[0-5]?\d))
Da sind einfach die Klammern um die komplette Uhrzeit statt um Stunde und Minute einzeln.
Vermutlich geht auch das:
Zitatattr TankstelleAralHX readingsRegex_aktZeit Letzte Aktualisierung: 31|30|[012]\d|\d\.0\d|1[012]|\d\.\d{1,6} ([01]?\d|2[0-3]:[0-5]?\d)
dann sollte nur noch die Uhrzeit in vermutlich aktZeit-1 stehen.
Nicht verwirren lassen: evtl werden Readings nicht mehr neu geschrieben, die bleiben dann aber im Device stehen. Du kannst die ja vorher alle löschen und dann eine Abfrage machen, dann stehen nur die neuen da:
Zitatdeletereading TankstelleAralHX aktZeit.*
Versuch mach kluch ;)
Gruß
Sany
Zitat von: Sany am 04 Januar 2023, 13:16:25
Versuch mach kluch ;)
Beide Versuche bringen bei mir das Gleiche Ergebnis in den Readings:
https://ibb.co/PMcsVK9 (https://ibb.co/PMcsVK9)
Hatte mit der Klammerei da auch schon rumgespielt, mit wenig Erfolg...
Mist, es gab mal eine Seite, wo man genau das anhand einer URL testen konnte, dann müsste ich euch hier nicht auf den Geist gehen.
Zitat von: OdfFhem am 04 Januar 2023, 09:47:28
Wenn einem das Datum grundsätzlich egal wäre, könnte man auch das angesprochene Attribut nutzen oder legt unter mehrmaligen Einsatz des Attributes direkt Reading aktDatum-X (nur Datum) bzw. AktZeit-X (nur Zeit) an.
Wenn es nur in FTUI egal wäre, dann gäbe es dort das notwendige Attribut zum "Ausschneiden".
Darf ich dir vielleicht damit auch noch Mal auf die Socken gehen? *liebguck.
"Einfach" kürzen wäre schön wenn ich wüsste wie....
Einige Beispiele für Zugriff auf Teile des Readings "aktZeit-1" in FTUI:
*** Variante #1 mit data-part und Nummer der "Spalte":
data-get="aktZeit-1" data-part="2"
*** Variante #2 mit data-part und regulärem Ausdruck:
data-get="aktZeit-1" data-part=".*\s(.*)"
*** Variante #3 mit data-substitution und regulärem Ausdruck:
data-get="aktZeit-1" data-substitution="s/^(.*\s)//g"
Hi,
versuch mal
((31|30|[012]\d|\d)\.(0\d|1[012]|\d)\.(\d{1,6}) (([01]?\d|2[0-3]):([0-5]?\d)))
Das gibt die Zeit zwar auch einzeln, aber eben auch zusammen.
Warum die erste Version am Doppelpunkt abschneidet kann ich nicht sagen, ich hätte vermutet dass das so klappt.
Die Seite die Du suchst könnte diese sein:
https://regex101.com/ (https://regex101.com/)
und damit rumgespielt:
(?:(?:31|30|[012]\d|\d)\.(?:0\d|1[012]|\d)\.(?:\d{1,6}) ((?:[01]?\d|2[0-3]):(?:[0-5]?\d)))
bringt dann nur noch die Zeit.
ein ?: am Anfang einer Capture-group bedeutet, dass diese nichts ausgibt (aber wohl zum gelingen der Regex beiträgt.)
Gruß
Sany
die Smilies sind wieder vom Doppelpunkt gefolgt von "Klammer zu". Geht wohl nicht beim zitieren. In Code-Tags gehts, nur nicht farbig....
Zwei Beispiele für den (Nur-)Zugriff auf die Uhrzeit der letzten Aktualisierung:
attr TankstelleAralHX readingsName_aktZeit aktZeit
attr TankstelleAralHX readingsRegex_aktZeit Letzte Aktualisierung: \d\d\.\d\d\.\d\d\d\d (\d\d:\d\d)
attr TankstelleAralHX readingsName_aktZeit2 aktZeit2
attr TankstelleAralHX readingsRegex_aktZeit2 Letzte Aktualisierung: \d{2}\.\d{2}\.\d{4} (\d{2}:\d{2})
setstate TankstelleAralHX 2023-01-04 17:23:28 aktZeit 17:22
setstate TankstelleAralHX 2023-01-04 17:23:28 aktZeit2 17:22
Zitat von: OdfFhem am 04 Januar 2023, 16:43:57
Einige Beispiele für Zugriff auf Teile des Readings "aktZeit-1" in FTUI:
*** Variante #1 mit data-part und Nummer der "Spalte":
data-get="aktZeit-1" data-part="2"
*** Variante #2 mit data-part und regulärem Ausdruck:
data-get="aktZeit-1" data-part=".*\s(.*)"
*** Variante #3 mit data-substitution und regulärem Ausdruck:
data-get="aktZeit-1" data-substitution="s/^(.*\s)//g"
Vielen, vielen Dank erneut!
Variante 1 hat schon vollkommen gereicht. Wenn man es sieht, sieht es so simpel aus. Nur wenn man nicht weiß wo, wie und vor allem nach was man suchen muss...
Eine Frage noch ;)
Wie kann man die Größe von data-post-text ändern?
Als Beispiel mal dieses aus der FTUI:
<tr>
<td><div data-type="label" data-device="Tripower10" data-get="Tagesertrag" data-pre-text="PV (" data-post-text=" kW/h)" class="big inline left"></div></td>
<td><div data-type="label" data-device="Tripower10" data-get="state" data-unit=" w" class="big inline right"></div></td>
</tr>Hätte nun gern kW/h sowie W in klein, also exakt so wie es data-unit="xyz" anzeigen würde.
Beim 2. Teil funktioniert das mit data-unit="w".
Nur im ersten Teil bei (" data-post-text=" kW/h)" bekomme ich kW/h nicht klein.
data-post-text-small wäre nun auch wieder zu einfach, oder? ;)
In einem label-Widget geht es nicht, da pre und post mit dem eigentlichen Text verschmolzen werden. Aber ...
<div data-type="label" class="big inline">PV (</div>
<div data-type="label" data-device="ftuitest" data-get="irgendeinReading" data-unit=" kW/h" class="big inline"></div>
<div data-type="label" class="big inline">)</div>
<div data-type="label" data-device="ftuitest" data-get="irgendeinReading" data-unit=" w" class="big"></div>
... s. Screenshot
Zitat von: OdfFhem am 04 Januar 2023, 18:51:18
In einem label-Widget geht es nicht, da pre und post mit dem eigentlichen Text verschmolzen werden. Aber ...
Soweit nicht schlecht!
Jetzt müsste nur noch die 0w bei PV in der rechten Ecke stehen. class inline right hilft da leider nicht....
<tr>
<td><div data-type="label" class="big inline left">PV (</div><div data-type="label" data-device="Tripower10" data-get="Tagesertrag" data-unit=" kW/h" class="big inline left"></div><div data-type="label" class="big inline left">)</div><div data-type="label" data-device="Tripower10" data-get="state" data-unit=" w" class="big inline right"></div>
</tr>
0w steht schon in der rechten Ecke, aber von Spalte #1.
Verlagert man es in die 2.Spalte, steht es ganz rechts.
<tr>
<td><div data-type="label" class="big inline left">PV (</div><div data-type="label" data-device="Tripower10" data-get="Tagesertrag" data-unit=" kW/h" class="big inline left"></div><div data-type="label" class="big inline left">)</div></td>
<td><div data-type="label" data-device="Tripower10" data-get="state" data-unit=" w" class="big inline right"></div></td>
</tr>
Fantastisch!
Möchte mich noch einmal ganz herzlich hier bei allen bedanken.
Ganz besonders bei @OdfFhem, der mich wirklich bei allen Problemen sachlich und fundiert ans Ziel geführt hat.
Hier nun das vorläufige Endergebnis.
Keine Schönheit, aber exakt das, was ich (für meine Frau) haben wollte :)
Zitat von: OdfFhem am 04 Januar 2023, 20:16:30
Verlagert man es in die 2.Spalte, steht es ganz rechts....
Sorry, wenn ich noch einmal nerve.
Wie mache ich es, wenn mehrere Readings in einer Reihe haben möchte? 2 Readings habe ich ja kapiert, nun hätte ich ganz gern hinter den Stromwerten der Wärmepumpe noch die Temperaturen vom Speicher (Oben / Unten)
<tr>
<td><div data-type="label" class="bigger inline left">WP (</div><div data-type="label" data-device="Strom" data-get="StromverbrauchTag" data-fix="1" data-unit=" kWh Tag" class="big inline left"></div><div data-type="label" class="big inline left">)</div></td>
<td><div data-type="label" data-device="SpeicherTemperatur" data-get="SpeicherOben" data-unit="°C" class="inline left"></div></td>
<td><div data-type="label" data-device="SpeicherTemperatur" data-get="DS18B20-3_Temperature" data-unit="°C" class="inline left"></div></td>
<td><div data-type="label" data-device="PulsStrom" data-get="StromAktuell" data-fix="0" data-unit=" w" class="bigger inline right"></div></td>
</tr>Meine bisherigen Versuche, wer hätte es gedacht, waren leider nicht sehr erfolgreich :(
Schön wäre es, wenn die Temperaturwerte zwischen den beiden Watt werten stehen würden.
Ich verstehe nicht, wenn ich diese Readings einfach anhänge, dass dabei dann als Endergebnis so ein Chaos herauskommt....
Zitat von: B.Stromberg am 07 Januar 2023, 02:57:38
Ich verstehe nicht, wenn ich diese Readings einfach anhänge, dass dabei dann als Endergebnis so ein Chaos herauskommt....
Insgesamt hat bei Dir jede Zeile 2 Spalten; bedeutet bei der Verwendung von 4 Spalten in einer Zeile, dass die Tabelle "verunstaltet" wird ...
Für Testzwecke habe ich folgendes HTML-Konstrukt genutzt (s. Screenshot):
<table class="center">
<!-- 1.Zeile ... mit 2 eingefärbten Spalten -->
<tr>
<td><div data-type="label" class="bigger yellow">Dies ist Testtext für Spalte #1</div></td>
<td><div data-type="label" class="bigger green">Dies ist Testtext für Spalte #2</div></td>
</tr>
<!-- 2.Zeile ... 1.Spalte: enthält 1 Wert linksbündig ... 2.Spalte: enthält 1 Wert rechtsbündig -->
<tr>
<td><div data-type="label" class="bigger inline left">WP (</div>
<div data-type="label" data-device="ftuitest" data-get="power7" data-fix="1" data-unit=" kWh Tag" class="bigger inline left"></div>
<div data-type="label" class="bigger inline left">)</div></td>
<td><div data-type="label" data-device="ftuitest" data-get="power6" data-fix="0" data-unit=" w" class="bigger inline right"></div></td>
</tr>
<!-- 3.Zeile ... 1.Spalte: enthält je 1 Wert links- bzw. rechtsbündig ... 2.Spalte: wie 1.Spalte -->
<tr>
<td><div data-type="label" class="bigger inline left">WP (</div>
<div data-type="label" data-device="ftuitest" data-get="power7" data-fix="1" data-unit=" kWh Tag" class="bigger inline left"></div>
<div data-type="label" class="bigger inline left">)</div>
<div data-type="label" data-device="ftuitest" data-get="temperature2" data-unit="°C " class="big inline right"></div></td>
<td><div data-type="label" data-device="ftuitest" data-get="temperature3" data-unit="°C" data-pre-text=" " class="big inline left"></div>
<div data-type="label" data-device="ftuitest" data-get="power6" data-fix="0" data-unit=" w" class="bigger inline right"></div></td>
</tr>
<!-- 4.Zeile ... 1.Spalte: enthält 1 Wert linksbündig und 2 Werte rechtsbündig ... 2.Spalte enthält 1 Wert rechtsbündig -->
<tr>
<td><div data-type="label" class="bigger inline left">WP (</div>
<div data-type="label" data-device="ftuitest" data-get="power7" data-fix="1" data-unit=" kWh Tag" class="bigger inline left"></div>
<div data-type="label" class="bigger inline left">)</div>
<div class="big inline right">
<div data-type="label" data-device="ftuitest" data-get="temperature2" data-unit="°C " class="inline"></div>
<div data-type="label" data-device="ftuitest" data-get="temperature3" data-unit="°C" data-pre-text=" " class="inline"></div>
</div>
</td>
<td><div data-type="label" data-device="ftuitest" data-get="power6" data-fix="0" data-unit=" w" class="bigger inline right"></div></td>
</tr>#
</table>
dient nur zur Abstandhaltung zwischen den beiden Temperaturdarstellungen.
Ist natürlich nur ein Beispiel, aber vielleicht hilft's ...
Zitat von: OdfFhem am 07 Januar 2023, 08:46:49
Ist natürlich nur ein Beispiel, aber vielleicht hilft's ...
Hallo!
Wieder einmal einen herzlichen Dank von mir an dich!
Hat zwar eine Weile gedauert, bis ich verstanden habe, dass die ganzen Daten in table /table reingehören aber OK, so lerne ich wenigstens auch etwas dabei :)
Das Ganze wird jetzt tatsächlich etwas eng mit den 4 Werten in einer Reihe.
Ich nutze zur Visualisierung ein Fire HD 10 Tablet (komplett ent Amazinisiert).
Dort wären auf der rechten Displayseite eigentlich noch gut 5cm Platz.
Gibt es eine Funktion, dass FTUI die komplette Breite ausnutzt?
Ich nutze zur Zeit 9 Zeilen, die müssten dann allerdings auch erhalten bleiben...
Hier nochmal meine komplette html:
<html>
<title>FHEM</title>
<body>
<div class="page" id="1_sonstiges">
<ul>
<div class="left"></div>
<table class="center">
<tr><td><div class="bigger inline left">Aktuell</div></td><td><div data-type="label" data-device="HM2.0" data-get="state" data-unit="W" data-limits='[-9999,0 ]' data-colors='["#FF0000","green"]' class="bigger right"></div></td></tr>
<tr>
<td><div data-type="label" class="bigger inline left">PV (</div><div data-type="label" data-device="Tripower10" data-get="Tagesertrag" data-unit=" kWh Tag" class="big inline left"></div><div data-type="label" class="big inline left">)</div></td>
<td><div data-type="label" data-device="Tripower10" data-get="state" data-unit=" w" class="bigger inline right"></div></td>
</tr>
<tr>
<td><div data-type="label" class="bigger inline left">WP (</div>
<div data-type="label" data-device="Strom" data-get="StromverbrauchTag" data-fix="1" data-unit=" kWh Tag" class="bigger inline left"></div>
<div data-type="label" class="bigger inline left">)</div>
<div data-type="label" data-device="SpeicherTemperatur" data-get="SpeicherOben" data-unit="°C " class="inline right"></div></td>
<td><div data-type="label" data-device="SpeicherTemperatur" data-get="DS18B20-3_Temperature" data-unit="°C" data-pre-text=" " class="inline left"></div>
<div data-type="label" data-device="PulsStrom" data-get="StromAktuell" data-fix="0" data-unit=" w" class="bigger inline right"></div></td>
</tr>
<tr><td><div data-type="label" data-device="Waschmaschine" data-get="ENERGY_Power" data-pre-text="Waschmaschine (" data-post-text=" W)" class="big inline left"></div></td><td><div data-type="label" data-device="Waschmaschine" data-get="ENERGY_Power" data-substitution='["^([0-4]|[0-4][\\.,][\\d]*)$","fertig","^[0-9]*[\\.,]?[\\d]*$","waescht"]' data-limits-part="(\d*).*" data-limits='[0,5]' data-colors='["green","#FF0000"]' class="big right"></div></td></tr>
<tr><td><div data-type="label" data-device="Trockner" data-get="ENERGY_Power" data-pre-text="Trockner (" data-post-text=" W)" class="big inline left"></div></td><td><div data-type="label" data-device="Trockner" data-get="ENERGY_Power" data-substitution='["^([0-4]|[0-4][\\.,][\\d]*)$","fertig","^[0-9]*[\\.,]?[\\d]*$","trocknet"]' data-limits-part="(\d*).*" data-limits='[0,5]' data-colors='["green","#FF0000"]' class="big right"></div></td></tr>
<tr><td><div data-type="label" data-device="Spuelmaschine" data-get="ENERGY_Power" data-pre-text="Spuelmaschine (" data-post-text=" W)" class="big inline left"></div></td><td><div data-type="label" data-device="Spuelmaschine" data-get="ENERGY_Power" data-substitution='["^([0-4]|[0-4][\\.,][\\d]*)$","fertig","^[0-9]*[\\.,]?[\\d]*$","spuelt"]' data-limits-part="(\d*).*" data-limits='[0,5]' data-colors='["green","#FF0000"]' class="big right"></div></td></tr>
<tr>
<td><div data-type="label" data-device="TankstelleStar" data-get="SuperE5" data-pre-text="Star (" data-post-text=" €)" class="big inline left"></div></td>
<td><div data-type="label" data-device="TankstelleStar" data-get="aktZeit-1" data-part="2" data-unit=" Uhr" class="big inline right"></div></td>
</tr>
<tr>
<td><div data-type="label" data-device="TankstelleQ1Polle" data-get="SuperE5" data-pre-text="Q1 Polle (" data-post-text=" €)" class="big inline left"></div></td>
<td><div data-type="label" data-device="TankstelleQ1Polle" data-get="aktZeit-1" data-part="2" data-unit=" Uhr" class="big inline right"></div></td>
</tr>
<tr>
<td><div data-type="label" data-device="myABFALL" data-get="next_text" data-limits='["Grüne .*","Gelbe .*","Blaue .*","Graue .*"]' data-colors='["#2d9e1c","#F4E946","#4651F4","#696969"]' class="big inline left"></div></td>
<td><div data-type="label" data-device="myABFALL" data-get="next_weekday" data-limits-get="next_text" data-limits='["Grüne .*","Gelbe .*","Blaue .*","Graue .*"]' data-colors='["#2d9e1c","#F4E946","#4651F4","#696969"]' class="big inline right"></div></td>
</tr>
</table>
</ul>
</div>
</div>
</body>
</html>
Und wie es zur Zeit aussieht.
Zitat von: B.Stromberg am 07 Januar 2023, 17:24:43
Gibt es eine Funktion, dass FTUI die komplette Breite ausnutzt?
Ein paar Erkenntnisse:
- keine besonderen Angaben im <table>-Element sorgen für "Kleben am oberen linken Rand" ... nur soviel Platz wie nötig
- <table class="center"> sorgt für zentrierte Darstellung ... nur soviel Platz wie nötig
- <table class="fullsize"> sorgt für 100% Höhe und 100% Breite ... soviel Platz wie verfügbar
- wenn man z.B. nur die Breite vergrößern möchte, kann man noch auf das style-Attribut zurückgreifen ...
Zitat von: OdfFhem am 07 Januar 2023, 19:49:19
- <table class="fullsize"> sorgt für 100% Höhe und 100% Breite ... soviel Platz wie verfügbar
- wenn man z.B. nur die Breite vergrößern möchte, kann man noch auf das style-Attribut zurückgreifen ...
table class="fullsize" macht es tatsächlch etwas breiter.
Allerdings sind da immer noch gut 3cm Platz in der Breite, was wegen der Übersichtlichkeit eigentlich schade wäre zu verschenken.
Mit style meinst du CSS Klassen?
Zitat von: B.Stromberg am 07 Januar 2023, 20:01:12
table class="fullsize" macht es tatsächlch etwas breiter.
Allerdings sind da immer noch gut 3cm Platz in der Breite, was wegen der Übersichtlichkeit eigentlich schade wäre zu verschenken.
Mit style meinst du CSS Klassen?
fullsize arbeitet mit den css-Eigenschaften width und height ... jeweils 100%:
- Bei mir passt nichts mehr zwischen die vier Seitenränder und die Tabelle ...
- Bei Dir scheint irgendwas den rechten Rand zu blockieren ...
style ist ein Attribut, mit dem man alle möglichen css-Eigenschaften festlegen kann:
- <table style="height:100%; width:100%;"> hätte dieselbe Auswirkung wie <table class="fullsize">
- <table style="height:50%; width:100%;"> sorgt für komplette Breite und 50% Höhe
- es wird auf jeden Fall immer nur der noch verfügbare Platz ausgenutzt
Oh Mann, bin ich blöd..... :(
Ich habe doch noch das Seitenmenü vom FTUI. Ist mir nicht aufgefallen, weil ich in die Readings gezoomt habe und das auch so gespeichert wird.
Gibt es eine Möglichkeit bei der Übersichtsseite #1_sonstiges (das ist die Seite, die ich dann auf dem Tablet darstelle) das Seitenmenü wegzulassen?
hier mal meine index.html:
<!DOCTYPE html>
<html>
<head>
<!--
/* FHEM tablet ui */
/*
* Just another dashboard for FHEM
*
* Version: 1.3.5
* Requires: jQuery v1.7+, font-awesome, jquery.gridster, jquery.toast
* URL: https://github.com/knowthelist/fhem-tablet-ui
*
* Copyright (c) 2015 Mario Stephan <mstephan@shared-files.de>
* Under MIT License (http://www.opensource.org/licenses/mit-license.php)
*
* - create a new folder named 'tablet' in /<fhem-path>/www
* - copy all files incl. sub folders into /<fhem-path>/www/tablet
* - add 'define tablet_ui HTTPSRV tablet ./www/tablet Tablet Frontend' in fhem.cfg
* - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet/
* -
* - Tablet Acer Iconia One 10 B3-A20: 10 Zoll 1280x800 1 GB Quad Core 1,3 GHz 16GB
* - Breite: 9 Felder / Höhe: 5 Felder
* - <meta name="widget_base_width" content="138">
* - <meta name="widget_base_height" content="155">
* - Denver TAD-70112 WiFi: 7 Zoll 800x480 512 MB Dualcore 1,3 GHz 8GB
* - Breite: 7 Felder / Höhe: 5 Felder
* - <meta name="widget_base_width" content="144">
* - <meta name="widget_base_height" content="112">
* - IPhone 5s: 4 Zoll 1136 × 640 Dualcore 1 GB 1,3 GHz 64GB
* - Breite: 7 Felder / Höhe: 5 Felder
<meta name="widget_base_width" content="154">
<meta name="widget_base_height" content="142">
*/
#1920x1080
<meta name="shortpoll_filter" content=".*">
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="widget_base_width" content="42">
<meta name="widget_base_height" content="43">
<meta name="gridster_cols" content="30">
<meta name="gridster_rows" content="18">
<meta name="web_device" content="WEB">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="gridster_disable" content="0">
<meta name="widget_margin" content="1">
<meta name="longpoll" content="1">
<meta name="longpoll_type" content="websocket">
<meta name="longpoll_filter" content=".*">
<meta name="debug" content="2">
<meta name="toast" content="2">
<link rel="stylesheet" href="lib/jquery.gridster.min.css" />
<link rel="stylesheet" href="css/fhem-tablet-ui.css" />
<link rel="stylesheet" href="lib/font-awesome.min.css" />
<link rel="stylesheet" href="lib/jquery.toast.min.css" />
<link rel="stylesheet" href="css/fhem-tablet-ui-wdtimer.css" />
<!-- define your personal style here, it wont be overwritten -->
<!-- link rel="stylesheet" href="css/fhem-green-ui.css" / -->
<link rel="stylesheet" href="/lib/powerange.min.css" />
<!--<link rel="stylesheet" href="/lib/openautomation.css" />-->
<!--<link rel="stylesheet" href="/fhem/tablet10test/eigenefonts/gk/style.css">-->
<link rel="stylesheet" href="/lib/material-icons.css" />
<link rel="stylesheet" href="/lib/font-awesome.min.css" />
<link rel="stylesheet" href="./css/wopr.css">
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="./css/own.css">
<link rel="stylesheet" href="/fhem/tablet/lib/material-icons.min.css" />
<link rel="stylesheet" href="user-tablet-ui.css" />
<script src="lib/jquery.toast.min.js"></script>
<script src="lib/jquery.gridster.min.js"></script>
<script src="js/fhem-tablet-ui.js" defer></script>
<title>FTUI</title>
</head>
<body>
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="2" data-sizey="16">
<header><div data-type="label" class="medium orange">Menu</div></header>
<div class="cell">
<div data-type="pagebutton" data-url="#1_etagen.html" data-load="#1_etagen" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern="(.*#1_etagen.html||.*#2_etage_.*.html||.*#3_rooms_.*.html)" data-icon="oa-control_building_s_all" class="prefetch top-space"></div>
<div data-type="pagebutton" data-url="#1_heating.html" data-load="#1_heating" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern="(.*#1_heating.html||.*#2_heating_etage_.*.html)" data-icon="oa-sani_heating" class="prefetch top-space"></div>
<div data-type="pagebutton" data-url="#1_sonstiges.html" data-load="#1_sonstiges" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern="(.*#1_sonstiges.html||.*#1_sonstiges_etage_.*.html)" data-icon="oa-measure_battery_100" class="prefetch top-space"></div>
<header><div data-type="label" class="blue">Temperatur</div></header>
<header><div data-type="label" class="medium orange">Außen</div></header>
<div class="left"></div>
<table width="100%" class="">
<tr><td><div data-type="label" data-device="TerrassenkuehlschrankTemp" data-get="Aussentemp" data-unit="°C" class="right"></div></td></tr>
<tr><td><div data-type="label" data-device="TerrassenkuehlschrankTemp" data-get="AM2301-14_Humidity" data-unit="%" class="right"></div></td></tr>
</table>
<header><div data-type="label" class="medium orange">Terrasse</div></header>
<div class="left"></div>
<table width="100%" class="">
<tr><td><div data-type="label" data-device="TerrassenkuehlschrankTemp" data-get="AM2301-14_Temperature" data-unit="°C" class="right"></div></td></tr>
</table>
<header><div data-type="label" class="medium orange">Keller</div></header>
<div class="left"></div>
<table width="100%" class="">
<tr><td><div data-type="label" data-device="SpeicherTemperatur" data-get="AM2301_Temperature" data-unit="°C" class="right"></div></td></tr>
<tr><td><div data-type="label" data-device="SpeicherTemperatur" data-get="AM2301_Humidity" data-unit="%" class="right"></div></td></tr>
<tr><td><div data-type="label" data-device="SpeicherTemperatur" data-get="AM2301_DewPoint" data-unit="°C Tau" class="right"></div></td></tr>
</table>
<header><div data-type="label" class="medium orange">Dachgeschoss</div></header>
<div class="left"></div>
<table width="100%" class="">
<tr><td><div data-type="label" data-device="EsszimmerDachgeschoss" data-get="AM2301_Temperature" data-unit="°C" class="right"></div></td></tr>
<tr><td><div data-type="label" data-device="EsszimmerDachgeschoss" data-get="AM2301_Humidity" data-unit="%" class="right"></div></td></tr>
<tr><td><div data-type="label" data-device="EsszimmerDachgeschoss" data-get="AM2301_DewPoint" data-unit="°C Tau" class="right"></div></td></tr>
</table>
<header>Uhrzeit</header>
<div data-type="clock" data-format="H:i:s" class="large"></div>
<div data-type="clock" data-format="d.m.Y" class="small"></div>
<header>Load</header>
<div data-type="label" data-device="sysmon" data-get="loadavg" class="bold" data-color="#CCCCCC"></div>
<header>Max Credits</header>
<div data-type="label" data-device="CUL1" data-get="credit10ms" class="bold" data-color="#CCCCCC"></div>
<header>Kurs Ethereum</header>
<div data-type="label" data-device="Ethereum" data-get="ethereum" class="bold" data-color="#CCCCCC"></div>
</div>
</li>
<li data-row="1" data-col="3" data-sizex="8" data-sizey="16">
<div class="page" id="1_index"></div>
<div class="page" id="1_etagen"></div>
<div class="page" id="1_light"></div>
<div class="page" id="1_heating"></div>
<div class="page" id="1_rollaeden"></div>
<div class="page" id="1_multimedia"></div>
<div class="page" id="1_phone"></div>
<div class="page" id="1_wetter"></div>
<div class="page" id="1_sonstiges"></div>
</li>
</ul>
</div>
</body>
</html>
Dein Menü steht statisch an dieser Stelle ... also den ersten beiden Spalten:
<li data-row="1" data-col="1" data-sizex="2" data-sizey="16"></li>
Ab der dritten Spalte wird die ausgewählte Seite dargestellt:
<li data-row="1" data-col="3" data-sizex="8" data-sizey="16"></li>
Ich würde auf den ersten Blick sagen, dass das Ausblenden des Menüs keinen Raum schaffen würde.
Ich nutze pagetab und jede "neue" Seite hat den kompletten Raum zur Verfügung
... die eingeschränkten Seiten könnten ohne bzw. ohne komplettes Menü ... evtl. nur "Ausweg"
... die restlichen Seiten mit komplettem Menü
Zitat von: OdfFhem am 07 Januar 2023, 22:14:14
Ich nutze pagetab und jede "neue" Seite hat den kompletten Raum zur Verfügung
... die eingeschränkten Seiten könnten ohne bzw. ohne komplettes Menü ... evtl. nur "Ausweg"
... die restlichen Seiten mit komplettem Menü
Könntest du mir da ein wenig auf die Sprünge helfen?
Du weißt denke ich mittlerweile, dass ich in html. 2 linke Daumen habe :(
Die beiden Links zeigen hoffentlich die Unterschiede/Möglichkeiten beispielhaft auf:
- https://wiki.fhem.de/wiki/FTUI_Widget_Pagebutton (https://wiki.fhem.de/wiki/FTUI_Widget_Pagebutton)
- https://wiki.fhem.de/wiki/FTUI_Widget_Pagetab (https://wiki.fhem.de/wiki/FTUI_Widget_Pagetab)
Oh weia...
Feiertage sind doch schon vorbei....
Da muss ich meine ganze Tablet UI umklöppeln :(
Noch mal eine kleine Rückfrage:
Würde auf dem Tablet nur eine einzige Seite dargestellt
oder
hätte die Darstellung nichts mit dem Bisherigen zu tun
?
Wenn ja, dann könntest Du
- auch einfach eine neue Startseite anlegen
- für (Wage)Mutige sogar mit FTUI3 starten
- ...
Zitat von: OdfFhem am 07 Januar 2023, 23:03:33
Noch mal eine kleine Rückfrage:
Würde auf dem Tablet nur eine einzige Seite dargestellt
oder
hätte die Darstellung nichts mit dem Bisherigen zu tun
?
Wenn ja, dann könntest Du
- auch einfach eine neue Startseite anlegen
- für (Wage)Mutige sogar mit FTUI3 starten
- ...
Also Ursprung des Ganzen war, dass ich Readings auf meinem Notebook sehen wollte... Dann ist FTUI über die Jahre gewachsen.
#1_etagen.html und #1_heating.html sind Seiten für mein Notebook
#1_sonstiges.html ist einzig und allein für das Fire HD 10 um 24/7 diese 9 Readings darzustellen für meine Frau.
Das mit FTUI3 lassen wir mal lieber, du willst doch irgendwann mal wieder Ruhe vor mir haben und nicht die nächsten 8 Wochen mir FTUI3 beibringen ;)
Quick & Dirty reicht mir völlig... Auch nur mit Direktaufruf der einen Seite fürs Tablet...
Zitat von: B.Stromberg am 08 Januar 2023, 03:25:36
Das mit FTUI3 lassen wir mal lieber, du willst doch irgendwann mal wieder Ruhe vor mir haben und nicht die nächsten 8 Wochen mir FTUI3 beibringen ;)
Bitte keine "Drohungen" :o ;D
Zitat von: B.Stromberg am 08 Januar 2023, 03:25:36
Quick & Dirty reicht mir völlig... Auch nur mit Direktaufruf der einen Seite fürs Tablet...
Ich habe einfach mal eine neue Startdatei index_frau.html angelegt - der Teil zwischen <table>...</table> entspricht 1:1 Deinem table-Inhalt:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./fhem-tablet-ui-user-neu.css" />
<script src="js/fhem-tablet-ui.js" defer></script>
<title>Frau</title>
</head>
<html>
<body>
<table class="fullsize">
<tr><td><div class="bigger inline left">Aktuell</div></td><td><div data-type="label" data-device="HM2.0" data-get="state" data-unit="W" data-limits='[-9999,0 ]' data-colors='["#FF0000","green"]' class="bigger right"></div></td></tr>
<tr>
<td><div data-type="label" class="bigger inline left">PV (</div><div data-type="label" data-device="Tripower10" data-get="Tagesertrag" data-unit=" kWh Tag" class="big inline left"></div><div data-type="label" class="big inline left">)</div></td>
<td><div data-type="label" data-device="Tripower10" data-get="state" data-unit=" w" class="bigger inline right"></div></td>
</tr>
<tr>
<td><div data-type="label" class="bigger inline left">WP (</div>
<div data-type="label" data-device="Strom" data-get="StromverbrauchTag" data-fix="1" data-unit=" kWh Tag" class="bigger inline left"></div>
<div data-type="label" class="bigger inline left">)</div>
<div data-type="label" data-device="SpeicherTemperatur" data-get="SpeicherOben" data-unit="°C " class="inline right"></div></td>
<td><div data-type="label" data-device="SpeicherTemperatur" data-get="DS18B20-3_Temperature" data-unit="°C" data-pre-text=" " class="inline left"></div>
<div data-type="label" data-device="PulsStrom" data-get="StromAktuell" data-fix="0" data-unit=" w" class="bigger inline right"></div></td>
</tr>
<tr><td><div data-type="label" data-device="Waschmaschine" data-get="ENERGY_Power" data-pre-text="Waschmaschine (" data-post-text=" W)" class="big inline left"></div></td><td><div data-type="label" data-device="Waschmaschine" data-get="ENERGY_Power" data-substitution='["^([0-4]|[0-4][\\.,][\\d]*)$","fertig","^[0-9]*[\\.,]?[\\d]*$","waescht"]' data-limits-part="(\d*).*" data-limits='[0,5]' data-colors='["green","#FF0000"]' class="big right"></div></td></tr>
<tr><td><div data-type="label" data-device="Trockner" data-get="ENERGY_Power" data-pre-text="Trockner (" data-post-text=" W)" class="big inline left"></div></td><td><div data-type="label" data-device="Trockner" data-get="ENERGY_Power" data-substitution='["^([0-4]|[0-4][\\.,][\\d]*)$","fertig","^[0-9]*[\\.,]?[\\d]*$","trocknet"]' data-limits-part="(\d*).*" data-limits='[0,5]' data-colors='["green","#FF0000"]' class="big right"></div></td></tr>
<tr><td><div data-type="label" data-device="Spuelmaschine" data-get="ENERGY_Power" data-pre-text="Spuelmaschine (" data-post-text=" W)" class="big inline left"></div></td><td><div data-type="label" data-device="Spuelmaschine" data-get="ENERGY_Power" data-substitution='["^([0-4]|[0-4][\\.,][\\d]*)$","fertig","^[0-9]*[\\.,]?[\\d]*$","spuelt"]' data-limits-part="(\d*).*" data-limits='[0,5]' data-colors='["green","#FF0000"]' class="big right"></div></td></tr>
<tr>
<td><div data-type="label" data-device="TankstelleStar" data-get="SuperE5" data-pre-text="Star (" data-post-text=" €)" class="big inline left"></div></td>
<td><div data-type="label" data-device="TankstelleStar" data-get="aktZeit-1" data-part="2" data-unit=" Uhr" class="big inline right"></div></td>
</tr>
<tr>
<td><div data-type="label" data-device="TankstelleQ1Polle" data-get="SuperE5" data-pre-text="Q1 Polle (" data-post-text=" €)" class="big inline left"></div></td>
<td><div data-type="label" data-device="TankstelleQ1Polle" data-get="aktZeit-1" data-part="2" data-unit=" Uhr" class="big inline right"></div></td>
</tr>
<tr>
<td><div data-type="label" data-device="myABFALL" data-get="next_text" data-limits='["Grüne .*","Gelbe .*","Blaue .*","Graue .*"]' data-colors='["#2d9e1c","#F4E946","#4651F4","#696969"]' class="big inline left"></div></td>
<td><div data-type="label" data-device="myABFALL" data-get="next_weekday" data-limits-get="next_text" data-limits='["Grüne .*","Gelbe .*","Blaue .*","Graue .*"]' data-colors='["#2d9e1c","#F4E946","#4651F4","#696969"]' class="big inline right"></div></td>
</tr>
</table>
</body>
Dies führt (mit zufälligen Daten) zu den angehängten Screenshots ... das hellbläuliche soll den Rahmen des Tablets darstellen.
Meiner Ansicht nach "klebt" die Darstellung mit <table class="fullsize"> zu sehr am Rand.
Mit <table style="height:95%; width:95%;"> oder so ähnlich erzielt man vermutlich bessere Lesbarkeit.
"<link rel="stylesheet" href="./fhem-tablet-ui-user-neu.css" />" muss bei Dir wahrscheinlich leicht anders aussehen ...
Zitat von: OdfFhem am 08 Januar 2023, 07:41:46
Meiner Ansicht nach "klebt" die Darstellung mit <table class="fullsize"> zu sehr am Rand.
Mit <table style="height:95%; width:95%;"> oder so ähnlich erzielt man vermutlich bessere Lesbarkeit.
Moin!
Vielen Dank, dass du mir auch weiterhin hilfst.
Habe die "neue" index.html so angelegt wie im Beispiel von dir beschrieben.
"Problem" ist jetzt allerdings, dass die Zeilen auf dem Tablet, zwar in voller Breite, aber sehr klein, mit großen Zwischenräumen zwischen den Zeilen dargestellt werden :(
Bekommt man das irgendwie hin, dass die Readings alle untereinander dargestellt werden, ohne Leerzeichen / Freiräume zwischen den Zeilen?
Der Text sollte Zwecks Lesbarkeit aus etwas Entfernung so groß wie möglich sein
Zitat von: B.Stromberg am 08 Januar 2023, 13:06:33
"Problem" ist jetzt allerdings, dass die Zeilen auf dem Tablet, zwar in voller Breite, aber sehr klein, mit großen Zwischenräumen zwischen den Zeilen dargestellt werden :(
Bekommt man das irgendwie hin, dass die Readings alle untereinander dargestellt werden, ohne Leerzeichen / Freiräume zwischen den Zeilen?
Der Text sollte Zwecks Lesbarkeit aus etwas Entfernung so groß wie möglich sein
FTUI2 unterstützt u.a. folgende Größen:
normal ... 100% ; large ... 125% ; big ... 150% ; bigger ... 200% ; tall ... 350% ; great ... 450% ; grande ... 600%
Bislang verwendest Du als Größe "normal","big" und "bigger"
"normal" verwendest Du bislang nur indirekt ... wo keine Größe angegeben ist, wird autom. "normal" verwendet
Ich habe jetzt 1:1 das bisherige Beispiel auf andere Größen umgestellt ...
- normal ... durch ... bigger ; den beiden Temperaturen muss nun zwanghaft eine Größe zugeordnet werden
- big und bigger ... durch ... great
... angehängter Screenshot verdeutlicht den Unterschied
Da ich das von Dir genutzte Tablet nur vom Hörensagen kenne, wirst Du "intensiver" mit den Größenangaben spielen müssen.
Zitat von: OdfFhem am 08 Januar 2023, 16:34:00
FTUI2 unterstützt u.a. folgende Größen:
normal ... 100% ; large ... 125% ; big ... 150% ; bigger ... 200% ; tall ... 350% ; great ... 450% ; grande ... 600%
Hmmmm im Moment haben die Größenangaben bei mir keine Auswirkung....
Habe auch schon Grande ausprobiert, sieht aus, als würde FTUI die Größenangaben ignorieren.
Was habe ich nun schon wieder "verhunzt"?
Hier die komplette html.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/fhem-tablet-ui.css" />
<script src="js/fhem-tablet-ui.js" defer></script>
<title>Frau</title>
</head>
<html>
<body>
<table style="height:95%; width:95%;">
<tr><td><div class="great inline left">Aktuell</div></td><td><div data-type="label" data-device="HM2.0" data-get="state" data-unit="W" data-limits='[-9999,0 ]' data-colors='["#FF0000","green"]' class="great right"></div></td></tr>
<tr>
<td><div data-type="label" class="great inline left">PV (</div><div data-type="label" data-device="Tripower10" data-get="Tagesertrag" data-unit=" kWh Tag" class="great inline left"></div><div data-type="label" class="great inline left">)</div></td>
<td><div data-type="label" data-device="Tripower10" data-get="state" data-unit=" w" class="great inline right"></div></td>
</tr>
<tr>
<td><div data-type="label" class="great inline left">WP (</div>
<div data-type="label" data-device="Strom" data-get="StromverbrauchTag" data-fix="1" data-unit=" kWh Tag" class="great inline left"></div>
<div data-type="label" class="great inline left">)</div>
<div data-type="label" data-device="SpeicherTemperatur" data-get="SpeicherOben" data-unit="°C" data-fix="1" data-limits='[1,45,50 ]' data-colors='["blue","yellow","#FF0000"]' class="inline"></div></td>
<td><div data-type="label" data-device="SpeicherTemperatur" data-get="DS18B20-3_Temperature" data-unit="°C" data-fix="1" data-limits='[1,45,50 ]' data-colors='["blue","yellow","#FF0000"]' class="left"></div>
<div data-type="label" data-device="PulsStrom" data-get="StromAktuell" data-fix="0" data-unit=" w" class="great inline right"></div></td>
</tr>
<tr><td><div data-type="label" data-device="Waschmaschine" data-get="ENERGY_Power" data-pre-text="Waschmaschine (" data-post-text=" W)" class="big inline left"></div></td><td><div data-type="label" data-device="Waschmaschine" data-get="ENERGY_Power" data-substitution='["^([0-4]|[0-4][\\.,][\\d]*)$","fertig","^[0-9]*[\\.,]?[\\d]*$","waescht"]' data-limits-part="(\d*).*" data-limits='[0,5]' data-colors='["green","#FF0000"]' class="big right"></div></td></tr>
<tr><td><div data-type="label" data-device="Trockner" data-get="ENERGY_Power" data-pre-text="Trockner (" data-post-text=" W)" class="big inline left"></div></td><td><div data-type="label" data-device="Trockner" data-get="ENERGY_Power" data-substitution='["^([0-4]|[0-4][\\.,][\\d]*)$","fertig","^[0-9]*[\\.,]?[\\d]*$","trocknet"]' data-limits-part="(\d*).*" data-limits='[0,5]' data-colors='["green","#FF0000"]' class="big right"></div></td></tr>
<tr><td><div data-type="label" data-device="Spuelmaschine" data-get="ENERGY_Power" data-pre-text="Spuelmaschine (" data-post-text=" W)" class="big inline left"></div></td><td><div data-type="label" data-device="Spuelmaschine" data-get="ENERGY_Power" data-substitution='["^([0-4]|[0-4][\\.,][\\d]*)$","fertig","^[0-9]*[\\.,]?[\\d]*$","spuelt"]' data-limits-part="(\d*).*" data-limits='[0,5]' data-colors='["green","#FF0000"]' class="big right"></div></td></tr>
<tr>
<td><div data-type="label" data-device="TankstelleStar" data-get="SuperE5" data-pre-text="Star (" data-post-text=" €)" class="big inline left"></div></td>
<td><div data-type="label" data-device="TankstelleStar" data-get="aktZeit-1" data-part="2" data-unit=" Uhr" class="big inline right"></div></td>
</tr>
<tr>
<td><div data-type="label" data-device="TankstelleQ1Polle" data-get="SuperE5" data-pre-text="Q1 Polle (" data-post-text=" €)" class="big inline left"></div></td>
<td><div data-type="label" data-device="TankstelleQ1Polle" data-get="aktZeit-1" data-part="2" data-unit=" Uhr" class="big inline right"></div></td>
</tr>
<tr>
<td><div data-type="label" data-device="myABFALL" data-get="next_text" data-limits='["Grüne .*","Gelbe .*","Blaue .*","Graue .*"]' data-colors='["#2d9e1c","#F4E946","#4651F4","#696969"]' class="big inline left"></div></td>
<td><div data-type="label" data-device="myABFALL" data-get="next_weekday" data-limits-get="next_text" data-limits='["Grüne .*","Gelbe .*","Blaue .*","Graue .*"]' data-colors='["#2d9e1c","#F4E946","#4651F4","#696969"]' class="big inline right"></div></td>
</tr>
</table>
</body>
</html>
Zitat von: B.Stromberg am 08 Januar 2023, 16:57:21
Was habe ich nun schon wieder "verhunzt"?
"<link rel="stylesheet" href="css/fhem-tablet-ui.css" />" kannst Du schon mal weglassen
... dies ist die originäre FTUI2-Datei und muss hier nicht angegeben werden
... hier sollte - sofern vorhanden - die "erweiternde" user.css angegeben werden
Ich habe Dein Beispiel mal ausprobiert und die ersten drei Zeilen werden meist deutlich größer dargestellt
... den Rest von big,bigger hast Du noch nicht ersetzt
... die Temperaturen sind noch immer autom. von der Größe normal
Ich kann aus der Ferne schlecht einschätzen, was da schiefgeht
... vielleicht kannst Du mal alles ersetzen und dann ein Screenshot/Foto vom Tablet-Display (temporär) zeigen
Zitat von: OdfFhem am 08 Januar 2023, 18:10:30
Ich kann aus der Ferne schlecht einschätzen, was da schiefgeht
... vielleicht kannst Du mal alles ersetzen und dann ein Screenshot/Foto vom Tablet-Display (temporär) zeigen
bei den übrig gebliebenen big hat mir wohl pspad einen Streich gespielt.
Habe ich korrigiert.
Hier die abgeänderte html.
<!DOCTYPE html>
<html>
<head>
<script src="js/fhem-tablet-ui.js" defer></script>
<title>Frau</title>
</head>
<html>
<body>
<table style="height:95%; width:95%;">
<tr><td><div class="great inline left">Aktuell</div></td><td><div data-type="label" data-device="HM2.0" data-get="state" data-unit="W" data-limits='[-9999,0 ]' data-colors='["#FF0000","green"]' class="great right"></div></td></tr>
<tr>
<td><div data-type="label" class="great inline left">PV (</div><div data-type="label" data-device="Tripower10" data-get="Tagesertrag" data-unit=" kWh Tag" class="great inline left"></div><div data-type="label" class="great inline left">)</div></td>
<td><div data-type="label" data-device="Tripower10" data-get="state" data-unit=" w" class="great inline right"></div></td>
</tr>
<tr>
<td><div data-type="label" class="great inline left">WP (</div>
<div data-type="label" data-device="Strom" data-get="StromverbrauchTag" data-fix="1" data-unit=" kWh Tag" class="great inline left"></div>
<div data-type="label" class="great inline left">)</div>
<div data-type="label" data-device="SpeicherTemperatur" data-get="SpeicherOben" data-unit="°C" data-fix="1" data-limits='[1,45,50 ]' data-colors='["blue","yellow","#FF0000"]' class="inline"></div></td>
<td><div data-type="label" data-device="SpeicherTemperatur" data-get="DS18B20-3_Temperature" data-unit="°C" data-fix="1" data-limits='[1,45,50 ]' data-colors='["blue","yellow","#FF0000"]' class="left"></div>
<div data-type="label" data-device="PulsStrom" data-get="StromAktuell" data-fix="0" data-unit=" w" class="great inline right"></div></td>
</tr>
<tr><td><div data-type="label" data-device="Waschmaschine" data-get="ENERGY_Power" data-pre-text="Waschmaschine (" data-post-text=" W)" class="great inline left"></div></td><td><div data-type="label" data-device="Waschmaschine" data-get="ENERGY_Power" data-substitution='["^([0-4]|[0-4][\\.,][\\d]*)$","fertig","^[0-9]*[\\.,]?[\\d]*$","waescht"]' data-limits-part="(\d*).*" data-limits='[0,5]' data-colors='["green","#FF0000"]' class="great right"></div></td></tr>
<tr><td><div data-type="label" data-device="Trockner" data-get="ENERGY_Power" data-pre-text="Trockner (" data-post-text=" W)" class="great inline left"></div></td><td><div data-type="label" data-device="Trockner" data-get="ENERGY_Power" data-substitution='["^([0-4]|[0-4][\\.,][\\d]*)$","fertig","^[0-9]*[\\.,]?[\\d]*$","trocknet"]' data-limits-part="(\d*).*" data-limits='[0,5]' data-colors='["green","#FF0000"]' class="great right"></div></td></tr>
<tr><td><div data-type="label" data-device="Spuelmaschine" data-get="ENERGY_Power" data-pre-text="Spuelmaschine (" data-post-text=" W)" class="great inline left"></div></td><td><div data-type="label" data-device="Spuelmaschine" data-get="ENERGY_Power" data-substitution='["^([0-4]|[0-4][\\.,][\\d]*)$","fertig","^[0-9]*[\\.,]?[\\d]*$","spuelt"]' data-limits-part="(\d*).*" data-limits='[0,5]' data-colors='["green","#FF0000"]' class="great right"></div></td></tr>
<tr>
<td><div data-type="label" data-device="TankstelleStar" data-get="SuperE5" data-pre-text="Star (" data-post-text=" €)" class="great inline left"></div></td>
<td><div data-type="label" data-device="TankstelleStar" data-get="aktZeit-1" data-part="2" data-unit=" Uhr" class="great inline right"></div></td>
</tr>
<tr>
<td><div data-type="label" data-device="TankstelleQ1Polle" data-get="SuperE5" data-pre-text="Q1 Polle (" data-post-text=" €)" class="great inline left"></div></td>
<td><div data-type="label" data-device="TankstelleQ1Polle" data-get="aktZeit-1" data-part="2" data-unit=" Uhr" class="great inline right"></div></td>
</tr>
<tr>
<td><div data-type="label" data-device="myABFALL" data-get="next_text" data-limits='["Grüne .*","Gelbe .*","Blaue .*","Graue .*"]' data-colors='["#2d9e1c","#F4E946","#4651F4","#696969"]' class="great inline left"></div></td>
<td><div data-type="label" data-device="myABFALL" data-get="next_weekday" data-limits-get="next_text" data-limits='["Grüne .*","Gelbe .*","Blaue .*","Graue .*"]' data-colors='["#2d9e1c","#F4E946","#4651F4","#696969"]' class="great inline right"></div></td>
</tr>
</table>
</body>
</html>Ich habe mal 2 Fotos vom Tablet beigefügt. Diese sind von meinem Platz auf dem Sofa aus ca. 3m Entfernung aufgenommen.
Quali ist Mist, sorry aber man sieht so den Unterschied, bzw. dass bei der neuen html. die Größenangaben, warum auch immer, nicht berücksichtigt werden.
Ich könnte das Foto "neue html" auch mit big / bigger oder small machen. Die Textgröße ändert sich nicht :(
Bei der alten html. nutze ich auf dem Tablet "pinch & zoom" um reinzuzoomen und das Seitenmenü wegzuhaben.
Ich füge auch noch einmal 2 Screenshots bei.
Achso, in der alten html ist es Absicht, dass die ersten 3 Readings größer dargestellt werden.
Ich habe folgendes "Minimal"-Beispiel konstruiert:
<!DOCTYPE html>
<html>
<head>
<script src="js/fhem-tablet-ui.js" defer></script>
</head>
<html>
<body>
<!--
<table>
<tr><td><div class="normal">normal ... 100%</div></td></tr>
<tr><td><div class="large">large ... 125%</div></td></tr>
<tr><td><div class="big">big ... 150%</div></td></tr>
<tr><td><div class="bigger">bigger ... 200%</div></td></tr>
<tr><td><div class="tall">tall ... 350%</div></td></tr>
<tr><td><div class="great">great ... 450%</div></td></tr>
<tr><td><div class="grande">grande ... 600%</div></td></tr>
</table>
-->
<!--
<table class="fullsize">
<tr><td><div class="normal">normal ... 100%</div></td></tr>
<tr><td><div class="large">large ... 125%</div></td></tr>
<tr><td><div class="big">big ... 150%</div></td></tr>
<tr><td><div class="bigger">bigger ... 200%</div></td></tr>
<tr><td><div class="tall">tall ... 350%</div></td></tr>
<tr><td><div class="great">great ... 450%</div></td></tr>
<tr><td><div class="grande">grande ... 600%</div></td></tr>
</table>
-->
<!--
<table class="center">
<tr><td><div class="normal">normal ... 100%</div></td></tr>
<tr><td><div class="large">large ... 125%</div></td></tr>
<tr><td><div class="big">big ... 150%</div></td></tr>
<tr><td><div class="bigger">bigger ... 200%</div></td></tr>
<tr><td><div class="tall">tall ... 350%</div></td></tr>
<tr><td><div class="great">great ... 450%</div></td></tr>
<tr><td><div class="grande">grande ... 600%</div></td></tr>
</table>
-->
<table style="width:95%; height:95%;">
<tr><td><div class="normal">normal ... 100%</div></td></tr>
<tr><td><div class="large">large ... 125%</div></td></tr>
<tr><td><div class="big">big ... 150%</div></td></tr>
<tr><td><div class="bigger">bigger ... 200%</div></td></tr>
<tr><td><div class="tall">tall ... 350%</div></td></tr>
<tr><td><div class="great">great ... 450%</div></td></tr>
<tr><td><div class="grande">grande ... 600%</div></td></tr>
</table>
</body>
Bei mir funktioniert es z.B. auf Desktop (Chrome,Firefox) und Tablet (Chrome).
Zum Auskommentieren dienen folgende Klammerzeilen
<!--
<table ...> ... </table>
-->
Zitat von: OdfFhem am 08 Januar 2023, 21:28:09
Ich habe folgendes "Minimal"-Beispiel konstruiert:
*grummel*
Mein Gott, ich hasse den Standby Modus bei meinem Notebook.
In PSPad wird mir die geänderte index.html angezeigt, nur gespeichert wurde diese nicht......
Windows neu gestartet und nun ändert sich auch die Größe :)
Bastel im Moment mit <table style="height:100%; width:100%;">
Breite wird nun schön ausgenutzt (ja, ich muss die beiden Temperaturen noch anpassen, weiß aber noch nicht, wie ich die linksbündig hinter die Klammer von WP bekomme)
Nur unten wird nun die Blaue Tonne abgeschnitten.
Nehme ich "tall" ist es ein wenig klein, nehme ich great ist es unten abgeschnitten.
Dachte mit height könnte man das irgendwie beeinflussen, aber selbst bei 30% bleibt es unten abgeschnitten.
Denke, das liegt logischerweise daran, dass ja das Verhältnis proportional läuft. (sonst wäre die Schrift gestreckt, was ja so nicht geht).
Nehme ich fullsize, ist am rechten Rand wieder 5cm Luft.
Ein Zwischending zwischen tall und great gibt es nicht?
EDIT 22:15h
Habe jetzt einfach die Größen der 3 Readings von Waschmaschine, Trockner und Spülmaschine geändert, dann passt das. Muss ja nun keine Raketenwissenschaft sein.
Wo ich hängenbleibe ist die beiden Temperaturen bei "WP" nebeneinander darzustellen.
Die "51,5" könnte ein Leerzeichen weiter nach Rechts aber die "47,8" müsste dann, mit vielleicht 3 Leerzeichen, daneben.
Oder fällt dir da etwas ein, wie man das schöner machen kann?
Ich füge noch einmal einen aktuellen Screenshot bei.
Hier die neue html:
<!DOCTYPE html>
<html>
<head>
<script src="js/fhem-tablet-ui.js" defer></script>
<title>Frau</title>
</head>
<html>
<body>
<table style="height:100%; width:100%;">
<tr><td><div class="grande inline left">Aktuell</div></td><td><div data-type="label" data-device="HM2.0" data-get="state" data-unit="W" data-limits='[-9999,0 ]' data-colors='["#FF0000","green"]' class="grande right"></div></td></tr>
<tr>
<td><div data-type="label" class="great inline left">PV (</div><div data-type="label" data-device="Tripower10" data-get="Tagesertrag" data-unit=" kWh Tag" class="great inline left"></div><div data-type="label" class="great inline left">)</div></td>
<td><div data-type="label" data-device="Tripower10" data-get="state" data-unit=" w" class="great inline right"></div></td>
</tr>
<tr>
<td><div data-type="label" class="great inline left">WP (</div>
<div data-type="label" data-device="Strom" data-get="StromverbrauchTag" data-fix="1" data-unit=" kWh Tag" class="great inline left"></div>
<div data-type="label" class="great inline left">)</div>
<div data-type="label" data-device="SpeicherTemperatur" data-get="SpeicherOben" data-unit="°C" data-fix="1" data-limits='[1,45,50 ]' data-colors='["blue","yellow","#FF0000"]' class="inline great left"></div></td>
<td><div data-type="label" data-device="SpeicherTemperatur" data-get="DS18B20-3_Temperature" data-unit="°C" data-fix="1" data-limits='[1,45,50 ]' data-colors='["blue","yellow","#FF0000"]' class="inline great left"></div>
<div data-type="label" data-device="PulsStrom" data-get="StromAktuell" data-fix="0" data-unit=" w" class="great inline right"></div></td>
</tr>
<tr><td><div data-type="label" data-device="Waschmaschine" data-get="ENERGY_Power" data-pre-text="Waschmaschine (" data-post-text=" W)" class="tall inline left"></div></td><td><div data-type="label" data-device="Waschmaschine" data-get="ENERGY_Power" data-substitution='["^([0-4]|[0-4][\\.,][\\d]*)$","fertig","^[0-9]*[\\.,]?[\\d]*$","waescht"]' data-limits-part="(\d*).*" data-limits='[0,5]' data-colors='["green","#FF0000"]' class="tall right"></div></td></tr>
<tr><td><div data-type="label" data-device="Trockner" data-get="ENERGY_Power" data-pre-text="Trockner (" data-post-text=" W)" class="tall inline left"></div></td><td><div data-type="label" data-device="Trockner" data-get="ENERGY_Power" data-substitution='["^([0-4]|[0-4][\\.,][\\d]*)$","fertig","^[0-9]*[\\.,]?[\\d]*$","trocknet"]' data-limits-part="(\d*).*" data-limits='[0,5]' data-colors='["green","#FF0000"]' class="tall right"></div></td></tr>
<tr><td><div data-type="label" data-device="Spuelmaschine" data-get="ENERGY_Power" data-pre-text="Spuelmaschine (" data-post-text=" W)" class="tall inline left"></div></td><td><div data-type="label" data-device="Spuelmaschine" data-get="ENERGY_Power" data-substitution='["^([0-4]|[0-4][\\.,][\\d]*)$","fertig","^[0-9]*[\\.,]?[\\d]*$","spuelt"]' data-limits-part="(\d*).*" data-limits='[0,5]' data-colors='["green","#FF0000"]' class="tall right"></div></td></tr>
<tr>
<td><div data-type="label" data-device="TankstelleStar" data-get="SuperE5" data-pre-text="Star (" data-post-text=" €)" class="great inline left"></div></td>
<td><div data-type="label" data-device="TankstelleStar" data-get="aktZeit-1" data-part="2" data-unit=" Uhr" class="great inline right"></div></td>
</tr>
<tr>
<td><div data-type="label" data-device="TankstelleQ1Polle" data-get="SuperE5" data-pre-text="Q1 Polle (" data-post-text=" €)" class="great inline left"></div></td>
<td><div data-type="label" data-device="TankstelleQ1Polle" data-get="aktZeit-1" data-part="2" data-unit=" Uhr" class="great inline right"></div></td>
</tr>
<tr>
<td><div data-type="label" data-device="myABFALL" data-get="next_text" data-limits='["Grüne .*","Gelbe .*","Blaue .*","Graue .*"]' data-colors='["#2d9e1c","#F4E946","#4651F4","#696969"]' class="great inline left"></div></td>
<td><div data-type="label" data-device="myABFALL" data-get="next_weekday" data-limits-get="next_text" data-limits='["Grüne .*","Gelbe .*","Blaue .*","Graue .*"]' data-colors='["#2d9e1c","#F4E946","#4651F4","#696969"]' class="great inline right"></div></td>
</tr>
</table>
</body>
</html>
Moin!
Habe es mal selbst hinbekommen :)
Zitat von: B.Stromberg am 08 Januar 2023, 22:02:49
Mein Gott, ich hasse den Standby Modus bei meinem Notebook.
Ich glaube, mit diesem Eindruck bist Du nicht allein ... wie sagt man gerne bei uns: "Da simmer dabei, dat is ...!"
Aber schon mal schön, dass es jetzt funktioniert ...
Zitat von: OdfFhem am 10 Januar 2023, 02:37:44
Aber schon mal schön, dass es jetzt funktioniert ...
Hallo!
Darf ich dich noch einmal nerven?
Das Ganze hat bei mir nun derart ausgeartet, dass ich zur Darstellung der Werte einen 24" Monitor hochkant verwende.
Das klappt soweit ganz gut, nur ist dort ein kleiner Schönheitsfehler.
Ich habe nun auch Datum, Uhrzeit und Temperatur integriert, denke aber, dass ich dort bei der Formatierung mal wieder etwas vermurkst habe :(
Alle paar Sekunden "springt" das Bild ein paar Millimeter hoch und runter. Nehme ich den Code von der Uhrzeit, Datum und Temperatur wieder raus, bleibt das Bild stabil.
Hier noch einmal der komplette Code:
<!DOCTYPE html>
<html>
<head>
<script src="js/fhem-tablet-ui.js" defer></script>
<title>Monitor</title>
</head>
<html>
<body>
<table style="height:80%; width:100%;">
<tr>
<td><div class="left gigantic bold" data-type="clock" data-format=" H:i:s"></div></td>
</tr>
<tr>
<td><div data-type="clock" data-format=" l, d. F Y" class="left tall thin"></div></td>
<td><div data-type="label" data-device="Wetterstation" data-get="temperature" data-unit="°C" class="gigantic right"></div></td>
</tr>
<tr><td><div class="great inline top-space left">Stromverbrauch</div></td><td><div data-type="label" data-device="HM2.0" data-get="state" data-unit="W" data-limits='[-9999,0 ]' data-colors='["#FF0000","green"]' class="great top-space right"></div></td></tr>
<tr>
<td><div data-type="label" class="great inline left">PV (</div>
<div data-type="label" data-device="Tripower10" data-get="Tagesertrag" data-unit=" kWh Tag" class="great inline left"></div><div data-type="label" class="tall inline left"></div>
<div data-type="label" class="great inline left">)</div><div data-type="label" data-device="SpeicherTemperatur" data-get="SpeicherOben" data-unit="°C" data-fix="1" data-limits='[1,40,50 ]' data-colors='["blue","yellow","#FF0000"]' class="inline middle tall"></div>
<td><div data-type="label" data-device="Tripower10" data-get="state" data-unit=" w" class="great inline right"></div></td>
</tr>
<tr>
<td><div data-type="label" class="tall inline left">WP (</div>
<div data-type="label" data-device="Strom" data-get="StromverbrauchTag" data-fix="1" data-unit=" kWh Tag" class="tall inline left"></div>
<div data-type="label" class="tall inline left">) </div><div data-type="label" data-device="SpeicherTemperatur" data-get="DS18B20-3_Temperature" data-unit="°C" data-fix="1" data-limits='[1,40,50 ]' data-colors='["blue","yellow","#FF0000"]' class="inline middle tall"></div>
<td><div data-type="label" data-device="PulsStrom" data-get="StromAktuell" data-fix="0" data-unit=" w" class="tall inline right"></div></td>
</tr>
<tr>
<td><div data-type="label" class="tall inline left">Wasser (</div>
<div data-type="label" data-device="WarmwasserWaermepumpe" data-get="ENERGY_Today" data-unit="kWh" data-fix="1" class="tall inline left"></div><div data-type="label" class="tall inline left"></div>
<div data-type="label" class="tall inline left">) </div><div data-type="label" data-device="WarmwasserTemperatur" data-get="DS18B20_Temperature" data-unit="°C" data-fix="1" data-limits='[1,40,50 ]' data-colors='["blue","yellow","#FF0000"]' class="inline middle tall"></div>
<td><div data-type="label" data-device="WarmwasserWaermepumpe" data-get="ENERGY_Power" data-unit=" w" class="tall inline right"></div></td>
</tr>
<tr><td><div data-type="label" data-device="Waschmaschine" data-get="ENERGY_Power" data-pre-text="Waschmaschine (" data-post-text=" W)" class="tall inline left"></div></td><td><div data-type="label" data-device="Waschmaschine" data-get="ENERGY_Power" data-substitution='["^([0-4]|[0-4][\\.,][\\d]*)$","fertig","^[0-9]*[\\.,]?[\\d]*$","wäscht"]' data-limits-part="(\d*).*" data-limits='[0,5]' data-colors='["green","#FF0000"]' class="tall right"></div></td></tr>
<tr><td><div data-type="label" data-device="Trockner" data-get="ENERGY_Power" data-pre-text="Trockner (" data-post-text=" W)" class="tall inline left"></div></td><td><div data-type="label" data-device="Trockner" data-get="ENERGY_Power" data-substitution='["^([0-4]|[0-4][\\.,][\\d]*)$","fertig","^[0-9]*[\\.,]?[\\d]*$","trocknet"]' data-limits-part="(\d*).*" data-limits='[0,5]' data-colors='["green","#FF0000"]' class="tall right"></div></td></tr>
<tr><td><div data-type="label" data-device="Spuelmaschine" data-get="ENERGY_Power" data-pre-text="Spülmaschine (" data-post-text=" W)" class="tall inline left"></div></td><td><div data-type="label" data-device="Spuelmaschine" data-get="ENERGY_Power" data-substitution='["^([0-2]|[0-2][\\.,][\\d]*)$","fertig","^[0-9]*[\\.,]?[\\d]*$","spült"]' data-limits-part="(\d*).*" data-limits='[0,3]' data-colors='["green","#FF0000"]' class="tall right"></div></td></tr>
<tr>
<td><div data-type="label" data-device="TankstelleStar" data-get="SuperE5" data-pre-text="Star " data-post-text=" €" class="tall inline left"></div></td>
<td><div data-type="label" data-device="TankstelleStar" data-get="aktZeit-1" data-part="2" data-unit=" Uhr" class="tall inline right"></div></td>
</tr>
<tr>
<td><div data-type="label" data-device="TankstelleQ1Polle" data-get="SuperE5" data-pre-text="Q1 Polle " data-post-text=" €" class="tall inline left"></div></td>
<td><div data-type="label" data-device="TankstelleQ1Polle" data-get="aktZeit-1" data-part="2" data-unit=" Uhr" class="tall inline right"></div></td>
</tr>
<tr>
<td><div data-type="label" data-device="VolvoOnCall" data-get="distanceToEmpty" data-pre-text="Volvo " data-post-text=" Restkilometer" class="tall inline left"></div></td>
<td><div data-type="label" data-device="VolvoOnCall" data-get="fuelAmount" " data-post-text=" l Tankinhalt" class="tall inline right"></div></td>
</tr>
<tr>
<td><div data-type="label" class="tall inline left" data-device="Bitpanda" data-get="BTC_USD" data-fix="0" data-unit="$" data-pre-text="Bitcoin "</div></td>
<td><div data-type="label" class="tall inline right" data-device="Bitpanda" data-get="ETH_USD" data-fix="0" data-unit="$" data-pre-text="Ethereum "</div></td>
</tr>
<tr>
<td><div data-type="label" data-device="myABFALL" data-get="next_text" data-limits='["Grüne .*","Gelbe .*","Blaue .*","Graue .*"]' data-colors='["#2d9e1c","#F4E946","#4651F4","#696969"]' class="tall inline left"></div></td>
<td><div data-type="label" data-device="myABFALL" data-get="next_weekday" data-limits-get="next_text" data-limits='["Grüne .*","Gelbe .*","Blaue .*","Graue .*"]' data-colors='["#2d9e1c","#F4E946","#4651F4","#696969"]' class="tall inline right"></div></td>
</tr>
</table>
</body>
</html>Es geht wohl primär um diese Zeilen:
<tr>
<td><div class="left gigantic bold" data-type="clock" data-format=" H:i:s"></div></td>
</tr>
<tr>
<td><div data-type="clock" data-format=" l, d. F Y" class="left tall thin"></div></td>
<td><div data-type="label" data-device="Wetterstation" data-get="temperature" data-unit="°C" class="gigantic right"></div></td>
</tr>Mit table-style habe ich schon rumprobiert, das "Zucken" im Bild ist egal bei welcher Größe.
Das exakt dort etwas im Argen liegt merke ich daran, dass "width:x%" keine Auswirkung hat. Nehme ich den Code für Uhr, Datum, Temp raus, ändert sich die Breite.
Ergo, ich habe wieder etwas vermurkst :(
Als Anlage ein Screenshot. Das Aussehen ist wie gewünscht, nur das "Zucken" im Bild nervt :(
Schaue ich mir gerne an ... wird aber ein wenig später ...
Kann man "genauer" erkennen, welcher der drei Verdächtigen beim Zucken mehr oder weniger Platz braucht ?
Zitat von: OdfFhem am 16 Januar 2023, 15:39:54
Schaue ich mir gerne an ... wird aber ein wenig später ...
Kann man "genauer" erkennen, welcher der drei Verdächtigen beim Zucken mehr oder weniger Platz braucht ?
Keine Eile :)
Bin wirklich froh, dass du mir hilfst :)
Es wird wohl mit der Aufteilung in der Reihe zu tun haben. Es wird nichts explizit größer.
Damit Uhrzeit und Datum halbwegs in der Mitte sind habe ich ja einfach Leerzeichen " " gesetzt.
Bin da mit den Klassen "right" und "left" nicht klargekommen.
Eigentlich müsste man der Seite erst einmal vorgeben, wie groß diese ist? Vertikal ist ja nicht üblich...
Denke, dass Temperatur oder Datum über den rechten Rand hinausgehen....
Wie gesagt, tue mich echt mit der Formatierung in html schwer.
Auch die Temperaturen hinter PV, WP und Wasser sind ja mit Leerzeichen "hingemogelt".
Habe bisher nichts gefunden, wie man einen dritten Wert in einer Zeile exakt in die Mitte bekommt.
Ich habe mal 4 Testfälle angelegt (s. Screenshot):
-1- Tabelle in Tabelle ... ähnlich zu Deiner Ausgabe, aber mit vorgegebener Spaltenbreite
-2- wie -1-, nur mit Normalschrift und daher konstanter Darstellung ... dient zum Vergleich, ob sich die Spaltenbreite von -1- wertabhängig verändert hat
-3- Darstellung verhält sich wie der Rest der Tabelle; legt aber umgekehrt auch fallabhängig selbst die Spaltenbreite für den Rest der Tabelle fest
-4- zentrierte Sicht von Datum und Zeit ; allerdings ohne Temperatur; dient eigentlich nur zur Beobachtung
Meine Tests haben selbst mit realistischen Werten die Variante -3- zum Wackeln gebracht
... mit Variante -1- ist mir dies nicht gelungen
<tr><td colspan="2">
<table style="width:100%; height:100%;">
<tr><td style="background-color:gray; width:75%"><div data-type="clock" data-format="H:i:s" class="gigantic bold"></div></td>
<td rowspan="2" style="background-color:gray;"><div data-type="label" data-device="ftuitest" data-get="temperature1" data-unit="°C" class="gigantic"></div></td></tr>
<tr><td style="background-color:gray;"><div data-type="clock" data-format="l, d. F Y" class="tall thin"></div></td></tr>
</table>
</td></tr>
<tr><td colspan="2">
<table style="width:100%; height:100%;">
<tr><td style="background-color:green; width:75%"><div data-type="clock" data-format="H:i:s"></div></td>
<td rowspan="2" style="background-color:green;"><div data-type="label" data-device="ftuitest" data-get="temperature1" data-unit="°C"></div></td></tr>
<tr><td style="background-color:green;"><div data-type="clock" data-format="l, d. F Y"></div></td>
</tr>
</table>
</td></tr>
<tr>
<td style="background-color:lightblue; width=75%"><div class="gigantic bold" data-type="clock" data-format="H:i:s"></div></td>
<td style="background-color:lightblue;" rowspan="2"><div data-type="label" data-device="ftuitest" data-get="temperature1" data-unit="°C" class="gigantic"></div></td>
</tr>
<tr>
<td style="background-color:lightblue;"><div data-type="clock" data-format="l, d. F Y" class="tall thin"></div></td>
</tr>
<tr>
<td colspan="2" style="background-color:green"><div class="gigantic bold" data-type="clock" data-format="H:i:s"></div></td>
</tr>
<tr>
<td colspan="2" style="background-color:green"><div data-type="clock" data-format="l, d. F Y" class="tall thin"></div></td>
</tr>
Vielleicht hilft's Dir beim "Ruhigstellen" der Darstellung ...
Wieder einmal ein ganz dickes DANKE an dich!
Habe die Variante 1 übernommen.
Heute um Mitternacht, wo das Datum von Montag auf Dienstag umgeschlagen ist, stand dann auf einmal Dienstag noch eine Reihe tiefer. Das hatte ich wohl irgendwie vermurkst.
Jetzt mit den vorgegebenen Bereichen passiert das nicht mehr :)
Hat dann glaube ich auch den Vorteil, dass das Datum unabhängig von der Länge des Wochentags immer mittig unter der Uhr bleibt.
Mal sehen, evtl. baue ich auf diese Art und Weise noch einmal die ganze Ansicht um.
Das mit colspan und rowspan muss ich mir noch einmal genauer ansehen.
Für manche Bereiche brauche ich nur 2 Spalten, für andere 3 Spalten, ob und wie man das mischen kann.
Wenn man erst einmal einen Ansatz hat, kann man sich den Rest auch zusammensuchen :)
Zitat von: B.Stromberg am 17 Januar 2023, 04:46:57
Für manche Bereiche brauche ich nur 2 Spalten, für andere 3 Spalten, ob und wie man das mischen kann.
Kann man mischen, allerdings gilt: man kann mit colspan keine Spalten dazu erfinden
... aber aus z.B. zwei "(unterschiedlich) schmalen" Spalten kann man eine "breite" Spalte machen
... könnte übersetzt bedeuten: generell mit 3 Spalten beginnen und in Zeilen, die nur 2 Spalten brauchen, auf colspan zurückgreifen
Zitat von: OdfFhem am 17 Januar 2023, 08:05:22
Kann man mischen, .....
Huhu, ich schon wieder. Hoffe du hast deine tägliche Ration Valium schon genommen ;)
Spaß beiseite.
Evtl., wenn du etwas Zeit hast, kannst du mir noch einmal bei einer Sache helfen?
Ich lasse mir in der FTUI den aktuellen Verbrauch anzeigen:
<td><div class="great inline left">Netzbezug Tag</div></td><td><div data-type="label" data-device="Dum.Energy" data-get="GridConsumptionDay" data-unit="kWh" data-fix="1" data-color="#FF0000" class="great right"></div></td>Sooo, nun habe ich von dir gelernt, dass man Text ja auch abhängig von Readings machen kann. (Waschmaschine, Trockner, Spülmaschine).
Das Ganze geht mit "data-substitution"
Wie bekomme ich es aber bei dem o. g. Code hin, dass der Text sich gleich am Anfang der Zeile ändert?
Bei Werten ">" 0 sollte der Text "Einspeisung" erscheinen und bei werten "<" der Text "Bezug" erscheinen.
Und weil ja bald wieder Weihnachten ist, das Ganze auch in roter und grüner Schrift....
Zitat von: B.Stromberg am 18 Januar 2023, 19:05:34
Huhu, ich schon wieder. Hoffe du hast deine tägliche Ration Valium schon genommen ;)
Mittlerweile bin ich auf "Besuche" vorbereitet ... :D
Zitat von: B.Stromberg am 18 Januar 2023, 19:05:34
Wie bekomme ich es aber bei dem o. g. Code hin, dass der Text sich gleich am Anfang der Zeile ändert?
Bei Werten ">" 0 sollte der Text "Einspeisung" erscheinen und bei werten "<" der Text "Bezug" erscheinen.
Und weil ja bald wieder Weihnachten ist, das Ganze auch in roter und grüner Schrift....
Ich hatte auch noch gelb übrig ... s. Screenshot
linke Spalte:
<td>
<div data-type="label" data-device="Dum.Energy" data-get="GridConsumptionDay" class="great left"
data-substitution='["^-?0\\.?0*$","Null","^-[0-9].*$","Bezug","^[0-9].*$","Einspeisung"]'
data-limits='[-99999,0,0.1]'
data-colors='["#FF0000","yellow","green"]'></div>
</td>
rechte Spalte:
<td>
<div data-type="label" data-device="Dum.Energy" data-get="GridConsumptionDay" class="great right"
data-unit="kWh" data-fix="1"
data-limits='[-99999,0,0.1]'
data-colors='["#FF0000","yellow","green"]'></div>
</td>
<0 ... Bezug ... rot
=0 ... Null ... gelb
>0 ... Einspeisung ... grün
Ich weiss nicht, ob es genau Deiner Vorstellung entspricht ... ist aber auch nicht "zementiert" ... einfach mal testen ...
Und wieder einmal bedanke ich mich bei dir! :)
Wenn du magst, kannst du mir per PM mal deine PayPal Adresse sagen, würde dir gern eine Kiste Bier oder ein paar Pfund Kaffee spenden!
Es ist wirklich nicht selbstverständlich, dass jemand jemandem hilft, ohne ihn vorher "niederzumachen", warum er/sie/es es denn nicht selber kann.
DANKE!
Zitat von: B.Stromberg am 18 Januar 2023, 23:43:09
Wenn du magst, kannst du mir per PM mal deine PayPal Adresse sagen, würde dir gern eine Kiste Bier oder ein paar Pfund Kaffee spenden!
Nicht nötig, ich helfe gerne.
Wenn Du trotzdem etwas spenden willst, wäre @setstate (FTUI) oder FHEM e.V. ein möglicher Empfänger ...