Beiträge von Thomas Fu

Für die rechtsbündige Anordnung habe ich doch noch eine einfache Lösung mit "text-align" in der W-Section gefunden:

>W
Datum Uhrzeit   {m} %s(2.0day)%.%s(2.0month)%.%s(2.0year)%      %s(2.0hours)%:%s(2.0mins)%:%s(2.0secs)%       
*Leistung       {m} %0.0sml[1]% W
*Leist. L1 L2 L3{m} %0sml[4]% W| %0sml[5]% W| %0sml[6]% W
<hr>            {m} <hr>
; Bezugsdaten anzeigen
*Bezug          {m} <p style="text-align:right;"> %0,2sml[2]% kWh         </p>
Tagesbezug      {m} <p style="text-align:right;"> %0,2(sml[2]-dval)% kWh  </p>
Monatsbezug     {m} <p style="text-align:right;"> %0,2(sml[2]-mval)% kWh  </p>
Jahresbezug     {m} <p style="text-align:right;"> %0,2(sml[2]-yval)% kWh  </p>
<hr>            {m} <hr>
; Exportdaten anzeigen
*Export         {m} <p style="text-align:right;"> %0,2sml[3]% kWh         </p>
Tagesexport     {m} <p style="text-align:right;"> %0,2(sml[3]-dval2)% kWh </p>
Monatsexport    {m} <p style="text-align:right;"> %0,2(sml[3]-mval2)% kWh </p>
Jahresexport    {m} <p style="text-align:right;"> %0,2(sml[3]-yval2)% kWh </p>
; -- END SCRIPT --
#

Das sieht dann so aus:

Leider vergrößern sich dadurch die Zeilenabstände ein wenig. Dagegen habe ich leider keine Lösung gefunden.

Hallo 200ede,

danke für Deine Erläuterungen. Ich bin ein Freund des Rudimentären

Moin 2000ede,

so richtig gibt es ja auch kein Problem. Es ärgert mich nur, dass ich es nicht verstehe, warum es mit den Braille Pattern Leerzeichen nicht funktioniert.

Mit HTML kenne ich mich nur rudimentär aus und mit Ajax gar nicht.

Es funktioniert ja gut so wie es nun ist - danke Deiner Hilfe mit websensor53 0 in meiner anderen Forum-Frage. Also bitte keine weitere Energie reinstecken.

Danke für Deine Unterstützung

Die Lösung mit den Nullen vorweg habe ich auch schon ausprobiert. Die Nullen machen die Darstellung etwas unübersichtlicher und zudem wird bei einem negativen Wert das Minus-Zeichen zwischen den Nullen und der eigentlichen Zahl angezeigt (siehe Bild oben).

Auf der Tasmota Web-UI Hauptseite werden die Zahlenwerte immer automatisch aktualisiert (über Section S bei mir alle 3 Sekunden). Wenn ich das in ChatGPT richtig verstanden habe, muss ich ein Auto-Refresh per Meta-Tag einrichten. Dann wird die komplette Seite immer wieder neu aufgebaut. Ich hatte so etwas schon mal für die Web-UI Hauptseite eingerichtet, da ich auch 4 Grafiken über google charts anzeigen lasse. Das wirkt dann aber alles hektisch. Und für die Grafiken reichen auch längere Intervallzeiten von z.B. 5 Minuten aus.

Ich würde einfach nur gerne die Anzeige für die Werte platzsparender darstellen, damit die Seite nicht zu lang wird.

Trotzdem Danke für Deine Hilfe . Falls ich noch eine Lösung finde, werde ich diese hier posten.

Ich möchte die Werte des Stromzählers rechtsbündig anordnen.

Mein Plan war, die Zahl in String umzuwandeln und den "Freiraum" vor den Zahl mit Leerzeichen aufzufüllen.

Leider werden Leerzeichen direkt am Anfang der Zeile in der Anzeige ignoriert. Zwei oder mehr Leerzeichen hintereinander werden auch nur als ein Leerzeichen angezeigt. Andere Zeichen wie Punkt oder Unterstrich werden direkt am Anfang und auch mehrfach angezeigt, sehen aber optisch nicht aus. Auch ist der Punkt von der Breite her schmaler (also proportional) und die Ziffern nichtproportional.

Des Weiteren werden z.B. bei einer gewünschten 12-stelligen Anzeige des Wertes -123 nur die 8 Punkte für den Freiraum und -1 angezeigt, aber die 23 nicht mehr. Ich habe festgestellt, dass hierfür ssize (bei >D) erhöht werden muss. Standardmäßig beträgt dieser Wert ja schon 19 Zeichen, sodass ich mir das bei 12 Zeichen nicht erklären kann.
Nachfolgend der Screenshot mit vorweg einigen anderen Formatierungen als Zahl und auch der dazugehörige Code:

D
; Inspiriert von
; https://forum.creationx.de/forum/index.php?thread/4198-web-ui-script-betr%C3%A4ge-rechtsb%C3%BCndig-und-zahl-mit-komma-dezimal/&dtID=44053&highlight=script#dt44053
; Eine Zahl ohne Dezimalstellen in einen String mit vorgegebener Stellenanzahl umwandeln.
; Falls die Zahl doch Dezimalstellen hat, werden diese abgeschnitten, nicht gerundet.
; Die Funktion round(x) funktioniert nur mit einem Punkt als Dezimalzeichen, nicht mit einem Komma!

zahl=0       ; Zahl
strzahl=""   ; Zahl als string 
stellen=0    ; Anzahl der Gesamtstellen der auszugebenden Zahl (inkl. Leerzeichen)
anzahl=0     ; Stellenzähler
cnt=0        ; Schleifenzähler

>B
zahl=-123
stellen=12

#ZahlRechts
; Zahl in String umwandeln. Dabei werden die Dezimalstelle einfach abgeschnitten
strzahl=s(0,0zahl)
; Anzahl der Zeichen der Zahl berechnen (das Minus-Zeichen wird mitgezählt)
anzahl=sl(strzahl)
; Falls die Zahl weniger Anzahl an Zeichen als gewünscht hat, werden die fehlenden Stellen linksseitig aufgefüllt.
if anzahl<stellen {
    for cnt anzahl+1 stellen 1
        anzahl+=1
        strzahl="."+strzahl       ; seltsamerweise bei 12 Stellen von ssize abhängig
        ; U+2800 BRAILLE PATTERN BLANK, seltsamerweise von ssize noch stärker abhängig
        ; strzahl="⠀"+strzahl
    next
}

>W
zahl{m}%zahl%
0zahl{m}%0zahl%
0,1zahl{m}%0,1zahl%
8,1zahl{m}%8,1zahl%
strzahl{m}%strzahl%
{m}12345678901234567890123456
%=#ZahlRechts
stellen{m}%0stellen%
anzahl{m}%0anzahl%
#

Ziel ist es nun, den Braille Pattern Blank als Füllzeichen zu verwenden. Dieser nimmt genauso viel Platz wie eine Ziffer ein und lässt sich auch am Anfang und auch mehrfach hintereinander anwenden. Nur muss dann ssize noch größer gewählt werden als beim Punkt, was ich nicht nachvollziehen kann.

Warum ist das alles so? Hat einer eine Erklärung oder vielleicht sogar einen Lösungsansatz parat? Danke.

Ich habe Deinen Vorschlag getestet. Er funktioniert . Auf den Trick mit "=>Websensor53 0" wäre ich nie gekommen.

Im Abschnitt >S hat sich beim Auslesen der 6 sml-Werte nur einer kleiner Kopierfehler eingeschlichen. "0.0=" muss jeweils gelöscht werden.

Im Abschnitt >" klappt es in der Zeile Phasen mit "{m}" zwischen dem 2. und 3. Wert nicht wirklich. Der zweite Wert rutscht ganz nach rechts und der 3. Wert ist ganz verschwunden bzw. man wischt weiter nach rechts.
Ich habe daraufhin einfach anstelle {m} ein Leerzeichen eingefügt. Die Anzahl der Leerzeichen dazwischen spielen keine Rolle:

Phasen (kWh) {m} %0v_w1%    %0v_w2%    %0v_w3%

Bei den 2 Zeilen beginnend mit Phasen muss als Einheit natürlich Watt anstatt kWh stehen! 🫣

Vielen Dank 2000ede für die tolle Lösung

Danke für die Antwort. Ich kann das leider erst morgen testen. Die Zeile mit Websensor53 ist wohl entscheidend. Ich gebe morgen Bescheid.

Erst einmal Danke für deine Antwort. Damit ist mir aber leider nicht geholfen.

Ich möchte gerne Zeilen in der Anzeige einsparen, da noch drei Charts folgen. Das hätte ich in meiner Anfrage mit aufführen sollen 🤦‍♂️. Sorry.

Die drei Werte habe ich schon in einem String zusammen gestellt. Jetzt würde ich nur gerne die Anzeige der drei Zeilen mit den Werten unterdrücken.

Ich kann bei meinem Stromzähler unter anderem für die 3 Phasen die jeweilige Leistung auslesen. Diese werden dann untereinander angezeigt:

Leistung -7213 W
Bezugsenergie 419,712 kWh
Exportenergie 5922,802 kWh
Leistung L1 -2339 W
Leistung L2 -2447 W
Leistung L3 -2428 W

Der entsprechende Code-Abschnitt dafür sieht wie folgt aus:
>M 1
+1,5,s,16,9600
1,77070100100700ff@1,Leistung,W,Wirkleistung,0
1,77070100010800ff@100000000,Bezugsenergie,kWh,Bezug_kWh,3
1,77070100020800ff@100000000,Exportenergie,kWh,Export_kWh,3
1,77070100240700ff@1,Leistung L1,W,Wirkleistung_L1,0
1,77070100380700ff@1,Leistung L2,W,Wirkleistung_L2,0
1,770701004C0700ff@1,Leistung L3,W,Wirkleistung_L3,0

Gibt es eine Möglichkeit, diese ausgelesenen Stromzähler-Daten direkt in einer Zeile anzuzeigen? Z.B.:

Leistung -7213 W
Bezugsenergie 419,712 kWh
Exportenergie 5922,802 kWh
Leistung L1 L2 L3 -2339 W -2447 W -2428 W

Ich habe dazu bisher nichts gefunden.

Danke

Hallo gemu2015,

vielen Dank für die Lösung. Da wäre ich nie drauf gekommen, dass is(...) einen Wert zurück gibt .

Ich bin immer davon ausgegangen, dass is(...) ein besonderes string array ist. In diesem Fall, durch die 0 nach der öffnenden Klammer, ein nur Lesen string array. In der Dokumentation wird leider auch nichts darüber erwähnt:

Glück-Auf aus dem Ruhrgebiet

Das Problem konnte ich bisher nicht lösen.

Ein Update des SmartMeterReader-Air (SMR-Air) von bitShake (ESP32-C3-MINI-1) von Tasmota v14.1.0 auf v14.6.0 (von bitShake angepasste Version) hat leider keinen Erfolg gebracht. Auch ein Update des bitShake SMR von v1.2.2 auf v1.3.3 brachte nichts.

Der Fehler tritt auch mit der Extension "Tasmota Script Language Support" unter Visual Studio Code auf. Am Script Editor liegt es also nicht.

Mir ist noch aufgefallen, dass der Übertragungsfehler nicht auftritt, wenn ich das string array kürze. Bis zu

is(0 "Jan|Feb|Mär|Apr|Mai|Jun|Ju|")

funktioniert die Übertragung noch. Füge ich noch ein weiteres Zeichen hinzu, kommt es zu diesem Übertragungsfehler. Liegt es vielleicht am ESP32-C3-MINI-1?

Ich bin für jeden Hinweis zu haben .

Hallo in die Runde,
ich nutze als Stromzähler den SmartMeterReader-Air (SMR-Air) von bitShake (ESP32-C3-MINI-1) mit Tasmota v14.1.0 (von bitShake).
Darauf läuft ein Tasmota Script Google Chart SML von Ottelo (https://ottelo.jimdofree.com/stromz%C3%A4hl…#SkriptDownload).

Bei der Übertragung vom ScriptEditor auf den SMR-Air erhalte ich immer eine Fehlermeldung. Die Ursache konnte ich durch Löschen von Codezeilen ausfindig machen. Es handelt sich um die is(0... Anweisung.

Wenn ich zwischen dem is und der Klammer ein Leerzeichen setze, wird das Script einwandfrei übertragen. Wenn ich dann im Browser über Werkzeuge -> Skript konfigurieren das Leerzeichen wieder lösche, funktioniert auch das Script einwandfrei.

Auf einem ESP8266 mit angepasstem Tasmota v13.4.0 von Ottelo habe ich dagegen keine Probleme.

Hat einer eine Ahnung, warum dies so ist? Ich bin da ratlos - bin aber auch nicht der Profi in Tasmota Script zu programmieren.

Moin,

eins vorweg: Das Grundgerüst für diesen Code habe ich Ottelo von der folgenden Seite zu verdanken:

Ich habe einen Lösungsweg mit dem Datentyp „timeofday“ gefunden:

Datum und Uhrzeit  |  Charts  |  Google for Developers

developers.google.com

Der Datentyp timeofday setzt sich immer aus Stunde, Minute, Sekunde und optional Millisekunde zusammen, z.B. [8,14,1,13] - 8 Stunden, 14 Min, 1 Sek., 13 Millisek..

Der aktuelle Datensatz wird im Chart rot dargestellt.

Da bei einer Liniendarstellung der Datenpunkt nicht gezielt mit der Maus oder auch mit dem Finger ausgewählt werden kann (siehe Versatz des Mauszeigers):

wurde noch eine transparente Säulendarstellung hinzugefügt, die sich sehr gezielt auswählen lässt:

Damit der Code auch für Anfänger übersichtlicher ist, habe ich neben der unübersichtlichen Programmierschreibweise den laufenden Code optisch lesbarer direkt darunter aufgeführt. Der unübersichtliche Code beginnt mit einem Semikolon und danach ohne Leerzeichen direkt weiter. Leider frisst die übersichtlichere Schreibweise aber Speicher, der bei einem ESP 8266 sehr begrenzt ist.

Das Script habe ich als Anlage angehängt.

Ich habe die Erfahrung gemacht, dass bei mehr als 285 Zeichen in einer Befehlszeile eine neue Befehlszeile angefangen werden muss! Der über 285 Zeichen darüber hinaus gehende Code in der Befehlszeile wurde einfach nicht beachtet.

Viel Erfolg beim Umgang mit den google charts.

Moin,

ich habe mal weiter nach einer Lösung für einen Zeitintervall von 5 Minuten gesucht und bin auf der Tasmota -> Scripting Language Seite
Scripting - Tasmota
unter Google Charts auf den Type Timeline gestoßen:
- T=Timeline (special type arrays contains start,stop pairs in minutes timeofday

Zu timeofday habe ich auf dieser Seite etwas gefunden:

Datum und Uhrzeit  |  Charts  |  Google for Developers

developers.google.com

Aber ich komme nicht weiter. Ich habe mal ein kleines Testprogramm nur für das Erstellen eines 24h-Charts geschrieben mit der Zeile wcs var chart=new google.visualization.Timeline(document.getElementById('day'));
Es wird aber kein Chart dargestellt. Ich vermute, dass ich nach arrayToDataTable bei der Syntax für die Werte des Datensatzes was gehörig falsch mache. Kann mir hier einer helfen? Das wäre prima.

>D 40
IP=192.168.178.89

; Tagestabelle: alle 5 Min. ein Wert x 12 Werte pro 1h x 24h = 288 Werte
M:p:tbez=0 288
; Counter für Array
cnt=0
; Zähler für die Stunden von 0 bis 23 für 5-Minutenintervall
zh=0
; Zähler für die 5-Minuten Intervalle  von 0 bis 11 für 5-Minutenintervall
zm=0

; -- BOOT --
>B
; erst einmal alle Datenwerte auf 0 setzen
for cnt 1 288 1
	tbez[cnt]=0
next

; -- SUB --
; Netzbezug 24h-Tabelle mit fester Horizontalachse von 0 bis 24 Uhr
#24hsub
	wcs <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
	wcs <script type="text/javascript">google.charts.load('current',{packages:['corechart']});</script>
	wcs <div id="day" style="text-align:center;width:400px"></div>
	wcs <script language="JavaScript">function drawChart(){
	wcs var cssc={'headerRow':'hRow','rowNumberCell':'hCol','tableCell':'tCell'};
	wcs var data=google.visualization.arrayToDataTable([['Start','Bezugsleistung (W)'],
	cnt=0
	; den Counter (12x24=288, passt also genau für 5-Minutenintervalle für 24 Stunden) in hh:mm umrechnen
	; Stunden von 0 ... 23 hochzählen
	for zh 0 23 1
		;5-Minutenblöcke von 0 bis 11 hochählen
		for zm 0 11 1
			; den Counter für das Array ebenfalls hochzählen
			cnt=cnt+1
			wcs [[%s(2.0(zh))%, %s(2.0(zm))%,0],%tbez[cnt]%],
		next
	next
	wcs ]);
	wcs var options={chartArea:{left:45,width:'88%%'},hAxis:{format:'HH:mm'}};
	wcs var chart=new google.visualization.Timeline(document.getElementById('day'));
	wcs chart.draw(data,options);}google.charts.setOnLoadCallback(drawChart);</script>

; -- WEB INTERFACE --
>W
%=#24hsub
#

Moin,
ich möchte mit Google Chart ein 24 Stunden Diagramm für den Stromverbrauch erstellen. Die x-Achse soll dabei von 0 bis 24 beschriftet werden und alle 5 Minuten einen Messwert darstellen. Die x-Achsen Beschriftung bekomme ich zwar im 2 Stunden Intervall hin, aber die Beschriftung wird schräg angezeigt. Außerdem wird die Zeit in Dezimalstellen angezeigt, wenn die Maus darüber fährt. Ich verwende für die x-Achsenbeschriftung einen Zähler (cnt) von 0-288 den ich durch 12 teile. Entspricht alle 5 Min. ein Wert.

Hier das Testscript dazu:

>D 40
; -- ARRAYS --
; 24-Stunden-Tabelle Bezugsleistung: alle 5 Min. ein Wert   x 12 Werte pro 1h   x 24h = 288 Werte in 24h
M:p:hbez=0 288

; -- VARS --
cnt=0

; -- BOOT --
>B
for cnt 0 288 1
	hbez[cnt]=cnt*40
next

; -- SUB --
; Bezugsleistung über 24 Stunden grafisch darstellen 
#24hsub
	wcs <div id="day" style="text-align:center;width:400px"></div>
	wcs <script language="JavaScript">function drawChart(){
	wcs var cssc={'headerRow':'hRow','rowNumberCell':'hCol','tableCell':'tCell'};
	wcs var data=google.visualization.arrayToDataTable([['Tag','Bezugsleistung (W)'],
	for cnt 0 288 1
		wcs [%2(cnt/12)%,%hbez[cnt]%],
	next
	wcs ]);
	; in 1er-Schritten von 0-24: zeigt diagonale Beschriftung in 2er-Schritten an
	wcs var options={chartArea:{left:45,width:'88%%'},legend:'none',title:'Bezugsleistung - Intervall: 5 Min.',vAxis:{format:'# W',gridlines:{minSpacing:10}},hAxis:{title:'Uhrzeit',ticks:[0,2,4,6,8,10,12,14,16,18,20,22,24]}};
	wcs var chart=new google.visualization.LineChart(document.getElementById('day'));
	wcs chart.draw(data,options);}google.charts.setOnLoadCallback(drawChart);</script>

; -- JEDE SEKUNDE --
>S

; -- WEB INTERFACE --
>W
; Lade google chart javascript (muss manuell hier geladen werden, wenn im Skript nicht gc() verwendet wird!!)
$<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
$<script type="text/javascript">google.charts.load('current',{packages:['corechart']});</script>

%=#24hsub

; -- END SCRIPT --
#

Gibt es eine Möglichkeit die Anzeige der Uhrzeit so zu ändern, dass wenn ich mit der Maus darüber fahre statt z.B. 15.83 15:50 angezeigt wird? Und wie schaffe ich es, Hilfsgitterlinien auf der x-Achse je Stunde darzustellen? Ich bin ratlos.

Für Ideen oder auch Vorschläge bin ich dankbar.

Thomas