FTUI Layout Gridster - Versionsgeschichte

Pahenning am 2. August 2024 um 14:58 Uhr

2024-08-02T14:58:30Z

← Nächstältere Version		Version vom 2. August 2024, 16:58 Uhr
Zeile 1:		Zeile 1:
	<div style="float: right;">__TOC__</div>		<div style="float: right;">__TOC__</div>
	Das [[{{PAGENAME}}\|Grister Layout]] für [[FHEM Tablet UI]] kann man sich als Schachbrett vorstellen. Es besteht aus Reihen und Spalten, die wiederum einzelne Kacheln enthalten können.		Das [[{{PAGENAME}}\|Grister Layout]] für [[FHEM Tablet UI V2]] kann man sich als Schachbrett vorstellen. Es besteht aus Reihen und Spalten, die wiederum einzelne Kacheln enthalten können.
	Die gewünschte Anzahl an Spalten und Reihen kann frei festgelegt werden.		Die gewünschte Anzahl an Spalten und Reihen kann frei festgelegt werden.
	Die Kacheln selbst können sich über [[#example2\|mehrere Reihen]], [[#example3\|mehrere Spalten]] oder [[#example4\|beides]] erstrecken.		Die Kacheln selbst können sich über [[#example2\|mehrere Reihen]], [[#example3\|mehrere Spalten]] oder [[#example4\|beides]] erstrecken.
Zeile 142:		Zeile 142:
	</syntaxhighlight>		</syntaxhighlight>

	[[Kategorie:FHEM Tablet UI\|Layout Gridster]]		[[Kategorie:FHEM Tablet UI V2\|Layout Gridster]]

Baumbuwe: catsort

2018-01-26T14:16:38Z

catsort

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

	[[Kategorie:FHEM Tablet UI]]		[[Kategorie:FHEM Tablet UI\|Layout Gridster]]

Scooty: Werte für meta-Tag gridster_disable korrigiert

2017-09-08T15:53:31Z

Werte für meta-Tag gridster_disable korrigiert

← Nächstältere Version		Version vom 8. September 2017, 17:53 Uhr
Zeile 4:		Zeile 4:
	Die Kacheln selbst können sich über [[#example2\|mehrere Reihen]], [[#example3\|mehrere Spalten]] oder [[#example4\|beides]] erstrecken.		Die Kacheln selbst können sich über [[#example2\|mehrere Reihen]], [[#example3\|mehrere Spalten]] oder [[#example4\|beides]] erstrecken.

	In der Grundkonfiguration ist es möglich, einzelne Kacheln per Drag&Drop an eine andere Position zu verschieben, sofern in der Kachel ein <header>-Abschnitt vorhanden ist. Dieses Verhalten kann mit dem META-Tag '''gridster_disable''' gesteuert werden. Der Standardwert ist 1, somit ist das Verschieben erlaubt. Der Wert 0 deaktiviert diese Möglichkeit.		In der Grundkonfiguration ist es möglich, einzelne Kacheln per Drag&Drop an eine andere Position zu verschieben, sofern in der Kachel ein <header>-Abschnitt vorhanden ist. Dieses Verhalten kann mit dem META-Tag '''gridster_disable''' gesteuert werden. Der Standardwert ist 0, somit ist das Verschieben erlaubt. Der Wert 1 deaktiviert diese Möglichkeit.
	<syntaxhighlight lang="html"><meta name="gridster_disable" content="1"></syntaxhighlight>		<syntaxhighlight lang="html"><meta name="gridster_disable" content="1"></syntaxhighlight>

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 5:		Zeile 5:

	In der Grundkonfiguration ist es möglich, einzelne Kacheln per Drag&Drop an eine andere Position zu verschieben, sofern in der Kachel ein <header>-Abschnitt vorhanden ist. Dieses Verhalten kann mit dem META-Tag '''gridster_disable''' gesteuert werden. Der Standardwert ist 1, somit ist das Verschieben erlaubt. Der Wert 0 deaktiviert diese Möglichkeit.		In der Grundkonfiguration ist es möglich, einzelne Kacheln per Drag&Drop an eine andere Position zu verschieben, sofern in der Kachel ein <header>-Abschnitt vorhanden ist. Dieses Verhalten kann mit dem META-Tag '''gridster_disable''' gesteuert werden. Der Standardwert ist 1, somit ist das Verschieben erlaubt. Der Wert 0 deaktiviert diese Möglichkeit.
	<~~source~~ lang="html"><meta name="gridster_disable" content="1"></~~source~~>		<syntaxhighlight lang="html"><meta name="gridster_disable" content="1"></syntaxhighlight>


Zeile 14:		Zeile 14:
	# Eine fixe Größe für die Kacheln vorgeben: Dazu werden die META-Tags '''gridster_base_width''' und '''gridster_base_height''' verwendet. Eventuell vorhandene Angaben von ''gridster_cols'' und ''gridster_rows'' werden in diesem Fall ignoriert.		# Eine fixe Größe für die Kacheln vorgeben: Dazu werden die META-Tags '''gridster_base_width''' und '''gridster_base_height''' verwendet. Eventuell vorhandene Angaben von ''gridster_cols'' und ''gridster_rows'' werden in diesem Fall ignoriert.
	Beide Möglichkeiten in je einem Beispiel:		Beide Möglichkeiten in je einem Beispiel:
	<~~source~~ lang="html">		<syntaxhighlight lang="html">
	<meta name="gridster_cols" content="12">		<meta name="gridster_cols" content="12">
	<meta name="gridster_rows" content="9">		<meta name="gridster_rows" content="9">
	</~~source~~>		</syntaxhighlight>

	<~~source~~ lang="html">		<syntaxhighlight lang="html">
	<meta name="gridster_base_width" content="116">		<meta name="gridster_base_width" content="116">
	<meta name="gridster_base_height" content="131">		<meta name="gridster_base_height" content="131">
	</~~source~~>		</syntaxhighlight>

	Um ein unschönes "Zusammenschieben" der Kacheln auf kleinen Displays zu vermeiden, können Mindestbreite und -höhe gesetzt werden:		Um ein unschönes "Zusammenschieben" der Kacheln auf kleinen Displays zu vermeiden, können Mindestbreite und -höhe gesetzt werden:
	<~~source~~ lang="html">		<syntaxhighlight lang="html">
	<meta name="gridster_min_width" content="100">		<meta name="gridster_min_width" content="100">
	<meta name="gridster_min_height" content="100">		<meta name="gridster_min_height" content="100">
	</~~source~~>		</syntaxhighlight>

	Der Abstand zwischen den einzelnen Kacheln kann mit dem META-Tag '''widget_margin''' gesteuert werden. <~~source~~ lang="html"><meta name="widget_margin" content="4"></~~source~~>		Der Abstand zwischen den einzelnen Kacheln kann mit dem META-Tag '''widget_margin''' gesteuert werden. <syntaxhighlight lang="html"><meta name="widget_margin" content="4"></syntaxhighlight>


	Eine Kachel selbst wird als HTML-Listenelement (<li>) beschrieben. Dabei muss deren Position ('''data-row''', '''data-col''') angegeben werden, sowie über wie viele Reihen und Spalten sich die Kachel erstreckt ('''data-sizex''', '''data-sizey''').		Eine Kachel selbst wird als HTML-Listenelement (<li>) beschrieben. Dabei muss deren Position ('''data-row''', '''data-col''') angegeben werden, sowie über wie viele Reihen und Spalten sich die Kachel erstreckt ('''data-sizex''', '''data-sizey''').

	Eine Kachel in der ersten Reihe (row) und der ersten Spalte (col), die sich über jeweils eine Reihe + Spalte erstreckt, wird somit wie folgt definiert: <~~source~~ lang="html"><li data-row="1" data-col="1" data-sizex="1" data-sizey="1"></li></~~source~~>		Eine Kachel in der ersten Reihe (row) und der ersten Spalte (col), die sich über jeweils eine Reihe + Spalte erstreckt, wird somit wie folgt definiert: <syntaxhighlight lang="html"><li data-row="1" data-col="1" data-sizex="1" data-sizey="1"></li></syntaxhighlight>
	Eine Kachel, die in der ersten Reihe und in der zweiten Spalte positioniert ist, drei Spalten breit und vier Reihen hoch ist, sieht so aus: <~~source~~ lang="html"><li data-row="1" data-col="2" data-sizex="3" data-sizey="4"></li></~~source~~>		Eine Kachel, die in der ersten Reihe und in der zweiten Spalte positioniert ist, drei Spalten breit und vier Reihen hoch ist, sieht so aus: <syntaxhighlight lang="html"><li data-row="1" data-col="2" data-sizex="3" data-sizey="4"></li></syntaxhighlight>

	==<span id="example1"></span>4x4 Muster==		==<span id="example1"></span>4x4 Muster==
Zeile 44:		Zeile 44:

	[[Datei:FTUI_Layout_Gridster_01.png]]		[[Datei:FTUI_Layout_Gridster_01.png]]
	<~~source~~ lang="html">		<syntaxhighlight lang="html">
	<body>		<body>
	<div class="gridster">		<div class="gridster">
Zeile 70:		Zeile 70:
	</div>		</div>
	</body>		</body>
	</~~source~~>		</syntaxhighlight>

	==<span id="example2"></span>Kacheln mit verschiedenen Breiten==		==<span id="example2"></span>Kacheln mit verschiedenen Breiten==
	[[Datei:FTUI_Layout_Gridster_02.png]]		[[Datei:FTUI_Layout_Gridster_02.png]]
	<~~source~~ lang="html">		<syntaxhighlight lang="html">
	<body>		<body>
	<div class="gridster">		<div class="gridster">
Zeile 93:		Zeile 93:
	</div>		</div>
	</body>		</body>
	</~~source~~>		</syntaxhighlight>

	==<span id="example3"></span>Kacheln mit verschiedenen Höhen==		==<span id="example3"></span>Kacheln mit verschiedenen Höhen==
	[[Datei:FTUI_Layout_Gridster_03.png]]		[[Datei:FTUI_Layout_Gridster_03.png]]
	<~~source~~ lang="html">		<syntaxhighlight lang="html">
	<body>		<body>
	<div class="gridster">		<div class="gridster">
Zeile 117:		Zeile 117:
	</div>		</div>
	</body>		</body>
	</~~source~~>		</syntaxhighlight>

	==<span id="example4"></span>Kacheln mit verschiedenen Breiten und Höhen==		==<span id="example4"></span>Kacheln mit verschiedenen Breiten und Höhen==
	[[Datei:FTUI_Layout_Gridster_04.png]]		[[Datei:FTUI_Layout_Gridster_04.png]]
	<~~source~~ lang="html">		<syntaxhighlight lang="html">
	<body>		<body>
	<div class="gridster">		<div class="gridster">
Zeile 140:		Zeile 140:
	</div>		</div>
	</body>		</body>
	</~~source~~>		</syntaxhighlight>

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

Drhirn am 3. März 2017 um 09:31 Uhr

2017-03-03T09:31:52Z

← Nächstältere Version		Version vom 3. März 2017, 11:31 Uhr
Zeile 5:		Zeile 5:

	In der Grundkonfiguration ist es möglich, einzelne Kacheln per Drag&Drop an eine andere Position zu verschieben, sofern in der Kachel ein <header>-Abschnitt vorhanden ist. Dieses Verhalten kann mit dem META-Tag '''gridster_disable''' gesteuert werden. Der Standardwert ist 1, somit ist das Verschieben erlaubt. Der Wert 0 deaktiviert diese Möglichkeit.		In der Grundkonfiguration ist es möglich, einzelne Kacheln per Drag&Drop an eine andere Position zu verschieben, sofern in der Kachel ein <header>-Abschnitt vorhanden ist. Dieses Verhalten kann mit dem META-Tag '''gridster_disable''' gesteuert werden. Der Standardwert ist 1, somit ist das Verschieben erlaubt. Der Wert 0 deaktiviert diese Möglichkeit.
	<source lang="html"><meta name="gridster_disable" content='1'></source>		<source lang="html"><meta name="gridster_disable" content="1"></source>

Drhirn am 3. März 2017 um 09:31 Uhr

2017-03-03T09:31:43Z

← Nächstältere Version		Version vom 3. März 2017, 11:31 Uhr
Zeile 5:		Zeile 5:

	In der Grundkonfiguration ist es möglich, einzelne Kacheln per Drag&Drop an eine andere Position zu verschieben, sofern in der Kachel ein <header>-Abschnitt vorhanden ist. Dieses Verhalten kann mit dem META-Tag '''gridster_disable''' gesteuert werden. Der Standardwert ist 1, somit ist das Verschieben erlaubt. Der Wert 0 deaktiviert diese Möglichkeit.		In der Grundkonfiguration ist es möglich, einzelne Kacheln per Drag&Drop an eine andere Position zu verschieben, sofern in der Kachel ein <header>-Abschnitt vorhanden ist. Dieses Verhalten kann mit dem META-Tag '''gridster_disable''' gesteuert werden. Der Standardwert ist 1, somit ist das Verschieben erlaubt. Der Wert 0 deaktiviert diese Möglichkeit.
	<source lang="html"><meta name='gridster_disable' content='1'></source>		<source lang="html"><meta name="gridster_disable" content='1'></source>


Zeile 26:		Zeile 26:
	Um ein unschönes "Zusammenschieben" der Kacheln auf kleinen Displays zu vermeiden, können Mindestbreite und -höhe gesetzt werden:		Um ein unschönes "Zusammenschieben" der Kacheln auf kleinen Displays zu vermeiden, können Mindestbreite und -höhe gesetzt werden:
	<source lang="html">		<source lang="html">
	<meta name='gridster_min_width' content='100'>		<meta name="gridster_min_width" content="100">
	<meta name='gridster_min_height' content='100'>		<meta name="gridster_min_height" content="100">
	</source>		</source>

Drhirn: Mindesthöhe u. Breite ergänzt

2017-03-03T09:18:14Z

Mindesthöhe u. Breite ergänzt

← Nächstältere Version		Version vom 3. März 2017, 11:18 Uhr
Zeile 1:		Zeile 1:
	<div style="float: right;">__TOC__</div>		<div style="float: right;">__TOC__</div>
	Das [[{{PAGENAME}}\|Grister Layout]] für [[FHEM Tablet UI]] kann man sich als Schachbrett vorstellen. Es besteht aus Reihen und Spalten, die wiederum einzelne Kacheln enthalten können.		Das [[{{PAGENAME}}\|Grister Layout]] für [[FHEM Tablet UI]] kann man sich als Schachbrett vorstellen. Es besteht aus Reihen und Spalten, die wiederum einzelne Kacheln enthalten können.
			Die gewünschte Anzahl an Spalten und Reihen kann frei festgelegt werden.
	Die Kacheln selbst können sich über [[#example2\|mehrere Reihen]], [[#example3\|mehrere Spalten]] oder [[#example4\|beides]] erstrecken.		Die Kacheln selbst können sich über [[#example2\|mehrere Reihen]], [[#example3\|mehrere Spalten]] oder [[#example4\|beides]] erstrecken.

	~~Die gewünschte Anzahl~~ an ~~Spalten und Reihen~~ kann ~~frei festgelegt~~ werden.		In der Grundkonfiguration ist es möglich, einzelne Kacheln per Drag&Drop an eine andere Position zu verschieben, sofern in der Kachel ein <header>-Abschnitt vorhanden ist. Dieses Verhalten kann mit dem META-Tag '''gridster_disable''' gesteuert werden. Der Standardwert ist 1, somit ist das Verschieben erlaubt. Der Wert 0 deaktiviert diese Möglichkeit.
			<source lang="html"><meta name='gridster_disable' content='1'></source>


	Ohne spezielle ~~Konfiguration~~ für die Höhe/Breite der Kacheln wird die Kachelgröße dabei automatisch an den verfügbaren Platz auf dem Display (bzw. im Browserfenster) angepasst.		Ohne spezielle Einstellungen für die Höhe/Breite der Kacheln wird die Kachelgröße dabei automatisch an den verfügbaren Platz auf dem Display (bzw. im Browserfenster) angepasst.

	Soll die Größe der Kacheln manuell angepasst werden, gibt es dafür zwei Möglichkeiten:		Soll die Größe der Kacheln manuell angepasst werden, gibt es dafür zwei Möglichkeiten:
Zeile 21:		Zeile 23:
	<meta name="gridster_base_height" content="131">		<meta name="gridster_base_height" content="131">
	</source>		</source>

			Um ein unschönes "Zusammenschieben" der Kacheln auf kleinen Displays zu vermeiden, können Mindestbreite und -höhe gesetzt werden:
			<source lang="html">
			<meta name='gridster_min_width' content='100'>
			<meta name='gridster_min_height' content='100'>
			</source>

			Der Abstand zwischen den einzelnen Kacheln kann mit dem META-Tag '''widget_margin''' gesteuert werden. <source lang="html"><meta name="widget_margin" content="4"></source>


Zeile 28:		Zeile 38:
	Eine Kachel, die in der ersten Reihe und in der zweiten Spalte positioniert ist, drei Spalten breit und vier Reihen hoch ist, sieht so aus: <source lang="html"><li data-row="1" data-col="2" data-sizex="3" data-sizey="4"></li></source>		Eine Kachel, die in der ersten Reihe und in der zweiten Spalte positioniert ist, drei Spalten breit und vier Reihen hoch ist, sieht so aus: <source lang="html"><li data-row="1" data-col="2" data-sizex="3" data-sizey="4"></li></source>


	~~Der Abstand zwischen den einzelnen Kacheln kann mit dem META-Tag '''widget_margin''' gesteuert werden. <source lang="html"><meta name="widget_margin" content="4"></source>~~
	==<span id="example1"></span>4x4 Muster==		==<span id="example1"></span>4x4 Muster==
	Hier sind vier Spalten und vier Reihen dargestellt. Eine einzelne Kachel ist dabei eine Spalte breit und eine Zeile hoch. Somit ergibt sich eine Anzahl von 16 Kacheln.		Hier sind vier Spalten und vier Reihen dargestellt. Eine einzelne Kachel ist dabei eine Spalte breit und eine Zeile hoch. Somit ergibt sich eine Anzahl von 16 Kacheln.

Drhirn am 2. März 2017 um 17:06 Uhr

2017-03-02T17:06:40Z

← Nächstältere Version		Version vom 2. März 2017, 19:06 Uhr
Zeile 1:		Zeile 1:
	~~{{Baustelle}}~~<div style="float: right;">__TOC__</div>		<div style="float: right;">__TOC__</div>
	Das [[{{PAGENAME}}\|Grister Layout]] für [[FHEM Tablet UI]] kann man sich als Schachbrett vorstellen. Es besteht aus Reihen und Spalten, die wiederum einzelne Kacheln enthalten können.		Das [[{{PAGENAME}}\|Grister Layout]] für [[FHEM Tablet UI]] kann man sich als Schachbrett vorstellen. Es besteht aus Reihen und Spalten, die wiederum einzelne Kacheln enthalten können.
	Die Kacheln selbst können sich über [[#example2\|mehrere Reihen]], [[#example3\|mehrere Spalten]] oder [[#example4\|beides]] erstrecken.		Die Kacheln selbst können sich über [[#example2\|mehrere Reihen]], [[#example3\|mehrere Spalten]] oder [[#example4\|beides]] erstrecken.

Drhirn am 2. März 2017 um 16:50 Uhr

2017-03-02T16:50:07Z

← Nächstältere Version		Version vom 2. März 2017, 18:50 Uhr
Zeile 9:		Zeile 9:

	Soll die Größe der Kacheln manuell angepasst werden, gibt es dafür zwei Möglichkeiten:		Soll die Größe der Kacheln manuell angepasst werden, gibt es dafür zwei Möglichkeiten:
	# ~~Es wird die~~ Anzahl an ~~verfügbaren~~ Spalten und Reihen ~~festgelegt.~~ Dies ~~kann~~ mit den META-Tags '''gridster_cols''' und '''gridster_rows''' ~~geschehen~~. Die Größe der Kacheln wird dabei automatisch berechnet.		# Die Anzahl an gewünschten Spalten und Reihen festlegen: Dies geschieht mit den META-Tags '''gridster_cols''' und '''gridster_rows'''. Die Größe der Kacheln wird dabei automatisch berechnet.
	# ~~Es wird mit den~~ META-Tags '''gridster_base_width''' und '''gridster_base_height''' ~~eine fixe Größe für die Kacheln vorgegeben~~. Eventuell vorhandene Angaben von ''gridster_cols'' und ''gridster_rows'' werden in diesem Fall ignoriert.		# Eine fixe Größe für die Kacheln vorgeben: Dazu werden die META-Tags '''gridster_base_width''' und '''gridster_base_height''' verwendet. Eventuell vorhandene Angaben von ''gridster_cols'' und ''gridster_rows'' werden in diesem Fall ignoriert.
	Beide Möglichkeiten in je einem Beispiel:		Beide Möglichkeiten in je einem Beispiel:
	<source lang="html">		<source lang="html">

Drhirn am 2. März 2017 um 15:03 Uhr

2017-03-02T15:03:24Z

@@ Zeile 1: / Zeile 1: @@
-{{Baustelle}}
+{{Baustelle}}<div style="float: right;">__TOC__</div>
-==4x4 Muster==
+Das [[{{PAGENAME}}|Grister Layout]] für [[FHEM Tablet UI]] kann man sich als Schachbrett vorstellen. Es besteht aus Reihen und Spalten, die wiederum einzelne Kacheln enthalten können.
 [[Datei:FTUI_Layout_Gridster_01.png]]
 <source lang="html">
@@ Zeile 30: / Zeile 64: @@
 </source>
-==Verschiedene Breiten==
+==<span id="example2"></span>Kacheln mit verschiedenen Breiten==
 [[Datei:FTUI_Layout_Gridster_02.png]]
 <source lang="html">
@@ Zeile 53: / Zeile 87: @@
 </source>
-==Verschiedene Höhen==
+==<span id="example3"></span>Kacheln mit verschiedenen Höhen==
 [[Datei:FTUI_Layout_Gridster_03.png]]
 <source lang="html">
@@ Zeile 77: / Zeile 111: @@
 </source>
-==Verschiedene Breiten und Höhen==
+==<span id="example4"></span>Kacheln mit verschiedenen Breiten und Höhen==
 [[Datei:FTUI_Layout_Gridster_04.png]]
 <source lang="html">