# HMI Server HTML5 / JavaScript



## mkersch (18 Juli 2017)

Hallo Forenmitglieder
Ich möchte ein Projekt mit einen HMI Server von Beckhoff umsetzen (TF2000).
Die Daten für den Server stelle ich in einem OPC-UA Server bereit.
Hat von Euch bereits jemand diesen HMI Server im Einsatz ?

MFG
Mkersch


----------



## Guga (18 Juli 2017)

Ich glaube dass die Opc Anbindung erst im Herbst verfügbar sein wird.
Im Moment bist du auf ADs limitiert.

Guga


----------



## ksc (19 Juli 2017)

Hallo,

Guga hat recht, OPC UA kommt erst später...

Grüße


----------



## MasterOhh (19 Juli 2017)

Ich wusste bis eben garnicht, dass TC3 HMI schon verfügbar ist. Muss ich gleich mal runterladen und in einer ruhigen Minute etwas mit rumspielen


----------



## mkersch (19 Juli 2017)

Vielen Dank für Eure Antworten.
Wenn OPC-UA noch nicht verfügbar, dann muss ich auf ADS ausweichen.
Mein Hauptziel ist es erste Erfahrungen mit dem HMI Server und dem Entwicklungswerkzeug TE2000 zu sammeln.
Zusätzlich möchte ich noch JavaScript Libs (Chart.js) integrieren.
Da die Doku  nicht recht ausführlich ist, möchte ich in diesem Forum Erfahrungen austauschen.

MfG
mkersch


----------



## slaud (21 Juli 2017)

Charts.js einbinen wär ne coole sache hab ich grad probiert habs aber noch nicht hin bekommen,.....


----------



## mkersch (21 Juli 2017)

Hallo slaud,

wäre sehr interessiert an der Möglichkeit Chart.js in die HMI einzubinden. Die Standardsoftware von Beckhoff lässt nur Balken und Liniengrafiken zu.

mfg

mkersch


----------



## MasterOhh (21 Juli 2017)

Klar das die Diagramme im HMI nicht wirklich was taugen, Beckhoff möchte natürlich das man noch ne Scope Lizenz zum HMI dazu erwirbt (Wenn sie denn mal erhältlich ist).

Ansonsten bin ich erstmal echt positiv überrascht. Nach einer Stunde rumspielen, ohne groß in die Doku zu schauen (die wie immer mehr Fragen offen lässt als beantwortet) habe ich mir schon nen kleines funktionierendes HMI zusammen geschustert. 
Das mit dem Live View ist auch ne geniale Sache.


----------



## slaud (22 Juli 2017)

Theoretisch hab ich das mal hinbekommen, aber dynamisch mit daten füllen? vieleicht kann ja jemand weiterhelfen



```
src=[COLOR=#a0522d]"Javascript/Chart.js"[/COLOR]
[COLOR=#0000ff]var[/COLOR] ctx = document.getElementById([COLOR=#a0522d]"myChart"[/COLOR]);
[COLOR=#0000ff]var[/COLOR] config = {
            type: [COLOR=#a0522d]'line'[/COLOR],
            data: {
                labels: [[COLOR=#00008b]1[/COLOR], [COLOR=#00008b]2[/COLOR], [COLOR=#00008b]3[/COLOR], [COLOR=#00008b]4[/COLOR], [COLOR=#00008b]5[/COLOR], [COLOR=#00008b]6[/COLOR], [COLOR=#00008b]7[/COLOR]],
                datasets: [{
                    label: [COLOR=#a0522d]"My First dataset"[/COLOR],
                    backgroundColor:  [COLOR=#a0522d]'rgb(1, 87, 155)'[/COLOR],
                    borderColor:  [COLOR=#a0522d]'rgb(1, 87, 155)'[/COLOR],
                    data: [[COLOR=#00008b]1[/COLOR],[COLOR=#00008b]1[/COLOR],[COLOR=#00008b]5[/COLOR],[COLOR=#00008b]1[/COLOR],[COLOR=#00008b]7[/COLOR],[COLOR=#00008b]1[/COLOR],[COLOR=#00008b]1[/COLOR]
                    ],
                    fill: [COLOR=#0000ff]false[/COLOR],
                }, {
                    label: [COLOR=#a0522d]"My Second dataset"[/COLOR],
                    fill: [COLOR=#0000ff]false[/COLOR],
                    backgroundColor:  [COLOR=#a0522d]'rgb(244, 67, 54)'[/COLOR],
                    borderColor:  [COLOR=#a0522d]'rgb(244, 67, 54)'[/COLOR],
                    data: [[COLOR=#00008b]2[/COLOR],[COLOR=#00008b]3[/COLOR],[COLOR=#00008b]4[/COLOR],[COLOR=#00008b]5[/COLOR],[COLOR=#00008b]6[/COLOR],[COLOR=#00008b]7[/COLOR],[COLOR=#00008b]8[/COLOR]],
                }]
            },
            options: {
                responsive: [COLOR=#0000ff]true[/COLOR],
                title:{
                    display:[COLOR=#0000ff]true[/COLOR],
                    text:[COLOR=#a0522d]'Chart.js Line Chart'[/COLOR]
                },
                tooltips: {
                    mode: [COLOR=#a0522d]'index'[/COLOR],
                    intersect: [COLOR=#0000ff]false[/COLOR],
                },
                hover: {
                    mode: [COLOR=#a0522d]'nearest'[/COLOR],
                    intersect: [COLOR=#0000ff]true[/COLOR]
                },
                scales: {
                    xAxes: [{
                        display: [COLOR=#0000ff]true[/COLOR],
                        scaleLabel: {
                            display: [COLOR=#0000ff]true[/COLOR],
                            labelString: [COLOR=#a0522d]'Month'[/COLOR]
                        }
                    }],
                    yAxes: [{
                        display: [COLOR=#0000ff]true[/COLOR],
                        scaleLabel: {
                            display: [COLOR=#0000ff]true[/COLOR],
                            labelString: [COLOR=#a0522d]'Value'[/COLOR]
                        }
                    }]
                }
            }
        };
[COLOR=#0000ff]var[/COLOR] myChart = [COLOR=#0000ff]new[/COLOR] Chart(ctx, config);
```


----------



## NieZuSpaet (22 Juli 2017)

Für TC2 gibt es ja den AdsWebservice. Damit hat man vollen Zugriff von JavaScript auf SPS-Variablen. Damit ist das kein Problem. Gibt es sowas auch schon für TC3?
Gruß
Holger


----------



## oliver.tonn (22 Juli 2017)

Hallo Holger,


NieZuSpaet schrieb:


> Gibt es sowas auch schon für TC3?


für HTML5 ja, da gibt es den HMI Server (TF2000). Wie der im Einzelnen genau funktioniert weiß ich allerdings nicht. Der Server funktioniert auch mit TC2 und, sobald er OPC UA unterstützt, auch mit anderen Steuerungen. 



Von irgendwas mit Internetzugang gesendet


----------



## slaud (22 Juli 2017)

Hab das jetzt noch ein bischen getestet und herausgefunden das man mit "Function(Javascript)" ein canvas element erzeugen kann, und in das Element dann ein Chart.js hineinzeichnen kann, dann könnte man auch Werte übergeben...................
aber bin kein Javascript experte


----------



## oliver.tonn (22 Juli 2017)

Hallo MasterOhh,


MasterOhh schrieb:


> Beckhoff möchte natürlich das man noch ne Scope Lizenz zum HMI dazu erwirbt (Wenn sie denn mal erhältlich ist).


was genau meinst Du mit wenn Lizenzen mal erhältlich sind? Mein aktueller Hauptkunde setzt das Scope sowohl unter TC2 und TC3 ein und hat dafür mehrere Lizenzen, einige davon erst kürzlich erworben. 

Von irgendwas mit Internetzugang gesendet


----------



## MasterOhh (22 Juli 2017)

oliver.tonn schrieb:


> Hallo MasterOhh,
> 
> was genau meinst Du mit wenn Lizenzen mal erhältlich sind? Mein aktueller Hauptkunde setzt das Scope sowohl unter TC2 und TC3 ein und hat dafür mehrere Lizenzen, einige davon erst kürzlich erworben.
> 
> Von irgendwas mit Internetzugang gesendet



Ich meinte das TC3 HMI Scope (TF2300), das laut der Beckhoff Webseite erst im Q4 2017 erhältlich ist.


----------



## slaud (22 Juli 2017)

Bin grad auf der suche nach einer alternative, wo das eventuell ein bischen einfacher geht!!!


----------



## oliver.tonn (22 Juli 2017)

MasterOhh schrieb:


> Ich meinte das TC3 HMI Scope (TF2300), das laut der Beckhoff Webseite erst im Q4 2017 erhältlich ist.


Ach so, Ok, das sowas kommt habe ich gar nicht mitbekommen. Ich dachte Du meintest das TC3 Scope View Professional  (TE1300) oder das TwinCAT Scope 2 (TS3300).



Von irgendwas mit Internetzugang gesendet


----------



## slaud (23 Juli 2017)

Hat mich jetzt aber ein bischen von meiner Freizeit gekostet, aber hat noch einige Bugs bin nicht grad Webentwickler ;-)

```
(function (TcHmi) {

    var DrawChart = function (LabelChart,LabelX,LabelY,Data) {
        scr = "JavaScript/Chart.js";
        var c = document.getElementById("CanvasID");
        if (c === undefined || c === null) {
            c = document.createElement("canvas");
        }
        c.id = "CanvasID";
        c.height = 500;
        c.width = 700;
        document.body.appendChild(c);
        console.log(c);
        var ctx = c.getContext("2d");
        console.log(ctx);
        var config = {
            type: 'line',
            data: {
                labels: [0, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000],
                datasets: [{
                    label: "My Second dataset",
                    backgroundColor: 'rgb(1, 87, 155)',
                    borderColor: 'rgb(1, 87, 155)',
                    data: Data,
                    fill: false
                }, {
                    label: "My Second dataset",
                    fill: false,
                    backgroundColor: 'rgb(244, 67, 54)',
                    borderColor: 'rgb(244, 67, 54)',
                    data: [0, 2, 4, 6, 8, 10, 12]
                }]
            },
            options: {
                responsive: false,
                title: {
                    display: true,
                    text: LabelChart
                },
                tooltips: {
                    mode: 'index',
                    intersect: false
                },
                hover: {
                    mode: 'nearest',
                    intersect: true
                },
                scales: {
                    xAxes: [{
                        display: true,
                        scaleLabel: {
                            display: true,
                            labelString: LabelX
                        }
                    }],
                    yAxes: [{
                        display: true,
                        scaleLabel: {
                            display: true,
                            labelString: LabelY
                        }
                    }]
                }
            }
        };
        var myChart = new Chart(ctx, config);

    };
    
    TcHmi.Functions.registerFunction('DrawChart', DrawChart);
})(TcHmi);
```


----------



## ADS_0x1 (23 Juli 2017)

NieZuSpaet schrieb:


> Für TC2 gibt es ja den AdsWebservice. Damit hat man vollen Zugriff von JavaScript auf SPS-Variablen. Damit ist das kein Problem. Gibt es sowas auch schon für TC3?
> Gruß
> Holger




Wenn mich nicht alles täuscht, dann ist ADS = ADS, sprich: man müsste auch auf TC3 zugreifen können. Es gibt jemanden, der hat dafür mal einen Wrapper gebaut, um das noch einfacher einbinden zu können, findet man unter TAME (Link: http://tomcx.github.io/tame4/) 

Damit sollte man Daten auslesen können, muss dann nur noch jemand ne Zuweisung machen und die entsprechend darstellen.


Was mich wundert: Die HMI ist von Beckhoff extra in HTML 5 und Js gebaut, da wird es doch wohl hoffentlich relativ einfach die Möglichkeit geben, direkt auf Variablen zugreifen zu können... 
Muss mir das mal in der Doku anschauen, wenn ich nochmal Zeit habe.


----------



## slaud (23 Juli 2017)

Ja ist echt einfach aufgebaut, und man kann Symbole direkt zur PLC mappen, und dann ins Javascript als Parameter übergeben,.....
aber die Anleitung ist etwas dürftig hab etwas gebraucht bis ich das rausgefunden habe,
und wie gesagt, bin nicht grad ein Webprogrammierer...........


----------



## oliver.tonn (23 Juli 2017)

@slaud: Wieso willst Du es denn so kompliziert machen? Ich habe gerade mal schnell ein Projekt erstellt mit einem Array of Bytes und im HMI ein Bar Graph erstellt. Das ging ganz einfach und die Daten werden sofort Online dargestellt. Ein Line Graph gibt es auch, aber das ist wohl etwas komplizierter. Auf jeden Fall muss man nicht unbedingt selbst was programmieren.


----------



## MasterOhh (23 Juli 2017)

Manchmal reicht ein einfacher Line- oder Bar- Chart halt nicht aus. Und gerade die Möglichkeit über das mitgelieferte Standartangebot an Objekten und Controls hinaus zu gehen, macht ja das TC3 HMI so interessant.


----------



## mkersch (24 Juli 2017)

Hallo slaud,

Ja ist echt einfach aufgebaut, und man kann Symbole direkt zur PLC mappen, und dann ins Javascript als Parameter übergeben,.....
 aber die Anleitung ist etwas dürftig hab etwas gebraucht bis ich das rausgefunden habe,
 und wie gesagt, bin nicht grad ein Webprogrammierer........... 

Ich habe schon einige Stunden damit gekämpft, schaffe es aber nicht PLC-Variablen mit Java-Script Variablen zu mappen.
Könntest Du mir einen Tip geben wie ich an die Sache rangehen soll.

mfg.
mkersch


----------



## NieZuSpaet (24 Juli 2017)

Guck doch mal bei tomcx/tame4 auf github. Es hat da auch Beispiele mit SPS-Programm und entsprechenden HTML / JavaScript Seiten


----------



## slaud (24 Juli 2017)

Das ist ganz einfach!
Neues Element hinzufügen Funktion(javascript)
Ist mit einem Eingangsparameter können aber auch mehrere angeleget werden!
kann dann mit Funktion binding einem Button oder etwas ähnlichem zugeordnet werden!





Falls jemand herausfindet wie man dynamisch auf ein sich ändernde Variable reagiert wäre ich auch dankbar!


----------



## NieZuSpaet (24 Juli 2017)

slaud schrieb:


> Falls jemand herausfindet wie man dynamisch auf ein sich ändernde Variable reagiert wäre ich auch dankbar!



Java-Script seitig musst du die Abfrage des SPS-Variablen in einen LOOP sezten

window.setTimeout('loop-function'),300);

In der loop-function sollten alle Abfragen stehen, die dynamisch verfügbar sein sollen.

Gruß
Holger


----------



## slaud (24 Juli 2017)

das mit einer Schleife zu machen scheint mir nicht so toll, würde lieber ein script ausführen (on var changed) oder so


----------



## mkersch (24 Juli 2017)

Hallo Forenmitglieder,

vielen Dank für Eure Beiträge.

Bin jetzt soweit, dass ich bei betätigen eines Button, eine JavaScript Funktion mit Parameter aufgerufen wird.

       <script data-tchmi-target-attribute="data-tchmi-trigger" type="application/json">        
        [
          {
            "event": "TcHmiButton.onPressed",
            "actions": [
              {
                "objectType": "Function",
                "active": true,
                "fn": "FunctionJS1",
                "fnParams": [
                  {
                    "objectType": "Symbol",
                    "symbolExpression": "%s%PLC1.MAIN.zaehler%/s%"
                  }
                ]
              }
            ]
          }
        ]

Bin auf weiter Beiträge gespannt.
Wie in den beiden vorhergehenden Beiträgen bereits geschrieben, möchte ich meine Funktion natürlich immer in bestimmten Zeitabständen oder bei Änderung eines
Wertes aufrufen.
So kann ich meine gewünschte Grafik (Chart.js) immer aktuell ausgeben.

mfg.
mkersch


----------



## slaud (24 Juli 2017)

Mein aktuelles Problem ist das ich in den Hintergrund Zeichne und nicht in den aktellen Content in die oberste Ebene





Hab grad rausgefunden das es wichtig ist wo man das Canvas Element erstellt!
document.body.appendChild(c);
fügt das ganze am falschen Ort ein,.......... da mus ich jetzt ein bischen nachdenken!


----------



## bstr (25 Juli 2017)

>Falls jemand herausfindet wie man dynamisch auf ein sich ändernde Variable reagiert wäre ich auch dankbar!

An jedem Control gibt es bei den Ereignissen ganz oben eine Kategorie "Custom" die man aufklappen kann. Neben dem leeren Feld dort gibt es ein graues Rechteck, wenn man das anklickt kann man eine Variable auswählen und ein Ereignis anlegen, was immer dann ausgelöst wird, wenn die ausgewählte Variable sich ändert.

Siehe gelb markierten Bereich im Screenshot:


----------



## slaud (27 Juli 2017)

Ich würde ein gerne ein canvas einbinden aber bekomm das irgendwie nicht gebacken
Das canvas wird zwar meiner meinung richtig erzeugt aber an der fallschen Position und unsichtbar!
Kann mir jemand ein paar tipps geben?


```
(function (TcHmi) {

    var Test = function (par1) {

        var einzufuegendesObjekt = document.createElement("canvas");
        einzufuegendesObjekt.id = "CanvasID";
        einzufuegendesObjekt.width = 500;
        einzufuegendesObjekt.height = 300;
        einzufuegendesObjekt.style = "visible";

        einzufuegendesObjekt.clientLeft = 20;
        einzufuegendesObjekt.clientHeight = 20;
        einzufuegendesObjekt.style.backgroundColor = "#434747";


        var vorhandenesObjekt = document.getElementById("TcHmiImage");
        vorhandenesObjekt.insertBefore(einzufuegendesObjekt, vorhandenesObjekt[0]);


            var ctx = einzufuegendesObjekt.getContext('2d');

            ctx.fillRect(25, 25, 100, 100);
            ctx.clearRect(45, 45, 60, 60);
            ctx.strokeRect(50, 50, 50, 50);
        
    };
    
    TcHmi.Functions.registerFunction('Test', Test);
})(TcHmi);
```


----------



## bstr (27 Juli 2017)

Nimm einen HTML-Host (ist ein eigenes Control was beliebiges HTML aufnehmen kann und darstellt) und tipp da das Canvas direkt in den HTML-Code. 
Ganz ohne Javascript. Gib dem Canvas eine ID und greif dann darüber aus dem Javascript-Code zu.


----------



## mkersch (28 Juli 2017)

Hallo 

Nach einigen Stunden harter Arbeit läuft es jetzt. D.h. ich habe eine Grafik mittels der Javascript LIB Chart.js in die Beckhoff HMI integriert.

Nochmals vielen Dank für Eure Beiträge.



> <div id="TcHmiHtmlHost" data-tchmi-type="tchmi-html-host" data-tchmi-html-host="" data-tchmi-height="300" data-tchmi-height-unit="px" data-tchmi-left="130" data-tchmi-left-unit="px" data-tchmi-top="10" data-tchmi-top-unit="px" data-tchmi-width="400" data-tchmi-width-unit="px">
> <p> 'hallo' </p>
> <canvas id="Michael" width="400" height="200">
> Dein Browser kann diese Grafik nicht darstellen.
> ...





> var DrawChart = function (LabelChart,LabelX,LabelY,Daten) {
> scr = "Mein_JavaScrit/Chart.js";
> var canvas = document.getElementById("Michael"); // Get the element with id="demo"
> var ctx = canvas.getContext('2d');
> ...



mfg

mkersch


----------



## slaud (28 Juli 2017)

Habt ihr einen Screenshot, wie schaut das ganze bei euch aus, könnt ihr den Raster schon einstellen?
Habs auch hinbekommen, aber bei mir klappt es jetzt mit dem dynamisch erzäugen jetzt!


----------



## slaud (29 Juli 2017)

Hab grad ausprobiert schöne Menü's mit tabs lassen sich auch erstellen!


----------



## Hendrik (1 August 2017)

Moin ich bin gerade angefangen mich mit der neuen HMI auseinander zusetzten.

habt ihr brauchbares Info Material gefunden?
Im Infosys steht ja mal noch fast Garnichts hierzu.

Freue mich über alle brauchbaren Informationen zu diesem Thema =)

MfG Hendrik


----------



## bstr (1 August 2017)

Das Infosys wurde irgendwann letzte Woche aktualisiert: https://infosys.beckhoff.de/content...18014401179207435.html?id=8048922880875699469


----------



## Hendrik (1 August 2017)

Okay. Aber finde das recht dürftig irgendwie. =(

Wie zum Beispiel kann man ein Texteingabefeld mit der Bildschirmtastatur einbinden? 

Oder wie wird eine weitere Seite aufgerufen usw.?


----------



## bstr (1 August 2017)

Inhalte von Seiten können in Region-Controls die als Container dafür funktionieren, geladen werden.
Wenn Du eine ganze Seite umschalten willst, müßtest Du eine bildschirmgroße Region dafür in die Hauptseite ziehen und deren Inhalt ändern.

In der Region gibt es ein Property namens "TargetContent" in das eine Content-Datei (Add New->Content, https://infosys.beckhoff.de/index.p.../9007203100069131.html&id=3825672932332673445) geladen werden kann.
Über Ereignisse, z.B. einen Button-Click, kann man den Inhalt austauchen: https://infosys.beckhoff.de/index.p.../9007203100065035.html&id=4335581486403842846

Um Texteingabefelder mit der Bildschirmtastatur zu verbinden, legst Du eine Bildschirmtastatur an (aus der Toolbox in die Seite ziehen): https://infosys.beckhoff.de/index.p.../9007203100091659.html&id=5313699027831814966, der Rest geht dann automatisch. Sobald ein Textelement den Fokus hat, sendet die Tastatur das Zeichen an das gerade aktive Element.

Wenn Du möchtest, dass die Tastatur erst dann sichtbar wird wenn Du mit dem Cursor in die TextBox wechselst, schaltest Du sie im onFocusIn der entsprechenden TextBox sichtbar und im onFocusOut wieder unsichtbar.
So kannst Du auf der gleichen Seite verschiedene Bildschirmtastaturen für verschiedene Eingabeelemente verwendern (z.B. je nach Element eine nur mit Ziffern und eine vollständige oder ein eigenes Layout).


----------



## Hendrik (1 August 2017)

Danke Dir das mit der Tastatur habe ich hinbekommen =) 

das mit dem Seiten wechsel versuche ich jetzt direkt im anschluss.

Wie kann man eigentlich Min und Max Werte dem eingabefeld mitgeben und wie wird die verknüpfung zur PLC angegangen?


----------



## bstr (1 August 2017)

Mit einer oder mehreren PLCs verbindet man sich, indem man in der Serverkonfiguration im Solution Explorer zweimal auf "ADS" unter "Extensions" klickt und dann dort eine Verbindung zur PLC konfiguriert (AmsNetId und Port eingeben, Port 801 für TC2, Port 851 für TC3). Falls eine TwinCAT 3-PLC auf dem Engineering-Rechner lokal läuft, ist die Verbindung automatisch eingerichtet.
Details hier: https://infosys.beckhoff.com/index....eering/3746036875.html&id=4234054165313216969

Fast jede Eigenschaft fast jedes Controls kann mit einer SPS-Variablen verbunden werden und übernimmt dann den Wert inklusive Änderungen aus der PLC. 
Außerdem können die Symbole in Aktionen die man unter den Events anlegen kann, benutzt werden um z.B. Bedingungen abzubilden oder abhängig von Werten die Oberfläche zu ändern.

Symbole können aus dem Config-Toolfenster auf Properties der Controls per Drag&Drop gezogen oder über das kleine Quadrat rechts neben einem Property ausgewählt werden.

Symbole und Bindings:
https://infosys.beckhoff.com/index....eering/2669765131.html&id=5381059392457230870

Min und Max Werte an Textfeldern werden so gelöst, dass man im onTextChanged-Ereignis mit einer Condition den Wert prüft und entsprechend reagiert (rot markieren, Wert ändern o.Ä.) wenn er außerhalb des Bereichs liegt bevor man den Wert dann in die PLC schreibt. Alternativ kann man auch einen Slider (heißt hier LinearGauge) nehmen, dort kann man einen Bereich einstellen.
Falls das öfter vorkommt, könnte man sich auch ein UserControl für so einen Fall (TextBox mit Begrenzung) aus einer TextBox mit den entsprechenden Regeln zusammenklicken und min und max über Parameter nach außen führen.


----------



## ADS_0x1 (1 August 2017)

Ich wollte auch mal in das neue HMI Engineering Tool hineinschauen, aber ich bekomme das bei mir leider nicht installiert. Ich habe zunächst TwinCAT auf die 4022 geupdatet, anschließend das TE2000 Package (erfolgreich, sprich: Ohne Fehler) installiert und dann.... nix. Ich habe in meinem Visual Studio keine Auswahl für ein neues HMI Projekt. 

Habe dann eines der Beispiele von der Beckhoff Homepage heruntergeladen und wollte dies öffnen - geht leider auch nicht, wirft die Fehlermeldung, dass das HMI-Projekt nicht geöffnet werden kann. Nun bin ich ratlos...


```
UnsupportedThis version of Visual Studio is unable to open the following projects. The project types may not be installed or this version of Visual Studio may not support them. 
For more information on enabling these project types or otherwise migrating your assets, please see the details in the "Migration Report" displayed after clicking OK.
	 - TcHmi01_TrafficLight, "C:\Users\blubb\Downloads\3922539659 (1)\TcHmi01_TrafficLight\TcHmi01_TrafficLight.hmiproj"




Non-functional changes required
Visual Studio will automatically make non-functional changes to the following projects in order to enable them to open in Visual Studio 2013, Visual Studio 2012, and Visual Studio 2010 SP1. Project behavior will not be impacted.
	 - TcHmiTraining_PracticalSamples, "C:\Users\blubb\Downloads\3922539659 (1)\TcHmiTraining_PracticalSamples.sln"
```


----------



## oliver.tonn (1 August 2017)

ADS_0x1 schrieb:


> Ich habe zunächst TwinCAT auf die 4022 geupdatet, anschließend das TE2000 Package (erfolgreich, sprich: Ohne Fehler) installiert und dann.... nix. Ich habe in meinem Visual Studio keine Auswahl für ein neues HMI Projekt.


Achtung, Du musst eventuell Dein VS auch Updaten. Bei VS2013 wird Update 5 und bei VS2015 wird Update 3 benötigt.


----------



## zuse (1 August 2017)

oliver.tonn schrieb:


> Achtung, Du musst eventuell Dein VS auch Updaten. Bei VS2013 wird Update 5 und bei VS2015 wird Update 3 benötigt.


Dies wird im Setup aber angemeckert, wenn es fehlt...


----------



## oliver.tonn (1 August 2017)

ADS_0x1 schrieb:


> ... anschließend das TE2000 Package (erfolgreich, sprich: Ohne Fehler) installiert


Mal blöde nachgefragt, Du hast tatsächlich TE2000 installiert und nicht aus versehen TF2000? Sind zwar beides Installer für den HMI-Server, aber nur das TE2000 Paket ist der Teil für die Entwicklungsumgebung.


----------



## ADS_0x1 (1 August 2017)

Ja, da scheint es wohl ein Problem zu geben.

Ich habe VisualStudio 2013 Shell installiert und ich habe Visual Studio 2015 community edition installiert.

In VS2015 habe ich TwinCAT *nicht *integrieren lassen während des Setups, da ich dies für VB.net und die Erstellung von Kunden-HMIs in VB benötige. TwinCAT hat meine komplette Konfiguration zerschossen, als ich dies dort einklinken hab lassen. 
Also läuft TwinCAT in der VS2013 Shell und diese hat nicht die geforderte Version des HMI Tools. Bin gerade dabei das Update 5 zu ziehen, musste aber erst noch den MS Env dev irgendwas account anlegen.


----------



## ADS_0x1 (1 August 2017)

oliver.tonn schrieb:


> Mal blöde nachgefragt, Du hast tatsächlich TE2000 installiert und nicht aus versehen TF2000? Sind zwar beides Installer für den HMI-Server, aber nur das TE2000 Paket ist der Teil für die Entwicklungsumgebung.



Ja, definitiv, habe jetzt mal rein Interesse halber mein VS2015 gestartet und siehe da - trotz Nicht-Integration von TwinCAT ist dort das HMI Projekt zu finden. Dort motzt er allerdings dann rum, dass andere TwinCAT Komponenten fehlen (oh Wunder). Ich hoffe jetzt, dass das TE2000 jetzt nicht mein VS2015 geschrottet hat.
*
EDIT sagt: *Nach Update läuft das ganze jetzt mit der Shell 2013


----------



## zuse (1 August 2017)

ADS_0x1 schrieb:


> In VS2015 habe ich TwinCAT *nicht *integrieren lassen während des Setups, da ich dies für VB.net und die Erstellung von Kunden-HMIs in VB benötige. TwinCAT hat meine komplette Konfiguration zerschossen, als ich dies dort einklinken hab lassen.


Diese Hacken sind nicht, das wofür du die gehalten hast ("Integrierte TC in VS 20xy"), sondern "Lösche die Konfiguration in VS 20xy". Steht so auch im Setup, aber überseh ich auch regelmäßig.

Aber schön, dass es jetzt läuft.


----------



## ADS_0x1 (1 August 2017)

zuse schrieb:


> Diese Hacken sind nicht, das wofür du die gehalten hast ("Integrierte TC in VS 20xy"), sondern "Lösche die Konfiguration in VS 20xy". Steht so auch im Setup, aber überseh ich auch regelmäßig.
> 
> Aber schön, dass es jetzt läuft.



Also dann ist die Beschreibung der Haken definitiv falsch:




Ich interpretiere das so, dass sich TwinCAT nicht dort einklinkt. 

Zurück zum Thema: Das Beispiel von Beckhoff ist echt schön, auch das TC Projekt ist gut strukturiert und insgesamt macht das einen runden Eindruck:



Schade ist, dass das Beispiel nicht responsive ist, das muss dann wohl jeder für sich selbst entwickeln.


----------



## Hendrik (1 August 2017)

@bstr


Danke dir für deine hilfe!

Seitenwechsel funktioniert. Anzeigen von Texten auch. Keyboard ein-/ausblenden funktioniert.

Leider bekomme ich die eingegebene Texte nicht in die PLC. Hast du hierfür noch mal einen Tipp für mich?

MfG Hendrik


----------



## bstr (1 August 2017)

Der Text der TextBox wird bei Änderungen nicht direkt in die verbundene Variable geschrieben sondern es wird eins von mehreren möglichen Ereignissen ausgelöst.
Es gibt z.B. ein "onTextChanged" was bei jedem Tastendruck ausgelöst wird. Bei den Gauges ist es auch so, da gibt es ein "onValueChanged" - Ereignis.

Innerhalb des Ereignis kann dann der Wert z.B. auf irgendeine Variable geschrieben werden. 
Füg innerhalb des Ereignisses mal eine "WriteToSymbol" Aktion ein, und auf die rechte Seite der Aktion ziehst Du das Text-Property Deiner TextBox und auf der linken Seite wählst Du Deine SPS-Variable.
Dann müßte das eigentlich klappen.


----------



## Hendrik (1 August 2017)

Moin, so habe ich das mir auch gedacht und ausprobiert. Leider ohne erfolg. =(


----------



## bstr (1 August 2017)

Kann es sein dass Du die Variable in der SPS immer wieder überschreibst ? Ist das ein String oder ein Zahlentyp ?


----------



## Hendrik (1 August 2017)

Ist ein Sting

wird nur in der HMI benutzt. Als Anzeige in der Textbox und dann soll der geänderte Wert in der PLC übernommen werden.


----------



## bstr (1 August 2017)

Eigentlich funktioniert das so. Ich könnte mir vorstellen dass hier irgendwas anderes nicht passt.
Du könntest testweise mal statt Deines SPS-Symbols ein Internes Symbol anlegen und das damit probieren. Wenn es damit klappt, stimmt irgendwas mit Deiner SPS nicht.


----------



## Hendrik (1 August 2017)

so habe ich das jetzt gemacht und es funktioniert leider nicht. Kann man sich die internen Vars irgendwie anschauen? oder sogar die CommonText Var von der TextBox in der PLC oder sowas?


----------



## bstr (1 August 2017)

Du kannst Dir die Werte der gemappten Symbole anschauen indem Du im Config-Toolfenster auf "Mapped Symbols" gehst und oben das Icon mit dem weißen Pfeil im grünen Kreis drückst.


----------



## Hendrik (2 August 2017)

Hey bstr,
danke für deinen Tipp interne Symbole kann man sich aber keiner nicht online ansehen, oder?

leider funktioniert das immer noch nicht keine Ahnung warum.

MfG Hendrik


----------



## bstr (2 August 2017)

Interne Symbole existieren pro Browser, d.h. wenn man eine HMI mehrfach nebeneinander aufmacht kann das interne Symbol in jedem der Browser zum gleichen Zeitpunkt einen anderen Wert haben.
Deshalb kann der Wert eines internen Symbols im Engineering nicht angezeigt werden.


----------



## zuse (2 August 2017)

Hendrik schrieb:


> Hey bstr,
> danke für deinen Tipp interne Symbole kann man sich aber keiner nicht online ansehen, oder?


Du kannst an interne Symbole kommen per JS (ref). Am einfachsten in der Console des Debugger des Browsers:

```
TcHmi.Symbol.readEx('%i%String_1%/i%')
```


----------



## mkersch (3 August 2017)

> TcHmi.Symbol.readEx('%i%String_1%/i%')



Danke für den Hinweis.

Jetzt kann ich mittels folgenden Befehlen Daten aus SPS Variablen in JavaScript auslesen.



> //TcHmi.Symbol.readEx('%i%String_1%/i%')
> var test = TcHmi.Symbol.readEx('%s%PLC1.GVL.zaehler%/s%')



Wo finde ich weitere Funktionen z.B. von JavaScript aus in eine Variable schreiben ?

mfg 

mkersch


----------



## bstr (3 August 2017)

Server-Mappings und alle anderen Symboltypen (Control-Attribute, interne Symbole und so weiter) können über TcHmi.Symbol.read(ex) und TcHmi.Symbol.write(ex) gelesen/beschrieben werden:
https://infosys.beckhoff.com/index....eering/3728959755.html&id=2364060191823526788

Alle anderen Server-Symbole (z.B: Infrastrukturinformationen die im Server noch so vorliegen) können u.A. über die Server-API gelesen und beschrieben werden (TcHmi.Server.writeSymbol / TcHmi.Server.readSymbol):
https://infosys.beckhoff.com/index....eering/3728927499.html&id=4004683655817344673

In den Doku-Links sind jeweils auch Beispiele.


----------



## mkersch (3 August 2017)

Vielen Dank für die Info



> test = TcHmi.Symbol.readEx('%s%PLC1.GVL.zaehler%/s%')
> TcHmi.Symbol.writeEx('%s%PLC1.GVL.status%/s%', i, null);



Jetzt kann ich von JavaScript aus PLC Variablen lesen und schreiben.

Leider habe ich noch das Problem, das ich für jede Variable noch jeweils ein  Control mit creat date binding zu den Variablen benötige.

Wenn ich dies nicht mache kommt folgender Fehler.



> TcHmi.js:2 Uncaught Error: Symbol with expression {%s%PLC1.GVL.zaehler%/s%} does not exist!
> at b.read (TcHmi.js:2)
> at Function.b.readEx (TcHmi.js:2)
> at DrawChart.js:76
> ...



mfg

mkersch


----------



## bstr (3 August 2017)

Probier mal anstelle von TcHmi.Symbol.writeEx mal TcHmi.Server.writeSymbol. Das sollte gehen.

Symbolname ist der gleiche, nur ohne %s% davor und am Ende. Beispiel hier: https://infosys.beckhoff.com/index....neering/3728947467.html&id=680722241250694526


----------



## mkersch (4 August 2017)

Programm läuft !

D.h. mit einem JavaScript Programm und der LIB Chart.js kann ich Grafiken verschiedenster Art in der Beckhoff HMI anzeigen.
Die benötigten Daten (PLC)  hole bzw. schreibe ich direkt aus dem JavaScript-Programm.

Nur mithilfe der Unterstützung, durch dieses Forum, konnte ich dies umsetzen.


Vielen Dank für Eure Unterstützung.





> if (TcHmi.Server.isWebsocketReady()) {
> TcHmi.Server.readSymbol('PLC1.GVL.zaehler', function (data) {
> if (data.error !== TcHmi.Errors.NONE) {
> // Handle TcHmi.Server class level error here.
> ...



mfg.

mkersch


----------



## slaud (8 August 2017)

Mein nächstes Ziel wird es sein eine schöne Alarmliste zu Zaubern,.....
Denke ich werde Ein Stringliste mit ErrorID ind der Steuerung erstellen und dann versuchen den Richtigen eintrag in der Sprachenliste Anzuzeigen oder habt ihr bessere Idden


----------



## slaud (12 August 2017)

Hat jemand schon herausgefunden wie man den sqlitelogger verwenden kann?


----------



## r.gerbers (13 August 2017)

Das Design des Standard Themes sowie die Palette an Controls gefällt mir bisher noch nicht so gut. Hat jemand schon versucht bestehende HTML5 Open Source Templates für die Beckhoff HMI anzupassen oder weitere Controls z.B OpenUi5 implementiert?


----------



## doelckenbeck (24 August 2017)

Hallo,
ich arbeite seit einiger Zeit mit TwinCat3 Hmi und habe auch noch ein paar Fragen. Die Beschreibung auf der Beckhoff Seite ist ja nicht sehr ausführlich.

Für den Anfang würde ich gerne wissen, ob man in der TwinCat hmi Configuration eigene Datentypen bzw. Strukturen anlegen kann? Ich möchte lediglich eine interne Variable vom Typ einer eigenen Struktur verwenden.


----------



## bstr (24 August 2017)

Es gibt eine Datei "tchmi.project.schema.tpl.json" im Hauptverzeichnis des Projektes, darin liegen die Schemas für die Projektdatentypen. Standardmäßig ist sie leer.
Neue Datentypen kann man darin anlegen. Aktuell muß man sie von Hand beschreiben.
Die Beschreibung folgt der JSON-Schema-Spezifikation.

Wie so ein Schema irgendeines vorhandenen Typs aufgebaut ist, kann man sehen oder indem man bei den Datentypen im Config-Window mit der rechten Maustaste auf "Show Datatype Schema" o.Ä. klickt.

Hier ein Beispiel für eine tchmi.project.schema.tpl.json-Datei mit einer Struktur "meintyp" mit drei Unterelementen member1,member2,member3:

{
  "$schema": "http://json-schema.org/draft-04/schema#",
  "definitions": {
    "meintyp": {
      "properties": {
        "member1": {
          "$ref": "tchmi:general#/definitions/String"
        },
        "member2": {
          "type": "boolean"
        },
        "member3": {
          "type": "integer"
        }
      },
      "type": "object"
    }
  }
}


----------



## doelckenbeck (24 August 2017)

Vielen Dank. Das hat schon mal geklappt.

Wie kann ich denn einen Member des Datentyps verwenden, beispielsweise als Text in einer Textbox? MyData.member1 funktioniert nicht. Irgendwie fehlt mir die Syntax.


----------



## bstr (24 August 2017)

Probier mal %i%MyData::member1%/i%
Wenn das nicht klappt, drück den fx-Button so dass er blau wird und probier %i%MyData%/i%.member1


----------



## doelckenbeck (24 August 2017)

slaud schrieb:


> Mein nächstes Ziel wird es sein eine schöne Alarmliste zu Zaubern,.....
> Denke ich werde Ein Stringliste mit ErrorID ind der Steuerung erstellen und dann versuchen den Richtigen eintrag in der Sprachenliste Anzuzeigen oder habt ihr bessere Idden
> Anhang anzeigen 38154



Eine Alarmliste steht bei mir auch noch an. Kann man dafür vielleicht die EventList aus der ToolBox verwenden?


----------



## doelckenbeck (24 August 2017)

bstr schrieb:


> Probier mal %i%MyData::member1%/i%
> Wenn das nicht klappt, drück den fx-Button so dass er blau wird und probier %i%MyData%/i%.member1



Die Syntax ist richtig. Jetzt läufts. Danke.


----------



## doelckenbeck (24 August 2017)

Wie wäre dann die Syntax für ein Array, %i%MyArray::???%/i%?
Die Member des Datentyps haben einen Namen. Gebe ich [0] oder (0) stattdessen ein, funktionierts nicht.


----------



## slaud (2 September 2017)

Hat jemand schon herausgefunden wie man mit dem custom control arbeitet?


----------



## olivertt82 (2 September 2017)

Hallo slaud,
meinst du mit "Custom Control" ein UserControl oder ein Framework Control (eigenes Projekt unter HMI Extensibility)?
Grüße,
Oliver


----------



## slaud (3 September 2017)

Framework control, aber ist für mich nicht ganz einfach, und eine schöne user manual lässt auch noch auf sich warten


----------



## olivertt82 (3 September 2017)

Hallo slaud,

ich habe bereits schon mal ein bisschen damit rum gespielt.
In der Description.json definierst du Dein Control, z.B. Abhängigkeiten, Standardgröße und auch all die Attribute die Du Deinem Control geben möchtest.
Bei den Attributen musst Du immer einen Getter und einen Setter definieren, welcher nachher in der Source.js ausprogrammiert werden muss. 
Das Beispiel mit dem Kreis der zwischen den beiden Farben wechselt ist zwar simpel zeigt aber eigentlich das was Du brauchst.
Im previnit Bereich in der Source.js holst Du Dir die Referenzen auf die HMTL Elemente die Du in der Template.html anlegst.
In der Template.html definierst Du also die Struktur und den Aufbau. In der Source.js manipulierst Du Elemente (Größe, Farbe, etc.)
Willst Du ein interaktives Control bauen musst Du Dir noch Deine Eventhandler deklarieren, dass solltest Du im attach Bereich machen, weil dort das Control erst wirklich sicht und nutzbar ist.

Falls Du weitere Details brauchst, lass es mich wissen.

Viele Grüße,
Oliver


----------



## Matti_Tc (3 November 2017)

Hallo Zusammen, 

 ich habe auch eine Frage hierzu. Ich arbeite gerade ebenfalls mit dem neuen HMI Projekt von TwinCAT 3. Es gelingt mir ohne Weiteres Variablen von PLC-Modulen
in die Oberflächen einzubinden, jedoch habe ich so meine Probleme mit den C++ Modulen. Die Variablen des PLC Moduls werden im TwinCAT HMI Configuration Window richtig angezeigt, sobald der ADS-Port 851 initialisiert wurde. Die ADS-Konfiguration steht hierbei ja in der ADS.Config.Default.json (IPADR : 127.0.0.1, NETID: 127.0.0.1.1.1, PORT: 851)... 
*Meine FRAGE ist nun: Welche Schritte muss ich ausführen um meine C++ Modulvariablen im HMI-Configuration Window zugreifbar zu machen. Anscheinend fehlt mir da ein bisschen das Verständnis, zum Einen wie ich via ADS die Variablen aus dem Modul bereitstelle, und wie ich den HMI-Server richtig darauf konfiguriere*.

 In der Dokumentation von Beckhoff wird dieser Fall nicht explizit vorgestellt, sondern nur wie man (was ja recht flott bei mir funktionierte) Data Bindings mit PLC Daten erstellt.
 Ich bin noch etwas neu auf dem Gebiet deshalb bitte ich um etwas Nachsicht :wink:

Vielen Dank und Beste Grüße, 

Matti


----------



## Guga (3 November 2017)

Da gibt es zwei Punkte:
#1: Variablen/Daten müssen in ADS als Symbole bekannt sein
https://infosys.beckhoff.com/content/1031/tc3_c/27021598195450507.html
#2: Der Port (die PLC hat per Definition die 851) musst du noch wissen bzw. in der HMI definieren. Ich glaube! das es die Port# der Task ist mit der du den C++ Projekt ausführst (also siehe Config der Task).
Ich persönlich würde mir ein Scope Projekt (Measurement) nehmen und das hiermit überprüfen (aber auch hier müssen eventuell Ports explizit freigegeben werden und man muss wissen wo man clickt). 

Guga


----------



## Matti_Tc (6 November 2017)

Hallo,

vielen Dank für deine Antwort Guga! Es lag einfach tatsächlich daran den richtigen Port und den richtigen Ort zu seiner Beschreibung zu finden.
-> Man muss in den HMI-Server Settings unter "ADS" eine Runtime hinzufügen und diese mit der jeweiligen IP und NetID versorgen. Wichtig ist wie von dir schon richtig vermutet, dort dann auch den 
Port des Tasks anzugeben, welcher das C++ Modul ausführt. Den von dir unter #1 beschriebenen Haken unter "Create Symbol" im TMC-Editor setzten, egal ob I/O Symbol / Parameter usw.... 
Lädt man nun die Config und startet den Run-Mode, sind die ADS-Variablen alle sichtbar und können in die HMI eingebunden werden =)

Danke für die Hilfe, 

Matti


----------



## GusA (9 November 2017)

Hallo,
würde gerne von einer Server-Extension aus benutzerdefinierte Events verschicken auf die ich dann im Client (JavaScript) reagieren kann. Oder anders gesagt - der Client soll über von ihm festgelegte Ereignisse vom Server informiert werden.

Hat zufällig jemand eine Ahnung wie das funktioniert bzw. eine Idee wie man so etwas am besten realisieren könnte?

Lg, Andreas


----------



## mkersch (25 November 2017)

Hallo Forenmitglieder,


ich beschäftige mich seid kurzen mit der HMI von Beckhoff.
Für Testzwecke möchte ich jetzt mit einen Tablet mittels WLAN Acesspoint auf meinen Entwicklungsrechner zugreifen.
Der Hmi Server läuft auf localhost.
Kann ich von einem anderen Rechner aus auf den localhost zugreifen ?

mfg
mkersch


----------



## Guga (25 November 2017)

mal so zum mitschreiben.
Du hast den Server installiert (TF2000). Auf dem gleichen Rechner wie die TE2000.
Natürlich kannst du von "extern" darauf zugreifen.
Schau aber mal das du in den Endpoints des Servers auch 0.0.0.0:1010 gesetzt hast (Einstellung für "jeder Remote Rechner darf anfragen"). Sonst wird es von extern nicht klappen (Config irgendwo im Web-Interface des Servers)
Das du an die Firewall denkst versteht sich von selber oder? 

Guga


----------



## mkersch (26 November 2017)

Hallo Guga,
vielen Dank für die schnelle Info.

Es funktioniert !

Mfg
mkersch


----------



## mkersch (26 November 2017)

Hallo

Heute ist mir folgendes aufgefallen.

In meiner HMI habe ich mehrere SPS Variablen gemappt.

Dabei rufe ich einen Event auf wenn sich z.B. Var1 ändert.
In diesem Event wird eine weitere gemappte Variable hochgezählt und in die SPS geschrieben.
--> Event. Global Create Data Bindung..  zu gemappter Variable
      In diesen Event  Write to Symbol

Der Hintergrund ist der, ich möchte alle Sekundem den Status aktualisieren. In einer If Abfrage kann
ich dann bestimmen ob die Hintergrundfarbe eines Rechteckes grün oder rot angezeigt werden muss.
Die Variable welche den Event wirft inkrementiere ich je Sekunde in der SPS.

Nachdem ich mein Life Bild geschlossen habe, wird weiter dieser Event aufgerufen und die Variable wird
immernoch hochgezählt

Sorry evtl. eine Anfängerfrage.
Im Normalfall läuft doch mein Programm auf dem Client. Wenn ich denn Client schließe müsste doch auch das
Programm stoppen.

mfg
mkersch


----------



## seehma (26 November 2017)

Ich hab mich da jetzt nich durch alles durchgekämpft, sind ja mittlerweile 9 Seiten bei diesem Thread, möchte aber zum Ursprungsthema doch meinen Senf dazugeben.
Wir wollten sowas vor 1 1/2 Jahren machen, und zwar mit einer WebHMI und hofften auch auf diese Beckhoff Lösung, leider (wie so oft) gab es diese nicht funktionsfähig.

Unsere Lösung war dann ein einfacher Python Server mit Python 3.x und dem Paket pyADS. Ist beides Gratis, zum Starten des Python Webserver benötigt man mittlerweile nur mehr eine Zeile und der läuft. Mit pyADS kann man eine Verbindung zu einer beliebigen Variable ebenso mit einem Dreizeiler aufbauen. Der Rest ist dann nur noch Webdevelopper Spezialzeug (Chart.js usw...)

Wir haben dann zum einfacheren Aufbau der Seite auf Bootstrap und JQuery UI zurückgegriffen (alles OpenSource und somit frei zu verwenden)


----------



## Hack (27 November 2017)

Verstehe ich die Frage nicht?

Ich würde einfach ein Binding auf die Variable machen. Wenn sich diese ändert schalte ich die Farbe um.
Man kann auch wenn man hinten in das Binding klickt die Refresh-Zeit angeben.

Wie soll deine Variante funktionieren wenn mehrere Clients offen sind?

Grüße


----------



## seehma (27 November 2017)

Ich wollte nur allgemein sagen, dass es auch noch einfachere und vor allem gratis Möglichkeiten gibt sich auf eine Variable von einer Web-HMI aus zu verbinden und diese anzuzeigen.
Dieser Thread geht ja mittlerweile schon ein paar Seiten lang...

Hier hab ich mal ein kurzes Tutorial dazu geschrieben...

Sg


----------



## ADS_0x1 (27 November 2017)

Gibt da auch noch die Möglichkeit mit TAME...

TwinCAT WebService & tame3

Die Lösung von Beckhoff habe ich mir auch schon angeschaut, aber ich blickte da nicht wirklich durch, wenn ich ehrlich bin.


----------



## seehma (28 November 2017)

Der kleine Unterschied ist hier, dass du für Tame3 oder 4 den Twincat ADS Webservice brauchst und bei der Python Lösung mit pyADS eben nichts. Python lädt die TcAdsDll.dll und verwendet diese direkt zum Verbinden auf die Steuerung.

Sg


----------



## Guga (28 November 2017)

@mkersch

wieso sollte dein Programm auf dem Client laufen? Sozusagen als Gedankenspiel: Was sollte dann passieren wenn mehrere Clients angemeldet sind? Soll jeder die Variable auf dem Server hochzählen (d.h. die Variable zählt dann 3 mal so schnell hoch wie wenn du nur einen Client hast)?

Aber konkret zu deinem Wunsch: Generiere dir ein JavaScript Funktion (Timer) die du im Server registrierst und alle x-sekunden dann aufgerufen wird. In der Funktion machst du dann was du willst.
Wenn du willst könnte ich dir ein Beispiel zukommen lassen (Anzeige Datum und Uhrzeit ) das ich von Beckhoff mal bekommen habe.


Guga


----------



## slaud (9 Januar 2018)

Servus,
hat jetzt mal wieder Zeit, ein bischen mit einer "Alarmliste" herumzuspielen 
Also in der sps generiere ich Fehlermeldungen zb "FB001_E00001" die in einem String-Array liegen die lese ich dann aus der "Sprachtabelle" aus, und gebe dan den Text aus.
Klappt eigentlich soweit ganz wunderbar!

Wenn ich das dann mit console.log() schreibt es mir das auch brav in die Console...........
gibt es die Möglichkeit das ich das auch auf dem Server mache? .... Wär auch cool um mein String Array zu Manipulieren.

Merci

Ps Mein aktueller Stand:


----------



## Perold (7 November 2018)

Moin,

ich hole diesen alten Thread mit einer kurzen Frage mal wieder aus der Versenkung.
Es gibt ja bei Beckhoff im Downloadbereich einmal *TE2000 | TC3 HMI* und einmal *TF2000 | TC3 HMI Server*.
Die TE2000 TC3 HMI habe ich nun auf meinem Engineering Rechner installiert und kann dadurch die in TwinCAT3 integrierte Engineering Umgebung für die HMI zu meiner Solution hinzufügen.

Nun brauche ich ja noch den HMI Server TF2000 | TC3 HMI Server, den ich installieren muss. Testweise habe ich diesen auch erfolgreich auf meinem Engineering PC installiert. Nun zu meiner Frage.

Ich habe den Embedded PC CX5120 von Beckhoff mit Microsoft Windows Embedded Compact darauf. Momentan nutze ich damit die "normale" PLC HMI und möchte mich nun in die neue HMI einarbeiten.
Kann ich den neuen HMI Server auch auf meinem CX5120 installieren?

Gruß


----------



## MasterOhh (7 November 2018)

Der HMI Server läuft leider nicht auf Windows Embedded Compact.
Wenn du dich nur einarbeiten willst, brauchst du keine SPS. Du kannst doch lokal bei dir auf dem Programmier PC sowohl die TC3 Runtime und den HMI Server laufen lassen. Wird der HMI Server nicht sogar automatisch mit TE2000 | TC3 HMI Engineering mit installiert?


----------



## Perold (7 November 2018)

Hallo MasterOhh,

danke für die schnelle Antwort. Das hatte ich befürchtet. Deinen Vorschlag den HMI Server auf dem Engineering PC zu installieren habe ich bereits erfolgreich umgesetzt, wie ich oben auch schrieb.

Aber deine Info hilft mir schonmal weiter, ich dachte ich hätte irgendein Installationspaket übersehen.


----------



## olivertt82 (7 November 2018)

Hallo Perold,

das TF2000 (Server) brauchst Du in der Regel nicht auf Deinem Engineering Rechner.
Im TE2000 (Engineering) ist ein Server bereits mit implementiert der auch automatisch anläuft, wenn Du ein HMI Projekt bearbeitest.
Ohne diesen hättest Du z.B. nicht das Live-View.
Das TF2000 auf Deinem Engineering Rechner bräuchtest Du nur, wenn die HMI auch bei geschlossenem Visual Studio erreichbar sein soll.
Auf dem CX5120 kannst Du prinzipiell ohne Probleme das TF2000 (Server) installieren, *sofern Du ein volles/großes Windows hast*.
Für CE meine ich gibt es noch keinen Server.

Zur Anzeige kommt Deine HMI durch den Server aber erst einmal noch nicht, der Server hostet ja nur die Website und händelt die Kommunikation.
Du kannst dann entweder direkt auf dem CX5120 einen Browser öffnen oder eben übers Netzwerk auf diesen Server zu greifen.
Bei einem CX5120 mit nur einem CPU Kern auf Atom-Basis, würde ich Dir aber den Weg übers Netzwerk zur Anzeige auf einem anderen Gerät empfehlen.

Noch ein kleiner Tipp aus der Praxis:
Beim Setup des HMI Servers, die benutzerdefinierte Setup-Variante wählen und dort das Häkchen setzen, das der Server auch über http und nicht nur https erreichbar ist.
Bin ich am Anfang auch drüber gestolpert. 

Viele Grüße!


----------



## Perold (7 November 2018)

Hallo,

alles klar nun bin ich etwas schlauer geworden.
Soeben habe ich auf der Beckhoff Seite unter dem Punkt "TF2000 | TC3 HMI Server" auch folgenden Hinweis gefunden, der mir meine Frage eigentlich beantwortet:

Verfügbar | Windows CE: voraussichtliche Markteinführung im 2. Quartal 2019

Bleibt abzuwarten ob Beckhoff seinen Termin auch hält .


----------



## slaud (4 Februar 2019)

Servus,
eventuell kann mir jemand weiterhelfen
1. Zeile: uint  (7020)==> Anzeige passt
2. Zeile ULINT (7020)==> Anzeige irgenwie seltsam


----------



## bstr (5 Februar 2019)

ULINT ist ein 64-bit-Datentyp dessen Wertebereich deutlich außerhalb dessen liegt, was Javascript als integer verwalten kann (siehe https://www.ecma-international.org/ecma-262/5.1/#sec-8.5)
Nicht in Javascript darstellbare Datentypen werden vom Server als base64-encoded übergeben.


----------



## slaud (5 Februar 2019)

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

```
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:

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

Beckhoff original:


```
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. 


```
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?


```
[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:


```
{
  "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. 

```
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

```
console.log('Trend Ok');
```
Das hier genutzt:

```
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. 


```
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: 


```
{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()


```
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. 

```
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.

```
[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.


```
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.


----------

