FHEM Tablet UI FAQ - Versionsgeschichte

Ph1959de: source tag(s) auf syntaxhighlight umgestellt

2024-11-12T15:07:16Z

source tag(s) auf syntaxhighlight umgestellt

← Nächstältere Version		Version vom 12. November 2024, 17:07 Uhr
Zeile 267:		Zeile 267:
	Will man einen Button, Text, Link, etc., der bei einem Klick die komplette Seite neu lädt (z.B. für Anzeigen ohne Eingabegeräte), kann die JavaScript-Methode '''location.reload()''' verwendet werden.		Will man einen Button, Text, Link, etc., der bei einem Klick die komplette Seite neu lädt (z.B. für Anzeigen ohne Eingabegeräte), kann die JavaScript-Methode '''location.reload()''' verwendet werden.
	Hier am Beispiel eines [[FTUI Widget Symbol\|Symbol-Widgets]]:		Hier am Beispiel eines [[FTUI Widget Symbol\|Symbol-Widgets]]:
	<~~source~~ lang="html">		<syntaxhighlight lang="html">
	<div data-type="symbol"		<div data-type="symbol"
	data-icon="fa-reload"		data-icon="fa-reload"

Pahenning am 2. August 2024 um 14:44 Uhr

2024-08-02T14:44:04Z

← Nächstältere Version		Version vom 2. August 2024, 16:44 Uhr
Zeile 1:		Zeile 1:
	Auf dieser Seite sind einige häufige Fragen zu [[FHEM Tablet UI]] beantwortet.		Auf dieser Seite sind einige häufige Fragen zu [[FHEM Tablet UI V2]] beantwortet.


Zeile 278:		Zeile 278:

	[[Kategorie: FAQ]]		[[Kategorie: FAQ]]
	[[Kategorie:FHEM Tablet UI]]		[[Kategorie:FHEM Tablet UI V2]]

Drhirn: /* Wie baue ich einen Button, der die Seite neu lädt */

2018-01-25T14:50:52Z

Wie baue ich einen Button, der die Seite neu lädt

@@ Zeile 263: / Zeile 263: @@
   <meta name="apple-mobile-web-app-capable" content="yes" />
   <meta name="apple-mobile-web-app-status-bar-style" content="black" />
 ==Wie kann ich eigene Widgets erstellen==

Setstate: /* Wie baue ich ein Menü mit dem Pagetab Widget auf? */

2017-11-14T17:49:26Z

Wie baue ich ein Menü mit dem Pagetab Widget auf?

@@ Zeile 146: / Zeile 146: @@
 <html>
 <head>
-    <link rel="stylesheet" href="/fhem/tablet/lib/jquery.gridster.min.css" />
+     <script src="js/fhem-tablet-ui.js" defer></script>
      <title>FHEM-Tablet-UI</title>

Drhirn: Wie kann ich eigene Widgets erstellen

2017-10-02T08:54:27Z

Wie kann ich eigene Widgets erstellen

← Nächstältere Version		Version vom 2. Oktober 2017, 10:54 Uhr
Zeile 290:		Zeile 290:
	<meta name="apple-mobile-web-app-capable" content="yes" />		<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-status-bar-style" content="black" />		<meta name="apple-mobile-web-app-status-bar-style" content="black" />

			==Wie kann ich eigene Widgets erstellen==
			Die Antwort auf diese Frage findet sich auf der Seite [[FTUI eigene Widgets]].

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

Markusbloch: Anpassung von -Tags nach

2017-07-26T17:57:57Z

Anpassung von <source>-Tags nach <syntaxhighlight>

← Nächstältere Version		Version vom 26. Juli 2017, 19:57 Uhr
Zeile 81:		Zeile 81:
	===In FTUI einbinden===		===In FTUI einbinden===
	Der gesamte Inhalt des Ziparchivs kann jetzt in ein eigenes Verzeichnis innerhalb der FHEM Tablet UI Installation kopiert werden, zB nach "customfonts/font1". Es sollte nicht in eines der Standardverzeichnisse kopiert werden, da dort die Gefahr besteht, dass die Dateien vom Updatemechanismus überschrieben werden. In der/den HTML-File(s) ist jetzt im <head>-Bereich noch der Pfad zur style.css aus dem Archiv anzugeben:		Der gesamte Inhalt des Ziparchivs kann jetzt in ein eigenes Verzeichnis innerhalb der FHEM Tablet UI Installation kopiert werden, zB nach "customfonts/font1". Es sollte nicht in eines der Standardverzeichnisse kopiert werden, da dort die Gefahr besteht, dass die Dateien vom Updatemechanismus überschrieben werden. In der/den HTML-File(s) ist jetzt im <head>-Bereich noch der Pfad zur style.css aus dem Archiv anzugeben:
	:<~~source~~ lang="html5">		:<syntaxhighlight lang="html5">
	<link rel="stylesheet" href="customfonts/font1/style.css">		<link rel="stylesheet" href="customfonts/font1/style.css">
	</~~source~~>		</syntaxhighlight>

	=== Verwenden ===		=== Verwenden ===
	Jetzt können die eigenen Icons in den Widgets verwendet werden, indem sie im Attribut data-icon (bzw. data-icons, data-background-icon..) eingetragen werden; zB:		Jetzt können die eigenen Icons in den Widgets verwendet werden, indem sie im Attribut data-icon (bzw. data-icons, data-background-icon..) eingetragen werden; zB:
	:<~~source~~ lang="html5">		:<syntaxhighlight lang="html5">
	<div data-type="push" data-device="WECKER" data-icon="font1-alarmclock"></div>		<div data-type="push" data-device="WECKER" data-icon="font1-alarmclock"></div>
	</~~source~~>		</syntaxhighlight>
	Wichtig: Daran denken, vor dem Namen des Icons das selbst gewählte Class-Prefix (hier "font1-") zu notieren.		Wichtig: Daran denken, vor dem Namen des Icons das selbst gewählte Class-Prefix (hier "font1-") zu notieren.

Zeile 104:		Zeile 104:
	* Bild besorgen : "Einfach mal Tante Google's Fotoalbum befragen. ;)"		* Bild besorgen : "Einfach mal Tante Google's Fotoalbum befragen. ;)"
	* In /opt/fhem/www/tablet den Ordner /images angelegen und Bild dort ablegen und in die **-custom.css eintragen.		* In /opt/fhem/www/tablet den Ordner /images angelegen und Bild dort ablegen und in die **-custom.css eintragen.
	<~~source~~ lang="css"> body {		<syntaxhighlight lang="css"> body {
	background:#000000 url(../images/orange_blue_bg.jpg) 0 0 no-repeat		background:#000000 url(../images/orange_blue_bg.jpg) 0 0 no-repeat
	}</~~source~~>		}</syntaxhighlight>

	:So wird der Hintergrund aus der originalen CSS überschrieben.		:So wird der Hintergrund aus der originalen CSS überschrieben.
	* Wenn nicht schon geschehen, die CSS in den HTMLs verlinken/deklarieren:		* Wenn nicht schon geschehen, die CSS in den HTMLs verlinken/deklarieren:
	:<~~source~~ lang="html5">		:<syntaxhighlight lang="html5">
	<link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui-custom.css" />		<link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui-custom.css" />
	</~~source~~>		</syntaxhighlight>

	Kleiner Tipp: Das Bild in genau der Auflösung suchen/herunterladen, in der die Seite später im FTUI dargestellt werden soll.		Kleiner Tipp: Das Bild in genau der Auflösung suchen/herunterladen, in der die Seite später im FTUI dargestellt werden soll.
Zeile 119:		Zeile 119:
	Dazu muss noch folgendes in die fhem-tablet-ui-custom.css eingefügt werden:		Dazu muss noch folgendes in die fhem-tablet-ui-custom.css eingefügt werden:

	<~~source~~ lang="css">		<syntaxhighlight lang="css">
	.semitransparent {		.semitransparent {
	background: rgba(0, 0, 0, 0.7) !important;		background: rgba(0, 0, 0, 0.7) !important;
	}		}
	</~~source~~>		</syntaxhighlight>

	Diese Klasse benutzt dann man bei den Gridster Elementen:		Diese Klasse benutzt dann man bei den Gridster Elementen:

	<~~source~~ lang="html5">		<syntaxhighlight lang="html5">
	<li data-row="1" data-col="1" data-sizex="1" data-sizey="5" data-template="menu.html" class="semitransparent"></li>		<li data-row="1" data-col="1" data-sizex="1" data-sizey="5" data-template="menu.html" class="semitransparent"></li>
	</~~source~~>		</syntaxhighlight>

	==Wie baue ich ein Menü mit dem Pagetab Widget auf?==		==Wie baue ich ein Menü mit dem Pagetab Widget auf?==

All-Ex: /* Nachbearbeitung */

2017-04-01T22:18:14Z

Nachbearbeitung

← Nächstältere Version		Version vom 2. April 2017, 00:18 Uhr
Zeile 66:		Zeile 66:

	===Nachbearbeitung===		===Nachbearbeitung===
	Im der Datei style.css im heruntergeladenen Zip-File müssen einige Punkte verändert werden:		In der Datei style.css im heruntergeladenen Zip-File müssen einige Punkte verändert werden:

	Am Anfang wo die Font-Dateinamen stehen müssen die Fragezeichen hinter der Dateiendung und die dahinter angehängten Buchstaben entfernt werden.		Am Anfang wo die Font-Dateinamen stehen, müssen die Fragezeichen hinter der Dateiendung und die dahinter angehängten Buchstaben entfernt werden.

	Die Zeile		Die Zeile

All-Ex: /* Nachbearbeitung */

2017-04-01T22:17:50Z

Nachbearbeitung

← Nächstältere Version		Version vom 2. April 2017, 00:17 Uhr
Zeile 66:		Zeile 66:

	===Nachbearbeitung===		===Nachbearbeitung===
	Im heruntergeladenen Zip-~~file aus~~ der ~~IcoMoon App muss~~ die Zeile		Im der Datei style.css im heruntergeladenen Zip-File müssen einige Punkte verändert werden:
	:<code>line-height: 1;</code>
	~~auskommentiert~~ oder ~~gelöscht werden~~, da die Anzeige in den Buttons ansonsten "verschoben" wirkt.		Am Anfang wo die Font-Dateinamen stehen müssen die Fragezeichen hinter der Dateiendung und die dahinter angehängten Buchstaben entfernt werden.

			Die Zeile
			<code>line-height: 1;</code>
			auskommentieren oder löschen, da die Anzeige in den Buttons ansonsten "verschoben" wirkt.

			<code>.icon {</code>
			ersetzen durch
			<code>[class^="xxx-"], [class*=" xxx-"] {</code>
			(xxx ist der gewählte Class-Prefix)

	===In FTUI einbinden===		===In FTUI einbinden===

All-Ex: Edge Browser ergänzt

2017-03-01T18:36:03Z

Edge Browser ergänzt

← Nächstältere Version		Version vom 1. März 2017, 20:36 Uhr
Zeile 39:		Zeile 39:
	\|Chrome:		\|Chrome:
	\|{{Taste\|Ctrl}} + {{Taste\|Shift}} + {{Taste\|J}}		\|{{Taste\|Ctrl}} + {{Taste\|Shift}} + {{Taste\|J}}
			\|-
			\|Edge:
			\|{{Taste\|F12}}
	\|-		\|-
	\|Firefox:		\|Firefox:

Drhirn am 1. März 2017 um 09:52 Uhr

2017-03-01T09:52:55Z

← Nächstältere Version		Version vom 1. März 2017, 11:52 Uhr
Zeile 269:		Zeile 269:

	==Wie kann ich das Zoomen auf mobilen Geräten verhindern?==		==Wie kann ich das Zoomen auf mobilen Geräten verhindern?==
	Um zu Verhindern, dass auf mobilen Geräten eine automatische oder manuelle Größenanpassung möglich ist, kann dieser META-Tag im <nowiki><~~header~~></nowiki>-Abschnitt der Seite verwendet werden:		Um zu Verhindern, dass auf mobilen Geräten eine automatische oder manuelle Größenanpassung möglich ist, kann dieser META-Tag im <nowiki><head></nowiki>-Abschnitt der Seite verwendet werden:

	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

	==Wie kann ich auf iOS-Geräten FTUI im Vollbildmodus starten?==		==Wie kann ich auf iOS-Geräten FTUI im Vollbildmodus starten?==
	Um FTUI auf iOS-Geräten vom Home-Screen im Vollbildmodus starten zu können, sind folgende Einträge im <nowiki><~~header~~></nowiki>-Bereich der Seite zu setzen.		Um FTUI auf iOS-Geräten vom Home-Screen im Vollbildmodus starten zu können, sind folgende Einträge im <nowiki><head></nowiki>-Bereich der Seite zu setzen.

	<meta name="apple-mobile-web-app-capable" content="yes" />		<meta name="apple-mobile-web-app-capable" content="yes" />