Feature-Wunsch: plot.period

[whe]

Hallo Wolfram,

Du hast vor kurzem so tolle Erweiterungen an den Plots gebaut.
z.B. dass man die Blocks vergrößern kann, Daten exportieren kann usw.
eines würde mir noch sehr helfen und m.E. eine bessere Lösung bieten als die "advanced" Option.
könnten man nicht einfach ein "Blättern" realisieren? d.h. zwei Pfeile < und > mithilfe derer man einfach eine Periode zurückblättern kann.
Die Periode würde ich einfach mit "tmin" gleichsetzen.
Beispiel: wenn ich die Grafik für einen Tag anzeige: tmin=1d oder 24h würde ich gerne mit einem Klick auf den vorherigen Tag zurückgehen; usw.

keine Ahnung wie ich hier ansetzen müsste. highchart ist für mich extrem komplex; aber Du bist da wohl jetzt Experte.
würde sich das realisieren lassen ?

Gruß Wil

[wvhn]

Moin Wil,

ich sehe mir das gerne einmal an.

Innerhalb Highcharts kann man Buttons definieren, die den Zoom in einem bestehenden Plot verschieben. Der Plot selbst geht dann über eine lange Periode und man zoomt sich unterschiedliche Teile heran. Man erreicht dies mit der setExtremes()-Methode, die aber nicht ganz frei von Nebenwirkungen ist. In device.uzsugraph habe ich das schonmal gemacht.

Dein Vorschlag mit tmin bedeutet, dass man die Funktion im Widget realisieren und dort nach Tastendruck die aktuell abonnierte Serie stoppen und neu mit verändertem Zeitraum abonnieren müsste. Damit würde es möglich, dass der Anwender live Plotdaten auswählen könnte. Das klingt spannend.

Gruß
Wolfram

[wvhn]

Ein erster Prototyp für das Widget "myplot.timeshift" ist jetzt in meinem Repository.

Das Widget, das aktuell nur mit smarthomeNG und dem Offline-Treiber läuft, wird mit einem Plot verlinkt und stellt zwei Buttons zur Verfügung, mit denen der Plot in wählbaren Schritten auf der Zeitachse verschoben werden kann. Dazu werden jeweils neue Daten beim Backend angefordert.

image.png

Mit folgendem Aufruf wird der Plot "load" bei jedem Tastendruck um einen Tag verschoben:

{{ plot.period('load', ['env.system.load', 'bath.light.value'], 'avg', '1d', '', '', '', '', 'system load') }}
{{ myplot.timeshift('','load', '1d','mini') }}​

Da das Widget interne Funktionen des shNG-Treibers nutzt, ist es für andere Backends nicht geeignet. Zu einem späteren Zeitpunkt werde ich die Treiber anpassen und das Widget in eine offizielle smartVISU-Version aufnehmen.

Um das Widget verfügbar zu machen, werden die beiden myplot.* Dateien aus dem Repository in den Ordner ./dropins/widgets gelegt.

Gruß
Wolfram

[whe]

funktioniert super,

diese "advanced" plots haben diverse Nachteile (Menge der Daten, "count", Platz, usw.); das Blättern löst das genial.
über die Feinheiten der Implementierung können wir sicher noch diskutieren.

danke, Wil

[wvhn]

Wenn man das Widget in die Kopfzeile eines Blocks setzt und "head" als Typ einträgt, werden die Buttons verkleinert in der Kopfzeile angezeigt. Das Widget verträgt sich dort auch mit lib.supersize.
image.png

Eine neue Version, die zusätzlich die Serien präziser abbestellt, ist jetzt in dem o.g. Repository

Gruß
Wolfram

[wvhn]

Das Widget ist jetzt mit kleinem Update hierhin umgezogen:
https://github.com/smartVISU-newstuf...plot_timeshift

Gruß
Wolfram

[wvhn]

Eine nochmal verbesserte Version ist im develop branch. Diese ist aber nicht kompatibel zu v3.3.1, da auch die Treiber angepasst werden mussten, um Daten für einen einzelnen Plot abbestellen und abonnieren zu können.

Das Widget heißt jetzt "plot.timeshift" und funktioniert bisher nur mit dem smarthomeNG- und dem Offfline-Treiber.

Gruß
Wolfram

[whe]

Hallo Wolfram,

Wenn man das Widget in die Kopfzeile eines Blocks setzt und "head" als Typ einträgt

was mache ich falsch ?

image.png

[wvhn]

Hallo Wil,

Das Widget muss in die Kopfzeile des Blocks eingetragen werden. Siehe Inline-Doku im develop branch:

<div class="block">
	<div class="set-1" data-role="collapsible-set" data-theme="c" data-content-theme="a" data-mini="true">
		<div data-role="collapsible" data-collapsed="false">
			<h3>widget in the headline {{ plot.timeshift('', 'plot21', '1h', 'head', '1h') }}</h3>
			{{ plot.period('plot21', ['bath_plot1', 'bath_plot2', 'bath_plot3'], 'avg', '1h', 'now', 0, 100, '', '', ['#aa0', '#a00', '#00a'], ['area', 'column', 'line']) }}
		</div>
	</div>
</div>

Gruß
Wolfram

[whe]

Danke, habe alles mögliche ausprobiert.
so geht's

Gruß Wil

könnte man das in der nächsten Version auch in den Generator von SmarthomeNG integrieren.
Habe mittlerweile fast alles in den items konfiguriert
das muss dann wohl in das SHNG forum

        VorlaufTemperatur:
            name: Vorlauftemperatur
            type: num
            Soll:
                type: num
                database: 'init'
                mqtt_topic_in: HK2_VorlaufTemp_soll
            Ist:
                name: Vorlauftemperatur
                type: num
                database: 'init'
                sv_blocksize: 1
                sv_widget: "{{ plot.period('', 'item', 'max', '30d')}}"
                mqtt_topic_in: HK2_VorlaufTemp_ist

[whe]

Geht sogar mit supersize:

<div class="block" style="width:100%">
	<div class="set-2" data-role="collapsible-set" data-theme="a" data-content-theme="a" data-mini="true">
		<div data-role="collapsible" data-collapsed="false">
			<h3>{{ lib.supersize('') }}Kesseltemperatur{{ myplot.timeshift('','bud1', '1d','head') }}</h3>
			{{ plot.period('bud1', ['Buderus.Kessel.Temperatur.soll', 'Buderus.Kessel.Temperatur.ist', 'Buderus.Kessel.Temperatur.ein', 'Buderus.Kessel.Temperatur.aus', 'Buderus.Brenner.Stufe'], 'max', '24h', 'now', '', '', '288', ['soll', 'ist', 'ein', 'aus', 'Brenner'], ['', '', '#070','#a00', '#09f'], ['stair','','stair','stair', 'areastair'], '', '', '', '', '', '', '', { yAxis: [ { tickInterval: 10 } ] } ) }}
		</div>
	</div>
</div>

[wvhn]

könnte man das in der nächsten Version auch in den Generator von SmarthomeNG integrieren.
Habe mittlerweile fast alles in den items konfiguriert
das muss dann wohl in das SHNG forum

Analog zu dieser Lösung das Widget in die Eigenschaft "name" schreiben.

Gruß
Wolfram