FTUI Widget Chart - Versionsgeschichte

Pahenning am 2. August 2024 um 14:37 Uhr

2024-08-02T14:37:15Z

← Nächstältere Version		Version vom 2. August 2024, 16:37 Uhr
Zeile 1:		Zeile 1:
	Das [[{{PAGENAME}}\|Chart Widget]] ist ein Widget für [[FHEM Tablet UI]], mit dem sich verschiedenste Diagramme darstellen lassen. Die Aneinanderreihung mehrerer Werte eines Device-Readings zu einem zeitlichen Verlauf wird dabei als Graph bezeichnet.		Das [[{{PAGENAME}}\|Chart Widget]] ist ein Widget für [[FHEM Tablet UI V2]], mit dem sich verschiedenste Diagramme darstellen lassen. Die Aneinanderreihung mehrerer Werte eines Device-Readings zu einem zeitlichen Verlauf wird dabei als Graph bezeichnet.

	Es können beliebige Werte dargestellt und entsprechend der Sinnhaftigkeit, oder persönlichem Geschmack, formatiert werden. Farbe und Form der Linien sind je Graph einstellbar, auch wenn mehrere gleichzeitig in einem Diagramm angezeigt werden.		Es können beliebige Werte dargestellt und entsprechend der Sinnhaftigkeit, oder persönlichem Geschmack, formatiert werden. Farbe und Form der Linien sind je Graph einstellbar, auch wenn mehrere gleichzeitig in einem Diagramm angezeigt werden.
Zeile 870:		Zeile 870:
	{{Link2Forum\|Topic= 48450 \|Message=401006\|LinkText=Thread im FHEM-Forum}}		{{Link2Forum\|Topic= 48450 \|Message=401006\|LinkText=Thread im FHEM-Forum}}

	[[Kategorie:FHEM Tablet UI\|Chart]]		[[Kategorie:FHEM Tablet UI V2\|Chart]]

Slanesh: /* Attribute */ data-xtext_offset ergänzt

2022-04-25T10:35:42Z

Attribute: data-xtext_offset ergänzt

← Nächstältere Version		Version vom 25. April 2022, 12:35 Uhr
Zeile 129:		Zeile 129:
	\|-		\|-
	\|'''data-prefetch'''\|\|Legt fest, ob zusätzliche Daten rechts und links des Plots im Hintergrund vom Server geholt werden sollen\|\|false\|\|data-prefetch="true"		\|'''data-prefetch'''\|\|Legt fest, ob zusätzliche Daten rechts und links des Plots im Hintergrund vom Server geholt werden sollen\|\|false\|\|data-prefetch="true"
			\|-
			\|'''data-xtext_offset'''
			\|Verschiebt den Text auf der x-Achse um die angegebene Anzahl in Minuten.
			\|
			\|
	\|}		\|}
	Einige Parameter (style, maxvalue, minvalue, maxvalue_sec, minvalue_sec) können auch aus Readings dynamisch gesetzt werden wenn "<device>:<reading>" als Parameter gesetzt wird. Damit kann man z.B. in FHEM über notify etc. die Linientypen dynamisch anpassen (z.B. wenn der Wert eines Devices in einem bestimmten Bereich liegt, ändert sich die Farbe des Graphen).		Einige Parameter (style, maxvalue, minvalue, maxvalue_sec, minvalue_sec) können auch aus Readings dynamisch gesetzt werden wenn "<device>:<reading>" als Parameter gesetzt wird. Damit kann man z.B. in FHEM über notify etc. die Linientypen dynamisch anpassen (z.B. wenn der Wert eines Devices in einem bestimmten Bereich liegt, ändert sich die Farbe des Graphen).

F Klee: /* Fadenkreuz-Cursor */

2022-01-28T16:26:36Z

Fadenkreuz-Cursor

← Nächstältere Version		Version vom 28. Januar 2022, 18:26 Uhr
Zeile 433:		Zeile 433:

	===Fadenkreuz-Cursor===		===Fadenkreuz-Cursor===
	Der Fadenkreuz-Cursor zeigt die Momentanwerte, indem man ihn über die Graphen bewegt. In Desktop-Browsern reicht einfaches Bewegen ~~des~~ Maus. Unter iOS und Android wird der Cursor durch einfaches Tippen auf die neue Position bewegt.		Der Fadenkreuz-Cursor zeigt die Momentanwerte, indem man ihn über die Graphen bewegt. In Desktop-Browsern reicht einfaches Bewegen der Maus. Unter iOS und Android wird der Cursor durch einfaches Tippen auf die neue Position bewegt.

	Mit dem Attribut '''data-cursorgroup''' können Graphen gruppiert werden. Am Cursor werden dann die Momentanwerte aller Graphen gleichzeitig angezeigt, die die selbe Zahl besitzen, sobald man die Maus über einen aus der Gruppe bewegt.		Mit dem Attribut '''data-cursorgroup''' können Graphen gruppiert werden. Am Cursor werden dann die Momentanwerte aller Graphen gleichzeitig angezeigt, die die selbe Zahl besitzen, sobald man die Maus über einen aus der Gruppe bewegt.

F Klee: /* Fadenkreuz-Cursor */

2022-01-28T16:25:26Z

Fadenkreuz-Cursor

← Nächstältere Version		Version vom 28. Januar 2022, 18:25 Uhr
Zeile 14:		Zeile 14:

	==Attribute==		==Attribute==
	{\|class="wikitable"		{\| class="wikitable"
	! style="width:150px"\|Attribut		! style="width:150px" \|Attribut
	!Beschreibung		!Beschreibung
	!Standard-Wert		!Standard-Wert
Zeile 133:		Zeile 133:

	==CSS Klassen==		==CSS Klassen==
	{\|class="wikitable"		{\| class="wikitable"
	!Klasse!!Beschreibung		!Klasse!!Beschreibung
	{{FTUI Klasse\|fullsize}}{{FTUI Klasse\|noticks}}{{FTUI Klasse\|nobuttons}}{{FTUI Klasse\|small}}{{FTUI Klasse\|normal}}{{FTUI Klasse\|big}}		{{FTUI Klasse\|fullsize}}{{FTUI Klasse\|noticks}}{{FTUI Klasse\|nobuttons}}{{FTUI Klasse\|small}}{{FTUI Klasse\|normal}}{{FTUI Klasse\|big}}
	\|}		\|}


	Folgende Widget-spezifsche Klassen können zusätzlich in einer eigenen CSS-Datei definiert werden:		Folgende Widget-spezifsche Klassen können zusätzlich in einer eigenen CSS-Datei definiert werden:

	{\|class="wikitable"		{\| class="wikitable"
	!Klasse		!Klasse
	!Beschreibung		!Beschreibung
Zeile 328:		Zeile 327:
	<li style="display: inline-block;"> [[File:Quadratic.png\|thumb\|none\|350px\|Darstellung in 2D: Stil "quadratic"]] </li>		<li style="display: inline-block;"> [[File:Quadratic.png\|thumb\|none\|350px\|Darstellung in 2D: Stil "quadratic"]] </li>
	<li style="display: inline-block;"> [[File:QuadraticSmooth.png\|thumb\|none\|350px\|Darstellung in 2D: Stil "quadraticSmooth"]] </li>		<li style="display: inline-block;"> [[File:QuadraticSmooth.png\|thumb\|none\|350px\|Darstellung in 2D: Stil "quadraticSmooth"]] </li>
	</div~~></ul~~>		</div>

	Zusätzlich ist es möglich, Symbole anzeigen zu lassen. Unterstützt werden Font-Awesome ('fa-...'), Open Automation ('oa-...') und FHEM-Symbole ('fs-...')). Damit die Symbole korrekt angezeigt werden, muss im Attribut '''data-style''' der Stil <code>sym</code> gewählt werden, da sonst nur Punkte, statt der Symbole gezeichnet werden.		Zusätzlich ist es möglich, Symbole anzeigen zu lassen. Unterstützt werden Font-Awesome ('fa-...'), Open Automation ('oa-...') und FHEM-Symbole ('fs-...')). Damit die Symbole korrekt angezeigt werden, muss im Attribut '''data-style''' der Stil <code>sym</code> gewählt werden, da sonst nur Punkte, statt der Symbole gezeichnet werden.
Zeile 434:		Zeile 433:

	===Fadenkreuz-Cursor===		===Fadenkreuz-Cursor===
	Der Fadenkreuz-Cursor zeigt die Momentanwerte, indem man ihn über die Graphen bewegt. In Desktop-Browsern reicht einfaches Bewegen des Maus. Unter iOS und Android ~~kann der Cursor~~ wird der Cursor durch einfaches Tippen auf die neue Position bewegt.		Der Fadenkreuz-Cursor zeigt die Momentanwerte, indem man ihn über die Graphen bewegt. In Desktop-Browsern reicht einfaches Bewegen des Maus. Unter iOS und Android wird der Cursor durch einfaches Tippen auf die neue Position bewegt.

	Mit dem Attribut '''data-cursorgroup''' können Graphen gruppiert werden. Am Cursor werden dann die Momentanwerte aller Graphen gleichzeitig angezeigt, die die selbe Zahl besitzen, sobald man die Maus über einen aus der Gruppe bewegt.		Mit dem Attribut '''data-cursorgroup''' können Graphen gruppiert werden. Am Cursor werden dann die Momentanwerte aller Graphen gleichzeitig angezeigt, die die selbe Zahl besitzen, sobald man die Maus über einen aus der Gruppe bewegt.

Eki am 10. Februar 2021 um 09:32 Uhr

2021-02-10T09:32:10Z

← Nächstältere Version		Version vom 10. Februar 2021, 11:32 Uhr
Zeile 313:		Zeile 313:
	]'		]'
	</syntaxhighlight>		</syntaxhighlight>
	[[Datei:FTUI Widget Chart DynamicStyles.png\|thumb\|none\|~~225px~~\|dynamischer Übergang]]		[[Datei:FTUI Widget Chart DynamicStyles.png\|thumb\|none\|500px\|dynamischer Übergang]]

	===Form der Linien===		===Form der Linien===
	Das Attribut '''data-ptype''' beeinflusst die Form der Linien. Hier sind folgende Werte möglich:		Das Attribut '''data-ptype''' beeinflusst die Form der Linien. Hier sind folgende Werte möglich (in den Bildern sind zur Info zusätzlich auch immer points dargestellt):
			<div><ul>
	* <~~code~~>lines</~~code~~>		<li style="display: inline-block;"> [[File:Llines.png\|thumb\|none\|350px\|Darstellung in 2D: Stil "lines"]] </li>
	* <~~code~~>points</~~code~~>		<li style="display: inline-block;"> [[File:Points.png\|thumb\|none\|350px\|Darstellung in 2D: Stil "points"]] </li>
	* <~~code~~>steps</~~code~~>		<li style="display: inline-block;"> [[File:Steps.png\|thumb\|none\|350px\|Darstellung in 2D: Stil "steps"]] </li>
	* <~~code~~>fsteps</~~code~~>		<li style="display: inline-block;"> [[File:Fsteps.png\|thumb\|none\|350px\|Darstellung in 2D: Stil "fsteps"]] </li>
	* <~~code~~>histeps</~~code~~>		<li style="display: inline-block;"> [[File:Histeps.png\|thumb\|none\|350px\|Darstellung in 2D: Stil "histeps"]] </li>
	* <~~code~~>bars</~~code~~>		<li style="display: inline-block;"> [[File:Bars.png\|thumb\|none\|350px\|Darstellung in 2D: Stil "bars"]] </li>
	* <~~code~~>ibars</~~code~~>		<li style="display: inline-block;"> [[File:Ibars.png\|thumb\|none\|350px\|Darstellung in 2D: Stil "ibars"]] </li>
	* <~~code~~>cubic</~~code~~>		<li style="display: inline-block;"> [[File:Cubic.png\|thumb\|none\|350px\|Darstellung in 2D: Stil "cubic"]] </li>
	* <~~code~~>quadratic</~~code~~>		<li style="display: inline-block;"> [[File:Quadratic.png\|thumb\|none\|350px\|Darstellung in 2D: Stil "quadratic"]] </li>
	* <~~code~~>quadraticSmooth</~~code~~>		<li style="display: inline-block;"> [[File:QuadraticSmooth.png\|thumb\|none\|350px\|Darstellung in 2D: Stil "quadraticSmooth"]] </li>
			</div></ul>

	Zusätzlich ist es möglich, Symbole anzeigen zu lassen. Unterstützt werden Font-Awesome ('fa-...'), Open Automation ('oa-...') und FHEM-Symbole ('fs-...')). Damit die Symbole korrekt angezeigt werden, muss im Attribut '''data-style''' der Stil <code>sym</code> gewählt werden, da sonst nur Punkte, statt der Symbole gezeichnet werden.		Zusätzlich ist es möglich, Symbole anzeigen zu lassen. Unterstützt werden Font-Awesome ('fa-...'), Open Automation ('oa-...') und FHEM-Symbole ('fs-...')). Damit die Symbole korrekt angezeigt werden, muss im Attribut '''data-style''' der Stil <code>sym</code> gewählt werden, da sonst nur Punkte, statt der Symbole gezeichnet werden.
Zeile 337:		Zeile 338:
	...		...
	data-style="ftui l1sym"		data-style="ftui l1sym"
	data-ptype="fa-~~cog~~"		data-ptype="fa-cloud"
	...>		...>
	</div>		</div>
	</syntaxhighlight>		</syntaxhighlight>
			<li style="display: inline-block;"> [[File:Ssymbols.png\|thumb\|none\|500px\|Darstellung in 2D: Stil "symbol fa-cloud"]] </li>

	Die Größe der Symbole ist in der Datei <code>css/ftui_chart.css</code> auf 12px festgelegt. Dieser Wert kann in einer eigenen CSS-Datei durch Anpassung von <code>stroke-width</code> überschrieben werden.		Die Größe der Symbole ist in der Datei <code>css/ftui_chart.css</code> auf 12px festgelegt. Dieser Wert kann in einer eigenen CSS-Datei durch Anpassung von <code>stroke-width</code> überschrieben werden.
Zeile 355:		Zeile 357:

	'''data-ptype''' kann auch Inhalt im Format <code>'icon:1'</code> verarbeiten. Dann muss der zugehörige Wert in '''data-columnspec''' den Pfad zu einem Icon (z.B. für Wettervorhersagen) beinhalten. Der Y-Wert wird dann vom ersten Graphen übernommen. Weitere Ausführungen hierzu im Beispiel [[#Darstellung der Wetter Icons im Diagramm]].		'''data-ptype''' kann auch Inhalt im Format <code>'icon:1'</code> verarbeiten. Dann muss der zugehörige Wert in '''data-columnspec''' den Pfad zu einem Icon (z.B. für Wettervorhersagen) beinhalten. Der Y-Wert wird dann vom ersten Graphen übernommen. Weitere Ausführungen hierzu im Beispiel [[#Darstellung der Wetter Icons im Diagramm]].
			<li style="display: inline-block;"> [[File:Wetterchart2.png\|thumb\|none\|500px\|Darstellung in 2D: Stil "Beispiel mit icons aus Readings"]] </li>


	===Stapeln von Linien===		===Stapeln von Linien===

Ulm32b: data-margin ergänzt (vgl. Forum 8.11.2019)

2019-11-09T11:09:54Z

data-margin ergänzt (vgl. Forum 8.11.2019)

← Nächstältere Version		Version vom 9. November 2019, 13:09 Uhr
Zeile 61:		Zeile 61:
	\|-		\|-
	\|'''data-ytype_sec'''\|\|Legt fest, ob die sekundäre y Achse logarithmisch sein soll (wert "log")\|\|\|\|data-ytype_sec="log"		\|'''data-ytype_sec'''\|\|Legt fest, ob die sekundäre y Achse logarithmisch sein soll (wert "log")\|\|\|\|data-ytype_sec="log"
			\|-
			\|'''data-margin'''\|\|\|Abstand zwischen Buttons und Chart (Einheit Pixel). \|\|"0"\|\|\|data-margin="10"
	\|-		\|-
	\|'''data-y_margin'''\|\|\|Gibt die Möglichkeit, Abstände zwischen den Graphen und dem oberen Rand des Plots zu definieren (Einheit Pixel). Falls der Wert skalar ist, werden oben und unten die gleichen Abstände eingehalten. Falls ein 2D Array angegeben wird, können die Werte unten (erster Wert im Array) und oben (zweiter Wert im Array) getrennt festgelegt werden\|\|"0"\|\|\|data-y_margin='["10","20"]'		\|'''data-y_margin'''\|\|\|Gibt die Möglichkeit, Abstände zwischen den Graphen und dem oberen Rand des Plots zu definieren (Einheit Pixel). Falls der Wert skalar ist, werden oben und unten die gleichen Abstände eingehalten. Falls ein 2D Array angegeben wird, können die Werte unten (erster Wert im Array) und oben (zweiter Wert im Array) getrennt festgelegt werden\|\|"0"\|\|\|data-y_margin='["10","20"]'

All-Ex: Standardwert bei data-legendpos war vertauscht

2019-10-15T18:06:39Z

Standardwert bei data-legendpos war vertauscht

← Nächstältere Version		Version vom 15. Oktober 2019, 20:06 Uhr
Zeile 106:		Zeile 106:
	\|'''data-showlegend'''\|\|Aktiviert/deaktiviert die Anzeige der Legene. Binärwert ('true' oder 'false')\|\|'false'\|\|		\|'''data-showlegend'''\|\|Aktiviert/deaktiviert die Anzeige der Legene. Binärwert ('true' oder 'false')\|\|'false'\|\|
	\|-		\|-
	\|'''data-legendpos'''\|\|Array von zwei Werten, die die horizontale und vertikale Position der Legende festlegen ([[#Legende\|Hinweise]])\|\|'["~~top~~","~~right~~"]'\|\|		\|'''data-legendpos'''\|\|Array von zwei Werten, die die horizontale und vertikale Position der Legende festlegen ([[#Legende\|Hinweise]])\|\|'["right","top"]'\|\|
	\|-		\|-
	\|'''data-legend_horiz'''\|\|legt fest, dass die Legendeneinträge horizontal angeordnet sind (anstatt vertikal wie im default Fall)\|\|false\|\|data-legend_horiz="true"		\|'''data-legend_horiz'''\|\|legt fest, dass die Legendeneinträge horizontal angeordnet sind (anstatt vertikal wie im default Fall)\|\|false\|\|data-legend_horiz="true"

Stephan: Benötigten Parameter bei DbLog hinzugefügt

2019-08-29T13:51:52Z

Benötigten Parameter bei DbLog hinzugefügt

← Nächstältere Version		Version vom 29. August 2019, 15:51 Uhr
Zeile 199:		Zeile 199:
	<div data-type="chart"		<div data-type="chart"
	data-device="DG.wz.HZ.Heizungsventil"		data-device="DG.wz.HZ.Heizungsventil"
			data-get="measured-temp"
			data-style='["ftui l0"]'
	data-logdevice="logdb"		data-logdevice="logdb"
	data-logfile="HISTORY"		data-logfile="HISTORY"

Curt: /* Form der Linien */ +points

2019-03-27T21:28:55Z

Form der Linien: +points

← Nächstältere Version		Version vom 27. März 2019, 23:28 Uhr
Zeile 315:		Zeile 315:

	* <code>lines</code>		* <code>lines</code>
			* <code>points</code>
	* <code>steps</code>		* <code>steps</code>
	* <code>fsteps</code>		* <code>fsteps</code>
Zeile 349:		Zeile 350:
	</syntaxhighlight>		</syntaxhighlight>

	'''data-ptype''' kann auch Inhalt im Format <code>'icon:1'</code> verarbeiten. Dann muss der zugehörige Wert in '''data-columnspec''' den Pfad zu einem Icon (z.B. für Wettervorhersagen) beinhalten. Der Y-Wert wird dann vom ersten Graphen übernommen. Weitere Ausführungen hierzu im Beispiel [[#Darstellung der Wetter Icons im Diagramm]].		'''data-ptype''' kann auch Inhalt im Format <code>'icon:1'</code> verarbeiten. Dann muss der zugehörige Wert in '''data-columnspec''' den Pfad zu einem Icon (z.B. für Wettervorhersagen) beinhalten. Der Y-Wert wird dann vom ersten Graphen übernommen. Weitere Ausführungen hierzu im Beispiel [[#Darstellung der Wetter Icons im Diagramm]].

	===Stapeln von Linien===		===Stapeln von Linien===

Curt: /* Attribute */ CURRENT

2019-02-07T01:06:14Z

Attribute: CURRENT

← Nächstältere Version		Version vom 7. Februar 2019, 03:06 Uhr
Zeile 26:		Zeile 26:
	\|'''data-logdevice'''\|\|Name des Log-Device, das dargestellt werden soll, oder ein Array, um mehrere Werte in einem Diagramm darzustellen\|\|\|\|data-logdevice="FileLog_WohnzimmerHeizung"		\|'''data-logdevice'''\|\|Name des Log-Device, das dargestellt werden soll, oder ein Array, um mehrere Werte in einem Diagramm darzustellen\|\|\|\|data-logdevice="FileLog_WohnzimmerHeizung"
	\|-		\|-
	\|'''data-logfile'''\|\| Name des Log-Files, aus dem die Daten entnommen werden sollen (oder Array)\|\|'-' = aktuelle Datei\|\|data-logfile="WohnzimmerHeizung-2015.log"		\|'''data-logfile'''\|\| Name des Log-Files, aus dem die Daten entnommen werden sollen (oder Array)\|\|'-' = aktuelle Datei\|\|data-logfile="WohnzimmerHeizung-2015.log"<br>Beachte: Der Wert "CURRENT" ermöglicht die Navigation auch zu älterne Logfiles (Jahreswechsel)
	\|-		\|-
	\|'''data-columnspec'''\|\|Ermittelt den Wert aus dem Log-File, der angezeigt werden soll (oder Array)\|\|\|\|data-columnspec="4:meas.*"		\|'''data-columnspec'''\|\|Ermittelt den Wert aus dem Log-File, der angezeigt werden soll (oder Array)\|\|\|\|data-columnspec="4:meas.*"