Hallo,
ich baue mir gerade meine Floorplans für das Bedienpanel an der Wand zusammen und stand vor der Herausforderung, wie ich den vielen Inhalt auf eine Seite bekomme. So habe ich mir u.A. verschiedene ReadingsGroups gebaut (z.B. Steuerung von Heizung, Lüfter, ...). Da mir dadurch der FLOORPLAN aber zu voll wurde, habe ich überlegt, wie ich selten benötigte Inhalte einfach ausblenden kann. Heraus kam folgender Weblink:
define HTMLTest weblink htmlCode
<script language="JavaScript">
function Luefter_initPane()
{
document.getElementById("div-DG.wz.LU.Control.RG").style.display = "none";
}
function Luefter_switchPane()
{
if (document.getElementById("div-DG.wz.LU.Control.RG").style.display == "none")
{
document.getElementById("div-DG.wz.LU.Control.RG").style.display = "block";
} else {
document.getElementById("div-DG.wz.LU.Control.RG").style.display = "none";
}
}
</script>
<img src="/fhem/images/default/fan.png" style="width:60px;" onload="Luefter_initPane()" onclick="Luefter_switchPane()">
Wenn ich diesen nun im Floorplan einfüge, gibt es ein Icon (fan.png) welches bei Klick die ReadingsGroup DG.wz.LU.Control.RG ein- bzw. ausblendet. Den Zustand beim Laden der Seite kann ich über Anpassung der Funktion Luefter_initPane() setzen.
Vielleicht hilft das ja dem einen oder anderen auch...
Ronny
Hi,
hört sich Interessant an :) Kannst du dazu vll. 1-2 Screens einfügen, wie das ganze aussschaut ?
Gruß
Im Prinzip kannst du damit beliebige Objekte die über den normalen Weg im Floorplan plaziert wurden ein- und ausblenden. Ich habe es noch ein bisschen verbessert: Ich habe mir eine Funktion in der MyUtils geschrieben:
sub
hideButtonHTML($;$;$)
{
my ($name,$item,$image) = @_;
my $htmlString = '<script language="JavaScript">';
$htmlString .= ' function '.$name.'_initPane() ';
$htmlString .= ' {';
$htmlString .= ' document.getElementById("div-'.$item.'").style.display = "none";';
$htmlString .= ' }';
$htmlString .= ' function '.$name.'_switchPane() ';
$htmlString .= ' {';
$htmlString .= ' if (document.getElementById("div-'.$item.'").style.display == "none")';
$htmlString .= ' {';
$htmlString .= ' document.getElementById("div-'.$item.'").style.display = "block";';
$htmlString .= ' } else {';
$htmlString .= ' document.getElementById("div-'.$item.'").style.display = "none";';
$htmlString .= ' }';
$htmlString .= ' }';
$htmlString .= '</script>';
$htmlString .= '<img src="'.$image.'" alt="" title="'.$name.'" style="width:60px;" onload="'.$name.'_initPane()" onclick="'.$name.'_switchPane()">';
return $htmlString;
}
Dieser übergebe ich einen Namen (der muss in einem Floorplan eindeutig sein, da damit die Funktion benannt wird - außerdem wird er als Tooltiptext für das Symbol verwendet), den Namen des FHEM-Objektes, welches im Floorplan ausgeblendet werden soll und den Pfad zu einem Bild, welches für das Symbol verwendet werden soll:
define HTMLTest weblink htmlCode {hideButtonHTML("Luefter", "DG.wz.LU.Control.RG", "/fhem/images/default/fan.png")}
DG.wz.LU.Control.RG ist bei mir eine ReadingsGroup, welche über den kleinen Lüfter (/fhem/images/default/fan.png) im Floorplan ein- und ausgeblendet werden kann.
Ein Beispiel habe ich angefügt...
Sehr schön - ein interaktives Tooltipmenü. Ab ins WIKI damit! :)
Habs getestet, funktioniert gut :)
Einziges manko, wenn ich die Readingsgroup auf dem Floorplan wo anders platzieren will ist sie "unsichtbar" sobald ich sie selektriere.
Gruß
Du kannst sie aber nach dem Selektieren mit dem Button auch wieder sichtbar schalten...
Hallo,
seit dem letzten Update bekomme ich folgende Fehlermeldung:
Undefined subroutine &main::hideButtonHTML called at (eval 12965) line 1.
Bekomme auch den Fehler.
Undefined subroutine &main::hideButtonHTML called at (eval 207298) line 1.
Gibt es schon eine Lösung?
Ich habe die aktuellste Version und bei mir funktioniert es. Wie sehen die Funktion in eurer Myutils und der Aufruf aus?
hab es eigentlich von dir übernommen.
sub
hideButtonHTML($;$;$)
{
my ($name,$item,$image) = @_;
my $htmlString = '<script language="JavaScript">';
$htmlString .= ' function '.$name.'_initPane() ';
$htmlString .= ' {';
$htmlString .= ' document.getElementById("div-'.$item.'").style.display = "none";';
$htmlString .= ' }';
$htmlString .= ' function '.$name.'_switchPane() ';
$htmlString .= ' {';
$htmlString .= ' if (document.getElementById("div-'.$item.'").style.display == "none")';
$htmlString .= ' {';
$htmlString .= ' document.getElementById("div-'.$item.'").style.display = "block";';
$htmlString .= ' } else {';
$htmlString .= ' document.getElementById("div-'.$item.'").style.display = "none";';
$htmlString .= ' }';
$htmlString .= ' }';
$htmlString .= '</script>';
$htmlString .= '<img src="'.$image.'" alt="" title="'.$name.'" style="width:60px;" onload="'.$name.'_initPane()" onclick="'.$name.'_switchPane()">';
return $htmlString;
}
define HTMLTest weblink htmlCode {hideButtonHTML("Heizung", "rg_thz", "/fhem/images/default/sani_heating.png")}
Probier mal bitte das:
define HTMLTest weblink htmlCode {hideButtonHTML("Heizung", "rg_thz", "/fhem/images/default/sani_heating.png")}
EDIT: Dachte es liegt am falschen " am Ende, aber das war's vermutlich nicht.
Hier mal mein aktueller Code:
sub
hideButtonHTML($;$;$;$;$;$)
{
my ($name,$item,$image,$width,$type,$resize) = @_;
if (defined $resize == 0)
{
$resize = 1.0;
}
my $htmlString = '<script language="JavaScript">';
$htmlString .= ' function '.$name.'_initPane() ';
$htmlString .= ' {';
$htmlString .= ' document.getElementById("div-'.$item.'").style.display = "none";';
$htmlString .= ' }';
$htmlString .= ' function '.$name.'_switchPane() ';
$htmlString .= ' {';
$htmlString .= ' if (document.getElementById("div-'.$item.'").style.display == "block")';
$htmlString .= ' {';
$htmlString .= ' document.getElementById("div-'.$item.'").style.display = "none";';
$htmlString .= ' } else {';
$htmlString .= ' document.getElementById("div-'.$item.'").style.display = "block";';
$htmlString .= ' }';
$htmlString .= ' }';
$htmlString .= '</script>';
if ($type eq 'svg')
{
$image =~ s/#/@/;
my $svgString = FW_makeImage($image);
my @scale = split(/scale\(/,$svgString);
my @scale1 = split(/@/,$svgString);
@scale = split(/\)/,$scale[1]);
@scale = split(/,/,$scale[0]);
my $newScale1 = $scale[0]*$resize;
my $newScale2 = $scale[1]*$resize;
$svgString=~ s/scale\(.*,.*\)/scale\($newScale1,$newScale2)/g;
$htmlString .= '<div onload="'.$name.'_initPane()" onclick="'.$name.'_switchPane()">';
$htmlString .= $svgString;
$htmlString .= '</div>';
}
else{
$htmlString .= '<img src="'.$image.'" alt="" title="'.$name.'" style="width:'.$width.'px; z-index:3;" onload="'.$name.'_initPane()" onclick="'.$name.'_switchPane()">';
}
return $htmlString;
}
define HTMLTest weblink htmlCode {hideButtonHTML("Luefter", "DG.wz.LU.Control.RG", "/fhem/images/default/fan.png", "60")}
Danke.
Die Fehlermeldung ist weg, aber wenn ich auf das icon im Floorplan klicke blendet es kein Fenster ein wie auf deinen Screenshots.
Du musst das "Fenster" (z.B. eine ReadingsGroup) das ein- und ausgeblendet werden soll auch im Floorplan platzieren und es muss den im Weblink angegebenen Namen haben (bei dir "rg_thz") - dieses wird dann ein- und ausgeblendet.
Danke jetzt geht es.
Du hast wenn die ReadingsGroup eingeblendet ist ein dunkleren Hintergrund, wie hast du das hinbekommen?
@RoBra81
jetzt bin ich aber neidisch.
Wie hast Du denn das so perfekt hinbekommen?
Speziell die Boxen mit den Heizungsdaten und dem Heizungsmodus?
Ist das JavaScript?
Bei mir sieht das so einfach aus :-\
Gruß
Marcel
Ich habe mir eine ReadingsGroup gebaut:
define DG.wz.HZ.Heizkoerperventil.RG readingsGroup <%sani_heating@yellow>,<{hideButtonHTML("KlimaDiagramm","DG.wz.PL.Klima","/fhem/images/default/chart.png","40","img")}>,<{hideButtonHTML("Mehr","DG.wz.HZ.Heizkoerperventil.RG2","edit_expand\@yellow","20","svg","0.5")}>\
DG.wz.HZ.Heizkoerperventil.Clima:<Ist>,measured-temp,<>\
DG.wz.HZ.Heizkoerperventil.Clima:<Soll>,desired-temp,<{getHeatingModeUntil($DEVICE,"Wohnzimmer")}@controlMode>\
attr DG.wz.HZ.Heizkoerperventil.RG commands { 'desired-temp' => 'desired-temp:', 'controlMode' => 'trigger DG.wz.HZ.Heizkoerperventil.Clima.nf.DoAuto' }
attr DG.wz.HZ.Heizkoerperventil.RG fp_Wohnzimmer 30,1000,0,
attr DG.wz.HZ.Heizkoerperventil.RG mapping {'desired-temp' => ''}
attr DG.wz.HZ.Heizkoerperventil.RG nameStyle style="color:yellow;;font-weight:bold;;text-align:left;;"
attr DG.wz.HZ.Heizkoerperventil.RG noheading 1
attr DG.wz.HZ.Heizkoerperventil.RG nonames 1
attr DG.wz.HZ.Heizkoerperventil.RG room Wohnzimmer
attr DG.wz.HZ.Heizkoerperventil.RG style style="background:rgba(0, 0, 0, .3);;"
attr DG.wz.HZ.Heizkoerperventil.RG valueFormat { 'measured-temp' => "%0.1f°;C",'ValvePosition' => "%.0f%%"}
attr DG.wz.HZ.Heizkoerperventil.RG valueIcon {'battery.ok' => 'batterie_lightgreen', 'battery.low' => 'batterie_red', 'state' => '%VALUE', 'controlMode.manual' => 'sani_heating_manual', 'controlMode.set_manual' => 'sani_heating_manual', 'controlMode.auto' => 'sani_heating_automatic', 'controlMode.set_auto' => 'sani_heating_automatic'}
define DG.wz.HZ.Heizkoerperventil.RG2 readingsGroup <>,<> DG.wz.HZ.Heizkoerperventil.Clima:<Bat>,battery@{getHeatingDeviceName($DEVICE)} DG.wz.HZ.Heizkoerperventil.Clima:<Ventil>,ValvePosition
attr DG.wz.HZ.Heizkoerperventil.RG2 fp_Wohnzimmer 185,1000,0,
attr DG.wz.HZ.Heizkoerperventil.RG2 nameStyle style="color:yellow;;font-weight:bold;;text-align:left"
attr DG.wz.HZ.Heizkoerperventil.RG2 noheading 1
attr DG.wz.HZ.Heizkoerperventil.RG2 nonames 1
attr DG.wz.HZ.Heizkoerperventil.RG2 room Wohnzimmer
attr DG.wz.HZ.Heizkoerperventil.RG2 style style="background:rgba(0, 0, 0, .3);;"
attr DG.wz.HZ.Heizkoerperventil.RG2 valueFormat { 'measured-temp' => "%0.1f°;C",'ValvePosition' => "%.0f%%"}
attr DG.wz.HZ.Heizkoerperventil.RG2 valueIcon {'battery.ok' => 'batterie_lightgreen', 'battery.low' => 'batterie_red', 'state' => '%VALUE', 'controlMode.manual' => 'sani_heating_manual', 'controlMode.set_manual' => 'sani_heating_manual', 'controlMode.auto' => 'sani_heating_automatic', 'controlMode.set_auto' => 'sani_heating_automatic'}
Da ist auch der dunkle Hintergrund versteckt:
attr DG.wz.HZ.Heizkoerperventil.RG2 style style="background:rgba(0, 0, 0, .3);;"
Momentan warte ich aber sehnsüchtig auf die neuen ReadingsGroup-Erweiterungen:
http://forum.fhem.de/index.php?topic=27353
Das sieht ja richtig kompliziert aus. :o
ich habe gerade eine neue version der readingsGroup eingecheckt die noch ein paar features zum ein- und ausblenden sowie zum auf- und zuklappen hat.
mehr hier: http://forum.fhem.de/index.php/topic,30427.msg230577.html#msg230577 (http://forum.fhem.de/index.php/topic,30427.msg230577.html#msg230577).
gruss
andre