Step 7 S7 -1200 HTML Array of Struct lesen mit JavaScript

Zuviel Werbung?
-> Hier kostenlos registrieren
So sieht es in der SPS aus:
Code:
"Plc2Web".testString := CONCAT(IN1 := INT_TO_STRING("Plc2Web".age),                                   IN2 := '/',
                                   IN3 := 'TestText',
                                   IN4 := '/',
                                   IN5 := DINT_TO_STRING("Plc2Web".position));

aktuell der Code auf page-js.js:
Code:
[COLOR=#D4D4D4][FONT=Consolas][COLOR=#dcdcaa]$[/COLOR]([COLOR=#9cdcfe]document[/COLOR]).[COLOR=#dcdcaa]ready[/COLOR]([COLOR=#569cd6]function[/COLOR](){
  [COLOR=#9cdcfe]$[/COLOR].[COLOR=#dcdcaa]ajaxSetup[/COLOR]({ [COLOR=#9cdcfe]cache[/COLOR][COLOR=#9cdcfe]:[/COLOR] [COLOR=#569cd6]false[/COLOR] });
  [COLOR=#dcdcaa]setInterval[/COLOR]([COLOR=#569cd6]function[/COLOR]() {          
    [COLOR=#9cdcfe]$[/COLOR].[COLOR=#dcdcaa]get[/COLOR]([COLOR=#ce9178]'./read.htm'[/COLOR], [COLOR=#569cd6]function[/COLOR]([COLOR=#9cdcfe]result[/COLOR]){
      [COLOR=#569cd6]var[/COLOR] [COLOR=#9cdcfe]Word[/COLOR] = [COLOR=#9cdcfe]result[/COLOR].[COLOR=#dcdcaa]split[/COLOR]([COLOR=#ce9178]"/"[/COLOR]);
      [COLOR=#dcdcaa]$[/COLOR]([COLOR=#ce9178]'#age'[/COLOR]).[COLOR=#dcdcaa]html[/COLOR]([COLOR=#9cdcfe]Word[/COLOR][[COLOR=#b5cea8]1[/COLOR]]);
      
      [COLOR=#6a9955]//$('#age').text(Word[0].replace(/('|+)/g, ''));[/COLOR]
      [COLOR=#9cdcfe]console[/COLOR].[COLOR=#dcdcaa]log[/COLOR]([COLOR=#ce9178]'#age '[/COLOR] + [COLOR=#9cdcfe]Word[/COLOR][[COLOR=#b5cea8]0[/COLOR]]);
      [COLOR=#9cdcfe]console[/COLOR].[COLOR=#dcdcaa]log[/COLOR]([COLOR=#ce9178]'#age2 '[/COLOR] + [COLOR=#9cdcfe]Word[/COLOR][[COLOR=#b5cea8]1[/COLOR]]);
      [COLOR=#9cdcfe]console[/COLOR].[COLOR=#dcdcaa]log[/COLOR]([COLOR=#ce9178]'#age text '[/COLOR] + [COLOR=#dcdcaa]$[/COLOR]([COLOR=#ce9178]"#age"[/COLOR]).[COLOR=#dcdcaa]html[/COLOR]());
      
    });
  },[COLOR=#b5cea8]1000[/COLOR]);
});
[/FONT][/COLOR]

read.htm:
Code:
[COLOR=#D4D4D4][FONT=Consolas]   :="Plc2Web".testString:

[/FONT][/COLOR]

index.html
Code:
[COLOR=#D4D4D4][FONT=Consolas]:="Plc2Web".testString:
  [COLOR=#808080]<[/COLOR][COLOR=#569cd6]td[/COLOR] [COLOR=#9cdcfe]id[/COLOR]=[COLOR=#ce9178]"age"[/COLOR][COLOR=#808080]>[/COLOR]k[COLOR=#808080]</[/COLOR][COLOR=#569cd6]td[/COLOR][COLOR=#808080]>[/COLOR]
  [COLOR=#808080]<[/COLOR][COLOR=#569cd6]td[/COLOR] [COLOR=#9cdcfe]id[/COLOR]=[COLOR=#ce9178]"ligthBarrier"[/COLOR][COLOR=#808080]></[/COLOR][COLOR=#569cd6]td[/COLOR][COLOR=#808080]>[/COLOR]
[/FONT][/COLOR]

In der console:

Code:
#age  +0
#age2 TestText
#age text undefined

Wie schon mal erwähnt, habe ich den testString nur nochmal eingefügt, um nachzuverfolgen, dass dieser auch gelesen werden kann.
 
Wenn ich

Code:
[COLOR=#D4D4D4][FONT=Consolas][COLOR=#9cdcfe]console[/COLOR].[COLOR=#dcdcaa]log[/COLOR]([COLOR=#ce9178]'#word '[/COLOR] + [COLOR=#9cdcfe]JSON[/COLOR].[COLOR=#dcdcaa]stringify[/COLOR]([COLOR=#9cdcfe]Word[/COLOR]));[/FONT][/COLOR]

kommt das hier:

Code:
#word ["\r\n\r\n\r\n   +0","TestText","+0\r\n"]
 
Das heißt, das Aufsplitten funktioniert. Ist "Plc2Web".age in der SPS auch 0?

Du verwendest also eine Seite fürs Anzeigen, und eine eigene für den javascript Code?

Ja die ist momentan 0. Wenn ich sie verändere, wird es auch sofort in der Console angezeigt.

Ja ich verwende eine eigene Seite für JavaScript. Ist einfach übersichtlicher.

Hast du eine Idee, woran es hapert?


EDIT

Code:
[COLOR=#DCDCAA][FONT=Consolas]$[/FONT][/COLOR][COLOR=#D4D4D4][FONT=Consolas]([/FONT][/COLOR][COLOR=#CE9178][FONT=Consolas]'#age'[/FONT][/COLOR][COLOR=#D4D4D4][FONT=Consolas]).[/FONT][/COLOR][COLOR=#DCDCAA][FONT=Consolas]html[/FONT][/COLOR][COLOR=#D4D4D4][FONT=Consolas]([/FONT][/COLOR][COLOR=#CE9178][FONT=Consolas]'hallohallo'[/FONT][/COLOR][COLOR=#D4D4D4][FONT=Consolas]);[/FONT][/COLOR]
Hier zeigt er mir auch nichts an. - undefinded
Kann das sein, dass es nicht weiß wo age ist? Also es meint, age wäre auf der read.htm?
 
Zuletzt bearbeitet:
Als erstes würde ich jetzt einmal den String und das Zerlegen wirklich gleich machen, damit nicht irgendein Teil nicht richtig funktioniert.

Also 3 Daten senden und drei Daten aufteilen.

Code:
$(document).ready(function(){
  $.ajaxSetup({ cache: false });
  setInterval(function() {          
    $.get('./read.htm', function(result){
      var Word = result.split("/");
      $('#age').html(Word[0]);
      $('#age1').html(Word[1]);
      $('#age_text').html(Word[2]);
    });
  },1000);
});

AnzeigeSeite

Code:
  <td id="age">k</td>
  <td id="age1">xy</td>
  <td id="age_text">age_text</td>

Hast Du es schon auf einer Seite versucht?

Ich verwende zwar auch eigene javascript Seiten für mehrfach verwendete Gsetzaln, aber die Abfrage der Daten ist immer auf der Anzeigeseite.
Mir ist momentan nicht klar, wie Du die Daten von der js Seite auf die Anzeigeseite übergibst.
 
Zuviel Werbung?
-> Hier kostenlos registrieren
Mir ist momentan nicht klar, wie Du die Daten von der js Seite auf die Anzeigeseite übergibst.

mit dem hier:
Code:
[COLOR=#808080][FONT=Consolas]<[/FONT][/COLOR][COLOR=#569CD6][FONT=Consolas]script[/FONT][/COLOR][COLOR=#D4D4D4][FONT=Consolas] [/FONT][/COLOR][COLOR=#9CDCFE][FONT=Consolas]type[/FONT][/COLOR][COLOR=#D4D4D4][FONT=Consolas]=[/FONT][/COLOR][COLOR=#CE9178][FONT=Consolas]"text/javascript"[/FONT][/COLOR][COLOR=#D4D4D4][FONT=Consolas] [/FONT][/COLOR][COLOR=#9CDCFE][FONT=Consolas]src[/FONT][/COLOR][COLOR=#D4D4D4][FONT=Consolas]=[/FONT][/COLOR][COLOR=#CE9178][FONT=Consolas]"page-js.js"[/FONT][/COLOR][COLOR=#808080][FONT=Consolas]></[/FONT][/COLOR][COLOR=#569CD6][FONT=Consolas]script[/FONT][/COLOR][COLOR=#808080][FONT=Consolas]>[/FONT][/COLOR]


Ich habe inzwischen den Fehler gefunden. Der hat irgendein Problem mit den

Code:
[COLOR=#D4D4D4][FONT=Consolas][COLOR=#808080]<[/COLOR][COLOR=#569cd6]td[/COLOR] [COLOR=#9cdcfe]id[/COLOR]=[COLOR=#ce9178]"age"[/COLOR][COLOR=#808080]>[/COLOR]k[COLOR=#808080]</[/COLOR][COLOR=#569cd6]td[/COLOR][COLOR=#808080]>[/COLOR]
  [COLOR=#808080]<[/COLOR][COLOR=#569cd6]td[/COLOR] [COLOR=#9cdcfe]id[/COLOR]=[COLOR=#ce9178]"ligthBarrier"[/COLOR][COLOR=#808080]></[/COLOR][COLOR=#569cd6]td[/COLOR][COLOR=#808080]>[/COLOR][/FONT][/COLOR]

Daher habe ich das mal entfernt und eine vorhandene Id benutzt:

Code:
...
[COLOR=#D4D4D4][FONT=Consolas][COLOR=#808080]<[/COLOR][COLOR=#569cd6]div[/COLOR] [COLOR=#9cdcfe]class[/COLOR]=[COLOR=#ce9178]"container1"[/COLOR][COLOR=#808080]>[/COLOR]
    [COLOR=#808080]<[/COLOR][COLOR=#569cd6]table[/COLOR] [COLOR=#9cdcfe]class[/COLOR]=[COLOR=#ce9178]"table table-dark table-hover table-sm"[/COLOR][COLOR=#808080]>[/COLOR]
      [COLOR=#808080]<[/COLOR][COLOR=#569cd6]thead[/COLOR][COLOR=#808080]>[/COLOR]
        [COLOR=#808080]<[/COLOR][COLOR=#569cd6]tr[/COLOR][COLOR=#808080]>[/COLOR]
          [COLOR=#808080]<[/COLOR][COLOR=#569cd6]th[/COLOR] [COLOR=#9cdcfe]scope[/COLOR]=[COLOR=#ce9178]"col"[/COLOR][COLOR=#808080]>[/COLOR]Alarm[COLOR=#808080]</[/COLOR][COLOR=#569cd6]th[/COLOR][COLOR=#808080]>[/COLOR]
          [COLOR=#808080]<[/COLOR][COLOR=#569cd6]th[/COLOR] [COLOR=#9cdcfe]scope[/COLOR]=[COLOR=#ce9178]"col"[/COLOR][COLOR=#808080]></[/COLOR][COLOR=#569cd6]th[/COLOR][COLOR=#808080]>[/COLOR]
          [COLOR=#808080]<[/COLOR][COLOR=#569cd6]th[/COLOR] [COLOR=#9cdcfe]scope[/COLOR]=[COLOR=#ce9178]"col"[/COLOR][COLOR=#808080]></[/COLOR][COLOR=#569cd6]th[/COLOR][COLOR=#808080]>[/COLOR]
        [COLOR=#808080]</[/COLOR][COLOR=#569cd6]tr[/COLOR][COLOR=#808080]>[/COLOR]
      [COLOR=#808080]</[/COLOR][COLOR=#569cd6]thead[/COLOR][COLOR=#808080]>[/COLOR]
      [COLOR=#808080]<[/COLOR][COLOR=#569cd6]tbody[/COLOR][COLOR=#808080]>[/COLOR]
          [COLOR=#808080]<[/COLOR][COLOR=#569cd6]tr[/COLOR][COLOR=#808080]>[/COLOR]
            [COLOR=#808080]<[/COLOR][COLOR=#569cd6]th[/COLOR] [COLOR=#9cdcfe]scope[/COLOR]=[COLOR=#ce9178]"row"[/COLOR][COLOR=#808080]>[/COLOR]Alarm Status[COLOR=#808080]</[/COLOR][COLOR=#569cd6]th[/COLOR][COLOR=#808080]>[/COLOR]
            [COLOR=#808080]<[/COLOR][COLOR=#569cd6]td[/COLOR] [COLOR=#9cdcfe]id[/COLOR]=[COLOR=#ce9178]"alarmONOFF"[/COLOR][COLOR=#808080]></[/COLOR][COLOR=#569cd6]td[/COLOR][COLOR=#808080]>[/COLOR]
            [COLOR=#808080]<[/COLOR][COLOR=#569cd6]td[/COLOR][COLOR=#808080]>[/COLOR]
              [COLOR=#808080]<[/COLOR][COLOR=#569cd6]form[/COLOR] [COLOR=#9cdcfe]method[/COLOR]=[COLOR=#ce9178]"post"[/COLOR] [COLOR=#9cdcfe]action[/COLOR]=[COLOR=#ce9178]""[/COLOR][COLOR=#808080]>
...[/COLOR]
[/FONT][/COLOR]

Und siehe da, bei alarmONOFF, wird der Wert von Word[0] angezeigt.
Keine Ahnung, wieso es die von oben nicht annimmt bzw was da falsch ist. Aber es funktioniert nun.

DANKE!
 
Vieles vereinfachen würde es wenn du in der SPS einen String mit einem kompletten Javascript Objekt schreibst, dann musst du überhaupt nichts mehr zerlegen und kannst direkt mit dem Namen auf den Wert zugreifen.

Beispielsweise schreibst du in der SPS:
Code:
{
  "TempOben":"12.3",
  "TempUnten":"13.3",
  "Durchfluss":"76",
  "phWert":"7.2",
  "TestText":"Hallo"
}

dann kannst du wenn du das als Json Objekt abfragst und das Ergebnis in eine Variable "daten" schreibst, mit daten["TempUnten"] auf den Wert zugreifen.

Das hat den Nachteil, dass in der SPS einen relativ langer String zusammengebaut werden muss.
Hier könnte man aber Komfort und Geschwindigkeit kombinieren, in dem man in der SPS nur das Datenarray schreibt, aber als Javascript Array ["12.3", "45.6"] und das dann mit einem anderen Array mit den Namen was man z.B. fest hinterlegen kann kombiniert, und daraus dann ein Objekt macht.

Beispiel:
Code:
var values = ["12.3", "13.4", "76", "7.2", "Hallo"];
var names = ["TempOben", "TempUnten", "Durchfluss", "pHWert", "TestText"];

var daten = {};

for (let i = 0; i < values.length; i++) {
    daten[names[i]] = values[i];
}

console.log(daten["TempOben"]);

Da kann man vieles vereinfachen was die ganze Sache wartbarer und nachvollziehbarer macht. Denkbar wären auch fertige GUI Elemente die automatisch über Events mit den Variablenwerten aktualisiert werden. dat.gui ist z.B. so eine einfache Bibliothek mit dem sich einfache Elemente wie Eingabefelder, Schieberegler usw. einfach mit Variablen verbinden lassen. Das Design ist dort aber sehr festgelegt, weil das nur für kurze Tests gedacht war.
 
Zurück
Oben