HTML-Seite um auf Webvisualisierungsseiten von zwei SPS zu wechseln

  • Hallo Forum,


    ich hätte eine Theoretische Frage.

    Wie bereits im Titel erwähnt, geht es darum, dass ich eine HTML-Seite erstellen möchte um mich auf eine WebVisualisierung einer SPS zu verbinden.

    Hierzu läuft ein Webserver auf einer SPS. Diese ist über den link "http://<IP>:<PORT>/webvisu.htm" erreichbar.

    Über ein Panel mit installiertem Browser kann ich die Visualisierung öffnen.

    Da ich nun ein Redundantes System habe, müsste ich mich immer auf die Master-Steuerung verbinden. Dies hab ich innerhalb der SPS gelöst.

    Problem ist jedoch beim Starten der SPS. Falls SPS1 nicht erreichbar ist, möchte ich mich zu SPS2 verbinden.


    Dazu möchte ich dann quasi eine HTML-Seite erstellen, auf der man die beiden Links eingeben kann und dann versucht wird sich mit Link1 zu verbinden. Wenn das nicht möglich ist dann mit Link 2.

    Ist das automatisiert möglich? Wenn ja, wie würde man das realisieren?


    Ich persönlich bin eher SPS Programmierer und kenne nur die "grundlegendsten Grundlagen" der html Programmierung :) (und mit Sicherheit nicht alle tags etc.)

    Von daher wäre ich über Code-Beispiele sehr froh!


    Gruß


    Chris

  • Ich denke schon, dass das möglich ist: Ich würde daran denken, beide Links in je einen iFrame zu laden. Dann für beide einen Eventlistener für load registrieren. Für den Link, bei dem als erstes dieser Listener triggert, dann eine Weiterleitung machen, so dass die Seite browserfüllend angezeigt wird. Alternativ könnte man auch nur das Laden z. B. eines Bildes von der Steuerung testen.

  • Hi, vielen Dank für deine schnelle Antwort.

    Das hört sich schon mal gut an... aber wenn ich ehrlich bin...ich wüsste jetzt nicht wie ich das in html programmieren müsste.


    Hast du eventuell Einzelbeispiele wie man das mit dem iFrame macht bzw. den Eventlistener registriert etc.

    Wenn ich einzelne Examples hätte, würde ich das sicher hin bekommen... aber bei 0 anzufangen...da kenne ich einfach die Syntax zu wenig :(


    Gruß Chris

  • Müsste etwa so aussehen, ungetestet, wenn es nicht läuft und Du den Fehler nicht findest, melde dich wieder.

    Den Code für den zweiten iFrame kannst Du selbst hinzu fügen.

  • Hi,


    wow... vielen Dank für das Beispiel und die ausführliche Kommentierung!

    Hab das soweit mal eingepflegt, das ganze für iFrame2 auch gemacht und IP und Port eingetragen.
    Das ganze schein soweit auch erst mal gut zu funktionieren.

    Es wird lediglich (falls beide SPS erreichbar sind) immer auf die zweite gesprungen. Ist die erste erreichbar, soll das zweite gar nicht mehr versucht werden.


    Zusätzlich möchte ich ein Eingabefenster, in dem man die beiden URL's eintragen kann. Sollte nichts eingetragen sein, wird auch nichts ausgeführt.


    Habe das ganze wie im Codebeispiel gemacht.

    Die Eingabefenster erscheinen...jedoch tut sich nichts :) Bin da mit der Syntax noch nicht ganz im Reinen



    Was ich noch gern hätte wäre folgendes (falls das geht)

    Wenn die Eingabe bei der Seite gemacht wurde, wird das für die Zukunft gespeichert. Wird die Seite erneut geöffnet läuft eine Zeit von 5Sek ab und Startet dann mit den alten Eingaben. Wird vorher auf "Ändern" geklickt und eine neue Eingabe gemacht, wird diese verwendet, nachdem auf "Senden" geklickt wird.


    Ist so was möglich? Wenn ja wie könnte man das realisieren?

  • Zitat

    Es wird lediglich (falls beide SPS erreichbar sind) immer auf die zweite gesprungen. Ist die erste erreichbar, soll das zweite gar nicht mehr versucht werden.

    Das kannst Du erreichen, indem Du zunächst nur die erste ansprichst und bei deren iFrame zusätzlich einen Eventhandler für "error" registrierst. Triggert dieser, weil sie nicht verfügbar ist, setzt Du das src-Attribut für die zweite und machst dort das selbe mit den Eventhandlern. Triggert auch dort der Eventhandler, kannst Du eine Fehlermeldung an den Benutzer ausgeben.

    Nachteil bei diesem Verfahren: Wahrscheinlich bekommst Du keinen Fehler 404, der schnell kommt, sondern musst einen Timeout abwarten bis die zweite angesprochen wird. Man könnte daran denken, nicht den error abzuwarten, sondern die zweite mit einer Verzögerung anzusprechen, aber das wäre nicht zuverlässsig.

  • Code
        <iframe id="iframe1" src=Ip1></iframe>
        <iframe id="iframe2" src=Ip2></iframe>

    Das wird nicht funktionieren, denn dieser Code wird ja sofort beim Laden der Seite ausgeführt und dann ist in den Eingabefeldern noch nichts drin. Du musst das Submit ebenfalls mit einem Eventlistener abfangen, darin die Werte auslesen und in die src-Attribute eintragen, etwa so:

    Ungetestet. Wenn das funktioniert, kannst Du der ersten SPS Priorität geben wie im vorigen Posting beschrieben.

    Wahrscheinlich wäre es auch ratsam, die URLs zu validieren bzw. zu prüfen, aber wir wollen mal nicht den zweiten Schritt vor dem ersten tun.

  • Zitat

    Wenn die Eingabe bei der Seite gemacht wurde, wird das für die Zukunft gespeichert. Wird die Seite erneut geöffnet läuft eine Zeit von 5Sek ab und Startet dann mit den alten Eingaben. Wird vorher auf "Ändern" geklickt und eine neue Eingabe gemacht, wird diese verwendet, nachdem auf "Senden" geklickt wird.

    Auch das ist selbstverständlich möglich. Speichern ist am einfachsten im Localstorage. Dieser liegt jedoch lokal auf dem Computer des Benutzers. Willst Du, dass die Werte für alle Benutzer verfügbar sind, musst Du sie serverseitig speichern.

    Und für eine Verzögerung gibt es in Javascript die Funktion setTimeout().

  • Das kannst Du erreichen, indem Du zunächst nur die erste ansprichst und bei deren iFrame zusätzlich einen Eventhandler für "error" registrierst. Triggert dieser, weil sie nicht verfügbar ist, setzt Du das src-Attribut für die zweite und machst dort das selbe mit den Eventhandlern. Triggert auch dort der Eventhandler, kannst Du eine Fehlermeldung an den Benutzer ausgeben.

    Nachteil bei diesem Verfahren: Wahrscheinlich bekommst Du keinen Fehler 404, der schnell kommt, sondern musst einen Timeout abwarten bis die zweite angesprochen wird. Man könnte daran denken, nicht den error abzuwarten, sondern die zweite mit einer Verzögerung anzusprechen, aber das wäre nicht zuverlässsig.

    Ok, hab das mal versucht...Falls IP1 erreichbar ist, klappt das auch... leider wird IP2 nicht aufgerufen wenn 1 nicht verfügbar ist...brauche ich da einen zweiten Frame (wie vorher)?


    Du meintest ich müsste das src-Attribut für die zweite IP setzen (Im zweiten Frame?) Wie mach ich das richtig?

    Meine Idee war jetzt die zweite IP in das src-Attribut des ersten Frames zu schreiben (quasi erste IP löschen und dafür zweite nehmen) und dann das ganze Frame neu laden...


    Wenn hier nicht sofort der Fehler 404 kommt, spielt das keine Rolle. Die html Seite wird eigentlich wirklich nur beim Starten der SPS benötigt, da hier mein internes Programm auf der SPS noch nicht läuft. Sollte hier das Laden etwas länger dauern, spielt das keine Rolle.


  • Code
        <iframe id="iframe1" src=Ip1></iframe>
        <iframe id="iframe2" src=Ip2></iframe>

    Das wird nicht funktionieren, denn dieser Code wird ja sofort beim Laden der Seite ausgeführt und dann ist in den Eingabefeldern noch nichts drin. Du musst das Submit ebenfalls mit einem Eventlistener abfangen, darin die Werte auslesen und in die src-Attribute eintragen, etwa so:

    Ungetestet. Wenn das funktioniert, kannst Du der ersten SPS Priorität geben wie im vorigen Posting beschrieben.

    Wahrscheinlich wäre es auch ratsam, die URLs zu validieren bzw. zu prüfen, aber wir wollen mal nicht den zweiten Schritt vor dem ersten tun.


    Das mit dem Submit scheint gut zu funktionieren...:-)


  • Auch das ist selbstverständlich möglich. Speichern ist am einfachsten im Localstorage. Dieser liegt jedoch lokal auf dem Computer des Benutzers. Willst Du, dass die Werte für alle Benutzer verfügbar sind, musst Du sie serverseitig speichern.

    Und für eine Verzögerung gibt es in Javascript die Funktion setTimeout().

    Ich denke hier würde ausreichen, wenn ich das im Localsotrage des Panels speichern würde, mit dem ich die Visualisierung aufrufe. Sollten weitere Clients dazu kommen, müssten die, die Eintragung einfach auch vornehmen. Das wäre OK.


    Sollte das Grundlegende von den Posts oben gut funktionieren, werde ich das mit dem setTimeout mal probieren :)


    Dir schon mal vielen Dank für die sehr kompetente Unterstützung!

  • Hab das ganze auch mal wie folgt versucht:

    - Eingabe funktioniert und öffnet sich erst nach Submit

    - Leider öffnet sich nur die URL1...auch wenn diese nicht erreichbar ist, passiert nichts


    Es wird mir nur angezeigt "Loading Webvisualisation" => Irgendwann hier dann Fehler beim Laden...wobei hier kein Fehler 404 angezeigt wird, sondern Fehler beim Laden der Webvisu. (Bild im Anhang)


    Der Fehler wird scheinbar nicht getriggert... dies ist der Fall, wenn ich mein SPS-Programm stoppe, oder auch die ganze SPS neu Starte (also auch der Webserver definitiv nicht aktiv ist)


    Eine Idee an was das liegen könnte?


  • Ich habe das jetzt getestet und habe das selbe Ergebnis: Das onerror-Event triggert nicht, wenn man einen iFrame verwendet. Es gibt jedoch eine Alternative:

    Ein Testbild laden, das auf der SPS liegt. Ich habe das mit diesem Testskript versucht und es funktioniert, wenn ich irgend eine Bildquelle eintrage, die es nicht gibt:

    Code
        <script>
            let im = new Image();
            im.onload = function () { console.log('ok') };
            im.onerror = function () { console.log('err') };
    
            //im.src = 'xyz----.jpg'; dieses habe ich beim Test verwenden
            im.src = 'http://<IP1>:<PORT>/testbild.jpg'; // so müsste die src bei dir aussehen
        </script>

    Teste zunächst, ob es mit einer SPS auch funktioniert und wenn ja, können wir das Ganze vervollständigen.

  • PS: Jetzt erst lese ich dieses:

    Zitat

    Der Fehler wird scheinbar nicht getriggert... dies ist der Fall, wenn ich mein SPS-Programm stoppe, oder auch die ganze SPS neu Starte (also auch der Webserver definitiv nicht aktiv ist)

    Dann wird das wahrscheinlich auch mit dem Testbild nicht funktionieren, denn wenn der Webserver läuft, wird wahrscheinlich auch das Bild fehlerfrei geladen. Versuche es dennoch.

  • Hi,


    erst mal wieder Danke für deine Antwort.


    Ich fürchte dass das nicht so einfach möglich ist.

    Wenn ich ein Bild auf dem Dateisystem der SPS ablege, kann ich das nur über z.B. FTP öffnen...was ja als Bestandteil einer Http(s)-Seite verboten ist...richtig?


    Ich könnte jedoch das WebBasedManagement der SPS erreichen...würde mir das was bringen? Hier wird über eine LED der Status der SPS angezeigt. Ist die SPS abgeschaltet, wäre auch diese Seite nicht zu erreichen...

  • Zitat

    Ich könnte jedoch das WebBasedManagement der SPS erreichen

    Wäre das eine HTML-Seite? Dann könne man daran denken, den Inhalt auszuwerten und auf diese Weise den Status der SPS zu ermitteln. Ich fürchte nur, dass uns dann die SOP einen Strich durch die Rechnung machen wird. Man könnte es allerdings versuchen, ob diese Seite für Cross-Domain-Zugriff freigegeben ist.

  • Ja das ganze ist <!DOCTYPE html>


    Ich könnte dir den Code mal kopieren:


  • Fortsetzung:

  • Dann sollten wird als erstes testen, ob dabei Zugriff möglich ist oder ob es durch die SOP geblockt ist. Versuche diese Testseite und wirf einen Blick in die Console. Wenn das HTML angezeigt wird ist alles OK. Wenn ein Fehler angezeigt wird, etwa in der Form:

    Zitat

    Uncaught DOMException: Blocked a frame with origin "http://xxx.html" from accessing a cross-origin frame.

    at HTMLIFrameElement.<anonymous>

    wird der Zugriff blockiert und wir haben zunächst mal schlechte Karten.

  • hmh...sieht leider schlecht aus:


    könnte man mit php und URL-Check was machen... hab da was gelesen... man müsste dann aber vermutlich ein separates php-File schreiben und das einbinden oder?


    so in der Art:

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!