Browsersteuerung, Seiten per JS autom. aufrufen

In aktuellen FHEM-Versionen lassen sich ähnliche Effekte einfacher über das Schlüsselwort JS: von FHEMWEB realisieren:

• Thema
• Thema
• Thema

Browsersteuerung, Seiten per Javascript automatisch aufrufen

Dieser Eintrag basiert auf diesem Post: Beitrag
Ein transparentes Icon für den Dummy: Datei:Transparent.png

Aufgabenstellung

Auf einem Tablet mit Floorplan, Dashboard oder FHEM "pur" soll bei auflaufen eines Events (Anruf, Bewegungsmelder, Türklingel usw.) automatisch auf eine andere Webseite umgeschaltet werden. Möglich sein soll dabei das Umleiten auf andere Floorplan-, FHEM-, oder sogar externe Webseiten. Absolute, sowie relative Links sollen genutzt werden können.

Anwendungsbeispiele

So kann entsprechend des Events z.B. der Anrufer oder auch eine Seite mit dem Kamerabild des Besuchers angezeigt werden. Solange wir uns innerhalb von FHEM befinden, soll auch ein automatisches Zurück- oder Weiterschalten möglich sein. Dadurch kann z.B. eine "rotierende" Anzeige verschiedener FHEM- Seiten realisiert werden. Oder nach einer Idee des Forenmitglieds Rince, bei Alarm ein "Sperrbildschirm" aufgerufen werden, der das Bedienen des Tablets vorläufig unmöglich macht.

Voraussetzungen

Voraussetzung ist ein aktuelles, upgedatetes FHEM. In der WEB- Instanz, mit der die Funktion genutzt werden soll, muss "Longpoll" aktiv sein. Dadurch wird erreicht, dass der Wert des Dummy sofort bei setzen des Seitenlinks aktualisiert wird. Auf Clientseite (Tablet) muss der genutzte Browser Javascript unterstützen, sowie auch aktiviert haben.

Lösung

Wir erstellen eine js- Datei mit dem Namen "fhemweb_pageswap.js" und kopieren sie einfach in den Ordner fhem/www/pgm2/. Dazu kann eine vorhandene js- Datei kopiert, umbenannt und der Inhalt ersetzt werden. Sie startet nach einem Refresh der Webseite oder "shutdown restart" von selbst:

fhemweb_pageswap.js :

// Datei: fhemweb_pageswap.js
// Von FHEM aus initiiertes Wechseln der angezeigten Seite:

function
FW_pageswapUpdateLine(d){

 var id = d[0];                                  // id der Objekte auf der Seite
 var val = d[1];                                 // Wert der Objekte auf der Seite

  if (id == "Dum_pageswap_D" && val != "none"){
     window.location.href = ""+val               // wenn Dummy Wert enthaelt, wechseln zu neuer Seite
                                                 // Variable "val" wird nicht geprueft und muss sinnvollen Wert enthalten
  }

}


FW_widgets['pageswap'] = {
  updateLine:FW_pageswapUpdateLine
};

Weiterhin legen wir in der fhem.cfg einen Dummy und ein Notify an. Zum Dummy gehört noch ein transparentes Icon, mit dessen Hilfe wir den Dummy völlig unsichtbar auf Floorplanseiten unterbringen können. Der Link zum Icon befindet sich ganz oben im Beitrag. Es wird in den Ordner /images/default/ kopiert.

In die cfg:

# Bei Event FHEM- Seite umschalten; 
# longpoll muss aktiv sein
# Benutzung: "set Dum_pageswap_D <Seitenlink>" 
# Beispiel: "set Dum_pageswap_D /fhem/floorplan/mein_floorplan_1"
# Beispiel: "set Dum_pageswap_D http://192.168.0.1:8085/fhem/floorplan/mein_floorplan_1"
# Beispiel: "set Dum_pageswap_D www.google.de"

# Dummy für pageswap:
define Dum_pageswap_D dummy
attr Dum_pageswap_D devStateIcon .*:Transparent

# Notify für pageswap (die Reset- Zeit ggf. verlängern, falls Seite nicht aufgerufen wird):
define Func_pageswap_N notify Dum_pageswap_D { \
\
  my $ps_Val = (Value("Dum_pageswap_D"));;\
\
   if ($ps_Val ne "none") { \
      fhem("define reset_pageswap at +00:00:03 set Dum_pageswap_D none");;\
   }\
}

# Bei Systemstart Dummy auf "none" initialisieren:
define Func_Start_Init_N notify global:INITIALIZED.* { \
\
fhem("set Dum_pageswap_D none");;\
}

Verwendung

Die Namen aus den Beispieldateien sollten zunächst einmal nicht geändert werden, da entsprechende Abhängigkeiten bestehen. Hat man das Zusammenspiel verstanden kann umbenannt, geändert und nach Bedarf erweitert werden.

Der Dummy muss bei Systemstart auf "none" initialisiert werden. Eine entsprechende Funktion ist im Beispiel enthalten.

Ist alles eingerichtet, geht man auf eine FHEM- Seite, auf der der Dummy definiert wurde und setzt z.B. per FS20- Taster und einem weiteren Notify einen set- Befehl mit einem Link ab, der zu einer anderen Seite des eigenen Systems passt. Dann sollte die Seite dort hin wechseln. Auch externe Webseiten sind möglich mit der Einschränkung, dass man von dort per Hand zu FHEM zurücknavigieren muss. Innerhalb FHEM hingegen, springt man einfach zwischen verschiedenen Seiten hin und her, indem man auf jeder dieser Seiten den "pageswap-" Dummy definiert. Bei meinen Tests mit Floorplan hat es ausgereicht den Dummy auf nur einer Floorplanseite zu definieren, um zwischen allen FP.- Seiten hin und her zu springen. Scheinbar hält Floorplan im Hintergrund alle Objekte aller FP.-Seiten vor.

Einige Beispielbefehle stehen direkt oben bei der Definition des Dummys.

Beschreibung der Funktion

• Allgemeine Funktionsweise:
  

Die js- Datei scannt beim Aufruf, Refresh, oder der Änderung eines, oder mehrerer Objekte auf der Seite, alle Objekte der Seite, bzw. des Raums. Dabei wird geprüft ob der Wert des Dummy von "none" abweicht. Trifft dies zu, wird dieser Wert an den Browser als neue Adresse für das aktuell angezeigte Fenster übergeben. Wird hier kein gültiger Link übergeben, zeigt der Browser eine leere Seite, oder eine Fehlermeldung an.
Damit beim Aufbau der neuen Seite (sofern sie ebenfalls den Dummy enthält) der Browser nicht sofort zurück springt, oder in Endlosschleife neu läd, setzt das Notify den Dummy nach wenigen Sekunden wieder auf "none". Falls jedoch die gewünschte Seite nicht erscheint, muss diese Reset- Zeit experimentell etwas verlängert weden. Hier hängt die korrekte Funktion von der Reaktionszeit des Browsers und der aufzurufenden Seite ab. Nachdem die Zielseite im Browser erschienen ist, kann das Spiel bei Bedarf von vorn beginnen.

• Funktionsweise "fhemweb_xyz.js" und "UpdateLine"/"FW_widgets":
  

Diese Beschreibung beruht z.T. auf meinen persönlich gemachten Erfahrungen und nicht auf genauen Kenntnissen!

Eine Datei mit Namen "fhemweb_xyz.js" (wobei "xyz" für einen frei wählbaren Namen steht) im Ordner "fhem/www/pgm2/" wird von FHEM automatisch in die Webseite eingbunden und abgearbeitet.

Die Funktion "UpdateLine"/"FW_widgets" besteht aus einem "Rahmen" der den darin enthaltenen Code jeweils ein Mal ausführt, bei: Aufruf und Refresh der Seite, Änderung eines, oder mehrerer Objekte auf der Seite, bzw. im Raum.

Der Rahmen braucht mindestens folgenden Code:

function
FW_xyzUpdateLine(d){

// eigenen js- Code hier einfügen
// "xyz" steht für frei wählbare, aber einheitliche Bezeichnung

}

FW_widgets['xyz'] = {
  updateLine:FW_xyzUpdateLine
};

Es werden dann jeweils ein Mal alle Objekte der Seite, bzw. des Raums abgefragt und ihre Daten (ID, Wert usw.) nacheinander im Array "d" zur Verfügung gestellt. Gesteuert wird dieses Verhalten aus der Datei "fhemweb.js".