FTUI Widget Link - Versionsgeschichte

Pahenning am 3. August 2024 um 08:39 Uhr

2024-08-03T08:39:17Z

← Nächstältere Version		Version vom 3. August 2024, 10:39 Uhr
Zeile 1:		Zeile 1:
	Das [[{{PAGENAME}}\|Link Widget]] ist ein Widget für [[FHEM Tablet UI]] mit dem ein Text-Link oder Button erstellt werden kann um Befehle an FHEM zu senden.		Das [[{{PAGENAME}}\|Link Widget]] ist ein Widget für [[FHEM Tablet UI V2]] mit dem ein Text-Link oder Button erstellt werden kann um Befehle an FHEM zu senden.

	<gallery>		<gallery>
Zeile 188:		Zeile 188:
	*[https://knowthelist.github.io/fhem/tablet/demo_link.html Weitere Beispiele]		*[https://knowthelist.github.io/fhem/tablet/demo_link.html Weitere Beispiele]

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

Fhainz: /* CSS Klassen */

2018-06-27T18:25:43Z

CSS Klassen

← Nächstältere Version		Version vom 27. Juni 2018, 20:25 Uhr
Zeile 58:		Zeile 58:
	{\|class="wikitable"		{\|class="wikitable"
	!Klasse!!Beschreibung		!Klasse!!Beschreibung
	{{FTUI Klasse\|round}}{{FTUI Klasse\|square}}{{FTUI Klasse\|blank}}{{FTUI Klasse\|nocache}}		{{FTUI Klasse\|round}}{{FTUI Klasse\|square}}{{FTUI Klasse\|blank}}{{FTUI Klasse\|nocache}}{{FTUI Klasse\|prefetch}}
	\|}		\|}

Baumbuwe: catsort

2018-01-26T14:02:09Z

catsort

← Nächstältere Version		Version vom 26. Januar 2018, 16:02 Uhr
Zeile 188:		Zeile 188:
	*[https://knowthelist.github.io/fhem/tablet/demo_link.html Weitere Beispiele]		*[https://knowthelist.github.io/fhem/tablet/demo_link.html Weitere Beispiele]

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

Markusbloch: Anpassung von -Tags nach

2017-07-26T17:57:58Z

Anpassung von <source>-Tags nach <syntaxhighlight>

← Nächstältere Version		Version vom 26. Juli 2017, 19:57 Uhr
Zeile 63:		Zeile 63:
	==Beispiele==		==Beispiele==
	===Link ohne Icon===		===Link ohne Icon===
	<~~source~~ lang="html">		<syntaxhighlight lang="html">
	<div data-type="link"		<div data-type="link"
	data-color="blue"		data-color="blue"
	data-url="#link.html">LINK</div>		data-url="#link.html">LINK</div>
	</~~source~~>		</syntaxhighlight>
	[[File:FTUI_Widget_Link_04.png]]		[[File:FTUI_Widget_Link_04.png]]

	===Button-ähnlicher Link===		===Button-ähnlicher Link===
	<~~source~~ lang="html">		<syntaxhighlight lang="html">
	<div data-type="link"		<div data-type="link"
	class="round"		class="round"
Zeile 77:		Zeile 77:
	data-border-color="grey"		data-border-color="grey"
	data-icon="fa-server">Details</div>		data-icon="fa-server">Details</div>
	</~~source~~>		</syntaxhighlight>
	[[File:FTUI_Widget_Link_01.png]]		[[File:FTUI_Widget_Link_01.png]]

	===Großer Button-ähnlicher Link zum Absenden eines FHEM-Befehls===		===Großer Button-ähnlicher Link zum Absenden eines FHEM-Befehls===
	<~~source~~ lang="html">		<syntaxhighlight lang="html">
	<div data-type="link"		<div data-type="link"
	class="round"		class="round"
Zeile 89:		Zeile 89:
	data-icon="fa-lock"		data-icon="fa-lock"
	data-fhem-cmd="set AllDoors locked">Lock Doors</div>		data-fhem-cmd="set AllDoors locked">Lock Doors</div>
	</~~source~~>		</syntaxhighlight>
	[[File:FTUI_Widget_Link_02.png]]		[[File:FTUI_Widget_Link_02.png]]

	===Button-ähnlicher Link zum Aufrufen einer URL===		===Button-ähnlicher Link zum Aufrufen einer URL===
	<~~source~~ lang="html">		<syntaxhighlight lang="html">
	<div data-type="link"		<div data-type="link"
	data-width="150"		data-width="150"
Zeile 99:		Zeile 99:
	data-color="green"		data-color="green"
	data-url="#cam.html">View cam</div>		data-url="#cam.html">View cam</div>
	</~~source~~>		</syntaxhighlight>
	[[File:FTUI_Widget_Link_03.png]]		[[File:FTUI_Widget_Link_03.png]]

	===Rechteckiger Button===		===Rechteckiger Button===
	<~~source~~ lang="html">		<syntaxhighlight lang="html">
	<div data-type="link"		<div data-type="link"
	data-width="130" data-height="50"		data-width="130" data-height="50"
Zeile 110:		Zeile 110:
	data-icon="fa-refresh"		data-icon="fa-refresh"
	data-fhem-cmd="update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt">Update FTUI</div>		data-fhem-cmd="update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt">Update FTUI</div>
	</~~source~~>		</syntaxhighlight>
	[[File:FTUI_Widget_Link_05.png]]		[[File:FTUI_Widget_Link_05.png]]

	===Button mit mehrzeiligem Text===		===Button mit mehrzeiligem Text===
	<~~source~~ lang="html">		<syntaxhighlight lang="html">
	<div data-type="link" class="round medium"		<div data-type="link" class="round medium"
	data-width="230"		data-width="230"
Zeile 123:		Zeile 123:
	data-text-align="left"		data-text-align="left"
	data-url="#break.html">This Text is medium<br/>and contains line<br/>breaks</div>		data-url="#break.html">This Text is medium<br/>and contains line<br/>breaks</div>
	</~~source~~>		</syntaxhighlight>
	[[File:FTUI_Widget_Link_06.png]]		[[File:FTUI_Widget_Link_06.png]]

Zeile 134:		Zeile 134:
	\|-		\|-
	\| class="mw-collapsible-content" \|		\| class="mw-collapsible-content" \|
	<~~source~~ lang="html">		<syntaxhighlight lang="html">
	<!DOCTYPE html>		<!DOCTYPE html>
	<html>		<html>
Zeile 162:		Zeile 162:
	</body>		</body>
	</html>		</html>
	</~~source~~>		</syntaxhighlight>
	\|}		\|}
	In den jeweiligen Unterseiten finden sich dann die Inhalte und Widgets, die für den jeweiligen Raum angezeigt werden sollen.		In den jeweiligen Unterseiten finden sich dann die Inhalte und Widgets, die für den jeweiligen Raum angezeigt werden sollen.
Zeile 170:		Zeile 170:
	\|-		\|-
	\| class="mw-collapsible-content" \|		\| class="mw-collapsible-content" \|
	<~~source~~ lang="html">		<syntaxhighlight lang="html">
	<html>		<html>
	<body>		<body>
Zeile 180:		Zeile 180:
	</body>		</body>
	</html>		</html>
	</~~source~~>		</syntaxhighlight>
	\|}		\|}

All-Ex: class="default" ergänzt (vgl. https://forum.fhem.de/index.php/topic,57569.msg492679.html#msg492679)

2017-03-02T19:26:46Z

class="default" ergänzt (vgl. https://forum.fhem.de/index.php/topic,57569.msg492679.html#msg492679)

← Nächstältere Version		Version vom 2. März 2017, 21:26 Uhr
Zeile 127:		Zeile 127:

	===Navigationsmenü mit Link-Buttons===		===Navigationsmenü mit Link-Buttons===
	Dafür werden mehrere HTML-Seiten benötigt. Zum einen eine "Haupt"-Seite, auf der die Links dargestellt werden. Zum anderen die jeweiligen Unterseiten, die auf der Haupt-Seite angezeigt werden sollen.		Dafür werden mehrere HTML-Seiten benötigt. Zum einen eine "Haupt"-Seite, auf der die Links dargestellt werden. Zum anderen die jeweiligen Unterseiten, die auf der Haupt-Seite angezeigt werden sollen. Die Unterseite, die beim ersten Aufruf der Hauptseite geladen werden soll, kann mit ''class="default"'' markiert werden (im Beispiel ist das ''schlafzimmer.html'').

	Die Hauptseite könnte wie folgt aussehen:		Die Hauptseite könnte wie folgt aussehen:
Zeile 148:		Zeile 148:

	<div id="menu">		<div id="menu">
	<div data-type="link"		<div class="default"
			data-type="link"
	data-load="#schlafzimmer"		data-load="#schlafzimmer"
	data-url="#schlafzimmer.html"		data-url="#schlafzimmer.html"

Drhirn: Klasse "nocache" ergänzt

2017-02-24T08:31:22Z

Klasse "nocache" ergänzt

← Nächstältere Version		Version vom 24. Februar 2017, 10:31 Uhr
Zeile 58:		Zeile 58:
	{\|class="wikitable"		{\|class="wikitable"
	!Klasse!!Beschreibung		!Klasse!!Beschreibung
	{{FTUI Klasse\|round}}{{FTUI Klasse\|square}}{{FTUI Klasse\|blank}}		{{FTUI Klasse\|round}}{{FTUI Klasse\|square}}{{FTUI Klasse\|blank}}{{FTUI Klasse\|nocache}}
	\|}		\|}


	==Beispiele==		==Beispiele==

Drhirn: URL zu den weiteren Beispielen korrigiert

2017-02-15T18:52:33Z

URL zu den weiteren Beispielen korrigiert

← Nächstältere Version		Version vom 15. Februar 2017, 20:52 Uhr
Zeile 186:		Zeile 186:

	==Weblinks==		==Weblinks==
	*[https://github.~~com~~/~~knowthelist~~/~~fhem-~~tablet~~-ui~~ Weitere ~~Button-~~Beispiele]		*[https://knowthelist.github.io/fhem/tablet/demo_link.html Weitere Beispiele]

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

Drhirn: CSS Klassen ergänzt

2017-02-08T13:47:41Z

CSS Klassen ergänzt

← Nächstältere Version		Version vom 8. Februar 2017, 15:47 Uhr
Zeile 54:		Zeile 54:
	\|}		\|}

	~~<!--~~
	==CSS Klassen==		==CSS Klassen==
	{\|class="wikitable"		{\|class="wikitable"
Zeile 60:		Zeile 60:
	{{FTUI Klasse\|round}}{{FTUI Klasse\|square}}{{FTUI Klasse\|blank}}		{{FTUI Klasse\|round}}{{FTUI Klasse\|square}}{{FTUI Klasse\|blank}}
	\|}		\|}
	~~-->~~

	==Beispiele==		==Beispiele==

Drhirn: Kleinere Verbesserungen und CSS-Klassen testweise eingebunden

2017-02-08T12:14:53Z

Kleinere Verbesserungen und CSS-Klassen testweise eingebunden

← Nächstältere Version		Version vom 8. Februar 2017, 14:14 Uhr
Zeile 43:		Zeile 43:
	\|'''data-text-align'''\|\|Ausrichtung des Textes 'left','center','right'\|\|\|\|data-text-align="center"		\|'''data-text-align'''\|\|Ausrichtung des Textes 'left','center','right'\|\|\|\|data-text-align="center"
	\|-		\|-
	\|'''data-active-pattern'''\|\|RegEx mit der der ermittelt wird, ob der Link aktiv ist. Der Check wird gegen die aktuelle "document location" durchgeführt\|\|\|\|data-active-pattern=".*page1"		\|'''data-active-pattern'''\|\|[[Regulärer Ausdruck\|RegEx]] mit der der ermittelt wird, ob der Link aktiv ist. Der Check wird gegen die aktuelle "document location" durchgeführt\|\|\|\|data-active-pattern=".*page1"
	\|-		\|-
	\|'''data-active-color'''\|\|Farbe des Textes oder Icons wenn das "active-pattern" zutrifft\|\|~~same as~~ data-color\|\|data-active-color="#123456"		\|'''data-active-color'''\|\|Farbe des Textes oder Icons wenn das "active-pattern" zutrifft\|\|wie data-color\|\|data-active-color="#123456"
	\|-		\|-
	\|'''data-active-background-color'''\|\|Hintergrundfarbe des Textes oder Icons wenn das "active-pattern" zutrifft\|\|same as data-background-color\|\|data-active-background-color="yellow"		\|'''data-active-background-color'''\|\|Hintergrundfarbe des Textes oder Icons wenn das "active-pattern" zutrifft\|\|same as data-background-color\|\|data-active-background-color="yellow"
	\|-		\|-
	\|'''data-active-border-color'''\|\|Farbe des Rahmens wenn das "active-pattern" zutrifft\|\|~~same as~~ data-border-color\|\|data-active-border-color="grey"		\|'''data-active-border-color'''\|\|Farbe des Rahmens wenn das "active-pattern" zutrifft\|\|wie data-border-color\|\|data-active-border-color="grey"
	\|-		\|-
	\|'''data-fade-duration'''\|\|Fade-Dauer beim Umschalten zur nächsten Seite (X ms/slow/fast)\|\|slow\|\|data-fade-duration="100ms"		\|'''data-fade-duration'''\|\|Fade-Dauer beim Umschalten zur nächsten Seite (X ms/slow/fast)\|\|slow\|\|data-fade-duration="100ms"
	\|-
	\|-
	~~\|'''class'''\|\|round,square\|\|\|\|~~
	\|-
	~~\|'''class'''\|\|blank\|\|Öffnet den Link in einem neuen Fenster\|\|~~
	\|}		\|}

			<!--
			==CSS Klassen==
			{\|class="wikitable"
			!Klasse!!Beschreibung
			{{FTUI Klasse\|round}}{{FTUI Klasse\|square}}{{FTUI Klasse\|blank}}
			\|}
			-->

	==Beispiele==		==Beispiele==
Zeile 90:		Zeile 93:
	[[File:FTUI_Widget_Link_02.png]]		[[File:FTUI_Widget_Link_02.png]]

	===Button zum Aufrufen einer URL===		===Button-ähnlicher Link zum Aufrufen einer URL===
	<source lang="html">		<source lang="html">
	<div data-type="link"		<div data-type="link"

Drhirn: Beispiel Navigation ergänzt

2017-02-08T10:06:24Z

Beispiel Navigation ergänzt

Änderungen zeigen