TIA Anwenderdefinierte Webseite -- Prozessdaten aktualisieren

N

Nixco

Level-1
Beiträge
28
Reaktionspunkte
0
Zuviel Werbung?
-> Hier kostenlos registrieren
Hallo,
ich bin momentan dran, eine Anwenderdefinierte Webseite zu erstellen.
Auf der sollen unter anderem Prozessdaten angezeigt werden.
Leider verursacht der Seitenaufbau pro Sekunde blödes Bildflackern.
Allerdings benötige ich die Prozessdaten relativ in Echtzeit.

Wie kann ich die Prozessdaten anzeigen lassen, ohne jedesmal die komplette Seite neu aufzubauen?

Gruß Nixco
 
Die Technik die du dafür benötigst nennt sich Ajax (Asynchronous JavaScript and XML), damit lädst du über Javascript nur Teile nach und bindest die Werte dann in das DOM der Webseite ein. Ein paar einfache Beispiele findest du dazu auch hier im Forum über die Suche.

Siemens hat mittlerweile auch ein Beispiel dazu (ganz unten unter "Zur Erweiterung"):
https://support.industry.siemens.com/cs/ww/de/view/68011496
 
Zuviel Werbung?
-> Hier kostenlos registrieren
das geht indem man Struktur und Daten trennt, so dass am ende nur noch die Daten asynchron nachgeladen werden.
Das Flackern rührt wahrscheinlich daher, das immer die komplette Seite neu geladen wird, was vollkommen unnütz und nicht notwendig ist
Am besten packt man die Daten dazu in ein JSON Format und lädt diese per AJAX Request unter der Verwendung von jQuery nach

Im einem Applikationsbeispiel / die Erweiterung von Siemens ist das auch auf zwei unterschiedlichen Wegen beschrieben:
https://support.industry.siemens.com/cs/ww/de/view/68011496

Oder einfach mal nach AJAX, JSON und jQuery Googlen, dazu gibt es sehr viel im Netz :-)

VG
Red-Cali

P.s. - da war wohl einer schneller :-)
 
Hallo,
ich habe das ganze jetzt so realisiert mit einer JSON Datei.

Frage:

Kann ich das ganze auch in meiner CSS Datei machen?
Dass ich Werte von der SPS über meine JSON File alle 500ms aktualisiere und es mir die Werte in bestimmte CSS Variablen schreibe (z.B. um die Größe einer Box zu verändern)?

Gruß Nixco
 
Zuviel Werbung?
-> Hier kostenlos registrieren
in das CSS kann man nicht schreiben, die werte aus der CSS Datei werden nur vom Browser interpretiert.
Man kann aber die CSS Eigenschaften / Attribute des jeweiligen HTML Elements Tags per Javascript anpassen.

jQuery bringt dazu die Methoden PROP, ATTR, CSS mit mit denen man die verschiedenen Dinge tun kann, die du möchtest.
Bezüglich der konkreten Frage nach der Größe gibt es teilweise auch konkrete / spezialisierte Methoden - width / height

Hier ist eine gute Doku für jQuery: http://jqapi.com/
oder einfach mal Google bemühen, es gibt genügend beispiele und fragen die in die gleiche Richtung gehen: https://www.google.de/search?q=set+css+width+by+jquery

VG
RedCali
 
Ich habe jetzt einen Test gemacht:

Code: 
         <script>
          $(document).ready(function(){
            $("#btn").click(function(){
            $("#balken").height("20%");
            });
          });
        </script>

Dies funktioniert soweit auch.
Allerdings muss ich das ganze jetzt erweitern.
Die Daten (z.B. 70%) dürfen nicht statisch in dem Script stehen.
Ich muss den Wert über JSON einlesen.
Den Wert bekomme ich über:

Code: 
<script type="text/javascript">
            $(document).ready(function(){
            $.ajaxSetup({ cache: false });
              setInterval(function(){       
                $.getJSON("inputs.htm", function(data){
                  $('#Wert').text(data.wert);
});
              },
                          //Refresh rate in ms.
                          500);
            });
        </script>


Wie muss ich das jetzt oben einfügen damit ich den Wert mit JSON einlesen kann?
Zusätzlich kommt der Wert in Integer.

Diese Möglichkeit funktioniert nicht:

Code: 
<script>
          $(document).ready(function(){
            $("#btn").click(function(){
            $("#balken").height("<label id="Wert"></Label>%");
            });
          });
        </script>


Kann mir hier jemand weiterhelfen?


Gruß Nixco
 
Zuletzt bearbeitet:
vergleiche es doch mal was du in deinen Beispielen getan hast...

was soll das auch für eine höhen angebe sein --> "<label id="Wert"></Label>%"

probier es doch mal so:
Code: 
<script>
$(document).ready(function(){
    $("#btn").click(function(){

        // hier der ajax aufruf

         $("#balken").height([COLOR=#333333][FONT=Courier]data.wert+[/FONT][/COLOR]"%");



      });
});
</script>
 
Zuviel Werbung?
-> Hier kostenlos registrieren
Funktioniert so leider nicht. So werden mir keinerlei Daten von meiner JSON auf der Seite angezeigt.
Auch wenn ich $("#balken").height("Wert"+"%"); nutze funktioniert es nicht.
 
So vielleicht?
So meinte ich das :-)

Der Button event löst das Laden mit getJson aus, nach erfolgreichem laden werden die Werte den entsprechenden Elementen zugewiesen.

Code: 
<script type="text/javascript">	$(document).ready(function(){
	$.ajaxSetup({ cache: false });
	
	setInterval(function(){       
		$.getJSON("inputs.htm", function(data){
				$('#Wert').text(data.wert);
			});
		},
		//Refresh rate in ms.
		500);
	});


	// button event löst das laden und anschließende zuweisen aus
	$("#btn").click(function(){       
		$.getJSON("inputs.htm", function(data){
				$('#Wert').text(data.wert);
				$("#balken").height(data.wert+"%");
			});
	});
</script>
 
Zuviel Werbung?
-> Hier kostenlos registrieren
Hallo,
nach langen probieren muss ich mich nochmals melden.
Ich bekomme es einfach nicht hin. So sieht aktuell mein Ansatz aus:

Code: 
<div class="geruest_li">
                <div id="balken_li" style="height: 0%; background-color: #4CAF50;"></div>
            </div>

Der style height soll nun beeinflusst werden.

Code: 
<script type="text/javascript">
            $(document).ready(function(){
            $.ajaxSetup({ cache: false });
              setInterval(function(){       
                $.getJSON("inputs.htm", function(data){
                  $("balken_li").height(data.container_lu_%+"%");
                });
              },
                          500);
            });
        </script>


Kann hier jemand was feststellen?
Der Wert height soll alle 500ms aktualisiert werden, mit dem Wert aus der Inputs.htm

Gruß Nico
 
Nixco schrieb:
Hallo,
nach langen probieren muss ich mich nochmals melden.
Ich bekomme es einfach nicht hin. So sieht aktuell mein Ansatz aus:

Code: 
<div class="geruest_li">
                <div id="balken_li" style="height: 0%; background-color: #4CAF50;"></div>
            </div>

Der style height soll nun beeinflusst werden.

Code: 
<script type="text/javascript">
            $(document).ready(function(){
            $.ajaxSetup({ cache: false });
              setInterval(function(){       
                $.getJSON("inputs.htm", function(data){
                  $("[B][COLOR=#ff0000]#[/COLOR][/B]balken_li").height(data.container_lu_[B][COLOR=#ff0000]%[/COLOR][/B]+"%");
                });
              },
                          500);
            });
        </script>


Kann hier jemand was feststellen?
Der Wert height soll alle 500ms aktualisiert werden, mit dem Wert aus der Inputs.htm

Gruß Nico
Zum Vergrößern anklicken....


auf die ID wird referenziert / selektiert indem man denn Gartenzaun voranstellt :-)
und immer noch Sonderzeichen in den variablen Namen/Bezeichnern.....

Die Entwickler Tools in den Browsern sollte da aber auch eine Fehlermeldung ausgeben wenn der Selektor nicht bekannt ist?!
da kann man auch sehen ob ein Webserver Daten zurückliefert und auch welche Daten :-)

VG
Bastian
 
Zurück
Oben