[Gelöst] JavaScript- Coaching erwünscht

[fiedel]

 Hallo Softies!

Für die Umsetzung einer kleinen Funktion im Floorplan (Seitenwechsel bei einem Event) benötige ich mal etwas Hilfe zum Grundverständnis.

Was ich schon habe:

- eine JS- Datei die automatisch ausgeführt wird und in der kleine Tests wie "alert", oder "window.location.href ="" " bereits funktionieren
- lückenhaftes Wissen über JS, z.B. dass Code der nicht in einer Funktion steht, sofort ausgeführt wird und ähnliche Binsenweisheiten 
- gute Tutorials wie dieses, die auch DOM erklären, was ich in diesem "Projekt" verstehen und anwenden möchte

Was mir (vorerst) noch fehlt:

- was ist (einfach erklärt) die Funktion einer "Update Line"? Das muss eine "FHEM- Erfindung" sein, ich finde im Netz nichts darüber.

- am Beispiel "Colorpicker":

Code Auswählen Erweitern

function
FW_colorpickerUpdateLine(d)
{
var name = "colorpicker."+d[0];
el = document.getElementById(name);


  Von wo aus und wie wird die Funktion aufgerufen?
  Was wird mit dem Argument "(d)" übergeben? Ich vermute ein Array, aber wie muss der Aufruf aussehen?
 

Code Auswählen Erweitern


FW_widgets['colorpicker'] = {
updateLine:FW_colorpickerUpdateLine


Was bewirkt dieser Code?


Schon mal vielen Dank für eure Mühe!

Frank

[fiedel]

Alle Softies wieder hinlegen! 

Ich hab rumgetestet (kann das "Alert"- Fenster schon nicht mehr sehen    ) und hab mein Ziel schon erreicht. 
Die Seite wechselt, sobald ich auf meinen FS20- Taster drücke.  Wie von Geisterhand - ich bin begeistert.
Wenn alles sauber geht, poste ich noch die Lösung und eine kurze Erklärung zu updateLine. Verstanden habe ich es zwar nicht, aber ich weiß jetzt, was es macht und wie man es nutzen kann. Das ist doch auch schon was...

Viele Grüße

Frank

[fiedel]

Es gibt erste Ergebnisse. 

Wer das gerne mal testen möchte (Rückmeldungen erwünscht):

Das Konstrukt kann aus FHEM heraus per set- Befehl auf den Dummy die angezeigte FHEM- Seite wechseln.
Dabei ist es egal ob WEB oder Floorplan. Es muss nur der Dummy auf der angezeigten Seite definiert sein und es muss ein set- Befehl mit einem sinnvollen Link abgesetzt werden. Das kann von einem beliebigen notify, at, o.ä.  aus passieren. Es können vollständige, wie auch relative Links geschickt werden. Bei Floorplan reicht es übrigens, den Dummy ein Mal auf nur einer Floorplanseite zu definieren.  Er funktioniert dann automatisch auf allen FP- Seiten der Instanz.

Anwendungsfälle dafür wären z.B. spezielle Floorplanseiten, auf denen Kameralivebilder oder Snapshots formatfüllend dargestellt werden, oder auch die Anzeige des Anrufers in sehr großer Schrift, wenn das Telefon klingelt. Bei entsprechendem Event (Klingel, Bewegungsmelder, Anruf...) wechselt der Floorplan dann sofort dort hin. Um wieder zurück zu kommen, nutzt man Touch- Buttons auf der speziellen Seite, oder wechselt per "pageswap" nach einer bestimmten Zeit automatisch wieder zurück. Denkbar wäre auch ein kontinuierlicher Seitenwechsel im Zeitintervall.

Die js- Datei wird einfach in den Ordner fhem/www/pgm2/ kopiert. Sie startet nach einem Refresh der Webseite oder "shutdown restart" von selbst. In die CFG kommt noch der Dummy und ein Notify zum zurücksetzten des Dummy. Der Name des Dummy sollte nicht geändert werden, da er so in der JS- Datei verwendet wird. Er hat noch ein transparentes Icon dabei, mit dessen Hilfe man den Dummy auf Floorplanseiten völlig unsichtbar unterbringen kann. Der Dummy muss bei Systemstart auf "none" initialisiert werden.

In die CFG:

Code Auswählen Erweitern


# Bei Event FHEM- Seite umschalten;
# longpolll 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"

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


Ist alles eingerichtet, geht man auf eine Seite auf der der Dummy definiert wurde und setzt z.B. per FS20- Taster und notify einen set- Befehl mit einem Link ab, der zu einer anderen Seite des eigenen Systems passt. Dann sollte die Seite dort hin wechseln.
Ein Beispiel steht direkt oben bei der Def. des Dummys.

Eine Frage dazu an die Developer:
Erkennt ihr irgendwelche groben Fehler oder No-Go´s? DOM war mir noch etwas zu fett für die ersten Schritte und nun habe ich es so gemacht, dass alle Objekte auf der Seite durchgescannt werden, sobald sich irgend ein Objekt auf der Seite ändert. Hat das gravierende Nachteile, oder ist das problemlos so verwendbar?

Viele Grüße

Frank

[UliM]

Hi,
cool.
Magst Du's ins Wiki stellen?
Gruß, Uli

[fiedel]

Mach ich gerne Uli, hast du´s mal getestet? Ich möchte noch ein paar Rückmeldungen abwarten. Bei mir geht es zwar wie gewünscht, aber ich bin noch nicht komplett sicher, ob das Ganze "nebenwirkungsfrei" ist. Ist ja mein erstes JS- Projekt.

Gruß

Frank

[Rince]

Cool.
Damit hat sich das Problem, das ein Einbrecher am Tab die Haussteuerung übernimmt erübrigt

Ich bin dafür, dass das in die Floorplan Anleitung wandert und das Skript eingecheckt wird

[Matscher]

Hallo Frank,

bei mir funktioniert es bis jetzt ohne Nebenwirkungen

Danke und Gruß,
Steve

[fiedel]

Magst Du's ins Wiki stellen?
Gruß, Uli

Ist hiermit erledigt! 

[guiseppe]

Hallo zusammen,
ich habe den Seitenwechsel in FHEM entsprechend den WIKI Einträgen von CALLMONITOR und "Browsersteuerung,_Seiten_per_JS_autom._aufrufen" umgesetzt.
Leider funktioniert das ganze noch nicht wie gewünscht, da einfach nicht passiert, wenn ich den Dummy (Dum_pageswap_D) wie im Beispiel im WIKI setze.
Versuchweise habe ich mal eine längere Zeitdauer für das at im reset notify eingegeben, mit dem Resultat, dass die Browser: Firefox, Internet Explorer oder Safari quasi in eine Endlosschleife hängen bleiben.
Die Events hab ich auf dem Event Monitor gesehen, Java Script ist aktiviert, Longpoll ebenfalls.
... hat jemand vielleicht einen Hinweis.

Vielen Dank schon mal
Grüße Josef

[fiedel]

Hi Josef,

mit dem Resultat, dass die Browser: Firefox, Internet Explorer oder Safari quasi in eine Endlosschleife hängen bleiben.

das deutet ja darauf hin, dass es in Grunde funktioniert, denn das at setzt nur den gerade abgesetzten Seienwechsel- Befehl zurück. Hast du vielleicht eine "Ad-Block" oder "No-Script" Software im Einsatz. Diese könnte die Funktion als unerlaubte Aktion auslegen. Ob Javascript wie gewünscht funktioniert erkennst du, indem du einen Slider definierst und ausprobierst.
Zum Troubleshooting würde alles noch mal genau durchgucken und überprüfen und dann in die JS- Funktion statt des Seitenwechsel- Befehls einen Alert- Befehl setzten. Der gibt dir dann eine Bildschirmmeldung aus, entsprechend dem definierten Inhalt. Dazu solltest du das "at" deaktivieren, da du ja sehen willst, was passiert:

Code Auswählen Erweitern

// 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
     alert(val);    // gibt Zielwebseite auf dem Bildschirm aus wenn "if = erfüllt"  
  }

}


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


Viel Erfolg!

Frank

[guiseppe]

Hallo Frank,
vielen Dank für die Antwort.

Ich hab nach dem Ad-Block bzw. No-Script Firewall etc. gesucht wurde aber nicht fündig.
Vom Slider versteh ich leider nix, aber ich hab deinen Code mal mit dem alert umgesetzt.
Der kommt auch raus.

Wenn ich den Alert und Window.location.href Aufruf im Code einkommentiere und den at notify fürs zurücksetzten auskommentiere, ist der Browser in einer Schleife in der ich am untern Linken Rand sehe: ...warten auf FritzBox
Dann das alert PopUp und dann wieder
... warten auf FritzBox.
Dieses Spiel geht so lange bis der notify zurücksetzt. Ich hab das mal testweise auf 20 Sekunden gesetzt.
JavaScript scheint also zu funtionieren.
Der window.location.href aufruf kommt aber irgendwie nicht durch.



Grüße Josef

[fiedel]

Moin Josef,

habe es eben mal mit aktuellstem Firefox nachvollzogen: In der Eingabezeile geht es bei mir auch nicht (mehr). Aber wenn der Aufruf aus dem Programm kommt, geht es nach wie vor. Muss ich bei Gelegenheit mal genauer angucken, da es ja zum Einrichten wichtig ist.
Als Trostpflaster gebe ich dir mal meine berühmte Anrufer- Anzeigefunktion. ;o) Damit kannst du es dann testen, bzw. die Funktion so abwandeln, dass auch ein anderes Event den pageswap antriggert.
Dazu gehören noch zwei weitere Dummys (einfach definieren!), der alte Telefonmonitor (als er noch kein Modul war - aber mit dem neuen von Elektolurch geht das sicher auch) und Text2Speech. Die "at"s verzögern die Ansage, sodass sie nicht in das erste Klingeln fällt. Musst du ggf. etwas mit spielen.

Code Auswählen Erweitern

# Wenn Telefon klingelt, wechsle zum FP "Telefon", sage und zeige Anrufer an:
define Func_TelMon_Show_N notify Callmon:event:.ring { \
my $intum = ReadingsVal("Callmon", "internal_number", undef);;\
my $extnum = ReadingsVal("Callmon", "external_number", undef);;\
my $extname = ReadingsVal("Callmon", "external_name", undef);;\
\
fhem("set Dum_TelMon_ShowNa_D $extname");;\
fhem("set Dum_TelMon_ShowNu_D $extnum");;\
fhem("set Dum_pageswap_D /fhem/floorplan/9_Telefon");;\
\
   if ($extname eq "unknown"){\
      fhem("define Melde_Anrufer_A at +00:00:01 set TTS tts Rufnummer unbekannt oder unterdrückt");;\
   }\
   else {\
      fhem("define Melde_Anrufer_A at +00:00:01 set TTS tts $extname.");;\
   }\
}

Gruß

Frank

[guiseppe]

Hallo Frank,

Super Danke der Tip hat geholfen.
( ... den notify für's TextToSpeech hatte ich schon drin! Absolut genialer Effekt vor allem mit der Invers Suche und dem Telefonbuch! )
Ich hab den Notify auf den Callmonitor ring event jetzt auch auf den pageswap Dummy gesetzt und siehe da es funktioniert.
Das hatte ich gar nicht ausprobiert, da es ja in der FHEM Kommandozeile nicht geklappt hat.
Ich hab testweise aus mal einen Dummy und ein notify definiert welches auf "Knopfdruck" aus dem FHEM Frontend den Pageswap dummy setzt. Damit gehts bei mir leider auch nicht.

...aber was soll's es tut ja was es soll, nämlich bei Anruf den Seitenwechsel ausführen und auch wieder zurück.
Vielen Dank nochmal
Grüße Josef