FLProg + Nextion HMI. Lektion 1

Published on April 05, 2016

FLProg + Nextion HMI. Lektion 1

  • Tutorial

Guten Tag.
Ich möchte über ein sehr interessantes Projekt von ITEAD STUDIO berichten - ein Farb-LCD-Display + einen resistiven Berührungssensor mit eigenem Controller, der vom UART „Nextion HMI“ gesteuert wird. Dieses Projekt erschien auf der Crowdfunding-Plattform von Indiegogo und brachte mit 20.000 US-Dollar mehr als 45.000 US-Dollar ein.
Ein FLProg-Benutzer hat mir ein Muster eines solchen Panels zur Überprüfung geschickt. Nachdem ich angefangen hatte, mit ihr zu arbeiten, war ich von ihren Fähigkeiten zu einem sehr erschwinglichen Preis begeistert. In seinen Fähigkeiten kommt es industriellen HMI-Panels sehr nahe, und sein Editor ist fast ein vollständiges SCADA-System. Deshalb habe ich die Verwaltung dieses Panels in das FLProg-Projekt integriert.
In dieser Unterrichtsreihe erkläre ich, wie Sie mit diesem Bedienfeld arbeiten und es über FLProg verwalten. Die erste Lektion ist dem Programm Nextion Editor und der Erstellung eines Visualisierungsprojekts gewidmet.

Zu Beginn werde ich eine Tabelle mit Merkmalen verschiedener Panel-Modelle bereitstellen.
NX3224T024_011R NX3224T028_011R
Größe 2.4 " 2.4 "
Auflösung 320 * 240 320 * 240
Touch Panel RTP RTP
Anzahl der Farben 65536 65536
Flash (MB) 4 4
RAM (Byte) 2048 2048
Beschreibung wiki.iteadstudio.com/NX3224T024 wiki.iteadstudio.com/NX3224T028
NX4024T032_011R NX4827T043_011R
Größe 3,2 " 4.3 "
Auflösung 400 * 240 480 * 272
Touch Panel RTP RTP
Anzahl der Farben 65536 65536
Flash (MB) 4 16
RAM (Byte) 2048 2048
Beschreibung wiki.iteadstudio.com/NX4024T032 wiki.iteadstudio.com/NX4827T043
NX8048T050_011R NX8048T070_011R
Größe 5,0 " 7.0 "
Auflösung 800 * 480 800 * 480
Touch Panel RTP RTP
Anzahl der Farben 65536 65536
Flash (MB) 16 16
RAM (Byte) 2048 2048
Beschreibung wiki.iteadstudio.com/NX8048T050 wiki.iteadstudio.com/NX8048T070

Laden Sie das Nextion Editor-Programm von der Website des Herstellers herunter .
Das Hauptfenster des Programms.



Beim Erstellen eines neuen Projekts („Datei“ -> „Neu“) müssen Sie zuerst den Speicherort und den Namen des neuen Projekts auswählen. Danach werden Sie aufgefordert, das verwendete Bedienfeldmodell, die Bildschirmausrichtung und die erforderliche Codierung auszuwählen.





Um russische Zeichen zu unterstützen, müssen Sie die ISO-8859-5-Codierung verwenden.
Betrachten Sie das Programmfenster mit einem geöffneten Projekt.



Fensterflächen:
  1. Hauptmenü.
  2. Elementbibliothek.
  3. Bildbibliothek / Schriftbibliothek.
  4. Anzeigebereich
  5. Liste der Projektseiten
  6. Der Bearbeitungsbereich für die Attribute des ausgewählten Elements.
  7. Zusammenstellungs-Ausgabefenster.
  8. Ein Fenster zur Eingabe des Codes, der ausgeführt werden soll, wenn ein Ereignis eintritt.
  9. Das Menü steuert die Ausrichtung und Reihenfolge der Elemente.

Unmittelbar nach dem Erstellen des Projekts wird die erste Seite mit dem Index 0 mit dem Standardnamen „page0“ erstellt. Dieser Name kann geändert werden, indem Sie darauf doppelklicken und einen neuen Namen eingeben. Der Seitenname muss innerhalb des Projekts eindeutig sein. Nach Eingabe eines neuen Seitennamens müssen Sie die Eingabetaste drücken.
Betrachten Sie das Seitenlistenmenü (5).



- Seite hinzufügen.

- Seite löschen. Seitenindizes werden neu berechnet, um Lücken zu beseitigen.

- Fügen Sie die Seite vor dem markierten ein. Seitenindizes werden neu berechnet, um die Konsistenz von oben nach unten sicherzustellen.

- Klappen Sie die Seite in der Liste auf. Seitenindizes werden neu berechnet, um die Konsistenz von oben nach unten sicherzustellen.

- Um die Seite in der Liste nach unten zu senken. Seitenindizes werden neu berechnet, um die Konsistenz von oben nach unten sicherzustellen.

- Kopieren Sie die ausgewählte Seite. Eine Kopie der ausgewählten Seite wird am Ende der Liste hinzugefügt.

- Löschen Sie alle Dörfer.

Wenn Sie eine Seite in der Liste auswählen, können Sie im Attributbearbeitungsbereich (6) die Parameter der Seite ändern.



Wenn Sie ein bestimmtes Attribut auswählen, werden am unteren Rand dieser Zone zusätzliche Informationen zum Attribut angezeigt.
Ich habe den Bedarf an allen im Editor verfügbaren Attributen nicht vollständig gemeistert oder verstanden, daher werde ich nur auf die eingehen, die ich herausgefunden habe.

Seitenattribute.
  • vscope - Sichtbarkeit. Mögliche Werte:
    • local - Sichtbarkeit innerhalb dieser Seite.
    • global - Sichtbarkeit auf allen Seiten. Ich verstehe den Zweck dieses Attributs im Kontext der Seite nicht.
  • sta - Hintergrundfüllmodus. Mögliche Werte:
    • Kein Hintergrund - keine Füllung. Wenn Sie eine Seite in diesem Modus anzeigen, wird die zuvor gerenderte Seite als Hintergrund angezeigt.
    • Normallack - Normallackfüllung, angegeben mit dem Attribut "bco"
    • Bild - als Hintergrundbild verwenden. Ein Bild mit einem Index, der im Attribut „pic“ angegeben ist, wird als Bild verwendet. Dementsprechend muss dieses Bild zuerst in die Bildbibliothek (3) hochgeladen werden. Das Bild sollte in der Größe der Bildschirmauflösung des Panels entsprechen. Wenn das Bild die Anzeigegröße überschreitet, wird ein Fehler angezeigt und das Bild wird nicht überlagert. Wenn die Bildgröße kleiner als die Anzeigegröße ist, wird die zuvor gezeichnete Seite in den nicht geschlossenen Bereichen des Bildschirms angezeigt

Das folgende Attribut hängt vom Hintergrundfüllmodus ab.
Im Modus "kein Hintergrund" fehlt dieses Attribut.
Im Volltonmodus ist dies das Attribut „bco“. Es bestimmt, wie die Hintergrundfarbe der Seite gefüllt wird. Der Wert dieses Attributs zeigt einen Farbcode im Format Hight Color an. Ein Doppelklick auf dieses Feld öffnet das Farbauswahlfenster.



In diesem Fenster werden die Werte aller Attribute festgelegt, die der Farbe zugeordnet sind.
Im "Bild" -Modus ist dies das "Bild" -Attribut. Es bestimmt, welches Bild für den Hintergrund der Seite verwendet wird. Ein Doppelklick auf das Wertefeld dieses Attributs öffnet das Bildauswahlfenster.



Dieses Fenster wird auch im Programm verwendet, um die Werte aller Attribute festzulegen, die dem Bild zugeordnet sind.
Die übrigen Attribute zeigen Seitengrößen an und können bearbeitet werden. Ich rate jedoch nicht, sie zu berühren, da das Verhalten der Seite in diesem Fall nicht vorhersehbar ist.
Betrachten Sie nun die Bildbibliothek und die Schriftbibliothek. Sie befinden sich in Zone 3 auf den Registerkarten "Bild" und "Schriftarten".

Registerkarte "Bild".



Auf der Registerkarte werden die in das Projekt hochgeladenen Bilder sowie deren Index und Größe angezeigt.

Tab-Menü.

- Bild hinzufügen. Durch Klicken auf diese Schaltfläche wird das Standardfenster zum Auswählen einer Bilddatei auf der Festplatte geöffnet. Mehrfachauswahl ist möglich.

- Löschen Sie das ausgewählte Bild. Bildindizes werden neu berechnet, um Lücken zu beseitigen.

- Ersetzen Sie das ausgewählte Bild. Durch Klicken auf diese Schaltfläche wird ein Standardfenster zum Auswählen einer Bilddatei auf der Festplatte geöffnet. Das ausgewählte Bild ersetzt das ausgewählte nicht nur in der Bibliothek, sondern auch an den Stellen, an denen es verwendet wird.

- Fügen Sie ein neues Bild vor dem ausgewählten ein. Durch Klicken auf diese Schaltfläche wird ein Standardfenster zum Auswählen einer Bilddatei auf der Festplatte geöffnet. Das ausgewählte Bild wird vor dem ausgewählten eingefügt. Die Bildindizes werden neu berechnet, um die Konsistenz von oben nach unten sicherzustellen.

- Heben Sie das Bild in der Liste auf. Die Bildindizes werden neu berechnet, um die Konsistenz von oben nach unten sicherzustellen.

- Um das Bild in der Liste nach unten zu senken. Die Bildindizes werden neu berechnet, um die Konsistenz von oben nach unten sicherzustellen.

- Alle Bilder löschen.

Tab "Schriften".



Diese Registerkarte zeigt die im Projekt verwendeten Schriftarten an. Um einem Projekt eine Schriftart hinzuzufügen, müssen Sie zunächst mit dem Tool „Font Generator“ eine Schriftartdatei generieren. Dieses Tool wird aus dem Hauptmenü des Programms „Tools“ -> „Font Generator“ aufgerufen.



Im Fenster dieses Tools müssen Sie die Schriftgröße auswählen, die Quellschrift vom System auswählen, das Schema (ich habe ehrlich gesagt nicht verstanden, was es ist) und den Namen der Schrift eingeben, die in der Liste der Schriftarten angezeigt wird. Klicken Sie dann auf die Schaltfläche "Schriftart generieren". Dies fragt nach dem Speicherort der Schriftart und dem Dateinamen. Die Schriftartdatei wird mit der Erweiterung „.zi“ gespeichert. Wenn Sie das Fenster „Font Generator“ schließen, werden Sie aufgefordert, die generierte Schriftart sofort der Projektschriftartenbibliothek hinzuzufügen.

Tab-Menü.

- Fügen Sie eine Schriftart hinzu. Durch Klicken auf diese Schaltfläche wird das Standardfenster zur Auswahl der Schriftartdatei auf der Festplatte geöffnet. Mehrfachauswahl ist möglich.

- Löschen Sie die ausgewählte Schriftart. Schriftindizes werden neu berechnet, um Lücken zu beseitigen.

- Ersetzen Sie die markierte Schrift. Durch Klicken auf diese Schaltfläche wird das Standardfenster zur Auswahl der Schriftartdatei auf der Festplatte geöffnet. Die ausgewählte Schriftart ersetzt die ausgewählte Schriftart und zwar nicht nur in der Bibliothek, sondern auch an den Stellen, an denen sie verwendet wird.

- Fügen Sie die neue Schriftart vor der markierten ein. Durch Klicken auf diese Schaltfläche wird das Standardfenster zur Auswahl der Schriftartdatei auf der Festplatte geöffnet. Die ausgewählte Schriftart wird vor der ausgewählten eingefügt. Schriftindizes werden neu berechnet, um die Konsistenz von oben nach unten sicherzustellen.

- Erhöhen Sie die Schrift in der Liste. Schriftindizes werden neu berechnet, um die Konsistenz von oben nach unten sicherzustellen.

- Senken Sie die Schriftart in der Liste nach unten. Schriftindizes werden neu berechnet, um die Konsistenz von oben nach unten sicherzustellen.

- Vorschau der ausgewählten Schriftart.

- Alle Schriften entfernen.

Betrachten Sie nun die Bibliothek der Elemente (2).



Elemente werden dem Projekt hinzugefügt, indem Sie darauf klicken. In der Zeile unterhalb des Bildschirmbereichs werden grafische Elemente an die Position 0 @ 0, den Timer und die Variable angehängt.
Fast alle grafischen Elemente haben die Attribute „objname“, „vscope“ und „sta“. Kurz gesagt, ich habe bereits über die letzten beiden im Kontext der Seite gesprochen. Ich werde die Geschichte ein wenig erweitern.
  • "Objektname" ist der Name des Elements. Wird beim Schreiben von Code und beim Abfragen von Attributen über UART verwendet.

Das Attribut "vscope" bestimmt die Verfügbarkeit eines Elements zum Ändern seiner Attribute und kann zwei Werte haben:
  • „Lokal“ - Die Attribute eines Elements können nur gelesen und geändert werden, wenn die Seite, auf der es sich befindet, aktiv ist. Dies gilt sowohl für den am Panel selbst ausgeführten Code als auch für Anfragen über den UART.
  • "Global" - Sie können die Attribute eines Elements jederzeit lesen und ändern. Dies gilt sowohl für den am Panel selbst ausgeführten Code als auch für Anfragen über den UART. Wenn Sie diesen Attributwert verwenden, müssen Sie sicherstellen, dass der Name im gesamten Projekt eindeutig ist.

Das Attribut "sta" definiert den Hintergrundfüllmodus für ein Element und kann die folgenden Werte annehmen:
  • "Volltonfarbe" - Füllt den Hintergrund mit einer Volltonfarbe.
  • "Bild" - Verwenden Sie das Bild als Hintergrund. Die Größe des Elements wird an die Größe des Bildes angepasst.
  • "Bild zuschneiden" ist die wörtliche Übersetzung des "ausgeschnittenen Bildes". Im Sinne des nächsten, seltsamerweise zu einem transparenten Hintergrund. Ideologie ist so. Das Bild wird als Hintergrund aufgenommen, aber an den Nullkoordinaten der Seite eingeblendet. Als Hintergrund des Elements wird ein Bildbereich verwendet, der mit der Projektion des Elements auf den Seitenbereich zusammenfällt. Aber es ist einfacher zu versuchen als zu erklären.

In der Liste der Attribute (6) sind einige von ihnen grün dargestellt. Diese Attribute stehen zum Lesen und Schreiben mit Hilfe des auf dem Panel selbst ausgeführten Codes und mit Hilfe von Befehlen über den UART zur Verfügung. Attribute, die in Schwarz angezeigt werden, werden nur während der Projektentwicklungsphase über den Editor geändert.
Berücksichtigen Sie die verfügbaren Elemente.

- Das Feld mit dem Text.

Artikelattribute:
  • "Objektname"
  • "Vscope"
  • "Sta"
  • "Bco" ​​ist die Füllfarbe des Hintergrunds. Dieses Attribut wird angezeigt, wenn Sie im Attribut "sta" den Wert "einfarbig" auswählen.
  • "Pic" - Index des Bildes für den Hintergrund. Dieses Attribut wird angezeigt, wenn Sie im Attribut "sta" den Wert "image" auswählen.
  • “picс” – индекс вырезанной картинки для фона. Этот атрибут появляется при выборе значения “crop image” в атрибуте “sta”
  • “pco” – цвет надписи. Значение атрибута – код цвета в формате Hight Color, которым будет написан текст
  • “font” – индекс шрифта, которым будет написан текст.
  • “xcen” – Горизонтальное выравнивание. Возможные значения:
    • 0 – по левому краю
    • 1 – по центру
    • 2 — по правому краю
  • “ycen” – вертикальное выравнивание. Возможные значения:
    • 0 – по верху
    • 1 – по центру
    • 2 – по низу
  • “txt” – отображаемый текст
  • “txt-maxl” – максимальная длинна текста. Если передать в атрибут “txt”значение длинной больше чем значение этого атрибута, лишние символы в конце отрежутся.
  • “x” и “y” – координаты вставки текста
  • “w” и “h” – ширина и высота прямоугольника, в который вписывается текст.



- Ein Feld mit einem numerischen Wert.
Artikelattribute:
  • “objname”
  • “vscope”
  • “sta”
  • “bco” – цвет заливки фона. Этот атрибут появляется при выборе значения “solid color” в атрибуте “sta”
  • “pic” – индекс картинки для фона. Этот атрибут появляется при выборе значения “image” в атрибуте “sta”
  • “picс” – индекс вырезанной картинки для фона. Этот атрибут появляется при выборе значения “crop image” в атрибуте “sta”
  • “pco” – цвет надписи. Значение атрибута – код цвета в формате Hight Color которым будет написано число.
  • “font” – индекс шрифта, которым будет написано число.
  • “xcen” – Горизонтальное выравнивание. Возможные значения:
    • 0 – по левому краю
    • 1 – по центру
    • 2 — по правому краю
  • “ycen” – вертикальное выравнивание. Возможные значения:
    • 0 – по верху
    • 1 – по центру
    • 2 – по низу
  • “val” – отображаемое значение. Может отображать числа от 0 до 4294967295. Не умеет отображать отрицательные значения.
  • “lenth” –длинна числа как строки. Возможные значения от 0 до 10. При нуле – длинна числа определяется автоматически, в остальных случаях, если длинна числа переданного в как значение атрибута “val” больше значения “ lenth ” спереди числа дописываются недостающие нули, а если длинна числа переданного в как значение атрибута “val” меньше значения “ lenth ” спереди числа отрезаются лишние символы.
  • “x” и “y” – координаты вставки элемента
  • “w” и “h” – ширина и высота прямоугольника, в который вписывается число.



- Knopf ohne Befestigung.
Artikelattribute:
  • “objname”
  • “vscope”
  • “sta”
  • “bco” – цвет кнопки в не нажатом положении. Этот атрибут появляется при выборе значения “solid color” в атрибуте “sta”
  • “bco2” – цвет кнопки в нажатом положении. Этот атрибут появляется при выборе значения “solid color” в атрибуте “sta”
  • “pic” – индекс картинки кнопки в не нажатом положении. Этот атрибут появляется при выборе значения “image” в атрибуте “sta”
  • “pic2” – индекс картинки кнопки в нажатом положении. Этот атрибут появляется при выборе значения “image” в атрибуте “sta”
  • “picс” – индекс вырезанной картинки кнопки в не нажатом положении. Этот атрибут появляется при выборе значения “crop image” в атрибуте “sta”
  • “picс2” – индекс вырезанной картинки кнопки в нажатом положении. Этот атрибут появляется при выборе значения “crop image” в атрибуте “sta”
  • “pco” – цвет надписи на кнопке в не нажатом положении. Значение атрибута – код цвета в формате Hight Color.
  • “pco2” – цвет надписи на кнопке в нажатом положении. Значение атрибута – код цвета в формате Hight Color.
  • “font” – индекс шрифта, которым будет написана надпись на кнопке.
  • “xcen” – Горизонтальное выравнивание. Возможные значения:
    • 0 – по левому краю
    • 1 – по центру
    • 2 — по правому краю
  • “ycen” – вертикальное выравнивание. Возможные значения:
    • 0 – по верху
    • 1 – по центру
    • 2 – по низу
  • “txt” – текст надписи на кнопке.
  • “txt-maxl” – максимальная длинна надписи на кнопке. Если передать в атрибут “txt”значение длинной больше чем значение этого атрибута, лишние символы в конце отрежутся.
  • “x” и “y” – координаты вставки кнопки
  • “w” и “h” – ширина и высота кнопки.



- Fortschrittsbalken. Zeigt ein Lineal an, das bis zum angegebenen Prozentwert gefüllt ist. Beim Anwenden von Bildern wird eine sehr interessante Lösung implementiert. Es gibt zwei Bilder. Zum Beispiel ein Thermometer. Auf der einen Seite ist es leer (0%), auf der anderen Seite ist es voll (100%).

Nach dem Binden an das Element zeigt der Fortschrittsbalken je nach eingestelltem Wert einen Teil des ersten Bildes und einen Teil des zweiten.

Artikelattribute:
  • “objname”
  • “vscope”
  • “sta” – возможные значения: “solid color” и “image”
  • “dez” – направление. Возможные значения:
    • “horizontal” – по горизонтали
    • “vertical” – по вертикали
  • “bco” – цвет при при заполнении 0%. Этот атрибут появляется при выборе значения “solid color” в атрибуте “sta”
  • “рco” – цвет при при заполнении 100%. Этот атрибут появляется при выборе значения “solid color” в атрибуте “sta”
  • “bpic” – индекс картинки кнопки при заполнении в 0%. Этот атрибут появляется при выборе значения “image” в атрибуте “sta”
  • “ppic” – индекс картинки при заполнении в 100%. Этот атрибут появляется при выборе значения “image” в атрибуте “sta”
  • “val” – наполнение. Возможные значения: от 0 до 100.
  • “x” и “y” – координаты вставки прогресс бара
  • “w” и “h” – ширина и высота прогресс бара.



-Bild
Artikelattribute:
  • “objname”
  • “vscope”
  • “pic” – индекс картинки.
  • “x” и “y” – координаты вставки картинки
  • “w” и “h” – ширина и высота картинки.



- Bild ausschneiden.
Artikelattribute:
  • “objname”
  • “vscope”
  • “picс” – индекс картинки.
  • “x” и “y” – координаты вставки картинки
  • “w” и “h” – ширина и высота картинки



- Unsichtbarer Knopf.
Artikelattribute:
  • “objname”
  • “vscope”
  • “x” и “y” – координаты вставки картинки
  • “w” и “h” – ширина и высота картинки



- Pfeilanzeige. Zeigt einen um einen bestimmten Winkel gedrehten Pfeil an.
Artikelattribute:
  • “objname”
  • “vscope”
  • “sta” Возможные значения: “solid color” и “crop image”
  • “bco” – цвет фона. Значение атрибута – код цвета в формате Hight Color. Этот атрибут появляется при выборе значения “solid color” в атрибуте “sta”
  • “picс” – индекс вырезанной картинки на фоне. Этот атрибут появляется при выборе значения “crop image” в атрибуте “sta”
  • “val” – значение угла поворота стрелки от 0 до 360.
  • “wid” – толщина стрелки. Значение от 0 до 5.
  • “pco” – цвет стрелки. Значение атрибута – код цвета в формате Hight Color.
  • “x” и “y” – координаты вставки элемента
  • “w” и “h” – ширина и высота элемента.



- Zeitplan. Das Element erstellt einen Graphen aus Punkten, dem Code, der auf dem Panel oder über UART ausgeführt wird. Unterstützt bis zu vier Diagramme, die gleichzeitig angezeigt werden. Aus meiner Sicht ist das Element noch nicht abgeschlossen. Der Grund für diese Meinung wird unten beschrieben.
Artikelattribute:
  • “objname”
  • “vscope”
  • “dir” – направление построения. Возможные значения:
    • “left to right” – слева направо
    • “right ti left” – справа налево
  • “sta”
  • “ch” – количество отображаемых каналов. Возможные значения от 1 до 4.
  • “bco” – цвет фона. Значение атрибута – код цвета в формате Hight Color. Этот атрибут появляется при выборе значения “solid color” в атрибуте “sta”
  • “pic” – индекс картинки фона. Этот атрибут появляется при выборе значения “image” в атрибуте “sta”
  • “picс” – индекс вырезанной картинки на фоне. Этот атрибут появляется при выборе значения “crop image” в атрибуте “sta”
  • “рco0” – цвет графика канала 1.
  • “рco1” – цвет графика канала 2. Этот атрибут появляется при значении атрибута “ch” более 1.
  • “рco2” – цвет графика канала 3. Этот атрибут появляется при значении атрибута “ch” более 2.
  • “рco3” – цвет графика канала 4. Этот атрибут появляется при значении атрибута “ch” более 3.
  • “x” и “y” – координаты вставки графика
  • “w” и “h” – ширина и высота графика.



- Schieberegler
Artikelattribute:
  • “objname”
  • “vscope”
  • “mode” – направление слайдера. Возможные значения:
    • “horizontal” – по горизонтали
    • “Vertical” – по вертикали
  • “sta”
  • “psta” – режим рисования курсора слайдера. Возможные значения:
    • “solid” – прямоугольник залитый сплошным цветом.
    • “image” – в качестве курсора используется изображение.
  • “bco” – цвет фона. Значение атрибута – код цвета в формате Hight Color. Этот атрибут появляется при выборе значения “solid color” в атрибуте “sta”
  • “pic” – индекс картинки фона. Этот атрибут появляется при выборе значения “image” в атрибуте “sta”
  • “picс” – индекс вырезанной картинки на фоне. Этот атрибут появляется при выборе значения “crop image” в атрибуте “sta”
  • “рco” – цвет курсора. Этот атрибут появляется при выборе значения “solid” в атрибуте “psta”
  • “рic2” – индекс картинки курсора. Этот атрибут появляется при выборе значения “image” в атрибуте “psta ”
  • “wid” – ширина курсора.
  • “hig” – высота курсора.
  • “val” – значение соответствующее положению слайдера.
  • “maxval” – максимальное величина значения слайдера.
  • “minval” – минимальная величина значения слайдера
  • “x” и “y” – координаты вставки графика
  • “w” и “h” – ширина и высота графика.



-Schalten Sie mit zwei festen Positionen.
Artikelattribute:
  • “objname”
  • “vscope”
  • “sta”
  • “bco0” – цвет переключателя в положении 0. Этот атрибут появляется при выборе значения “solid color” в атрибуте “sta”
  • “bco1” – цвет переключателя в положении 1. Этот атрибут появляется при выборе значения “solid color” в атрибуте “sta”
  • “pic0” – индекс картинки переключателя в положении 0. Этот атрибут появляется при выборе значения “image” в атрибуте “sta”
  • “pic1” – индекс картинки переключателя в положении 1. Этот атрибут появляется при выборе значения “image” в атрибуте “sta”
  • “picс0” – индекс вырезанной картинки переключателя в положении 0. Этот атрибут появляется при выборе значения “crop image” в атрибуте “sta”
  • “picс1” – индекс вырезанной переключателя в положении 1. Этот атрибут появляется при выборе значения “crop image” в атрибуте “sta”
  • “val” – положение переключателя. Возможные значения 0 и 1
  • “x” и “y” – координаты вставки кнопки
  • “w” и “h” – ширина и высота кнопки.



Nun werden nicht angezeigte Elemente betrachtet. Wenn sie zu einer Seite hinzugefügt werden, werden sie nicht zum Bildschirm hinzugefügt, sondern befinden sich in einem speziellen Editorfenster.



- variabel. Dient zur Verwendung des Datenspeichers für Berechnungen, die im Code direkt auf dem Bedienfeld ausgeführt werden. Abhängig vom Typ wird entweder ein numerischer Wert oder eine Zeichenfolge gespeichert
Artikelattribute:
  • “objname”
  • “vscope”
  • “sta” — тип переменной. Возможные значения:
    • “Number” – переменная хранит числовое значение
    • “String” – переменная хранит строковое значение
  • “val” – числовое значение переменной. Этот атрибут появляется при выборе значения “Number” в атрибуте “sta”
  • “txt” – строковое значение переменной. Этот атрибут появляется при выборе значения “String” в атрибуте “sta”
  • “txt-maxl” –максимальная длинна строкового значения переменной. Этот атрибут появляется при выборе значения “String” в атрибуте “sta”



-Timer. Ruft den "Timer Event" -Aufruf regelmäßig nach einer bestimmten Zeit auf.
Artikelattribute:
  • “objname”
  • “vscope”
  • “tim” – период срабатывания таймера в миллисекундах. Возможные значения от 50 ms. до 65535 ms.
  • “en” – работа таймера. При значении 0 – отсчёт времени остановлен, при значении – 1 работает.



Das Verhalten globaler und lokaler Elemente.

Beim Zeichnen der Seite, an die sie angehängt sind, werden lokale Elemente immer mit den Werten initialisiert, die zum Zeitpunkt der Projektentwicklung zugewiesen wurden. Während die Seite angezeigt wird, können diese Werte mithilfe des ausführbaren Codes auf dem Bedienfeld oder über UART geändert werden. Wenn Sie jedoch zu einer anderen Seite wechseln, werden alle geänderten Attributwerte auf die Werte zurückgesetzt, die während der Entwicklung festgelegt wurden. Attributwerte globaler Elemente ändern sich nicht, wenn Sie von Seite zu Seite wechseln.
Das „Waveform“ -Element (Graph) funktioniert nicht im globalen Modus und verhält sich auf jeden Fall wie lokal. Wenn Sie zu der Seite wechseln, an die sie angehängt ist, wird sie immer leer gezeichnet und die Einstellungen werden während der Entwicklung festgelegt. Da das Nextion HMI-Projekt noch recht jung ist, ist dieses Element höchstwahrscheinlich noch nicht abgeschlossen.

Schreiben von ausführbarem Code auf dem Panel.

Der Code wird auf dem Panel ausgeführt und ist ereignisbasiert. Das heißt, der Code selbst wird in die Ereignishandler der Elemente geschrieben und ausgeführt, wenn die entsprechenden Ereignisse auftreten.
Betrachten Sie zunächst die Ereignisse, die auf dem Panel stattfinden.

Page Veranstaltungen:



  • Ereignis vorinitialisieren - Das Ereignis tritt ein, bevor die Seite gerendert wird.
  • Ereignis nach der Initialisierung - Das Ereignis tritt unmittelbar nach dem Rendern der Seite ein.
  • Drücken Sie Ereignis - das Ereignis tritt ein, wenn Sie auf den Bildschirm an einer Stelle tippen, die frei von anderen Elementen ist. Wenn Sie auf ein Element klicken, wird das Ereignis von ihm aufgerufen.
  • Berührungsfreigabeereignis - Das Ereignis tritt ein, nachdem der zuvor gedrückte Bereich der Seite von anderen Elementen befreit wurde.


Alle Elemente außer denjenigen, die nicht angezeigt werden, verfügen über zwei Ereignishandler - push und release.



  • Touch Press Event - Ein Ereignis tritt auf, wenn auf ein Element geklickt wird.
  • Touch Release Event - Das Ereignis tritt ein, nachdem das zuvor gedrückte Element losgelassen wurde.


Das Slider-Element (Slider) verfügt über ein „Touch Move“ -Ereignis, das jedes Mal auftritt, wenn der Cursor an eine Position bewegt wird.



Das Timer-Element verfügt über eine einzelne Timer-Ereignisbehandlungsroutine - "Timer-Ereignis".



Operationsbefehle und bedingte Operatoren, die vom Argumentbereich "

Gehe zu

Seite " unterstützt werden - Gehe zu Seite. Das Argument kann entweder der Name oder der Index der Seite sein.
Beispiel - Durch Klicken auf die Schaltfläche gelangen Sie zu Seite 1 mit dem Index 1. Der Befehl wird in den Handler des Touch PressEven-Ereignisses geschrieben:

page  page1

oder
page 1




Attributwert schreiben oder lesen

Argumentwert lesen
elementname.argument-
oder
Seitenname. Elementname

Argument Schreiben eines Werts in das Argument
Elementname Argument = Wert
oder
Seitenname. Elementname

Argument = Wert Beispiel: Durch Drücken der Schaltfläche wird der Wert des Arguments „val“ aus dem Feld mit einem numerischen Wert mit dem Namen „n0“ in das Argument „val“ des Felds mit einem numerischen Wert mit dem Namen „n1“ umgeschrieben. Ab dem Argument "txt" des Textfeldes mit dem Namen "t0" wird die Zeile in das Argument "txt" des Textfeldes mit dem Namen "t1" umgeschrieben. Alle Elemente befinden sich auf einer Seite mit dem Namen "page0".



Typkonvertierung
cov value1, value2 ist lang, wobei:
  • value1 - Quellattribut , z. B. n0.val
  • Wert2 - Empfänger - Attribut so t0.txt
  • Länge - die Länge der Linie. Wenn auf 0 gesetzt, wird automatisch erkannt. Wenn eine Zahl in eine Zeichenfolge konvertiert wird, ist dies die Länge des Zielattributs, und wenn die Zeichenfolge in eine Zahl konvertiert wird, ist dies die Länge des Quellattributs.

Wenn die Typen des Quellattributs und des Attributs des Empfängers identisch sind, wird ein Kompilierungsfehler generiert.

Beispiele.
  1. Der Wert des Attributs „txt“ (Zeichenfolge) des Textfelds „t0“ wird beim Drücken der Schaltfläche in eine Zahl umgewandelt und in das Argument „val“ (Nummer) des Felds mit dem numerischen Wert „n0“ geschrieben.
  2. Der Wert des Attributs "val" (Nummer) des Feldes mit dem numerischen Wert "n0" wird beim Drücken der Schaltfläche in eine Zahl umgewandelt und in das Argument "txt" (Zeichenfolge) des Textfeldes "t0" geschrieben.


Mathematische Operationen.

Die Operationen Addition (+), Subtraktion (-), Multiplikation (*) und Division (/) werden unterstützt. Es ist zu berücksichtigen, dass das Panel nur mit positiven Ganzzahlen arbeiten kann.

Ein Beispiel.

Wenn die Taste gedrückt wird, beginnt der Timer zu arbeiten und addiert eins zum Wert des numerischen Felds „n0“. Wenn Sie die Taste loslassen, endet die Partitur.

Timer-Einstellungen “tm0” Das


Argument “tim” ist 1000 ms. Wenn der Timer läuft, wird das Ereignis „Timer Event“ alle 1000 Millisekunden einmal aufgerufen.
Das Argument „en“ ist 0. Standardmäßig ist der Timer deaktiviert.

Der Code im Ereignis "Touch Press Event" gräbt.


Wenn die Taste gedrückt wird, wird der Wert „t“ des Timers „tm0“ in 1 eingegeben. Das heißt, der Timer wird eingeschaltet.

Der Code im Ereignis "Touch Release Event" graben.


Wenn die Taste losgelassen wird, wird der Wert des Arguments "en" des Timers "tm0" auf 0 gesetzt. Das heißt, der Timer wird ausgeschaltet.

Der Code im Ereignis "Timer Event" des Timers "tm0". Bei


jedem Auslösen des Timers wird die Einheit "val" des digitalen Felds "n0" zu eins addiert und in dasselbe Argument geschrieben.

Bedingte Anweisungen

Rekordbeispiele:

if(t0.txt==”123456”)
{    
рage 1
}

Wenn der Wert des Attributs "txt" des Textfelds "t0" "123456" ist, gehen Sie zur Seite mit Index 1.

if(b0.txt==”start”)
{    
  b0.txt==”stop”  
} else
{ 
  b0.txt==”start”  
}

Wenn der Wert des Attributs "txt" der Schaltfläche "t0" gleich "start" ist, schreiben wir den Wert "stop" in dieses Attribut, andernfalls schreiben wir den Wert "stop" in dieses Attribut.

if(b0.txt==”1”)
{    
  b0.txt==”2”  
} else if (b0.txt==”2” )
{ 
  b0.txt==”3”  
}else
{ 
  b0.txt==”1”
}

Wenn die Werte des Attributs "txt" der Schaltfläche "t0" gleich "1" sind, schreiben wir den Wert "2" anders in dieses Attribut: in diesem Attribut ist der Wert "1").

Mögliche Vergleichsoperatoren:
  • Für numerische Werte
    • > mehr
    • <weniger
    • == gleich
    • ! = nicht gleich
    • > = größer als oder gleich
    • <= kleiner oder gleich
  • Für Zeichenfolgenwerte
    • == gleich
    • ! = nicht gleich


Geschachtelte () - und Kommunikationsoperatoren sind nicht zulässig. Die folgende Konstruktion kann beispielsweise nicht verwendet werden: if (j0.val + 1> 0). Um solche Probleme zu lösen, müssen Variablen verwendet werden.

Geschachtelte "if" und "else if" werden unterstützt.

Debuggen des Projekts.

Der Nextion Editor enthält einen Projektsimulator. Um es zu starten, müssen Sie die “Debug” -Taste ( ) des Hauptmenüs drücken . In diesem Fall wird das Projekt kompiliert und im Simulator geöffnet, wo Sie die Arbeit des Projekts überprüfen können.



Projekt im Panel herunterladen.

Es gibt zwei Methoden, um ein Projekt in ein Panel zu laden.
Die erste Methode ist über UART. Dies erfordert einen USB-Adapter -> UART. Wir schließen es gemäß der Tabelle an.
Nextion HMI USB -> UART
+ 5V + 5V
Rx Tx
Tx Rx
GND GND

Klicken Sie im Editor im Hauptmenü auf die Schaltfläche „Hochladen“ ( ). Gleichzeitig wird das Projekt übersetzt und das Ladefenster geöffnet.



Sie können sofort den Port installieren, unter dem der Adapter im System installiert ist, Sie können die automatische Suche verlassen. Klicken Sie auf „GO“ und das Projekt wird in das Panel geladen.



Bei großen Projekten, insbesondere bei großen Ressourcen in Form von Bildern und Schriftarten, kann die Ladezeit mehrere Minuten betragen. Nachdem der Download abgeschlossen ist, wird das Panel neu gestartet und in Betrieb genommen.
Ich habe nur diese Startmethode verwendet, aber es gibt eine andere Möglichkeit, die Miro SD-Karte zu verwenden.

Ich erzähle dir die Theorie. Die Karte muss im FAT32-Format formatiert sein. Klicken Sie im Editor auf die Schaltfläche "Kompilieren" (). Bei erfolgreicher Übersetzung im Ausgabefenster der Übersetzungsergebnisse (7) sollten keine roten Linien erscheinen.



Öffnen Sie anschließend im Hauptmenü den Punkt "Datei" und wählen Sie "Build-Ordner öffnen" .Ein



Ordner mit den kompilierten Projektdateien wird geöffnet. Wählen Sie die Datei mit dem Namen unseres Projekts und der Erweiterung „.tft“ im Kopfverzeichnis der SD-Karte. Datei mit dieser Endung auf der Karte sollte eine sein. Dann setzen wir die Karte in das vom Netzteil getrennte Bedienfeld ein und versorgen es mit Strom. Wenn die Stromversorgung eingeschaltet wird, erkennt das Bedienfeld die Karte selbst. Wenn es eine Datei mit der Erweiterung „.tft“ findet, wird das Projekt von dieser heruntergeladen. Der Ladevorgang wird auf dem Bildschirm angezeigt. Nachdem der Download abgeschlossen ist, schalten Sie das Bedienfeld aus und entfernen Sie die SD-Karte.

Natürlich habe ich nicht alle Funktionen des Nextion HMI-Panels beschrieben, sondern nur die, auf die ich bei der Integration der Panel-Unterstützung in das FLProg-Programm gestoßen bin. Weitere Informationen zum Panel finden Sie unter wiki.iteadstudio.com/Nextion_HMI_Solution .

In den folgenden Lektionen werde ich erklären, wie die Interaktion der Nextion HMI- und Arduino-Bedienfelder mit dem Programm FLProg organisiert wird.

Vielen Dank für Ihre Aufmerksamkeit