FHEMWiki - Benutzerbeiträge [de]

Raspberry Pi 3: GPIO-Port Module und Bluetooth

2018-01-16T14:19:03Z

Msfox:

__NOTOC__
Der Raspberry Pi 3 nutzt für den GPIO-Port standardmäßig den UART1 (ttyS0), während die vorherigen Raspberry Pi-Modelle noch den UART0 dafür verwendeten. Der UART0 (ttyAMA0) wird beim Pi 3 durch das neu eingeführte Bluetooth-Modul softwaremäßig belegt. Der UART1 des Pi 3 mit Anhängigkeiten von CPU-Frequenz, CPU-Last, Temperatur und anderem ist für den Betrieb von Aufsteckmodulen jedoch häufig nicht stabil genug. Der Pi 3 muss daher zur Verwendung von einigen Aufsteckmodulen für den GPIO-Port, die über GPIO 14/15 kommunizieren so umkonfiguriert werden, dass der GPIO-Port wie bei den Vorgängermodellen wieder den UART0 einsetzt.

Unter anderem folgende Aufsteckmodule setzen für einen stabilen Betrieb die Nutzung des UART0 für den GPIO-Port voraus:
* EnOceanPi ([[:Kategorie:EnOcean Components|EnOcean]]-Gateway)
* Razberry ([[:Kategorie:Z-Wave Components|ZWave]]-Gateway)
* RaspBee ([[:Kategorie:ZigBee Components|ZigBee]]-Gateway)

Immer wieder angeführte und einfach umzusetzende Lösung ist Bluetooth zu deaktivieren und dann den UART0 (ttyAMA0) auf den GPIO-Port umzumappen (siehe beispielsweise {{Link2Forum|Topic=52161|Message=439757}}). Damit kann man aber das im Pi 3 eingebaute Bluetooth-Modul nicht mehr nutzen. Ein Vorteil des Pi 3 zu den Vorgängermodellen geht somit verloren.

{{Link2FU|14179|robert.heinze}} hat aufbauend auf seinen Erkenntnissen in diesem {{Link2Forum|Topic=51112}} nachfolgendes HowTo zur Verfügung gestellt,
nach dessen Abarbeitung eine parallele Verwendung von Aufsteckmodulen für den GPIO-Port und Bluetooth in FHEM mit dem Pi 3 möglich ist.

== HowTo ==
Standardmäßig belegt der Raspberry 3 den Software-UART-ttyAMA0 mit Bluetooth. Da wir diese Schnittstelle aber für serielle Module wie z.B. hier den EnOceanPi verwenden, legen wir den integrierten Bluetooth-Empfänger des Raspberry Pi 3 auf ttyS0 (UART1 - „mini UART“) um den Hardware-UART auf die TX/RX-Pins zu legen (UART0 - „full UART“). Hierfür sind einige Maßnahmen vorzunehmen, die nachfolgend schrittweise beschrieben werden.

=== Schritt 1: ===
Im ersten Schritt gilt es den Raspberry Pi 3 zu konfigurieren:

<syntaxhighlight lang="bash">
sudo raspi-config
</syntaxhighlight>

A7 Serial auf enabled setzen

=== Schritt 2: ===
Zur Bearbeitung von Textdateien wird hier und bei allen folgenden Schritten der Editor nano genutzt. Selbstverständlich kann auch auf einen anderen Editor zurückgegriffen werden.
<syntaxhighlight lang="bash">
sudo nano /boot/cmdline.txt
</syntaxhighlight>
Diese Zeile suchen:
dwc_otg.lpm_enable=0 console=tty1 root=/dev/mmcblk0p2 rootfstype=ext4 elevator=deadline fsck.repair=yes rootwait
und editieren. Der Eintrag <code>console=serial0,115200</code> sollte wie schon beim RPi2 entfernt werden, wenn es gesetzt ist, damit die UART-Schnittstelle von Zusatzmodulen wie EnOceanPi verwendet werden kann. Der genaue Inhalt der Zeile kann sich je nach System unterscheiden.

Hinweis: Ändert man nachträglich noch einmal etwas über "raspi-config", so kann es vorkommen, dass <code>console=serial0,115200</code> wieder in der Zeile ergänzt wird.

=== Schritt 3: ===
Raspberry auf aktuellen Stand bringen:
<syntaxhighlight lang="bash">
sudo apt-get update
sudo apt-get upgrade
</syntaxhighlight>

=== Schritt 4: ===
Firmware aktualisieren:
<syntaxhighlight lang="bash">
sudo apt-get install rpi-update
sudo rpi-update
sudo reboot
</syntaxhighlight>
Ein rpi-update soll nur gemacht werden, wenn es unbedingt erforderlich ist. (Quelle: [https://www.elektronik-kompendium.de/sites/raspberry-pi/2006061.htm])

=== Schritt 5: ===
In der Config-Datei /boot/config.txt wird das dementsprechende Overlay geladen, um Bluetooth auf mini UART zu legen:

dtoverlay=pi3-miniuart-bt

Die Taktfrequenz muss beim Starten auf eine konstante Frequenz eingestellt werden:

enable_uart=1

UART1 wird auf die Maximalfrequenz oder Minimalfrequenz gelegt, da der mini UART die Baudrate abhängig von der System Clock variiert:
force_turbo=1 oder core_freq=250, wir entscheiden uns für force_turbo=1 sofern ein dementsprechendes Netzteil (2,5A) verwendet wird.

<syntaxhighlight lang="bash">
sudo nano /boot/config.txt
</syntaxhighlight>
Am Ende der Datei einfach die folgenden Zeilen hinzufügen:

dtoverlay=pi3-miniuart-bt
enable_uart=1
force_turbo=1

=== Schritt 6: ===
Dieser Schritt ist nach Mai 2016 nicht mehr notwendig.

Der Bluetooth UART-Service muss auf ttyS0 gelegt werden.

<syntaxhighlight lang="bash">
sudo nano /lib/systemd/system/hciuart.service
</syntaxhighlight>

In der Datei 2x ttyAMA0 gegen ttyS0 (oder alternativ /dev/serial1) tauschen, was in folgendem Code resultiert:

<pre>
[Unit]
Description=Configure Bluetooth Modems connected by UART
ConditionPathIsDirectory=/proc/device-tree/soc/gpio@7e200000/bt_pins
Before=bluetooth.service
After=dev-ttyS0.device

[Service]
Type=forking
ExecStart=/usr/bin/hciattach /dev/ttyS0 bcm43xx 921600 noflow -

[Install]
WantedBy=multi-user.target
</pre>

=== Schritt 7: ===
Dieser Schritt ist fragwürdig und ab September 2017 durch Anpassungen in der fhem.pl nicht mehr notwendig.

Auf Grund eines Timing-Problems in der Boot-Phase zwischen Bluetooth und dem FHEM Start muss der FHEM-Service 10 Sekunden verzögert werden.
<syntaxhighlight lang="bash">
sudo nano /etc/init.d/fhem
</syntaxhighlight>

In der ersten Zeile der Datei
sleep 10
einfügen.

Nun sollten nach einem Reboot das GPIO-Port-Aufsteckmodul (ttyAMA0) und Raspi 3-Bluetooth (ttyS0) parallel funktionieren.

=== Schritt 8 (optional) ===
Wenn Bluetooth noch nicht installiert wurde, muss es noch installiert werden.

<syntaxhighlight lang="bash">
sudo apt-get install pi-bluetooth
</syntaxhighlight>

=== Schritt 9: (optional) ===
Sollte es immer noch nicht möglich sein, auf die Schnittstelle /dev/ttyAMA0 zuzugreifen,
so sollte man die rechte überprüfen:
<syntaxhighlight lang="bash">
ls -lha /dev/ttyAMA0
</syntaxhighlight>
Hierbei muss sichergestellt sein, dass der User "fhem" zur angezeigten Gruppe (z.B. dialout) gehört.
Ist dies nicht der Fall, dann den User "fhem" hinzufügen
<syntaxhighlight lang="bash">
usermod -a -G dialout fhem
</syntaxhighlight>
Quelle: [https://forum.fhem.de/index.php/topic,50651.msg576004.html#msg576004]

=== Schritt 10: (optional) ===
Den Dienst serial-getty deaktivieren
<syntaxhighlight lang="bash">
systemctl disable serial-getty@ttyAMA0.service
</syntaxhighlight>
Quelle: [https://forum.fhem.de/index.php/topic,50651.msg576004.html#msg576004]
[[Kategorie:HOWTOS]]
[[Kategorie:Raspberry Pi]]

Floorplan im LCARS Design

2016-02-24T20:33:37Z

Msfox:

Datei:Switch off.svg

2016-02-24T20:32:44Z

Msfox:

Datei:Switch on.svg

2016-02-24T20:29:16Z

Msfox:

Floorplan im LCARS Design

2016-02-24T20:23:56Z

Msfox:

Datei:Slider handle.svg

2016-02-24T20:01:44Z

Msfox:

Datei:Slider.svg

2016-02-24T19:56:51Z

Msfox:

Floorplan im LCARS Design

2016-02-23T07:57:52Z

Msfox:

Floorplan im LCARS Design

2016-02-23T07:53:40Z

Msfox:

Floorplan im LCARS Design

2016-02-23T07:53:08Z

Msfox:

Datei:Line2.svg

2016-02-23T07:51:15Z

Msfox:

Datei:Line1.svg

2016-02-23T07:51:00Z

Msfox:

Floorplan im LCARS Design

2016-02-23T07:49:59Z

Msfox:

Datei:Corner1 TR.svg

2016-02-23T07:47:02Z

Msfox:

Datei:Corner1 TL.svg

2016-02-23T07:46:39Z

Msfox: Msfox lud eine neue Version von Datei:Corner1 TL.svg hoch

Datei:Corner1 TL.svg

2016-02-23T07:45:59Z

Msfox:

Datei:Corner1 BR.svg

2016-02-23T07:45:10Z

Msfox:

Datei:Corner1 BL.svg

2016-02-23T07:42:41Z

Msfox:

Floorplan im LCARS Design

2016-02-23T07:41:56Z

Msfox:

In diesem Wiki geht es um die Erstellung eines [[FLOORPLAN|Floorplans]] im '''LCARS Design''', siehe [https://www.google.de/search?q=LCARS&client=opera&hs=3Zm&tbm=isch&tbo=u&source=univ&sa=X&ei=W2czVcmtKIOksAGp0oCICA&ved=0CCEQsAQ&biw=1920&bih=971/ LCARS Beispiele].

Es gibt auf Fhem.de einen [http://fhem.de/forum_22336.jpg Screenshot] eines Floorplans im LCARS Design.

In {{Link2Forum|Topic=22336|Message=180850|LinkText=diesem Forenbeitrag}} tauchte obiges Design erstmals auf, entwickelt wurde es von Forenbenutzer {{Link2FU|4194|Tion}}.

== Screenshot 1 ==
[[File:lcars_all.jpg|600px|Übersicht]]

(Die Slider sind nocht nicht beschrieben; Sie folgen...

Die 3D-Darstellung des Erdgeschosses ist ebenfalls nicht beschrieben, da dies nicht lcars-spezifisch ist)

== 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:
<pre>
#Floorpläne
define LCARS_STATUS FLOORPLAN
attr LCARS_STATUS fp_noMenu 1
attr LCARS_STATUS stylesheet floorplanstyle_lcars.css

define LCARS_EG FLOORPLAN
attr LCARS_EG fp_noMenu 1
attr LCARS_EG stylesheet floorplanstyle_lcars.css

define LCARS_OG FLOORPLAN
attr LCARS_OG fp_noMenu 1
attr LCARS_OG stylesheet floorplanstyle_lcars.css

define LCARS_GARTEN FLOORPLAN
attr LCARS_GARTEN fp_noMenu 1
attr LCARS_GARTEN stylesheet floorplanstyle_lcars.css
</pre>

== Einbinden des Hintergrundbildes ==
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:
<pre>
body { background-color:#ffffff;
background-image: url(/fhem/icons/lcars/background.svg);
background-size: 1920px 1080px;
overflow:hidden;
background-position: 0px 0px}
</pre>

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.
== 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:

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
== Das Navigationsmenü ==
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_Garten.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.

<pre>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>


<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="130"
height="55"
viewBox="0 0 130 55.000001"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="switch_off.svg">
<style
type="text/css"
id="style3">
@font-face {
font-family: 'lcars';
src: url('/fhem/images/default/lcars/lcarsgtj3-webfont.eot');
src: url('/fhem/images/default/lcars/lcarsgtj3-webfont.eot?#iefix') format('embedded-opentype'),
url('/fhem/images/default/lcars/lcarsgtj3-webfont.woff') format('woff'),
url('/fhem/images/default/lcars/lcarsgtj3-webfont.ttf') format('truetype'),
url('/fhem/images/default/lcars/lcarsgtj3-webfont.svg#lcarsgtj3lcarsgtj3') format('svg');
font-weight: normal;
font-style: normal;}
</style>
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="3.9185501"
inkscape:cx="8.571662"
inkscape:cy="52.612298"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
inkscape:window-width="1827"
inkscape:window-height="1051"
inkscape:window-x="84"
inkscape:window-y="-9"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,0)">
<rect
style="fill:#ff9900;fill-opacity:1"
id="rect3364"
width="130"
height="55"
x="0"
y="0" />
<text
x="125"
y="50"
text-anchor="end"
font-size="35"
font-family="lcars"
fill="#000000"
id="text11">Status</text>
</g>
</svg>
</pre>

Die Einbindung in der fhem.cfg:

<pre>
#Menü definieren
#Class für den Link auf SVG setzen, um auf gesamtes SVG-Bild klicken zu können
#SVG-Class dafür in der CSS-Datei definieren
define Menue_Status weblink htmlCode {'<a class="svg" href="/fhem/floorplan/LCARS_STATUS"><object data="/fhem/icons/lcars/menue_status.svg" type="image/svg+xml"></object></a>'}
attr Menue_Status fp_LCARS_EG 160,10,0,
attr Menue_Status fp_LCARS_GARTEN 160,10,0,
attr Menue_Status fp_LCARS_OG 160,10,0,
attr Menue_Status fp_LCARS_STATUS 160,10,0,

define Menue_EG weblink htmlCode {'<a class="svg" href="/fhem/floorplan/LCARS_EG"><object data="/fhem/icons/lcars/menue_EG.svg" type="image/svg+xml"></object></a>' }
attr Menue_EG fp_LCARS_EG 225,10,0,
attr Menue_EG fp_LCARS_GARTEN 225,10,0,
attr Menue_EG fp_LCARS_OG 225,10,0,
attr Menue_EG fp_LCARS_STATUS 225,10,0,

define Menue_OG weblink htmlCode {'<a class="svg" href="/fhem/floorplan/LCARS_OG"><object data="/fhem/icons/lcars/menue_OG.svg" type="image/svg+xml"></object></a>' }
attr Menue_OG fp_LCARS_EG 290,10,0,
attr Menue_OG fp_LCARS_GARTEN 290,10,0,
attr Menue_OG fp_LCARS_OG 290,10,0,
attr Menue_OG fp_LCARS_STATUS 290,10,0,

define Menue_Garten weblink htmlCode {'<a class="svg" href="/fhem/floorplan/LCARS_GARTEN"><object data="/fhem/icons/lcars/menue_Garten.svg" type="image/svg+xml"></object></a>' }
attr Menue_Garten fp_LCARS_EG 355,10,0,
attr Menue_Garten fp_LCARS_GARTEN 355,10,0,
attr Menue_Garten fp_LCARS_OG 355,10,0,
attr Menue_Garten fp_LCARS_STATUS 355,10,0,
</pre>

Der erforderliche Eintrag in der CSS-Datei

<pre>
/*LCARS: SVG definieren, um auf das gesamte Bild klicken zu können*/
a.svg {
position: relative;
display: inline-block;
}
a.svg:after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left:0;
}
</pre>
Nach einem SET WEB rereadicons ist die Navigation zwischen den einzelnen Floorplänen möglich.

== Schalter für die Beleuchtung ==
Für die Integration der Buttons der Schalter sind folgende Anpassungen erforderlich:

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>
/*LCARS-Schriftart clientunabhängig verfügbar machen
Wird in SVG-Texten nochmal separat definiert, sobald die SVG im Tag
z.b. IMG oder OBJECT verwendet wird.
*/
@font-face {
font-family: 'lcars';
src: url('/fhem/images/default/lcarsgtj3-webfont.eot');
src: url('/fhem/images/default/lcarsgtj3-webfont.eot?#iefix') format('embedded-opentype'),
url('/fhem/images/default/lcarsgtj3-webfont.woff') format('woff'),
url('/fhem/images/default/lcarsgtj3-webfont.ttf') format('truetype'),
url('/fhem/images/default/lcarsgtj3-webfont.svg#lcarsgtj3lcarsgtj3') format('svg');
font-weight: normal;
font-style: normal;
}
/*LCARS: Höhe und Breite der Schalter definieren
der Name svg.xxx ergibt sich, durch die Definition "devStateIcon off:switch_off on:switch_on:off"
in der fhem.cfg zum jeweiligen Device
*/
svg.switch_off { height:55px; width:130px; fill:#ffffff; vertical-align:middle; margin:0 0; }
svg.switch_on { 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; }
</pre>

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

<pre>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>


<svg classname="switch"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
width="130"
height="55"
viewBox="0 0 130 55"
id="svg2">
<defs
id="defs4" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
id="layer1"
>
<path
style="fill:#00ff00;fill-opacity:1"
id="path3360"
d="m 102,0 a 27.4,27.5 0 0 1 27.6,27.6 27.6,27.6 0 0 1 -27.5,27.5 l 0,-27.5 z" />
<rect
style="fill:#00ff00;fill-opacity:1"
id="rect3362"
width="37.5"
x="65"
y="0"
height="55" />
<text
x="60"
y="50"
text-anchor="end"
font-size="45"
font-family="lcars"
fill="#ff9900"
id="text11">Aus</text>
</g>
</svg>
</pre>

Die Datei fhem/www/images/default/lcars/switch_on.svg:
<pre>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>


<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
id="svg2"
viewBox="0 0 130 55"
height="55"
width="130">
<metadata
id="metadata12">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs4" />
<g
id="layer1">
<path
d="m 102,0 a 27.4,27.5 0 0 1 27.6,27.6 27.6,27.6 0 0 1 -27.5,27.5 l 0,-27.5 z"
id="path3360"
style="fill:#ff001a;fill-opacity:1" />
<rect
height="55"
y="0"
x="65"
width="37.599998"
id="rect3362"
style="fill:#ff001a;fill-opacity:1" />
<text
id="text11"
fill="#ff9900"
font-family="lcars"
font-size="45"
text-anchor="end"
y="50"
x="60">An</text>
</g>
</svg>
</pre>

Zuweisen der SVG-Dateien in der fhem.cfg

<pre>
#Icon-Pfad setzen
define WEB FHEMWEB 8083 global
[...]
attr WEB iconPath default:default/lcars

Schalter Lamp1
define HMW_LC_Sw2_DR_LEQ0116953_03 HM485 0000B84F_03
attr HMW_LC_Sw2_DR_LEQ0116953_03 alias kue_lampe_1
attr HMW_LC_Sw2_DR_LEQ0116953_03 devStateIcon off:switch_off on:switch_on:off
attr HMW_LC_Sw2_DR_LEQ0116953_03 firmwareVersion 3.06
attr HMW_LC_Sw2_DR_LEQ0116953_03 fp_LCARS_EG 230,1500,0,
attr HMW_LC_Sw2_DR_LEQ0116953_03 model HMW_LC_Sw2_DR
attr HMW_LC_Sw2_DR_LEQ0116953_03 room hidden
attr HMW_LC_Sw2_DR_LEQ0116953_03 serialNr LEQ0116953
attr HMW_LC_Sw2_DR_LEQ0116953_03 subType switch
#Schlater Lamp2
define HMW_LC_Sw2_DR_LEQ0116953_04 HM485 0000B84F_04
attr HMW_LC_Sw2_DR_LEQ0116953_04 alias kue_lampe_2
attr HMW_LC_Sw2_DR_LEQ0116953_04 devStateIcon off:switch_off:on on:switch_on:off
attr HMW_LC_Sw2_DR_LEQ0116953_04 firmwareVersion 3.06
attr HMW_LC_Sw2_DR_LEQ0116953_04 fp_LCARS_EG 295,1500,0,
attr HMW_LC_Sw2_DR_LEQ0116953_04 model HMW_LC_Sw2_DR
attr HMW_LC_Sw2_DR_LEQ0116953_04 room hidden
attr HMW_LC_Sw2_DR_LEQ0116953_04 serialNr LEQ0116953
attr HMW_LC_Sw2_DR_LEQ0116953_04 subType switch
</pre>

Nach einem SET WEB rereadicons lassen sich die Schalter bedienen.

== Label und Rahmen ==
Damit man nun weiß, was man schaltet und auch der Style stimmt, können noch folgenden Anpassungen vorgenommen werden

Datei: fhem/www/images/default/lcars/corner1_BL.svg
<pre>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>


<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="60"
height="30"
viewBox="0 0 60.000001 30"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
shape-rendering="crispEdges"
sodipodi:docname="corner1_BL.svg">
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="8.9190361"
inkscape:cx="25.358648"
inkscape:cy="22.580645"
inkscape:document-units="px"
inkscape:current-layer="svg2"
showgrid="false"
units="px"
inkscape:window-width="1827"
inkscape:window-height="1051"
inkscape:window-x="84"
inkscape:window-y="-9"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1"
transform="matrix(1,0,0,-1,0,1052.3621)">
<rect
style="fill:#cd6566;fill-opacity:1"
id="rect4138"
width="30"
height="30"
x="30"
y="1022.3621" />
<rect
style="fill:#000000;fill-opacity:1"
id="rect4136"
width="10"
height="25"
x="50"
y="1027.3621" />
<path
style="fill:#cd6566;fill-opacity:1"
id="path4142"
sodipodi:type="arc"
sodipodi:cx="-1052.3621"
sodipodi:cy="-31"
sodipodi:rx="30"
sodipodi:ry="31"
sodipodi:start="0"
sodipodi:end="1.5707963"
d="m -1022.3621,-31 a 30,31 0 0 1 -30,31 l 0,-31 z"
transform="matrix(0,-1,-1,0,0,0)" />
<path
style="fill:#000000;fill-opacity:1"
id="path4142-4"
sodipodi:type="arc"
sodipodi:cx="-1037.3621"
sodipodi:cy="-50"
sodipodi:rx="10"
sodipodi:ry="10"
sodipodi:start="0"
sodipodi:end="1.5707963"
d="m -1027.3621,-50 a 10,10 0 0 1 -10,10 l 0,-10 z"
transform="matrix(0,-1,-1,0,0,0)" />
<rect
style="fill:#000000;fill-opacity:1"
id="rect4136-7"
width="10"
height="15.357702"
x="40"
y="1037.0044" />
</g>
</svg>
</pre>

Datei: fhem/www/images/default/lcars/corner1_BR.svg
<pre>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>


<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="60"
height="30"
viewBox="0 0 60.000001 30"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
shape-rendering="crispEdges"
sodipodi:docname="corner1_BR.svg">
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="8.9190361"
inkscape:cx="25.358648"
inkscape:cy="22.580645"
inkscape:document-units="px"
inkscape:current-layer="svg2"
showgrid="false"
units="px"
inkscape:window-width="1827"
inkscape:window-height="1051"
inkscape:window-x="84"
inkscape:window-y="-9"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1"
transform="matrix(-1,0,0,-1,59.999991,1052.3621)">
<rect
style="fill:#cd6566;fill-opacity:1"
id="rect4138"
width="30"
height="30"
x="30"
y="1022.3621" />
<rect
style="fill:#000000;fill-opacity:1"
id="rect4136"
width="10"
height="25"
x="50"
y="1027.3621" />
<path
style="fill:#cd6566;fill-opacity:1"
id="path4142"
sodipodi:type="arc"
sodipodi:cx="-1052.3621"
sodipodi:cy="-31"
sodipodi:rx="30"
sodipodi:ry="31"
sodipodi:start="0"
sodipodi:end="1.5707963"
d="m -1022.3621,-31 a 30,31 0 0 1 -30,31 l 0,-31 z"
transform="matrix(0,-1,-1,0,0,0)" />
<path
style="fill:#000000;fill-opacity:1"
id="path4142-4"
sodipodi:type="arc"
sodipodi:cx="-1037.3621"
sodipodi:cy="-50"
sodipodi:rx="10"
sodipodi:ry="10"
sodipodi:start="0"
sodipodi:end="1.5707963"
d="m -1027.3621,-50 a 10,10 0 0 1 -10,10 l 0,-10 z"
transform="matrix(0,-1,-1,0,0,0)" />
<rect
style="fill:#000000;fill-opacity:1"
id="rect4136-7"
width="10"
height="15.357702"
x="40"
y="1037.0044" />
</g>
</svg>
</pre>

Datei: fhem/www/images/default/lcars/corner1_TL.svg
<pre>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>


<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="60"
height="30"
viewBox="0 0 60.000001 30"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
shape-rendering="crispEdges"
sodipodi:docname="corner1_TL.svg">
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="8.9190361"
inkscape:cx="36.290323"
inkscape:cy="22.580645"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
inkscape:window-width="1827"
inkscape:window-height="1051"
inkscape:window-x="84"
inkscape:window-y="-9"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-1022.3621)">
<rect
style="fill:#cd6566;fill-opacity:1"
id="rect4138"
width="30"
height="30"
x="30"
y="1022.3621" />
<rect
style="fill:#000000;fill-opacity:1"
id="rect4136"
width="10"
height="25"
x="50"
y="1027.3621" />
<path
style="fill:#cd6566;fill-opacity:1"
id="path4142"
sodipodi:type="arc"
sodipodi:cx="-1052.3621"
sodipodi:cy="-31"
sodipodi:rx="30"
sodipodi:ry="31"
sodipodi:start="0"
sodipodi:end="1.5707963"
d="m -1022.3621,-31 a 30,31 0 0 1 -30,31 l 0,-31 z"
transform="matrix(0,-1,-1,0,0,0)" />
<path
style="fill:#000000;fill-opacity:1"
id="path4142-4"
sodipodi:type="arc"
sodipodi:cx="-1037.3621"
sodipodi:cy="-50"
sodipodi:rx="10"
sodipodi:ry="10"
sodipodi:start="0"
sodipodi:end="1.5707963"
d="m -1027.3621,-50 a 10,10 0 0 1 -10,10 l 0,-10 z"
transform="matrix(0,-1,-1,0,0,0)" />
<rect
style="fill:#000000;fill-opacity:1"
id="rect4136-7"
width="10"
height="15.357702"
x="40"
y="1037.0044" />
</g>
</svg>
</pre>

Datei: fhem/www/images/default/lcars/corner1_TR.svg
<pre>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>


<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="60"
height="30"
viewBox="0 0 60.000001 30"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
shape-rendering="crispEdges"
sodipodi:docname="corner1_TR.svg">
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="8.9190361"
inkscape:cx="25.358648"
inkscape:cy="22.580645"
inkscape:document-units="px"
inkscape:current-layer="svg2"
showgrid="false"
units="px"
inkscape:window-width="1827"
inkscape:window-height="1051"
inkscape:window-x="84"
inkscape:window-y="-9"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1"
transform="matrix(-1,0,0,1,59.999991,-1022.3621)">
<rect
style="fill:#cd6566;fill-opacity:1"
id="rect4138"
width="30"
height="30"
x="30"
y="1022.3621" />
<rect
style="fill:#000000;fill-opacity:1"
id="rect4136"
width="10"
height="25"
x="50"
y="1027.3621" />
<path
style="fill:#cd6566;fill-opacity:1"
id="path4142"
sodipodi:type="arc"
sodipodi:cx="-1052.3621"
sodipodi:cy="-31"
sodipodi:rx="30"
sodipodi:ry="31"
sodipodi:start="0"
sodipodi:end="1.5707963"
d="m -1022.3621,-31 a 30,31 0 0 1 -30,31 l 0,-31 z"
transform="matrix(0,-1,-1,0,0,0)" />
<path
style="fill:#000000;fill-opacity:1"
id="path4142-4"
sodipodi:type="arc"
sodipodi:cx="-1037.3621"
sodipodi:cy="-50"
sodipodi:rx="10"
sodipodi:ry="10"
sodipodi:start="0"
sodipodi:end="1.5707963"
d="m -1027.3621,-50 a 10,10 0 0 1 -10,10 l 0,-10 z"
transform="matrix(0,-1,-1,0,0,0)" />
<rect
style="fill:#000000;fill-opacity:1"
id="rect4136-7"
width="10"
height="15.357702"
x="40"
y="1037.0044" />
</g>
</svg>
</pre>

Datei: fhem/www/images/default/lcars/lbl_switch_kueche1.svg
<pre>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>


<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="260"
height="55"
viewBox="0 0 260 55.000001"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="lbl_switch_kueche1.svg">
<style
type="text/css"
id="style3">
@font-face {
font-family: 'lcars';
src: url('/fhem/images/default/lcars/lcarsgtj3-webfont.eot');
src: url('/fhem/images/default/lcars/lcarsgtj3-webfont.eot?#iefix') format('embedded-opentype'),
url('/fhem/images/default/lcars/lcarsgtj3-webfont.woff') format('woff'),
url('/fhem/images/default/lcars/lcarsgtj3-webfont.ttf') format('truetype'),
url('/fhem/images/default/lcars/lcarsgtj3-webfont.svg#lcarsgtj3lcarsgtj3') format('svg');
font-weight: normal;
font-style: normal;}
</style>
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="3.9185501"
inkscape:cx="133.4632"
inkscape:cy="52.4847"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
inkscape:window-width="1827"
inkscape:window-height="1051"
inkscape:window-x="84"
inkscape:window-y="-9"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1">
<rect
style="fill:#ffcc9a;fill-opacity:1"
id="rect3364"
width="260"
height="55"
x="0"
y="0" />
<text
x="255.354"
y="49.50441"
font-size="35"
id="text11"
style="font-size:35px;font-family:lcars;text-anchor:end;fill:#000000">Küche - Glasbodenleuchte</text>
</g>
</svg>
</pre>
Datei: fhem/www/images/default/lcars/lbl_switch_kueche2.svg
<pre>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>


<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="260"
height="55"
viewBox="0 0 260 55.000001"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="lbl_switch_kueche1.svg">
<style
type="text/css"
id="style3">
@font-face {
font-family: 'lcars';
src: url('/fhem/images/default/lcars/lcarsgtj3-webfont.eot');
src: url('/fhem/images/default/lcars/lcarsgtj3-webfont.eot?#iefix') format('embedded-opentype'),
url('/fhem/images/default/lcars/lcarsgtj3-webfont.woff') format('woff'),
url('/fhem/images/default/lcars/lcarsgtj3-webfont.ttf') format('truetype'),
url('/fhem/images/default/lcars/lcarsgtj3-webfont.svg#lcarsgtj3lcarsgtj3') format('svg');
font-weight: normal;
font-style: normal;}
</style>
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="3.9185501"
inkscape:cx="133.4632"
inkscape:cy="52.4847"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
inkscape:window-width="1827"
inkscape:window-height="1051"
inkscape:window-x="84"
inkscape:window-y="-9"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1">
<rect
style="fill:#ffcc9a;fill-opacity:1"
id="rect3364"
width="260"
height="55"
x="0"
y="0" />
<text
x="255.354"
y="49.50441"
font-size="35"
id="text11"
style="font-size:35px;font-family:lcars;text-anchor:end;fill:#000000">Küche - Deckenleuchte</text>
</g>
</svg>
</pre>
Datei: fhem/www/images/default/lcars/headline_switches.svg
<pre>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>


<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="205"
height="35"
viewBox="0 0 205 35"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="headline_switches.svg">
<style
type="text/css"
id="style3">
@font-face {
font-family: 'lcars';
src: url('/fhem/images/default/lcars/lcarsgtj3-webfont.eot');
src: url('/fhem/images/default/lcars/lcarsgtj3-webfont.eot?#iefix') format('embedded-opentype'),
url('/fhem/images/default/lcars/lcarsgtj3-webfont.woff') format('woff'),
url('/fhem/images/default/lcars/lcarsgtj3-webfont.ttf') format('truetype'),
url('/fhem/images/default/lcars/lcarsgtj3-webfont.svg#lcarsgtj3lcarsgtj3') format('svg');
font-weight: normal;
font-style: normal;}
</style>
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="3.9185501"
inkscape:cx="62.84951"
inkscape:cy="52.357102"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
inkscape:window-width="1827"
inkscape:window-height="1051"
inkscape:window-x="84"
inkscape:window-y="-9"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,0)">
<text
x="205"
y="35"
font-size="35"
id="text11"
style="font-size:35px;font-family:lcars;text-anchor:end;fill:#ff9900">Beleuchtung</text>
</g>
</svg>
</pre>
Datei: fhem/www/images/default/lcars/line1.svg
<pre>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>


<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="40"
height="350"
viewBox="0 0 40 350"
id="svg4138"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="line1.svg"
style="shape-rendering:crispEdges">
<defs
id="defs4140" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="2.5797414"
inkscape:cx="40"
inkscape:cy="257.91145"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
inkscape:window-width="1827"
inkscape:window-height="1051"
inkscape:window-x="84"
inkscape:window-y="-9"
inkscape:window-maximized="1" />
<metadata
id="metadata4143">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-702.36216)">
<rect
style="fill:#cf98cf;fill-opacity:1"
id="rect4686"
width="40"
height="350"
x="0"
y="702.36224" />
</g>
</svg>
</pre>
Datei: fhem/www/images/default/lcars/line2.svg
<pre>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>


<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="500"
height="5"
viewBox="0 0 500 5"
id="svg4138"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="line2.svg"
style="shape-rendering:crispEdges">
<defs
id="defs4140" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="2.6533333"
inkscape:cx="155.43478"
inkscape:cy="33.152174"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
inkscape:window-width="1827"
inkscape:window-height="1051"
inkscape:window-x="84"
inkscape:window-y="-9"
inkscape:window-maximized="1" />
<metadata
id="metadata4143">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-1047.3622)">
<rect
style="fill:#cd6566;fill-opacity:1"
id="rect4686"
width="500"
height="5"
x="0"
y="1047.3622" />
</g>
</svg>
</pre>

Die Einträge in der fhem.cfg
<pre>
#---Rahmen Elemente
define corner1_tl weblink htmlCode {'<object data="/fhem/icons/lcars/corner1_TL.svg" type="image/svg+xml"></object>' }
attr corner1_tl fp_LCARS_EG 200,1200,0,
define corner1_bl weblink htmlCode {'<object data="/fhem/icons/lcars/corner1_BL.svg" type="image/svg+xml"></object>' }
attr corner1_bl fp_LCARS_EG 590,1200,0,
define corner1_tr weblink htmlCode {'<object data="/fhem/icons/lcars/corner1_TR.svg" type="image/svg+xml"></object>' }
attr corner1_tr fp_LCARS_EG 200,1700,0,
define corner1_br weblink htmlCode {'<object data="/fhem/icons/lcars/corner1_BR.svg" type="image/svg+xml"></object>' }
attr corner1_br fp_LCARS_EG 590,1700,0,
define line1_l weblink htmlCode {'<object data="/fhem/icons/lcars/line1.svg" type="image/svg+xml"></object>' }
attr line1_l fp_LCARS_EG 235,1200,0,
define line2_b weblink htmlCode {'<object data="/fhem/icons/lcars/line2.svg" type="image/svg+xml"></object>' }
attr line2_b fp_LCARS_EG 601,1230,0,
define headline_switches weblink htmlCode {'<object data="/fhem/icons/lcars/headline_switches.svg" type="image/svg+xml"></object>' }
attr headline_switches fp_LCARS_EG 183,1481,0,

#Label
define lbl_switch_kueche1 weblink htmlCode {'<object data="/fhem/icons/lcars/lbl_switch_kueche1.svg" type="image/svg+xml"></object>' }
attr lbl_switch_kueche1 fp_LCARS_EG 230,1250,0,
define lbl_switch_kueche2 weblink htmlCode {'<object data="/fhem/icons/lcars/lbl_switch_kueche2.svg" type="image/svg+xml"></object>' }
attr lbl_switch_kueche2 fp_LCARS_EG 295,1250,0,
</pre>

Nach einem SET WEB rereadicons sind nun Labels und Rahmen sichtbar.

Die Grundlagen sind da, die Floorpläne können nun an eigenen Bedürfnisse angepasst werden.
[[Kategorie:HOWTOS]]

Floorplan im LCARS Design

2016-02-23T07:36:27Z

Msfox:

In diesem Wiki geht es um die Erstellung eines [[FLOORPLAN|Floorplans]] im '''LCARS Design''', siehe [https://www.google.de/search?q=LCARS&client=opera&hs=3Zm&tbm=isch&tbo=u&source=univ&sa=X&ei=W2czVcmtKIOksAGp0oCICA&ved=0CCEQsAQ&biw=1920&bih=971/ LCARS Beispiele].

Es gibt auf Fhem.de einen [http://fhem.de/forum_22336.jpg Screenshot] eines Floorplans im LCARS Design.

In {{Link2Forum|Topic=22336|Message=180850|LinkText=diesem Forenbeitrag}} tauchte obiges Design erstmals auf, entwickelt wurde es von Forenbenutzer {{Link2FU|4194|Tion}}.

== Screenshot 1 ==
[[File:lcars_all.jpg|300px|Übersicht]]

(Die Slider sind nocht nicht beschrieben; Sie folgen...)

== 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:
<pre>
#Floorpläne
define LCARS_STATUS FLOORPLAN
attr LCARS_STATUS fp_noMenu 1
attr LCARS_STATUS stylesheet floorplanstyle_lcars.css

define LCARS_EG FLOORPLAN
attr LCARS_EG fp_noMenu 1
attr LCARS_EG stylesheet floorplanstyle_lcars.css

define LCARS_OG FLOORPLAN
attr LCARS_OG fp_noMenu 1
attr LCARS_OG stylesheet floorplanstyle_lcars.css

define LCARS_GARTEN FLOORPLAN
attr LCARS_GARTEN fp_noMenu 1
attr LCARS_GARTEN stylesheet floorplanstyle_lcars.css
</pre>

== Einbinden des Hintergrundbildes ==
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:
<pre>
body { background-color:#ffffff;
background-image: url(/fhem/icons/lcars/background.svg);
background-size: 1920px 1080px;
overflow:hidden;
background-position: 0px 0px}
</pre>

Das Hintergrundbild als SVG-Datei:
[[Datei:Background.svg|300px|thumb|left|Hintergrund]]

Nun noch ein SET WEB rereadicons durchführen und der Floorplan zeigt den Hintergrund im LCARS-Design angezeigt.
== 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:

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
== Das Navigationsmenü ==
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_Garten.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.

<pre>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>


<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="130"
height="55"
viewBox="0 0 130 55.000001"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="switch_off.svg">
<style
type="text/css"
id="style3">
@font-face {
font-family: 'lcars';
src: url('/fhem/images/default/lcars/lcarsgtj3-webfont.eot');
src: url('/fhem/images/default/lcars/lcarsgtj3-webfont.eot?#iefix') format('embedded-opentype'),
url('/fhem/images/default/lcars/lcarsgtj3-webfont.woff') format('woff'),
url('/fhem/images/default/lcars/lcarsgtj3-webfont.ttf') format('truetype'),
url('/fhem/images/default/lcars/lcarsgtj3-webfont.svg#lcarsgtj3lcarsgtj3') format('svg');
font-weight: normal;
font-style: normal;}
</style>
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="3.9185501"
inkscape:cx="8.571662"
inkscape:cy="52.612298"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
inkscape:window-width="1827"
inkscape:window-height="1051"
inkscape:window-x="84"
inkscape:window-y="-9"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,0)">
<rect
style="fill:#ff9900;fill-opacity:1"
id="rect3364"
width="130"
height="55"
x="0"
y="0" />
<text
x="125"
y="50"
text-anchor="end"
font-size="35"
font-family="lcars"
fill="#000000"
id="text11">Status</text>
</g>
</svg>
</pre>

Die Einbindung in der fhem.cfg:

<pre>
#Menü definieren
#Class für den Link auf SVG setzen, um auf gesamtes SVG-Bild klicken zu können
#SVG-Class dafür in der CSS-Datei definieren
define Menue_Status weblink htmlCode {'<a class="svg" href="/fhem/floorplan/LCARS_STATUS"><object data="/fhem/icons/lcars/menue_status.svg" type="image/svg+xml"></object></a>'}
attr Menue_Status fp_LCARS_EG 160,10,0,
attr Menue_Status fp_LCARS_GARTEN 160,10,0,
attr Menue_Status fp_LCARS_OG 160,10,0,
attr Menue_Status fp_LCARS_STATUS 160,10,0,

define Menue_EG weblink htmlCode {'<a class="svg" href="/fhem/floorplan/LCARS_EG"><object data="/fhem/icons/lcars/menue_EG.svg" type="image/svg+xml"></object></a>' }
attr Menue_EG fp_LCARS_EG 225,10,0,
attr Menue_EG fp_LCARS_GARTEN 225,10,0,
attr Menue_EG fp_LCARS_OG 225,10,0,
attr Menue_EG fp_LCARS_STATUS 225,10,0,

define Menue_OG weblink htmlCode {'<a class="svg" href="/fhem/floorplan/LCARS_OG"><object data="/fhem/icons/lcars/menue_OG.svg" type="image/svg+xml"></object></a>' }
attr Menue_OG fp_LCARS_EG 290,10,0,
attr Menue_OG fp_LCARS_GARTEN 290,10,0,
attr Menue_OG fp_LCARS_OG 290,10,0,
attr Menue_OG fp_LCARS_STATUS 290,10,0,

define Menue_Garten weblink htmlCode {'<a class="svg" href="/fhem/floorplan/LCARS_GARTEN"><object data="/fhem/icons/lcars/menue_Garten.svg" type="image/svg+xml"></object></a>' }
attr Menue_Garten fp_LCARS_EG 355,10,0,
attr Menue_Garten fp_LCARS_GARTEN 355,10,0,
attr Menue_Garten fp_LCARS_OG 355,10,0,
attr Menue_Garten fp_LCARS_STATUS 355,10,0,
</pre>

Der erforderliche Eintrag in der CSS-Datei

<pre>
/*LCARS: SVG definieren, um auf das gesamte Bild klicken zu können*/
a.svg {
position: relative;
display: inline-block;
}
a.svg:after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left:0;
}
</pre>
Nach einem SET WEB rereadicons ist die Navigation zwischen den einzelnen Floorplänen möglich.

== Schalter für die Beleuchtung ==
Für die Integration der Buttons der Schalter sind folgende Anpassungen erforderlich:

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>
/*LCARS-Schriftart clientunabhängig verfügbar machen
Wird in SVG-Texten nochmal separat definiert, sobald die SVG im Tag
z.b. IMG oder OBJECT verwendet wird.
*/
@font-face {
font-family: 'lcars';
src: url('/fhem/images/default/lcarsgtj3-webfont.eot');
src: url('/fhem/images/default/lcarsgtj3-webfont.eot?#iefix') format('embedded-opentype'),
url('/fhem/images/default/lcarsgtj3-webfont.woff') format('woff'),
url('/fhem/images/default/lcarsgtj3-webfont.ttf') format('truetype'),
url('/fhem/images/default/lcarsgtj3-webfont.svg#lcarsgtj3lcarsgtj3') format('svg');
font-weight: normal;
font-style: normal;
}
/*LCARS: Höhe und Breite der Schalter definieren
der Name svg.xxx ergibt sich, durch die Definition "devStateIcon off:switch_off on:switch_on:off"
in der fhem.cfg zum jeweiligen Device
*/
svg.switch_off { height:55px; width:130px; fill:#ffffff; vertical-align:middle; margin:0 0; }
svg.switch_on { 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; }
</pre>

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

<pre>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>


<svg classname="switch"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
width="130"
height="55"
viewBox="0 0 130 55"
id="svg2">
<defs
id="defs4" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
id="layer1"
>
<path
style="fill:#00ff00;fill-opacity:1"
id="path3360"
d="m 102,0 a 27.4,27.5 0 0 1 27.6,27.6 27.6,27.6 0 0 1 -27.5,27.5 l 0,-27.5 z" />
<rect
style="fill:#00ff00;fill-opacity:1"
id="rect3362"
width="37.5"
x="65"
y="0"
height="55" />
<text
x="60"
y="50"
text-anchor="end"
font-size="45"
font-family="lcars"
fill="#ff9900"
id="text11">Aus</text>
</g>
</svg>
</pre>

Die Datei fhem/www/images/default/lcars/switch_on.svg:
<pre>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>


<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
id="svg2"
viewBox="0 0 130 55"
height="55"
width="130">
<metadata
id="metadata12">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs4" />
<g
id="layer1">
<path
d="m 102,0 a 27.4,27.5 0 0 1 27.6,27.6 27.6,27.6 0 0 1 -27.5,27.5 l 0,-27.5 z"
id="path3360"
style="fill:#ff001a;fill-opacity:1" />
<rect
height="55"
y="0"
x="65"
width="37.599998"
id="rect3362"
style="fill:#ff001a;fill-opacity:1" />
<text
id="text11"
fill="#ff9900"
font-family="lcars"
font-size="45"
text-anchor="end"
y="50"
x="60">An</text>
</g>
</svg>
</pre>

Zuweisen der SVG-Dateien in der fhem.cfg

<pre>
#Icon-Pfad setzen
define WEB FHEMWEB 8083 global
[...]
attr WEB iconPath default:default/lcars

Schalter Lamp1
define HMW_LC_Sw2_DR_LEQ0116953_03 HM485 0000B84F_03
attr HMW_LC_Sw2_DR_LEQ0116953_03 alias kue_lampe_1
attr HMW_LC_Sw2_DR_LEQ0116953_03 devStateIcon off:switch_off on:switch_on:off
attr HMW_LC_Sw2_DR_LEQ0116953_03 firmwareVersion 3.06
attr HMW_LC_Sw2_DR_LEQ0116953_03 fp_LCARS_EG 230,1500,0,
attr HMW_LC_Sw2_DR_LEQ0116953_03 model HMW_LC_Sw2_DR
attr HMW_LC_Sw2_DR_LEQ0116953_03 room hidden
attr HMW_LC_Sw2_DR_LEQ0116953_03 serialNr LEQ0116953
attr HMW_LC_Sw2_DR_LEQ0116953_03 subType switch
#Schlater Lamp2
define HMW_LC_Sw2_DR_LEQ0116953_04 HM485 0000B84F_04
attr HMW_LC_Sw2_DR_LEQ0116953_04 alias kue_lampe_2
attr HMW_LC_Sw2_DR_LEQ0116953_04 devStateIcon off:switch_off:on on:switch_on:off
attr HMW_LC_Sw2_DR_LEQ0116953_04 firmwareVersion 3.06
attr HMW_LC_Sw2_DR_LEQ0116953_04 fp_LCARS_EG 295,1500,0,
attr HMW_LC_Sw2_DR_LEQ0116953_04 model HMW_LC_Sw2_DR
attr HMW_LC_Sw2_DR_LEQ0116953_04 room hidden
attr HMW_LC_Sw2_DR_LEQ0116953_04 serialNr LEQ0116953
attr HMW_LC_Sw2_DR_LEQ0116953_04 subType switch
</pre>

Nach einem SET WEB rereadicons lassen sich die Schalter bedienen.

== Label und Rahmen ==
Damit man nun weiß, was man schaltet und auch der Style stimmt, können noch folgenden Anpassungen vorgenommen werden

Datei: fhem/www/images/default/lcars/corner1_BL.svg
<pre>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>


<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="60"
height="30"
viewBox="0 0 60.000001 30"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
shape-rendering="crispEdges"
sodipodi:docname="corner1_BL.svg">
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="8.9190361"
inkscape:cx="25.358648"
inkscape:cy="22.580645"
inkscape:document-units="px"
inkscape:current-layer="svg2"
showgrid="false"
units="px"
inkscape:window-width="1827"
inkscape:window-height="1051"
inkscape:window-x="84"
inkscape:window-y="-9"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1"
transform="matrix(1,0,0,-1,0,1052.3621)">
<rect
style="fill:#cd6566;fill-opacity:1"
id="rect4138"
width="30"
height="30"
x="30"
y="1022.3621" />
<rect
style="fill:#000000;fill-opacity:1"
id="rect4136"
width="10"
height="25"
x="50"
y="1027.3621" />
<path
style="fill:#cd6566;fill-opacity:1"
id="path4142"
sodipodi:type="arc"
sodipodi:cx="-1052.3621"
sodipodi:cy="-31"
sodipodi:rx="30"
sodipodi:ry="31"
sodipodi:start="0"
sodipodi:end="1.5707963"
d="m -1022.3621,-31 a 30,31 0 0 1 -30,31 l 0,-31 z"
transform="matrix(0,-1,-1,0,0,0)" />
<path
style="fill:#000000;fill-opacity:1"
id="path4142-4"
sodipodi:type="arc"
sodipodi:cx="-1037.3621"
sodipodi:cy="-50"
sodipodi:rx="10"
sodipodi:ry="10"
sodipodi:start="0"
sodipodi:end="1.5707963"
d="m -1027.3621,-50 a 10,10 0 0 1 -10,10 l 0,-10 z"
transform="matrix(0,-1,-1,0,0,0)" />
<rect
style="fill:#000000;fill-opacity:1"
id="rect4136-7"
width="10"
height="15.357702"
x="40"
y="1037.0044" />
</g>
</svg>
</pre>

Datei: fhem/www/images/default/lcars/corner1_BR.svg
<pre>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>


<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="60"
height="30"
viewBox="0 0 60.000001 30"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
shape-rendering="crispEdges"
sodipodi:docname="corner1_BR.svg">
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="8.9190361"
inkscape:cx="25.358648"
inkscape:cy="22.580645"
inkscape:document-units="px"
inkscape:current-layer="svg2"
showgrid="false"
units="px"
inkscape:window-width="1827"
inkscape:window-height="1051"
inkscape:window-x="84"
inkscape:window-y="-9"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1"
transform="matrix(-1,0,0,-1,59.999991,1052.3621)">
<rect
style="fill:#cd6566;fill-opacity:1"
id="rect4138"
width="30"
height="30"
x="30"
y="1022.3621" />
<rect
style="fill:#000000;fill-opacity:1"
id="rect4136"
width="10"
height="25"
x="50"
y="1027.3621" />
<path
style="fill:#cd6566;fill-opacity:1"
id="path4142"
sodipodi:type="arc"
sodipodi:cx="-1052.3621"
sodipodi:cy="-31"
sodipodi:rx="30"
sodipodi:ry="31"
sodipodi:start="0"
sodipodi:end="1.5707963"
d="m -1022.3621,-31 a 30,31 0 0 1 -30,31 l 0,-31 z"
transform="matrix(0,-1,-1,0,0,0)" />
<path
style="fill:#000000;fill-opacity:1"
id="path4142-4"
sodipodi:type="arc"
sodipodi:cx="-1037.3621"
sodipodi:cy="-50"
sodipodi:rx="10"
sodipodi:ry="10"
sodipodi:start="0"
sodipodi:end="1.5707963"
d="m -1027.3621,-50 a 10,10 0 0 1 -10,10 l 0,-10 z"
transform="matrix(0,-1,-1,0,0,0)" />
<rect
style="fill:#000000;fill-opacity:1"
id="rect4136-7"
width="10"
height="15.357702"
x="40"
y="1037.0044" />
</g>
</svg>
</pre>

Datei: fhem/www/images/default/lcars/corner1_TL.svg
<pre>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>


<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="60"
height="30"
viewBox="0 0 60.000001 30"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
shape-rendering="crispEdges"
sodipodi:docname="corner1_TL.svg">
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="8.9190361"
inkscape:cx="36.290323"
inkscape:cy="22.580645"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
inkscape:window-width="1827"
inkscape:window-height="1051"
inkscape:window-x="84"
inkscape:window-y="-9"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-1022.3621)">
<rect
style="fill:#cd6566;fill-opacity:1"
id="rect4138"
width="30"
height="30"
x="30"
y="1022.3621" />
<rect
style="fill:#000000;fill-opacity:1"
id="rect4136"
width="10"
height="25"
x="50"
y="1027.3621" />
<path
style="fill:#cd6566;fill-opacity:1"
id="path4142"
sodipodi:type="arc"
sodipodi:cx="-1052.3621"
sodipodi:cy="-31"
sodipodi:rx="30"
sodipodi:ry="31"
sodipodi:start="0"
sodipodi:end="1.5707963"
d="m -1022.3621,-31 a 30,31 0 0 1 -30,31 l 0,-31 z"
transform="matrix(0,-1,-1,0,0,0)" />
<path
style="fill:#000000;fill-opacity:1"
id="path4142-4"
sodipodi:type="arc"
sodipodi:cx="-1037.3621"
sodipodi:cy="-50"
sodipodi:rx="10"
sodipodi:ry="10"
sodipodi:start="0"
sodipodi:end="1.5707963"
d="m -1027.3621,-50 a 10,10 0 0 1 -10,10 l 0,-10 z"
transform="matrix(0,-1,-1,0,0,0)" />
<rect
style="fill:#000000;fill-opacity:1"
id="rect4136-7"
width="10"
height="15.357702"
x="40"
y="1037.0044" />
</g>
</svg>
</pre>

Datei: fhem/www/images/default/lcars/corner1_TR.svg
<pre>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>


<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="60"
height="30"
viewBox="0 0 60.000001 30"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
shape-rendering="crispEdges"
sodipodi:docname="corner1_TR.svg">
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="8.9190361"
inkscape:cx="25.358648"
inkscape:cy="22.580645"
inkscape:document-units="px"
inkscape:current-layer="svg2"
showgrid="false"
units="px"
inkscape:window-width="1827"
inkscape:window-height="1051"
inkscape:window-x="84"
inkscape:window-y="-9"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1"
transform="matrix(-1,0,0,1,59.999991,-1022.3621)">
<rect
style="fill:#cd6566;fill-opacity:1"
id="rect4138"
width="30"
height="30"
x="30"
y="1022.3621" />
<rect
style="fill:#000000;fill-opacity:1"
id="rect4136"
width="10"
height="25"
x="50"
y="1027.3621" />
<path
style="fill:#cd6566;fill-opacity:1"
id="path4142"
sodipodi:type="arc"
sodipodi:cx="-1052.3621"
sodipodi:cy="-31"
sodipodi:rx="30"
sodipodi:ry="31"
sodipodi:start="0"
sodipodi:end="1.5707963"
d="m -1022.3621,-31 a 30,31 0 0 1 -30,31 l 0,-31 z"
transform="matrix(0,-1,-1,0,0,0)" />
<path
style="fill:#000000;fill-opacity:1"
id="path4142-4"
sodipodi:type="arc"
sodipodi:cx="-1037.3621"
sodipodi:cy="-50"
sodipodi:rx="10"
sodipodi:ry="10"
sodipodi:start="0"
sodipodi:end="1.5707963"
d="m -1027.3621,-50 a 10,10 0 0 1 -10,10 l 0,-10 z"
transform="matrix(0,-1,-1,0,0,0)" />
<rect
style="fill:#000000;fill-opacity:1"
id="rect4136-7"
width="10"
height="15.357702"
x="40"
y="1037.0044" />
</g>
</svg>
</pre>

Datei: fhem/www/images/default/lcars/lbl_switch_kueche1.svg
<pre>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>


<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="260"
height="55"
viewBox="0 0 260 55.000001"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="lbl_switch_kueche1.svg">
<style
type="text/css"
id="style3">
@font-face {
font-family: 'lcars';
src: url('/fhem/images/default/lcars/lcarsgtj3-webfont.eot');
src: url('/fhem/images/default/lcars/lcarsgtj3-webfont.eot?#iefix') format('embedded-opentype'),
url('/fhem/images/default/lcars/lcarsgtj3-webfont.woff') format('woff'),
url('/fhem/images/default/lcars/lcarsgtj3-webfont.ttf') format('truetype'),
url('/fhem/images/default/lcars/lcarsgtj3-webfont.svg#lcarsgtj3lcarsgtj3') format('svg');
font-weight: normal;
font-style: normal;}
</style>
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="3.9185501"
inkscape:cx="133.4632"
inkscape:cy="52.4847"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
inkscape:window-width="1827"
inkscape:window-height="1051"
inkscape:window-x="84"
inkscape:window-y="-9"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1">
<rect
style="fill:#ffcc9a;fill-opacity:1"
id="rect3364"
width="260"
height="55"
x="0"
y="0" />
<text
x="255.354"
y="49.50441"
font-size="35"
id="text11"
style="font-size:35px;font-family:lcars;text-anchor:end;fill:#000000">Küche - Glasbodenleuchte</text>
</g>
</svg>
</pre>
Datei: fhem/www/images/default/lcars/lbl_switch_kueche2.svg
<pre>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>


<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="260"
height="55"
viewBox="0 0 260 55.000001"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="lbl_switch_kueche1.svg">
<style
type="text/css"
id="style3">
@font-face {
font-family: 'lcars';
src: url('/fhem/images/default/lcars/lcarsgtj3-webfont.eot');
src: url('/fhem/images/default/lcars/lcarsgtj3-webfont.eot?#iefix') format('embedded-opentype'),
url('/fhem/images/default/lcars/lcarsgtj3-webfont.woff') format('woff'),
url('/fhem/images/default/lcars/lcarsgtj3-webfont.ttf') format('truetype'),
url('/fhem/images/default/lcars/lcarsgtj3-webfont.svg#lcarsgtj3lcarsgtj3') format('svg');
font-weight: normal;
font-style: normal;}
</style>
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="3.9185501"
inkscape:cx="133.4632"
inkscape:cy="52.4847"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
inkscape:window-width="1827"
inkscape:window-height="1051"
inkscape:window-x="84"
inkscape:window-y="-9"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1">
<rect
style="fill:#ffcc9a;fill-opacity:1"
id="rect3364"
width="260"
height="55"
x="0"
y="0" />
<text
x="255.354"
y="49.50441"
font-size="35"
id="text11"
style="font-size:35px;font-family:lcars;text-anchor:end;fill:#000000">Küche - Deckenleuchte</text>
</g>
</svg>
</pre>
Datei: fhem/www/images/default/lcars/headline_switches.svg
<pre>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>


<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="205"
height="35"
viewBox="0 0 205 35"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="headline_switches.svg">
<style
type="text/css"
id="style3">
@font-face {
font-family: 'lcars';
src: url('/fhem/images/default/lcars/lcarsgtj3-webfont.eot');
src: url('/fhem/images/default/lcars/lcarsgtj3-webfont.eot?#iefix') format('embedded-opentype'),
url('/fhem/images/default/lcars/lcarsgtj3-webfont.woff') format('woff'),
url('/fhem/images/default/lcars/lcarsgtj3-webfont.ttf') format('truetype'),
url('/fhem/images/default/lcars/lcarsgtj3-webfont.svg#lcarsgtj3lcarsgtj3') format('svg');
font-weight: normal;
font-style: normal;}
</style>
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="3.9185501"
inkscape:cx="62.84951"
inkscape:cy="52.357102"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
inkscape:window-width="1827"
inkscape:window-height="1051"
inkscape:window-x="84"
inkscape:window-y="-9"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,0)">
<text
x="205"
y="35"
font-size="35"
id="text11"
style="font-size:35px;font-family:lcars;text-anchor:end;fill:#ff9900">Beleuchtung</text>
</g>
</svg>
</pre>
Datei: fhem/www/images/default/lcars/line1.svg
<pre>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>


<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="40"
height="350"
viewBox="0 0 40 350"
id="svg4138"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="line1.svg"
style="shape-rendering:crispEdges">
<defs
id="defs4140" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="2.5797414"
inkscape:cx="40"
inkscape:cy="257.91145"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
inkscape:window-width="1827"
inkscape:window-height="1051"
inkscape:window-x="84"
inkscape:window-y="-9"
inkscape:window-maximized="1" />
<metadata
id="metadata4143">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-702.36216)">
<rect
style="fill:#cf98cf;fill-opacity:1"
id="rect4686"
width="40"
height="350"
x="0"
y="702.36224" />
</g>
</svg>
</pre>
Datei: fhem/www/images/default/lcars/line2.svg
<pre>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>


<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="500"
height="5"
viewBox="0 0 500 5"
id="svg4138"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="line2.svg"
style="shape-rendering:crispEdges">
<defs
id="defs4140" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="2.6533333"
inkscape:cx="155.43478"
inkscape:cy="33.152174"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
inkscape:window-width="1827"
inkscape:window-height="1051"
inkscape:window-x="84"
inkscape:window-y="-9"
inkscape:window-maximized="1" />
<metadata
id="metadata4143">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-1047.3622)">
<rect
style="fill:#cd6566;fill-opacity:1"
id="rect4686"
width="500"
height="5"
x="0"
y="1047.3622" />
</g>
</svg>
</pre>

Die Einträge in der fhem.cfg
<pre>
#---Rahmen Elemente
define corner1_tl weblink htmlCode {'<object data="/fhem/icons/lcars/corner1_TL.svg" type="image/svg+xml"></object>' }
attr corner1_tl fp_LCARS_EG 200,1200,0,
define corner1_bl weblink htmlCode {'<object data="/fhem/icons/lcars/corner1_BL.svg" type="image/svg+xml"></object>' }
attr corner1_bl fp_LCARS_EG 590,1200,0,
define corner1_tr weblink htmlCode {'<object data="/fhem/icons/lcars/corner1_TR.svg" type="image/svg+xml"></object>' }
attr corner1_tr fp_LCARS_EG 200,1700,0,
define corner1_br weblink htmlCode {'<object data="/fhem/icons/lcars/corner1_BR.svg" type="image/svg+xml"></object>' }
attr corner1_br fp_LCARS_EG 590,1700,0,
define line1_l weblink htmlCode {'<object data="/fhem/icons/lcars/line1.svg" type="image/svg+xml"></object>' }
attr line1_l fp_LCARS_EG 235,1200,0,
define line2_b weblink htmlCode {'<object data="/fhem/icons/lcars/line2.svg" type="image/svg+xml"></object>' }
attr line2_b fp_LCARS_EG 601,1230,0,
define headline_switches weblink htmlCode {'<object data="/fhem/icons/lcars/headline_switches.svg" type="image/svg+xml"></object>' }
attr headline_switches fp_LCARS_EG 183,1481,0,

#Label
define lbl_switch_kueche1 weblink htmlCode {'<object data="/fhem/icons/lcars/lbl_switch_kueche1.svg" type="image/svg+xml"></object>' }
attr lbl_switch_kueche1 fp_LCARS_EG 230,1250,0,
define lbl_switch_kueche2 weblink htmlCode {'<object data="/fhem/icons/lcars/lbl_switch_kueche2.svg" type="image/svg+xml"></object>' }
attr lbl_switch_kueche2 fp_LCARS_EG 295,1250,0,
</pre>

Nach einem SET WEB rereadicons sind nun Labels und Rahmen sichtbar.

Die Grundlagen sind da, die Floorpläne können nun an eigenen Bedürfnisse angepasst werden.
[[Kategorie:HOWTOS]]

Floorplan im LCARS Design

2016-02-19T08:49:40Z

Msfox:

In diesem Wiki geht es um die Erstellung eines [[FLOORPLAN|Floorplans]] im '''LCARS Design''', siehe [https://www.google.de/search?q=LCARS&client=opera&hs=3Zm&tbm=isch&tbo=u&source=univ&sa=X&ei=W2czVcmtKIOksAGp0oCICA&ved=0CCEQsAQ&biw=1920&bih=971/ LCARS Beispiele].

Es gibt auf Fhem.de einen [http://fhem.de/forum_22336.jpg Screenshot] eines Floorplans im LCARS Design.

In {{Link2Forum|Topic=22336|Message=180850|LinkText=diesem Forenbeitrag}} tauchte obiges Design erstmals auf, entwickelt wurde es von Forenbenutzer {{Link2FU|4194|Tion}}.

== Screenshot 1 ==
[[Datei:lcars_all.jpg|300px|thumb|left|Übersicht]]
(Die Slider sind nocht nicht beschrieben; Sie folgen...)

== 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:
<pre>
#Floorpläne
define LCARS_STATUS FLOORPLAN
attr LCARS_STATUS fp_noMenu 1
attr LCARS_STATUS stylesheet floorplanstyle_lcars.css

define LCARS_EG FLOORPLAN
attr LCARS_EG fp_noMenu 1
attr LCARS_EG stylesheet floorplanstyle_lcars.css

define LCARS_OG FLOORPLAN
attr LCARS_OG fp_noMenu 1
attr LCARS_OG stylesheet floorplanstyle_lcars.css

define LCARS_GARTEN FLOORPLAN
attr LCARS_GARTEN fp_noMenu 1
attr LCARS_GARTEN stylesheet floorplanstyle_lcars.css
</pre>

== Einbinden des Hintergrundbildes ==
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:
<pre>
body { background-color:#ffffff;
background-image: url(/fhem/icons/lcars/background.svg);
background-size: 1920px 1080px;
overflow:hidden;
background-position: 0px 0px}
</pre>

Das Hintergrundbild als SVG-Datei:
[[Datei:Background.svg|300px|thumb|left|Hintergrund]]

Nun noch ein SET WEB rereadicons durchführen und der Floorplan zeigt den Hintergrund im LCARS-Design angezeigt.
== 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:

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
== Das Navigationsmenü ==
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_Garten.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.

<pre>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>


<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="130"
height="55"
viewBox="0 0 130 55.000001"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="switch_off.svg">
<style
type="text/css"
id="style3">
@font-face {
font-family: 'lcars';
src: url('/fhem/images/default/lcars/lcarsgtj3-webfont.eot');
src: url('/fhem/images/default/lcars/lcarsgtj3-webfont.eot?#iefix') format('embedded-opentype'),
url('/fhem/images/default/lcars/lcarsgtj3-webfont.woff') format('woff'),
url('/fhem/images/default/lcars/lcarsgtj3-webfont.ttf') format('truetype'),
url('/fhem/images/default/lcars/lcarsgtj3-webfont.svg#lcarsgtj3lcarsgtj3') format('svg');
font-weight: normal;
font-style: normal;}
</style>
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="3.9185501"
inkscape:cx="8.571662"
inkscape:cy="52.612298"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
inkscape:window-width="1827"
inkscape:window-height="1051"
inkscape:window-x="84"
inkscape:window-y="-9"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,0)">
<rect
style="fill:#ff9900;fill-opacity:1"
id="rect3364"
width="130"
height="55"
x="0"
y="0" />
<text
x="125"
y="50"
text-anchor="end"
font-size="35"
font-family="lcars"
fill="#000000"
id="text11">Status</text>
</g>
</svg>
</pre>

Die Einbindung in der fhem.cfg:

<pre>
#Menü definieren
#Class für den Link auf SVG setzen, um auf gesamtes SVG-Bild klicken zu können
#SVG-Class dafür in der CSS-Datei definieren
define Menue_Status weblink htmlCode {'<a class="svg" href="/fhem/floorplan/LCARS_STATUS"><object data="/fhem/icons/lcars/menue_status.svg" type="image/svg+xml"></object></a>'}
attr Menue_Status fp_LCARS_EG 160,10,0,
attr Menue_Status fp_LCARS_GARTEN 160,10,0,
attr Menue_Status fp_LCARS_OG 160,10,0,
attr Menue_Status fp_LCARS_STATUS 160,10,0,

define Menue_EG weblink htmlCode {'<a class="svg" href="/fhem/floorplan/LCARS_EG"><object data="/fhem/icons/lcars/menue_EG.svg" type="image/svg+xml"></object></a>' }
attr Menue_EG fp_LCARS_EG 225,10,0,
attr Menue_EG fp_LCARS_GARTEN 225,10,0,
attr Menue_EG fp_LCARS_OG 225,10,0,
attr Menue_EG fp_LCARS_STATUS 225,10,0,

define Menue_OG weblink htmlCode {'<a class="svg" href="/fhem/floorplan/LCARS_OG"><object data="/fhem/icons/lcars/menue_OG.svg" type="image/svg+xml"></object></a>' }
attr Menue_OG fp_LCARS_EG 290,10,0,
attr Menue_OG fp_LCARS_GARTEN 290,10,0,
attr Menue_OG fp_LCARS_OG 290,10,0,
attr Menue_OG fp_LCARS_STATUS 290,10,0,

define Menue_Garten weblink htmlCode {'<a class="svg" href="/fhem/floorplan/LCARS_GARTEN"><object data="/fhem/icons/lcars/menue_Garten.svg" type="image/svg+xml"></object></a>' }
attr Menue_Garten fp_LCARS_EG 355,10,0,
attr Menue_Garten fp_LCARS_GARTEN 355,10,0,
attr Menue_Garten fp_LCARS_OG 355,10,0,
attr Menue_Garten fp_LCARS_STATUS 355,10,0,
</pre>

Der erforderliche Eintrag in der CSS-Datei

<pre>
/*LCARS: SVG definieren, um auf das gesamte Bild klicken zu können*/
a.svg {
position: relative;
display: inline-block;
}
a.svg:after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left:0;
}
</pre>
Nach einem SET WEB rereadicons ist die Navigation zwischen den einzelnen Floorplänen möglich.

== Schalter für die Beleuchtung ==
Für die Integration der Buttons der Schalter sind folgende Anpassungen erforderlich:

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>
/*LCARS-Schriftart clientunabhängig verfügbar machen
Wird in SVG-Texten nochmal separat definiert, sobald die SVG im Tag
z.b. IMG oder OBJECT verwendet wird.
*/
@font-face {
font-family: 'lcars';
src: url('/fhem/images/default/lcarsgtj3-webfont.eot');
src: url('/fhem/images/default/lcarsgtj3-webfont.eot?#iefix') format('embedded-opentype'),
url('/fhem/images/default/lcarsgtj3-webfont.woff') format('woff'),
url('/fhem/images/default/lcarsgtj3-webfont.ttf') format('truetype'),
url('/fhem/images/default/lcarsgtj3-webfont.svg#lcarsgtj3lcarsgtj3') format('svg');
font-weight: normal;
font-style: normal;
}
/*LCARS: Höhe und Breite der Schalter definieren
der Name svg.xxx ergibt sich, durch die Definition "devStateIcon off:switch_off on:switch_on:off"
in der fhem.cfg zum jeweiligen Device
*/
svg.switch_off { height:55px; width:130px; fill:#ffffff; vertical-align:middle; margin:0 0; }
svg.switch_on { 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; }
</pre>

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

<pre>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>


<svg classname="switch"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
width="130"
height="55"
viewBox="0 0 130 55"
id="svg2">
<defs
id="defs4" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
id="layer1"
>
<path
style="fill:#00ff00;fill-opacity:1"
id="path3360"
d="m 102,0 a 27.4,27.5 0 0 1 27.6,27.6 27.6,27.6 0 0 1 -27.5,27.5 l 0,-27.5 z" />
<rect
style="fill:#00ff00;fill-opacity:1"
id="rect3362"
width="37.5"
x="65"
y="0"
height="55" />
<text
x="60"
y="50"
text-anchor="end"
font-size="45"
font-family="lcars"
fill="#ff9900"
id="text11">Aus</text>
</g>
</svg>
</pre>

Die Datei fhem/www/images/default/lcars/switch_on.svg:
<pre>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>


<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
id="svg2"
viewBox="0 0 130 55"
height="55"
width="130">
<metadata
id="metadata12">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs4" />
<g
id="layer1">
<path
d="m 102,0 a 27.4,27.5 0 0 1 27.6,27.6 27.6,27.6 0 0 1 -27.5,27.5 l 0,-27.5 z"
id="path3360"
style="fill:#ff001a;fill-opacity:1" />
<rect
height="55"
y="0"
x="65"
width="37.599998"
id="rect3362"
style="fill:#ff001a;fill-opacity:1" />
<text
id="text11"
fill="#ff9900"
font-family="lcars"
font-size="45"
text-anchor="end"
y="50"
x="60">An</text>
</g>
</svg>
</pre>

Zuweisen der SVG-Dateien in der fhem.cfg

<pre>
#Icon-Pfad setzen
define WEB FHEMWEB 8083 global
[...]
attr WEB iconPath default:default/lcars

Schalter Lamp1
define HMW_LC_Sw2_DR_LEQ0116953_03 HM485 0000B84F_03
attr HMW_LC_Sw2_DR_LEQ0116953_03 alias kue_lampe_1
attr HMW_LC_Sw2_DR_LEQ0116953_03 devStateIcon off:switch_off on:switch_on:off
attr HMW_LC_Sw2_DR_LEQ0116953_03 firmwareVersion 3.06
attr HMW_LC_Sw2_DR_LEQ0116953_03 fp_LCARS_EG 230,1500,0,
attr HMW_LC_Sw2_DR_LEQ0116953_03 model HMW_LC_Sw2_DR
attr HMW_LC_Sw2_DR_LEQ0116953_03 room hidden
attr HMW_LC_Sw2_DR_LEQ0116953_03 serialNr LEQ0116953
attr HMW_LC_Sw2_DR_LEQ0116953_03 subType switch
#Schlater Lamp2
define HMW_LC_Sw2_DR_LEQ0116953_04 HM485 0000B84F_04
attr HMW_LC_Sw2_DR_LEQ0116953_04 alias kue_lampe_2
attr HMW_LC_Sw2_DR_LEQ0116953_04 devStateIcon off:switch_off:on on:switch_on:off
attr HMW_LC_Sw2_DR_LEQ0116953_04 firmwareVersion 3.06
attr HMW_LC_Sw2_DR_LEQ0116953_04 fp_LCARS_EG 295,1500,0,
attr HMW_LC_Sw2_DR_LEQ0116953_04 model HMW_LC_Sw2_DR
attr HMW_LC_Sw2_DR_LEQ0116953_04 room hidden
attr HMW_LC_Sw2_DR_LEQ0116953_04 serialNr LEQ0116953
attr HMW_LC_Sw2_DR_LEQ0116953_04 subType switch
</pre>

Nach einem SET WEB rereadicons lassen sich die Schalter bedienen.

== Label und Rahmen ==
Damit man nun weiß, was man schaltet und auch der Style stimmt, können noch folgenden Anpassungen vorgenommen werden

Datei: fhem/www/images/default/lcars/corner1_BL.svg
<pre>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>


<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="60"
height="30"
viewBox="0 0 60.000001 30"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
shape-rendering="crispEdges"
sodipodi:docname="corner1_BL.svg">
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="8.9190361"
inkscape:cx="25.358648"
inkscape:cy="22.580645"
inkscape:document-units="px"
inkscape:current-layer="svg2"
showgrid="false"
units="px"
inkscape:window-width="1827"
inkscape:window-height="1051"
inkscape:window-x="84"
inkscape:window-y="-9"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1"
transform="matrix(1,0,0,-1,0,1052.3621)">
<rect
style="fill:#cd6566;fill-opacity:1"
id="rect4138"
width="30"
height="30"
x="30"
y="1022.3621" />
<rect
style="fill:#000000;fill-opacity:1"
id="rect4136"
width="10"
height="25"
x="50"
y="1027.3621" />
<path
style="fill:#cd6566;fill-opacity:1"
id="path4142"
sodipodi:type="arc"
sodipodi:cx="-1052.3621"
sodipodi:cy="-31"
sodipodi:rx="30"
sodipodi:ry="31"
sodipodi:start="0"
sodipodi:end="1.5707963"
d="m -1022.3621,-31 a 30,31 0 0 1 -30,31 l 0,-31 z"
transform="matrix(0,-1,-1,0,0,0)" />
<path
style="fill:#000000;fill-opacity:1"
id="path4142-4"
sodipodi:type="arc"
sodipodi:cx="-1037.3621"
sodipodi:cy="-50"
sodipodi:rx="10"
sodipodi:ry="10"
sodipodi:start="0"
sodipodi:end="1.5707963"
d="m -1027.3621,-50 a 10,10 0 0 1 -10,10 l 0,-10 z"
transform="matrix(0,-1,-1,0,0,0)" />
<rect
style="fill:#000000;fill-opacity:1"
id="rect4136-7"
width="10"
height="15.357702"
x="40"
y="1037.0044" />
</g>
</svg>
</pre>

Datei: fhem/www/images/default/lcars/corner1_BR.svg
<pre>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>


<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="60"
height="30"
viewBox="0 0 60.000001 30"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
shape-rendering="crispEdges"
sodipodi:docname="corner1_BR.svg">
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="8.9190361"
inkscape:cx="25.358648"
inkscape:cy="22.580645"
inkscape:document-units="px"
inkscape:current-layer="svg2"
showgrid="false"
units="px"
inkscape:window-width="1827"
inkscape:window-height="1051"
inkscape:window-x="84"
inkscape:window-y="-9"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1"
transform="matrix(-1,0,0,-1,59.999991,1052.3621)">
<rect
style="fill:#cd6566;fill-opacity:1"
id="rect4138"
width="30"
height="30"
x="30"
y="1022.3621" />
<rect
style="fill:#000000;fill-opacity:1"
id="rect4136"
width="10"
height="25"
x="50"
y="1027.3621" />
<path
style="fill:#cd6566;fill-opacity:1"
id="path4142"
sodipodi:type="arc"
sodipodi:cx="-1052.3621"
sodipodi:cy="-31"
sodipodi:rx="30"
sodipodi:ry="31"
sodipodi:start="0"
sodipodi:end="1.5707963"
d="m -1022.3621,-31 a 30,31 0 0 1 -30,31 l 0,-31 z"
transform="matrix(0,-1,-1,0,0,0)" />
<path
style="fill:#000000;fill-opacity:1"
id="path4142-4"
sodipodi:type="arc"
sodipodi:cx="-1037.3621"
sodipodi:cy="-50"
sodipodi:rx="10"
sodipodi:ry="10"
sodipodi:start="0"
sodipodi:end="1.5707963"
d="m -1027.3621,-50 a 10,10 0 0 1 -10,10 l 0,-10 z"
transform="matrix(0,-1,-1,0,0,0)" />
<rect
style="fill:#000000;fill-opacity:1"
id="rect4136-7"
width="10"
height="15.357702"
x="40"
y="1037.0044" />
</g>
</svg>
</pre>

Datei: fhem/www/images/default/lcars/corner1_TL.svg
<pre>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>


<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="60"
height="30"
viewBox="0 0 60.000001 30"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
shape-rendering="crispEdges"
sodipodi:docname="corner1_TL.svg">
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="8.9190361"
inkscape:cx="36.290323"
inkscape:cy="22.580645"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
inkscape:window-width="1827"
inkscape:window-height="1051"
inkscape:window-x="84"
inkscape:window-y="-9"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-1022.3621)">
<rect
style="fill:#cd6566;fill-opacity:1"
id="rect4138"
width="30"
height="30"
x="30"
y="1022.3621" />
<rect
style="fill:#000000;fill-opacity:1"
id="rect4136"
width="10"
height="25"
x="50"
y="1027.3621" />
<path
style="fill:#cd6566;fill-opacity:1"
id="path4142"
sodipodi:type="arc"
sodipodi:cx="-1052.3621"
sodipodi:cy="-31"
sodipodi:rx="30"
sodipodi:ry="31"
sodipodi:start="0"
sodipodi:end="1.5707963"
d="m -1022.3621,-31 a 30,31 0 0 1 -30,31 l 0,-31 z"
transform="matrix(0,-1,-1,0,0,0)" />
<path
style="fill:#000000;fill-opacity:1"
id="path4142-4"
sodipodi:type="arc"
sodipodi:cx="-1037.3621"
sodipodi:cy="-50"
sodipodi:rx="10"
sodipodi:ry="10"
sodipodi:start="0"
sodipodi:end="1.5707963"
d="m -1027.3621,-50 a 10,10 0 0 1 -10,10 l 0,-10 z"
transform="matrix(0,-1,-1,0,0,0)" />
<rect
style="fill:#000000;fill-opacity:1"
id="rect4136-7"
width="10"
height="15.357702"
x="40"
y="1037.0044" />
</g>
</svg>
</pre>

Datei: fhem/www/images/default/lcars/corner1_TR.svg
<pre>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>


<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="60"
height="30"
viewBox="0 0 60.000001 30"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
shape-rendering="crispEdges"
sodipodi:docname="corner1_TR.svg">
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="8.9190361"
inkscape:cx="25.358648"
inkscape:cy="22.580645"
inkscape:document-units="px"
inkscape:current-layer="svg2"
showgrid="false"
units="px"
inkscape:window-width="1827"
inkscape:window-height="1051"
inkscape:window-x="84"
inkscape:window-y="-9"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1"
transform="matrix(-1,0,0,1,59.999991,-1022.3621)">
<rect
style="fill:#cd6566;fill-opacity:1"
id="rect4138"
width="30"
height="30"
x="30"
y="1022.3621" />
<rect
style="fill:#000000;fill-opacity:1"
id="rect4136"
width="10"
height="25"
x="50"
y="1027.3621" />
<path
style="fill:#cd6566;fill-opacity:1"
id="path4142"
sodipodi:type="arc"
sodipodi:cx="-1052.3621"
sodipodi:cy="-31"
sodipodi:rx="30"
sodipodi:ry="31"
sodipodi:start="0"
sodipodi:end="1.5707963"
d="m -1022.3621,-31 a 30,31 0 0 1 -30,31 l 0,-31 z"
transform="matrix(0,-1,-1,0,0,0)" />
<path
style="fill:#000000;fill-opacity:1"
id="path4142-4"
sodipodi:type="arc"
sodipodi:cx="-1037.3621"
sodipodi:cy="-50"
sodipodi:rx="10"
sodipodi:ry="10"
sodipodi:start="0"
sodipodi:end="1.5707963"
d="m -1027.3621,-50 a 10,10 0 0 1 -10,10 l 0,-10 z"
transform="matrix(0,-1,-1,0,0,0)" />
<rect
style="fill:#000000;fill-opacity:1"
id="rect4136-7"
width="10"
height="15.357702"
x="40"
y="1037.0044" />
</g>
</svg>
</pre>

Datei: fhem/www/images/default/lcars/lbl_switch_kueche1.svg
<pre>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>


<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="260"
height="55"
viewBox="0 0 260 55.000001"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="lbl_switch_kueche1.svg">
<style
type="text/css"
id="style3">
@font-face {
font-family: 'lcars';
src: url('/fhem/images/default/lcars/lcarsgtj3-webfont.eot');
src: url('/fhem/images/default/lcars/lcarsgtj3-webfont.eot?#iefix') format('embedded-opentype'),
url('/fhem/images/default/lcars/lcarsgtj3-webfont.woff') format('woff'),
url('/fhem/images/default/lcars/lcarsgtj3-webfont.ttf') format('truetype'),
url('/fhem/images/default/lcars/lcarsgtj3-webfont.svg#lcarsgtj3lcarsgtj3') format('svg');
font-weight: normal;
font-style: normal;}
</style>
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="3.9185501"
inkscape:cx="133.4632"
inkscape:cy="52.4847"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
inkscape:window-width="1827"
inkscape:window-height="1051"
inkscape:window-x="84"
inkscape:window-y="-9"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1">
<rect
style="fill:#ffcc9a;fill-opacity:1"
id="rect3364"
width="260"
height="55"
x="0"
y="0" />
<text
x="255.354"
y="49.50441"
font-size="35"
id="text11"
style="font-size:35px;font-family:lcars;text-anchor:end;fill:#000000">Küche - Glasbodenleuchte</text>
</g>
</svg>
</pre>
Datei: fhem/www/images/default/lcars/lbl_switch_kueche2.svg
<pre>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>


<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="260"
height="55"
viewBox="0 0 260 55.000001"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="lbl_switch_kueche1.svg">
<style
type="text/css"
id="style3">
@font-face {
font-family: 'lcars';
src: url('/fhem/images/default/lcars/lcarsgtj3-webfont.eot');
src: url('/fhem/images/default/lcars/lcarsgtj3-webfont.eot?#iefix') format('embedded-opentype'),
url('/fhem/images/default/lcars/lcarsgtj3-webfont.woff') format('woff'),
url('/fhem/images/default/lcars/lcarsgtj3-webfont.ttf') format('truetype'),
url('/fhem/images/default/lcars/lcarsgtj3-webfont.svg#lcarsgtj3lcarsgtj3') format('svg');
font-weight: normal;
font-style: normal;}
</style>
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="3.9185501"
inkscape:cx="133.4632"
inkscape:cy="52.4847"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
inkscape:window-width="1827"
inkscape:window-height="1051"
inkscape:window-x="84"
inkscape:window-y="-9"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1">
<rect
style="fill:#ffcc9a;fill-opacity:1"
id="rect3364"
width="260"
height="55"
x="0"
y="0" />
<text
x="255.354"
y="49.50441"
font-size="35"
id="text11"
style="font-size:35px;font-family:lcars;text-anchor:end;fill:#000000">Küche - Deckenleuchte</text>
</g>
</svg>
</pre>
Datei: fhem/www/images/default/lcars/headline_switches.svg
<pre>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>


<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="205"
height="35"
viewBox="0 0 205 35"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="headline_switches.svg">
<style
type="text/css"
id="style3">
@font-face {
font-family: 'lcars';
src: url('/fhem/images/default/lcars/lcarsgtj3-webfont.eot');
src: url('/fhem/images/default/lcars/lcarsgtj3-webfont.eot?#iefix') format('embedded-opentype'),
url('/fhem/images/default/lcars/lcarsgtj3-webfont.woff') format('woff'),
url('/fhem/images/default/lcars/lcarsgtj3-webfont.ttf') format('truetype'),
url('/fhem/images/default/lcars/lcarsgtj3-webfont.svg#lcarsgtj3lcarsgtj3') format('svg');
font-weight: normal;
font-style: normal;}
</style>
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="3.9185501"
inkscape:cx="62.84951"
inkscape:cy="52.357102"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
inkscape:window-width="1827"
inkscape:window-height="1051"
inkscape:window-x="84"
inkscape:window-y="-9"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,0)">
<text
x="205"
y="35"
font-size="35"
id="text11"
style="font-size:35px;font-family:lcars;text-anchor:end;fill:#ff9900">Beleuchtung</text>
</g>
</svg>
</pre>
Datei: fhem/www/images/default/lcars/line1.svg
<pre>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>


<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="40"
height="350"
viewBox="0 0 40 350"
id="svg4138"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="line1.svg"
style="shape-rendering:crispEdges">
<defs
id="defs4140" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="2.5797414"
inkscape:cx="40"
inkscape:cy="257.91145"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
inkscape:window-width="1827"
inkscape:window-height="1051"
inkscape:window-x="84"
inkscape:window-y="-9"
inkscape:window-maximized="1" />
<metadata
id="metadata4143">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-702.36216)">
<rect
style="fill:#cf98cf;fill-opacity:1"
id="rect4686"
width="40"
height="350"
x="0"
y="702.36224" />
</g>
</svg>
</pre>
Datei: fhem/www/images/default/lcars/line2.svg
<pre>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>


<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="500"
height="5"
viewBox="0 0 500 5"
id="svg4138"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="line2.svg"
style="shape-rendering:crispEdges">
<defs
id="defs4140" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="2.6533333"
inkscape:cx="155.43478"
inkscape:cy="33.152174"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
inkscape:window-width="1827"
inkscape:window-height="1051"
inkscape:window-x="84"
inkscape:window-y="-9"
inkscape:window-maximized="1" />
<metadata
id="metadata4143">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-1047.3622)">
<rect
style="fill:#cd6566;fill-opacity:1"
id="rect4686"
width="500"
height="5"
x="0"
y="1047.3622" />
</g>
</svg>
</pre>

Die Einträge in der fhem.cfg
<pre>
#---Rahmen Elemente
define corner1_tl weblink htmlCode {'<object data="/fhem/icons/lcars/corner1_TL.svg" type="image/svg+xml"></object>' }
attr corner1_tl fp_LCARS_EG 200,1200,0,
define corner1_bl weblink htmlCode {'<object data="/fhem/icons/lcars/corner1_BL.svg" type="image/svg+xml"></object>' }
attr corner1_bl fp_LCARS_EG 590,1200,0,
define corner1_tr weblink htmlCode {'<object data="/fhem/icons/lcars/corner1_TR.svg" type="image/svg+xml"></object>' }
attr corner1_tr fp_LCARS_EG 200,1700,0,
define corner1_br weblink htmlCode {'<object data="/fhem/icons/lcars/corner1_BR.svg" type="image/svg+xml"></object>' }
attr corner1_br fp_LCARS_EG 590,1700,0,
define line1_l weblink htmlCode {'<object data="/fhem/icons/lcars/line1.svg" type="image/svg+xml"></object>' }
attr line1_l fp_LCARS_EG 235,1200,0,
define line2_b weblink htmlCode {'<object data="/fhem/icons/lcars/line2.svg" type="image/svg+xml"></object>' }
attr line2_b fp_LCARS_EG 601,1230,0,
define headline_switches weblink htmlCode {'<object data="/fhem/icons/lcars/headline_switches.svg" type="image/svg+xml"></object>' }
attr headline_switches fp_LCARS_EG 183,1481,0,

#Label
define lbl_switch_kueche1 weblink htmlCode {'<object data="/fhem/icons/lcars/lbl_switch_kueche1.svg" type="image/svg+xml"></object>' }
attr lbl_switch_kueche1 fp_LCARS_EG 230,1250,0,
define lbl_switch_kueche2 weblink htmlCode {'<object data="/fhem/icons/lcars/lbl_switch_kueche2.svg" type="image/svg+xml"></object>' }
attr lbl_switch_kueche2 fp_LCARS_EG 295,1250,0,
</pre>

Nach einem SET WEB rereadicons sind nun Labels und Rahmen sichtbar.

Die Grundlagen sind da, die Floorpläne können nun an eigenen Bedürfnisse angepasst werden.
[[Kategorie:HOWTOS]]

Floorplan im LCARS Design

2016-02-19T08:46:49Z

Msfox:

In diesem Wiki geht es um die Erstellung eines [[FLOORPLAN|Floorplans]] im '''LCARS Design''', siehe [https://www.google.de/search?q=LCARS&client=opera&hs=3Zm&tbm=isch&tbo=u&source=univ&sa=X&ei=W2czVcmtKIOksAGp0oCICA&ved=0CCEQsAQ&biw=1920&bih=971/ LCARS Beispiele].

Es gibt auf Fhem.de einen [http://fhem.de/forum_22336.jpg Screenshot] eines Floorplans im LCARS Design.

In {{Link2Forum|Topic=22336|Message=180850|LinkText=diesem Forenbeitrag}} tauchte obiges Design erstmals auf, entwickelt wurde es von Forenbenutzer {{Link2FU|4194|Tion}}.

== Screenshot 1 ==
[[Datei:lcars_all.jpg|300px|thumb|left|Übersicht]]
(Die Slider sind nocht nicht beschrieben; Sie folgen...)

== 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:
<pre>
#Floorpläne
define LCARS_STATUS FLOORPLAN
attr LCARS_STATUS fp_noMenu 1
attr LCARS_STATUS stylesheet floorplanstyle_lcars.css

define LCARS_EG FLOORPLAN
attr LCARS_EG fp_noMenu 1
attr LCARS_EG stylesheet floorplanstyle_lcars.css

define LCARS_OG FLOORPLAN
attr LCARS_OG fp_noMenu 1
attr LCARS_OG stylesheet floorplanstyle_lcars.css

define LCARS_GARTEN FLOORPLAN
attr LCARS_GARTEN fp_noMenu 1
attr LCARS_GARTEN stylesheet floorplanstyle_lcars.css
</pre>

== Einbinden des Hintergrundbildes ==
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:
<pre>
body { background-color:#ffffff;
background-image: url(/fhem/icons/lcars/background.svg);
background-size: 1920px 1080px;
overflow:hidden;
background-position: 0px 0px}
</pre>

Das Hintergrundbild als SVG-Datei:
[[Datei:Background.svg|300px|thumb|left|Hintergrund]]
<pre>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>


<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
id="svg3336"
version="1.1"
inkscape:version="0.91 r13725"
width="100%"
height="100%"
viewBox="0 0 1920 1080"
sodipodi:docname="lcars_background.svg">
<metadata
id="metadata3342">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs3340" />
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1827"
inkscape:window-height="1051"
id="namedview3338"
showgrid="true"
inkscape:zoom="5.5968"
inkscape:cx="80.909091"
inkscape:cy="198.68496"
inkscape:window-x="84"
inkscape:window-y="-9"
inkscape:window-maximized="1"
inkscape:current-layer="svg3336"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
units="px">
<inkscape:grid
type="xygrid"
id="grid3480"
originx="-10"
originy="-979.49657"
spacingx="10"
spacingy="10" />
</sodipodi:namedview>
<rect
style="fill:#000000;fill-opacity:1"
id="rect4573"
width="1920"
height="1080"
x="0"
y="-7.9936058e-015" />
<rect
style="fill:#ff9900;fill-opacity:1"
id="rect3346"
width="1517.7715"
height="35"
x="166.95036"
y="10" />
<rect
style="fill:#ff9900;fill-opacity:1"
id="rect3348"
width="130"
height="50"
x="10"
y="100"
ry="0" />
<path
style="fill:#ff9900;fill-opacity:1"
id="path3369"
sodipodi:type="arc"
sodipodi:cx="100"
sodipodi:cy="100"
sodipodi:rx="90"
sodipodi:ry="90"
sodipodi:start="3.1415927"
sodipodi:end="4.712389"
d="M 10,99.999996 A 90,90 0 0 1 100,10 l 0,90 z" />
<rect
style="fill:#ff9900;fill-opacity:1"
id="rect3371"
width="75"
height="70"
x="99.457542"
y="10" />
<path
style="fill:#000000;fill-opacity:1"
id="path3373"
sodipodi:type="arc"
sodipodi:cx="175.24715"
sodipodi:cy="80"
sodipodi:rx="35"
sodipodi:ry="35"
sodipodi:start="3.1415927"
sodipodi:end="4.712389"
d="M 140.24715,79.999998 A 35,35 0 0 1 175.24715,45 l 0,35 z" />
<rect
style="fill:#ff9900;fill-opacity:1"
id="rect3339"
width="40"
height="20"
x="100"
y="80" />
<rect
style="fill:#ff9900;fill-opacity:1"
id="rect3348-4"
width="130"
height="55"
x="10"
y="160"
ry="0" />
<rect
style="fill:#ff9900;fill-opacity:1"
id="rect3348-48"
width="130"
height="55"
x="10"
y="225"
ry="0" />
<rect
style="fill:#ff9900;fill-opacity:1"
id="rect3348-9"
width="130"
height="55"
x="10"
y="290"
ry="0" />
<rect
style="fill:#ffcc9a;fill-opacity:1"
id="rect3348-9-1"
width="130"
height="55"
x="10"
y="355"
ry="0" />
<rect
style="fill:#ffcc9a;fill-opacity:1"
id="rect3348-9-1-9"
width="130"
height="55"
x="10"
y="420"
ry="0" />
<rect
style="fill:#ffcc9a;fill-opacity:1"
id="rect3348-9-1-6"
width="130"
height="55"
x="10"
y="485"
ry="0" />
<rect
style="fill:#ffcc9a;fill-opacity:1"
id="rect3348-9-1-97"
width="130"
height="55"
x="10"
y="550"
ry="0" />
<rect
style="fill:#9999ff;fill-opacity:1"
id="rect3348-9-1-2"
width="130"
height="55"
x="10"
y="615"
ry="0" />
<rect
style="fill:#9999ff;fill-opacity:1"
id="rect3348-9-1-2-2"
width="130"
height="55"
x="10"
y="680"
ry="0" />
<rect
style="fill:#9999ff;fill-opacity:1"
id="rect3348-9-1-2-2-3"
width="130"
height="55"
x="10"
y="745"
ry="0" />
<path
style="fill:#9999ff;fill-opacity:1"
id="path3369-5"
sodipodi:type="arc"
sodipodi:cx="100"
sodipodi:cy="980"
sodipodi:rx="90"
sodipodi:ry="90"
sodipodi:start="1.5707963"
sodipodi:end="3.1415927"
d="M 100,1070 A 90,90 0 0 1 36.360389,1043.6396 90,90 0 0 1 10,980 l 90,0 z" />
<rect
style="fill:#9999ff;fill-opacity:1"
id="rect3348-9-1-2-2-3-9"
width="130"
height="30"
x="10"
y="950"
ry="0" />
<rect
style="fill:#9999ff;fill-opacity:1"
id="rect3348-9-1-2-2-3-2"
width="130"
height="60"
x="10"
y="880"
ry="0" />
<rect
style="fill:#9999ff;fill-opacity:1"
id="rect3348-9-1-2-2-3-5"
width="130"
height="10"
x="10.000006"
y="870"
ry="0" />
<path
style="fill:#9999ff;fill-opacity:1"
id="path4297"
sodipodi:type="arc"
sodipodi:cx="40"
sodipodi:cy="800"
sodipodi:rx="30"
sodipodi:ry="29.999998"
sodipodi:start="1.5707963"
sodipodi:end="3.1415927"
d="M 40.000001,830 A 30,29.999998 0 0 1 18.786796,821.2132 30,29.999998 0 0 1 10,800 l 30,0 z" />
<path
style="fill:#9999ff;fill-opacity:1"
id="path4297-6"
sodipodi:type="arc"
sodipodi:cx="40"
sodipodi:cy="870"
sodipodi:rx="30"
sodipodi:ry="29.999998"
sodipodi:start="3.1415927"
sodipodi:end="4.712389"
d="M 10,870 A 30,29.999998 0 0 1 40.000001,840 L 40,870 Z" />
<rect
style="fill:#9999ff;fill-opacity:1"
id="rect4314"
width="100"
height="30"
x="40"
y="840" />
<rect
style="fill:#9999ff;fill-opacity:1"
id="rect4314-4"
width="100"
height="30"
x="40"
y="800" />
<rect
style="fill:#9999ff;fill-opacity:1"
id="rect4314-4-9"
width="15"
height="25"
x="140"
y="805" />
<path
style="fill:#000000;fill-opacity:1"
id="path4331"
sodipodi:type="arc"
sodipodi:cx="155"
sodipodi:cy="804.56854"
sodipodi:rx="15"
sodipodi:ry="15"
sodipodi:start="1.5707963"
sodipodi:end="3.1415927"
d="M 155,819.56854 A 15,15 0 0 1 144.3934,815.17514 15,15 0 0 1 140,804.56854 l 15,0 z" />
<rect
style="fill:#9999ff;fill-opacity:1"
id="rect4314-4-9-2"
width="15"
height="25"
x="140"
y="840" />
<path
style="fill:#000000;fill-opacity:1"
id="path4331-9"
sodipodi:type="arc"
sodipodi:cx="155"
sodipodi:cy="-865"
sodipodi:rx="15"
sodipodi:ry="15"
sodipodi:start="1.5707963"
sodipodi:end="3.1415927"
d="M 155,-850 A 15,15 0 0 1 144.3934,-854.3934 15,15 0 0 1 140,-865 l 15,0 z"
transform="scale(1,-1)" />
<rect
style="fill:#9999ff;fill-opacity:1"
id="rect4378"
width="30"
height="10"
x="155"
y="840" />
<rect
style="fill:#9999ff;fill-opacity:1"
id="rect4378-5"
width="30"
height="10"
x="155"
y="820" />
<rect
style="fill:#9999ff;fill-opacity:1"
id="rect3371-5"
width="75"
height="70"
x="100"
y="1000" />
<path
style="fill:#000000;fill-opacity:1"
id="path3373-4"
sodipodi:type="arc"
sodipodi:cx="175"
sodipodi:cy="-1000"
sodipodi:rx="35"
sodipodi:ry="35"
sodipodi:start="3.1415927"
sodipodi:end="4.712389"
d="m 140,-1000 a 35,35 0 0 1 35,-35 l 0,35 z"
transform="scale(1,-1)" />
<rect
style="fill:#9999ff;fill-opacity:1"
id="rect3346-9"
width="1715"
height="35"
x="175"
y="1035" />
<rect
style="fill:#9999ff;fill-opacity:1"
id="rect3339-2"
width="40"
height="20"
x="100"
y="980" />
<path
style="fill:#9999ff;fill-opacity:1"
id="path4455"
sodipodi:type="arc"
sodipodi:cx="1890"
sodipodi:cy="1052.5"
sodipodi:rx="19.329626"
sodipodi:ry="17.5"
sodipodi:start="4.712389"
sodipodi:end="1.5707963"
d="m 1890,1035 a 19.329626,17.5 0 0 1 19.3296,17.5 A 19.329626,17.5 0 0 1 1890,1070 l 0,-17.5 z" />
<path
style="fill:#ff9900;fill-opacity:1"
id="path4455-5"
sodipodi:type="arc"
sodipodi:cx="1890"
sodipodi:cy="27.5"
sodipodi:rx="19.329626"
sodipodi:ry="17.5"
sodipodi:start="4.712389"
sodipodi:end="1.5707963"
d="M 1890,10 A 19.329626,17.5 0 0 1 1909.3296,27.5 19.329626,17.5 0 0 1 1890,45 l 0,-17.5 z" />
<rect
style="fill:#ff9900;fill-opacity:1"
id="rect4472"
width="30"
height="35"
x="1860"
y="10" />
<path
style="fill:#ff9900;fill-opacity:1"
id="path4474"
sodipodi:type="arc"
sodipodi:cx="1490"
sodipodi:cy="45"
sodipodi:rx="15"
sodipodi:ry="15"
sodipodi:start="0"
sodipodi:end="1.5707963"
d="m 1505,45 a 15,15 0 0 1 -15,15 l 0,-15 z" />
<path
style="fill:#ff9900;fill-opacity:1"
id="path4474-9"
sodipodi:type="arc"
sodipodi:cx="-1115"
sodipodi:cy="45"
sodipodi:rx="15"
sodipodi:ry="15"
sodipodi:start="0"
sodipodi:end="1.5707963"
d="m -1100,45 a 15,15 0 0 1 -15,15 l 0,-15 z"
transform="scale(-1,1)" />
<rect
style="fill:#ff9900;fill-opacity:1"
id="rect4491"
width="375"
height="15"
x="1115"
y="45" />
<rect
style="fill:#ff9900;fill-opacity:1"
id="rect4496"
width="130"
height="30"
x="150"
y="119.49657" />
<rect
style="fill:#ff9900;fill-opacity:1"
id="rect4496-1"
width="130"
height="30"
x="290"
y="120" />
<rect
style="fill:#ff9900;fill-opacity:1"
id="rect4496-7"
width="130"
height="30"
x="430"
y="120" />
<rect
style="fill:#ff9900;fill-opacity:1"
id="rect4496-8"
width="130"
height="30"
x="570"
y="120" />
<rect
style="fill:#ff9900;fill-opacity:1"
id="rect4496-9"
width="130"
height="30"
x="710"
y="120" />
<rect
style="fill:#ff9900;fill-opacity:1"
id="rect4496-5"
width="130"
height="30"
x="850"
y="120" />
<rect
style="fill:#ff9900;fill-opacity:1"
id="rect4496-4"
width="130"
height="30"
x="990"
y="120" />
<rect
style="fill:#ff9900;fill-opacity:1"
id="rect4496-19"
width="130"
height="30"
x="1130"
y="120" />
<rect
style="fill:#ff9900;fill-opacity:1"
id="rect4496-46"
width="130"
height="30"
x="1270"
y="120" />
<rect
style="fill:#ff9900;fill-opacity:1"
id="rect4496-82"
width="130"
height="30"
x="1410"
y="120" />
<rect
style="fill:#ff9900;fill-opacity:1"
id="rect4496-73"
width="130"
height="30"
x="1550"
y="120" />
<rect
style="fill:#ff9900;fill-opacity:1"
id="rect4496-3"
width="130"
height="30"
x="1690"
y="120" />
</svg>
</pre>

Nun noch ein SET WEB rereadicons durchführen und der Floorplan zeigt den Hintergrund im LCARS-Design angezeigt.
== 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:

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
== Das Navigationsmenü ==
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_Garten.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.

<pre>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>


<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="130"
height="55"
viewBox="0 0 130 55.000001"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="switch_off.svg">
<style
type="text/css"
id="style3">
@font-face {
font-family: 'lcars';
src: url('/fhem/images/default/lcars/lcarsgtj3-webfont.eot');
src: url('/fhem/images/default/lcars/lcarsgtj3-webfont.eot?#iefix') format('embedded-opentype'),
url('/fhem/images/default/lcars/lcarsgtj3-webfont.woff') format('woff'),
url('/fhem/images/default/lcars/lcarsgtj3-webfont.ttf') format('truetype'),
url('/fhem/images/default/lcars/lcarsgtj3-webfont.svg#lcarsgtj3lcarsgtj3') format('svg');
font-weight: normal;
font-style: normal;}
</style>
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="3.9185501"
inkscape:cx="8.571662"
inkscape:cy="52.612298"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
inkscape:window-width="1827"
inkscape:window-height="1051"
inkscape:window-x="84"
inkscape:window-y="-9"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,0)">
<rect
style="fill:#ff9900;fill-opacity:1"
id="rect3364"
width="130"
height="55"
x="0"
y="0" />
<text
x="125"
y="50"
text-anchor="end"
font-size="35"
font-family="lcars"
fill="#000000"
id="text11">Status</text>
</g>
</svg>
</pre>

Die Einbindung in der fhem.cfg:

<pre>
#Menü definieren
#Class für den Link auf SVG setzen, um auf gesamtes SVG-Bild klicken zu können
#SVG-Class dafür in der CSS-Datei definieren
define Menue_Status weblink htmlCode {'<a class="svg" href="/fhem/floorplan/LCARS_STATUS"><object data="/fhem/icons/lcars/menue_status.svg" type="image/svg+xml"></object></a>'}
attr Menue_Status fp_LCARS_EG 160,10,0,
attr Menue_Status fp_LCARS_GARTEN 160,10,0,
attr Menue_Status fp_LCARS_OG 160,10,0,
attr Menue_Status fp_LCARS_STATUS 160,10,0,

define Menue_EG weblink htmlCode {'<a class="svg" href="/fhem/floorplan/LCARS_EG"><object data="/fhem/icons/lcars/menue_EG.svg" type="image/svg+xml"></object></a>' }
attr Menue_EG fp_LCARS_EG 225,10,0,
attr Menue_EG fp_LCARS_GARTEN 225,10,0,
attr Menue_EG fp_LCARS_OG 225,10,0,
attr Menue_EG fp_LCARS_STATUS 225,10,0,

define Menue_OG weblink htmlCode {'<a class="svg" href="/fhem/floorplan/LCARS_OG"><object data="/fhem/icons/lcars/menue_OG.svg" type="image/svg+xml"></object></a>' }
attr Menue_OG fp_LCARS_EG 290,10,0,
attr Menue_OG fp_LCARS_GARTEN 290,10,0,
attr Menue_OG fp_LCARS_OG 290,10,0,
attr Menue_OG fp_LCARS_STATUS 290,10,0,

define Menue_Garten weblink htmlCode {'<a class="svg" href="/fhem/floorplan/LCARS_GARTEN"><object data="/fhem/icons/lcars/menue_Garten.svg" type="image/svg+xml"></object></a>' }
attr Menue_Garten fp_LCARS_EG 355,10,0,
attr Menue_Garten fp_LCARS_GARTEN 355,10,0,
attr Menue_Garten fp_LCARS_OG 355,10,0,
attr Menue_Garten fp_LCARS_STATUS 355,10,0,
</pre>

Der erforderliche Eintrag in der CSS-Datei

<pre>
/*LCARS: SVG definieren, um auf das gesamte Bild klicken zu können*/
a.svg {
position: relative;
display: inline-block;
}
a.svg:after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left:0;
}
</pre>
Nach einem SET WEB rereadicons ist die Navigation zwischen den einzelnen Floorplänen möglich.

== Schalter für die Beleuchtung ==
Für die Integration der Buttons der Schalter sind folgende Anpassungen erforderlich:

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>
/*LCARS-Schriftart clientunabhängig verfügbar machen
Wird in SVG-Texten nochmal separat definiert, sobald die SVG im Tag
z.b. IMG oder OBJECT verwendet wird.
*/
@font-face {
font-family: 'lcars';
src: url('/fhem/images/default/lcarsgtj3-webfont.eot');
src: url('/fhem/images/default/lcarsgtj3-webfont.eot?#iefix') format('embedded-opentype'),
url('/fhem/images/default/lcarsgtj3-webfont.woff') format('woff'),
url('/fhem/images/default/lcarsgtj3-webfont.ttf') format('truetype'),
url('/fhem/images/default/lcarsgtj3-webfont.svg#lcarsgtj3lcarsgtj3') format('svg');
font-weight: normal;
font-style: normal;
}
/*LCARS: Höhe und Breite der Schalter definieren
der Name svg.xxx ergibt sich, durch die Definition "devStateIcon off:switch_off on:switch_on:off"
in der fhem.cfg zum jeweiligen Device
*/
svg.switch_off { height:55px; width:130px; fill:#ffffff; vertical-align:middle; margin:0 0; }
svg.switch_on { 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; }
</pre>

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

<pre>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>


<svg classname="switch"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
width="130"
height="55"
viewBox="0 0 130 55"
id="svg2">
<defs
id="defs4" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
id="layer1"
>
<path
style="fill:#00ff00;fill-opacity:1"
id="path3360"
d="m 102,0 a 27.4,27.5 0 0 1 27.6,27.6 27.6,27.6 0 0 1 -27.5,27.5 l 0,-27.5 z" />
<rect
style="fill:#00ff00;fill-opacity:1"
id="rect3362"
width="37.5"
x="65"
y="0"
height="55" />
<text
x="60"
y="50"
text-anchor="end"
font-size="45"
font-family="lcars"
fill="#ff9900"
id="text11">Aus</text>
</g>
</svg>
</pre>

Die Datei fhem/www/images/default/lcars/switch_on.svg:
<pre>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>


<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
id="svg2"
viewBox="0 0 130 55"
height="55"
width="130">
<metadata
id="metadata12">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs4" />
<g
id="layer1">
<path
d="m 102,0 a 27.4,27.5 0 0 1 27.6,27.6 27.6,27.6 0 0 1 -27.5,27.5 l 0,-27.5 z"
id="path3360"
style="fill:#ff001a;fill-opacity:1" />
<rect
height="55"
y="0"
x="65"
width="37.599998"
id="rect3362"
style="fill:#ff001a;fill-opacity:1" />
<text
id="text11"
fill="#ff9900"
font-family="lcars"
font-size="45"
text-anchor="end"
y="50"
x="60">An</text>
</g>
</svg>
</pre>

Zuweisen der SVG-Dateien in der fhem.cfg

<pre>
#Icon-Pfad setzen
define WEB FHEMWEB 8083 global
[...]
attr WEB iconPath default:default/lcars

Schalter Lamp1
define HMW_LC_Sw2_DR_LEQ0116953_03 HM485 0000B84F_03
attr HMW_LC_Sw2_DR_LEQ0116953_03 alias kue_lampe_1
attr HMW_LC_Sw2_DR_LEQ0116953_03 devStateIcon off:switch_off on:switch_on:off
attr HMW_LC_Sw2_DR_LEQ0116953_03 firmwareVersion 3.06
attr HMW_LC_Sw2_DR_LEQ0116953_03 fp_LCARS_EG 230,1500,0,
attr HMW_LC_Sw2_DR_LEQ0116953_03 model HMW_LC_Sw2_DR
attr HMW_LC_Sw2_DR_LEQ0116953_03 room hidden
attr HMW_LC_Sw2_DR_LEQ0116953_03 serialNr LEQ0116953
attr HMW_LC_Sw2_DR_LEQ0116953_03 subType switch
#Schlater Lamp2
define HMW_LC_Sw2_DR_LEQ0116953_04 HM485 0000B84F_04
attr HMW_LC_Sw2_DR_LEQ0116953_04 alias kue_lampe_2
attr HMW_LC_Sw2_DR_LEQ0116953_04 devStateIcon off:switch_off:on on:switch_on:off
attr HMW_LC_Sw2_DR_LEQ0116953_04 firmwareVersion 3.06
attr HMW_LC_Sw2_DR_LEQ0116953_04 fp_LCARS_EG 295,1500,0,
attr HMW_LC_Sw2_DR_LEQ0116953_04 model HMW_LC_Sw2_DR
attr HMW_LC_Sw2_DR_LEQ0116953_04 room hidden
attr HMW_LC_Sw2_DR_LEQ0116953_04 serialNr LEQ0116953
attr HMW_LC_Sw2_DR_LEQ0116953_04 subType switch
</pre>

Nach einem SET WEB rereadicons lassen sich die Schalter bedienen.

== Label und Rahmen ==
Damit man nun weiß, was man schaltet und auch der Style stimmt, können noch folgenden Anpassungen vorgenommen werden

Datei: fhem/www/images/default/lcars/corner1_BL.svg
<pre>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>


<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="60"
height="30"
viewBox="0 0 60.000001 30"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
shape-rendering="crispEdges"
sodipodi:docname="corner1_BL.svg">
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="8.9190361"
inkscape:cx="25.358648"
inkscape:cy="22.580645"
inkscape:document-units="px"
inkscape:current-layer="svg2"
showgrid="false"
units="px"
inkscape:window-width="1827"
inkscape:window-height="1051"
inkscape:window-x="84"
inkscape:window-y="-9"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1"
transform="matrix(1,0,0,-1,0,1052.3621)">
<rect
style="fill:#cd6566;fill-opacity:1"
id="rect4138"
width="30"
height="30"
x="30"
y="1022.3621" />
<rect
style="fill:#000000;fill-opacity:1"
id="rect4136"
width="10"
height="25"
x="50"
y="1027.3621" />
<path
style="fill:#cd6566;fill-opacity:1"
id="path4142"
sodipodi:type="arc"
sodipodi:cx="-1052.3621"
sodipodi:cy="-31"
sodipodi:rx="30"
sodipodi:ry="31"
sodipodi:start="0"
sodipodi:end="1.5707963"
d="m -1022.3621,-31 a 30,31 0 0 1 -30,31 l 0,-31 z"
transform="matrix(0,-1,-1,0,0,0)" />
<path
style="fill:#000000;fill-opacity:1"
id="path4142-4"
sodipodi:type="arc"
sodipodi:cx="-1037.3621"
sodipodi:cy="-50"
sodipodi:rx="10"
sodipodi:ry="10"
sodipodi:start="0"
sodipodi:end="1.5707963"
d="m -1027.3621,-50 a 10,10 0 0 1 -10,10 l 0,-10 z"
transform="matrix(0,-1,-1,0,0,0)" />
<rect
style="fill:#000000;fill-opacity:1"
id="rect4136-7"
width="10"
height="15.357702"
x="40"
y="1037.0044" />
</g>
</svg>
</pre>

Datei: fhem/www/images/default/lcars/corner1_BR.svg
<pre>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>


<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="60"
height="30"
viewBox="0 0 60.000001 30"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
shape-rendering="crispEdges"
sodipodi:docname="corner1_BR.svg">
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="8.9190361"
inkscape:cx="25.358648"
inkscape:cy="22.580645"
inkscape:document-units="px"
inkscape:current-layer="svg2"
showgrid="false"
units="px"
inkscape:window-width="1827"
inkscape:window-height="1051"
inkscape:window-x="84"
inkscape:window-y="-9"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1"
transform="matrix(-1,0,0,-1,59.999991,1052.3621)">
<rect
style="fill:#cd6566;fill-opacity:1"
id="rect4138"
width="30"
height="30"
x="30"
y="1022.3621" />
<rect
style="fill:#000000;fill-opacity:1"
id="rect4136"
width="10"
height="25"
x="50"
y="1027.3621" />
<path
style="fill:#cd6566;fill-opacity:1"
id="path4142"
sodipodi:type="arc"
sodipodi:cx="-1052.3621"
sodipodi:cy="-31"
sodipodi:rx="30"
sodipodi:ry="31"
sodipodi:start="0"
sodipodi:end="1.5707963"
d="m -1022.3621,-31 a 30,31 0 0 1 -30,31 l 0,-31 z"
transform="matrix(0,-1,-1,0,0,0)" />
<path
style="fill:#000000;fill-opacity:1"
id="path4142-4"
sodipodi:type="arc"
sodipodi:cx="-1037.3621"
sodipodi:cy="-50"
sodipodi:rx="10"
sodipodi:ry="10"
sodipodi:start="0"
sodipodi:end="1.5707963"
d="m -1027.3621,-50 a 10,10 0 0 1 -10,10 l 0,-10 z"
transform="matrix(0,-1,-1,0,0,0)" />
<rect
style="fill:#000000;fill-opacity:1"
id="rect4136-7"
width="10"
height="15.357702"
x="40"
y="1037.0044" />
</g>
</svg>
</pre>

Datei: fhem/www/images/default/lcars/corner1_TL.svg
<pre>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>


<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="60"
height="30"
viewBox="0 0 60.000001 30"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
shape-rendering="crispEdges"
sodipodi:docname="corner1_TL.svg">
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="8.9190361"
inkscape:cx="36.290323"
inkscape:cy="22.580645"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
inkscape:window-width="1827"
inkscape:window-height="1051"
inkscape:window-x="84"
inkscape:window-y="-9"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-1022.3621)">
<rect
style="fill:#cd6566;fill-opacity:1"
id="rect4138"
width="30"
height="30"
x="30"
y="1022.3621" />
<rect
style="fill:#000000;fill-opacity:1"
id="rect4136"
width="10"
height="25"
x="50"
y="1027.3621" />
<path
style="fill:#cd6566;fill-opacity:1"
id="path4142"
sodipodi:type="arc"
sodipodi:cx="-1052.3621"
sodipodi:cy="-31"
sodipodi:rx="30"
sodipodi:ry="31"
sodipodi:start="0"
sodipodi:end="1.5707963"
d="m -1022.3621,-31 a 30,31 0 0 1 -30,31 l 0,-31 z"
transform="matrix(0,-1,-1,0,0,0)" />
<path
style="fill:#000000;fill-opacity:1"
id="path4142-4"
sodipodi:type="arc"
sodipodi:cx="-1037.3621"
sodipodi:cy="-50"
sodipodi:rx="10"
sodipodi:ry="10"
sodipodi:start="0"
sodipodi:end="1.5707963"
d="m -1027.3621,-50 a 10,10 0 0 1 -10,10 l 0,-10 z"
transform="matrix(0,-1,-1,0,0,0)" />
<rect
style="fill:#000000;fill-opacity:1"
id="rect4136-7"
width="10"
height="15.357702"
x="40"
y="1037.0044" />
</g>
</svg>
</pre>

Datei: fhem/www/images/default/lcars/corner1_TR.svg
<pre>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>


<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="60"
height="30"
viewBox="0 0 60.000001 30"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
shape-rendering="crispEdges"
sodipodi:docname="corner1_TR.svg">
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="8.9190361"
inkscape:cx="25.358648"
inkscape:cy="22.580645"
inkscape:document-units="px"
inkscape:current-layer="svg2"
showgrid="false"
units="px"
inkscape:window-width="1827"
inkscape:window-height="1051"
inkscape:window-x="84"
inkscape:window-y="-9"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1"
transform="matrix(-1,0,0,1,59.999991,-1022.3621)">
<rect
style="fill:#cd6566;fill-opacity:1"
id="rect4138"
width="30"
height="30"
x="30"
y="1022.3621" />
<rect
style="fill:#000000;fill-opacity:1"
id="rect4136"
width="10"
height="25"
x="50"
y="1027.3621" />
<path
style="fill:#cd6566;fill-opacity:1"
id="path4142"
sodipodi:type="arc"
sodipodi:cx="-1052.3621"
sodipodi:cy="-31"
sodipodi:rx="30"
sodipodi:ry="31"
sodipodi:start="0"
sodipodi:end="1.5707963"
d="m -1022.3621,-31 a 30,31 0 0 1 -30,31 l 0,-31 z"
transform="matrix(0,-1,-1,0,0,0)" />
<path
style="fill:#000000;fill-opacity:1"
id="path4142-4"
sodipodi:type="arc"
sodipodi:cx="-1037.3621"
sodipodi:cy="-50"
sodipodi:rx="10"
sodipodi:ry="10"
sodipodi:start="0"
sodipodi:end="1.5707963"
d="m -1027.3621,-50 a 10,10 0 0 1 -10,10 l 0,-10 z"
transform="matrix(0,-1,-1,0,0,0)" />
<rect
style="fill:#000000;fill-opacity:1"
id="rect4136-7"
width="10"
height="15.357702"
x="40"
y="1037.0044" />
</g>
</svg>
</pre>

Datei: fhem/www/images/default/lcars/lbl_switch_kueche1.svg
<pre>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>


<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="260"
height="55"
viewBox="0 0 260 55.000001"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="lbl_switch_kueche1.svg">
<style
type="text/css"
id="style3">
@font-face {
font-family: 'lcars';
src: url('/fhem/images/default/lcars/lcarsgtj3-webfont.eot');
src: url('/fhem/images/default/lcars/lcarsgtj3-webfont.eot?#iefix') format('embedded-opentype'),
url('/fhem/images/default/lcars/lcarsgtj3-webfont.woff') format('woff'),
url('/fhem/images/default/lcars/lcarsgtj3-webfont.ttf') format('truetype'),
url('/fhem/images/default/lcars/lcarsgtj3-webfont.svg#lcarsgtj3lcarsgtj3') format('svg');
font-weight: normal;
font-style: normal;}
</style>
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="3.9185501"
inkscape:cx="133.4632"
inkscape:cy="52.4847"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
inkscape:window-width="1827"
inkscape:window-height="1051"
inkscape:window-x="84"
inkscape:window-y="-9"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1">
<rect
style="fill:#ffcc9a;fill-opacity:1"
id="rect3364"
width="260"
height="55"
x="0"
y="0" />
<text
x="255.354"
y="49.50441"
font-size="35"
id="text11"
style="font-size:35px;font-family:lcars;text-anchor:end;fill:#000000">Küche - Glasbodenleuchte</text>
</g>
</svg>
</pre>
Datei: fhem/www/images/default/lcars/lbl_switch_kueche2.svg
<pre>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>


<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="260"
height="55"
viewBox="0 0 260 55.000001"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="lbl_switch_kueche1.svg">
<style
type="text/css"
id="style3">
@font-face {
font-family: 'lcars';
src: url('/fhem/images/default/lcars/lcarsgtj3-webfont.eot');
src: url('/fhem/images/default/lcars/lcarsgtj3-webfont.eot?#iefix') format('embedded-opentype'),
url('/fhem/images/default/lcars/lcarsgtj3-webfont.woff') format('woff'),
url('/fhem/images/default/lcars/lcarsgtj3-webfont.ttf') format('truetype'),
url('/fhem/images/default/lcars/lcarsgtj3-webfont.svg#lcarsgtj3lcarsgtj3') format('svg');
font-weight: normal;
font-style: normal;}
</style>
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="3.9185501"
inkscape:cx="133.4632"
inkscape:cy="52.4847"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
inkscape:window-width="1827"
inkscape:window-height="1051"
inkscape:window-x="84"
inkscape:window-y="-9"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1">
<rect
style="fill:#ffcc9a;fill-opacity:1"
id="rect3364"
width="260"
height="55"
x="0"
y="0" />
<text
x="255.354"
y="49.50441"
font-size="35"
id="text11"
style="font-size:35px;font-family:lcars;text-anchor:end;fill:#000000">Küche - Deckenleuchte</text>
</g>
</svg>
</pre>
Datei: fhem/www/images/default/lcars/headline_switches.svg
<pre>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>


<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="205"
height="35"
viewBox="0 0 205 35"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="headline_switches.svg">
<style
type="text/css"
id="style3">
@font-face {
font-family: 'lcars';
src: url('/fhem/images/default/lcars/lcarsgtj3-webfont.eot');
src: url('/fhem/images/default/lcars/lcarsgtj3-webfont.eot?#iefix') format('embedded-opentype'),
url('/fhem/images/default/lcars/lcarsgtj3-webfont.woff') format('woff'),
url('/fhem/images/default/lcars/lcarsgtj3-webfont.ttf') format('truetype'),
url('/fhem/images/default/lcars/lcarsgtj3-webfont.svg#lcarsgtj3lcarsgtj3') format('svg');
font-weight: normal;
font-style: normal;}
</style>
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="3.9185501"
inkscape:cx="62.84951"
inkscape:cy="52.357102"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
inkscape:window-width="1827"
inkscape:window-height="1051"
inkscape:window-x="84"
inkscape:window-y="-9"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,0)">
<text
x="205"
y="35"
font-size="35"
id="text11"
style="font-size:35px;font-family:lcars;text-anchor:end;fill:#ff9900">Beleuchtung</text>
</g>
</svg>
</pre>
Datei: fhem/www/images/default/lcars/line1.svg
<pre>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>


<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="40"
height="350"
viewBox="0 0 40 350"
id="svg4138"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="line1.svg"
style="shape-rendering:crispEdges">
<defs
id="defs4140" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="2.5797414"
inkscape:cx="40"
inkscape:cy="257.91145"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
inkscape:window-width="1827"
inkscape:window-height="1051"
inkscape:window-x="84"
inkscape:window-y="-9"
inkscape:window-maximized="1" />
<metadata
id="metadata4143">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-702.36216)">
<rect
style="fill:#cf98cf;fill-opacity:1"
id="rect4686"
width="40"
height="350"
x="0"
y="702.36224" />
</g>
</svg>
</pre>
Datei: fhem/www/images/default/lcars/line2.svg
<pre>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>


<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="500"
height="5"
viewBox="0 0 500 5"
id="svg4138"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="line2.svg"
style="shape-rendering:crispEdges">
<defs
id="defs4140" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="2.6533333"
inkscape:cx="155.43478"
inkscape:cy="33.152174"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
inkscape:window-width="1827"
inkscape:window-height="1051"
inkscape:window-x="84"
inkscape:window-y="-9"
inkscape:window-maximized="1" />
<metadata
id="metadata4143">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-1047.3622)">
<rect
style="fill:#cd6566;fill-opacity:1"
id="rect4686"
width="500"
height="5"
x="0"
y="1047.3622" />
</g>
</svg>
</pre>

Die Einträge in der fhem.cfg
<pre>
#---Rahmen Elemente
define corner1_tl weblink htmlCode {'<object data="/fhem/icons/lcars/corner1_TL.svg" type="image/svg+xml"></object>' }
attr corner1_tl fp_LCARS_EG 200,1200,0,
define corner1_bl weblink htmlCode {'<object data="/fhem/icons/lcars/corner1_BL.svg" type="image/svg+xml"></object>' }
attr corner1_bl fp_LCARS_EG 590,1200,0,
define corner1_tr weblink htmlCode {'<object data="/fhem/icons/lcars/corner1_TR.svg" type="image/svg+xml"></object>' }
attr corner1_tr fp_LCARS_EG 200,1700,0,
define corner1_br weblink htmlCode {'<object data="/fhem/icons/lcars/corner1_BR.svg" type="image/svg+xml"></object>' }
attr corner1_br fp_LCARS_EG 590,1700,0,
define line1_l weblink htmlCode {'<object data="/fhem/icons/lcars/line1.svg" type="image/svg+xml"></object>' }
attr line1_l fp_LCARS_EG 235,1200,0,
define line2_b weblink htmlCode {'<object data="/fhem/icons/lcars/line2.svg" type="image/svg+xml"></object>' }
attr line2_b fp_LCARS_EG 601,1230,0,
define headline_switches weblink htmlCode {'<object data="/fhem/icons/lcars/headline_switches.svg" type="image/svg+xml"></object>' }
attr headline_switches fp_LCARS_EG 183,1481,0,

#Label
define lbl_switch_kueche1 weblink htmlCode {'<object data="/fhem/icons/lcars/lbl_switch_kueche1.svg" type="image/svg+xml"></object>' }
attr lbl_switch_kueche1 fp_LCARS_EG 230,1250,0,
define lbl_switch_kueche2 weblink htmlCode {'<object data="/fhem/icons/lcars/lbl_switch_kueche2.svg" type="image/svg+xml"></object>' }
attr lbl_switch_kueche2 fp_LCARS_EG 295,1250,0,
</pre>

Nach einem SET WEB rereadicons sind nun Labels und Rahmen sichtbar.

Die Grundlagen sind da, die Floorpläne können nun an eigenen Bedürfnisse angepasst werden.
[[Kategorie:HOWTOS]]

Datei:Background.svg

2016-02-19T08:44:00Z

Msfox: Hintergrund

Hintergrund

Floorplan im LCARS Design

2016-02-19T08:42:13Z

Msfox:

In diesem Wiki geht es um die Erstellung eines [[FLOORPLAN|Floorplans]] im '''LCARS Design''', siehe [https://www.google.de/search?q=LCARS&client=opera&hs=3Zm&tbm=isch&tbo=u&source=univ&sa=X&ei=W2czVcmtKIOksAGp0oCICA&ved=0CCEQsAQ&biw=1920&bih=971/ LCARS Beispiele].

Es gibt auf Fhem.de einen [http://fhem.de/forum_22336.jpg Screenshot] eines Floorplans im LCARS Design.

In {{Link2Forum|Topic=22336|Message=180850|LinkText=diesem Forenbeitrag}} tauchte obiges Design erstmals auf, entwickelt wurde es von Forenbenutzer {{Link2FU|4194|Tion}}.

== Screenshot 1 ==
[[Datei:lcars_all.jpg|300px|thumb|left|Übersicht]]
(Die Slider sind nocht nicht beschrieben; Sie folgen...)

== 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:
<pre>
#Floorpläne
define LCARS_STATUS FLOORPLAN
attr LCARS_STATUS fp_noMenu 1
attr LCARS_STATUS stylesheet floorplanstyle_lcars.css

define LCARS_EG FLOORPLAN
attr LCARS_EG fp_noMenu 1
attr LCARS_EG stylesheet floorplanstyle_lcars.css

define LCARS_OG FLOORPLAN
attr LCARS_OG fp_noMenu 1
attr LCARS_OG stylesheet floorplanstyle_lcars.css

define LCARS_GARTEN FLOORPLAN
attr LCARS_GARTEN fp_noMenu 1
attr LCARS_GARTEN stylesheet floorplanstyle_lcars.css
</pre>

== Einbinden des Hintergrundbildes ==
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:
<pre>
body { background-color:#ffffff;
background-image: url(/fhem/icons/lcars/background.svg);
background-size: 1920px 1080px;
overflow:hidden;
background-position: 0px 0px}
</pre>

Das Hintergrundbild als SVG-Datei:
<pre>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>


<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
id="svg3336"
version="1.1"
inkscape:version="0.91 r13725"
width="100%"
height="100%"
viewBox="0 0 1920 1080"
sodipodi:docname="lcars_background.svg">
<metadata
id="metadata3342">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs3340" />
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1827"
inkscape:window-height="1051"
id="namedview3338"
showgrid="true"
inkscape:zoom="5.5968"
inkscape:cx="80.909091"
inkscape:cy="198.68496"
inkscape:window-x="84"
inkscape:window-y="-9"
inkscape:window-maximized="1"
inkscape:current-layer="svg3336"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
units="px">
<inkscape:grid
type="xygrid"
id="grid3480"
originx="-10"
originy="-979.49657"
spacingx="10"
spacingy="10" />
</sodipodi:namedview>
<rect
style="fill:#000000;fill-opacity:1"
id="rect4573"
width="1920"
height="1080"
x="0"
y="-7.9936058e-015" />
<rect
style="fill:#ff9900;fill-opacity:1"
id="rect3346"
width="1517.7715"
height="35"
x="166.95036"
y="10" />
<rect
style="fill:#ff9900;fill-opacity:1"
id="rect3348"
width="130"
height="50"
x="10"
y="100"
ry="0" />
<path
style="fill:#ff9900;fill-opacity:1"
id="path3369"
sodipodi:type="arc"
sodipodi:cx="100"
sodipodi:cy="100"
sodipodi:rx="90"
sodipodi:ry="90"
sodipodi:start="3.1415927"
sodipodi:end="4.712389"
d="M 10,99.999996 A 90,90 0 0 1 100,10 l 0,90 z" />
<rect
style="fill:#ff9900;fill-opacity:1"
id="rect3371"
width="75"
height="70"
x="99.457542"
y="10" />
<path
style="fill:#000000;fill-opacity:1"
id="path3373"
sodipodi:type="arc"
sodipodi:cx="175.24715"
sodipodi:cy="80"
sodipodi:rx="35"
sodipodi:ry="35"
sodipodi:start="3.1415927"
sodipodi:end="4.712389"
d="M 140.24715,79.999998 A 35,35 0 0 1 175.24715,45 l 0,35 z" />
<rect
style="fill:#ff9900;fill-opacity:1"
id="rect3339"
width="40"
height="20"
x="100"
y="80" />
<rect
style="fill:#ff9900;fill-opacity:1"
id="rect3348-4"
width="130"
height="55"
x="10"
y="160"
ry="0" />
<rect
style="fill:#ff9900;fill-opacity:1"
id="rect3348-48"
width="130"
height="55"
x="10"
y="225"
ry="0" />
<rect
style="fill:#ff9900;fill-opacity:1"
id="rect3348-9"
width="130"
height="55"
x="10"
y="290"
ry="0" />
<rect
style="fill:#ffcc9a;fill-opacity:1"
id="rect3348-9-1"
width="130"
height="55"
x="10"
y="355"
ry="0" />
<rect
style="fill:#ffcc9a;fill-opacity:1"
id="rect3348-9-1-9"
width="130"
height="55"
x="10"
y="420"
ry="0" />
<rect
style="fill:#ffcc9a;fill-opacity:1"
id="rect3348-9-1-6"
width="130"
height="55"
x="10"
y="485"
ry="0" />
<rect
style="fill:#ffcc9a;fill-opacity:1"
id="rect3348-9-1-97"
width="130"
height="55"
x="10"
y="550"
ry="0" />
<rect
style="fill:#9999ff;fill-opacity:1"
id="rect3348-9-1-2"
width="130"
height="55"
x="10"
y="615"
ry="0" />
<rect
style="fill:#9999ff;fill-opacity:1"
id="rect3348-9-1-2-2"
width="130"
height="55"
x="10"
y="680"
ry="0" />
<rect
style="fill:#9999ff;fill-opacity:1"
id="rect3348-9-1-2-2-3"
width="130"
height="55"
x="10"
y="745"
ry="0" />
<path
style="fill:#9999ff;fill-opacity:1"
id="path3369-5"
sodipodi:type="arc"
sodipodi:cx="100"
sodipodi:cy="980"
sodipodi:rx="90"
sodipodi:ry="90"
sodipodi:start="1.5707963"
sodipodi:end="3.1415927"
d="M 100,1070 A 90,90 0 0 1 36.360389,1043.6396 90,90 0 0 1 10,980 l 90,0 z" />
<rect
style="fill:#9999ff;fill-opacity:1"
id="rect3348-9-1-2-2-3-9"
width="130"
height="30"
x="10"
y="950"
ry="0" />
<rect
style="fill:#9999ff;fill-opacity:1"
id="rect3348-9-1-2-2-3-2"
width="130"
height="60"
x="10"
y="880"
ry="0" />
<rect
style="fill:#9999ff;fill-opacity:1"
id="rect3348-9-1-2-2-3-5"
width="130"
height="10"
x="10.000006"
y="870"
ry="0" />
<path
style="fill:#9999ff;fill-opacity:1"
id="path4297"
sodipodi:type="arc"
sodipodi:cx="40"
sodipodi:cy="800"
sodipodi:rx="30"
sodipodi:ry="29.999998"
sodipodi:start="1.5707963"
sodipodi:end="3.1415927"
d="M 40.000001,830 A 30,29.999998 0 0 1 18.786796,821.2132 30,29.999998 0 0 1 10,800 l 30,0 z" />
<path
style="fill:#9999ff;fill-opacity:1"
id="path4297-6"
sodipodi:type="arc"
sodipodi:cx="40"
sodipodi:cy="870"
sodipodi:rx="30"
sodipodi:ry="29.999998"
sodipodi:start="3.1415927"
sodipodi:end="4.712389"
d="M 10,870 A 30,29.999998 0 0 1 40.000001,840 L 40,870 Z" />
<rect
style="fill:#9999ff;fill-opacity:1"
id="rect4314"
width="100"
height="30"
x="40"
y="840" />
<rect
style="fill:#9999ff;fill-opacity:1"
id="rect4314-4"
width="100"
height="30"
x="40"
y="800" />
<rect
style="fill:#9999ff;fill-opacity:1"
id="rect4314-4-9"
width="15"
height="25"
x="140"
y="805" />
<path
style="fill:#000000;fill-opacity:1"
id="path4331"
sodipodi:type="arc"
sodipodi:cx="155"
sodipodi:cy="804.56854"
sodipodi:rx="15"
sodipodi:ry="15"
sodipodi:start="1.5707963"
sodipodi:end="3.1415927"
d="M 155,819.56854 A 15,15 0 0 1 144.3934,815.17514 15,15 0 0 1 140,804.56854 l 15,0 z" />
<rect
style="fill:#9999ff;fill-opacity:1"
id="rect4314-4-9-2"
width="15"
height="25"
x="140"
y="840" />
<path
style="fill:#000000;fill-opacity:1"
id="path4331-9"
sodipodi:type="arc"
sodipodi:cx="155"
sodipodi:cy="-865"
sodipodi:rx="15"
sodipodi:ry="15"
sodipodi:start="1.5707963"
sodipodi:end="3.1415927"
d="M 155,-850 A 15,15 0 0 1 144.3934,-854.3934 15,15 0 0 1 140,-865 l 15,0 z"
transform="scale(1,-1)" />
<rect
style="fill:#9999ff;fill-opacity:1"
id="rect4378"
width="30"
height="10"
x="155"
y="840" />
<rect
style="fill:#9999ff;fill-opacity:1"
id="rect4378-5"
width="30"
height="10"
x="155"
y="820" />
<rect
style="fill:#9999ff;fill-opacity:1"
id="rect3371-5"
width="75"
height="70"
x="100"
y="1000" />
<path
style="fill:#000000;fill-opacity:1"
id="path3373-4"
sodipodi:type="arc"
sodipodi:cx="175"
sodipodi:cy="-1000"
sodipodi:rx="35"
sodipodi:ry="35"
sodipodi:start="3.1415927"
sodipodi:end="4.712389"
d="m 140,-1000 a 35,35 0 0 1 35,-35 l 0,35 z"
transform="scale(1,-1)" />
<rect
style="fill:#9999ff;fill-opacity:1"
id="rect3346-9"
width="1715"
height="35"
x="175"
y="1035" />
<rect
style="fill:#9999ff;fill-opacity:1"
id="rect3339-2"
width="40"
height="20"
x="100"
y="980" />
<path
style="fill:#9999ff;fill-opacity:1"
id="path4455"
sodipodi:type="arc"
sodipodi:cx="1890"
sodipodi:cy="1052.5"
sodipodi:rx="19.329626"
sodipodi:ry="17.5"
sodipodi:start="4.712389"
sodipodi:end="1.5707963"
d="m 1890,1035 a 19.329626,17.5 0 0 1 19.3296,17.5 A 19.329626,17.5 0 0 1 1890,1070 l 0,-17.5 z" />
<path
style="fill:#ff9900;fill-opacity:1"
id="path4455-5"
sodipodi:type="arc"
sodipodi:cx="1890"
sodipodi:cy="27.5"
sodipodi:rx="19.329626"
sodipodi:ry="17.5"
sodipodi:start="4.712389"
sodipodi:end="1.5707963"
d="M 1890,10 A 19.329626,17.5 0 0 1 1909.3296,27.5 19.329626,17.5 0 0 1 1890,45 l 0,-17.5 z" />
<rect
style="fill:#ff9900;fill-opacity:1"
id="rect4472"
width="30"
height="35"
x="1860"
y="10" />
<path
style="fill:#ff9900;fill-opacity:1"
id="path4474"
sodipodi:type="arc"
sodipodi:cx="1490"
sodipodi:cy="45"
sodipodi:rx="15"
sodipodi:ry="15"
sodipodi:start="0"
sodipodi:end="1.5707963"
d="m 1505,45 a 15,15 0 0 1 -15,15 l 0,-15 z" />
<path
style="fill:#ff9900;fill-opacity:1"
id="path4474-9"
sodipodi:type="arc"
sodipodi:cx="-1115"
sodipodi:cy="45"
sodipodi:rx="15"
sodipodi:ry="15"
sodipodi:start="0"
sodipodi:end="1.5707963"
d="m -1100,45 a 15,15 0 0 1 -15,15 l 0,-15 z"
transform="scale(-1,1)" />
<rect
style="fill:#ff9900;fill-opacity:1"
id="rect4491"
width="375"
height="15"
x="1115"
y="45" />
<rect
style="fill:#ff9900;fill-opacity:1"
id="rect4496"
width="130"
height="30"
x="150"
y="119.49657" />
<rect
style="fill:#ff9900;fill-opacity:1"
id="rect4496-1"
width="130"
height="30"
x="290"
y="120" />
<rect
style="fill:#ff9900;fill-opacity:1"
id="rect4496-7"
width="130"
height="30"
x="430"
y="120" />
<rect
style="fill:#ff9900;fill-opacity:1"
id="rect4496-8"
width="130"
height="30"
x="570"
y="120" />
<rect
style="fill:#ff9900;fill-opacity:1"
id="rect4496-9"
width="130"
height="30"
x="710"
y="120" />
<rect
style="fill:#ff9900;fill-opacity:1"
id="rect4496-5"
width="130"
height="30"
x="850"
y="120" />
<rect
style="fill:#ff9900;fill-opacity:1"
id="rect4496-4"
width="130"
height="30"
x="990"
y="120" />
<rect
style="fill:#ff9900;fill-opacity:1"
id="rect4496-19"
width="130"
height="30"
x="1130"
y="120" />
<rect
style="fill:#ff9900;fill-opacity:1"
id="rect4496-46"
width="130"
height="30"
x="1270"
y="120" />
<rect
style="fill:#ff9900;fill-opacity:1"
id="rect4496-82"
width="130"
height="30"
x="1410"
y="120" />
<rect
style="fill:#ff9900;fill-opacity:1"
id="rect4496-73"
width="130"
height="30"
x="1550"
y="120" />
<rect
style="fill:#ff9900;fill-opacity:1"
id="rect4496-3"
width="130"
height="30"
x="1690"
y="120" />
</svg>
</pre>

Nun noch ein SET WEB rereadicons durchführen und der Floorplan zeigt den Hintergrund im LCARS-Design angezeigt.
== 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:

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
== Das Navigationsmenü ==
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_Garten.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.

<pre>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>


<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="130"
height="55"
viewBox="0 0 130 55.000001"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="switch_off.svg">
<style
type="text/css"
id="style3">
@font-face {
font-family: 'lcars';
src: url('/fhem/images/default/lcars/lcarsgtj3-webfont.eot');
src: url('/fhem/images/default/lcars/lcarsgtj3-webfont.eot?#iefix') format('embedded-opentype'),
url('/fhem/images/default/lcars/lcarsgtj3-webfont.woff') format('woff'),
url('/fhem/images/default/lcars/lcarsgtj3-webfont.ttf') format('truetype'),
url('/fhem/images/default/lcars/lcarsgtj3-webfont.svg#lcarsgtj3lcarsgtj3') format('svg');
font-weight: normal;
font-style: normal;}
</style>
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="3.9185501"
inkscape:cx="8.571662"
inkscape:cy="52.612298"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
inkscape:window-width="1827"
inkscape:window-height="1051"
inkscape:window-x="84"
inkscape:window-y="-9"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,0)">
<rect
style="fill:#ff9900;fill-opacity:1"
id="rect3364"
width="130"
height="55"
x="0"
y="0" />
<text
x="125"
y="50"
text-anchor="end"
font-size="35"
font-family="lcars"
fill="#000000"
id="text11">Status</text>
</g>
</svg>
</pre>

Die Einbindung in der fhem.cfg:

<pre>
#Menü definieren
#Class für den Link auf SVG setzen, um auf gesamtes SVG-Bild klicken zu können
#SVG-Class dafür in der CSS-Datei definieren
define Menue_Status weblink htmlCode {'<a class="svg" href="/fhem/floorplan/LCARS_STATUS"><object data="/fhem/icons/lcars/menue_status.svg" type="image/svg+xml"></object></a>'}
attr Menue_Status fp_LCARS_EG 160,10,0,
attr Menue_Status fp_LCARS_GARTEN 160,10,0,
attr Menue_Status fp_LCARS_OG 160,10,0,
attr Menue_Status fp_LCARS_STATUS 160,10,0,

define Menue_EG weblink htmlCode {'<a class="svg" href="/fhem/floorplan/LCARS_EG"><object data="/fhem/icons/lcars/menue_EG.svg" type="image/svg+xml"></object></a>' }
attr Menue_EG fp_LCARS_EG 225,10,0,
attr Menue_EG fp_LCARS_GARTEN 225,10,0,
attr Menue_EG fp_LCARS_OG 225,10,0,
attr Menue_EG fp_LCARS_STATUS 225,10,0,

define Menue_OG weblink htmlCode {'<a class="svg" href="/fhem/floorplan/LCARS_OG"><object data="/fhem/icons/lcars/menue_OG.svg" type="image/svg+xml"></object></a>' }
attr Menue_OG fp_LCARS_EG 290,10,0,
attr Menue_OG fp_LCARS_GARTEN 290,10,0,
attr Menue_OG fp_LCARS_OG 290,10,0,
attr Menue_OG fp_LCARS_STATUS 290,10,0,

define Menue_Garten weblink htmlCode {'<a class="svg" href="/fhem/floorplan/LCARS_GARTEN"><object data="/fhem/icons/lcars/menue_Garten.svg" type="image/svg+xml"></object></a>' }
attr Menue_Garten fp_LCARS_EG 355,10,0,
attr Menue_Garten fp_LCARS_GARTEN 355,10,0,
attr Menue_Garten fp_LCARS_OG 355,10,0,
attr Menue_Garten fp_LCARS_STATUS 355,10,0,
</pre>

Der erforderliche Eintrag in der CSS-Datei

<pre>
/*LCARS: SVG definieren, um auf das gesamte Bild klicken zu können*/
a.svg {
position: relative;
display: inline-block;
}
a.svg:after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left:0;
}
</pre>
Nach einem SET WEB rereadicons ist die Navigation zwischen den einzelnen Floorplänen möglich.

== Schalter für die Beleuchtung ==
Für die Integration der Buttons der Schalter sind folgende Anpassungen erforderlich:

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>
/*LCARS-Schriftart clientunabhängig verfügbar machen
Wird in SVG-Texten nochmal separat definiert, sobald die SVG im Tag
z.b. IMG oder OBJECT verwendet wird.
*/
@font-face {
font-family: 'lcars';
src: url('/fhem/images/default/lcarsgtj3-webfont.eot');
src: url('/fhem/images/default/lcarsgtj3-webfont.eot?#iefix') format('embedded-opentype'),
url('/fhem/images/default/lcarsgtj3-webfont.woff') format('woff'),
url('/fhem/images/default/lcarsgtj3-webfont.ttf') format('truetype'),
url('/fhem/images/default/lcarsgtj3-webfont.svg#lcarsgtj3lcarsgtj3') format('svg');
font-weight: normal;
font-style: normal;
}
/*LCARS: Höhe und Breite der Schalter definieren
der Name svg.xxx ergibt sich, durch die Definition "devStateIcon off:switch_off on:switch_on:off"
in der fhem.cfg zum jeweiligen Device
*/
svg.switch_off { height:55px; width:130px; fill:#ffffff; vertical-align:middle; margin:0 0; }
svg.switch_on { 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; }
</pre>

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

<pre>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>


<svg classname="switch"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
width="130"
height="55"
viewBox="0 0 130 55"
id="svg2">
<defs
id="defs4" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
id="layer1"
>
<path
style="fill:#00ff00;fill-opacity:1"
id="path3360"
d="m 102,0 a 27.4,27.5 0 0 1 27.6,27.6 27.6,27.6 0 0 1 -27.5,27.5 l 0,-27.5 z" />
<rect
style="fill:#00ff00;fill-opacity:1"
id="rect3362"
width="37.5"
x="65"
y="0"
height="55" />
<text
x="60"
y="50"
text-anchor="end"
font-size="45"
font-family="lcars"
fill="#ff9900"
id="text11">Aus</text>
</g>
</svg>
</pre>

Die Datei fhem/www/images/default/lcars/switch_on.svg:
<pre>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>


<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
id="svg2"
viewBox="0 0 130 55"
height="55"
width="130">
<metadata
id="metadata12">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs4" />
<g
id="layer1">
<path
d="m 102,0 a 27.4,27.5 0 0 1 27.6,27.6 27.6,27.6 0 0 1 -27.5,27.5 l 0,-27.5 z"
id="path3360"
style="fill:#ff001a;fill-opacity:1" />
<rect
height="55"
y="0"
x="65"
width="37.599998"
id="rect3362"
style="fill:#ff001a;fill-opacity:1" />
<text
id="text11"
fill="#ff9900"
font-family="lcars"
font-size="45"
text-anchor="end"
y="50"
x="60">An</text>
</g>
</svg>
</pre>

Zuweisen der SVG-Dateien in der fhem.cfg

<pre>
#Icon-Pfad setzen
define WEB FHEMWEB 8083 global
[...]
attr WEB iconPath default:default/lcars

Schalter Lamp1
define HMW_LC_Sw2_DR_LEQ0116953_03 HM485 0000B84F_03
attr HMW_LC_Sw2_DR_LEQ0116953_03 alias kue_lampe_1
attr HMW_LC_Sw2_DR_LEQ0116953_03 devStateIcon off:switch_off on:switch_on:off
attr HMW_LC_Sw2_DR_LEQ0116953_03 firmwareVersion 3.06
attr HMW_LC_Sw2_DR_LEQ0116953_03 fp_LCARS_EG 230,1500,0,
attr HMW_LC_Sw2_DR_LEQ0116953_03 model HMW_LC_Sw2_DR
attr HMW_LC_Sw2_DR_LEQ0116953_03 room hidden
attr HMW_LC_Sw2_DR_LEQ0116953_03 serialNr LEQ0116953
attr HMW_LC_Sw2_DR_LEQ0116953_03 subType switch
#Schlater Lamp2
define HMW_LC_Sw2_DR_LEQ0116953_04 HM485 0000B84F_04
attr HMW_LC_Sw2_DR_LEQ0116953_04 alias kue_lampe_2
attr HMW_LC_Sw2_DR_LEQ0116953_04 devStateIcon off:switch_off:on on:switch_on:off
attr HMW_LC_Sw2_DR_LEQ0116953_04 firmwareVersion 3.06
attr HMW_LC_Sw2_DR_LEQ0116953_04 fp_LCARS_EG 295,1500,0,
attr HMW_LC_Sw2_DR_LEQ0116953_04 model HMW_LC_Sw2_DR
attr HMW_LC_Sw2_DR_LEQ0116953_04 room hidden
attr HMW_LC_Sw2_DR_LEQ0116953_04 serialNr LEQ0116953
attr HMW_LC_Sw2_DR_LEQ0116953_04 subType switch
</pre>

Nach einem SET WEB rereadicons lassen sich die Schalter bedienen.

== Label und Rahmen ==
Damit man nun weiß, was man schaltet und auch der Style stimmt, können noch folgenden Anpassungen vorgenommen werden

Datei: fhem/www/images/default/lcars/corner1_BL.svg
<pre>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>


<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="60"
height="30"
viewBox="0 0 60.000001 30"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
shape-rendering="crispEdges"
sodipodi:docname="corner1_BL.svg">
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="8.9190361"
inkscape:cx="25.358648"
inkscape:cy="22.580645"
inkscape:document-units="px"
inkscape:current-layer="svg2"
showgrid="false"
units="px"
inkscape:window-width="1827"
inkscape:window-height="1051"
inkscape:window-x="84"
inkscape:window-y="-9"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1"
transform="matrix(1,0,0,-1,0,1052.3621)">
<rect
style="fill:#cd6566;fill-opacity:1"
id="rect4138"
width="30"
height="30"
x="30"
y="1022.3621" />
<rect
style="fill:#000000;fill-opacity:1"
id="rect4136"
width="10"
height="25"
x="50"
y="1027.3621" />
<path
style="fill:#cd6566;fill-opacity:1"
id="path4142"
sodipodi:type="arc"
sodipodi:cx="-1052.3621"
sodipodi:cy="-31"
sodipodi:rx="30"
sodipodi:ry="31"
sodipodi:start="0"
sodipodi:end="1.5707963"
d="m -1022.3621,-31 a 30,31 0 0 1 -30,31 l 0,-31 z"
transform="matrix(0,-1,-1,0,0,0)" />
<path
style="fill:#000000;fill-opacity:1"
id="path4142-4"
sodipodi:type="arc"
sodipodi:cx="-1037.3621"
sodipodi:cy="-50"
sodipodi:rx="10"
sodipodi:ry="10"
sodipodi:start="0"
sodipodi:end="1.5707963"
d="m -1027.3621,-50 a 10,10 0 0 1 -10,10 l 0,-10 z"
transform="matrix(0,-1,-1,0,0,0)" />
<rect
style="fill:#000000;fill-opacity:1"
id="rect4136-7"
width="10"
height="15.357702"
x="40"
y="1037.0044" />
</g>
</svg>
</pre>

Datei: fhem/www/images/default/lcars/corner1_BR.svg
<pre>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>


<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="60"
height="30"
viewBox="0 0 60.000001 30"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
shape-rendering="crispEdges"
sodipodi:docname="corner1_BR.svg">
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="8.9190361"
inkscape:cx="25.358648"
inkscape:cy="22.580645"
inkscape:document-units="px"
inkscape:current-layer="svg2"
showgrid="false"
units="px"
inkscape:window-width="1827"
inkscape:window-height="1051"
inkscape:window-x="84"
inkscape:window-y="-9"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1"
transform="matrix(-1,0,0,-1,59.999991,1052.3621)">
<rect
style="fill:#cd6566;fill-opacity:1"
id="rect4138"
width="30"
height="30"
x="30"
y="1022.3621" />
<rect
style="fill:#000000;fill-opacity:1"
id="rect4136"
width="10"
height="25"
x="50"
y="1027.3621" />
<path
style="fill:#cd6566;fill-opacity:1"
id="path4142"
sodipodi:type="arc"
sodipodi:cx="-1052.3621"
sodipodi:cy="-31"
sodipodi:rx="30"
sodipodi:ry="31"
sodipodi:start="0"
sodipodi:end="1.5707963"
d="m -1022.3621,-31 a 30,31 0 0 1 -30,31 l 0,-31 z"
transform="matrix(0,-1,-1,0,0,0)" />
<path
style="fill:#000000;fill-opacity:1"
id="path4142-4"
sodipodi:type="arc"
sodipodi:cx="-1037.3621"
sodipodi:cy="-50"
sodipodi:rx="10"
sodipodi:ry="10"
sodipodi:start="0"
sodipodi:end="1.5707963"
d="m -1027.3621,-50 a 10,10 0 0 1 -10,10 l 0,-10 z"
transform="matrix(0,-1,-1,0,0,0)" />
<rect
style="fill:#000000;fill-opacity:1"
id="rect4136-7"
width="10"
height="15.357702"
x="40"
y="1037.0044" />
</g>
</svg>
</pre>

Datei: fhem/www/images/default/lcars/corner1_TL.svg
<pre>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>


<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="60"
height="30"
viewBox="0 0 60.000001 30"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
shape-rendering="crispEdges"
sodipodi:docname="corner1_TL.svg">
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="8.9190361"
inkscape:cx="36.290323"
inkscape:cy="22.580645"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
inkscape:window-width="1827"
inkscape:window-height="1051"
inkscape:window-x="84"
inkscape:window-y="-9"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-1022.3621)">
<rect
style="fill:#cd6566;fill-opacity:1"
id="rect4138"
width="30"
height="30"
x="30"
y="1022.3621" />
<rect
style="fill:#000000;fill-opacity:1"
id="rect4136"
width="10"
height="25"
x="50"
y="1027.3621" />
<path
style="fill:#cd6566;fill-opacity:1"
id="path4142"
sodipodi:type="arc"
sodipodi:cx="-1052.3621"
sodipodi:cy="-31"
sodipodi:rx="30"
sodipodi:ry="31"
sodipodi:start="0"
sodipodi:end="1.5707963"
d="m -1022.3621,-31 a 30,31 0 0 1 -30,31 l 0,-31 z"
transform="matrix(0,-1,-1,0,0,0)" />
<path
style="fill:#000000;fill-opacity:1"
id="path4142-4"
sodipodi:type="arc"
sodipodi:cx="-1037.3621"
sodipodi:cy="-50"
sodipodi:rx="10"
sodipodi:ry="10"
sodipodi:start="0"
sodipodi:end="1.5707963"
d="m -1027.3621,-50 a 10,10 0 0 1 -10,10 l 0,-10 z"
transform="matrix(0,-1,-1,0,0,0)" />
<rect
style="fill:#000000;fill-opacity:1"
id="rect4136-7"
width="10"
height="15.357702"
x="40"
y="1037.0044" />
</g>
</svg>
</pre>

Datei: fhem/www/images/default/lcars/corner1_TR.svg
<pre>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>


<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="60"
height="30"
viewBox="0 0 60.000001 30"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
shape-rendering="crispEdges"
sodipodi:docname="corner1_TR.svg">
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="8.9190361"
inkscape:cx="25.358648"
inkscape:cy="22.580645"
inkscape:document-units="px"
inkscape:current-layer="svg2"
showgrid="false"
units="px"
inkscape:window-width="1827"
inkscape:window-height="1051"
inkscape:window-x="84"
inkscape:window-y="-9"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1"
transform="matrix(-1,0,0,1,59.999991,-1022.3621)">
<rect
style="fill:#cd6566;fill-opacity:1"
id="rect4138"
width="30"
height="30"
x="30"
y="1022.3621" />
<rect
style="fill:#000000;fill-opacity:1"
id="rect4136"
width="10"
height="25"
x="50"
y="1027.3621" />
<path
style="fill:#cd6566;fill-opacity:1"
id="path4142"
sodipodi:type="arc"
sodipodi:cx="-1052.3621"
sodipodi:cy="-31"
sodipodi:rx="30"
sodipodi:ry="31"
sodipodi:start="0"
sodipodi:end="1.5707963"
d="m -1022.3621,-31 a 30,31 0 0 1 -30,31 l 0,-31 z"
transform="matrix(0,-1,-1,0,0,0)" />
<path
style="fill:#000000;fill-opacity:1"
id="path4142-4"
sodipodi:type="arc"
sodipodi:cx="-1037.3621"
sodipodi:cy="-50"
sodipodi:rx="10"
sodipodi:ry="10"
sodipodi:start="0"
sodipodi:end="1.5707963"
d="m -1027.3621,-50 a 10,10 0 0 1 -10,10 l 0,-10 z"
transform="matrix(0,-1,-1,0,0,0)" />
<rect
style="fill:#000000;fill-opacity:1"
id="rect4136-7"
width="10"
height="15.357702"
x="40"
y="1037.0044" />
</g>
</svg>
</pre>

Datei: fhem/www/images/default/lcars/lbl_switch_kueche1.svg
<pre>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>


<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="260"
height="55"
viewBox="0 0 260 55.000001"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="lbl_switch_kueche1.svg">
<style
type="text/css"
id="style3">
@font-face {
font-family: 'lcars';
src: url('/fhem/images/default/lcars/lcarsgtj3-webfont.eot');
src: url('/fhem/images/default/lcars/lcarsgtj3-webfont.eot?#iefix') format('embedded-opentype'),
url('/fhem/images/default/lcars/lcarsgtj3-webfont.woff') format('woff'),
url('/fhem/images/default/lcars/lcarsgtj3-webfont.ttf') format('truetype'),
url('/fhem/images/default/lcars/lcarsgtj3-webfont.svg#lcarsgtj3lcarsgtj3') format('svg');
font-weight: normal;
font-style: normal;}
</style>
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="3.9185501"
inkscape:cx="133.4632"
inkscape:cy="52.4847"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
inkscape:window-width="1827"
inkscape:window-height="1051"
inkscape:window-x="84"
inkscape:window-y="-9"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1">
<rect
style="fill:#ffcc9a;fill-opacity:1"
id="rect3364"
width="260"
height="55"
x="0"
y="0" />
<text
x="255.354"
y="49.50441"
font-size="35"
id="text11"
style="font-size:35px;font-family:lcars;text-anchor:end;fill:#000000">Küche - Glasbodenleuchte</text>
</g>
</svg>
</pre>
Datei: fhem/www/images/default/lcars/lbl_switch_kueche2.svg
<pre>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>


<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="260"
height="55"
viewBox="0 0 260 55.000001"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="lbl_switch_kueche1.svg">
<style
type="text/css"
id="style3">
@font-face {
font-family: 'lcars';
src: url('/fhem/images/default/lcars/lcarsgtj3-webfont.eot');
src: url('/fhem/images/default/lcars/lcarsgtj3-webfont.eot?#iefix') format('embedded-opentype'),
url('/fhem/images/default/lcars/lcarsgtj3-webfont.woff') format('woff'),
url('/fhem/images/default/lcars/lcarsgtj3-webfont.ttf') format('truetype'),
url('/fhem/images/default/lcars/lcarsgtj3-webfont.svg#lcarsgtj3lcarsgtj3') format('svg');
font-weight: normal;
font-style: normal;}
</style>
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="3.9185501"
inkscape:cx="133.4632"
inkscape:cy="52.4847"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
inkscape:window-width="1827"
inkscape:window-height="1051"
inkscape:window-x="84"
inkscape:window-y="-9"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1">
<rect
style="fill:#ffcc9a;fill-opacity:1"
id="rect3364"
width="260"
height="55"
x="0"
y="0" />
<text
x="255.354"
y="49.50441"
font-size="35"
id="text11"
style="font-size:35px;font-family:lcars;text-anchor:end;fill:#000000">Küche - Deckenleuchte</text>
</g>
</svg>
</pre>
Datei: fhem/www/images/default/lcars/headline_switches.svg
<pre>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>


<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="205"
height="35"
viewBox="0 0 205 35"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="headline_switches.svg">
<style
type="text/css"
id="style3">
@font-face {
font-family: 'lcars';
src: url('/fhem/images/default/lcars/lcarsgtj3-webfont.eot');
src: url('/fhem/images/default/lcars/lcarsgtj3-webfont.eot?#iefix') format('embedded-opentype'),
url('/fhem/images/default/lcars/lcarsgtj3-webfont.woff') format('woff'),
url('/fhem/images/default/lcars/lcarsgtj3-webfont.ttf') format('truetype'),
url('/fhem/images/default/lcars/lcarsgtj3-webfont.svg#lcarsgtj3lcarsgtj3') format('svg');
font-weight: normal;
font-style: normal;}
</style>
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="3.9185501"
inkscape:cx="62.84951"
inkscape:cy="52.357102"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
inkscape:window-width="1827"
inkscape:window-height="1051"
inkscape:window-x="84"
inkscape:window-y="-9"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,0)">
<text
x="205"
y="35"
font-size="35"
id="text11"
style="font-size:35px;font-family:lcars;text-anchor:end;fill:#ff9900">Beleuchtung</text>
</g>
</svg>
</pre>
Datei: fhem/www/images/default/lcars/line1.svg
<pre>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>


<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="40"
height="350"
viewBox="0 0 40 350"
id="svg4138"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="line1.svg"
style="shape-rendering:crispEdges">
<defs
id="defs4140" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="2.5797414"
inkscape:cx="40"
inkscape:cy="257.91145"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
inkscape:window-width="1827"
inkscape:window-height="1051"
inkscape:window-x="84"
inkscape:window-y="-9"
inkscape:window-maximized="1" />
<metadata
id="metadata4143">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-702.36216)">
<rect
style="fill:#cf98cf;fill-opacity:1"
id="rect4686"
width="40"
height="350"
x="0"
y="702.36224" />
</g>
</svg>
</pre>
Datei: fhem/www/images/default/lcars/line2.svg
<pre>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>


<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="500"
height="5"
viewBox="0 0 500 5"
id="svg4138"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="line2.svg"
style="shape-rendering:crispEdges">
<defs
id="defs4140" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="2.6533333"
inkscape:cx="155.43478"
inkscape:cy="33.152174"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
inkscape:window-width="1827"
inkscape:window-height="1051"
inkscape:window-x="84"
inkscape:window-y="-9"
inkscape:window-maximized="1" />
<metadata
id="metadata4143">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-1047.3622)">
<rect
style="fill:#cd6566;fill-opacity:1"
id="rect4686"
width="500"
height="5"
x="0"
y="1047.3622" />
</g>
</svg>
</pre>

Die Einträge in der fhem.cfg
<pre>
#---Rahmen Elemente
define corner1_tl weblink htmlCode {'<object data="/fhem/icons/lcars/corner1_TL.svg" type="image/svg+xml"></object>' }
attr corner1_tl fp_LCARS_EG 200,1200,0,
define corner1_bl weblink htmlCode {'<object data="/fhem/icons/lcars/corner1_BL.svg" type="image/svg+xml"></object>' }
attr corner1_bl fp_LCARS_EG 590,1200,0,
define corner1_tr weblink htmlCode {'<object data="/fhem/icons/lcars/corner1_TR.svg" type="image/svg+xml"></object>' }
attr corner1_tr fp_LCARS_EG 200,1700,0,
define corner1_br weblink htmlCode {'<object data="/fhem/icons/lcars/corner1_BR.svg" type="image/svg+xml"></object>' }
attr corner1_br fp_LCARS_EG 590,1700,0,
define line1_l weblink htmlCode {'<object data="/fhem/icons/lcars/line1.svg" type="image/svg+xml"></object>' }
attr line1_l fp_LCARS_EG 235,1200,0,
define line2_b weblink htmlCode {'<object data="/fhem/icons/lcars/line2.svg" type="image/svg+xml"></object>' }
attr line2_b fp_LCARS_EG 601,1230,0,
define headline_switches weblink htmlCode {'<object data="/fhem/icons/lcars/headline_switches.svg" type="image/svg+xml"></object>' }
attr headline_switches fp_LCARS_EG 183,1481,0,

#Label
define lbl_switch_kueche1 weblink htmlCode {'<object data="/fhem/icons/lcars/lbl_switch_kueche1.svg" type="image/svg+xml"></object>' }
attr lbl_switch_kueche1 fp_LCARS_EG 230,1250,0,
define lbl_switch_kueche2 weblink htmlCode {'<object data="/fhem/icons/lcars/lbl_switch_kueche2.svg" type="image/svg+xml"></object>' }
attr lbl_switch_kueche2 fp_LCARS_EG 295,1250,0,
</pre>

Nach einem SET WEB rereadicons sind nun Labels und Rahmen sichtbar.

Die Grundlagen sind da, die Floorpläne können nun an eigenen Bedürfnisse angepasst werden.
[[Kategorie:HOWTOS]]

Datei:Lcars all.jpg

2016-02-19T08:29:58Z

Msfox:

Floorplan im LCARS Design

2015-05-28T20:41:48Z

Msfox: /* Anlegen der Floorpläne */

In diesem Wiki geht es um die Erstellung eines [[FLOORPLAN|Floorplans]] im '''LCARS Design''', siehe [https://www.google.de/search?q=LCARS&client=opera&hs=3Zm&tbm=isch&tbo=u&source=univ&sa=X&ei=W2czVcmtKIOksAGp0oCICA&ved=0CCEQsAQ&biw=1920&bih=971/ LCARS Beispiele].

Es gibt auf Fhem.de einen [http://fhem.de/forum_22336.jpg Screenshot] eines Floorplans im LCARS Design.

In {{Link2Forum|Topic=22336|Message=180850|LinkText=diesem Forenbeitrag}} tauchte obiges Design erstmals auf, entwickelt wurde es von Forenbenutzer {{Link2FU|4194|Tion}}.

== 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:
<pre>
#Floorpläne
define LCARS_STATUS FLOORPLAN
attr LCARS_STATUS fp_noMenu 1
attr LCARS_STATUS stylesheet floorplanstyle_lcars.css

define LCARS_EG FLOORPLAN
attr LCARS_EG fp_noMenu 1
attr LCARS_EG stylesheet floorplanstyle_lcars.css

define LCARS_OG FLOORPLAN
attr LCARS_OG fp_noMenu 1
attr LCARS_OG stylesheet floorplanstyle_lcars.css

define LCARS_GARTEN FLOORPLAN
attr LCARS_GARTEN fp_noMenu 1
attr LCARS_GARTEN stylesheet floorplanstyle_lcars.css
</pre>

== Einbinden des Hintergrundbildes ==
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:
<pre>
body { background-color:#ffffff;
background-image: url(/fhem/icons/lcars/background.svg);
background-size: 1920px 1080px;
overflow:hidden;
background-position: 0px 0px}
</pre>

Das Hintergrundbild als SVG-Datei:
<pre>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>


<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
id="svg3336"
version="1.1"
inkscape:version="0.91 r13725"
width="100%"
height="100%"
viewBox="0 0 1920 1080"
sodipodi:docname="lcars_background.svg">
<metadata
id="metadata3342">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs3340" />
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1827"
inkscape:window-height="1051"
id="namedview3338"
showgrid="true"
inkscape:zoom="5.5968"
inkscape:cx="80.909091"
inkscape:cy="198.68496"
inkscape:window-x="84"
inkscape:window-y="-9"
inkscape:window-maximized="1"
inkscape:current-layer="svg3336"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
units="px">
<inkscape:grid
type="xygrid"
id="grid3480"
originx="-10"
originy="-979.49657"
spacingx="10"
spacingy="10" />
</sodipodi:namedview>
<rect
style="fill:#000000;fill-opacity:1"
id="rect4573"
width="1920"
height="1080"
x="0"
y="-7.9936058e-015" />
<rect
style="fill:#ff9900;fill-opacity:1"
id="rect3346"
width="1517.7715"
height="35"
x="166.95036"
y="10" />
<rect
style="fill:#ff9900;fill-opacity:1"
id="rect3348"
width="130"
height="50"
x="10"
y="100"
ry="0" />
<path
style="fill:#ff9900;fill-opacity:1"
id="path3369"
sodipodi:type="arc"
sodipodi:cx="100"
sodipodi:cy="100"
sodipodi:rx="90"
sodipodi:ry="90"
sodipodi:start="3.1415927"
sodipodi:end="4.712389"
d="M 10,99.999996 A 90,90 0 0 1 100,10 l 0,90 z" />
<rect
style="fill:#ff9900;fill-opacity:1"
id="rect3371"
width="75"
height="70"
x="99.457542"
y="10" />
<path
style="fill:#000000;fill-opacity:1"
id="path3373"
sodipodi:type="arc"
sodipodi:cx="175.24715"
sodipodi:cy="80"
sodipodi:rx="35"
sodipodi:ry="35"
sodipodi:start="3.1415927"
sodipodi:end="4.712389"
d="M 140.24715,79.999998 A 35,35 0 0 1 175.24715,45 l 0,35 z" />
<rect
style="fill:#ff9900;fill-opacity:1"
id="rect3339"
width="40"
height="20"
x="100"
y="80" />
<rect
style="fill:#ff9900;fill-opacity:1"
id="rect3348-4"
width="130"
height="55"
x="10"
y="160"
ry="0" />
<rect
style="fill:#ff9900;fill-opacity:1"
id="rect3348-48"
width="130"
height="55"
x="10"
y="225"
ry="0" />
<rect
style="fill:#ff9900;fill-opacity:1"
id="rect3348-9"
width="130"
height="55"
x="10"
y="290"
ry="0" />
<rect
style="fill:#ffcc9a;fill-opacity:1"
id="rect3348-9-1"
width="130"
height="55"
x="10"
y="355"
ry="0" />
<rect
style="fill:#ffcc9a;fill-opacity:1"
id="rect3348-9-1-9"
width="130"
height="55"
x="10"
y="420"
ry="0" />
<rect
style="fill:#ffcc9a;fill-opacity:1"
id="rect3348-9-1-6"
width="130"
height="55"
x="10"
y="485"
ry="0" />
<rect
style="fill:#ffcc9a;fill-opacity:1"
id="rect3348-9-1-97"
width="130"
height="55"
x="10"
y="550"
ry="0" />
<rect
style="fill:#9999ff;fill-opacity:1"
id="rect3348-9-1-2"
width="130"
height="55"
x="10"
y="615"
ry="0" />
<rect
style="fill:#9999ff;fill-opacity:1"
id="rect3348-9-1-2-2"
width="130"
height="55"
x="10"
y="680"
ry="0" />
<rect
style="fill:#9999ff;fill-opacity:1"
id="rect3348-9-1-2-2-3"
width="130"
height="55"
x="10"
y="745"
ry="0" />
<path
style="fill:#9999ff;fill-opacity:1"
id="path3369-5"
sodipodi:type="arc"
sodipodi:cx="100"
sodipodi:cy="980"
sodipodi:rx="90"
sodipodi:ry="90"
sodipodi:start="1.5707963"
sodipodi:end="3.1415927"
d="M 100,1070 A 90,90 0 0 1 36.360389,1043.6396 90,90 0 0 1 10,980 l 90,0 z" />
<rect
style="fill:#9999ff;fill-opacity:1"
id="rect3348-9-1-2-2-3-9"
width="130"
height="30"
x="10"
y="950"
ry="0" />
<rect
style="fill:#9999ff;fill-opacity:1"
id="rect3348-9-1-2-2-3-2"
width="130"
height="60"
x="10"
y="880"
ry="0" />
<rect
style="fill:#9999ff;fill-opacity:1"
id="rect3348-9-1-2-2-3-5"
width="130"
height="10"
x="10.000006"
y="870"
ry="0" />
<path
style="fill:#9999ff;fill-opacity:1"
id="path4297"
sodipodi:type="arc"
sodipodi:cx="40"
sodipodi:cy="800"
sodipodi:rx="30"
sodipodi:ry="29.999998"
sodipodi:start="1.5707963"
sodipodi:end="3.1415927"
d="M 40.000001,830 A 30,29.999998 0 0 1 18.786796,821.2132 30,29.999998 0 0 1 10,800 l 30,0 z" />
<path
style="fill:#9999ff;fill-opacity:1"
id="path4297-6"
sodipodi:type="arc"
sodipodi:cx="40"
sodipodi:cy="870"
sodipodi:rx="30"
sodipodi:ry="29.999998"
sodipodi:start="3.1415927"
sodipodi:end="4.712389"
d="M 10,870 A 30,29.999998 0 0 1 40.000001,840 L 40,870 Z" />
<rect
style="fill:#9999ff;fill-opacity:1"
id="rect4314"
width="100"
height="30"
x="40"
y="840" />
<rect
style="fill:#9999ff;fill-opacity:1"
id="rect4314-4"
width="100"
height="30"
x="40"
y="800" />
<rect
style="fill:#9999ff;fill-opacity:1"
id="rect4314-4-9"
width="15"
height="25"
x="140"
y="805" />
<path
style="fill:#000000;fill-opacity:1"
id="path4331"
sodipodi:type="arc"
sodipodi:cx="155"
sodipodi:cy="804.56854"
sodipodi:rx="15"
sodipodi:ry="15"
sodipodi:start="1.5707963"
sodipodi:end="3.1415927"
d="M 155,819.56854 A 15,15 0 0 1 144.3934,815.17514 15,15 0 0 1 140,804.56854 l 15,0 z" />
<rect
style="fill:#9999ff;fill-opacity:1"
id="rect4314-4-9-2"
width="15"
height="25"
x="140"
y="840" />
<path
style="fill:#000000;fill-opacity:1"
id="path4331-9"
sodipodi:type="arc"
sodipodi:cx="155"
sodipodi:cy="-865"
sodipodi:rx="15"
sodipodi:ry="15"
sodipodi:start="1.5707963"
sodipodi:end="3.1415927"
d="M 155,-850 A 15,15 0 0 1 144.3934,-854.3934 15,15 0 0 1 140,-865 l 15,0 z"
transform="scale(1,-1)" />
<rect
style="fill:#9999ff;fill-opacity:1"
id="rect4378"
width="30"
height="10"
x="155"
y="840" />
<rect
style="fill:#9999ff;fill-opacity:1"
id="rect4378-5"
width="30"
height="10"
x="155"
y="820" />
<rect
style="fill:#9999ff;fill-opacity:1"
id="rect3371-5"
width="75"
height="70"
x="100"
y="1000" />
<path
style="fill:#000000;fill-opacity:1"
id="path3373-4"
sodipodi:type="arc"
sodipodi:cx="175"
sodipodi:cy="-1000"
sodipodi:rx="35"
sodipodi:ry="35"
sodipodi:start="3.1415927"
sodipodi:end="4.712389"
d="m 140,-1000 a 35,35 0 0 1 35,-35 l 0,35 z"
transform="scale(1,-1)" />
<rect
style="fill:#9999ff;fill-opacity:1"
id="rect3346-9"
width="1715"
height="35"
x="175"
y="1035" />
<rect
style="fill:#9999ff;fill-opacity:1"
id="rect3339-2"
width="40"
height="20"
x="100"
y="980" />
<path
style="fill:#9999ff;fill-opacity:1"
id="path4455"
sodipodi:type="arc"
sodipodi:cx="1890"
sodipodi:cy="1052.5"
sodipodi:rx="19.329626"
sodipodi:ry="17.5"
sodipodi:start="4.712389"
sodipodi:end="1.5707963"
d="m 1890,1035 a 19.329626,17.5 0 0 1 19.3296,17.5 A 19.329626,17.5 0 0 1 1890,1070 l 0,-17.5 z" />
<path
style="fill:#ff9900;fill-opacity:1"
id="path4455-5"
sodipodi:type="arc"
sodipodi:cx="1890"
sodipodi:cy="27.5"
sodipodi:rx="19.329626"
sodipodi:ry="17.5"
sodipodi:start="4.712389"
sodipodi:end="1.5707963"
d="M 1890,10 A 19.329626,17.5 0 0 1 1909.3296,27.5 19.329626,17.5 0 0 1 1890,45 l 0,-17.5 z" />
<rect
style="fill:#ff9900;fill-opacity:1"
id="rect4472"
width="30"
height="35"
x="1860"
y="10" />
<path
style="fill:#ff9900;fill-opacity:1"
id="path4474"
sodipodi:type="arc"
sodipodi:cx="1490"
sodipodi:cy="45"
sodipodi:rx="15"
sodipodi:ry="15"
sodipodi:start="0"
sodipodi:end="1.5707963"
d="m 1505,45 a 15,15 0 0 1 -15,15 l 0,-15 z" />
<path
style="fill:#ff9900;fill-opacity:1"
id="path4474-9"
sodipodi:type="arc"
sodipodi:cx="-1115"
sodipodi:cy="45"
sodipodi:rx="15"
sodipodi:ry="15"
sodipodi:start="0"
sodipodi:end="1.5707963"
d="m -1100,45 a 15,15 0 0 1 -15,15 l 0,-15 z"
transform="scale(-1,1)" />
<rect
style="fill:#ff9900;fill-opacity:1"
id="rect4491"
width="375"
height="15"
x="1115"
y="45" />
<rect
style="fill:#ff9900;fill-opacity:1"
id="rect4496"
width="130"
height="30"
x="150"
y="119.49657" />
<rect
style="fill:#ff9900;fill-opacity:1"
id="rect4496-1"
width="130"
height="30"
x="290"
y="120" />
<rect
style="fill:#ff9900;fill-opacity:1"
id="rect4496-7"
width="130"
height="30"
x="430"
y="120" />
<rect
style="fill:#ff9900;fill-opacity:1"
id="rect4496-8"
width="130"
height="30"
x="570"
y="120" />
<rect
style="fill:#ff9900;fill-opacity:1"
id="rect4496-9"
width="130"
height="30"
x="710"
y="120" />
<rect
style="fill:#ff9900;fill-opacity:1"
id="rect4496-5"
width="130"
height="30"
x="850"
y="120" />
<rect
style="fill:#ff9900;fill-opacity:1"
id="rect4496-4"
width="130"
height="30"
x="990"
y="120" />
<rect
style="fill:#ff9900;fill-opacity:1"
id="rect4496-19"
width="130"
height="30"
x="1130"
y="120" />
<rect
style="fill:#ff9900;fill-opacity:1"
id="rect4496-46"
width="130"
height="30"
x="1270"
y="120" />
<rect
style="fill:#ff9900;fill-opacity:1"
id="rect4496-82"
width="130"
height="30"
x="1410"
y="120" />
<rect
style="fill:#ff9900;fill-opacity:1"
id="rect4496-73"
width="130"
height="30"
x="1550"
y="120" />
<rect
style="fill:#ff9900;fill-opacity:1"
id="rect4496-3"
width="130"
height="30"
x="1690"
y="120" />
</svg>
</pre>

Nun noch ein SET WEB rereadicons durchführen und der Floorplan zeigt den Hintergrund im LCARS-Design angezeigt.
== 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:

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
== Das Navigationsmenü ==
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_Garten.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.

<pre>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>


<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="130"
height="55"
viewBox="0 0 130 55.000001"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="switch_off.svg">
<style
type="text/css"
id="style3">
@font-face {
font-family: 'lcars';
src: url('/fhem/images/default/lcars/lcarsgtj3-webfont.eot');
src: url('/fhem/images/default/lcars/lcarsgtj3-webfont.eot?#iefix') format('embedded-opentype'),
url('/fhem/images/default/lcars/lcarsgtj3-webfont.woff') format('woff'),
url('/fhem/images/default/lcars/lcarsgtj3-webfont.ttf') format('truetype'),
url('/fhem/images/default/lcars/lcarsgtj3-webfont.svg#lcarsgtj3lcarsgtj3') format('svg');
font-weight: normal;
font-style: normal;}
</style>
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="3.9185501"
inkscape:cx="8.571662"
inkscape:cy="52.612298"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
inkscape:window-width="1827"
inkscape:window-height="1051"
inkscape:window-x="84"
inkscape:window-y="-9"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,0)">
<rect
style="fill:#ff9900;fill-opacity:1"
id="rect3364"
width="130"
height="55"
x="0"
y="0" />
<text
x="125"
y="50"
text-anchor="end"
font-size="35"
font-family="lcars"
fill="#000000"
id="text11">Status</text>
</g>
</svg>
</pre>

Die Einbindung in der fhem.cfg:

<pre>
#Menü definieren
#Class für den Link auf SVG setzen, um auf gesamtes SVG-Bild klicken zu können
#SVG-Class dafür in der CSS-Datei definieren
define Menue_Status weblink htmlCode {'<a class="svg" href="/fhem/floorplan/LCARS_STATUS"><object data="/fhem/icons/lcars/menue_status.svg" type="image/svg+xml"></object></a>'}
attr Menue_Status fp_LCARS_EG 160,10,0,
attr Menue_Status fp_LCARS_GARTEN 160,10,0,
attr Menue_Status fp_LCARS_OG 160,10,0,
attr Menue_Status fp_LCARS_STATUS 160,10,0,

define Menue_EG weblink htmlCode {'<a class="svg" href="/fhem/floorplan/LCARS_EG"><object data="/fhem/icons/lcars/menue_EG.svg" type="image/svg+xml"></object></a>' }
attr Menue_EG fp_LCARS_EG 225,10,0,
attr Menue_EG fp_LCARS_GARTEN 225,10,0,
attr Menue_EG fp_LCARS_OG 225,10,0,
attr Menue_EG fp_LCARS_STATUS 225,10,0,

define Menue_OG weblink htmlCode {'<a class="svg" href="/fhem/floorplan/LCARS_OG"><object data="/fhem/icons/lcars/menue_OG.svg" type="image/svg+xml"></object></a>' }
attr Menue_OG fp_LCARS_EG 290,10,0,
attr Menue_OG fp_LCARS_GARTEN 290,10,0,
attr Menue_OG fp_LCARS_OG 290,10,0,
attr Menue_OG fp_LCARS_STATUS 290,10,0,

define Menue_Garten weblink htmlCode {'<a class="svg" href="/fhem/floorplan/LCARS_GARTEN"><object data="/fhem/icons/lcars/menue_Garten.svg" type="image/svg+xml"></object></a>' }
attr Menue_Garten fp_LCARS_EG 355,10,0,
attr Menue_Garten fp_LCARS_GARTEN 355,10,0,
attr Menue_Garten fp_LCARS_OG 355,10,0,
attr Menue_Garten fp_LCARS_STATUS 355,10,0,
</pre>

Der erforderliche Eintrag in der CSS-Datei

<pre>
/*LCARS: SVG definieren, um auf das gesamte Bild klicken zu können*/
a.svg {
position: relative;
display: inline-block;
}
a.svg:after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left:0;
}
</pre>
Nach einem SET WEB rereadicons ist die Navigation zwischen den einzelnen Floorplänen möglich.

== Schalter für die Beleuchtung ==
Für die Integration der Buttons der Schalter sind folgende Anpassungen erforderlich:

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>
/*LCARS-Schriftart clientunabhängig verfügbar machen
Wird in SVG-Texten nochmal separat definiert, sobald die SVG im Tag
z.b. IMG oder OBJECT verwendet wird.
*/
@font-face {
font-family: 'lcars';
src: url('/fhem/images/default/lcarsgtj3-webfont.eot');
src: url('/fhem/images/default/lcarsgtj3-webfont.eot?#iefix') format('embedded-opentype'),
url('/fhem/images/default/lcarsgtj3-webfont.woff') format('woff'),
url('/fhem/images/default/lcarsgtj3-webfont.ttf') format('truetype'),
url('/fhem/images/default/lcarsgtj3-webfont.svg#lcarsgtj3lcarsgtj3') format('svg');
font-weight: normal;
font-style: normal;
}
/*LCARS: Höhe und Breite der Schalter definieren
der Name svg.xxx ergibt sich, durch die Definition "devStateIcon off:switch_off on:switch_on:off"
in der fhem.cfg zum jeweiligen Device
*/
svg.switch_off { height:55px; width:130px; fill:#ffffff; vertical-align:middle; margin:0 0; }
svg.switch_on { 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; }
</pre>

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

<pre>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>


<svg classname="switch"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
width="130"
height="55"
viewBox="0 0 130 55"
id="svg2">
<defs
id="defs4" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
id="layer1"
>
<path
style="fill:#00ff00;fill-opacity:1"
id="path3360"
d="m 102,0 a 27.4,27.5 0 0 1 27.6,27.6 27.6,27.6 0 0 1 -27.5,27.5 l 0,-27.5 z" />
<rect
style="fill:#00ff00;fill-opacity:1"
id="rect3362"
width="37.5"
x="65"
y="0"
height="55" />
<text
x="60"
y="50"
text-anchor="end"
font-size="45"
font-family="lcars"
fill="#ff9900"
id="text11">Aus</text>
</g>
</svg>
</pre>

Die Datei fhem/www/images/default/lcars/switch_on.svg:
<pre>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>


<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
id="svg2"
viewBox="0 0 130 55"
height="55"
width="130">
<metadata
id="metadata12">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs4" />
<g
id="layer1">
<path
d="m 102,0 a 27.4,27.5 0 0 1 27.6,27.6 27.6,27.6 0 0 1 -27.5,27.5 l 0,-27.5 z"
id="path3360"
style="fill:#ff001a;fill-opacity:1" />
<rect
height="55"
y="0"
x="65"
width="37.599998"
id="rect3362"
style="fill:#ff001a;fill-opacity:1" />
<text
id="text11"
fill="#ff9900"
font-family="lcars"
font-size="45"
text-anchor="end"
y="50"
x="60">An</text>
</g>
</svg>
</pre>

Zuweisen der SVG-Dateien in der fhem.cfg

<pre>
#Icon-Pfad setzen
define WEB FHEMWEB 8083 global
[...]
attr WEB iconPath default:default/lcars

Schalter Lamp1
define HMW_LC_Sw2_DR_LEQ0116953_03 HM485 0000B84F_03
attr HMW_LC_Sw2_DR_LEQ0116953_03 alias kue_lampe_1
attr HMW_LC_Sw2_DR_LEQ0116953_03 devStateIcon off:switch_off on:switch_on:off
attr HMW_LC_Sw2_DR_LEQ0116953_03 firmwareVersion 3.06
attr HMW_LC_Sw2_DR_LEQ0116953_03 fp_LCARS_EG 230,1500,0,
attr HMW_LC_Sw2_DR_LEQ0116953_03 model HMW_LC_Sw2_DR
attr HMW_LC_Sw2_DR_LEQ0116953_03 room hidden
attr HMW_LC_Sw2_DR_LEQ0116953_03 serialNr LEQ0116953
attr HMW_LC_Sw2_DR_LEQ0116953_03 subType switch
#Schlater Lamp2
define HMW_LC_Sw2_DR_LEQ0116953_04 HM485 0000B84F_04
attr HMW_LC_Sw2_DR_LEQ0116953_04 alias kue_lampe_2
attr HMW_LC_Sw2_DR_LEQ0116953_04 devStateIcon off:switch_off:on on:switch_on:off
attr HMW_LC_Sw2_DR_LEQ0116953_04 firmwareVersion 3.06
attr HMW_LC_Sw2_DR_LEQ0116953_04 fp_LCARS_EG 295,1500,0,
attr HMW_LC_Sw2_DR_LEQ0116953_04 model HMW_LC_Sw2_DR
attr HMW_LC_Sw2_DR_LEQ0116953_04 room hidden
attr HMW_LC_Sw2_DR_LEQ0116953_04 serialNr LEQ0116953
attr HMW_LC_Sw2_DR_LEQ0116953_04 subType switch
</pre>

Nach einem SET WEB rereadicons lassen sich die Schalter bedienen.

== Label und Rahmen ==
Damit man nun weiß, was man schaltet und auch der Style stimmt, können noch folgenden Anpassungen vorgenommen werden

Datei: fhem/www/images/default/lcars/corner1_BL.svg
<pre>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>


<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="60"
height="30"
viewBox="0 0 60.000001 30"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
shape-rendering="crispEdges"
sodipodi:docname="corner1_BL.svg">
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="8.9190361"
inkscape:cx="25.358648"
inkscape:cy="22.580645"
inkscape:document-units="px"
inkscape:current-layer="svg2"
showgrid="false"
units="px"
inkscape:window-width="1827"
inkscape:window-height="1051"
inkscape:window-x="84"
inkscape:window-y="-9"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1"
transform="matrix(1,0,0,-1,0,1052.3621)">
<rect
style="fill:#cd6566;fill-opacity:1"
id="rect4138"
width="30"
height="30"
x="30"
y="1022.3621" />
<rect
style="fill:#000000;fill-opacity:1"
id="rect4136"
width="10"
height="25"
x="50"
y="1027.3621" />
<path
style="fill:#cd6566;fill-opacity:1"
id="path4142"
sodipodi:type="arc"
sodipodi:cx="-1052.3621"
sodipodi:cy="-31"
sodipodi:rx="30"
sodipodi:ry="31"
sodipodi:start="0"
sodipodi:end="1.5707963"
d="m -1022.3621,-31 a 30,31 0 0 1 -30,31 l 0,-31 z"
transform="matrix(0,-1,-1,0,0,0)" />
<path
style="fill:#000000;fill-opacity:1"
id="path4142-4"
sodipodi:type="arc"
sodipodi:cx="-1037.3621"
sodipodi:cy="-50"
sodipodi:rx="10"
sodipodi:ry="10"
sodipodi:start="0"
sodipodi:end="1.5707963"
d="m -1027.3621,-50 a 10,10 0 0 1 -10,10 l 0,-10 z"
transform="matrix(0,-1,-1,0,0,0)" />
<rect
style="fill:#000000;fill-opacity:1"
id="rect4136-7"
width="10"
height="15.357702"
x="40"
y="1037.0044" />
</g>
</svg>
</pre>

Datei: fhem/www/images/default/lcars/corner1_BR.svg
<pre>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>


<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="60"
height="30"
viewBox="0 0 60.000001 30"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
shape-rendering="crispEdges"
sodipodi:docname="corner1_BR.svg">
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="8.9190361"
inkscape:cx="25.358648"
inkscape:cy="22.580645"
inkscape:document-units="px"
inkscape:current-layer="svg2"
showgrid="false"
units="px"
inkscape:window-width="1827"
inkscape:window-height="1051"
inkscape:window-x="84"
inkscape:window-y="-9"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1"
transform="matrix(-1,0,0,-1,59.999991,1052.3621)">
<rect
style="fill:#cd6566;fill-opacity:1"
id="rect4138"
width="30"
height="30"
x="30"
y="1022.3621" />
<rect
style="fill:#000000;fill-opacity:1"
id="rect4136"
width="10"
height="25"
x="50"
y="1027.3621" />
<path
style="fill:#cd6566;fill-opacity:1"
id="path4142"
sodipodi:type="arc"
sodipodi:cx="-1052.3621"
sodipodi:cy="-31"
sodipodi:rx="30"
sodipodi:ry="31"
sodipodi:start="0"
sodipodi:end="1.5707963"
d="m -1022.3621,-31 a 30,31 0 0 1 -30,31 l 0,-31 z"
transform="matrix(0,-1,-1,0,0,0)" />
<path
style="fill:#000000;fill-opacity:1"
id="path4142-4"
sodipodi:type="arc"
sodipodi:cx="-1037.3621"
sodipodi:cy="-50"
sodipodi:rx="10"
sodipodi:ry="10"
sodipodi:start="0"
sodipodi:end="1.5707963"
d="m -1027.3621,-50 a 10,10 0 0 1 -10,10 l 0,-10 z"
transform="matrix(0,-1,-1,0,0,0)" />
<rect
style="fill:#000000;fill-opacity:1"
id="rect4136-7"
width="10"
height="15.357702"
x="40"
y="1037.0044" />
</g>
</svg>
</pre>

Datei: fhem/www/images/default/lcars/corner1_TL.svg
<pre>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>


<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="60"
height="30"
viewBox="0 0 60.000001 30"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
shape-rendering="crispEdges"
sodipodi:docname="corner1_TL.svg">
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="8.9190361"
inkscape:cx="36.290323"
inkscape:cy="22.580645"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
inkscape:window-width="1827"
inkscape:window-height="1051"
inkscape:window-x="84"
inkscape:window-y="-9"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-1022.3621)">
<rect
style="fill:#cd6566;fill-opacity:1"
id="rect4138"
width="30"
height="30"
x="30"
y="1022.3621" />
<rect
style="fill:#000000;fill-opacity:1"
id="rect4136"
width="10"
height="25"
x="50"
y="1027.3621" />
<path
style="fill:#cd6566;fill-opacity:1"
id="path4142"
sodipodi:type="arc"
sodipodi:cx="-1052.3621"
sodipodi:cy="-31"
sodipodi:rx="30"
sodipodi:ry="31"
sodipodi:start="0"
sodipodi:end="1.5707963"
d="m -1022.3621,-31 a 30,31 0 0 1 -30,31 l 0,-31 z"
transform="matrix(0,-1,-1,0,0,0)" />
<path
style="fill:#000000;fill-opacity:1"
id="path4142-4"
sodipodi:type="arc"
sodipodi:cx="-1037.3621"
sodipodi:cy="-50"
sodipodi:rx="10"
sodipodi:ry="10"
sodipodi:start="0"
sodipodi:end="1.5707963"
d="m -1027.3621,-50 a 10,10 0 0 1 -10,10 l 0,-10 z"
transform="matrix(0,-1,-1,0,0,0)" />
<rect
style="fill:#000000;fill-opacity:1"
id="rect4136-7"
width="10"
height="15.357702"
x="40"
y="1037.0044" />
</g>
</svg>
</pre>

Datei: fhem/www/images/default/lcars/corner1_TR.svg
<pre>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>


<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="60"
height="30"
viewBox="0 0 60.000001 30"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
shape-rendering="crispEdges"
sodipodi:docname="corner1_TR.svg">
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="8.9190361"
inkscape:cx="25.358648"
inkscape:cy="22.580645"
inkscape:document-units="px"
inkscape:current-layer="svg2"
showgrid="false"
units="px"
inkscape:window-width="1827"
inkscape:window-height="1051"
inkscape:window-x="84"
inkscape:window-y="-9"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1"
transform="matrix(-1,0,0,1,59.999991,-1022.3621)">
<rect
style="fill:#cd6566;fill-opacity:1"
id="rect4138"
width="30"
height="30"
x="30"
y="1022.3621" />
<rect
style="fill:#000000;fill-opacity:1"
id="rect4136"
width="10"
height="25"
x="50"
y="1027.3621" />
<path
style="fill:#cd6566;fill-opacity:1"
id="path4142"
sodipodi:type="arc"
sodipodi:cx="-1052.3621"
sodipodi:cy="-31"
sodipodi:rx="30"
sodipodi:ry="31"
sodipodi:start="0"
sodipodi:end="1.5707963"
d="m -1022.3621,-31 a 30,31 0 0 1 -30,31 l 0,-31 z"
transform="matrix(0,-1,-1,0,0,0)" />
<path
style="fill:#000000;fill-opacity:1"
id="path4142-4"
sodipodi:type="arc"
sodipodi:cx="-1037.3621"
sodipodi:cy="-50"
sodipodi:rx="10"
sodipodi:ry="10"
sodipodi:start="0"
sodipodi:end="1.5707963"
d="m -1027.3621,-50 a 10,10 0 0 1 -10,10 l 0,-10 z"
transform="matrix(0,-1,-1,0,0,0)" />
<rect
style="fill:#000000;fill-opacity:1"
id="rect4136-7"
width="10"
height="15.357702"
x="40"
y="1037.0044" />
</g>
</svg>
</pre>

Datei: fhem/www/images/default/lcars/lbl_switch_kueche1.svg
<pre>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>


<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="260"
height="55"
viewBox="0 0 260 55.000001"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="lbl_switch_kueche1.svg">
<style
type="text/css"
id="style3">
@font-face {
font-family: 'lcars';
src: url('/fhem/images/default/lcars/lcarsgtj3-webfont.eot');
src: url('/fhem/images/default/lcars/lcarsgtj3-webfont.eot?#iefix') format('embedded-opentype'),
url('/fhem/images/default/lcars/lcarsgtj3-webfont.woff') format('woff'),
url('/fhem/images/default/lcars/lcarsgtj3-webfont.ttf') format('truetype'),
url('/fhem/images/default/lcars/lcarsgtj3-webfont.svg#lcarsgtj3lcarsgtj3') format('svg');
font-weight: normal;
font-style: normal;}
</style>
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="3.9185501"
inkscape:cx="133.4632"
inkscape:cy="52.4847"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
inkscape:window-width="1827"
inkscape:window-height="1051"
inkscape:window-x="84"
inkscape:window-y="-9"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1">
<rect
style="fill:#ffcc9a;fill-opacity:1"
id="rect3364"
width="260"
height="55"
x="0"
y="0" />
<text
x="255.354"
y="49.50441"
font-size="35"
id="text11"
style="font-size:35px;font-family:lcars;text-anchor:end;fill:#000000">Küche - Glasbodenleuchte</text>
</g>
</svg>
</pre>
Datei: fhem/www/images/default/lcars/lbl_switch_kueche2.svg
<pre>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>


<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="260"
height="55"
viewBox="0 0 260 55.000001"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="lbl_switch_kueche1.svg">
<style
type="text/css"
id="style3">
@font-face {
font-family: 'lcars';
src: url('/fhem/images/default/lcars/lcarsgtj3-webfont.eot');
src: url('/fhem/images/default/lcars/lcarsgtj3-webfont.eot?#iefix') format('embedded-opentype'),
url('/fhem/images/default/lcars/lcarsgtj3-webfont.woff') format('woff'),
url('/fhem/images/default/lcars/lcarsgtj3-webfont.ttf') format('truetype'),
url('/fhem/images/default/lcars/lcarsgtj3-webfont.svg#lcarsgtj3lcarsgtj3') format('svg');
font-weight: normal;
font-style: normal;}
</style>
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="3.9185501"
inkscape:cx="133.4632"
inkscape:cy="52.4847"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
inkscape:window-width="1827"
inkscape:window-height="1051"
inkscape:window-x="84"
inkscape:window-y="-9"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1">
<rect
style="fill:#ffcc9a;fill-opacity:1"
id="rect3364"
width="260"
height="55"
x="0"
y="0" />
<text
x="255.354"
y="49.50441"
font-size="35"
id="text11"
style="font-size:35px;font-family:lcars;text-anchor:end;fill:#000000">Küche - Deckenleuchte</text>
</g>
</svg>
</pre>
Datei: fhem/www/images/default/lcars/headline_switches.svg
<pre>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>


<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="205"
height="35"
viewBox="0 0 205 35"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="headline_switches.svg">
<style
type="text/css"
id="style3">
@font-face {
font-family: 'lcars';
src: url('/fhem/images/default/lcars/lcarsgtj3-webfont.eot');
src: url('/fhem/images/default/lcars/lcarsgtj3-webfont.eot?#iefix') format('embedded-opentype'),
url('/fhem/images/default/lcars/lcarsgtj3-webfont.woff') format('woff'),
url('/fhem/images/default/lcars/lcarsgtj3-webfont.ttf') format('truetype'),
url('/fhem/images/default/lcars/lcarsgtj3-webfont.svg#lcarsgtj3lcarsgtj3') format('svg');
font-weight: normal;
font-style: normal;}
</style>
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="3.9185501"
inkscape:cx="62.84951"
inkscape:cy="52.357102"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
inkscape:window-width="1827"
inkscape:window-height="1051"
inkscape:window-x="84"
inkscape:window-y="-9"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,0)">
<text
x="205"
y="35"
font-size="35"
id="text11"
style="font-size:35px;font-family:lcars;text-anchor:end;fill:#ff9900">Beleuchtung</text>
</g>
</svg>
</pre>
Datei: fhem/www/images/default/lcars/line1.svg
<pre>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>


<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="40"
height="350"
viewBox="0 0 40 350"
id="svg4138"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="line1.svg"
style="shape-rendering:crispEdges">
<defs
id="defs4140" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="2.5797414"
inkscape:cx="40"
inkscape:cy="257.91145"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
inkscape:window-width="1827"
inkscape:window-height="1051"
inkscape:window-x="84"
inkscape:window-y="-9"
inkscape:window-maximized="1" />
<metadata
id="metadata4143">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-702.36216)">
<rect
style="fill:#cf98cf;fill-opacity:1"
id="rect4686"
width="40"
height="350"
x="0"
y="702.36224" />
</g>
</svg>
</pre>
Datei: fhem/www/images/default/lcars/line2.svg
<pre>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>


<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="500"
height="5"
viewBox="0 0 500 5"
id="svg4138"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="line2.svg"
style="shape-rendering:crispEdges">
<defs
id="defs4140" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="2.6533333"
inkscape:cx="155.43478"
inkscape:cy="33.152174"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
inkscape:window-width="1827"
inkscape:window-height="1051"
inkscape:window-x="84"
inkscape:window-y="-9"
inkscape:window-maximized="1" />
<metadata
id="metadata4143">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-1047.3622)">
<rect
style="fill:#cd6566;fill-opacity:1"
id="rect4686"
width="500"
height="5"
x="0"
y="1047.3622" />
</g>
</svg>
</pre>

Die Einträge in der fhem.cfg
<pre>
#---Rahmen Elemente
define corner1_tl weblink htmlCode {'<object data="/fhem/icons/lcars/corner1_TL.svg" type="image/svg+xml"></object>' }
attr corner1_tl fp_LCARS_EG 200,1200,0,
define corner1_bl weblink htmlCode {'<object data="/fhem/icons/lcars/corner1_BL.svg" type="image/svg+xml"></object>' }
attr corner1_bl fp_LCARS_EG 590,1200,0,
define corner1_tr weblink htmlCode {'<object data="/fhem/icons/lcars/corner1_TR.svg" type="image/svg+xml"></object>' }
attr corner1_tr fp_LCARS_EG 200,1700,0,
define corner1_br weblink htmlCode {'<object data="/fhem/icons/lcars/corner1_BR.svg" type="image/svg+xml"></object>' }
attr corner1_br fp_LCARS_EG 590,1700,0,
define line1_l weblink htmlCode {'<object data="/fhem/icons/lcars/line1.svg" type="image/svg+xml"></object>' }
attr line1_l fp_LCARS_EG 235,1200,0,
define line2_b weblink htmlCode {'<object data="/fhem/icons/lcars/line2.svg" type="image/svg+xml"></object>' }
attr line2_b fp_LCARS_EG 601,1230,0,
define headline_switches weblink htmlCode {'<object data="/fhem/icons/lcars/headline_switches.svg" type="image/svg+xml"></object>' }
attr headline_switches fp_LCARS_EG 183,1481,0,

#Label
define lbl_switch_kueche1 weblink htmlCode {'<object data="/fhem/icons/lcars/lbl_switch_kueche1.svg" type="image/svg+xml"></object>' }
attr lbl_switch_kueche1 fp_LCARS_EG 230,1250,0,
define lbl_switch_kueche2 weblink htmlCode {'<object data="/fhem/icons/lcars/lbl_switch_kueche2.svg" type="image/svg+xml"></object>' }
attr lbl_switch_kueche2 fp_LCARS_EG 295,1250,0,
</pre>

Nach einem SET WEB rereadicons sind nun Labels und Rahmen sichtbar.

Die Grundlagen sind da, die Floorpläne können nun an eigenen Bedürfnisse angepasst werden.
[[Kategorie:Interfaces]]

Floorplan im LCARS Design

2015-05-28T20:38:09Z

Msfox:

In diesem Wiki geht es um die Erstellung eines [[FLOORPLAN|Floorplans]] im '''LCARS Design''', siehe [https://www.google.de/search?q=LCARS&client=opera&hs=3Zm&tbm=isch&tbo=u&source=univ&sa=X&ei=W2czVcmtKIOksAGp0oCICA&ved=0CCEQsAQ&biw=1920&bih=971/ LCARS Beispiele].

Es gibt auf Fhem.de einen [http://fhem.de/forum_22336.jpg Screenshot] eines Floorplans im LCARS Design.

In {{Link2Forum|Topic=22336|Message=180850|LinkText=diesem Forenbeitrag}} tauchte obiges Design erstmals auf, entwickelt wurde es von Forenbenutzer {{Link2FU|4194|Tion}}.

== Anlegen der Floorpläne ==
In der fhem.cfg wurde die Floorpläne für Status, Erdgeschoss, Obergeschoss und Garten angelegt, welche alle die gleiche CSS-Datei fhem/www/pgm2/floorplanstyle_lcars.css verweisen:
<pre>
#Floorpläne
define LCARS_STATUS FLOORPLAN
attr LCARS_STATUS fp_noMenu 1
attr LCARS_STATUS stylesheet floorplanstyle_lcars.css

define LCARS_EG FLOORPLAN
attr LCARS_EG fp_noMenu 1
attr LCARS_EG stylesheet floorplanstyle_lcars.css

define LCARS_OG FLOORPLAN
attr LCARS_OG fp_noMenu 1
attr LCARS_OG stylesheet floorplanstyle_lcars.css

define LCARS_GARTEN FLOORPLAN
attr LCARS_GARTEN fp_noMenu 1
attr LCARS_GARTEN stylesheet floorplanstyle_lcars.css
</pre>

== Einbinden des Hintergrundbildes ==
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:
<pre>
body { background-color:#ffffff;
background-image: url(/fhem/icons/lcars/background.svg);
background-size: 1920px 1080px;
overflow:hidden;
background-position: 0px 0px}
</pre>

Das Hintergrundbild als SVG-Datei:
<pre>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>


<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
id="svg3336"
version="1.1"
inkscape:version="0.91 r13725"
width="100%"
height="100%"
viewBox="0 0 1920 1080"
sodipodi:docname="lcars_background.svg">
<metadata
id="metadata3342">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs3340" />
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1827"
inkscape:window-height="1051"
id="namedview3338"
showgrid="true"
inkscape:zoom="5.5968"
inkscape:cx="80.909091"
inkscape:cy="198.68496"
inkscape:window-x="84"
inkscape:window-y="-9"
inkscape:window-maximized="1"
inkscape:current-layer="svg3336"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
units="px">
<inkscape:grid
type="xygrid"
id="grid3480"
originx="-10"
originy="-979.49657"
spacingx="10"
spacingy="10" />
</sodipodi:namedview>
<rect
style="fill:#000000;fill-opacity:1"
id="rect4573"
width="1920"
height="1080"
x="0"
y="-7.9936058e-015" />
<rect
style="fill:#ff9900;fill-opacity:1"
id="rect3346"
width="1517.7715"
height="35"
x="166.95036"
y="10" />
<rect
style="fill:#ff9900;fill-opacity:1"
id="rect3348"
width="130"
height="50"
x="10"
y="100"
ry="0" />
<path
style="fill:#ff9900;fill-opacity:1"
id="path3369"
sodipodi:type="arc"
sodipodi:cx="100"
sodipodi:cy="100"
sodipodi:rx="90"
sodipodi:ry="90"
sodipodi:start="3.1415927"
sodipodi:end="4.712389"
d="M 10,99.999996 A 90,90 0 0 1 100,10 l 0,90 z" />
<rect
style="fill:#ff9900;fill-opacity:1"
id="rect3371"
width="75"
height="70"
x="99.457542"
y="10" />
<path
style="fill:#000000;fill-opacity:1"
id="path3373"
sodipodi:type="arc"
sodipodi:cx="175.24715"
sodipodi:cy="80"
sodipodi:rx="35"
sodipodi:ry="35"
sodipodi:start="3.1415927"
sodipodi:end="4.712389"
d="M 140.24715,79.999998 A 35,35 0 0 1 175.24715,45 l 0,35 z" />
<rect
style="fill:#ff9900;fill-opacity:1"
id="rect3339"
width="40"
height="20"
x="100"
y="80" />
<rect
style="fill:#ff9900;fill-opacity:1"
id="rect3348-4"
width="130"
height="55"
x="10"
y="160"
ry="0" />
<rect
style="fill:#ff9900;fill-opacity:1"
id="rect3348-48"
width="130"
height="55"
x="10"
y="225"
ry="0" />
<rect
style="fill:#ff9900;fill-opacity:1"
id="rect3348-9"
width="130"
height="55"
x="10"
y="290"
ry="0" />
<rect
style="fill:#ffcc9a;fill-opacity:1"
id="rect3348-9-1"
width="130"
height="55"
x="10"
y="355"
ry="0" />
<rect
style="fill:#ffcc9a;fill-opacity:1"
id="rect3348-9-1-9"
width="130"
height="55"
x="10"
y="420"
ry="0" />
<rect
style="fill:#ffcc9a;fill-opacity:1"
id="rect3348-9-1-6"
width="130"
height="55"
x="10"
y="485"
ry="0" />
<rect
style="fill:#ffcc9a;fill-opacity:1"
id="rect3348-9-1-97"
width="130"
height="55"
x="10"
y="550"
ry="0" />
<rect
style="fill:#9999ff;fill-opacity:1"
id="rect3348-9-1-2"
width="130"
height="55"
x="10"
y="615"
ry="0" />
<rect
style="fill:#9999ff;fill-opacity:1"
id="rect3348-9-1-2-2"
width="130"
height="55"
x="10"
y="680"
ry="0" />
<rect
style="fill:#9999ff;fill-opacity:1"
id="rect3348-9-1-2-2-3"
width="130"
height="55"
x="10"
y="745"
ry="0" />
<path
style="fill:#9999ff;fill-opacity:1"
id="path3369-5"
sodipodi:type="arc"
sodipodi:cx="100"
sodipodi:cy="980"
sodipodi:rx="90"
sodipodi:ry="90"
sodipodi:start="1.5707963"
sodipodi:end="3.1415927"
d="M 100,1070 A 90,90 0 0 1 36.360389,1043.6396 90,90 0 0 1 10,980 l 90,0 z" />
<rect
style="fill:#9999ff;fill-opacity:1"
id="rect3348-9-1-2-2-3-9"
width="130"
height="30"
x="10"
y="950"
ry="0" />
<rect
style="fill:#9999ff;fill-opacity:1"
id="rect3348-9-1-2-2-3-2"
width="130"
height="60"
x="10"
y="880"
ry="0" />
<rect
style="fill:#9999ff;fill-opacity:1"
id="rect3348-9-1-2-2-3-5"
width="130"
height="10"
x="10.000006"
y="870"
ry="0" />
<path
style="fill:#9999ff;fill-opacity:1"
id="path4297"
sodipodi:type="arc"
sodipodi:cx="40"
sodipodi:cy="800"
sodipodi:rx="30"
sodipodi:ry="29.999998"
sodipodi:start="1.5707963"
sodipodi:end="3.1415927"
d="M 40.000001,830 A 30,29.999998 0 0 1 18.786796,821.2132 30,29.999998 0 0 1 10,800 l 30,0 z" />
<path
style="fill:#9999ff;fill-opacity:1"
id="path4297-6"
sodipodi:type="arc"
sodipodi:cx="40"
sodipodi:cy="870"
sodipodi:rx="30"
sodipodi:ry="29.999998"
sodipodi:start="3.1415927"
sodipodi:end="4.712389"
d="M 10,870 A 30,29.999998 0 0 1 40.000001,840 L 40,870 Z" />
<rect
style="fill:#9999ff;fill-opacity:1"
id="rect4314"
width="100"
height="30"
x="40"
y="840" />
<rect
style="fill:#9999ff;fill-opacity:1"
id="rect4314-4"
width="100"
height="30"
x="40"
y="800" />
<rect
style="fill:#9999ff;fill-opacity:1"
id="rect4314-4-9"
width="15"
height="25"
x="140"
y="805" />
<path
style="fill:#000000;fill-opacity:1"
id="path4331"
sodipodi:type="arc"
sodipodi:cx="155"
sodipodi:cy="804.56854"
sodipodi:rx="15"
sodipodi:ry="15"
sodipodi:start="1.5707963"
sodipodi:end="3.1415927"
d="M 155,819.56854 A 15,15 0 0 1 144.3934,815.17514 15,15 0 0 1 140,804.56854 l 15,0 z" />
<rect
style="fill:#9999ff;fill-opacity:1"
id="rect4314-4-9-2"
width="15"
height="25"
x="140"
y="840" />
<path
style="fill:#000000;fill-opacity:1"
id="path4331-9"
sodipodi:type="arc"
sodipodi:cx="155"
sodipodi:cy="-865"
sodipodi:rx="15"
sodipodi:ry="15"
sodipodi:start="1.5707963"
sodipodi:end="3.1415927"
d="M 155,-850 A 15,15 0 0 1 144.3934,-854.3934 15,15 0 0 1 140,-865 l 15,0 z"
transform="scale(1,-1)" />
<rect
style="fill:#9999ff;fill-opacity:1"
id="rect4378"
width="30"
height="10"
x="155"
y="840" />
<rect
style="fill:#9999ff;fill-opacity:1"
id="rect4378-5"
width="30"
height="10"
x="155"
y="820" />
<rect
style="fill:#9999ff;fill-opacity:1"
id="rect3371-5"
width="75"
height="70"
x="100"
y="1000" />
<path
style="fill:#000000;fill-opacity:1"
id="path3373-4"
sodipodi:type="arc"
sodipodi:cx="175"
sodipodi:cy="-1000"
sodipodi:rx="35"
sodipodi:ry="35"
sodipodi:start="3.1415927"
sodipodi:end="4.712389"
d="m 140,-1000 a 35,35 0 0 1 35,-35 l 0,35 z"
transform="scale(1,-1)" />
<rect
style="fill:#9999ff;fill-opacity:1"
id="rect3346-9"
width="1715"
height="35"
x="175"
y="1035" />
<rect
style="fill:#9999ff;fill-opacity:1"
id="rect3339-2"
width="40"
height="20"
x="100"
y="980" />
<path
style="fill:#9999ff;fill-opacity:1"
id="path4455"
sodipodi:type="arc"
sodipodi:cx="1890"
sodipodi:cy="1052.5"
sodipodi:rx="19.329626"
sodipodi:ry="17.5"
sodipodi:start="4.712389"
sodipodi:end="1.5707963"
d="m 1890,1035 a 19.329626,17.5 0 0 1 19.3296,17.5 A 19.329626,17.5 0 0 1 1890,1070 l 0,-17.5 z" />
<path
style="fill:#ff9900;fill-opacity:1"
id="path4455-5"
sodipodi:type="arc"
sodipodi:cx="1890"
sodipodi:cy="27.5"
sodipodi:rx="19.329626"
sodipodi:ry="17.5"
sodipodi:start="4.712389"
sodipodi:end="1.5707963"
d="M 1890,10 A 19.329626,17.5 0 0 1 1909.3296,27.5 19.329626,17.5 0 0 1 1890,45 l 0,-17.5 z" />
<rect
style="fill:#ff9900;fill-opacity:1"
id="rect4472"
width="30"
height="35"
x="1860"
y="10" />
<path
style="fill:#ff9900;fill-opacity:1"
id="path4474"
sodipodi:type="arc"
sodipodi:cx="1490"
sodipodi:cy="45"
sodipodi:rx="15"
sodipodi:ry="15"
sodipodi:start="0"
sodipodi:end="1.5707963"
d="m 1505,45 a 15,15 0 0 1 -15,15 l 0,-15 z" />
<path
style="fill:#ff9900;fill-opacity:1"
id="path4474-9"
sodipodi:type="arc"
sodipodi:cx="-1115"
sodipodi:cy="45"
sodipodi:rx="15"
sodipodi:ry="15"
sodipodi:start="0"
sodipodi:end="1.5707963"
d="m -1100,45 a 15,15 0 0 1 -15,15 l 0,-15 z"
transform="scale(-1,1)" />
<rect
style="fill:#ff9900;fill-opacity:1"
id="rect4491"
width="375"
height="15"
x="1115"
y="45" />
<rect
style="fill:#ff9900;fill-opacity:1"
id="rect4496"
width="130"
height="30"
x="150"
y="119.49657" />
<rect
style="fill:#ff9900;fill-opacity:1"
id="rect4496-1"
width="130"
height="30"
x="290"
y="120" />
<rect
style="fill:#ff9900;fill-opacity:1"
id="rect4496-7"
width="130"
height="30"
x="430"
y="120" />
<rect
style="fill:#ff9900;fill-opacity:1"
id="rect4496-8"
width="130"
height="30"
x="570"
y="120" />
<rect
style="fill:#ff9900;fill-opacity:1"
id="rect4496-9"
width="130"
height="30"
x="710"
y="120" />
<rect
style="fill:#ff9900;fill-opacity:1"
id="rect4496-5"
width="130"
height="30"
x="850"
y="120" />
<rect
style="fill:#ff9900;fill-opacity:1"
id="rect4496-4"
width="130"
height="30"
x="990"
y="120" />
<rect
style="fill:#ff9900;fill-opacity:1"
id="rect4496-19"
width="130"
height="30"
x="1130"
y="120" />
<rect
style="fill:#ff9900;fill-opacity:1"
id="rect4496-46"
width="130"
height="30"
x="1270"
y="120" />
<rect
style="fill:#ff9900;fill-opacity:1"
id="rect4496-82"
width="130"
height="30"
x="1410"
y="120" />
<rect
style="fill:#ff9900;fill-opacity:1"
id="rect4496-73"
width="130"
height="30"
x="1550"
y="120" />
<rect
style="fill:#ff9900;fill-opacity:1"
id="rect4496-3"
width="130"
height="30"
x="1690"
y="120" />
</svg>
</pre>

Nun noch ein SET WEB rereadicons durchführen und der Floorplan zeigt den Hintergrund im LCARS-Design angezeigt.
== 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:

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
== Das Navigationsmenü ==
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_Garten.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.

<pre>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>


<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="130"
height="55"
viewBox="0 0 130 55.000001"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="switch_off.svg">
<style
type="text/css"
id="style3">
@font-face {
font-family: 'lcars';
src: url('/fhem/images/default/lcars/lcarsgtj3-webfont.eot');
src: url('/fhem/images/default/lcars/lcarsgtj3-webfont.eot?#iefix') format('embedded-opentype'),
url('/fhem/images/default/lcars/lcarsgtj3-webfont.woff') format('woff'),
url('/fhem/images/default/lcars/lcarsgtj3-webfont.ttf') format('truetype'),
url('/fhem/images/default/lcars/lcarsgtj3-webfont.svg#lcarsgtj3lcarsgtj3') format('svg');
font-weight: normal;
font-style: normal;}
</style>
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="3.9185501"
inkscape:cx="8.571662"
inkscape:cy="52.612298"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
inkscape:window-width="1827"
inkscape:window-height="1051"
inkscape:window-x="84"
inkscape:window-y="-9"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,0)">
<rect
style="fill:#ff9900;fill-opacity:1"
id="rect3364"
width="130"
height="55"
x="0"
y="0" />
<text
x="125"
y="50"
text-anchor="end"
font-size="35"
font-family="lcars"
fill="#000000"
id="text11">Status</text>
</g>
</svg>
</pre>

Die Einbindung in der fhem.cfg:

<pre>
#Menü definieren
#Class für den Link auf SVG setzen, um auf gesamtes SVG-Bild klicken zu können
#SVG-Class dafür in der CSS-Datei definieren
define Menue_Status weblink htmlCode {'<a class="svg" href="/fhem/floorplan/LCARS_STATUS"><object data="/fhem/icons/lcars/menue_status.svg" type="image/svg+xml"></object></a>'}
attr Menue_Status fp_LCARS_EG 160,10,0,
attr Menue_Status fp_LCARS_GARTEN 160,10,0,
attr Menue_Status fp_LCARS_OG 160,10,0,
attr Menue_Status fp_LCARS_STATUS 160,10,0,

define Menue_EG weblink htmlCode {'<a class="svg" href="/fhem/floorplan/LCARS_EG"><object data="/fhem/icons/lcars/menue_EG.svg" type="image/svg+xml"></object></a>' }
attr Menue_EG fp_LCARS_EG 225,10,0,
attr Menue_EG fp_LCARS_GARTEN 225,10,0,
attr Menue_EG fp_LCARS_OG 225,10,0,
attr Menue_EG fp_LCARS_STATUS 225,10,0,

define Menue_OG weblink htmlCode {'<a class="svg" href="/fhem/floorplan/LCARS_OG"><object data="/fhem/icons/lcars/menue_OG.svg" type="image/svg+xml"></object></a>' }
attr Menue_OG fp_LCARS_EG 290,10,0,
attr Menue_OG fp_LCARS_GARTEN 290,10,0,
attr Menue_OG fp_LCARS_OG 290,10,0,
attr Menue_OG fp_LCARS_STATUS 290,10,0,

define Menue_Garten weblink htmlCode {'<a class="svg" href="/fhem/floorplan/LCARS_GARTEN"><object data="/fhem/icons/lcars/menue_Garten.svg" type="image/svg+xml"></object></a>' }
attr Menue_Garten fp_LCARS_EG 355,10,0,
attr Menue_Garten fp_LCARS_GARTEN 355,10,0,
attr Menue_Garten fp_LCARS_OG 355,10,0,
attr Menue_Garten fp_LCARS_STATUS 355,10,0,
</pre>

Der erforderliche Eintrag in der CSS-Datei

<pre>
/*LCARS: SVG definieren, um auf das gesamte Bild klicken zu können*/
a.svg {
position: relative;
display: inline-block;
}
a.svg:after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left:0;
}
</pre>
Nach einem SET WEB rereadicons ist die Navigation zwischen den einzelnen Floorplänen möglich.

== Schalter für die Beleuchtung ==
Für die Integration der Buttons der Schalter sind folgende Anpassungen erforderlich:

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>
/*LCARS-Schriftart clientunabhängig verfügbar machen
Wird in SVG-Texten nochmal separat definiert, sobald die SVG im Tag
z.b. IMG oder OBJECT verwendet wird.
*/
@font-face {
font-family: 'lcars';
src: url('/fhem/images/default/lcarsgtj3-webfont.eot');
src: url('/fhem/images/default/lcarsgtj3-webfont.eot?#iefix') format('embedded-opentype'),
url('/fhem/images/default/lcarsgtj3-webfont.woff') format('woff'),
url('/fhem/images/default/lcarsgtj3-webfont.ttf') format('truetype'),
url('/fhem/images/default/lcarsgtj3-webfont.svg#lcarsgtj3lcarsgtj3') format('svg');
font-weight: normal;
font-style: normal;
}
/*LCARS: Höhe und Breite der Schalter definieren
der Name svg.xxx ergibt sich, durch die Definition "devStateIcon off:switch_off on:switch_on:off"
in der fhem.cfg zum jeweiligen Device
*/
svg.switch_off { height:55px; width:130px; fill:#ffffff; vertical-align:middle; margin:0 0; }
svg.switch_on { 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; }
</pre>

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

<pre>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>


<svg classname="switch"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
width="130"
height="55"
viewBox="0 0 130 55"
id="svg2">
<defs
id="defs4" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
id="layer1"
>
<path
style="fill:#00ff00;fill-opacity:1"
id="path3360"
d="m 102,0 a 27.4,27.5 0 0 1 27.6,27.6 27.6,27.6 0 0 1 -27.5,27.5 l 0,-27.5 z" />
<rect
style="fill:#00ff00;fill-opacity:1"
id="rect3362"
width="37.5"
x="65"
y="0"
height="55" />
<text
x="60"
y="50"
text-anchor="end"
font-size="45"
font-family="lcars"
fill="#ff9900"
id="text11">Aus</text>
</g>
</svg>
</pre>

Die Datei fhem/www/images/default/lcars/switch_on.svg:
<pre>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>


<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
id="svg2"
viewBox="0 0 130 55"
height="55"
width="130">
<metadata
id="metadata12">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs4" />
<g
id="layer1">
<path
d="m 102,0 a 27.4,27.5 0 0 1 27.6,27.6 27.6,27.6 0 0 1 -27.5,27.5 l 0,-27.5 z"
id="path3360"
style="fill:#ff001a;fill-opacity:1" />
<rect
height="55"
y="0"
x="65"
width="37.599998"
id="rect3362"
style="fill:#ff001a;fill-opacity:1" />
<text
id="text11"
fill="#ff9900"
font-family="lcars"
font-size="45"
text-anchor="end"
y="50"
x="60">An</text>
</g>
</svg>
</pre>

Zuweisen der SVG-Dateien in der fhem.cfg

<pre>
#Icon-Pfad setzen
define WEB FHEMWEB 8083 global
[...]
attr WEB iconPath default:default/lcars

Schalter Lamp1
define HMW_LC_Sw2_DR_LEQ0116953_03 HM485 0000B84F_03
attr HMW_LC_Sw2_DR_LEQ0116953_03 alias kue_lampe_1
attr HMW_LC_Sw2_DR_LEQ0116953_03 devStateIcon off:switch_off on:switch_on:off
attr HMW_LC_Sw2_DR_LEQ0116953_03 firmwareVersion 3.06
attr HMW_LC_Sw2_DR_LEQ0116953_03 fp_LCARS_EG 230,1500,0,
attr HMW_LC_Sw2_DR_LEQ0116953_03 model HMW_LC_Sw2_DR
attr HMW_LC_Sw2_DR_LEQ0116953_03 room hidden
attr HMW_LC_Sw2_DR_LEQ0116953_03 serialNr LEQ0116953
attr HMW_LC_Sw2_DR_LEQ0116953_03 subType switch
#Schlater Lamp2
define HMW_LC_Sw2_DR_LEQ0116953_04 HM485 0000B84F_04
attr HMW_LC_Sw2_DR_LEQ0116953_04 alias kue_lampe_2
attr HMW_LC_Sw2_DR_LEQ0116953_04 devStateIcon off:switch_off:on on:switch_on:off
attr HMW_LC_Sw2_DR_LEQ0116953_04 firmwareVersion 3.06
attr HMW_LC_Sw2_DR_LEQ0116953_04 fp_LCARS_EG 295,1500,0,
attr HMW_LC_Sw2_DR_LEQ0116953_04 model HMW_LC_Sw2_DR
attr HMW_LC_Sw2_DR_LEQ0116953_04 room hidden
attr HMW_LC_Sw2_DR_LEQ0116953_04 serialNr LEQ0116953
attr HMW_LC_Sw2_DR_LEQ0116953_04 subType switch
</pre>

Nach einem SET WEB rereadicons lassen sich die Schalter bedienen.

== Label und Rahmen ==
Damit man nun weiß, was man schaltet und auch der Style stimmt, können noch folgenden Anpassungen vorgenommen werden

Datei: fhem/www/images/default/lcars/corner1_BL.svg
<pre>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>


<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="60"
height="30"
viewBox="0 0 60.000001 30"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
shape-rendering="crispEdges"
sodipodi:docname="corner1_BL.svg">
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="8.9190361"
inkscape:cx="25.358648"
inkscape:cy="22.580645"
inkscape:document-units="px"
inkscape:current-layer="svg2"
showgrid="false"
units="px"
inkscape:window-width="1827"
inkscape:window-height="1051"
inkscape:window-x="84"
inkscape:window-y="-9"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1"
transform="matrix(1,0,0,-1,0,1052.3621)">
<rect
style="fill:#cd6566;fill-opacity:1"
id="rect4138"
width="30"
height="30"
x="30"
y="1022.3621" />
<rect
style="fill:#000000;fill-opacity:1"
id="rect4136"
width="10"
height="25"
x="50"
y="1027.3621" />
<path
style="fill:#cd6566;fill-opacity:1"
id="path4142"
sodipodi:type="arc"
sodipodi:cx="-1052.3621"
sodipodi:cy="-31"
sodipodi:rx="30"
sodipodi:ry="31"
sodipodi:start="0"
sodipodi:end="1.5707963"
d="m -1022.3621,-31 a 30,31 0 0 1 -30,31 l 0,-31 z"
transform="matrix(0,-1,-1,0,0,0)" />
<path
style="fill:#000000;fill-opacity:1"
id="path4142-4"
sodipodi:type="arc"
sodipodi:cx="-1037.3621"
sodipodi:cy="-50"
sodipodi:rx="10"
sodipodi:ry="10"
sodipodi:start="0"
sodipodi:end="1.5707963"
d="m -1027.3621,-50 a 10,10 0 0 1 -10,10 l 0,-10 z"
transform="matrix(0,-1,-1,0,0,0)" />
<rect
style="fill:#000000;fill-opacity:1"
id="rect4136-7"
width="10"
height="15.357702"
x="40"
y="1037.0044" />
</g>
</svg>
</pre>

Datei: fhem/www/images/default/lcars/corner1_BR.svg
<pre>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>


<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="60"
height="30"
viewBox="0 0 60.000001 30"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
shape-rendering="crispEdges"
sodipodi:docname="corner1_BR.svg">
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="8.9190361"
inkscape:cx="25.358648"
inkscape:cy="22.580645"
inkscape:document-units="px"
inkscape:current-layer="svg2"
showgrid="false"
units="px"
inkscape:window-width="1827"
inkscape:window-height="1051"
inkscape:window-x="84"
inkscape:window-y="-9"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1"
transform="matrix(-1,0,0,-1,59.999991,1052.3621)">
<rect
style="fill:#cd6566;fill-opacity:1"
id="rect4138"
width="30"
height="30"
x="30"
y="1022.3621" />
<rect
style="fill:#000000;fill-opacity:1"
id="rect4136"
width="10"
height="25"
x="50"
y="1027.3621" />
<path
style="fill:#cd6566;fill-opacity:1"
id="path4142"
sodipodi:type="arc"
sodipodi:cx="-1052.3621"
sodipodi:cy="-31"
sodipodi:rx="30"
sodipodi:ry="31"
sodipodi:start="0"
sodipodi:end="1.5707963"
d="m -1022.3621,-31 a 30,31 0 0 1 -30,31 l 0,-31 z"
transform="matrix(0,-1,-1,0,0,0)" />
<path
style="fill:#000000;fill-opacity:1"
id="path4142-4"
sodipodi:type="arc"
sodipodi:cx="-1037.3621"
sodipodi:cy="-50"
sodipodi:rx="10"
sodipodi:ry="10"
sodipodi:start="0"
sodipodi:end="1.5707963"
d="m -1027.3621,-50 a 10,10 0 0 1 -10,10 l 0,-10 z"
transform="matrix(0,-1,-1,0,0,0)" />
<rect
style="fill:#000000;fill-opacity:1"
id="rect4136-7"
width="10"
height="15.357702"
x="40"
y="1037.0044" />
</g>
</svg>
</pre>

Datei: fhem/www/images/default/lcars/corner1_TL.svg
<pre>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>


<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="60"
height="30"
viewBox="0 0 60.000001 30"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
shape-rendering="crispEdges"
sodipodi:docname="corner1_TL.svg">
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="8.9190361"
inkscape:cx="36.290323"
inkscape:cy="22.580645"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
inkscape:window-width="1827"
inkscape:window-height="1051"
inkscape:window-x="84"
inkscape:window-y="-9"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-1022.3621)">
<rect
style="fill:#cd6566;fill-opacity:1"
id="rect4138"
width="30"
height="30"
x="30"
y="1022.3621" />
<rect
style="fill:#000000;fill-opacity:1"
id="rect4136"
width="10"
height="25"
x="50"
y="1027.3621" />
<path
style="fill:#cd6566;fill-opacity:1"
id="path4142"
sodipodi:type="arc"
sodipodi:cx="-1052.3621"
sodipodi:cy="-31"
sodipodi:rx="30"
sodipodi:ry="31"
sodipodi:start="0"
sodipodi:end="1.5707963"
d="m -1022.3621,-31 a 30,31 0 0 1 -30,31 l 0,-31 z"
transform="matrix(0,-1,-1,0,0,0)" />
<path
style="fill:#000000;fill-opacity:1"
id="path4142-4"
sodipodi:type="arc"
sodipodi:cx="-1037.3621"
sodipodi:cy="-50"
sodipodi:rx="10"
sodipodi:ry="10"
sodipodi:start="0"
sodipodi:end="1.5707963"
d="m -1027.3621,-50 a 10,10 0 0 1 -10,10 l 0,-10 z"
transform="matrix(0,-1,-1,0,0,0)" />
<rect
style="fill:#000000;fill-opacity:1"
id="rect4136-7"
width="10"
height="15.357702"
x="40"
y="1037.0044" />
</g>
</svg>
</pre>

Datei: fhem/www/images/default/lcars/corner1_TR.svg
<pre>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>


<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="60"
height="30"
viewBox="0 0 60.000001 30"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
shape-rendering="crispEdges"
sodipodi:docname="corner1_TR.svg">
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="8.9190361"
inkscape:cx="25.358648"
inkscape:cy="22.580645"
inkscape:document-units="px"
inkscape:current-layer="svg2"
showgrid="false"
units="px"
inkscape:window-width="1827"
inkscape:window-height="1051"
inkscape:window-x="84"
inkscape:window-y="-9"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1"
transform="matrix(-1,0,0,1,59.999991,-1022.3621)">
<rect
style="fill:#cd6566;fill-opacity:1"
id="rect4138"
width="30"
height="30"
x="30"
y="1022.3621" />
<rect
style="fill:#000000;fill-opacity:1"
id="rect4136"
width="10"
height="25"
x="50"
y="1027.3621" />
<path
style="fill:#cd6566;fill-opacity:1"
id="path4142"
sodipodi:type="arc"
sodipodi:cx="-1052.3621"
sodipodi:cy="-31"
sodipodi:rx="30"
sodipodi:ry="31"
sodipodi:start="0"
sodipodi:end="1.5707963"
d="m -1022.3621,-31 a 30,31 0 0 1 -30,31 l 0,-31 z"
transform="matrix(0,-1,-1,0,0,0)" />
<path
style="fill:#000000;fill-opacity:1"
id="path4142-4"
sodipodi:type="arc"
sodipodi:cx="-1037.3621"
sodipodi:cy="-50"
sodipodi:rx="10"
sodipodi:ry="10"
sodipodi:start="0"
sodipodi:end="1.5707963"
d="m -1027.3621,-50 a 10,10 0 0 1 -10,10 l 0,-10 z"
transform="matrix(0,-1,-1,0,0,0)" />
<rect
style="fill:#000000;fill-opacity:1"
id="rect4136-7"
width="10"
height="15.357702"
x="40"
y="1037.0044" />
</g>
</svg>
</pre>

Datei: fhem/www/images/default/lcars/lbl_switch_kueche1.svg
<pre>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>


<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="260"
height="55"
viewBox="0 0 260 55.000001"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="lbl_switch_kueche1.svg">
<style
type="text/css"
id="style3">
@font-face {
font-family: 'lcars';
src: url('/fhem/images/default/lcars/lcarsgtj3-webfont.eot');
src: url('/fhem/images/default/lcars/lcarsgtj3-webfont.eot?#iefix') format('embedded-opentype'),
url('/fhem/images/default/lcars/lcarsgtj3-webfont.woff') format('woff'),
url('/fhem/images/default/lcars/lcarsgtj3-webfont.ttf') format('truetype'),
url('/fhem/images/default/lcars/lcarsgtj3-webfont.svg#lcarsgtj3lcarsgtj3') format('svg');
font-weight: normal;
font-style: normal;}
</style>
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="3.9185501"
inkscape:cx="133.4632"
inkscape:cy="52.4847"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
inkscape:window-width="1827"
inkscape:window-height="1051"
inkscape:window-x="84"
inkscape:window-y="-9"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1">
<rect
style="fill:#ffcc9a;fill-opacity:1"
id="rect3364"
width="260"
height="55"
x="0"
y="0" />
<text
x="255.354"
y="49.50441"
font-size="35"
id="text11"
style="font-size:35px;font-family:lcars;text-anchor:end;fill:#000000">Küche - Glasbodenleuchte</text>
</g>
</svg>
</pre>
Datei: fhem/www/images/default/lcars/lbl_switch_kueche2.svg
<pre>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>


<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="260"
height="55"
viewBox="0 0 260 55.000001"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="lbl_switch_kueche1.svg">
<style
type="text/css"
id="style3">
@font-face {
font-family: 'lcars';
src: url('/fhem/images/default/lcars/lcarsgtj3-webfont.eot');
src: url('/fhem/images/default/lcars/lcarsgtj3-webfont.eot?#iefix') format('embedded-opentype'),
url('/fhem/images/default/lcars/lcarsgtj3-webfont.woff') format('woff'),
url('/fhem/images/default/lcars/lcarsgtj3-webfont.ttf') format('truetype'),
url('/fhem/images/default/lcars/lcarsgtj3-webfont.svg#lcarsgtj3lcarsgtj3') format('svg');
font-weight: normal;
font-style: normal;}
</style>
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="3.9185501"
inkscape:cx="133.4632"
inkscape:cy="52.4847"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
inkscape:window-width="1827"
inkscape:window-height="1051"
inkscape:window-x="84"
inkscape:window-y="-9"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1">
<rect
style="fill:#ffcc9a;fill-opacity:1"
id="rect3364"
width="260"
height="55"
x="0"
y="0" />
<text
x="255.354"
y="49.50441"
font-size="35"
id="text11"
style="font-size:35px;font-family:lcars;text-anchor:end;fill:#000000">Küche - Deckenleuchte</text>
</g>
</svg>
</pre>
Datei: fhem/www/images/default/lcars/headline_switches.svg
<pre>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>


<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="205"
height="35"
viewBox="0 0 205 35"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="headline_switches.svg">
<style
type="text/css"
id="style3">
@font-face {
font-family: 'lcars';
src: url('/fhem/images/default/lcars/lcarsgtj3-webfont.eot');
src: url('/fhem/images/default/lcars/lcarsgtj3-webfont.eot?#iefix') format('embedded-opentype'),
url('/fhem/images/default/lcars/lcarsgtj3-webfont.woff') format('woff'),
url('/fhem/images/default/lcars/lcarsgtj3-webfont.ttf') format('truetype'),
url('/fhem/images/default/lcars/lcarsgtj3-webfont.svg#lcarsgtj3lcarsgtj3') format('svg');
font-weight: normal;
font-style: normal;}
</style>
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="3.9185501"
inkscape:cx="62.84951"
inkscape:cy="52.357102"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
inkscape:window-width="1827"
inkscape:window-height="1051"
inkscape:window-x="84"
inkscape:window-y="-9"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,0)">
<text
x="205"
y="35"
font-size="35"
id="text11"
style="font-size:35px;font-family:lcars;text-anchor:end;fill:#ff9900">Beleuchtung</text>
</g>
</svg>
</pre>
Datei: fhem/www/images/default/lcars/line1.svg
<pre>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>


<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="40"
height="350"
viewBox="0 0 40 350"
id="svg4138"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="line1.svg"
style="shape-rendering:crispEdges">
<defs
id="defs4140" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="2.5797414"
inkscape:cx="40"
inkscape:cy="257.91145"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
inkscape:window-width="1827"
inkscape:window-height="1051"
inkscape:window-x="84"
inkscape:window-y="-9"
inkscape:window-maximized="1" />
<metadata
id="metadata4143">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-702.36216)">
<rect
style="fill:#cf98cf;fill-opacity:1"
id="rect4686"
width="40"
height="350"
x="0"
y="702.36224" />
</g>
</svg>
</pre>
Datei: fhem/www/images/default/lcars/line2.svg
<pre>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>


<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="500"
height="5"
viewBox="0 0 500 5"
id="svg4138"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="line2.svg"
style="shape-rendering:crispEdges">
<defs
id="defs4140" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="2.6533333"
inkscape:cx="155.43478"
inkscape:cy="33.152174"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
inkscape:window-width="1827"
inkscape:window-height="1051"
inkscape:window-x="84"
inkscape:window-y="-9"
inkscape:window-maximized="1" />
<metadata
id="metadata4143">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-1047.3622)">
<rect
style="fill:#cd6566;fill-opacity:1"
id="rect4686"
width="500"
height="5"
x="0"
y="1047.3622" />
</g>
</svg>
</pre>

Die Einträge in der fhem.cfg
<pre>
#---Rahmen Elemente
define corner1_tl weblink htmlCode {'<object data="/fhem/icons/lcars/corner1_TL.svg" type="image/svg+xml"></object>' }
attr corner1_tl fp_LCARS_EG 200,1200,0,
define corner1_bl weblink htmlCode {'<object data="/fhem/icons/lcars/corner1_BL.svg" type="image/svg+xml"></object>' }
attr corner1_bl fp_LCARS_EG 590,1200,0,
define corner1_tr weblink htmlCode {'<object data="/fhem/icons/lcars/corner1_TR.svg" type="image/svg+xml"></object>' }
attr corner1_tr fp_LCARS_EG 200,1700,0,
define corner1_br weblink htmlCode {'<object data="/fhem/icons/lcars/corner1_BR.svg" type="image/svg+xml"></object>' }
attr corner1_br fp_LCARS_EG 590,1700,0,
define line1_l weblink htmlCode {'<object data="/fhem/icons/lcars/line1.svg" type="image/svg+xml"></object>' }
attr line1_l fp_LCARS_EG 235,1200,0,
define line2_b weblink htmlCode {'<object data="/fhem/icons/lcars/line2.svg" type="image/svg+xml"></object>' }
attr line2_b fp_LCARS_EG 601,1230,0,
define headline_switches weblink htmlCode {'<object data="/fhem/icons/lcars/headline_switches.svg" type="image/svg+xml"></object>' }
attr headline_switches fp_LCARS_EG 183,1481,0,

#Label
define lbl_switch_kueche1 weblink htmlCode {'<object data="/fhem/icons/lcars/lbl_switch_kueche1.svg" type="image/svg+xml"></object>' }
attr lbl_switch_kueche1 fp_LCARS_EG 230,1250,0,
define lbl_switch_kueche2 weblink htmlCode {'<object data="/fhem/icons/lcars/lbl_switch_kueche2.svg" type="image/svg+xml"></object>' }
attr lbl_switch_kueche2 fp_LCARS_EG 295,1250,0,
</pre>

Nach einem SET WEB rereadicons sind nun Labels und Rahmen sichtbar.

Die Grundlagen sind da, die Floorpläne können nun an eigenen Bedürfnisse angepasst werden.
[[Kategorie:Interfaces]]

Floorplan im LCARS Design

2015-05-28T20:19:36Z

Msfox: /* Das Navigationsmenü */

Floorplan im LCARS Design

2015-05-28T20:18:12Z

Msfox:

Floorplan im LCARS Design

2015-05-28T20:02:35Z

Msfox: /* Das Navigationsmenü */

Floorplan im LCARS Design

2015-05-28T19:53:40Z

Msfox: