Tabla de contenido
- resumen
- Lista de materiales
- Instalar el software y las herramientas necesarias
- Creación de imágenes e iconos para GUI en el software DGUS
- Creación de una interfaz de usuario con DGUS Software
- Configuración de hardware de pantalla ESP32 y DWIN
- Proyecto PCB Gerber Archivo y Orden PCB en línea
- Código fuente/Programa
- Pruebas y demostraciones
- Video Tutorial y Guía
resumen
En esta guía, aprenderá a usar la pantalla LCD Dwin HMI con el módulo WiFi ESP32. En la actualidad, las pantallas DWIN HMI son muy populares en el mercado del fabricante. El software DGUS le permite diseñar cualquier interfaz de usuario y controlar el contenido de la interfaz de usuario con un microcontrolador. La pantalla DMG80480C070 de 7 pulgadas tiene una resolución de 800X480 píxeles. La pantalla puede interactuar con placas de microcontroladores compatibles con 5V como Arduino, ESP8266, ESP32, PIC, 8051, STM32, etc.
Esta demostración utiliza la pantalla DWIN HMI y el módulo ESP32 para crear un controlador doméstico inteligente. El BME280 lee la temperatura, la humedad, la presión y el punto de rocío y muestra los datos en la pantalla DWIN. Del mismo modo, también controla el módulo de relé de 4 canales utilizando la interfaz de usuario / widget en la pantalla DWIN.
Antes de continuar, puede consultar nuestras guías anteriores en estas pantallas.
- Pantalla DWIN HMI TFT LCD Empezar
- Pantalla DWIN HMI TFT LCD e interfaz Arduino
El proyecto de controlador doméstico inteligente con DWIN HMI Display & ESP32 utiliza la pantalla LCD DWIN de 7 pulgadas DMG80480C070 y otros componentes. El proyecto consta de los siguientes pasos:
- Instalar el software y las herramientas necesarias
- Diseño de una GUI de pantalla
- Cargar archivos de proyecto en la pantalla
- Sensores de interfaz y relés para ESP32
- Comunicación UART entre ESP32 y DWIN HMI display
- Monitoreo y control de datos de sensores de electrodomésticos de CA desde esta pantalla táctil
Lista de materiales
Instalar el software y las herramientas necesarias
DGUS (DWIN graphics utilization software) es una plataforma de software GUI rentable desarrollada por DWIN Technology. Basado en la plataforma de hardware K600+ Kernel, el diseño de la GUI combinado con una interfaz de comandos simple elimina la necesidad de una programación compleja y costosos entornos de desarrollo, que se pueden realizar rápidamente.
Descargue el software DGUS desde el enlace anterior y extraiga la carpeta. Abra la carpeta extraída y haga clic en ‘DGUS_V7.642.exe‘. Se abre la ventana DGUS. El chino está configurado de forma predeterminada, por lo que primero debe cambiarlo a inglés.
Para establecer comunicación con su computadora y el software DGUS, debe descargar el software del controlador XR21X141X.
Después de la descarga, instale el software en su sistema informático.
Creación de imágenes e iconos para GUI en el software DGUS
DMG80480C070 tiene una resolución de pantalla de 800×480. Por lo tanto, debe crear imágenes e iconos con la misma resolución. Para la parte del proyecto de hogar inteligente, las tres imágenes que hice son:
Todas las imágenes deben estar en .bmp formato. Debido a que el nombre de la imagen es importante.bmp debe llamarse 00.bmp, 01.bmp y 02. Puede utilizar Photoshop para crear imágenes y guardar archivos en formatos .bmp.
Del mismo modo, creé dos iconos para este proyecto. El icono se utiliza como botón de encendido/apagado. Según los requisitos de la interfaz de usuario, el tamaño del icono es 160×80. El icono puede estar en formato jpg o png y debe llamarse 01, 02, etc.
Creación de una interfaz de usuario con DGUS Software
Cree una carpeta en su escritorio y asígnele un nombre como “DWIN Smart Home”. Esta carpeta contiene todos los archivos necesarios y creados durante el diseño de la interfaz de usuario.
Abra el software DGUS y cree un nuevo proyecto. Seleccione una resolución de 800×480 y la ubicación del proyecto en la carpeta que creó en el escritorio. A continuación, haga clic en Aceptar
Aparecerá la ventana Proyecto. A la izquierda, haga clic en el signo “+” y seleccione el . Importe las tres imágenes para la interfaz de usuario en formato bmp.
Ahora se importarán todas las imágenes. A continuación, debe crear una interfaz de usuario utilizando un área específica de esta pantalla.
Antes de eso, debe generar un archivo .icl de las imágenes e iconos. Para ello,[設定]Ir a la[DGUS]Clic. Aparecerá una ventana. Haga clic en la herramienta ICL en esta ventana.
Desde esta ventana[画像の選択]Clic. A continuación, seleccione las tres imágenes.
[ICLの生成]Haga clic en Opciones. Se le pedirá que guarde el archivo. Guarde el archivo como 32.icl. Por lo tanto, el archivo ICL para la interfaz de usuario se crea correctamente.
Del mismo modo, debe generar un archivo ICL de los iconos. Importe los dos archivos de icono de la misma manera que arriba,[ICLの生成]Clic. Guarde el archivo como 42.icl. Por lo tanto, ahora también se crean archivos ICL para iconos.
Diseño de la interfaz de usuario de la página principal
Ahora necesita crear un botón táctil para la pantalla. Para esa selección, haga clic en la imagen “00.bmp” y luego haga clic en el menú “Control táctil”. Touchmoy básico y luego seleccione el área del widget a la que desea aplicar este módulo. Puede arrastrar, soltar y cambiar el tamaño de los módulos según sea necesario.
A continuación, seleccione la imagen para las transiciones de página a la izquierda. Seleccione “0.01.bmp” en el primer toque y “0.01.bmp” en el segundo toque. Esto completa la configuración de la primera página.
Diseño de la interfaz de usuario para la primera página
Luego cambie a la imagen “01.bmp”,[テキスト表示]Desde Opciones[データ変数表示]Escoger
Coloque los 4 parámetros (temperatura, humedad, presión, punto de rocío) todas las cajas frente a la unidad. El cuadro muestra el valor numérico del sensor.
A la derecha encontramos opciones y casillas donde debemos introducir las siguientes opciones:
- VP(0x): Temperatura 6100, Humedad 6200, Presión 6300, Punto de rocío 6400.
- Tamaño de fuente: 24
- alineación:Izquierda
- Espaciado automático entre caracteres (con marca de verificación)
- Mostrar ceros no válidos (con marca de verificación)
- Tipo de variable: Entero (2 bytes)
- Dígitos enteros: 2
- Decimal: 0
- Longitud de unidad variable: 0
- Ver unidades:espacio en blanco
- Valor inicial: 0
Asegúrese de cambiar los cuatro parámetros. A excepción de la dirección VP, todas las configuraciones siguen siendo las mismas.
[基本タッチモジュール]Ir a la[ページ切り替え]Asigne opciones para que pueda volver a la página principal. Para eso, arrastre y ajuste el módulo táctil básico para el símbolo de inicio y seleccione la opción de transición de página a la página de inicio, como se muestra en la imagen de arriba.
Diseño de la interfaz de usuario para la segunda página
A continuación, diseñemos un botón de interruptor de palanca para controlar electrodomésticos como luces, aire acondicionado, ventiladores y televisores. Cambie a la imagen “02.bmp” y seleccione “Visualización de icono variable” en la opción “Vista de icono”.
Vaya al menú Visualización de iconos y seleccione Visualización de iconos variables. Seleccione el área donde desea que aparezca el icono. Como siempre, cambie el tamaño del módulo según sea necesario. Luego seleccione la dirección VP como 6500.
Seleccione el icono del archivo ICL como 42.icl.[値]Pero[最小値],[オフ]icono, es decir,[ゼロ]icono. Del mismo modo, establezca el valor máximo en 1 y seleccione el icono ON, es decir, un icono. Deje el modo de visualización como transparente.
A continuación, seleccione el módulo de ajuste incremental en el menú de control táctil. Puede cambiar el tamaño del módulo. A continuación, seleccione Carga automática de datos. Haga clic en el efecto Sin botón. Especifique la misma dirección VP que el 6500. Haga clic en Byte bajo. Seleccione el método de limitación como ++ y la operación de límite excesivo como ciclo. Del mismo modo, ajuste la longitud del paso a 1 y el límite superior a 1. Finalmente, establezca el efecto táctil como una configuración desechable.
Luego copie y pegue el módulo de icono Var en los botones del ventilador, CA y controlador de TV. Sin embargo, la dirección VPa lo siguiente: 6600 para luces, 6700 para ventiladores y 6800 para televisores. Además, copie y pegue el módulo de ajuste incremental y establezca la dirección VP en consecuencia.
Finalmente, ha terminado de agregar módulos a la interfaz de usuario. próximo[保存して生成]para generar 13 archivos táctiles, 14 archivos de presentación y 22 archivos de bandeja de configuración.
Generación de archivos de fuentes
Vaya a la página de bienvenida y haga clic en Generar Word Bank. Seleccione la fuente aquí, ajuste la configuración estableciendo el tamaño de fuente en 24 y seleccione la fuente que desea mostrar. próximo[作成]para crear un archivo de fuente.
El archivo de fuente se crea en la carpeta del software DGUS con el nombre “0_DWIN_ASC”. HZK” y péguelo en DWIN_SET carpeta.
Carga de archivos TFT a la pantalla LCD DTI HMI
Después de crear y guardar la interfaz de usuario, puede cargar el firmware en la memoria de la pantalla LCD. Si necesita un archivo listo para usar como yo, puede descargar el archivo del proyecto desde el siguiente enlace.
Si no sabes cómo subir tu proyecto a esta pantalla táctil, sigue lo anterior Tutoriales de introducciónAquí hemos descrito dos procesos de carga de un proyecto en la pantalla utilizando la tarjeta SD y la herramienta de descarga T5L.
Este es el resultado de la interfaz de usuario recién creada después de cargar el archivo de proyecto en la pantalla.
Configuración de hardware de pantalla ESP32 y DWIN
Después de completar el diseño de la GUI, el sensor BME280 y el módulo de relé deben conectarse a la placa ESP32. Este es el diagrama de conexión para el proyecto.
La demostración utiliza LED de 4 colores en lugar de módulos de relé.
En el caso de la pantalla LCD SWIN y la placa ESP32, la comunicación entre la placa ESP32 utiliza el pin UART2 del ESP32. Por lo tanto, conecte los pines TX32 y RX2 del ESP2 a los pines RX2 y TX2 de la pantalla DWIN respectivamente.
Si está alimentando el ESP32 y la pantalla LCD por separado de dos fuentes de alimentación diferentes, debe conectar el GND de la pantalla al pin GND del ESP32.
Proyecto PCB Gerber Archivo y Orden PCB en línea
Si no desea ensamblar circuitos en una placa de pruebas y desea una PCB para su proyecto, aquí está la PCB. Primero utilicé EasyEDA para dibujar el esquema.
Luego convertí el esquema a una PCB. La placa PCB para este proyecto se ve así:
El archivo Gerber de la PCB se muestra a continuación. Simplemente descargue el archivo Gerber y solicite la PCB. Todas las placas de circuito impreso Y $1$ Solamente.
Puede usar este archivo Gerber para solicitar una PCB de alta calidad para este proyecto. Para ello, Todas las placas de circuito impreso Visite el sitio web oficial haga clic aquí: https://www.allpcb.com/.
Con esto[今すぐ引用]Puede seleccionar una opción para cargar su archivo Gerber. De estas opciones, puede seleccionar el tipo de material, las dimensiones, la cantidad, el grosor, el color de la máscara de soldadura y otros parámetros requeridos.
Una vez que haya ingresado todos los detalles, seleccione su país y método de envío. Finalmente, puede realizar un pedido.
La vista 2D de la PCB es simplemente increíble y realmente debería ser visible mientras se ensamblan todos los componentes en la PCB.
Código fuente/Programa
Ahora veamos la parte de código para recibir datos del sensor y mostrar la pantalla LCD, así como controlar el relé desde la pantalla.
En este proyecto, debe enviar y recibir datos. Para fines de transmisión, estamos enviando una trama que contiene la dirección VP de ese sensor y valor, y ese valor se actualiza en la pantalla. Del mismo modo, para la recepción, como puede ver en el código del programa, estamos utilizando un estuche de interruptor para verificar el marco recibido en serie de un botón en particular utilizando la dirección VP.
Para compilar el código, haga clic en Biblioteca BME280 a la carpeta Biblioteca mediante el Administrador de bibliotecas.
Esta es la sintaxis de los fotogramas que se envían a la pantalla HMI para mostrar los datos del sensor.
Unsigned chamuscar temperatura[8] = {0x5a, 0xa5, 0x05, 0x82, temperature_add , 0x00, 0x00, 0x00}; Unsigned chamuscar humedad[8] = {0x5a, 0xa5, 0x05, 0x82, humidity_add, 0x00, 0x00, 0x00}; Unsigned chamuscar presión[8] = {0x5a, 0xa5, 0x05, 0x82, pressure_add , 0x00, 0x00, 0x00}; Unsigned chamuscar punto de condensación[8] = {0x5a, 0xa5, 0x05, 0x82, dewpoint_add, 0x00, 0x00, 0x00}; |
En la visualización de datos vacíos para el Arduino, los datos se reciben de la pantalla HMI cuando se presiona cualquier botón. Aquí encontrará cuatro cajas de interruptores para luces, ventiladores, aire acondicionado y TV. Todos los botones tienen una dirección VP específica y envían una señal al ESP32 para activar/desactivar el módulo de relé.
No válido realy_control() { Si (Dwin.disponible()) { para (entero Yo = 0; Yo <= 8; Yo++) ÉsteEl bucle almacena toda la trama en una matriz de búfer. { búfer[i] = Dwin.leer(); } Si (búfer[0] == 0X5A) { interruptor (búfer[4]) .................................. .................................. |
Aquí está el código completo para este proyecto: Copie el código siguiente y cárguelo en la placa ESP32.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 35s 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 | /* Para sensor BME280 */ #include <wire.h> #include <Adafruit_Sensor.h> #include <Adafruit_BME280.h> constante byte RX Pin = 16; RX2 constante byte Pin TX = 17; TX2 Serie de hardware Dwin(1); #define SEALEVELPRESSURE_HPA (1013.25) Adafruit_BME280 Teletipo; I2C /* Pines del aparato */ entero luz = 2; entero abanicar = 4; entero corriente alterna = 5; entero televisión = 18; /* Direcciones de todos los sensores */ Unsigned chamuscar búfer[9]; #define temperature_add 0x61 #define humidity_add 0x62 #define pressure_add 0x63 #define dewpoint_add 0x64 Unsigned chamuscar temperatura[8] = {0x5a, 0xa5, 0x05, 0x82, temperature_add , 0x00, 0x00, 0x00}; Unsigned chamuscar humedad[8] = {0x5a, 0xa5, 0x05, 0x82, humidity_add, 0x00, 0x00, 0x00}; Unsigned chamuscar presión[8] = {0x5a, 0xa5, 0x05, 0x82, pressure_add , 0x00, 0x00, 0x00}; Unsigned chamuscar punto de condensación[8] = {0x5a, 0xa5, 0x05, 0x82, dewpoint_add, 0x00, 0x00, 0x00}; No válido arreglo() { serial.empezar(115200); DWIN inicia la comunicación en serie Dwin.empezar(115200, SERIAL_8N1, RX Pin, Pin TX); Unsigned posición; posición = Teletipo.empezar(0x76); Si (!posición) { serial.Printrung(“No se encontró ningún sensor BME280 válido, ¡verifique el cableado, la dirección y la identificación del sensor!”); mientras (1) demorar(10); } Modo Pin(luz, salida); Modo Pin(abanicar, salida); Modo Pin(corriente alterna, salida); Modo Pin(televisión, salida); Escritura digital(luz, Bajo); Escritura digital(abanicar, Bajo); Escritura digital(corriente alterna, Bajo); Escritura digital(televisión, Bajo); } No válido bucle() { sensor_data(); demorar(10); realy_control(); demorar(50); } No válido sensor_data() { entero t = Teletipo.Temperatura de lectura(); entero h = Teletipo.Leer humedad(); entero p = Teletipo.Leer presión() / 100.0 pisos; entero d = punto de rocíoalta velocidad(t, h); /*—— Datos de salida al monitor serie——*/ serial.Impresión(“Temperatura =”); serial.Impresión(t); serial.Printrung(” °C “); serial.Impresión(“humedad = “); serial.Impresión(h); serial.Printrung(” %”); serial.Impresión(“Presión = “); serial.Impresión(p); serial.Printrung(” hPa”); serial.Impresión(“punto de rocío =”); serial.Impresión(d); serial.Printrung(” °C “); serial.Printrung(); temperatura[6] = Byte alto(t); temperatura[7] = Byte bajo(t); Dwin.escribir(temperatura, 8); humedad[6] = Byte alto(h); humedad[7] = Byte bajo(h); Dwin.escribir(humedad, 8); presión[6] = Byte alto(p); presión[7] = Byte bajo(p); Dwin.escribir(presión, 8); punto de condensación[6] = Byte alto(d); punto de condensación[7] = Byte bajo(d); Dwin.escribir(punto de condensación, 8); } /*———- cálculo del punto de rocío——–*/ doble punto de rocíoalta velocidad(doble centígrado, doble humedad) { doble Ser = 17.271; doble b = 237.7; doble una vez = (Ser* centígrado) / (b + centígrado) + …log(Humedad* 0.01); doble Teletipo = (b * una vez) / (Ser – una vez); devolución Teletipo; } No válido realy_control() { Si (Dwin.disponible()) { para (entero Yo = 0; Yo <= 8; Yo++) Este bucle almacena toda la trama en una matriz de búfer. { búfer[i] = Dwin.leer(); } Si (búfer[0] == 0X5A) { interruptor (búfer[4]) { caso 0x65: Para luces Si (búfer[8] == 1) { Escritura digital(luz, Alto); serial.Printrung(“Relé 1 encendido”); } de otra manera { Escritura digital(luz, Bajo); serial.Printrung(“Relé 2 apagado”); } quebrar; caso 0x66: para los fans Si (búfer[8] == 1) { serial.Printrung(búfer[8]); Escritura digital(abanicar, Alto); serial.Printrung(“Relé 2 encendido”); } de otra manera { Escritura digital(abanicar, Bajo); serial.Printrung(“Relé 2 apagado”); } quebrar; caso 0x67: para aires acondicionados Si (búfer[8] == 1) { serial.Printrung(búfer[8]); Escritura digital(corriente alterna, Alto); serial.Printrung(“Relé 3 encendido”); } de otra manera { Escritura digital(corriente alterna, Bajo); serial.Printrung(“Relé 3 apagado”); } quebrar; caso 0x68: Para TV Si (búfer[8] == 1) { serial.Printrung(búfer[8]); Escritura digital(televisión, Alto); serial.Printrung(“Relé 4 encendido”); } de otra manera { Escritura digital(televisión, Bajo); serial.Printrung(“Relé 4 apagado”); } quebrar; predeterminado: serial.Printrung(“Sin datos…”); } } } } |
Pruebas y demostraciones
Después de que el programa se cargue correctamente, abra el monitor serie a la velocidad en baudios 115200 y verifique los datos del sensor en tiempo real.
Esta pantalla LCD DWIN muestra la interfaz de usuario de la pantalla de inicio.
Toca el área de la interfaz de usuario para ir a la segunda página. La segunda página muestra la temperatura, la humedad, la presión y el punto de rocío del BME280.
Luego vaya a la tercera página de la pantalla. En la tercera página, verá la interfaz de usuario y los botones para controlar los diversos relés.
Puede hacer clic en botones de interruptor individuales para encender o apagar los dispositivos.
Video Tutorial y Guía
Controlador doméstico inteligente con pantalla DWIN HMI LCD y ESP32 (relés de lectura y control de pantalla BME280)
Por lo tanto, con la pantalla DWIN HMI y ESP32, hemos creado con éxito este proyecto de controlador doméstico inteligente. En esta pantalla, la interfaz de usuario se ve bastante bien.