FTUI Widget Simplechart - Versionsgeschichte

Pahenning am 3. August 2024 um 08:43 Uhr

2024-08-03T08:43:31Z

← Nächstältere Version		Version vom 3. August 2024, 10:43 Uhr
Zeile 1:		Zeile 1:
	Das [[{{PAGENAME}}\|Simplechart Widget]] ist ein Widget für [[FHEM Tablet UI]], mit dem sich einfache X/Y-Diagramme für einzelne Werte erstellen lassen. Die Werte werden direkt aus der Log-Datei gelesen.		Das [[{{PAGENAME}}\|Simplechart Widget]] ist ein Widget für [[FHEM Tablet UI V2]], mit dem sich einfache X/Y-Diagramme für einzelne Werte erstellen lassen. Die Werte werden direkt aus der Log-Datei gelesen.

	<gallery>		<gallery>
Zeile 153:		Zeile 153:
	</syntaxhighlight>		</syntaxhighlight>

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

Baumbuwe: catsort

2018-01-26T13:51:30Z

catsort

← Nächstältere Version		Version vom 26. Januar 2018, 15:51 Uhr
Zeile 153:		Zeile 153:
	</syntaxhighlight>		</syntaxhighlight>

	[[Kategorie:FHEM Tablet UI]]		[[Kategorie:FHEM Tablet UI\|Simplechart]]

Nobby1805: /* Attribute */ wie der Text schon sagt: fallende Reihenfolge ;-)

2017-11-05T15:53:01Z

Attribute: wie der Text schon sagt: fallende Reihenfolge ;-)

← Nächstältere Version		Version vom 5. November 2017, 17:53 Uhr
Zeile 26:		Zeile 26:
	\|'''data-minvalue'''\|\|Minimaler Wert, der auf der Y-Achse angezeigt werden soll. Oder ein Array zur dynamischen Ermittlung, hier werden in fallender Reihenfolge mögliche Minimalwerte aufgeführt \|\|'10'\|\|[20,10,5,0,-4,-8,-10]		\|'''data-minvalue'''\|\|Minimaler Wert, der auf der Y-Achse angezeigt werden soll. Oder ein Array zur dynamischen Ermittlung, hier werden in fallender Reihenfolge mögliche Minimalwerte aufgeführt \|\|'10'\|\|[20,10,5,0,-4,-8,-10]
	\|-		\|-
	\|'''data-maxvalue'''\|\|Maximaler Wert, der auf der Y-Achse angezeigt werden soll. Oder ein Array zur dynamischen Ermittlung, hier werden in fallender Reihenfolge mögliche Maximalwerte aufgeführt\|\|'30'\|\|[4,10,20,30,~~34,38~~]		\|'''data-maxvalue'''\|\|Maximaler Wert, der auf der Y-Achse angezeigt werden soll. Oder ein Array zur dynamischen Ermittlung, hier werden in fallender Reihenfolge mögliche Maximalwerte aufgeführt\|\|'30'\|\|[38,34,30,20,10,4]
	\|-		\|-
	\|'''data-yticks'''\|\|Abstand zwischen den horizontalen Hilfslinien (bezogen auf die Y-Achse)\|\|'5'\|\|		\|'''data-yticks'''\|\|Abstand zwischen den horizontalen Hilfslinien (bezogen auf die Y-Achse)\|\|'5'\|\|

Nobby1805: /* Attribute */ Beschreibung und Beispiel für Min- und Max-Array

2017-11-05T15:50:26Z

Attribute: Beschreibung und Beispiel für Min- und Max-Array

← Nächstältere Version		Version vom 5. November 2017, 17:50 Uhr
Zeile 24:		Zeile 24:
	\|'''data-columnspec'''\|\|Ermittelt den Wert aus dem Log-File, der angezeigt werden soll\|\|\|\|data-columnspec="4:meas.*"		\|'''data-columnspec'''\|\|Ermittelt den Wert aus dem Log-File, der angezeigt werden soll\|\|\|\|data-columnspec="4:meas.*"
	\|-		\|-
	\|'''data-minvalue'''\|\|Minimaler Wert, der auf der Y-Achse angezeigt werden soll. Oder ein Array zur dynamischen Ermittlung\|\|'10'\|\|		\|'''data-minvalue'''\|\|Minimaler Wert, der auf der Y-Achse angezeigt werden soll. Oder ein Array zur dynamischen Ermittlung, hier werden in fallender Reihenfolge mögliche Minimalwerte aufgeführt \|\|'10'\|\|[20,10,5,0,-4,-8,-10]
	\|-		\|-
	\|'''data-maxvalue'''\|\|Maximaler Wert, der auf der Y-Achse angezeigt werden soll. Oder ein Array zur dynamischen Ermittlung\|\|'30'\|\|		\|'''data-maxvalue'''\|\|Maximaler Wert, der auf der Y-Achse angezeigt werden soll. Oder ein Array zur dynamischen Ermittlung, hier werden in fallender Reihenfolge mögliche Maximalwerte aufgeführt\|\|'30'\|\|[4,10,20,30,34,38]
	\|-		\|-
	\|'''data-yticks'''\|\|Abstand zwischen den horizontalen Hilfslinien (bezogen auf die Y-Achse)\|\|'5'\|\|		\|'''data-yticks'''\|\|Abstand zwischen den horizontalen Hilfslinien (bezogen auf die Y-Achse)\|\|'5'\|\|

Markusbloch: Anpassung von -Tags nach

2017-07-26T17:57:59Z

Anpassung von <source>-Tags nach <syntaxhighlight>

← Nächstältere Version		Version vom 26. Juli 2017, 19:57 Uhr
Zeile 53:		Zeile 53:
	Damit der Refresh des Simplechart funktioniert, muss auch ein Device angegeben werden, der das Refresh triggert. Das Diagramm wird immer dann aktualisiert, wenn sich der Inhalt von '''data-get''' ändert, sowie nach jedem shortpoll-Interval (15 Minuten).		Damit der Refresh des Simplechart funktioniert, muss auch ein Device angegeben werden, der das Refresh triggert. Das Diagramm wird immer dann aktualisiert, wenn sich der Inhalt von '''data-get''' ändert, sowie nach jedem shortpoll-Interval (15 Minuten).

	<~~source~~ lang="html">		<syntaxhighlight lang="html">
	<div data-type="simplechart"		<div data-type="simplechart"
	data-device="THSensorWZ"		data-device="THSensorWZ"
Zeile 59:		Zeile 59:
	...>		...>
	</div>		</div>
	</~~source~~>		</syntaxhighlight>

	==Beispiele==		==Beispiele==
Zeile 66:		Zeile 66:
	[[File:FTUI_widget_simplechart_2.png]]		[[File:FTUI_widget_simplechart_2.png]]

	<~~source~~ lang="html">		<syntaxhighlight lang="html">
	<li data-row="4" data-col="4" data-sizex="8" data-sizey="3">		<li data-row="4" data-col="4" data-sizex="8" data-sizey="3">
	<header>CHARTS</header>		<header>CHARTS</header>
Zeile 96:		Zeile 96:
	</div>		</div>
	</li>		</li>
	</~~source~~>		</syntaxhighlight>

	===Mini-Diagramm und Details als Popup ===		===Mini-Diagramm und Details als Popup ===
Zeile 103:		Zeile 103:
	[[File:FTUI_widget_simplechart_mini.png\|200px]]		[[File:FTUI_widget_simplechart_mini.png\|200px]]
	[[File:FTUI_widget_simplechart_detailed.png\|200px]]		[[File:FTUI_widget_simplechart_detailed.png\|200px]]
	<~~source~~ lang="html">		<syntaxhighlight lang="html">
	<div data-type="popup" data-width="450px" class="">		<div data-type="popup" data-width="450px" class="">
	<div data-type="simplechart"		<div data-type="simplechart"
Zeile 130:		Zeile 130:
	</div>		</div>
	</div>		</div>
	</~~source~~>		</syntaxhighlight>

	===Diagramm in voller Größe===		===Diagramm in voller Größe===
	Durch die Verwendung der Klasse <code>fullsize</code> wird das Diagramm so groß dargestellt, wie das Gridster-Element Platz bietet.		Durch die Verwendung der Klasse <code>fullsize</code> wird das Diagramm so groß dargestellt, wie das Gridster-Element Platz bietet.

	<~~source~~ lang="html">		<syntaxhighlight lang="html">
	<li data-row="4" data-col="4" data-sizex="8" data-sizey="3">		<li data-row="4" data-col="4" data-sizex="8" data-sizey="3">
	<header>CHART</header>		<header>CHART</header>
Zeile 151:		Zeile 151:
	</div>		</div>
	</li>		</li>
	</~~source~~>		</syntaxhighlight>

	[[Kategorie:FHEM Tablet UI]]		[[Kategorie:FHEM Tablet UI]]

Standarduser: /* Attribute */

2017-02-25T10:29:51Z

Attribute

← Nächstältere Version		Version vom 25. Februar 2017, 12:29 Uhr
Zeile 14:		Zeile 14:
	!Beispiel		!Beispiel
	\|-		\|-
	\|'''data-device'''\|\|Name des FHEM-Device, das die Aktualisierung des Charts triggert\|\|\|\|data-~~logdevice~~="WohnzimmerHeizung"		\|'''data-device'''\|\|Name des FHEM-Device, das die Aktualisierung des Charts triggert\|\|\|\|data-device="WohnzimmerHeizung"
	\|-		\|-
	\|'''data-logdevice'''\|\|Name des Log-Device, das dargestellt werden soll\|\|\|\|data-logdevice="FileLog_WohnzimmerHeizung"		\|'''data-logdevice'''\|\|Name des Log-Device, das dargestellt werden soll\|\|\|\|data-logdevice="FileLog_WohnzimmerHeizung"

Standarduser: /* Attribute */ Beispiel für data-device hinzugefügt

2017-02-25T10:29:36Z

Attribute: Beispiel für data-device hinzugefügt

← Nächstältere Version		Version vom 25. Februar 2017, 12:29 Uhr
Zeile 14:		Zeile 14:
	!Beispiel		!Beispiel
	\|-		\|-
	\|'''data-device'''\|\|Name des FHEM-Device, das die Aktualisierung des Charts triggert\|\|\|\|		\|'''data-device'''\|\|Name des FHEM-Device, das die Aktualisierung des Charts triggert\|\|\|\|data-logdevice="WohnzimmerHeizung"
	\|-		\|-
	\|'''data-logdevice'''\|\|Name des Log-Device, das dargestellt werden soll\|\|\|\|data-logdevice="FileLog_WohnzimmerHeizung"		\|'''data-logdevice'''\|\|Name des Log-Device, das dargestellt werden soll\|\|\|\|data-logdevice="FileLog_WohnzimmerHeizung"

Standarduser: /* Hinweise */ Beispiel ergänzt

2017-02-20T16:28:29Z

Hinweise: Beispiel ergänzt

← Nächstältere Version		Version vom 20. Februar 2017, 18:28 Uhr
Zeile 51:		Zeile 51:

	==Hinweise==		==Hinweise==
	Damit der Refresh des Simplechart funktioniert, muss auch ein ~~device~~ angegeben werden, der das Refresh triggert. Das Diagramm wird immer dann aktualisiert, wenn sich der Inhalt von '''data-get''' ändert, sowie nach jedem shortpoll-Interval (15 Minuten).		Damit der Refresh des Simplechart funktioniert, muss auch ein Device angegeben werden, der das Refresh triggert. Das Diagramm wird immer dann aktualisiert, wenn sich der Inhalt von '''data-get''' ändert, sowie nach jedem shortpoll-Interval (15 Minuten).

			<source lang="html">
			<div data-type="simplechart"
			data-device="THSensorWZ"
			data-logdevice="FileLog_THSensorWZ"
			...>
			</div>
			</source>

	==Beispiele==		==Beispiele==

Standarduser: /* Attribute */ data-device hinzugefügt

2017-02-20T16:26:21Z

Attribute: data-device hinzugefügt

← Nächstältere Version		Version vom 20. Februar 2017, 18:26 Uhr
Zeile 7:		Zeile 7:
	</gallery>		</gallery>

	==~~Steuer-~~Attribute==		==Attribute==
	{\| class="wikitable"		{\| class="wikitable"
	!Attribut		!Attribut
Zeile 13:		Zeile 13:
	!Standard-Wert		!Standard-Wert
	!Beispiel		!Beispiel
			\|-
			\|'''data-device'''\|\|Name des FHEM-Device, das die Aktualisierung des Charts triggert\|\|\|\|
	\|-		\|-
	\|'''data-logdevice'''\|\|Name des Log-Device, das dargestellt werden soll\|\|\|\|data-logdevice="FileLog_WohnzimmerHeizung"		\|'''data-logdevice'''\|\|Name des Log-Device, das dargestellt werden soll\|\|\|\|data-logdevice="FileLog_WohnzimmerHeizung"

Standarduser: Hinweise ergänzt. Reihenfolge von Hinweisen und CSS-Klassen getauscht.

2017-02-20T16:24:45Z

Hinweise ergänzt. Reihenfolge von Hinweisen und CSS-Klassen getauscht.

← Nächstältere Version		Version vom 20. Februar 2017, 18:24 Uhr
Zeile 40:		Zeile 40:
	\|'''data-height'''\|\|Höhe des Diagramms (in % oder px)\|\|\|\|		\|'''data-height'''\|\|Höhe des Diagramms (in % oder px)\|\|\|\|
	\|}		\|}

	~~==Hinweise==~~
	~~Das Diagramm wird immer dann aktualisiert, wenn sich der Inhalt von '''data-get''' ändert, sowie nach jedem shortpoll-Interval (15 Minuten).~~

	==CSS-Klassen==		==CSS-Klassen==
Zeile 50:		Zeile 47:
	{{FTUI Klasse\|fullsize}}{{FTUI Klasse\|noticks}}		{{FTUI Klasse\|fullsize}}{{FTUI Klasse\|noticks}}
	\|}		\|}

			==Hinweise==
			Damit der Refresh des Simplechart funktioniert, muss auch ein device angegeben werden, der das Refresh triggert. Das Diagramm wird immer dann aktualisiert, wenn sich der Inhalt von '''data-get''' ändert, sowie nach jedem shortpoll-Interval (15 Minuten).

	==Beispiele==		==Beispiele==