Sonstiges TC3 TE2000 HMI kein DatePicker?

Codesys_123

Level-2
Beiträge
37
Reaktionspunkte
1
Zuviel Werbung?
-> Hier kostenlos registrieren
Hallo zusammen,

ich portiere gerade ein altes TC2 PLC HMI Projekt von mir in TC3 mit TE2000. Im alten Projekt wird ueber mehrere Schritte ein Datum mit Uhrzeit in der PLC-Visu eingegeben. Also je ein Feld fuer Tag, Monat, Jahr, Stunde und Minute. Das schiebe ich mir in einem STRING zusammen und habe am Schluss eine komplette DATE_AND_TIME-Variable.
Nun ueberlege ich (wo ich schon ein mal dabei bin) diese ganze Geschichte vielleicht etwas geschickter und zeitgemaesser zu machen. Dabei denke ich an eine Art DatePicker, oder sowas. Als fertiges Tool finde ich so etwas leider nicht in der TC3 HMI. Gibt es vielleicht jemanden hier, der bereits etwas Aehnliches machen musste? Ich braeuchte aber natuerlich nicht nur das Datum, sondern auch die Uhrzeit...
Ich wuerde gerne die Vorteile eines solchen menuegefuehrten Kalenders nutzen wollen, da es so nicht moeglich ist ein "falsches" Datum einzugeben. Bei meinem urspruenglichen Projekt verhindere ich zwar Eingaben ueber "31" bei "Tag" zum Beispiel, aber trotzdem kann man so theoretisch noch den "31.02.20XX" eingeben. Dann wird mein Zeitpunkt nie erreicht.

Vielleicht gibt's ja auch einen ganz anderen Weg?! Zum Beispiel als JavaScript selber da reinbasteln? Das muesste ich mir dann in Ruhe ansehen.

Danke und Viele Gruesse!
 
Zuletzt bearbeitet:
Stimmt, aktuell gibt es keinen für Kunden nutzbaren Datetime Picker. Den aus den Trendlinechart kann man ja nicht selbst nutzen.

Ich würde das HTMLInputElement dafür nutzen.

Einfach
<input class="mypicker" type="datetime-local">
in einem eigenen Control in die Template.html Datei legen oder sogar in ein HTML Host control.
Dann kannst du in der Control-Javascript Datei oder in Code-Behind darauf zugreifen.

var myPicker = document.querySelector('mypicker')
if(myPicker){
myPicker.addEventListener('input', function(evt){
evt.target.value; // for example: "2019-04-24T08:30"
})
}
 
Zuletzt bearbeitet:
Zuviel Werbung?
-> Hier kostenlos registrieren
Stimmt, aktuell gibt es keinen für Kunden nutzbaren Datetime Picker. Den aus den Trendlinechart kann man ja nicht selbst nutzen.

Ich würde das HTMLInputElement dafür nutzen.

Einfach
<input class="mypicker" type="datetime-local">
in einem eigenen Control in die Template.html Datei legen oder sogar in ein HTML Host control.
Dann kannst du in der Control-Javascript Datei oder in Code-Behind darauf zugreifen.

var myPicker = document.querySelector('mypicker')
if(myPicker){
myPicker.addEventListener('input', function(evt){
evt.target.value; // for example: "2019-04-24T08:30"
})
}
Vielen Dank für Deine Antwort zuse!
Ich werde mich dann mal damit verstärkt beschäftigen. Falls ich auf noch weitere Probleme stoße, melde ich mich nochmal.

Grüße!
 
Es gibt auch die Alternative über den Code-Editor sich den DatePicker manuell einzufügen.
Habe ich bei mir gemacht, er gibt nur die UTC-Zeit zurück bei den Einstellungen.
Die Nutzung hierfür ist allerdings nur zu Testzwecken Firmenintern.

Code:
<div id="DatePickerFrom" data-tchmi-type="tchmi-date-time-picker" data-tchmi-grid-column-index="5" data-tchmi-grid-row-index="0" data-tchmi-height="50" data-tchmi-height-unit="px" data-tchmi-left-unit="px" data-tchmi-text="DatePickerFrom" data-tchmi-top="0" data-tchmi-top-unit="px" data-tchmi-width-unit="px" data-tchmi-word-wrap="True" data-tchmi-background-image="Images/Basic/icons_left_normal.svg" data-tchmi-right="400" data-tchmi-background-color="%ctrl%DatePickerTo::BackgroundColor%/ctrl%" data-tchmi-width="100">

Denk Codeschnipsel einfügen, schon hast du einen Datepicker in der HMI-Optik.
 
Es gibt auch die Alternative über den Code-Editor sich den DatePicker manuell einzufügen.
Habe ich bei mir gemacht, er gibt nur die UTC-Zeit zurück bei den Einstellungen.
Die Nutzung hierfür ist allerdings nur zu Testzwecken Firmenintern.

Code:
<div id="DatePickerFrom" data-tchmi-type="tchmi-date-time-picker" data-tchmi-grid-column-index="5" data-tchmi-grid-row-index="0" data-tchmi-height="50" data-tchmi-height-unit="px" data-tchmi-left-unit="px" data-tchmi-text="DatePickerFrom" data-tchmi-top="0" data-tchmi-top-unit="px" data-tchmi-width-unit="px" data-tchmi-word-wrap="True" data-tchmi-background-image="Images/Basic/icons_left_normal.svg" data-tchmi-right="400" data-tchmi-background-color="%ctrl%DatePickerTo::BackgroundColor%/ctrl%" data-tchmi-width="100">

Denk Codeschnipsel einfügen, schon hast du einen Datepicker in der HMI-Optik.

Hallo Tobi-212!
Danke fuer Deine Alternative! Habe ich probiert, aber der Code wird mit 2 Fehlern nicht ganz korrekt ausgefuehrt:
error.jpg
Der zweite Fehler bezieht sich auf ein nicht vorhandenes Bild ("Images/Basic/icons_left_normal.svg" hab ich nicht). Das vernachlaessigen wir mal.

Interessant ist dann ja auch noch das Mapping auf ein Symbol. In den Properties unter "Common" gibt's ja den Eintrag "Value". Das muss eine DATE_AND_TIME-Variable sein, richtig? Da stolpere ich ueber den Default-Wert, wenn ich so ein Symbol (zu testzwecken erstmal intern) anlegen moechte. Wenn ich bei "Value" einfach mal rumprobiere, ist der schoene Kalender direkt im Eimer :)


Den Vorschlag von zuse habe ich nun auch umgesetzt. Funktioniert gut! (HTMLHost in UserControl erzeugt, CodeBehind eingefuegt, UserControl in Content geladen) Aber da weiss ich jetzt nicht genau, wie ich den Wert nun in eine Variable, bzw. Symbol bekomme? Habe ja kein Property "Value", wie bei der anderen Loesung von Tobi...

Gruesse!
 
Zuviel Werbung?
-> Hier kostenlos registrieren
Danke fuer Deine Alternative! Habe ich probiert, aber der Code wird mit 2 Fehlern nicht ganz korrekt ausgefuehrt:
Anhang anzeigen 45434
Der zweite Fehler bezieht sich auf ein nicht vorhandenes Bild ("Images/Basic/icons_left_normal.svg" hab ich nicht). Das vernachlaessigen wir mal.

Interessant ist dann ja auch noch das Mapping auf ein Symbol. In den Properties unter "Common" gibt's ja den Eintrag "Value". Das muss eine DATE_AND_TIME-Variable sein, richtig? Da stolpere ich ueber den Default-Wert, wenn ich so ein Symbol (zu testzwecken erstmal intern) anlegen moechte. Wenn ich bei "Value" einfach mal rumprobiere, ist der schoene Kalender direkt im Eimer :)
Value hat als Tooltip: "The date and time value defined as ISO timestring." und hat den Datentyp tchmi:general#/definitions/DateTime
Diesen können wir uns im HMI Config window ansehen, ist also nur ein reiner String mit Sonderbedeutung:
Code:
{
  "allOf": [
    {
      "$ref": "tchmi:general#/definitions/String"
    },
    {
      "format": "date-time"
    }
  ],
  "id": "tchmi:general#/definitions/DateTime"
}
Weiterhin fehlte im Beispiel das schliessende div tag. Dies hier sollte funktionieren.
Code:
<div id="DatePickerFrom" data-tchmi-type="tchmi-date-time-picker" 
data-tchmi-height="50" data-tchmi-top="0" 
data-tchmi-right="400" data-tchmi-width="100"
data-tchmi-text="DatePickerFrom" 
data-tchmi-word-wrap="True" 
>
</div>
Aber Achtung: Das control ist nicht dokumentiert und nicht sichtbar geschaltet, ist also möglich, dass dieses interne Control mal in späteren Versionen rausfliegt.
Den Vorschlag von zuse habe ich nun auch umgesetzt. Funktioniert gut! (HTMLHost in UserControl erzeugt, CodeBehind eingefuegt, UserControl in Content geladen) Aber da weiss ich jetzt nicht genau, wie ich den Wert nun in eine Variable, bzw. Symbol bekomme? Habe ja kein Property "Value", wie bei der anderen Loesung von Tobi...

Da musst du programmieren:
Code:
var myPicker = document.querySelector('mypicker')
if(myPicker){
myPicker.addEventListener('input', function(evt){
evt.target.value; // for example: "2019-04-24T08:30"
TcHmi.Symbol.writeEx('%s%PLC1.MAIN.sTest%/s%', evt.target.value, function (data) {
    if (data.error === TcHmi.Errors.NONE) {
        // Handle success... 
    } else {
        // Handle error... 
    }
});


})
}
 
Zuletzt bearbeitet:
Value hat als Tooltip: "The date and time value defined as ISO timestring." und hat den Datentyp tchmi:general#/definitions/DateTime
Diesen können wir uns im HMI Config window ansehen, ist also nur ein reiner String mit Sonderbedeutung:
Code:
{
  "allOf": [
    {
      "$ref": "tchmi:general#/definitions/String"
    },
    {
      "format": "date-time"
    }
  ],
  "id": "tchmi:general#/definitions/DateTime"
}

Ja, ok, aber was waere dann ein passender Default-Wert fuer ein internes Symbol? (Ich warte noch auf die Hardware...)
create_symbol.png
Komme da sonst nicht aus dem Dialog raus.



Weiterhin fehlte im Beispiel das schliessende div tag. Dies hier sollte funktionieren.
Code:
<div id="DatePickerFrom" data-tchmi-type="tchmi-date-time-picker" 
data-tchmi-height="50" data-tchmi-top="0" 
data-tchmi-right="400" data-tchmi-width="100"
data-tchmi-text="DatePickerFrom" 
data-tchmi-word-wrap="True" 
>
</div>
Aber Achtung: Das control ist nicht dokumentiert und nicht sichtbar geschaltet, ist also sehr wahrscheinlich, dass dieses interne Control in späteren Versionen rausfliegt.

Ja, das hatte ich bemerkt (mit dem fehlenden </div>) und angefuegt. Trotzdem funktioniert dein Code nun auch ohne Fehler. Es kam aber auch davor schon eine Datumsauswahl samt Uhrzeit hoch. Dein DatePicker gefaellt mir aber auch (und insbesondere wegen Deines Hinweises) besser. Ich sehe ja auch damit nach der Eingabe noch, welche Zeit zuletzt eingegeben wurde. Sonst muesste ich das ja nochmal extra anzeigen.

Da musst du programmieren:
Code:
var myPicker = document.querySelector('mypicker')
if(myPicker){
myPicker.addEventListener('input', function(evt){
evt.target.value; // for example: "2019-04-24T08:30"
TcHmi.Symbol.writeEx('%s%PLC1.MAIN.sTest%/s%', evt.target.value, function (data) {
    if (data.error === TcHmi.Errors.NONE) {
        // Handle success... 
    } else {
        // Handle error… 
    }
});


})
}

Wenn ich das richtig verstehe, wird der Wert nun einer Variablen fest zugeordnet. Nun brauche ich aber spaeter mehrere dieser DateTime-Variablen. Muesste ich dann UserControls in der Anzahl der DateTime-Variablen anlegen?
Vielen Dank nochmals fuer Deine ausfuehrliche Hilfe.

Gruesse.
 

Anhänge

  • create_symbol.png
    create_symbol.png
    17,5 KB · Aufrufe: 19
Hallo,
Kann jemand ein eispielprogramm für die Datumsauswahl freigeben? Ich kann die Datumsauswahl mit einem Code-Snippet erstellen, kann aber die Daten nicht abrufen.
 
Ich erstelle einen HTML-Host und platziere diesen Code darin
<input class = "mypicker" type = "datetime-local">


Danach füge ich den JavaScript-Befehl in .onAttached hinzu
var myPicker = document.querySelector ('mypicker');
if (myPicker) {
myPicker.addEventListener ('input', function (evt) {
possibly.target.value; // for example: "2019-04-24T08: 30"
TcHmi.Symbol.writeEx ('%i%sTest%/i%', possibly.target.value, function (data) {
if (data.error === TcHmi.Errors.NONE) {
// Handle success ...
alert("done");
} else {
// Handle error ...
alert("error");
}
});


})
}

Es hat keinen Fehler und kann den Datumswert nicht von der Datumsauswahl abrufen
 
Die Variable "possibly" gibt es nicht. Du willst wohl hier "evt" nutzen.
Nutze die devTools der Browser um das Problem Schritt für
Schritt zu analysieren.
Wenn du in deinem JavaScript in eine separate Zeile
debugger;
hinzufügst, und die devTools auf hast, bleibt der Browser an dieser Zeile stehen und du kannst dir alle Werte angucken und den Code Zeile für Zeile ausführen lassen.

https://developers.google.com/web/tools/chrome-devtools/javascript#code-stepping
 
Zuviel Werbung?
-> Hier kostenlos registrieren
Entschuldigung, nicht sehr vertraut mit dem Debugging-Tool. Nach dem, was ich aus dem Debugging erhalte, ist mypicker leer, sodass der document.querySelector nicht funktioniert.
 
Zurück
Oben