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
if ($style gt 0 && $style ne 5 && $style ne 7) {
ersetzen mit
if ($style gt 0 && $style ne 5 && $style ne 7 && $style ne 8) {
Line 513
if ($style != 7) {
ersetzen mit
if ($style != 7 && $style != 8) {
Ab Line 552
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:
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
Hi,
hier mal ein aktuelles Bild...
Gruß Andreas
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
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:
define HomeServer FLOORPLAN
attr HomeServer stylesheet darkfloorplanstyleHS.css
Elemente auf dem Floorplan so:
attr Stehlampe fp_HomeServer 35,20,8,Stehlampe
Gruß Andreas
Hallo,
funtioniert das Ganze jetzt wie erwartet?
Gruß Andreas
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
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:
<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
Hi,
richtig, bwi mir sieht das Ganze so aus:
<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
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
Das sieht sehr interesannt aus.
Wie hast du das mit den Wetter gelöst?
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
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
Hi,
der Unterschied ist:
attr WEB longpoll 0
attr WEBtablet longpoll 0
attr WEBphone longpoll 0
Probiert mal.
Gruß Andreas
bestätige nachdem ich
attr WEB longpoll 0
gesetzt habe läst sich schalten ;) danke
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
Kann mir jemmand weiterhelfen?
Bei mir wird das Background-image nicht geladen, die Files bgsquare + css wurde kopiert und aktiv geschaltet, trotzdem wird das bgsquare nicht geladen.
Vielen Danl