HMI Server HTML5 / JavaScript

mkersch

Level-1
Beiträge
111
Reaktionspunkte
1
Zuviel Werbung?
-> Hier kostenlos registrieren
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
 
Ich glaube dass die Opc Anbindung erst im Herbst verfügbar sein wird.
Im Moment bist du auf ADs limitiert.

Guga
 
Zuletzt bearbeitet:
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 :p
 
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
 
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
 
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.
 
Zuviel Werbung?
-> Hier kostenlos registrieren
2017-07-22 10_04_24-Einstellungen.png2017-07-22 10_07_46-TcHmiProject6 - Microsoft Visual Studio.png2017-07-22 10_08_44-TcHmiProject6 - Microsoft Visual Studio.png

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


Code:
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);
 
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
 
Hallo Holger,
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
 
Zuletzt bearbeitet:
Zuviel Werbung?
-> Hier kostenlos registrieren
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
 
Hallo MasterOhh,
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
 
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.
 
Hat mich jetzt aber ein bischen von meiner Freizeit gekostet, aber hat noch einige Bugs bin nicht grad Webentwickler ;-)
Code:
(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);
 
Zuviel Werbung?
-> Hier kostenlos registrieren
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.
 
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...........
 
@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.
 
Zurück
Oben