FTUI Neue Version chart_widget

[eki]

1) Datenwerte
Gibt es die Chance, die Datenwerte dauerhaft je Datenpunkt an den Kurven anzeigen zu lassen?

Das geht bisher nicht (frage mich gerade, warum ich das nicht schon lange eingebaut habe ). Ich schaue mal, sollte sich aber einbauen lassen.

Edit: Habe mal eine Version gemacht, bei der das gehen sollte (unten angehängt, bitte mal testen). Folgendes ist einzustellen:

Code Auswählen Erweitern


data-ptype="values"
Ein Style, der entsprechende font-size Parameter hat also z. B.:

Code Auswählen Erweitern


data-style="ftui l4sym"


Wenn Du sowohl die Texte als auch die Linien haben willst, musst Du jeweils einen Graphen für die Linie und einen für die Texte anlegen.

[ulobo60]

@eki
thx, ich teste mal heute Nachmittag.

[ulobo60]

Mein Mittags-Termin wurde gecancelt - also habe ich Zeit für das Chart Widget.

a) habe Dein neues 'widget_chart.js' reinkopiert
b) habe die Datenreihe '95_Recklinghausen' mit 'data-style=ftui l4sym' formatiert und 'data-ptype=lines' belassen
c) Ergebnis siehe angehängten Screenshot '1_7ti_lines.jpg'

d) habe dann für die Datenreihe '95_Recklinghausen' den 'data-ptype=values' gesetzt: funzt !
e) Ergebnis siehe angehängten Screenshot '2_7ti_text.jpg'

Nur... ich habe keine Ahnung, was ich in meiner HTML ändern muss, um "... sowohl die Texte als auch die Linien zugleich anzuzeigen", bzw. "... einen zweiten Graphen anzulegen ..." !

Hier meine HTML Seite mit dem "values"-Eintrag:

Code Auswählen Erweitern


<div data-type="chart"
data-device='["coronaSpreadCounties"]'
data-logdevice='["logdb"]'
data-logfile='["HISTORY"]'
data-columnspec='["coronaSpreadCounties:76sti","coronaSpreadCounties:64sti","coronaSpreadCounties:80sti","coronaSpreadCounties:66sti","coronaSpreadCounties:95sti","coronaSpreadCounties:230sti"]'
data-style='["ftui l0","ftui l1","ftui l2","ftui l3","ftui l4sym","ftui l5"]'
data-ptype='["lines","lines","lines","lines","values","lines"]'
data-uaxis='["primary","primary","primary","primary","primary","primary"]'
data-legend='["76_Neuss","64_Düsseldorf","80_Köln","66_Essen","95_Recklinghausen","230_Ebersberg"]'
data-height="680"
data-timeformat="dd\.\MM\.\"
data-minvalue="100"
data-maxvalue="200"
data-daysago_start = "4"
data-daysago_end = "-1"
data-xticks="auto"
data-yticks="20"
data-crosshair="true"
data-showlegend="true"
data-legend_horiz="true"
data-legendpos='["left","bottom"]'
class="buttons">
</div>


Kannst Du mir bitte nen entsprechenden Richtungs-Stupser verpassen?

[eki]

Du musst einfach doppelt so viele Graphen (jeweils einen für die Linie und einen für den Text) eintragen also:

Code Auswählen Erweitern


data-columnspec='["coronaSpreadCounties:76sti","coronaSpreadCounties:64sti","coronaSpreadCounties:80sti","coronaSpreadCounties:66sti","coronaSpreadCounties:95sti","coronaSpreadCounties:230sti","coronaSpreadCounties:76sti","coronaSpreadCounties:64sti","coronaSpreadCounties:80sti","coronaSpreadCounties:66sti","coronaSpreadCounties:95sti","coronaSpreadCounties:230sti"]'
data-style='["ftui l0sym","ftui l1sym","ftui l2sym","ftui l3sym","ftui l4sym","ftui l5sym","ftui l0","ftui l1","ftui l2","ftui l3","ftui l4","ftui l5"]'
data-ptype='["values","values","values","values","values","values","lines","lines","lines","lines","lines","lines"]'
data-uaxis='["primary","primary","primary","primary","primary","primary","primary","primary","primary","primary","primary","primary"]'
data-legend='["","","","","","","76_Neuss","64_Düsseldorf","80_Köln","66_Essen","95_Recklinghausen","230_Ebersberg"]'


[ulobo60]

Vielen Dank, eki - klappt natürlich
Wenn man nem Meister bei der Arbeit über die Schulter blicken darf ... ich wäre auf diese (letztlich logische) Lösung niemals allein drauf gekommen.

Nach STRG+C/STRG+V in der HTML und dem Browser-Reload zeigte das Chart nur 1 Kurve an (siehe Screenshot '3_7ti_beides1.jpg').
Den Effekt kannte ich aber schon. Trat auch nach der 1.-Installation des Devices 'coronaSpreadCounties' am 30.04./01.05. auf.
Ich machte dann das Gleiche wie vor ein paar Tagen: habe 3mal nacheinander im Device 'set reread' betätigt und alle 6 Kurven wurden mit Ihren Werten dargestellt. Warum 3mal und nicht 5mal? Keine Ahnung. Liegt wohl irgendwie an der Funktionsweise des jsonMod.
Das Ergebnis kann man im Screenshot '4_7ti_beides2.jpg' betrachten. Es funktioniert.
Ich hatte nur zwischendurch die 'data-daysago'-werte verändert.

Dass jetzt zu viele Werte angezeigt werden, liegt an dem reread-Gedönse. Das ist aber m.E. nicht Deine Baustelle.
Ich werde wohl die Tage alle Datenbankeinträge dieses Devices löschen und den crontab mal allein arbeiten lassen. Der holt um 05:10 Uhr die Werte täglich ab und die Werte werden dann auch korrekt im Chart angezeigt.

Ein kleineres Problem für mich ist die Größe der Datenwerte. A bisserl kleiner wäre für mich besser.
Weißt Du evtl., wo ich die font-size der Werte verändern (verkleinern) kann?
Wenn ich mit dem Firefox-Inspecor auf eine der Zahlen zeige/klicke bekomme ich folgende Info:

Code Auswählen Erweitern


Element {
    stroke-width: 0px;
    fill: rgb(187, 187, 187);
    font-size: 24px;
    text-anchor: middle;
    font-weight: undefined;
}


Es handelt sich um das generische Element 'Inline'. Ich finde dazu leider keine Einträge in den von mir verwendeten css-Dateien.
Hast Du evtl. noch'n Tipp für mich wo ich das ändern kann?
Jedenfalls funktioniert das Widget so, wie es soll. Nochmals danke, eki.

[eki]

Du kannst alles, was das Aussehen der Graphen betrifft (also auch die Größe des Textes) über CSS files bestimmen. In Deinem Beispiel hast Du als Style "ftui l4sym" angegeben. Das Widget verknüpft Deine Kurve dadurch mit der CSS Klasse l4sym und die ist im File ftui_chart.css im css Ordner Deiner FTUI Installation abgelegt. Dort ist die Fontgröße eigentlich auf 12 pixel definiert (warum Du da 24px hast, weiß ich nicht). Dort eine Änderung zu machen ist aber nicht angeraten, weil die sonst bei jedem Update von FTUI überschrieben würde.

Was Du machen solltest, ist eine Datei anzulegen (falls es die nicht schon gibt), in der Du Deine Einstellungen machst. Bei mir heißt die fhem-tablet-ui-user.css, steht im css Ordner der FTUI Installation (also unter www/tablet/css im Standardfall) und ist im Header des Basis html Files eingebunden, in Deinem Basis html File sollte also irgendwo oben zwischen <head> und </head> folgende Zeile stehen (falls nicht, einfach reinkopieren, am Besten hinter die Zeile in der ...fhem-tablet-ui.js... steht):

Code Auswählen Erweitern


<link rel="stylesheet" href="./css/fhem-tablet-ui-user.css" />


Wenn Du nur die Textgröße ändern willst, dann kannst Du folgendes machen. In der Datei fhem-table-ui-user.css folgendes eintragen:

Code Auswählen Erweitern


.smallFont
{
stroke-width:10px !important;
font-size: 10px !important;
}

Und danach bei der Chartdefinition statt "ftui l4sym" "ftui l4sym smallFont" verwenden.

Man kann da relativ viel machen. Ein Beispiel wäre, folgendes zusätzlich in die Datei fhem-table-ui-user.css einzufügen. Dann werden die Texte mit einem Hintergrund versehen und sind möglicherweise besser zu lesen (das ist aber sicher Geschmackssache  ).

Code Auswählen Erweitern


.smallFont > text
{
filter: url(#filterbackground);
}


Statt "#filterbackground" hätte ich auch noch "#glow", "#neon" oder "#drop-shadow" anzubieten, viel Spaß beim Ausprobieren.

[ulobo60]

Vielen Dank für Deine ausführliche und (für mich) sehr verständliche Beschreibung der Formatierungs-Zusammenhänge zwischen HTML und CSS (und Modul-Code).
In der Tat setze ich seit ca. 3 Jahren statt der 'fhem-tablet-ui-user.css' eine 'lobo60.css' ein, die auch in meiner 'index.html' als letzte aufgerufen wird. Im Laufe der Zeit hatte ich allerdings gelernt, dass durch spezielle aber notwendige Aufrufe von Modul-Code die Prioritätenreihenfolge der css-Dateien wieder geändert werden kann.
Aus dieser 'lobo60.css' stammt übrigens der Wert '24px' 

Den Zusatz 'important!' hatte ich in der Vergangenheit gemieden, weil dadurch die Optik von Elementen in bereits bestehenden FTUI-Siten zerschossen wurden.
Hier aber hast Du vollkommen Recht: 'important!' als Zusatz hat's gebracht und hat meine anderen Charts auch nicht zerschossen. Danke nochmals für den Tipp!

etwas OUT OF TOPIC:
Das FHEM-Update fahre ich ca. alle 4 Wochen.
Habe mir dazu vor Jahren eine kleine Textdatei gespeichert, die meinen Update-Vorgang als Reminder für mich beschreibt - bzw. worin die Befehle stehen, die ich zum Update brauche.
Ich arbeite aus Sicherheitsgründen mit 2 FTUI-Verzeichnissen: ein Backup Verzeichnis (/opt/fhem/www/tablet) und ein Arbeits-/Darstellungs-VZ (/opt/fhem/www/tablet_prod), das ich auch im Browser aufrufe.
Vor dem FHEM-Update kopiere ich 'tablet_prod' nach 'tablet', fahre das Update und kopiere anchließend von 'tablet' nach 'tablet_prod' zurück. So habe ich immer ein backupdas vor dem letzten

Falls es noch andere Sicherheitsfanatiker wie mich gibt, hier meine Notizen dazu:

Code Auswählen Erweitern


UPDATE ALL des tablet_prod-Verzeichnisses
-----------------------------------------
mit Putty (Terminal) ins Verzeichnis stellen: cd /opt/fhem/www - dann:
sudo rsync -a --delete tablet_prod/* tablet

danach vom Browser-FHEM aus:
update all
(evtl. vorher schauen, was sich ändert mit: update check)

danach vom Browser-FHEM aus:
shutdown restart

danach mit Putty vom VZ cd /opt/fhem/www aus zurück synchronisieren:
sudo rsync -a --delete tablet/* tablet_prod

danach vom Browser-FHEM aus: shutdown restart


Jetzt mache ich einige (wenige) Handkorrekturen in der 'ftui_chart.css'

Manuelle Korrekture der Charts-CSS:
mit WinSCP in den Pfad: cd /opt/fhem/www/tablet_prod/css
und folgende Änderungen per Hand in "ftui_chart.css" machen:

Code Auswählen Erweitern


a) Zeile 02: auskommentieren von => @import "../../pgm2/svg_style.css";

b) Zeilen 12 bis 15: überschreiben mit...
.text.axes {
fill: #ffffff;
font-size: 12px;
}


a) Die svg-Styles brauche ich nicht. Der Eintrag zerstört aber meine FTUI Vollbild-Darstellung auf dem Tablet (erzeugt Laufleisten rechts und unten).
b) werde ich mal auf Aufnahme in meine 'lobo60.css' mit 'important!' überprüfen!
OFF TOPIC - Ende

Danke für den Tipp zur Änderung der Textgröße für die Zahlen im Chart. Suppi!
Deine Vorschläge zu "#filterbackground" etc. sind für mich auch spannend. Werden nachher mal gleich getestet
eki - vielen Dank für Deine vielen und verständlichen Hilfen.

[ulobo60]

Ist ein toll variables widget! Ich spiele immer noch rum mit den Darstellungen von Linien+Zahlen  .
Hätte noch eine Frage:
Wie kann ich auf der y-Achse eine feste rote Linie beim Wert '130' darstellen (Thema: 7-Tage-Inzidenzen) ?

[eki]

Das geht über Logproxy (hast Du ja schon in FHEM definiert soweit ich mich erinnere) mit dem Feature "Func:logProxy_values2Plot". Beispiel (ist ein ganz normaler Graph, daher nur die wesentlichen beiden Einstellungen, das Aussehen kannst Du also mit den bekannten Einstellungen beiinflussen):

Code Auswählen Erweitern


data-logdevice='["myLogProxy",...]
data-columnspec='["Func:logProxy_values2Plot([[$from,130],[$to,130]])",...]


[ulobo60]

Danke für Deine schnelle Antwort, eki.
Hab's so eingebaut - mit data-ptype="cubic" schaut's gut aus.
Merci vielmals.

[ulobo60]

Habe mein aktuelles Chart zur "7-Tage-Inzidenz" unten beigefügt.
Bin eigentlich sehr zufrieden und glücklich damit.
Als "ewiger Pingel" hätte ich trotzdem noch eine klitzekleine Frage.
Ich finde einfach keine CSS-Eigenschaft(en), um den Kasten um die Legende unten links in der Höhe kleiner zu machen.
Oder die Kastengröße zu belassen und den Schriftabstand 'bottom' größer bzw. 'top' kleiner zu machen - damit' schön akkurat aussieht
Darf auch ruhig '!important' beinhalten, da das mein einziges Chart im FTUI ist, das eine Legende hat.
Hat jemand ne Lösung dafür?

[somansch]

Ich beschäftige mich auch gerade mit einer neuen Darstellung der aktuellen Corona-Lage für ausgewählte Landkreise bzw. Städte.

Mit der Class "noticks nobuttons" werden die kleinen 7-Tage-Charts in 2 Sekunden aufgebaut. Nun ist es aber sinnvoll auch die y-Achse mit den Inzidenzwerten anzuzeigen. Also in class "noticks" entfernt. Dies hat zur Folge, dass das Laden 3 Minuten braucht!

Ich arbeite mit Templates. Im Anhang die Content und die Template-Datei, sowie das verwendete Logfile.

Irgendeine Idee?

Vielen Dank vorab und viele Grüße
Andreas

[somansch]

Ich habe jetzt noch ein wenig weiter getestet. Es hängt definitiv nicht mit den Templates oder Styles zusammen. Habe eine einfache index.html erstellt und dort d as Chart defininiert:

Code Auswählen Erweitern

<div class=""
data-type="chart"
data-logdevice='["FileLog_coronaSpreadBavaria"]'
data-columnspec='["4:SK_Muenchen_c7p100k\\x3a:"]'
data-style="ftui l10"
data-ptype="lines"
data-xticks="1d"
data-xticks_round="auto"
data-yticks="auto"
data-y_margin="20"
data-ytext="Inzidenz"
data-width="100%"
data-height="100%"
data-nofulldays="true"
data-daysago_start="168h"
data-daysago_end="0h"
data-timeformat="dd.MM.."
data-prefetch="true"
data-timeranges='[
["Aktueller Monat","0M","-1M"],
["Letzter Monat","1M","0M"],
["Letzte 3 Monate","3M","0M"],
["Aktuelle Woche","0W","-1W"],
["Letzte Woche","1W","0W"]
]'
></div>

Leider dauert auch hier das Laden ewig... 

Ich verwende die angehängte Widget Version 2.11.0 per FHEM Update.

[eki]

Ich habe jetzt noch ein wenig weiter getestet. Es hängt definitiv nicht mit den Templates oder Styles zusammen. Habe eine einfache index.html erstellt und dort d as Chart defininiert:

Code Auswählen Erweitern

<div class=""
data-type="chart"
data-logdevice='["FileLog_coronaSpreadBavaria"]'
data-columnspec='["4:SK_Muenchen_c7p100k\\x3a:"]'
data-style="ftui l10"
data-ptype="lines"
data-xticks="1d"
data-xticks_round="auto"
data-yticks="auto"
data-y_margin="20"
data-ytext="Inzidenz"
data-width="100%"
data-height="100%"
data-nofulldays="true"
data-daysago_start="168h"
data-daysago_end="0h"
data-timeformat="dd.MM.."
data-prefetch="true"
data-timeranges='[
["Aktueller Monat","0M","-1M"],
["Letzter Monat","1M","0M"],
["Letzte 3 Monate","3M","0M"],
["Aktuelle Woche","0W","-1W"],
["Letzte Woche","1W","0W"]
]'
></div>

Leider dauert auch hier das Laden ewig... 

Ich verwende die angehängte Widget Version 2.11.0 per FHEM Update.

Könntest Du noch ein Stück Deines Logs posten, dann kann ich das leichter nachstellen und sehen woran es liegt.

[somansch]

Könntest Du noch ein Stück Deines Logs posten, dann kann ich das leichter nachstellen und sehen woran es liegt.

Ich hatte das log bereits verkleinert, um die Loggröße als Ursache auszuschliessen. Anbei das aktuelle Log mit den zusätzlichen Einträgen von heute.