DOIF/uiTable - Versionsgeschichte

Damian-s am 3. Januar 2020 um 21:16 Uhr

2020-01-03T21:16:54Z

← Nächstältere Version		Version vom 3. Januar 2020, 23:16 Uhr
Zeile 3:		Zeile 3:
	An dieser Stelle werden Gestaltungsansätze zur '''uiTable''' gezeigt.		An dieser Stelle werden Gestaltungsansätze zur '''uiTable''' gezeigt.

	Einen schnellen Einstieg gibt es an dieser Stelle: [[DOIF/uiTable Schnelleinstieg]]		Einen schnellen Einstieg gibt es an dieser Stelle: '''[[DOIF/uiTable Schnelleinstieg]]'''

	== Sensorauswahl mit WID und DOIF_Readings ==		== Sensorauswahl mit WID und DOIF_Readings ==

Trelle: Hinweis auf DOIF/uiTable_Schnelleinstieg

2019-12-09T09:04:54Z

Hinweis auf DOIF/uiTable_Schnelleinstieg

← Nächstältere Version		Version vom 9. Dezember 2019, 11:04 Uhr
Zeile 1:		Zeile 1:
	Das DOIF-Attribut '''uiTable''' dient der Definition eines User Interface im Kontext von FHEMWEB.		Das DOIF-Attribut '''uiTable''' dient der Definition eines User Interface im Kontext von FHEMWEB.
	Die Syntax ist in der Befehlsreferenz zu [https://fhem.de/commandref_DE.html#DOIF_uiTable uiTable] beschrieben und wird hier nicht behandelt.		Die Syntax ist in der Befehlsreferenz zu [https://fhem.de/commandref_DE.html#DOIF_uiTable uiTable] beschrieben und wird hier nicht behandelt.
	An dieser Stelle werden ~~Beispiele~~ zur ~~Gestaltung der~~ '''uiTable''' gezeigt.		An dieser Stelle werden Gestaltungsansätze zur '''uiTable''' gezeigt.

			Einen schnellen Einstieg gibt es an dieser Stelle: [[DOIF/uiTable Schnelleinstieg]]

	== Sensorauswahl mit WID und DOIF_Readings ==		== Sensorauswahl mit WID und DOIF_Readings ==
Zeile 848:		Zeile 850:

	== Links ==		== Links ==
			* [[DOIF/uiTable_Schnelleinstieg]]
	* [[DOIF]]		* [[DOIF]]
	* [[DOIFtools#Farbtabellen_erzeugen\|DOIFtools Farbtabellen anzeigen]]		* [[DOIFtools#Farbtabellen_erzeugen\|DOIFtools Farbtabellen anzeigen]]

Trelle: /* Darstellung von Zeit und Datum */ SVG in uiTable

2018-08-28T21:24:02Z

Darstellung von Zeit und Datum: SVG in uiTable

@@ Zeile 808: / Zeile 808: @@
 </div>"
 </syntaxhighlight>
 == Weitere uiTable Konfigurationen ==

Trelle: /* Weitere uiTable Konfigurationen */

2018-04-21T17:55:22Z

Weitere uiTable Konfigurationen

← Nächstältere Version		Version vom 21. April 2018, 19:55 Uhr
Zeile 811:		Zeile 811:
	== Weitere uiTable Konfigurationen ==		== Weitere uiTable Konfigurationen ==
	* Frontend zur Beschattungssteuerung {{Link2Forum\|Topic=80203\|Message=722337\|LinkText=Forenthread}}		* Frontend zur Beschattungssteuerung {{Link2Forum\|Topic=80203\|Message=722337\|LinkText=Forenthread}}


	== Weitere Hinweise ==		== Weitere Hinweise ==

Trelle: /* Weitere Hinweise */ Link eingefügt

2018-04-21T17:54:23Z

Weitere Hinweise: Link eingefügt

← Nächstältere Version		Version vom 21. April 2018, 19:54 Uhr
Zeile 808:		Zeile 808:
	</div>"		</div>"
	</syntaxhighlight>		</syntaxhighlight>

			== Weitere uiTable Konfigurationen ==
			* Frontend zur Beschattungssteuerung {{Link2Forum\|Topic=80203\|Message=722337\|LinkText=Forenthread}}


	== Weitere Hinweise ==		== Weitere Hinweise ==

Trelle: /* Browserunterstützung */ Style Abhängigkeit

2018-01-27T06:09:30Z

Browserunterstützung: Style Abhängigkeit

← Nächstältere Version		Version vom 27. Januar 2018, 08:09 Uhr
Zeile 828:		Zeile 828:
	* Apple [https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariCSSRef/Introduction.html https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariCSSRef/Introduction.html]		* Apple [https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariCSSRef/Introduction.html https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariCSSRef/Introduction.html]
	* Microsoft [https://msdn.microsoft.com/de-de/library/cc351024(v=vs.85).aspx https://msdn.microsoft.com/de-de/library/cc351024(v=vs.85).aspx]		* Microsoft [https://msdn.microsoft.com/de-de/library/cc351024(v=vs.85).aspx https://msdn.microsoft.com/de-de/library/cc351024(v=vs.85).aspx]

			=== FHEM-Styles ===
			Die Positionierung in den Beispielen ist zum Teil abhängig vom gewählten Style und muss ggf. angepasst werden.

	== Links ==		== Links ==

50watt: /* Positionierung über die Matrixstruktur einer Tabelle */Tippfehler

2018-01-03T22:30:25Z

Positionierung über die Matrixstruktur einer Tabelle: Tippfehler

← Nächstältere Version		Version vom 4. Januar 2018, 00:30 Uhr
Zeile 189:		Zeile 189:
	Dem table-Element der uiTable wird über <code>$TABLE = "CSS-Attribute";</code> eine Formatierung zugewiesen. Die Formatierung beinhaltet das Laden eine Hintergrundbildes mit <code>background-image:url($FW_ME/www/pgm2/images/Grundriss.svg);</code>.		Dem table-Element der uiTable wird über <code>$TABLE = "CSS-Attribute";</code> eine Formatierung zugewiesen. Die Formatierung beinhaltet das Laden eine Hintergrundbildes mit <code>background-image:url($FW_ME/www/pgm2/images/Grundriss.svg);</code>.
	=== Positionierung über die Matrixstruktur einer Tabelle ===		=== Positionierung über die Matrixstruktur einer Tabelle ===
	Durch die Formatierung <code>text-align:center</code> ~~werden~~ wird der Zelleninhalt zentriert. Die Positionierung von Text und Widget, die Verschiebung aus der Mitte der Zelle, erfolgt durch Zeilenumbruch <code><br></code> und Leerzeichen <code>&nbsp;</code>. Da Text und Widget in der Tabellenzelle durch ein Komma getrennt werden, erfolgt dort ein Zeilenumbruch.		Durch die Formatierung <code>text-align:center</code> wird der Zelleninhalt zentriert. Die Positionierung von Text und Widget, die Verschiebung aus der Mitte der Zelle, erfolgt durch Zeilenumbruch <code><br></code> und Leerzeichen <code>&nbsp;</code>. Da Text und Widget in der Tabellenzelle durch ein Komma getrennt werden, erfolgt dort ein Zeilenumbruch.

	=== Beispiel für [[Import_von_Code_Snippets\|Raw definition]] ===		=== Beispiel für [[Import_von_Code_Snippets\|Raw definition]] ===

50watt: /* Frontendelemente über einem Hintergrund (Grundriss) platzieren */Tippfehler

2018-01-03T22:28:58Z

Frontendelemente über einem Hintergrund (Grundriss) platzieren: Tippfehler

← Nächstältere Version		Version vom 4. Januar 2018, 00:28 Uhr
Zeile 186:		Zeile 186:
	}}		}}
	[[Datei:Grundriss1.png\|300px\|thumb\|right\|Positionierung von Text und Widget auf einem Hintergrundbild]]		[[Datei:Grundriss1.png\|300px\|thumb\|right\|Positionierung von Text und Widget auf einem Hintergrundbild]]
	In diesem Beispiel wird ein Hintergundbild geladen und das Bild mit Widgets un Text beschriftet.		In diesem Beispiel wird ein Hintergundbild geladen und das Bild mit Widgets und Text beschriftet.
	Dem table-Element der uiTable wird über <code>$TABLE = "CSS-Attribute";</code> eine Formatierung zugewiesen. Die Formatierung beinhaltet das Laden eine Hintergrundbildes mit <code>background-image:url($FW_ME/www/pgm2/images/Grundriss.svg);</code>.		Dem table-Element der uiTable wird über <code>$TABLE = "CSS-Attribute";</code> eine Formatierung zugewiesen. Die Formatierung beinhaltet das Laden eine Hintergrundbildes mit <code>background-image:url($FW_ME/www/pgm2/images/Grundriss.svg);</code>.
	=== Positionierung über die Matrixstruktur einer Tabelle ===		=== Positionierung über die Matrixstruktur einer Tabelle ===

Trelle: /* Beispiel für Raw definition (nur das Attribut uiTable) */

2017-12-13T21:40:47Z

Beispiel für Raw definition (nur das Attribut uiTable)

← Nächstältere Version		Version vom 13. Dezember 2017, 23:40 Uhr
Zeile 109:		Zeile 109:
	}\		}\
	\		\
	DEF TPL_Thermostat("<div style='position:relative;;width:50px;;height:50px'><div style='position:absolute;;left:0px;;top:0px'>".WID($1,$TPL{knob1})."</div><div style='position:absolute;;left:0px;;top:0px'>".WID($2,$TPL{knob2},"set")."</div>".STY($3,$TPL{style2}.DOIF_hsv($1,7,25,240,360,100,100)).STY($4,$TPL{style3}.DOIF_hsv($2,7,25,240,360,100,100))."</div>");;\		DEF TPL_Thermostat("<div style='position:relative;;width:50px;;height:50px'><div style='position:absolute;;left:0px;;top:0px'>".WID($1,$TPL{knob1})."</div><div style='position:absolute;;left:0px;;top:0px'>".WID($2,$TPL{knob2},"set")."</div>".STY($3,$TPL{style2}.DOIF_hsv($1,7,25,240,360,100,100)).STY($4,$TPL{style3}.DOIF_hsv($2,7,25,240,360,100,100))."</div>")\
	\		\
	WID([HMsensor_Labor],"uzsuSelectRadio,enable,disable,disabled")\		WID([HMsensor_Labor],"uzsuSelectRadio,enable,disable,disabled")\

Trelle: /* Alternativ, die Nutzung von Methodentemplates */

2017-12-13T21:40:14Z

Alternativ, die Nutzung von Methodentemplates

← Nächstältere Version		Version vom 13. Dezember 2017, 23:40 Uhr
Zeile 93:		Zeile 93:
	Das Template mit den Platzhaltern <syntaxhighlight lang="perl" inline>$1</syntaxhighlight> bis <syntaxhighlight lang="perl" inline>$4</syntaxhighlight>		Das Template mit den Platzhaltern <syntaxhighlight lang="perl" inline>$1</syntaxhighlight> bis <syntaxhighlight lang="perl" inline>$4</syntaxhighlight>
	<syntaxhighlight lang="perl">		<syntaxhighlight lang="perl">
	DEF TPL_Thermostat("<div style='position:relative;width:50px;height:50px'><div style='position:absolute;left:0px;top:0px'>".WID($1,$TPL{knob1})."</div><div style='position:absolute;left:0px;top:0px'>".WID($2,$TPL{knob2},"set")."</div>".STY($3,$TPL{style2}.DOIF_hsv($1,7,25,240,360,100,100)).STY($4,$TPL{style3}.DOIF_hsv($2,7,25,240,360,100,100))."</div>");		DEF TPL_Thermostat("<div style='position:relative;width:50px;height:50px'><div style='position:absolute;left:0px;top:0px'>".WID($1,$TPL{knob1})."</div><div style='position:absolute;left:0px;top:0px'>".WID($2,$TPL{knob2},"set")."</div>".STY($3,$TPL{style2}.DOIF_hsv($1,7,25,240,360,100,100)).STY($4,$TPL{style3}.DOIF_hsv($2,7,25,240,360,100,100))."</div>")
	</syntaxhighlight>		</syntaxhighlight>
	und die Definition des Widgets in der Tabelle mit vier Parametern in DOIF-Syntax.		und die Definition des Widgets in der Tabelle mit vier Parametern in DOIF-Syntax.