FTUI Widget Link

Das 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.

Attribute

Attribut	Beschreibung	Standard-Wert	Beispiel
data-color	Farbe für Text oder Icon (RGB-Angabe oder Farbname)	orange	#c0c0c0
data-background-color	Hintergrundfarbe des Links oder Icons (RGB-Angabe oder Farbname)		blue
data-border-color	Farbe des Rahmens (RGB-Angabe oder Farbname)		#ff0000
data-icon-left	Name des linken Icons		mi-stop
data-icon-right	Name des rechten Icons		mi-play_circle_outline
data-width	Breite des Links oder Icons	auto	50px
data-height	Höhe des Links oder Icons	auto	3em
data-url	URL zu der verlinkt wird		https://fhem.de
data-get	Name des Readings von dem die URL gelesen werden soll		URL
data-url-xhr	URL, mit der der Verweis im Hintergrund aufgerufen werden kann		http://webaradio/control?next
data-fhem-cmd	FHEM Befehl, der ausgeführt werden soll		SET Lampe ON
data-text-align	Ausrichtung des Textes 'left','center','right'		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		.*page1
data-active-color	Farbe des Textes oder Icons wenn das "active-pattern" zutrifft	same as data-color	#123456
data-active-background-color	Hintergrundfarbe des Textes oder Icons wenn das "active-pattern" zutrifft	same as data-background-color	yellow
data-active-border-color	Farbe des Rahmens wenn das "active-pattern" zutrifft	same as data-border-color	grey
data-fade-duration	Fade-Dauer beim Umschalten zur nächsten Seite (X ms/slow/fast)	slow	100ms
class	round,square
class	blank	Öffnet den Link in einem neuen Fenster

Beispiele

Link ohne Icon

<div data-type="link"
     data-color="blue"
     data-url="#link.html">LINK</div>

Button-ähnlicher Link

<div data-type="link"
     class="round"
     data-color="grey"
     data-border-color="grey"
     data-icon="fa-server">Details</div>

Großer Button-ähnlicher Link zum Absenden eines FHEM-Befehls

<div data-type="link"
     class="round"
     data-width="130" data-height="50"
     data-color="white"
     data-background-color="red"
     data-icon="fa-lock"
     data-fhem-cmd="set AllDoors locked">Lock Doors</div>

Button zum Aufrufen einer URL

<div data-type="link"
     data-width="150"
     data-icon-left="fa-video-camera"
     data-color="green"
     data-url="#cam.html">View cam</div>

Rechteckiger Button

<div data-type="link"
     data-width="130" data-height="50"
     data-color="white"
     data-background-color="green"
     data-icon="fa-refresh"
     data-fhem-cmd="update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt">Update FTUI</div>

Button mit mehrzeiligem Text

<div data-type="link" class="round medium"
     data-width="230"
     data-color="white"
     data-background-color="#717453"
     data-icon-left="fa-coffee"
     data-icon-right="fa-angle-right"
     data-text-align="left"
     data-url="#break.html">This Text is medium<br/>and contains line<br/>breaks</div>

Weblinks

Weitere Link-Beispiele