Inhalte im Floorplan ein- und ausblenden

Begonnen von RoBra81, 09 September 2014, 10:25:57

Vorheriges Thema - Nächstes Thema

RoBra81

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

Sebastian

Hi,

hört sich Interessant an :) Kannst du dazu vll. 1-2 Screens einfügen, wie das ganze aussschaut ?

Gruß
Gruß
Sebastian

RoBra81

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...

fiedel

Sehr schön - ein interaktives Tooltipmenü. Ab ins WIKI damit!  :)
FeatureLevel: 6.1 auf Wyse N03D ; Deb. 11 ; Perl: v5.14.2 ; IO: HM-MOD-RPI-PCB + VCCU|CUL 868 V 1.66|LinkUSBi |TEK603
HM: SEC-SCO|SCI-3-FM|LC-SW4-PCB|ES-PMSW1-PL|RC-4-2|SEN-MDIR-O|SEC-WDS-2
CUL: HMS100TF|FS20 S4A-2 ; OWDevice: DS18S20|DS2401|DS2406|DS2423

Sebastian

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ß
Gruß
Sebastian

RoBra81

Du kannst sie aber nach dem Selektieren mit dem Button auch wieder sichtbar schalten...

Sebastian

Hallo,

seit dem letzten Update bekomme ich folgende Fehlermeldung:

Undefined subroutine &main::hideButtonHTML called at (eval 12965) line 1.
Gruß
Sebastian

Koppl

Bekomme auch den Fehler.

Undefined subroutine &main::hideButtonHTML called at (eval 207298) line 1.

Gibt es schon eine Lösung?

RoBra81

Ich habe die aktuellste Version und bei mir funktioniert es. Wie sehen die Funktion in eurer Myutils und der Aufruf aus?

Koppl

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")}

RoBra81

#10
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")}

Koppl

Danke.

Die Fehlermeldung ist weg, aber wenn ich auf das icon im Floorplan klicke blendet es kein Fenster ein wie auf deinen Screenshots.

RoBra81

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.

Koppl

Danke jetzt geht es.

Du hast wenn die ReadingsGroup eingeblendet ist ein dunkleren Hintergrund, wie hast du das hinbekommen?

mcbo

@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