Große Buttons für Schalter

[MrRose]

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

[P.A.Trick]

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!

[herrmannj]

Hi Mr Rose

hast das Design im Beispiel zufällig Du erstellt ? Gefällt mir sehr gut.



vg
Jörg

[MrRose]

leider nein und vom ersteller hier aus dem forum auch noch keine antwort bekommen. Hätte es auch gerne...

[herrmannj]

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

[MrRose]

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.

[herrmannj]

Das hängt maßgeblich davon ab ob Du es JETZT einsetzen möchtest (abwarten!  ) oder ob Du Code schreiben möchtest (perl, jquery in Komfortzone  ). Warnung: viel Arbeit ! 

vg
jörg

[tiroso]

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":

Code Auswählen Erweitern

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:

Code Auswählen Erweitern

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ß

[tiroso]

Schicke heute abend noch ein Screenshot von einer Config wie im ersten Beitrag

[tiroso]

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

[P.A.Trick]

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?

[tiroso]

Was meinst du jetzt genau? Die css komplett?

[P.A.Trick]

Ja am besten alles

[tiroso]

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

Code Auswählen Erweitern

define FP_menue weblink htmlCode test
Anschließend bearbeitest du die Definition und fügst folgendes ein:

Code Auswählen Erweitern

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ß

[P.A.Trick]

Klasse vielen lieben Dank du bist ein Schatz!