Floorplan zus. Style

[Sturi2011]

Hallo,

gibt es die Möglichkeit in den Floorplan einen zus. Style zu integrieren?
Ich habe da mal als Versuch den Style 8 gebastelt. Er zeigt die Text1 Variable und das Icon nebeneinander.
Das Ganze sieht dann mit entsprechendem CSS im Floorplan wie im Anhang aus.

Folgendes habe ich geändert:

Line 494

Code Auswählen Erweitern

if ($style gt 0 && $style ne 5 && $style ne 7) {
ersetzen mit

Code Auswählen Erweitern

if ($style gt 0 && $style ne 5 && $style ne 7 && $style ne 8) {

Line 513

Code Auswählen Erweitern

       if ($style != 7) {
ersetzen mit

Code Auswählen Erweitern

       if ($style != 7 && $style != 8) {

Ab Line 552

Code Auswählen Erweitern

if ($style == 8) {
  my $image = "";
  my $re = qr/href=["']([^"']+)["']/i;
  my @links = ($txt =~ m{ $re }gx);
  $re = qr/<img.*src="(.+)"/i;
  my @urls = ($txt =~ m{ $re }gx);
  if (@urls[0]) {
  $image = "<img src=\"$urls[0]\">";
  } else {
  @urls=();
  $re = qr/<svg(.+)<\/svg>/i;
  @urls = ($txt =~ m{ $re }gx);
  $image = "<svg$urls[0]</svg>";
  }
  FW_pO "<tr><td><div class=\"Style8\" id=\"$d\" onClick=\"location.href='$links[0]'\"><table><tr><td class=\"Style8Text\">$text</td><td class=\"Style8Image\">$image</td></tr></table></div></td></tr>";
        }

Das CSS sieht dann z.B. so aus:

Code Auswählen Erweitern

td {padding:0px;}
table {border-collapse:collapse;}
.Style8 {background-image: url('../images/default/bgsquare.svg'); height:60px; width:200; border-top-left-radius: 5px; border-bottom-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px;}
.Style8 a{display: block;}
.Style8 tr{line-height: 60px;}
.Style8Text {padding:0px; text-align: center; width:100px; font-size:14px; color:#ffffff; font-weight: bold;}
.Style8:hover {background-color: #739fe4;}
.Style8Image {padding:0px; text-align: center; width:40px;}
.Style8Image  svg { height:36px; width:36px; display: block; margin: auto}
.Style8Image  img { height:36px; display: block; margin: auto}

Gruß Andreas

[Sturi2011]

Hi,

hier mal ein aktuelles Bild...

Gruß Andreas

[Cybers]

das ist genau das was ich gesucht habe, und was ich mir schon über diverse andere Wege gestrickt habe um das Icon neben den Text im Floorplan angezeigt zu bekommen.
Allerdings gibt es bei deiner Lösung ein Problem. Und zwar ist das Icon jetzt nicht mehr anklickbar. D.h. ich kann z.B. die Lampe nicht mehr über das Icon an/ausschalten. Scheinbar "liegt" irgenwas über dem Icon, was das Icon nicht mehr anklickbar macht.

Gruß, Sascha

[Sturi2011]

Hi,

die gesamte Schaltfläche ist klickbar gestaltet. Das funktioniert aber nur, wenn du das Komplette CSS für den jeweiligen FP tauscht.

Das Backgroundimage muss unter \fhem\www\images\Default liegen
Das Stylesheet unter fhem\www\pgm2

Der Floorplan wird dann so definiert:

Code Auswählen Erweitern

define HomeServer FLOORPLAN
attr HomeServer stylesheet darkfloorplanstyleHS.css

Elemente auf dem Floorplan so:

Code Auswählen Erweitern

attr Stehlampe fp_HomeServer 35,20,8,Stehlampe

Gruß Andreas

[Sturi2011]

Hallo,

funtioniert das Ganze jetzt wie erwartet?

Gruß Andreas

[Cybers]

Hallo,

es geht nicht. Ich habe es sowohl mit deiner darkfloorplanstyleHS.css als auch mit den im ersten Beitrag beschriebenen Änderungen in der normalen floorplanstyle.css versucht. Ich kann das Gerät nicht schalten.

Gruß, Sascha

[harry66]

hi ich  habs mal getestet, schalten funktioniert auch bei mir nicht.
Wenn ich die Schaltfläche mit Element untersuchen im Browser prüfe finde ich folgendes:

Code Auswählen Erweitern

<div class="Style8" id="TVLED" onclick="location.href=''"><table><tbody><tr><td class="Style8Text">TV-LED</td><td class="Style8Image"><img src="/fhem/images/default/on.png" alt="on" title="on"></td></tr></tbody></table></div>

Ich vermute mal das eigentlich bei "location.href="" was drinstehen sollte??

gruß Rolf

[Sturi2011]

Hi,

richtig, bwi mir sieht das Ganze so aus:

Code Auswählen Erweitern

<div id="div-FSR12_01_ch3" style="position:absolute; top:135px; left:332px;">

    <form autocomplete="off" action="/fhem/floorplan/HomeServer/FSR12_01_ch3" method="post">
        <table id="table-FSR12_01_ch3" class="EnOcean fp_HomeServer" align="center">
            <tbody>
                <tr>
                    <td>
                        <div id="FSR12_01_ch3" class="Style8" onclick="location.href='/fhem/floorplan/HomeServer?cmd.FSR12_01_ch3=set FSR12_01_ch3 on&room=Schalter'">
                            <table>
                                <tbody>
                                    <tr>
                                        <td class="Style8Text"></td>
                                        <td class="Style8Image"></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </form>

</div>

Könnt ihr mal die Definition der Devices posten?

Gruß Andreas

[harry66]

Code Auswählen Erweitern

define TVLED WIFILED 192.168.x.x
attr TVLED devStateIcon devStateIcon {Color_devStateIcon(ReadingsVal($name,"rgb","52e093"))}
attr TVLED fp_HOME 20,50,8,TV-LED
attr TVLED room 01Wohnzimmer
attr TVLED timeout 2
attr TVLED updateInterval 60
attr TVLED verbose 3
attr TVLED webCmd rgb:rgb dd0000:rgb 00dd00:rgb 52e093:rgb 0000dd:rgb a020f0:rgb dddddd:on:off

[Brun]

Das sieht sehr interesannt aus.

Wie hast du das mit den Wetter gelöst?

[Sturi2011]

Hallo Rolf,

interessanter Weise habe ich hier 2 Installationen - in der einen ist ein onclick Element mit und in der anderen ein onclick=href - ich filtere auf das href.
Ich versuche mal morgen den Unterschied herauszufinden. Ein Stückchen gepatchten Floorplan gibt es dann morgen.

Gruß Andreas

[Sturi2011]

Hallo Bruhn,

das mit dem Wetter habe ich in Anlehnung zu dem Wiki Artikel Wetter im Floorplan gelöst. Wenn der Code interessant ist sende mir eine PM.

Gruß Andreas

[Sturi2011]

Hi,

der Unterschied ist:

attr WEB longpoll 0
attr WEBtablet longpoll 0
attr WEBphone longpoll 0

Probiert mal.

Gruß Andreas

[harry66]

bestätige nachdem ich

attr WEB longpoll 0

gesetzt habe läst sich schalten  danke

[harry66]

Hi, jetzt hab ich allerdings das Problem das der aktuelle Schaltzustand nicht automatisch aktualisiert wird bzw. das Icon beim Schalten in der zwischen Stufe "set_on/set_off" stehen bleibt. Erst beim aktualisieren der Seite wird der richtige Schaltzustand wieder angezeigt.

Gruß Rolf