FTUI eigene Widgets - Versionsgeschichte

Pahenning am 3. August 2024 um 08:34 Uhr

2024-08-03T08:34:33Z

← Nächstältere Version		Version vom 3. August 2024, 10:34 Uhr
Zeile 1:		Zeile 1:
	Eigene Widgets für [[FHEM Tablet UI]] zu erstellen ist relativ einfach. Dafür muss ~~nur~~ eine widget_mywidget.js im js-Folder neben den anderen Widgets angelegt werden.		Eigene Widgets für [[FHEM Tablet UI V2]] zu erstellen ist relativ einfach. Im Folgenden nennen wir dieses neue Widget "mywidget" Dafür muss zunächst eine widget_mywidget.js im js-Folder neben den anderen Widgets angelegt werden.

	Eine Minimalvariante einer widget_mywidget.js-Datei könnte so aussehen:		Eine Minimalvariante einer widget_mywidget.js-Datei könnte so aussehen:
Zeile 162:		Zeile 162:

	Wem das noch nicht genug war, der kann sich ein weiterführendes Praxisbeispiel unter [[FTUI eigene Widgets - Beispiel]] ansehen.		Wem das noch nicht genug war, der kann sich ein weiterführendes Praxisbeispiel unter [[FTUI eigene Widgets - Beispiel]] ansehen.
	[[Kategorie:FHEM Tablet UI\|Widgets]]		[[Kategorie:FHEM Tablet UI V2\|Widgets]]

2018-08-17T06:32:13Z

← Nächstältere Version		Version vom 17. August 2018, 08:32 Uhr
Zeile 161:		Zeile 161:
	</syntaxhighlight>		</syntaxhighlight>

			Wem das noch nicht genug war, der kann sich ein weiterführendes Praxisbeispiel unter [[FTUI eigene Widgets - Beispiel]] ansehen.
	[[Kategorie:FHEM Tablet UI\|Widgets]]		[[Kategorie:FHEM Tablet UI\|Widgets]]

2018-02-20T13:48:24Z

Syntaxhighlight-Fehler korrigiert

← Nächstältere Version		Version vom 20. Februar 2018, 15:48 Uhr
Zeile 75:		Zeile 75:
	Ausserdem empfiehlt es sich natürlich in fhem bei den betroffenen Devices ein		Ausserdem empfiehlt es sich natürlich in fhem bei den betroffenen Devices ein

	<~~syntaxhighlight~~>		<code>
	attr device event-on-change-reading .*		attr device event-on-change-reading .*
	</~~syntaxhighlight~~>		</code>

	zu machen!		zu machen!

2018-01-26T14:17:45Z

catsort

← Nächstältere Version		Version vom 26. Januar 2018, 16:17 Uhr
Zeile 161:		Zeile 161:
	</syntaxhighlight>		</syntaxhighlight>

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

2017-12-29T21:38:08Z

← Nächstältere Version		Version vom 29. Dezember 2017, 23:38 Uhr
Zeile 75:		Zeile 75:
	Ausserdem empfiehlt es sich natürlich in fhem bei den betroffenen Devices ein		Ausserdem empfiehlt es sich natürlich in fhem bei den betroffenen Devices ein

	event-on-change-reading .*		<syntaxhighlight>
			attr device event-on-change-reading .*
			</syntaxhighlight>

	zu machen ~~;-)~~		zu machen!

	Updates werden aber nur gerufen, wenn man die entsprechenden Readings beim '''init()''' abonniert. Das passiert mit '''addReading();''' (Funktion ist enthalten im Base-Widget: Modul_widget)		Updates werden aber nur gerufen, wenn man die entsprechenden Readings beim '''init()''' abonniert. Das passiert mit '''addReading();''' (Funktion ist enthalten im Base-Widget: Modul_widget)

2017-12-29T21:36:37Z

← Nächstältere Version		Version vom 29. Dezember 2017, 23:36 Uhr
Zeile 50:		Zeile 50:

	<syntaxhighlight lang="html">		<syntaxhighlight lang="html">
	<div class="neueklasse" data-type="blabla" data-device='~~wzcore~~' data-get='cm'>}		<div class="neueklasse" data-type="blabla" data-device='test-device' data-get='neueklasse'>}
	</syntaxhighlight>		</syntaxhighlight>

2017-12-29T21:35:29Z

← Nächstältere Version		Version vom 29. Dezember 2017, 23:35 Uhr
Zeile 66:		Zeile 66:
	</syntaxhighlight>		</syntaxhighlight>

			Und dann in der Update-Routine muss auf diese Readings geprüft werden:
			<syntaxhighlight lang="javascript">
			me.elements.filterDeviceReading('reading123', dev, par)
			.add(me.elements.filterDeviceReading('testreading', dev, par))
			</syntaxhighlight>
			Nur dann werden die Elemente bei Updates aus fhem auch aktualisiert.

			Ausserdem empfiehlt es sich natürlich in fhem bei den betroffenen Devices ein

			event-on-change-reading .*

			zu machen ;-)

	Updates werden aber nur gerufen, wenn man die entsprechenden Readings beim '''init()''' abonniert. Das passiert mit '''addReading();''' (Funktion ist enthalten im Base-Widget: Modul_widget)		Updates werden aber nur gerufen, wenn man die entsprechenden Readings beim '''init()''' abonniert. Das passiert mit '''addReading();''' (Funktion ist enthalten im Base-Widget: Modul_widget)

2017-12-29T21:31:15Z

← Nächstältere Version		Version vom 29. Dezember 2017, 23:31 Uhr
Zeile 60:		Zeile 60:
	</syntaxhighlight>		</syntaxhighlight>

			Nicht vergessen: Wenn hier Daten aus Readings abgefragt werden sollen, müssen diese Readings in init() abonniert werden:
			<syntaxhighlight lang="javascript">
			elem.initData('reading123', 'testreading');
			me.addReading(elem, 'reading123');
			</syntaxhighlight>

2017-12-29T21:28:05Z

← Nächstältere Version		Version vom 29. Dezember 2017, 23:28 Uhr
Zeile 45:		Zeile 45:
	}		}
	</syntaxhighlight>		</syntaxhighlight>


			Wenn ein Plugin Daten abrufen soll, die NICHT in einem Reading von FHEM enthalten sind, empfiehlt es sich, eine Klasse zu definieren:

			<syntaxhighlight lang="html">
			<div class="neueklasse" data-type="blabla" data-device='wzcore' data-get='cm'>}
			</syntaxhighlight>

			Im JS kann man dann so diese Elemente auswählen bzw ihnen etwas zuweisen:
			<syntaxhighlight lang="javascript">
			if (elem.is('.neueklasse')) {
			elem.html(text);
			}
			</syntaxhighlight>

2017-10-03T11:10:35Z

Links zur Kategorie und FTUI eingefügt

← Nächstältere Version		Version vom 3. Oktober 2017, 13:10 Uhr
Zeile 1:		Zeile 1:
	Eigene Widgets für ~~FTUI~~ zu erstellen ist relativ einfach. Dafür muss nur eine widget_mywidget.js im js-Folder neben den anderen Widgets angelegt werden.		Eigene Widgets für [[FHEM Tablet UI]] zu erstellen ist relativ einfach. Dafür muss nur eine widget_mywidget.js im js-Folder neben den anderen Widgets angelegt werden.

	Eine Minimalvariante einer widget_mywidget.js-Datei könnte so aussehen:		Eine Minimalvariante einer widget_mywidget.js-Datei könnte so aussehen:
Zeile 126:		Zeile 126:
	<div data-type="mywidget" data-device='AvReceiver' data-get='volume'></div>		<div data-type="mywidget" data-device='AvReceiver' data-get='volume'></div>
	</syntaxhighlight>		</syntaxhighlight>

			[[Kategorie:FHEM Tablet UI]]