FTUI Widget Scale - Versionsgeschichte

Ulm32b: "Needs editing" entfernt.

2025-02-03T18:26:41Z

"Needs editing" entfernt.

← Nächstältere Version		Version vom 3. Februar 2025, 20:26 Uhr
Zeile 1:		Zeile 1:
	~~{{Todo\|Vervollständigen}}~~
	Das [[{{PAGENAME}}\|Scale Widget]] ist ein Widget für [[FHEM Tablet UI V2]], mit dem eine horizontale oder vertikale Balkenanzeige erstellt werden kann.		Das [[{{PAGENAME}}\|Scale Widget]] ist ein Widget für [[FHEM Tablet UI V2]], mit dem eine horizontale oder vertikale Balkenanzeige erstellt werden kann.

Zeile 10:		Zeile 9:
	==Attribute==		==Attribute==
	{\| class="wikitable"		{\| class="wikitable"
	!Attribut		!Attribut
	!Beschreibung		!Beschreibung
	!Standard-Wert		!Standard-Wert
	!Beispiel		!Beispiel
	\|-		\|-
	\|'''data-device'''\|\|FHEM-Device, dessen Reading angezeigt werden soll\|\|\|\|Sysmon (= Device vom Typ SYSMON)		\|'''data-device'''\|\|FHEM-Device, dessen Reading angezeigt werden soll\|\| \|\|Sysmon (= Device vom Typ SYSMON)
	\|-		\|-
	\|'''data-get'''\|\|Name des Readings, das den Wert enthält\|\|STATE\|\|cpu_temp		\|'''data-get'''\|\|Name des Readings, das den Wert enthält\|\|STATE\|\| cpu_temp
	\|-		\|-
	\|'''data-min'''\|\|Minimaler Wert, der angezeigt werden soll\|\|0\|\|30		\|'''data-min'''\|\|Minimaler Wert, der angezeigt werden soll\|\|0\|\| 30
	\|-		\|-
	\|'''data-max'''\|\|Maximaler Wert, der angezeigt werden soll, oder Name des Readings, das den Maximalwert enthält\|\|100\|\|90		\|'''data-max'''\|\|Maximaler Wert, der angezeigt werden soll, oder Name des Readings, das den Maximalwert enthält\|\| 100\|\|90
	\|-		\|-
	\|'''data-orientation'''\|\|Ausrichtung des Balkens\|\|horizontal\|\|data-orientation="vertical"		\|'''data-orientation'''\|\|Ausrichtung des Balkens\|\|horizontal\|\|data-orientation="vertical"
Zeile 33:		Zeile 32:
	\|'''data-extra-tick'''\|\|Abstand hervorgehobener Skalenstriche\|\|10\|\|		\|'''data-extra-tick'''\|\|Abstand hervorgehobener Skalenstriche\|\|10\|\|
	\|-		\|-
	\|'''data-tick-color'''\|\|\|\|#eee\|\|		\|'''data-tick-color'''\|\| \|\|#eee\|\|
	\|-		\|-
	\|\|'''data-limits-get'''\|\|Herkunft dynamischer '''data-limits'''\|\|\|\|		\|\|'''data-limits-get'''\|\|Herkunft dynamischer '''data-limits'''\|\| \|\|
	\|-		\|-
	\|\|'''data-limits'''\|\|Array von Grenzen für '''data-colors'''\|\|\|\|data-limits='["30","60","80"]'		\|\|'''data-limits'''\|\|Array von Grenzen für '''data-colors'''\|\| \|\| data-limits='["30","60","80"]'
	\|-		\|-
	\|\|'''data-color'''\|\|\|\|#aa6900\|\|		\|\|'''data-color'''\|\| \|\|#aa6900\|\|
	\|-		\|-
	\|'''data-colors'''\|\|Array von Farbwerten, welche die Anzeige entsprechend der Grenzwerte von '''data-limits''' einfärben\|\|\|\|data-colors='["#dd3366","#ffcc00","#55aa44"]'		\|'''data-colors'''\|\|Array von Farbwerten, welche die Anzeige entsprechend der Grenzwerte von '''data-limits''' einfärben\|\| \|\|data-colors='["#dd3366","#ffcc00","#55aa44"]'
	\|}		\|}

Ulm32b: Beispiel vervollständigt

2025-02-03T18:22:57Z

Beispiel vervollständigt

@@ Zeile 53: / Zeile 53: @@
 Anzeige der CPU-Temperatur, welche aus SYSMON ausgelesen wird.
 <syntaxhighlight lang="html">
 <div class="row">
 	<div class="col-1-4">
@@ Zeile 66: / Zeile 91: @@
 		<div data-type="scale" data-value-interval="10" data-orientation="vertical" data-handle-diameter="0" data-height="120" data-width="35" data-device="Systemmonitor" data-get="cpu_temp_stat" data-limits='["30","60","70"]' data-colors='["#22dd22","#dddd22","#dd2222"]' data-min="30" data-max="80" data-part="2" style="margin-left: -20px !important;" class="inline darker showdeco notext"></div>
 	</div>
 </div>
 </syntaxhighlight>
 ==Weitere Informationen==
 *Ankündigung des Widgets in einem [https://forum.fhem.de/index.php/topic,80326.0.html Forumsbeitrag]

Ulm32b: Eränzungen in Tabelle, Beispiel

2025-02-03T17:36:33Z

Eränzungen in Tabelle, Beispiel

← Nächstältere Version		Version vom 3. Februar 2025, 19:36 Uhr
Zeile 15:		Zeile 15:
	!Beispiel		!Beispiel
	\|-		\|-
	\|'''data-device'''\|\|FHEM-Device, dessen ~~Reading~~ Reading angezeigt werden soll\|\|\|\|		\|'''data-device'''\|\|FHEM-Device, dessen Reading angezeigt werden soll\|\|\|\|Sysmon (= Device vom Typ SYSMON)
	\|-		\|-
	\|'''data-get'''\|\|Name des Readings, das den Wert enthält\|\|STATE\|\|		\|'''data-get'''\|\|Name des Readings, das den Wert enthält\|\|STATE\|\|cpu_temp
	\|-		\|-
	\|'''data-min'''\|\|Minimaler Wert, der angezeigt werden soll\|\|0\|\|		\|'''data-min'''\|\|Minimaler Wert, der angezeigt werden soll\|\|0\|\|30
	\|-		\|-
	\|'''data-max'''\|\|Maximaler Wert, der angezeigt werden soll, oder Name des Readings, das den Maximalwert enthält\|\|100\|\|		\|'''data-max'''\|\|Maximaler Wert, der angezeigt werden soll, oder Name des Readings, das den Maximalwert enthält\|\|100\|\|90
	\|-		\|-
	\|'''data-orientation'''\|\|Ausrichtung des Balkens\|\|horizontal\|\|data-orientation="vertical"		\|'''data-orientation'''\|\|Ausrichtung des Balkens\|\|horizontal\|\|data-orientation="vertical"
Zeile 27:		Zeile 27:
	\|'''data-font-size'''\|\|Schriftgröße\|\|12\|\|		\|'''data-font-size'''\|\|Schriftgröße\|\|12\|\|
	\|-		\|-
	\|'''data-tick'''\|\|\|\|1\|\|		\|'''data-tick'''\|\|Abstand der Skalenstriche\|\|1\|\|
	\|-		\|-
	\|'''data-value-interval'''\|\|\|\|50\|\|		\|'''data-value-interval'''\|\|Abstand der Skalenbeschriftung\|\|50\|\|
	\|-		\|-
	\|'''data-extra-tick'''\|\|\|\|10\|\|		\|'''data-extra-tick'''\|\|Abstand hervorgehobener Skalenstriche\|\|10\|\|
	\|-		\|-
	\|'''data-tick-color'''\|\|\|\|#eee\|\|		\|'''data-tick-color'''\|\|\|\|#eee\|\|
	\|-		\|-
	\|\|'''data-limits-get'''\|\|\|\|\|\|		\|\|'''data-limits-get'''\|\|Herkunft dynamischer '''data-limits'''\|\|\|\|
	\|-		\|-
	\|\|'''data-limits'''\|\|\|\|\|\|		\|\|'''data-limits'''\|\|Array von Grenzen für '''data-colors'''\|\|\|\|data-limits='["30","60","80"]'
	\|-		\|-
	\|\|'''data-color'''\|\|\|\|#aa6900\|\|		\|\|'''data-color'''\|\|\|\|#aa6900\|\|
	\|-		\|-
	\|'''data-colors'''\|\|Array von Farbwerten, ~~die~~ die Anzeige entsprechend der Grenzwerte von '''data-limits''' einfärben\|\|\|\|data-colors='["#dd3366","#ffcc00","#55aa44"]'		\|'''data-colors'''\|\|Array von Farbwerten, welche die Anzeige entsprechend der Grenzwerte von '''data-limits''' einfärben\|\|\|\|data-colors='["#dd3366","#ffcc00","#55aa44"]'
	\|}		\|}

Zeile 51:		Zeile 51:

	==Beispiele==		==Beispiele==
			Anzeige der CPU-Temperatur, welche aus SYSMON ausgelesen wird.
			<syntaxhighlight lang="html">
			<div class="row">
			<div class="col-1-4">
			<div data-type="scale" data-value-interval="10" data-orientation="vertical" data-handle-diameter="0" data-height="120" data-width="35" data-device="Systemmonitor" data-get="cpu_temp" data-limits='["30","60","70"]' data-colors='["#22dd22","#dddd22","#dd2222"]' data-min="30" data-max="80" style="margin-left: -20px !important;" class="inline darker showdeco"></div>
			</div>
			<div class="col-1-4">
			<div data-type="scale" data-value-interval="10" data-orientation="vertical" data-handle-diameter="0" data-height="120" data-width="35" data-device="Systemmonitor" data-get="cpu_temp_stat" data-limits='["30","60","70"]' data-colors='["#22dd22","#dddd22","#dd2222"]' data-min="30" data-max="80" data-part="1" style="margin-left: -20px !important;" class="inline darker showdeco notext"></div>
			</div>
			<div class="col-1-4">
			<div data-type="scale" data-value-interval="10" data-orientation="vertical" data-handle-diameter="0" data-height="120" data-width="35" data-device="Systemmonitor" data-get="cpu_temp_stat" data-limits='["30","60","70"]' data-colors='["#22dd22","#dddd22","#dd2222"]' data-min="30" data-max="80" data-part="3" style="margin-left: -20px !important;" class="inline darker showdeco notext"></div>
			</div>
			<div class="col-1-4">
			<div data-type="scale" data-value-interval="10" data-orientation="vertical" data-handle-diameter="0" data-height="120" data-width="35" data-device="Systemmonitor" data-get="cpu_temp_stat" data-limits='["30","60","70"]' data-colors='["#22dd22","#dddd22","#dd2222"]' data-min="30" data-max="80" data-part="2" style="margin-left: -20px !important;" class="inline darker showdeco notext"></div>
			</div>
			</div>
			</syntaxhighlight>
	==Weitere Informationen==		==Weitere Informationen==
	*Ankündigung des Widgets in einem [https://forum.fhem.de/index.php/topic,80326.0.html Forumsbeitrag]		*Ankündigung des Widgets in einem [https://forum.fhem.de/index.php/topic,80326.0.html Forumsbeitrag]

Pahenning am 2. August 2024 um 14:04 Uhr

2024-08-02T14:04:47Z

← Nächstältere Version		Version vom 2. August 2024, 16:04 Uhr
Zeile 1:		Zeile 1:
	{{Todo\|Vervollständigen}}		{{Todo\|Vervollständigen}}
	Das [[{{PAGENAME}}\|Scale Widget]] ist ein Widget für [[FHEM Tablet UI]], mit dem eine horizontale oder vertikale Balkenanzeige erstellt werden kann.		Das [[{{PAGENAME}}\|Scale Widget]] ist ein Widget für [[FHEM Tablet UI V2]], mit dem eine horizontale oder vertikale Balkenanzeige erstellt werden kann.

	<gallery>		<gallery>
Zeile 56:		Zeile 56:
	*Beispiel auf [https://github.com/knowthelist/fhem-tablet-ui/blob/master/test/test_scale.html GitHub]		*Beispiel auf [https://github.com/knowthelist/fhem-tablet-ui/blob/master/test/test_scale.html GitHub]

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

Originalhardy: /* Weitere Informationen */

2020-11-06T11:55:44Z

Weitere Informationen

← Nächstältere Version		Version vom 6. November 2020, 13:55 Uhr
Zeile 45:		Zeile 45:

	==CSS-Klassen==		==CSS-Klassen==
	{\|class="wikitable"		{\| class="wikitable"
	!Klasse!!Beschreibung		!Klasse!!Beschreibung
	{{FTUI Klasse\|notext}}		{{FTUI Klasse\|notext}}
Zeile 54:		Zeile 54:
	==Weitere Informationen==		==Weitere Informationen==
	*Ankündigung des Widgets in einem [https://forum.fhem.de/index.php/topic,80326.0.html Forumsbeitrag]		*Ankündigung des Widgets in einem [https://forum.fhem.de/index.php/topic,80326.0.html Forumsbeitrag]
			*Beispiel auf [https://github.com/knowthelist/fhem-tablet-ui/blob/master/test/test_scale.html GitHub]

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

Prinzkafka: /* CSS-Klassen */

2019-02-15T06:40:31Z

CSS-Klassen

← Nächstältere Version		Version vom 15. Februar 2019, 08:40 Uhr
Zeile 45:		Zeile 45:

	==CSS-Klassen==		==CSS-Klassen==
			{\|class="wikitable"
			!Klasse!!Beschreibung
			{{FTUI Klasse\|notext}}
			\|}

	==Beispiele==		==Beispiele==

Drhirn am 9. April 2018 um 08:18 Uhr

2018-04-09T08:18:52Z

← Nächstältere Version		Version vom 9. April 2018, 10:18 Uhr
Zeile 1:		Zeile 1:
			{{Todo\|Vervollständigen}}
	Das [[{{PAGENAME}}\|Scale Widget]] ist ein Widget für [[FHEM Tablet UI]], mit dem eine horizontale oder vertikale Balkenanzeige erstellt werden kann.		Das [[{{PAGENAME}}\|Scale Widget]] ist ein Widget für [[FHEM Tablet UI]], mit dem eine horizontale oder vertikale Balkenanzeige erstellt werden kann.

Baumbuwe: catsort

2018-01-26T13:52:26Z

catsort

← Nächstältere Version		Version vom 26. Januar 2018, 15:52 Uhr
Zeile 50:		Zeile 50:
	*Ankündigung des Widgets in einem [https://forum.fhem.de/index.php/topic,80326.0.html Forumsbeitrag]		*Ankündigung des Widgets in einem [https://forum.fhem.de/index.php/topic,80326.0.html Forumsbeitrag]

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

Drhirn am 1. Dezember 2017 um 10:01 Uhr

2017-12-01T10:01:52Z

← Nächstältere Version		Version vom 1. Dezember 2017, 12:01 Uhr
Zeile 46:		Zeile 46:

	==Beispiele==		==Beispiele==

			==Weitere Informationen==
			*Ankündigung des Widgets in einem [https://forum.fhem.de/index.php/topic,80326.0.html Forumsbeitrag]

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

Drhirn: Die Seite wurde neu angelegt: „Das Scale Widget ist ein Widget für FHEM Tablet UI, mit dem eine horizontale oder vertikale Balkenanzeige erstellt werden kann.
2017-12-01T09:46:10Z

Die Seite wurde neu angelegt: „Das [[{{PAGENAME}}|Scale Widget]] ist ein Widget für FHEM Tablet UI, mit dem eine horizontale oder vertikale Balkenanzeige erstellt werden kann. <gallery…“

Neue Seite
Das [[{{PAGENAME}}|Scale Widget]] ist ein Widget für [[FHEM Tablet UI]], mit dem eine horizontale oder vertikale Balkenanzeige erstellt werden kann.

<gallery>
File:ftui-widget-scale.png
File:ftui-widget-scale-red.png
File:ftui-widget-scale-vertical.png
</gallery>

==Attribute==
{| class="wikitable"
!Attribut
!Beschreibung
!Standard-Wert
!Beispiel
|-
|'''data-device'''||FHEM-Device, dessen Reading Reading angezeigt werden soll||||
|-
|'''data-get'''||Name des Readings, das den Wert enthält||STATE||
|-
|'''data-min'''||Minimaler Wert, der angezeigt werden soll||0||
|-
|'''data-max'''||Maximaler Wert, der angezeigt werden soll, oder Name des Readings, das den Maximalwert enthält||100||
|-
|'''data-orientation'''||Ausrichtung des Balkens||horizontal||data-orientation="vertical"
|-
|'''data-font-size'''||Schriftgröße||12||
|-
|'''data-tick'''||||1||
|-
|'''data-value-interval'''||||50||
|-
|'''data-extra-tick'''||||10||
|-
|'''data-tick-color'''||||#eee||
|-
||'''data-limits-get'''||||||
|-
||'''data-limits'''||||||
|-
||'''data-color'''||||#aa6900||
|-
|'''data-colors'''||Array von Farbwerten, die die Anzeige entsprechend der Grenzwerte von '''data-limits''' einfärben||||data-colors='["#dd3366","#ffcc00","#55aa44"]'
|}

==CSS-Klassen==

==Beispiele==

[[Kategorie:FHEM Tablet UI]]