Inhaltsverzeichnis:

Machen Sie ein Smart Home-Steuerungssystem auf STONE HMI Disp - Gunook
Machen Sie ein Smart Home-Steuerungssystem auf STONE HMI Disp - Gunook

Video: Machen Sie ein Smart Home-Steuerungssystem auf STONE HMI Disp - Gunook

Video: Machen Sie ein Smart Home-Steuerungssystem auf STONE HMI Disp - Gunook
Video: Sonoff NS-Panel - Die volle Kontrolle mit ESP-Home 2024, November
Anonim
Machen Sie ein Smart Home Control System auf STONE HMI Disp
Machen Sie ein Smart Home Control System auf STONE HMI Disp

Projektvorstellung

Das folgende Tutorial zeigt Ihnen, wie Sie mit dem Touch-Display-Modul STONE STVC050WT-01 ein einfaches Steuerungssystem für Haushaltsgeräte erstellen.

Schritt 1: STONE STVC050WT - 01 TFT-LCD-Anzeigemodul

STONE STVC050WT - 01 TFT-LCD-Anzeigemodul
STONE STVC050WT - 01 TFT-LCD-Anzeigemodul

STONE STVC050WT - 01 Das Support-Touch-Display-Modul ist 5 Zoll, 480 * 272 Auflösung auf dem Modul wurde integriert Display- und Touchscreen-Treiber benötigte Chips, Entwickler brauchen nur auf dem STONE, der offiziellen VGUS-Designsoftware, das UI-Interface-Design und die Generierung eines Programmierdatei auf das STONE-Displaymodul heruntergeladen und dann über eine serielle Schnittstelle (RS232 / RS485 / TTL) damit korrespondiert, können Sie komplexe Aspekte des UI-Designs ausführen. Der Ablauf ist wie folgt:

Schritt 2: Das folgende Bild zeigt einige Parameter des Anzeigemoduls STONE STVC050WT-01:

Das folgende Bild zeigt einige Parameter des Anzeigemoduls STONE STVC050WT-01
Das folgende Bild zeigt einige Parameter des Anzeigemoduls STONE STVC050WT-01

STEIN STVC050WT-01:

Dieses Displaymodul ist nur eines von vielen in dieser Produktlinie. Es gibt viele andere Anzeigemodule in verschiedenen Konfigurationen. www.stoneitech.com

Schritt 3: Entwicklung des STONE-Displaymoduls in drei Schritten

1. Entwarf die Benutzeroberfläche mit der STONE TOOL-Software und lud die Designdatei auf das Anzeigemodul herunter.

2. MCU kommuniziert mit dem STONE-Anzeigemodul über die serielle Schnittstelle.

3. Die MCU führt basierend auf den in Schritt 2 erhaltenen Daten andere Aktionen aus.

Schritt 4: Design der Benutzeroberfläche:

UI-Schnittstellendesign
UI-Schnittstellendesign

Heute haben wir eine einfache Haushaltsgerätesteuerung gemacht. Über Photoshop habe ich die folgende einfache Benutzeroberfläche entworfen:

Schritt 5: Funktion:

Funktion
Funktion

wenn die Lichttaste gedrückt wird, springt die Seite auf 2 und zeigt den Schaltzustand von drei Lichtern an. Wenn der Ein-/Aus-Lichttaster gedrückt wird, gibt die serielle Schnittstelle des Bildschirmmoduls das Schaltsignalprotokoll aus. Die externe MCU kann Daten über eine serielle Schnittstelle direkt an das Bildschirmmodul senden. Lassen Sie den Bildschirm den Lichtschalterzustand direkt anzeigen.

Schritt 6: Neues Projekt mit STONE-Display:

Auf der Website von STONE können wir die neueste Version der Software STONE TOOLS 2019 herunterladen, über die wir die Benutzeroberfläche gestalten können:

www.stoneitech.com/support/download/software

Schritt 7: STONE TOOL ist eine GUI-Design-Software

STONE TOOL ist eine GUI-Design-Software
STONE TOOL ist eine GUI-Design-Software

STONE TOOL ist eine GUI-Design-Software, die keine Installation erfordert. Nach dem Download kann es direkt geöffnet und per Dekomprimierung ausgeführt werden. Es ist zu beachten, dass diese Software auf Windows8- und Windows10-Systemen kompatibel ausgeführt werden muss

Schritt 8: Klicken Sie mit der rechten Maustaste auf das Verzeichnis "Bild" und löschen Sie 0.jpg

Klicken Sie mit der rechten Maustaste auf das
Klicken Sie mit der rechten Maustaste auf das

Da ich STVC050WT-01 mit einer Auflösung von 480*272 und der Standard-Flash-Speichergröße von 128Mbyte (erweiterbar auf 1024MByte) verwende, habe ich 128Mbyte gewählt.

Stellen Sie den Projektnamen und den Speicherpfad ein und klicken Sie auf "OK", um den Vorgang abzuschließen. Klicken Sie mit der rechten Maustaste auf das Verzeichnis "Bild" und löschen Sie 0.jpg:

Schritt 9: UI-Bild in den STONE TOOLS hinzufügen:

UI-Bild in den STONE TOOLS hinzufügen
UI-Bild in den STONE TOOLS hinzufügen
UI-Bild in den STONE TOOLS hinzufügen
UI-Bild in den STONE TOOLS hinzufügen
UI-Bild in den STONE TOOLS hinzufügen
UI-Bild in den STONE TOOLS hinzufügen

Klicken Sie mit der rechten Maustaste auf das Verzeichnis "picture" und fügen Sie die beiden UI-SYMBOLE, die wir vorbereitet haben, zum Projekt hinzu:

Schritt 10: Fügen Sie den Wortbestand in STONE TOOLS hinzu

Fügen Sie den Wortstamm in STONE TOOLS hinzu
Fügen Sie den Wortstamm in STONE TOOLS hinzu

Klicken Sie mit der rechten Maustaste auf "Schriftartdatei", wählen Sie die entsprechende Schriftart aus, um sie dem Projekt hinzuzufügen.

Hier habe ich ASCII 24 mal 48 gewählt.

Schritt 11: Schaltfläche hinzufügen

Schaltfläche hinzufügen
Schaltfläche hinzufügen

Wir müssen eine Funktion auf der Schaltfläche "Licht" in der ersten Benutzeroberfläche der STONE TOOL-Software einstellen:

Wenn wir auf die Schaltfläche "Licht" klicken, springen wir zur zweiten Seite.

Wie es geht?

Klicken Sie auf das Symbol "Schaltfläche", um den Bereich der Schaltfläche zu zeichnen:

Schritt 12: Schaltflächeneigenschaften werden in der Eigenschaftsleiste auf der rechten Seite der STONE TOOL Software aufgelistet

Die Schaltflächeneigenschaften werden in der Eigenschaftsleiste auf der rechten Seite der STONE TOOL Software aufgelistet
Die Schaltflächeneigenschaften werden in der Eigenschaftsleiste auf der rechten Seite der STONE TOOL Software aufgelistet

Der gelbe Bereich stellt den Schaltflächenbereich dar, den der Benutzer gezeichnet hat. Die Eigenschaften der Schaltflächen sind in der Eigenschaftsleiste auf der rechten Seite der STONE TOOL-Software aufgelistet:

Setzen Sie einfach die Option "pageswitch" auf 1, um beim Drücken der Taste zur zweiten Seite zu wechseln.

Schritt 13: „Generating Configuration File“in „Tool“und dann „Virtual Serial Port Screen“

Bild
Bild

Schritt 14: Dann gehen wir weiter und ändern den Pfeil in der oberen linken Ecke von Seite 2 in eine Schaltfläche:

Dann gehen wir weiter und ändern den Pfeil in der oberen linken Ecke von Seite 2 in eine Schaltfläche
Dann gehen wir weiter und ändern den Pfeil in der oberen linken Ecke von Seite 2 in eine Schaltfläche

Wenn der Benutzer diese Schaltfläche drückt, kehrt er zur ersten Seite zurück.

Schritt 15: Textanzeige hinzufügen:

Textanzeige hinzufügen
Textanzeige hinzufügen
Textanzeige hinzufügen
Textanzeige hinzufügen

Kreisen Sie mit der Textvariablensteuerung den Leerraum nach "light1" ein:

Schritt 16: Klicken Sie dann auf die gerade hinzugefügte Textvariable, und die Eigenschaftenschnittstelle wird rechts von der STONE TOOL-Software angezeigt, wobei hauptsächlich die folgenden Parameter geändert werden:

Klicken Sie dann auf die soeben hinzugefügte Textvariable, und die Eigenschaftenschnittstelle wird rechts von der STONE TOOL-Software angezeigt und ändert hauptsächlich die folgenden Parameter
Klicken Sie dann auf die soeben hinzugefügte Textvariable, und die Eigenschaftenschnittstelle wird rechts von der STONE TOOL-Software angezeigt und ändert hauptsächlich die folgenden Parameter

Unter ihnen bezieht sich "Variable Speicheradresse" auf die Speicheradresse, an der der angezeigte Inhalt gespeichert wird. Eine Adresse kann zwei Byte speichern. Unser Standardanzeigeinhalt ist "OFF", was drei Byte Speicherplatz erfordert. Das heißt, wir speichern "OFF" in Adresse 0020 und 0021.

Schritt 17: Eine Schaltfläche mit einem Rückgabewert:

Eine Schaltfläche mit einem Rückgabewert
Eine Schaltfläche mit einem Rückgabewert

Das oben verwendete Steuerelement ist "Button". Dieses "Button"-Steuerelement gibt keinen Wert zurück, was bedeutet, dass der serielle Port des Anzeigemoduls keine Daten an die MCU sendet, wenn der Benutzer den Button drückt.

Wenn der Benutzer die Schaltfläche gedrückt hat und möchte, dass das Bildschirmmodul Daten an die MCU zurückgibt, können wir das Steuerelement "Tastenwert zurückgeben" verwenden:

Schritt 18: Die Eigenschaftsleiste wird wie folgt eingestellt:

Die Eigenschaftsleiste wird wie folgt eingestellt
Die Eigenschaftsleiste wird wie folgt eingestellt

Schritt 19: Laden Sie die UI-Designdatei auf das Anzeigemodul herunter:

Laden Sie die UI-Designdatei in das Anzeigemodul herunter
Laden Sie die UI-Designdatei in das Anzeigemodul herunter

1. Stecken Sie das USB-Flash-Laufwerk in den Computer

2. Klicken Sie in der STONE TOOL-Box3 auf die Schaltfläche Download to u-disk. Ziehen Sie den USB-Stick heraus

4. Stecken Sie den USB-Datenträger in die USB-Schnittstelle des Anzeigemoduls und warten Sie den Abschluss des Upgrades ab. Wenn das Upgrade abgeschlossen ist, ertönt ein Hinweiston

5. testen

Schritt 20: Eine serielle Portkommunikation

Eine serielle Port-Kommunikation
Eine serielle Port-Kommunikation

Schlüsselwert-Rückgabe

Nachdem Sie das Programm auf das Anzeigemodul heruntergeladen haben, schalten Sie es ein, schließen Sie den Computer über die serielle Schnittstelle über USB-TTL an, drücken Sie die Lichttaste von Light1 und geben Sie die Daten der seriellen Schnittstelle zurück: a55a 06 83 00 26 01 00 A8

Schritt 21: Drücken Sie die Taste, um das Licht auszuschalten

Drücken Sie die Taste, um das Licht auszuschalten
Drücken Sie die Taste, um das Licht auszuschalten

Serielle Datenrückgabe:

A5 5A 06 83 00 26 01 00 A9

A5 5A: Frameheader06: Anweisungsbytelänge, 83 00 26 01 00 A9 insgesamt 6 Bytes (ohne Datenframeheader)

83: Befehl zum Lesen des Variablenspeichers

00 26: Variable Speicheradresse

01: Datenwortlänge, 00 A9: 1-Wort-Länge (2 Byte) 00 A9: Inhalt der Nutzdaten, abhängig von der Tastenbelegung.

Schritt 22: Registerdaten schreiben

Diese Anweisung schreibt 55 aa auf die Adresse 0x0020 im Datenspeicherbereich:

0xA5 0x5A 0x05 0x82 0x00 0x20 0x55 0xaa

Da wir die Speicheradresse für die Textanzeige von Light1 auf 0x0020 gesetzt haben, entspricht das Schreiben von Daten an diese Adresse über einen seriellen Port dem Ändern des Inhalts des Textanzeigefelds von Light1.

Schritt 23: Registerdaten lesen

Die serielle Schnittstelle sendet den folgenden Befehl an das Anzeigemodul:

0xA5 0x5A 0x03 0x83 0x00 0x20 Stellt den Wert des Lesens 0x0020 dar und repräsentiert im Änderungsprojekt den Schaltzustand der Leselampe.

Empfohlen: