HMI Server HTML5 / JavaScript

[MasterOhh]

Zuviel Werbung?
-> Hier kostenlos registrieren

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]

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]

Zuviel Werbung?
-> Hier kostenlos registrieren

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

 

[slaud]

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]

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]

Zuviel Werbung?
-> Hier kostenlos registrieren

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

 

[mkersch]

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]

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]

Zuviel Werbung?
-> Hier kostenlos registrieren

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

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]

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]

Zuviel Werbung?
-> Hier kostenlos registrieren

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.
</canvas>
</div>

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');
console.log(ctx);
var config = {
//type: 'pie',
type: 'pie',

.....................

mfg

mkersch

 

[slaud]

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]

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

 

[Hendrik]

Zuviel Werbung?
-> Hier kostenlos registrieren

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]

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

 

[Hendrik]

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]

Zuviel Werbung?
-> Hier kostenlos registrieren

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]

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]

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.