HMI Server HTML5 / JavaScript

slaud · 5 Februar 2019

Habe mir irgendwie erhofft die Funktion würde irgenwie so funktionieren....

Code:

    var ulint2 = BigInt(tchmi_base64encode(par1));

var bin = '0000000111010100101111011000011100010101110111110101011100100000';
var ulint3 = BigInt(parseInt(bin,2));
console.log(ulint3);
Funktioniert!

console.log(tchmi_base64decode('VHdpbkNBVCBITUk='));
Funktioniert!

console.log(tchmi_base64decode('QJIBo4u91AE='));
Wäre zu schön ergibt @£½Ô oder so ähnlich

alcapoune · 6 März 2020

Guten Tag,

ich schließe mich diesem Thread einmal an.

Ich möchte den Wert eines Symbols einer Variablen zuordnen. Wenn ich die Variable "WertderFunktion" in der Console ausgebe, ist dieser undefiniert.
Innerhalb der Funktion ist das ausgeben kein Problem aber ich bekomme ihn nicht aus der Funktion heraus.

Eigener code:

Code:

WertderFunktion = TcHmi.Symbol.readEx2('%s%PLC1.MAIN.sTest%/s%', function (data) {
        var value = data.value; 
        return value;   
});

Beckhoff original:

Code:

TcHmi.Symbol.readEx2('%s%PLC1.MAIN.sTest%/s%', function (data) {
    if (data.error === TcHmi.Errors.NONE) {
        // Handle result value... 
        var value = data.value; 
        console.log(value); 
    } else {
        // Handle error... 
    }
});

Freue mich auf Antworten. Danke!

Tobi-212 · 6 März 2020

Hallo alcapoune,

das lesen von Werten aus der PLC funktioniert azyklisch, d.h. die weitere Verarbeitung muss nach dem Beckhoff Original (Beispiel 2) geschehen.
Beckhoff sieht es so vor, dass die Werte einmal gelesen werden und dann in einer eigenen Funktion verarbeitet werden, welche bei erfolgreichem lesen ausgeführt wird.

anders ist es, wenn Server-Symbole gelesen werden, dies funktioniert auch zyklisch (dein Beispiel 1)

MfG

Tobi

alcapoune · 6 März 2020

Hallo Tobi-212,

vielen Dank für die Antwort.
Folgender Hintergrund : Ich möchte mehrere Variablen lesen und diese logisch verknüpfen. Das heißt, weitere Variablen müsste ich in der vorherigen Funktion lesen.
Soweit getestet habe ich das. Es funktioniert. Nur leider ist der Code aufgrund der Verschachtelung unnötig schwer zu lesen.

Code:

TcHmi.Symbol.readEx2('%s%PLC1.MAIN.sTest%/s%', function (data) {
    if (data.error === TcHmi.Errors.NONE) {
        // Handle result value... 
        var value = data.value; 
        console.log(value); 
        
        TcHmi.Symbol.readEx2('%s%PLC1.MAIN.sTest2%/s%', function (data) {
            
        if (data.error === TcHmi.Errors.NONE) {
        // Handle result value... 
        var value2 = data.value2; 
        console.log(value2);        
            
        });
            
        
    } else {
        // Handle error... 
    }
});

Gibt es noch weitere Möglichkeiten innerhalb von Javascript?

Gruß
alcapoune

zuse · 7 März 2020

TcHmi.Server.readSymbol bietet auch die Möglichkeit mehrere Variablen mit einem mal zu holen:

https://infosys.beckhoff.com/conten...27021601493164299.html?id=2313457748643584076

Alternativ "zu Fuss" selber in einem Request wie in dem Beispiel

https://infosys.beckhoff.com/conten.../9007202983683851.html?id=2621017435723165128

alcapoune · 21 April 2020

Guten Tag, die request Methode funktioniert bei mir einwandfrei. Vielen Dank für den Hinweis.

Vielleicht könnt Ihr mir bei einem anderen Problem helfen.
Meine Idee ist es, für jede Komponente via Mausklick den dazugehörigen Trend darzustellen. Zur Kommunikationskontrolle wollte ich zunächst nur die Farbe des Grafen ändern. In der Console wird mir "Trend Ok" ausgegeben. Nur leider ändert sich die Farbe nicht. Mit Hilfe der Funktion Write to Symbol funktioniert es. Für meine Zwecke möchte ich es aber gerne in Javascript haben. Habt ihr eine Idee, warum es nicht klappt?

Code:

 [COLOR=#008000]//TCHmi.Symbol.writeEx('%ctrl%TcHmiTrendLineChart_1::LineGraphDescription%/ctrl%',[/COLOR] 
 TcHmi.Server.writeSymbol([COLOR=#a0522d]'%ctrl%TcHmiTrendLineChart_1::LineGraphDescription%/ctrl%'[/COLOR],
    {
        [COLOR=#a0522d]"$schema"[/COLOR]: [COLOR=#a0522d]"http://json-schema.org/draft-04/schema"[/COLOR],
        [COLOR=#a0522d]"definitions"[/COLOR]:
        {
            [COLOR=#a0522d]"TrendLineChartLineGraphDescriptionDefinitionList"[/COLOR]:
            {
                [COLOR=#a0522d]"$schema"[/COLOR]: [COLOR=#a0522d]"http://json-schema.org/draft-04/schema"[/COLOR],
                [COLOR=#a0522d]"title"[/COLOR]: [COLOR=#a0522d]"TrendLineChartLineGraphDescriptionDefinitionList"[/COLOR],
                [COLOR=#a0522d]"type"[/COLOR]: [COLOR=#a0522d]"array"[/COLOR],
                [COLOR=#a0522d]"items"[/COLOR]:
                {
                        [COLOR=#a0522d]"type"[/COLOR]: [COLOR=#a0522d]"object"[/COLOR],
                        [COLOR=#a0522d]"title"[/COLOR]: [COLOR=#a0522d]"Line graph description"[/COLOR],
                        [COLOR=#a0522d]"description"[/COLOR]: [COLOR=#a0522d]"Defines one line graph descriptions."[/COLOR],
                        [COLOR=#a0522d]"properties"[/COLOR]: 
                        {
                                [COLOR=#008000]//"symbol": "%s%PLC1.Main.History.X%/s%",[/COLOR]
                                [COLOR=#a0522d]"symbol"[/COLOR]: [COLOR=#a0522d]"PLC1.Main.History.X"[/COLOR],
                                [COLOR=#a0522d]"yAxisId"[/COLOR]: [COLOR=#00008b]1[/COLOR],
                                [COLOR=#a0522d]"lineWidth"[/COLOR]: [COLOR=#00008b]1[/COLOR],
                                [COLOR=#a0522d]"lineColor"[/COLOR]: { [COLOR=#a0522d]"color"[/COLOR]: [COLOR=#a0522d]"rgba(3, 3, 3, 255)"[/COLOR] },
                                [COLOR=#a0522d]"pointDot"[/COLOR]: [COLOR=#0000ff]false[/COLOR],
                                [COLOR=#a0522d]"pointDotInStopMode"[/COLOR]: [COLOR=#0000ff]true[/COLOR],
                                    [COLOR=#a0522d]"pointDotRadius"[/COLOR]:
                                    {
                                        [COLOR=#a0522d]"type"[/COLOR]: [COLOR=#00008b]1[/COLOR],
                                        [COLOR=#a0522d]"minimum"[/COLOR]: [COLOR=#00008b]0[/COLOR]
                                    },
                                    [COLOR=#a0522d]"pointDotFillColor"[/COLOR]: { [COLOR=#a0522d]"color"[/COLOR]: [COLOR=#a0522d]"rgba(3, 3, 3, 255)"[/COLOR]  },
                                    [COLOR=#a0522d]"pointDotStrokeWidth"[/COLOR]:
                                    {
                                        [COLOR=#a0522d]"type"[/COLOR]: [COLOR=#00008b]1[/COLOR],
                                        [COLOR=#a0522d]"minimum"[/COLOR]: [COLOR=#00008b]0[/COLOR]
                                    },
                                    [COLOR=#a0522d]"pointDotStrokeColor"[/COLOR]: { [COLOR=#a0522d]"color"[/COLOR]: [COLOR=#a0522d]"rgba(3, 3, 255)"[/COLOR]}
                        },
                        [COLOR=#a0522d]"required"[/COLOR]: [ [COLOR=#a0522d]"yAxisId"[/COLOR] ]
                }
            }
        }
    }, 
    [COLOR=#0000ff]function[/COLOR] (data) {                         
     [COLOR=#0000ff]if[/COLOR] (data.error === TcHmi.Errors.NONE)
     {
          console.log([COLOR=#a0522d]'Trend Ok'[/COLOR]);
     }
      [COLOR=#0000ff]else[/COLOR] 
     {
         console.log([COLOR=#a0522d]'Trend Fehler'[/COLOR]);     
     }                        
                       
});

Grüße

zuse · 22 April 2020

Du willst ein Control-Symbol beschreiben. Das ist aber kein Server-Symbol. Dafür musst du eine andere API TcHmi.Symbol.writeEx nutzen:
https://infosys.beckhoff.com/conten.../9007202983711499.html?id=7751432286372802275

Im auskommentierten Code steht fälschlicherweise ein großes C: TCHmi
Das data.error ist ein bischen gemein. Das ist nur der Kommunikationsfehler. Wenn du dir data komplett anguckst steht da:

Code:

{
  "error": 0,
  "response": {
    "apiVersion": 9,
    "requestType": "ReadWrite",
    "id": 7,
    "sessionId": "3be3278196a7756f533ba15d841d65421f8198502fe1218b6da8e583e53f2c607b33393765f64a1fe1b653806b57ad51df6fc0117ad13b270e57ae0a80ccbf02",
    "commands": [
      {
        "symbol": "%ctrl%TcHmiTrendLineChart_1::LineGraphDescription%/ctrl%",
        "error": {
          "domain": "TcHmiSrv",
          "code": 513,
          "message": "SYMBOL_NOT_MAPPED",
          "reason": "Symbol not mapped"
        },
        "writeValue": {
         ...

      }
    ]
  }
}

alcapoune · 23 April 2020

Schon leicht betriebsblind. Das C habe ich übersehen. Vielen Dank dafür.
Die von dir gepostete Fehlermeldung, kann ich die in der Console von TwinCat sehen?

Kommunikation ist da aber die Oberfläche vom Trend Line Chart verschwindet beim Ausführen des Events.

Code:

TcHmi.js:331 [2020-04-23T13:24:19.747Z][Error] [Source = Control, Class = TcHmiTrendLineChart, Id = TcHmiTrendLineChart_1] Server responds with error. Details: Code: 2048/0x800, Message: EXTENSION

zuse · 26 April 2020

Ich habe nur statt deinem

Code:

console.log('Trend Ok');

Das hier genutzt:

Code:

console.log(data);

Das trendlinechart wird leer, wenn es nicht passend konfiguriert ist.
Aber hier scheint die Extension einen Fehler zu melden. Welcher das ist, kann man leider nicht sehen... 8-/
Das control könnte noch falsch konfiguriert sein...

alcapoune · 30 April 2020

Laut Fehlermeldung liegt das Problem bei dem Symbol. "NODATA_FOUND". Aber das Symbol verwende ich ja auch bei der oben beschriebenen Anwendung "Whrite to Symbol".
Ich habe ein wenig experementiert und auch mal ein neues control verwendet. Die Fehlermeldung hat sich ein wenig erweitert aber leider hat sich kein Erfolg eingestellt.

Code:

  TcHmi.js:331 [2020-04-30T07:38:04.959Z][Error] [Source=Control, Module=TcHmi.Controls.Beckhoff.TcHmiTrendLineChart, Id=TcHmiTrendLineChart_3] Server responds with error for command for symbol=TcHmiSqliteHistorize.GetTrendLineData. Details: Code: 2048/0x800, Message: EXTENSION
  as result of: Code: 9/0x9, Message: NODATA_FOUND
    Domain: TcHmiSqliteHistorize

Meine console gibt mir mit console.log(data) nur folgendes aus:

Code:

    {error: 0, value: undefined, details: undefined}
details: undefined
error: 0
value: undefined
__proto__: Object

olivertt82 · 30 April 2020

Hallo zusammen,

Um auf ein Attribute eines Controls zu schreiben, gibt es die Controls API. "TcHmi.Controls"
https://infosys.beckhoff.de/content...63050398512099083.html?id=4342943363251181402

Mit "TcHmi.Controls.get('IdentifierDesControls')" holt Ihr Euch eine Referenz auf das Control.
Dies kann man dann in einer Variablen speichern um es öfter zu nutzen, oder auch direkt.

Alle Attribute der Controls sind auch per API Methode zu erreichen. Attributename mit einem "set" oder "get" vorne dran.
In Fall des TrendLineCharts, z.B. setLineGraphDescriptions()

Code:

TcHmi.Controls.get([COLOR=#a0522d]'TcHmiTrendLineChart'[/COLOR]).setLineGraphDescriptions();

In den Klammen übergebt Ihr dann den Wert direkt oder eine Variable.

Das Prinzip geht bei allen Attributen, auch lesend mit einem get vorne vor.

Beste Grüße,
Oliver

alcapoune · 30 April 2020

Guten Tag, danke für die Herangehensweise.
Ich bekomme den Namen der X-Achse geändert.

Code:

TcHmi.Controls.get([COLOR=#a0522d]'TcHmiTrendLineChart_3'[/COLOR]).setXAxisName([COLOR=#a0522d]"Test"[/COLOR]);

Aber sobald ich in den "setLineGraphDescriptions" etwas schreibe, habe ich den gleichen Fehler.

Code:

[COLOR=#008000]TcHmi.Controls.get('TcHmiTrendLineChart_3').setLineGraphDescriptions({symbol:"[/COLOR][COLOR=#008000]PLC1.Main.History.X"});[/COLOR][COLOR=#008000][/COLOR]

Wieso kann er mit dem Symbolnamen nichts anfangen. Dieser steht 1:1 so in der Historize. Muss man eventuell etwas ergenzen, wenn man sich auf ein Symbol in der Historize bezieht?

Vielen Dank!

olivertt82 · 30 April 2020

Hallo,

es braucht etwas mehr Informationen als nur das Symbol.
Am besten ist Du holst Dir einmal mit dem getLineGraphDescriptions() den aktuellen Inhalt um zu sehen was alles benötigt wird.
Du musst all die Informationen übergeben, die auch im Konfigurationsfenster eingetragen werden.
Also Y-Achsen Zugehörigkeit, etc.
Wenn Du nur ein Objekt mit "symbol" übergibst, überschreibst Du die kompletten Settings intern.

Ich würde es folgender Maßen machen.
Hole dir mit dem "get" das aktuelle Konfigurations Objekt, ändere den "symbol" Eintrag und spiele das komplette Objekt wieder mit "set" zurück.

Code:

const myTrend = TcHmi.Controls.get('TcHmiTrendLineChart_3');
let currentConfig = myTrend.getLineGraphDescriptions();
currentConfig[0].symbol = 'PLC1.Main.History.X';
myTrend.setLineGraphDescriptions(currentConfig);

Viele Grüße,
Oliver

alcapoune · 4 Mai 2020

Nabend,
prima es funktioniert. Vielen Dank dafür!

Grüße

alcapoune · 6 Mai 2020

Moin,
zurzeit mappe ich jedes Symbol manuell. Bei einem größeren Projekt ist es in meinen Augen eine Zeitverschwendung. Meine Idee, entweder alle Symbole zu mappen oder eine Liste/Datenbank zu erstellen, um das HMI System zu füttern. Die Möglichkeit alle Symbole zu mappen, habe ich nicht gefunden. Es gibt den Button „Automap Symbols“. Dieser mappt aber nicht, wie gedacht alle Symbole aus der Steuerung. Eine brauchbare Datei oder Datenbank im HMI Ordner konnte ich auch nicht finden, um den zweiten Weg einzuschlagen.
Wie macht ihr das mit den Symbolen?

Der Speicherort für die TcHmiSqliteHistorize liegt Standardmäßig im HMI Verzeichnis. Gibt es eine Möglichkeit, den Pfad zu ändern? Ich würde die Historizedaten auf einem externen Speichermedium verlagern.
Grüße

roboticBeet · 14 Mai 2020

Wir arbeiten mit Koppel-DBs. Das heißt wir haben einen DB (bzw. GVL) in welchem wir zwei Strukturen liegen haben (ToPanel, FromPanel). Dann mappen wir nur noch diese beiden Datentypen im HMI. Wenn die Struktur erweitert wird, weil zusätzliche Signale erforderlich werden, kann das Mapping auf der HMI-Seite aktualisiert werden und die zusätzlichen Symbole in der Struktur sind verfügbar.

Hiermit fahren wir bei mittlerer Anlagengröße (mehrere hundert Variablen) bislang ganz gut.

Dieser Workflow ist aber stark von unserer Hauptarbeit mit Siemens SPSen inspiriert und höchstwahrscheinlich nicht als optimal in TwinCAT anzusehen.

HMI Server HTML5 / JavaScript

slaud

Level-2

alcapoune

Level-2

Tobi-212

Level-1

alcapoune

Level-2

zuse

Level-1

alcapoune

Level-2

zuse

Level-1

alcapoune

Level-2

zuse

Level-1

alcapoune

Level-2

olivertt82

Level-1

alcapoune

Level-2

olivertt82

Level-1

alcapoune

Level-2

alcapoune

Level-2

roboticBeet

Level-2

Similar threads

Wir schützen deine Privatsphäre