Floorplan im LCARS Design - Versionsgeschichte

Weissenborn: /* Schalter für die Beleuchtung */ Pfade angepasst

2020-04-08T08:41:22Z

Schalter für die Beleuchtung: Pfade angepasst

← Nächstältere Version		Version vom 8. April 2020, 10:41 Uhr
Zeile 218:		Zeile 218:
	@font-face {		@font-face {
	font-family: 'lcars';		font-family: 'lcars';
	src: url('~~/fhem~~/images/default/lcars/lcarsgtj3-webfont.eot');		src: url('../images/default/lcars/lcarsgtj3-webfont.eot');
	src: url('~~/fhem~~/images/default/lcars/lcarsgtj3-webfont.eot?#iefix') format('embedded-opentype'),		src: url('../images/default/lcars/lcarsgtj3-webfont.eot?#iefix') format('embedded-opentype'),
	url('~~/fhem~~/images/default/lcars/lcarsgtj3-webfont.woff') format('woff'),		url('../images/default/lcars/lcarsgtj3-webfont.woff') format('woff'),
	url('~~/fhem~~/images/default/lcars/lcarsgtj3-webfont.ttf') format('truetype'),		url('../images/default/lcars/lcarsgtj3-webfont.ttf') format('truetype'),
	url('~~/fhem~~/images/default/lcars/lcarsgtj3-webfont.svg#lcarsgtj3lcarsgtj3') format('svg');		url('../images/default/lcars/lcarsgtj3-webfont.svg#lcarsgtj3lcarsgtj3') format('svg');
	font-weight: normal;		font-weight: normal;
	font-style: normal;		font-style: normal;

Weissenborn: "!important" verhindert das Übrschreiben der settings. Der Pfad hat auch nicht mehr gestimmt. 100% BG-size ist ein vorgriff, der bei FullHd schon passt, die Menüeinträge müssen aber noch daran angepasst werden für zukünftige Auflösungen

2020-04-08T07:53:01Z

"!important" verhindert das Übrschreiben der settings. Der Pfad hat auch nicht mehr gestimmt. 100% BG-size ist ein vorgriff, der bei FullHd schon passt, die Menüeinträge müssen aber noch daran angepasst werden für zukünftige Auflösungen

← Nächstältere Version		Version vom 8. April 2020, 09:53 Uhr
Zeile 37:		Zeile 37:
	Eintrag in der CSS-Datei:		Eintrag in der CSS-Datei:
	<syntaxhighlight lang="css">		<syntaxhighlight lang="css">
	body { background-color:#~~ffffff~~;		body { background-color: #000000 !important;
	background-image: ~~url(~~/~~fhem~~/~~icons~~/lcars/background.svg);		background-repeat: no-repeat !important;
	~~background-size: 1920px 1080px;~~		background-size: 100% !important;
	~~overflow:hidden;~~		background-image: ../images/default/lcars/background.svg') !important;
	~~background-position: 0px 0px~~}		}
	</syntaxhighlight>		</syntaxhighlight>

Markusbloch: Anpassung von -Tags nach

2017-07-26T17:57:59Z

Anpassung von <source>-Tags nach <syntaxhighlight>

← Nächstältere Version		Version vom 26. Juli 2017, 19:57 Uhr
Zeile 36:		Zeile 36:

	Eintrag in der CSS-Datei:		Eintrag in der CSS-Datei:
	<~~source~~ lang="css">		<syntaxhighlight lang="css">
	body { background-color:#ffffff;		body { background-color:#ffffff;
	background-image: url(/fhem/icons/lcars/background.svg);		background-image: url(/fhem/icons/lcars/background.svg);
Zeile 42:		Zeile 42:
	overflow:hidden;		overflow:hidden;
	background-position: 0px 0px}		background-position: 0px 0px}
	</~~source~~>		</syntaxhighlight>

	Nun noch die Anweisung <code>set WEB rereadicons</code> durchführen und der Floorplan zeigt den Hintergrund im LCARS-Design an.		Nun noch die Anweisung <code>set WEB rereadicons</code> durchführen und der Floorplan zeigt den Hintergrund im LCARS-Design an.
Zeile 69:		Zeile 69:
	Als Beispiel die SVG-Datei für den Menüpunkt "Status". Bei den anderen Dateien ändert sich nur der Text im Text-Tag. In diesen sind jeweils die Webfont-Dateien eingebunden. Dies ist erforderlich, weil die SVG-Dateien über die fhem.cfg via HTML-Code über das Object-Tag eingebunden werden. In diesem Fall wirken die Einstellungen aus der CSS-Datei nicht.		Als Beispiel die SVG-Datei für den Menüpunkt "Status". Bei den anderen Dateien ändert sich nur der Text im Text-Tag. In diesen sind jeweils die Webfont-Dateien eingebunden. Dies ist erforderlich, weil die SVG-Dateien über die fhem.cfg via HTML-Code über das Object-Tag eingebunden werden. In diesem Fall wirken die Einstellungen aus der CSS-Datei nicht.

	<~~source~~ lang="xml">		<syntaxhighlight lang="xml">
	<?xml version="1.0" encoding="UTF-8" standalone="no"?>		<?xml version="1.0" encoding="UTF-8" standalone="no"?>
	<!-- Created with Inkscape (http://www.inkscape.org/) -->		<!-- Created with Inkscape (http://www.inkscape.org/) -->
Zeile 157:		Zeile 157:
	</g>		</g>
	</svg>		</svg>
	</~~source~~>		</syntaxhighlight>

	Die Einbindung in der fhem.cfg:		Die Einbindung in der fhem.cfg:
Zeile 190:		Zeile 190:

	Der erforderliche Eintrag in der CSS-Datei		Der erforderliche Eintrag in der CSS-Datei
	<~~source~~ lang="css">		<syntaxhighlight lang="css">
	/LCARS: SVG definieren, um auf das gesamte Bild klicken zu können/		/LCARS: SVG definieren, um auf das gesamte Bild klicken zu können/
	a.svg {		a.svg {
Zeile 204:		Zeile 204:
	left:0;		left:0;
	}		}
	</~~source~~>		</syntaxhighlight>
	Nach einem <code>set WEB rereadicons</code> ist die Navigation zwischen den einzelnen Floorplänen möglich.		Nach einem <code>set WEB rereadicons</code> ist die Navigation zwischen den einzelnen Floorplänen möglich.

Zeile 211:		Zeile 211:

	In der CSS-Datei werden die Webfonts nochmals eingebunden. Die ist erforderlich, weil durch das Device-Attribute "devStateIcon" die Inhalte der SVG-Dateien direkt in die Seite geschrieben und somit auch ein Zugriff auf die CSS-Datei möglich ist.		In der CSS-Datei werden die Webfonts nochmals eingebunden. Die ist erforderlich, weil durch das Device-Attribute "devStateIcon" die Inhalte der SVG-Dateien direkt in die Seite geschrieben und somit auch ein Zugriff auf die CSS-Datei möglich ist.
	<~~source~~ lang="css">		<syntaxhighlight lang="css">
	/*LCARS-Schriftart clientunabhängig verfügbar machen		/*LCARS-Schriftart clientunabhängig verfügbar machen
	Wird in SVG-Texten nochmal separat definiert, sobald die SVG im Tag		Wird in SVG-Texten nochmal separat definiert, sobald die SVG im Tag
Zeile 234:		Zeile 234:
	svg.switch_open { height:55px; width:130px; fill:#ffffff; vertical-align:middle; margin:0 0; }		svg.switch_open { height:55px; width:130px; fill:#ffffff; vertical-align:middle; margin:0 0; }
	svg.switch_close { height:55px; width:130px; fill:#ffffff; vertical-align:middle; margin:0 0; }		svg.switch_close { height:55px; width:130px; fill:#ffffff; vertical-align:middle; margin:0 0; }
	</~~source~~>		</syntaxhighlight>

	Die Datei fhem/www/images/default/lcars/switch_off.svg:		Die Datei fhem/www/images/default/lcars/switch_off.svg:
Zeile 296:		Zeile 296:

	Datei: fhem/www/images/default/lcars/lbl_switch_kueche1.svg		Datei: fhem/www/images/default/lcars/lbl_switch_kueche1.svg
	<~~source~~ lang="xml">		<syntaxhighlight lang="xml">
	<?xml version="1.0" encoding="UTF-8" standalone="no"?>		<?xml version="1.0" encoding="UTF-8" standalone="no"?>
	<!-- Created with Inkscape (http://www.inkscape.org/) -->		<!-- Created with Inkscape (http://www.inkscape.org/) -->
Zeile 380:		Zeile 380:
	</g>		</g>
	</svg>		</svg>
	</~~source~~>		</syntaxhighlight>

	Datei: fhem/www/images/default/lcars/lbl_switch_kueche2.svg		Datei: fhem/www/images/default/lcars/lbl_switch_kueche2.svg
	<~~source~~ lang="xml">		<syntaxhighlight lang="xml">
	<?xml version="1.0" encoding="UTF-8" standalone="no"?>		<?xml version="1.0" encoding="UTF-8" standalone="no"?>
	<!-- Created with Inkscape (http://www.inkscape.org/) -->		<!-- Created with Inkscape (http://www.inkscape.org/) -->
Zeile 467:		Zeile 467:
	</g>		</g>
	</svg>		</svg>
	</~~source~~>		</syntaxhighlight>

	Datei: fhem/www/images/default/lcars/headline_switches.svg		Datei: fhem/www/images/default/lcars/headline_switches.svg
	<~~source~~ lang="xml">		<syntaxhighlight lang="xml">
	<?xml version="1.0" encoding="UTF-8" standalone="no"?>		<?xml version="1.0" encoding="UTF-8" standalone="no"?>
	<!-- Created with Inkscape (http://www.inkscape.org/) -->		<!-- Created with Inkscape (http://www.inkscape.org/) -->
Zeile 548:		Zeile 548:
	</g>		</g>
	</svg>		</svg>
	</~~source~~>		</syntaxhighlight>

	Datei: fhem/www/images/default/lcars/line1.svg		Datei: fhem/www/images/default/lcars/line1.svg
Zeile 596:		Zeile 596:
	In der verwendeten CSS-Datei muss nun der Style des Slider und Handle wie folgt angepasst werden.		In der verwendeten CSS-Datei muss nun der Style des Slider und Handle wie folgt angepasst werden.

	<~~source~~ lang="css">		<syntaxhighlight lang="css">
	/* detail-selector & slider */		/* detail-selector & slider */
	select { margin-left:5px; margin-right:5px; }		select { margin-left:5px; margin-right:5px; }
Zeile 612:		Zeile 612:
	border:0px solid; color:#ff9900; background-image:url(/fhem/icons/lcars/slider_handle.svg); text-align:center; padding-top:38px;}		border:0px solid; color:#ff9900; background-image:url(/fhem/icons/lcars/slider_handle.svg); text-align:center; padding-top:38px;}
	.downText { margin-top:2px; }		.downText { margin-top:2px; }
	</~~source~~>		</syntaxhighlight>

	Zur Erklärung:		Zur Erklärung:
	<~~source~~ lang="css">		<syntaxhighlight lang="css">
	.slider { ... width:190px; height:55px; border:0px solid; ... background-image:url(/fhem/icons/lcars/slider.svg)}		.slider { ... width:190px; height:55px; border:0px solid; ... background-image:url(/fhem/icons/lcars/slider.svg)}
	</~~source~~>		</syntaxhighlight>

	Die Breite und Höhe entspricht der Größe der slider.svg. Es gibt keinen Rahmen und die URL zum slider.svg wird gesetzt.		Die Breite und Höhe entspricht der Größe der slider.svg. Es gibt keinen Rahmen und die URL zum slider.svg wird gesetzt.

	<~~source~~ lang="css">		<syntaxhighlight lang="css">
	.handle { ... font-size: 20px; ... background-image:url(/fhem/icons/lcars/slider_handle.svg); text-align:center; padding-top:38px;}		.handle { ... font-size: 20px; ... background-image:url(/fhem/icons/lcars/slider_handle.svg); text-align:center; padding-top:38px;}
	</~~source~~>		</syntaxhighlight>

	Die Schriftgröße auf 20px setzen. Die URL des slider_handle.svg setzen und den Text um 38px nach unten verschieben. Dadurch steht dieser unterhalb des Dreiecks.		Die Schriftgröße auf 20px setzen. Die URL des slider_handle.svg setzen und den Text um 38px nach unten verschieben. Dadurch steht dieser unterhalb des Dreiecks.

Maxix2: #backimg verschwinden und aktuelle Seite.

2016-07-16T21:11:32Z

#backimg verschwinden und aktuelle Seite.

@@ Zeile 639: / Zeile 639: @@
 attr HMW_LC_Dim1L_DR_MEQ0311914_03 webCmd level
 </pre>
 == Weblinks ==

Maxix2: Doppelten Eintrag entfernt

2016-07-16T11:59:41Z

Doppelten Eintrag entfernt

← Nächstältere Version		Version vom 16. Juli 2016, 13:59 Uhr
Zeile 54:		Zeile 54:
	* fhem/www/images/default/lcars/lcarsgtj3-webfont.eot		* fhem/www/images/default/lcars/lcarsgtj3-webfont.eot
	* fhem/www/images/default/lcars/lcarsgtj3-webfont.svg		* fhem/www/images/default/lcars/lcarsgtj3-webfont.svg
	* fhem/www/images/default/lcars/lcarsgtj3-webfont.eot
	* fhem/www/images/default/lcars/lcarsgtj3-webfont.ttf		* fhem/www/images/default/lcars/lcarsgtj3-webfont.ttf
	* fhem/www/images/default/lcars/lcarsgtj3-webfont.woff		* fhem/www/images/default/lcars/lcarsgtj3-webfont.woff

Maxix2: Nach der Datei-Zusammenstellung sind alle Fonts unter /lcars und nicht direkt unter default.

2016-07-16T08:52:44Z

Nach der Datei-Zusammenstellung sind alle Fonts unter /lcars und nicht direkt unter default.

← Nächstältere Version		Version vom 16. Juli 2016, 10:52 Uhr
Zeile 219:		Zeile 219:
	@font-face {		@font-face {
	font-family: 'lcars';		font-family: 'lcars';
	src: url('/fhem/images/default/lcarsgtj3-webfont.eot');		src: url('/fhem/images/default/lcars/lcarsgtj3-webfont.eot');
	src: url('/fhem/images/default/lcarsgtj3-webfont.eot?#iefix') format('embedded-opentype'),		src: url('/fhem/images/default/lcars/lcarsgtj3-webfont.eot?#iefix') format('embedded-opentype'),
	url('/fhem/images/default/lcarsgtj3-webfont.woff') format('woff'),		url('/fhem/images/default/lcars/lcarsgtj3-webfont.woff') format('woff'),
	url('/fhem/images/default/lcarsgtj3-webfont.ttf') format('truetype'),		url('/fhem/images/default/lcars/lcarsgtj3-webfont.ttf') format('truetype'),
	url('/fhem/images/default/lcarsgtj3-webfont.svg#lcarsgtj3lcarsgtj3') format('svg');		url('/fhem/images/default/lcars/lcarsgtj3-webfont.svg#lcarsgtj3lcarsgtj3') format('svg');
	font-weight: normal;		font-weight: normal;
	font-style: normal;		font-style: normal;

Krokofant: /* Erweiterung Slider */ mehr source-tags

2016-03-21T20:48:02Z

Erweiterung Slider: mehr source-tags

← Nächstältere Version		Version vom 21. März 2016, 22:48 Uhr
Zeile 597:		Zeile 597:
	In der verwendeten CSS-Datei muss nun der Style des Slider und Handle wie folgt angepasst werden.		In der verwendeten CSS-Datei muss nun der Style des Slider und Handle wie folgt angepasst werden.

	<~~pre~~>		<source lang="css">
	/* detail-selector & slider */		/* detail-selector & slider */
	select { margin-left:5px; margin-right:5px; }		select { margin-left:5px; margin-right:5px; }
Zeile 613:		Zeile 613:
	border:0px solid; color:#ff9900; background-image:url(/fhem/icons/lcars/slider_handle.svg); text-align:center; padding-top:38px;}		border:0px solid; color:#ff9900; background-image:url(/fhem/icons/lcars/slider_handle.svg); text-align:center; padding-top:38px;}
	.downText { margin-top:2px; }		.downText { margin-top:2px; }
	</~~pre~~>		</source>

	Zur Erklärung:		Zur Erklärung:
			<source lang="css">
	<~~pre~~>
	.slider { ... width:190px; height:55px; border:0px solid; ... background-image:url(/fhem/icons/lcars/slider.svg)}		.slider { ... width:190px; height:55px; border:0px solid; ... background-image:url(/fhem/icons/lcars/slider.svg)}
	</~~pre~~>		</source>

	Die Breite und Höhe entspricht der Größe der slider.svg. Es gibt keinen Rahmen und die URL zum slider.svg wird gesetzt.		Die Breite und Höhe entspricht der Größe der slider.svg. Es gibt keinen Rahmen und die URL zum slider.svg wird gesetzt.

	<~~pre~~>		<source lang="css">
	.handle { ... font-size: 20px; ... background-image:url(/fhem/icons/lcars/slider_handle.svg); text-align:center; padding-top:38px;}		.handle { ... font-size: 20px; ... background-image:url(/fhem/icons/lcars/slider_handle.svg); text-align:center; padding-top:38px;}
	</~~pre~~>		</source>

	Die Schriftgröße auf 20px setzen. Die URL des slider_handle.svg setzen und den Text um 38px nach unten verschieben. Dadurch steht dieser unterhalb des Dreiecks.		Die Schriftgröße auf 20px setzen. Die URL des slider_handle.svg setzen und den Text um 38px nach unten verschieben. Dadurch steht dieser unterhalb des Dreiecks.

Krokofant: /* Label und Rahmen */ mehr source-tags

2016-03-21T20:45:54Z

Label und Rahmen: mehr source-tags

← Nächstältere Version		Version vom 21. März 2016, 22:45 Uhr
Zeile 297:		Zeile 297:

	Datei: fhem/www/images/default/lcars/lbl_switch_kueche1.svg		Datei: fhem/www/images/default/lcars/lbl_switch_kueche1.svg
	<~~pre~~>		<source lang="xml">
	<?xml version="1.0" encoding="UTF-8" standalone="no"?>		<?xml version="1.0" encoding="UTF-8" standalone="no"?>
	<!-- Created with Inkscape (http://www.inkscape.org/) -->		<!-- Created with Inkscape (http://www.inkscape.org/) -->
Zeile 381:		Zeile 381:
	</g>		</g>
	</svg>		</svg>
	</~~pre~~>		</source>

	Datei: fhem/www/images/default/lcars/lbl_switch_kueche2.svg		Datei: fhem/www/images/default/lcars/lbl_switch_kueche2.svg
	<~~pre~~>		<source lang="xml">
	<?xml version="1.0" encoding="UTF-8" standalone="no"?>		<?xml version="1.0" encoding="UTF-8" standalone="no"?>
	<!-- Created with Inkscape (http://www.inkscape.org/) -->		<!-- Created with Inkscape (http://www.inkscape.org/) -->
Zeile 467:		Zeile 468:
	</g>		</g>
	</svg>		</svg>
	</~~pre~~>		</source>

	Datei: fhem/www/images/default/lcars/headline_switches.svg		Datei: fhem/www/images/default/lcars/headline_switches.svg
	<~~pre~~>		<source lang="xml">
	<?xml version="1.0" encoding="UTF-8" standalone="no"?>		<?xml version="1.0" encoding="UTF-8" standalone="no"?>
	<!-- Created with Inkscape (http://www.inkscape.org/) -->		<!-- Created with Inkscape (http://www.inkscape.org/) -->
Zeile 547:		Zeile 549:
	</g>		</g>
	</svg>		</svg>
	</~~pre~~>		</source>

	Datei: fhem/www/images/default/lcars/line1.svg		Datei: fhem/www/images/default/lcars/line1.svg

Ph1959de: Beispiele teilweise auf Source-Tags umgestellt (als Anregung für den Rest); Bilder könnten/sollten noch auf Vorschauversion (|mini|...) umgestellt werden.

2016-03-16T10:02:53Z

Beispiele teilweise auf Source-Tags umgestellt (als Anregung für den Rest); Bilder könnten/sollten noch auf Vorschauversion (|mini|...) umgestellt werden.

← Nächstältere Version		Version vom 16. März 2016, 12:02 Uhr
Zeile 11:		Zeile 11:

	== Anlegen der Floorpläne ==		== Anlegen der Floorpläne ==
	In der ~~fhem.cfg~~ wurden die Floorpläne für Status, Erdgeschoss, Obergeschoss und Garten angelegt, welche alle auf die gleiche CSS-Datei fhem/www/pgm2/floorplanstyle_lcars.css verweisen:		In der [[Konfiguration]] wurden die Floorpläne für Status, Erdgeschoss, Obergeschoss und Garten angelegt, welche alle auf die gleiche CSS-Datei fhem/www/pgm2/floorplanstyle_lcars.css verweisen:
	<pre>		<pre>
	#Floorpläne		#Floorpläne
Zeile 32:		Zeile 32:

	== Einbinden des Hintergrundbildes ==		== Einbinden des Hintergrundbildes ==
			[[Datei:Background.svg\|mini\|right\|300px\|Das Hintergrundbild als SVG-Datei]]
	Als Hintergrund wurde die Vektorgrafik fhem/www/images/default/lcars/background.svg angelegt und diese über die CSS-Datei eingebunden.		Als Hintergrund wurde die Vektorgrafik fhem/www/images/default/lcars/background.svg angelegt und diese über die CSS-Datei eingebunden.

	Eintrag in der CSS-Datei:		Eintrag in der CSS-Datei:
	<~~pre~~>		<source lang="css">
	body { background-color:#ffffff;		body { background-color:#ffffff;
	background-image: url(/fhem/icons/lcars/background.svg);		background-image: url(/fhem/icons/lcars/background.svg);
Zeile 41:		Zeile 42:
	overflow:hidden;		overflow:hidden;
	background-position: 0px 0px}		background-position: 0px 0px}
	</~~pre~~>		</source>

	~~Das Hintergrundbild als SVG-Datei:~~

	~~[[Datei:Background.svg\|300px\|Hintergrund]]~~

	~~Nun noch ein SET WEB rereadicons durchführen und der Floorplan zeigt den Hintergrund im LCARS-Design angezeigt.~~

			Nun noch die Anweisung <code>set WEB rereadicons</code> durchführen und der Floorplan zeigt den Hintergrund im LCARS-Design an.

	== LCARS - Schrift ==		== LCARS - Schrift ==
Zeile 56:		Zeile 52:

	Es werden folgende Dateien generiert:		Es werden folgende Dateien generiert:

	* fhem/www/images/default/lcars/lcarsgtj3-webfont.eot		* fhem/www/images/default/lcars/lcarsgtj3-webfont.eot
	* fhem/www/images/default/lcars/lcarsgtj3-webfont.svg		* fhem/www/images/default/lcars/lcarsgtj3-webfont.svg
Zeile 65:		Zeile 60:

	Diese Webfont-Dateien müssen ins Verzeichnis fhem/www/images/... kopiert werden, damit sie genutzt werden können.		Diese Webfont-Dateien müssen ins Verzeichnis fhem/www/images/... kopiert werden, damit sie genutzt werden können.


	== Das Navigationsmenü ==		== Das Navigationsmenü ==
	Für das Navigationsmenü gibt es jeweils eine SVG-Datei, welche dann in der fhem.cfg eingebunden wird.		Für das Navigationsmenü gibt es jeweils eine SVG-Datei, welche dann in der fhem.cfg eingebunden wird.
			* /www/images/default/lcars/menue_EG.svg
	/www/images/default/lcars/menue_EG.svg		* /www/images/default/lcars/menue_Garten.svg
			* /www/images/default/lcars/menue_OG.svg
	/www/images/default/lcars/menue_Garten.svg		* /www/images/default/lcars/menue_status.svg

	/www/images/default/lcars/menue_OG.svg

	/www/images/default/lcars/menue_status.svg

	Als Beispiel die SVG-Datei für den Menüpunkt "Status". Bei den anderen Dateien ändert sich nur der Text im Text-Tag. In diesen sind jeweils die Webfont-Dateien eingebunden. Dies ist erforderlich, weil die SVG-Dateien über die fhem.cfg via HTML-Code über das Object-Tag eingebunden werden. In diesem Fall wirken die Einstellungen aus der CSS-Datei nicht.		Als Beispiel die SVG-Datei für den Menüpunkt "Status". Bei den anderen Dateien ändert sich nur der Text im Text-Tag. In diesen sind jeweils die Webfont-Dateien eingebunden. Dies ist erforderlich, weil die SVG-Dateien über die fhem.cfg via HTML-Code über das Object-Tag eingebunden werden. In diesem Fall wirken die Einstellungen aus der CSS-Datei nicht.

	<~~pre~~>		<source lang="xml">
	<?xml version="1.0" encoding="UTF-8" standalone="no"?>		<?xml version="1.0" encoding="UTF-8" standalone="no"?>
	<!-- Created with Inkscape (http://www.inkscape.org/) -->		<!-- Created with Inkscape (http://www.inkscape.org/) -->
Zeile 168:		Zeile 158:
	</g>		</g>
	</svg>		</svg>
	</~~pre~~>		</source>

	Die Einbindung in der fhem.cfg:		Die Einbindung in der fhem.cfg:

	<pre>		<pre>
	#Menü definieren		#Menü definieren
Zeile 202:		Zeile 191:

	Der erforderliche Eintrag in der CSS-Datei		Der erforderliche Eintrag in der CSS-Datei
			<source lang="css">
	<~~pre~~>
	/LCARS: SVG definieren, um auf das gesamte Bild klicken zu können/		/LCARS: SVG definieren, um auf das gesamte Bild klicken zu können/
	a.svg {		a.svg {
Zeile 217:		Zeile 205:
	left:0;		left:0;
	}		}
	</~~pre~~>		</source>
	Nach einem ~~SET~~ WEB rereadicons ist die Navigation zwischen den einzelnen Floorplänen möglich.		Nach einem <code>set WEB rereadicons</code> ist die Navigation zwischen den einzelnen Floorplänen möglich.

	== Schalter für die Beleuchtung ==		== Schalter für die Beleuchtung ==
Zeile 224:		Zeile 212:

	In der CSS-Datei werden die Webfonts nochmals eingebunden. Die ist erforderlich, weil durch das Device-Attribute "devStateIcon" die Inhalte der SVG-Dateien direkt in die Seite geschrieben und somit auch ein Zugriff auf die CSS-Datei möglich ist.		In der CSS-Datei werden die Webfonts nochmals eingebunden. Die ist erforderlich, weil durch das Device-Attribute "devStateIcon" die Inhalte der SVG-Dateien direkt in die Seite geschrieben und somit auch ein Zugriff auf die CSS-Datei möglich ist.
	<~~pre~~>		<source lang="css">
	/*LCARS-Schriftart clientunabhängig verfügbar machen		/*LCARS-Schriftart clientunabhängig verfügbar machen
	Wird in SVG-Texten nochmal separat definiert, sobald die SVG im Tag		Wird in SVG-Texten nochmal separat definiert, sobald die SVG im Tag
Zeile 247:		Zeile 235:
	svg.switch_open { height:55px; width:130px; fill:#ffffff; vertical-align:middle; margin:0 0; }		svg.switch_open { height:55px; width:130px; fill:#ffffff; vertical-align:middle; margin:0 0; }
	svg.switch_close { height:55px; width:130px; fill:#ffffff; vertical-align:middle; margin:0 0; }		svg.switch_close { height:55px; width:130px; fill:#ffffff; vertical-align:middle; margin:0 0; }
	</~~pre~~>		</source>

	Die Datei fhem/www/images/default/lcars/switch_off.svg:		Die Datei fhem/www/images/default/lcars/switch_off.svg:
Zeile 652:		Zeile 640:

	== Weblinks ==		== Weblinks ==
			* {{Link2Forum\|Topic=26673\|LinkText=Foren-Thema zum LCARS-Floorplan}}
	* ~~[http://forum.fhem.de/index.php/topic,~~26673~~.0.html~~ Foren-Thema zum LCARS-Floorplan]
	* [http://www.gtjlcars.de Hintergrundinformationen zu LCARS]		* [http://www.gtjlcars.de Hintergrundinformationen zu LCARS]

	[[Kategorie:HOWTOS]]		[[Kategorie:HOWTOS]]

Krokofant: Abschnitt zur LCARS-Schrift so umgeschrieben, dass man nicht dafür ins Forum wechseln muss, Forumsthema am Schluss des Artikels verlinkt

2016-03-16T07:30:16Z

Abschnitt zur LCARS-Schrift so umgeschrieben, dass man nicht dafür ins Forum wechseln muss, Forumsthema am Schluss des Artikels verlinkt

← Nächstältere Version		Version vom 16. März 2016, 09:30 Uhr
Zeile 48:		Zeile 48:

	Nun noch ein SET WEB rereadicons durchführen und der Floorplan zeigt den Hintergrund im LCARS-Design angezeigt.		Nun noch ein SET WEB rereadicons durchführen und der Floorplan zeigt den Hintergrund im LCARS-Design angezeigt.


	== LCARS - Schrift ==		== LCARS - Schrift ==
	Um die ~~richtige Schriftart clientunabhängig anzeigen zu können~~, ~~wurde eine TTF-Datei in Webfont umgewandelt~~. ~~Die Beschreibung hierzu befindet sich im Forum~~ http://~~forum~~.~~fhem~~.de/~~index~~.~~php~~/~~topic,26673~~.0.~~html~~. ~~Es werden folgende Dateien generiert:~~		Die in ''Star Trek - The Next Generation'' verwendete Schrift für die LCARS-Konsolen war die Helvetica Ultra Compressed, wobei ausschließlich Großbuchstaben verwendet wurden. ([http://www.gtjlcars.de/LCARSindex/LCARSFONTS.htm Quelle: www.gtjlcars.de]) Die Schrift kann man als TrueType-Font online kaufen, allerdings gibt es als Alternative die LCARS GTJ3 zum freien [http://www.gtjlcars.de/LCARSGTJ3.zip Download].

	~~fhem~~/www/~~images~~/~~default/lcars/lcarsgtj3~~-~~webfont~~.~~eot~~		Um die richtige Schriftart clientunabhängig anzeigen zu können, wird die Schrift mit Hilfe des [http://www.fontsquirrel.com/tools/webfont-generator Webfont Generators] von Font Squirrel die TTF-Datei in Webfont umgewandelt.

	~~fhem/www/images/default/lcars/lcarsgtj3-webfont.svg~~		Es werden folgende Dateien generiert:

	fhem/www/images/default/lcars/lcarsgtj3-webfont.eot		* fhem/www/images/default/lcars/lcarsgtj3-webfont.eot
			* fhem/www/images/default/lcars/lcarsgtj3-webfont.svg
			* fhem/www/images/default/lcars/lcarsgtj3-webfont.eot
			* fhem/www/images/default/lcars/lcarsgtj3-webfont.ttf
			* fhem/www/images/default/lcars/lcarsgtj3-webfont.woff
			* fhem/www/images/default/lcars/lcarsgtj3-webfont.woff2

	fhem/www/images/~~default/lcars/lcarsgtj3-webfont~~.~~ttf~~		Diese Webfont-Dateien müssen ins Verzeichnis fhem/www/images/... kopiert werden, damit sie genutzt werden können.

	~~fhem/www/images/default/lcars/lcarsgtj3-webfont.woff~~

	~~fhem/www/images/default/lcars/lcarsgtj3-webfont.woff2~~
	== Das Navigationsmenü ==		== Das Navigationsmenü ==
	Für das Navigationsmenü gibt es jeweils eine SVG-Datei, welche dann in der fhem.cfg eingebunden wird.		Für das Navigationsmenü gibt es jeweils eine SVG-Datei, welche dann in der fhem.cfg eingebunden wird.
Zeile 646:		Zeile 651:
	</pre>		</pre>

			== Weblinks ==

			* [http://forum.fhem.de/index.php/topic,26673.0.html Foren-Thema zum LCARS-Floorplan]
			* [http://www.gtjlcars.de Hintergrundinformationen zu LCARS]

	[[Kategorie:HOWTOS]]		[[Kategorie:HOWTOS]]