Ein Bild in einem DIV-Container aktualisieren (Siemens Webserver)

  • Hallo Leute.


    Ich grase das Internet schon seit einigen Tagen ab und habe schon viele gute Lösungen in mein Projekt einbinden können.


    Ich stehe jetzt aber definitiv auf dem Schlauch und weiss nicht weiter ?(


    Ich habe mir ein Webserver mit einer Siemens SPS aufgebaut und dazu eine Webseite erstellt in HTML5, soweit so gut. Auf der SPS ändern sich die Werte ständig und einige möchte ich als Zahl andere als Bild anzeigen lassen.


    Die Zahlen aktualisieren regelmässig selbst dank eines einfachen JavaScripts.


    Nun möchte ich aber, dass auch die Bilder im gleichen Zyklus aktualisieren, diese sind leider etwas komplizierter, deshalb möchte ich kurz erklären, wie das mit den Bildern funktioniert (Für die, welche noch nicht mit einer SPS gearbeitet haben)


    Ich habe auf der SPS eine Variable, sagen wir x_Example (Zustand 1 oder 0).


    Ich habe dann zwei Bilder z.B. Pic_0.png (Wenn die Variable x_Example logisch 0 ist) und ein Bild Pic_1.png (wenn die Variable x_Example logisch 1 ist)


    Die Bilder lasse ich wie folgt anzeigen Pic_:="DB".x_Example:.png".


    Das JavaScript für die Wertanzeigen in reiner Textform habe ich versucht anzupassen, damit es mir auch die Bilder aktualisiert, was leider wegen meinem nur geringen Vorwissen kläglich in die Hose ging.


    Ich hoffe Ihr könnt mir helfen, bzw. mich in die richtige Richtung leiten, damit ich verstehe was warum nicht funktioniert




    PS: Hier ist das JavaScript, welches ich für die Textausgabe benutze:


    <script type="text/javascript">


    $(document).ready(function(){


    $.ajaxSetup({ cache: false });


    setInterval(function() {


    $.get("Example.html", function(result){


    $('#Ausgabe').text(result.trim());


    });


    },1000);


    });


    </script>




    Vielen Dank schonmal für die Hilfestellungen!


    Grüsse

  • Was gibt die Seite "Example.html" denn zurück? Den Wert, den Du erwähnt hast (0 oder 1)? Dann wäre es ziemlich einfach:

    JavaScript
    1. $.get("Example.html", function(result){
    2. if (result.trim() == "1") { $('#Ausgabe').html('<img src="Pic_1.png">); } else { $('#Ausgabe').html('<img src="Pic_0.png">); }
    3. });
    4. });
  • Hallo Sempervivum.


    Danke für die Antwort
    Bei den einfachen Werten, die ich mir anzeigen lasse, ist im externen Html-File die Variable für die SPS abgelegt, welche dann ständig in den index.html aktualisiert wird.


    Bei den Bildern wollte ich das selbe machen, nur eben dass die Bilder dort (im Example.html) aktualisiert werden.
    Bei den meisten Bildern reicht mir 0 oder 1.


    Jedoch habe ich zwei Bilder, welche ich mit 1, 2 oder 3 als Integer ansteuern will.


    Diese benutze ich als Füllstandsanzeige 1=leer , 2=kritisch, 3=voll

  • Und - hilft dir der Code, den ich gepostet habe? Alternativ kannst Du das HTML mit dem <img>-Tag auch gleich auf dem Server generieren. In beiden Fällen musst Du die Bilder ebenfalls auf diesem Server ablegen.

  • Hallo Sempervivum



    Leider funktioniert das ganze noch nicht, statt dem Bild kriege ich nun einfach das Resultat angezeigt, welche von der SPS kommt sprich 1 oder 0!


    Ich habe dein Script für mein Beispiel angepasst und wollte es dann in mein Index.html einbinden.


    In etwa folgendermassen


    <!-- Kommentar: Füllstand Chlor-->
    <div style="position: absolute; left:1011px; top:528px">
    <Label id="Ausgabe"></Label>
    </div>



    Doch wie gesagt, es zeigt mir lediglich 1 oder 0 an, aber kein Bild



    Grüsse