Zuviel Werbung? - > Hier kostenlos beim SPS-Forum registrieren

Results 1 to 7 of 7

Thread: TC3 TE2000 HMI kein DatePicker?

  1. #1
    Join Date
    27.05.2009
    Posts
    28
    Danke
    13
    Erhielt 0 Danke für 0 Beiträge

    Default


    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!
    Last edited by Codesys_123; 23.04.2019 at 20:45.
    Reply With Quote Reply With Quote TC3 TE2000 HMI kein DatePicker?  

  2. #2
    Join Date
    01.08.2017
    Posts
    24
    Danke
    3
    Erhielt 7 Danke für 7 Beiträge

    Default

    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"
    })
    }
    Last edited by zuse; 24.04.2019 at 07:37.

  3. Folgender Benutzer sagt Danke zu zuse für den nützlichen Beitrag:

    Codesys_123 (24.04.2019)

  4. #3
    Codesys_123 is offline Neuer Benutzer
    Themenstarter
    Join Date
    27.05.2009
    Posts
    28
    Danke
    13
    Erhielt 0 Danke für 0 Beiträge

    Default

    Quote Originally Posted by zuse View Post
    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!

  5. #4
    Join Date
    23.05.2018
    Posts
    5
    Danke
    0
    Erhielt 1 Danke für 1 Beitrag

    Default

    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.

  6. Folgender Benutzer sagt Danke zu Tobi-212 für den nützlichen Beitrag:

    Codesys_123 (25.04.2019)

  7. #5
    Codesys_123 is offline Neuer Benutzer
    Themenstarter
    Join Date
    27.05.2009
    Posts
    28
    Danke
    13
    Erhielt 0 Danke für 0 Beiträge

    Default

    Quote Originally Posted by Tobi-212 View Post
    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!

  8. #6
    Join Date
    01.08.2017
    Posts
    24
    Danke
    3
    Erhielt 7 Danke für 7 Beiträge

    Default

    Quote Originally Posted by Codesys_123 View Post
    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
    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.
    Quote Originally Posted by Codesys_123 View Post
    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... 
        }
    });
    
    
    })
    }
    Last edited by zuse; 30.04.2019 at 12:52.

  9. Folgender Benutzer sagt Danke zu zuse für den nützlichen Beitrag:

    Codesys_123 (25.04.2019)

  10. #7
    Codesys_123 is offline Neuer Benutzer
    Themenstarter
    Join Date
    27.05.2009
    Posts
    28
    Danke
    13
    Erhielt 0 Danke für 0 Beiträge

    Default


    Zuviel Werbung?
    -> Hier kostenlos registrieren
    Quote Originally Posted by zuse View Post
    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.



    Quote Originally Posted by zuse View Post
    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.

    Quote Originally Posted by zuse View Post
    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.
    Attached Images Attached Images

Similar Threads

  1. TC3 TE2000-HMI Publish to Twincat Server funktioniert nicht
    By lenaxus in forum CODESYS und IEC61131
    Replies: 11
    Last Post: 13.05.2019, 07:00
  2. Fragen zu Farbvariablen und Tab Control für TE2000 HMI
    By O'Gigis in forum CODESYS und IEC61131
    Replies: 3
    Last Post: 25.04.2019, 09:40
  3. TC3 HMI - kein Zugriff auf ADS Variablen der Steuerung
    By Daxgehtsteil in forum CODESYS und IEC61131
    Replies: 6
    Last Post: 05.03.2019, 20:46
  4. TC3 - Kann kein Zielsystem mehr auswählen
    By O'Gigis in forum CODESYS und IEC61131
    Replies: 11
    Last Post: 26.02.2019, 10:05
  5. Replies: 16
    Last Post: 17.07.2015, 18:10

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •