Hallo, ich bin auf der suche nach einer Möglichkeit im Floorplan ansprechende große Buttons für schalter zu definieren.
So von der Idee haben ich es mir ähnlich wie dieses Beispiel vorgestellt. http://www.design-xperience.de/images/2014-04-14%2017.51.231.png
Falls jemand einen Tipp hat wie ich das erstellen kann währe ich sehr dankbar.
LG
Das kann man über die entsprechende CSS des verwendeten Styles machen! Schau mal unter edit files und dann die entsprechende CSS Datei editieren und nach Button suchen! Sollte im Default 32x32 Pixel sein!
Hi Mr Rose
hast das Design im Beispiel zufällig Du erstellt ? Gefällt mir sehr gut.
vg
Jörg
leider nein und vom ersteller hier aus dem forum auch noch keine antwort bekommen. Hätte es auch gerne...
Hi,
ah - Danke. Weist Du noch wer der "Ersteller" war ?
Ich arbeite ebenfalls an einem add-on für eine solche Umsetzung - von daher würden mich parallele Ansätze sehr interessieren.
vg
Jörg
Das war der Link wo ich es gefunden habe. http://forum.fhem.de/index.php?topic=22491.0
Deins sieht aber auch sehr nach meinem Geschmack aus. Hättest du da ggf etwas was du mir bereitstellen könntest das ich es für meine zwecke nutzen kann. ? Doppelentwicklungen sind ja immer etwas lästig.
Das hängt maßgeblich davon ab ob Du es JETZT einsetzen möchtest (abwarten! 8) ) oder ob Du Code schreiben möchtest (perl, jquery in Komfortzone ;) ). Warnung: viel Arbeit !
vg
jörg
Hallo Mr Rose,
Wenn du die 95_Floorplan.pm ein bisschen anpasst und dich mit CSS ein bissle auskennstsollte das kein Problem sein.
Mir gefällt der Style auch sehr und ich habe mich auch mal dran gesetzt.
Lass dich nicht vom Hintergrund stören. Die Frau fragte ob man etwas schöneres verwenden kann als schwarz.
Der Hintergrund lässt sich jedochschnell ändern.
Also letzendlich sind nur die reinen Aktoren in den Floorplan eingefügt worden... Das Menü auf der linken Seite sind Weblinks mit HTMLCode.
Doof ist das es wirklich an jede Bildschirmauflösung individuell angepasst werden muss.
Wenn du die Floorplan.pm angepasst hast erscheint die Beschreibung auf der linken Seite des Icons..Genau das was du willst oder? Ich habe sie dir mal mit angehängt. Einfach einsetzen und reloaden.
Hier noch das attr "floorplan":
attr BZ.SA.Deckenlampe fp_WG.FP.Lights 245,650,1,<b>Deckenlampe</b></br><small>Badezimmer</small>
Und hier die Anpassung der CSS damit ALLE deine Devices in so einem Block mit demHintergrund angezeigt werden:
table { -moz-border-radius:8px; border-radius:8px; background-image:url(/fhem/images/webview/tablebg.jpg); }
.devicename {font-size: 20px; color: #000000; text-align:left; min-width:180px; width:180px; padding-left:15px;}
.devicestate {text-align:center; width:64px; height:64px; }
table <-> Anpassung für die Tabelle im gesamten, die eingefügt wird. Hier abgerundete Ecken und ein Hintergrundbild
devicename/devicestate <-> Anpassung für jeweils die Spalte mit Namen und State
Ich hoffe ich konnte weiterhelfen
Gruß
Schicke heute abend noch ein Screenshot von einer Config wie im ersten Beitrag
Mit ein bisschen Verspätung auch der Screenshot
Die Anordnung lässt noch ein bisschen zu wünschen übrig aber das ist nur noch feinschliff
Zitat von: tiroso am 08 Januar 2015, 05:34:15
Mit ein bisschen Verspätung auch der Screenshot
Die Anordnung lässt noch ein bisschen zu wünschen übrig aber das ist nur noch feinschliff
Sieht cool aus...magst du das anderen zur Verfügung stellen?
Was meinst du jetzt genau? Die css komplett?
Ja am besten alles :-)
Du legst dir am besten einen eigene style an. Sprich in deiner FHEMWEB gibst du den Präfix Bsp. webview an.
Nun im Ordner "fhem/www/images/webview/"die svg-Dateien für deine Seite reinsetzen. Alle Geräte von Homematic im Status on, off, set_on und set_off bekommen bei mir den selben Status. Die Dateien für die Lampe habe ich mit angehangen. Wichtig in den SVG: der "g" Part muss die Klasse besitzen die angesprochen wird, sprich "on, off etc.
Nun ersetzt du die "95_Floorplan.pm" mit der die ich schonmal hochgeladen habe.
Jetzt kannst du die Devices schonmal einfügen und der Text steht auf der linken Seite vom IconState. Ausserdem wird für on und off jeweils ein anders Icon verwendet.
Alles andere ist css und Anpassung. Ich hänge dir meine CSS mal mit an. Kann sein das diese bei dir noch nicht funktioniert da ich einige Devices individuell angepasst habe.
Das Menü auf der Linken Seite ist ein Weblink. Ich war längere Zeit am überlegen wie ich unter den Floorplans wechseln kann ohne das eigene Menü. Somit ist eigene HTML Struktur eingebaut die mit den Icons auf die jeweiligen Floorplans verlinkt ist. Diesen Weblink fügst du in deine Floorplans ein und positionierst ihn da wo du ihn haben willst.
Da die Definition was lang ist machst du am besten
define FP_menue weblink htmlCode test
Anschließend bearbeitest du die Definition und fügst folgendes ein:
htmlCode
<table id="menuetable">
<tr>
<td class="menuetd">
<a href="/fhem/floorplan/WG.FP.Main">
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="512px" height="512px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve" class="icon">
<path d="M0,224L96,64h320l96,160H0z M288,0h-64v32h64V0z M480,256v256H288V352h-64v160H32V256H480z M160,352H96v60h64V352z M416,352
h-64v64h64V352z" fill="rgb(211,211,211)"/>
</svg>
</a>
</td>
<tr>
</tr>
<td class="menuetd">
<a href="/fhem/floorplan/WG.FP.Lights">
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="64px" height="64px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve" class="icon">
<g>
<path d="M40.874,51H24.382c0,0.671,0.002,1.341,0.021,2h16.449C40.872,52.341,40.874,51.671,40.874,51z" fill="rgb(211,211,211)"/>
<path d="M24.557,55h16.142c0.043-0.328,0.078-0.66,0.103-1H24.455C24.479,54.34,24.513,54.672,24.557,55z" fill="rgb(211,211,211)"/>
<path d="M32.628,61.014c5.382,0,7.243-2.141,7.893-5.014H24.736C25.385,58.873,27.247,61.014,32.628,61.014z" fill="rgb(211,211,211)"/>
<path d="M49.463,21.881c0-10.244-7.598-18.549-16.97-18.549c-9.373,0-16.97,8.305-16.97,18.549c0,4.905,1.755,9.353,4.6,12.67
C19.837,34.562,24.284,39,24.678,49h16.101c0,0,4.457-14.625,4.229-14.624C47.767,31.078,49.463,26.701,49.463,21.881z" fill="rgb(211,211,211)"/>
</g>
</svg>
</a>
</td>
<tr>
</tr>
<td class="menuetd">
<a href="/fhem/floorplan/WG.FP.Heating">
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 17.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="64px" height="64px" viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve" class="icon">
<g>
<path d="M54.47,21.108c-0.828,0-1.5,0.672-1.5,1.5v5.866h-1.676v-1.337c0-3.324-2.705-6.029-6.029-6.029
c-1.805,0-3.423,0.802-4.529,2.063c-1.106-1.261-2.724-2.063-4.529-2.063s-3.423,0.802-4.529,2.063
c-1.106-1.261-2.724-2.063-4.529-2.063s-3.423,0.802-4.529,2.063c-1.106-1.261-2.724-2.063-4.529-2.063
c-3.324,0-6.029,2.705-6.029,6.029v1.337H9.03c-0.828,0-1.5,0.672-1.5,1.5s0.672,1.5,1.5,1.5h3.029v22.388
c0,3.324,2.705,6.029,6.029,6.029c1.805,0,3.423-0.802,4.529-2.063c1.106,1.261,2.724,2.063,4.529,2.063s3.423-0.802,4.529-2.063
c1.106,1.261,2.724,2.063,4.529,2.063s3.423-0.802,4.529-2.063c1.106,1.261,2.724,2.063,4.529,2.063
c3.324,0,6.029-2.705,6.029-6.029V31.475h3.176c0.828,0,1.5-0.672,1.5-1.5v-7.366C55.97,21.78,55.298,21.108,54.47,21.108z
M48.294,31.475v22.388c0,1.67-1.359,3.029-3.029,3.029s-3.029-1.359-3.029-3.029V31.475v-3v-1.337c0-1.67,1.359-3.029,3.029-3.029
s3.029,1.359,3.029,3.029v1.337V31.475z M39.235,53.862c0,1.67-1.359,3.029-3.029,3.029s-3.029-1.359-3.029-3.029V31.475v-3v-1.337
c0-1.67,1.359-3.029,3.029-3.029s3.029,1.359,3.029,3.029v1.337v3V53.862z M30.177,53.862c0,1.67-1.359,3.029-3.029,3.029
s-3.029-1.359-3.029-3.029V31.475v-3v-1.337c0-1.67,1.359-3.029,3.029-3.029s3.029,1.359,3.029,3.029v1.337v3V53.862z
M21.118,53.862c0,1.67-1.359,3.029-3.029,3.029s-3.029-1.359-3.029-3.029V31.475v-3v-1.337c0-1.67,1.359-3.029,3.029-3.029
s3.029,1.359,3.029,3.029v1.337v3V53.862z" fill="rgb(211,211,211)"/>
<path d="M21.7,3.273c-1.352,1.613-1.908,3.321-1.238,5.371c0.661,2.023,2.692,3.878,1.071,5.962
c-1.172,1.507,0.935,3.647,2.121,2.121c1.335-1.716,1.912-3.467,1.238-5.597c-0.608-1.922-2.688-3.808-1.071-5.736
C25.055,3.922,22.945,1.788,21.7,3.273z" fill="rgb(211,211,211)"/>
<path d="M32.655,16.727c1.335-1.716,1.912-3.467,1.238-5.597c-0.608-1.922-2.688-3.808-1.071-5.736
c1.234-1.472-0.877-3.606-2.121-2.121c-1.352,1.613-1.908,3.321-1.238,5.371c0.661,2.023,2.692,3.878,1.071,5.962
C29.361,16.113,31.468,18.253,32.655,16.727z" fill="rgb(211,211,211)"/>
<path d="M39.7,3.273c-1.352,1.613-1.908,3.321-1.238,5.371c0.661,2.023,2.692,3.878,1.071,5.962
c-1.172,1.507,0.935,3.647,2.121,2.121c1.335-1.716,1.912-3.467,1.238-5.597c-0.608-1.922-2.688-3.808-1.071-5.736
C43.055,3.922,40.945,1.788,39.7,3.273z" fill="rgb(211,211,211)"/>
</g>
</svg>
</a>
</td>
<tr>
</tr>
<td class="menuetd">
<a href="/fhem/floorplan/WG.FP.Media">
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="64px" height="64px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
<g>
<path d="M57.583,15h-0.167C55.529,15,54,16.53,54,18.417V52h7V18.417C61,16.53,59.471,15,57.583,15z M57.438,17h0.125
c0.64,0,1.176,0.421,1.362,1h-2.85C56.262,17.422,56.798,17,57.438,17z M58.925,19c-0.187,0.579-0.723,1-1.362,1h-0.125
c-0.64,0-1.176-0.421-1.362-1H58.925z M57.562,47.812c-1.484,0-2.688-1.203-2.688-2.688s1.204-2.688,2.688-2.688
s2.688,1.203,2.688,2.688S59.047,47.812,57.562,47.812z M57.562,37.812c-1.484,0-2.688-1.203-2.688-2.688s1.204-2.688,2.688-2.688
s2.688,1.204,2.688,2.688S59.047,37.812,57.562,37.812z M57.562,27.813c-1.484,0-2.688-1.204-2.688-2.688s1.204-2.688,2.688-2.688
s2.688,1.204,2.688,2.688S59.047,27.813,57.562,27.813z" fill="rgb(211,211,211)"/>
<path d="M5.583,15H5.417C3.53,15,2,16.53,2,18.417V52h7V18.417C9,16.53,7.47,15,5.583,15z M5.437,17h0.125
c0.64,0,1.176,0.421,1.363,1h-2.85C4.261,17.422,4.797,17,5.437,17z M6.925,19c-0.187,0.579-0.723,1-1.363,1H5.437
c-0.639,0-1.176-0.421-1.362-1H6.925z M5.562,47.812c-1.484,0-2.688-1.203-2.688-2.688s1.204-2.688,2.688-2.688
s2.688,1.203,2.688,2.688S7.046,47.812,5.562,47.812z M5.562,37.812c-1.484,0-2.688-1.203-2.688-2.688s1.204-2.688,2.688-2.688
s2.688,1.204,2.688,2.688S7.046,37.812,5.562,37.812z M5.562,27.813c-1.484,0-2.688-1.204-2.688-2.688s1.204-2.688,2.688-2.688
s2.688,1.204,2.688,2.688S7.046,27.813,5.562,27.813z" fill="rgb(211,211,211)"/>
<circle cx="57.562" cy="25.125" r="2" fill="rgb(211,211,211)"/>
<circle cx="57.562" cy="35.125" r="2" fill="rgb(211,211,211)"/>
<circle cx="57.562" cy="45.125" r="2" fill="rgb(211,211,211)"/>
<circle cx="5.562" cy="25.125" r="2" fill="rgb(211,211,211)"/>
<circle cx="5.562" cy="35.125" r="2" fill="rgb(211,211,211)"/>
<circle cx="5.562" cy="45.125" r="2" fill="rgb(211,211,211)"/>
<path d="M40,10.125v-1.25C40,7.839,38.161,8,37.125,8h-11.25C24.839,8,23,7.839,23,8.875v1.25C23,11.161,24.839,12,25.875,12H12v23
v17h39V35V12H37.125C38.161,12,40,11.161,40,10.125z M16,43h-1c-0.276,0-0.5-0.224-0.5-0.5S14.724,42,15,42h1
c0.276,0,0.5,0.224,0.5,0.5S16.276,43,16,43z M27,43h-1c-0.276,0-0.5-0.224-0.5-0.5S25.724,42,26,42h1c0.276,0,0.5,0.224,0.5,0.5
S27.276,43,27,43z M30,43h-1c-0.276,0-0.5-0.224-0.5-0.5S28.724,42,29,42h1c0.276,0,0.5,0.224,0.5,0.5S30.276,43,30,43z M33,43h-1
c-0.276,0-0.5-0.224-0.5-0.5S31.724,42,32,42h1c0.276,0,0.5,0.224,0.5,0.5S33.276,43,33,43z M36,43h-1c-0.276,0-0.5-0.224-0.5-0.5
S34.724,42,35,42h1c0.276,0,0.5,0.224,0.5,0.5S36.276,43,36,43z M49,14v16v10H14V30V14H49z" fill="rgb(211,211,211)"/>
</g>
</svg>
</a>
</td>
<tr>
</tr>
<td class="menuetd">
<a href="sonos://"> test </a>
</td>
<tr>
</tr>
<td class="menuetd">
<a href="/fhem/floorplan/WG.FP.Settings">
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="64px" height="64px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
<path d="M31.377,26.445l-4.187-3.881c-1.003,2.072-2.365,3.81-4.543,4.672l3.361,3.626c0.445-0.214,0.938-0.341,1.46-0.36
L31.377,26.445z" fill="rgb(211,211,211)"/>
<path d="M21.815,25.446c0.004-0.023,0.003-0.045,0.008-0.069c0.098-0.464,0.36-0.954,0.776-1.371l1.428-1.428
c0.426-0.426,0.929-0.687,1.403-0.78c0.007-0.001,0.014-0.001,0.021-0.002l3.3-12.259L16.549,2.684l-5.566,5.288l8.717,5.491
l-1.46,4.777l-4.777,1.46l-5.491-8.717l-5.288,5.566l6.853,12.202L21.815,25.446z" fill="rgb(211,211,211)"/>
<path d="M30.598,33l-0.277-0.275c-0.798-0.798-1.759-1.237-2.707-1.237c-0.715,0-1.373,0.263-1.85,0.74L4.501,51.155
c-0.541,0.542-0.892,1.422-0.919,2.335c-0.03,1.008,0.33,1.939,1.015,2.624l2.609,2.609c0.707,0.707,1.731,1.112,2.812,1.112
c0.95,0,1.833-0.315,2.361-0.844l18.89-21.219C32.389,36.652,32.072,34.477,30.598,33z" fill="rgb(211,211,211)"/>
<path d="M58.02,51.145L36.767,31.441l-3.857,4.004c0.11,0.863-0.024,1.702-0.433,2.393l18.689,20.16
c0.104,0.104,0.257,0.148,0.445,0.148c0.91,0,2.634-1.057,3.353-1.775l1.429-1.428C57.259,54.076,58.618,51.744,58.02,51.145z
M51.891,54.758c-1.341,0-2.428-1.086-2.428-2.427s1.087-2.427,2.428-2.427c1.34,0,2.426,1.086,2.426,2.427
S53.23,54.758,51.891,54.758z" fill="rgb(211,211,211)"/>
<path d="M61.389,19.322c-0.68-0.68-1.781-0.68-2.461,0l-0.684,0.684c-0.566-0.782-1.505-2.111-1.391-2.551
c0.502-1.924-3.426-6.484-3.426-6.484c-9.76-9.76-16.283-9.54-19.384-8.472c-1.245,0.429-1.019,0.699,0.278,0.928
c9.406,1.642,10.58,7.194,8.984,9.338c-0.615,0.827-0.795,1.45-0.686,2.01c0.064,0.33,0.229,0.639,0.468,0.954L28.712,30.651
c0.831,0.224,1.629,0.679,2.315,1.366l0.277,0.276c0.606,0.607,1.031,1.306,1.304,2.023l14.214-14.751
c0.271,0.22,0.552,0.415,0.842,0.567c0.774,0.41,1.616,0.53,2.548,0.064c1.054-0.527,4.167,2.019,5.112,2.699
c0.007,0.005,0.013,0.007,0.02,0.012l-0.518,0.517c-0.68,0.68-0.68,1.781,0,2.461c0.68,0.68,1.781,0.68,2.461,0l4.102-4.102
C62.068,21.103,62.068,20.002,61.389,19.322z" fill="rgb(211,211,211)"/>
</svg>
</a>
</td>
</tr>
</table>
Womit geht es weiter? Ach ja die css.
Du erstellst dir, am besten über "Edit Files" im Browser eine Datei Namens "webviewfloorplanstyle.css" in der du alles festlegst.
Kannst meine ruhig kopieren. Ein paar devices sind allerdings Namensspezifisch.
Gruß
Klasse vielen lieben Dank du bist ein Schatz!
Wer sich, wie ich, mit css etwas schwer tut, dem bleibt auch die Möglichkeit, einfach die Bilder anzupassen.
Ich habe für alles png-Bilder mit durchsichtigem Hintergrund. Aktuell bin ich dabei, den Floorplan neu einzurichten, den aktuellen Stand habe ich mal angehangen. Hier passt vor allem die Verteilung auf die Felder im Hintergrund nicht, weil ich es nicht hinbekomme, dass die ReadingsGroups auch tatsächlich ganz links beim ersten Pixel anfangen (hier bitte ich um Hilfe!).
Die Farben sind auch noch nicht final, das war nur ein erster Schnellschuss mit dem Hintergrundbild, um es auszutesten.
Zum Verständnis: Links oben die rot/grünen Dinger zeigen an, ob das jeweilige Fenster offen oder geschlossen ist. Das Fernseher-Symbol lässt sich anklicken und schaltet entweder die Aktion "Fernsehen" ein oder schaltet über die Harmony alles aus wenn nicht gerade "aus" aktiv ist (dafür gibt es auch 2 unterschiedliche Bilder). Rechts daneben die Lampen-Symbole steuern zum Einen eine Gruppe aus HUEs und Schaltsteckdosen und daneben eine separate Hue, das Symbol darunter führt zu einer definierten Dimmung bzw. Abschalten eines Teils der Funksteckdosen.
Unten die aktuelle Wetterinfo, lediglich das "aktuelle" Bild kommt auch vom Wettermodul, daneben die Vorhersagen vom Wettermodul.
Was man hier nicht sieht: Mit dem Scrollen um eine Seite befindet sich direkt darunter die TV-Vorschau und rechts daneben Status-Infos (Batterie-Anzeige, FHEM-Uptime, Speicherauslastung, Temperatur des RPi etc.).
Fazit: Auch wenn svg aufgrund der einfachen Skalierung klar im Vorteil ist, geht es für die Anfänger auch ohne oder mit weniger Ahnung in den css-Dateien indem die Icons einfach passend erstellt werden.