Browsersteuerung, Seiten per JS autom. aufrufen

Browsersteuerung, Seiten per Javascript automatisch aufrufen

Dieser Eintrag basiert auf diesem Post: [1]
Ein transparentes Icon für den Dummy: [2]

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. 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ückschalten möglich sein.

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.

Lösung

Wir erstellen eine js- Datei mit dem Namen "fhemweb_pageswap.js" und kopieren sie einfach in den Ordner fhem/www/pgm2/. 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:
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:01 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.

Erkärung 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. 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 einer Sekunde wieder auf "none". Nun kann das Spiel auf der neuen Seite 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.

Der Rahmen braucht mindestens folgenden Code:

function
FW_xyzUpdateLine(d){

// eigenen js- Code hier einfügen
// "xyz" steht für frei wählbare 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".