Gráficos TFT:Gráficos del historial en vivo

Acerca de este proyecto

Descripción general

¿Alguna vez ha querido graficar sus datos de forma profesional en una pantalla LCD TFT? Pero hay un problema, es particularmente difícil crear un gráfico debido a todos los cálculos involucrados.

Este proyecto tiene como objetivo eliminar todo ese estrés de sus hombros y permitirle crear su propio gráfico de historial personalizado, graficando todo lo que desee en solo segundos. Todo lo que tienes que hacer es editar 5 variables.

Video

Imagen

Funcionalidad

Este proyecto tiene como objetivo hacer que los gráficos sean fáciles y divertidos para todos, todos los cálculos difíciles se completan, todo lo que el usuario tiene que hacer es editar 2 variables y elegir el color para su gráfico. A continuación, se muestran algunos ejemplos que muestran la diversidad del gráfico.

El gráfico trazará la temperatura en vivo, a intervalos de 6 segundos, el valor se mostrará con un punto, el punto se conectará a otros puntos mediante una línea. Los segundos que pasaron desde el inicio del código se mostrarán en el eje x con el rango de los valores en el eje y.

El proyecto funciona de manera simple, el Arduino Mega lee el valor del sensor DHT 11 y almacena la temperatura en una variable, luego grafica el valor en el gráfico personalizado. Aquí hay un diagrama que ilustra la descripción general de la funcionalidad.

Aquí hay una imagen que muestra la descripción general del código del proyecto.

• Leer temperatura leerá la temperatura del sensor

• Procesar datos procesará la lectura del sensor y la asignará al gráfico.

• Gráfico de datos mostrará los valores mapeados en el gráfico.

Todo lo que necesita saber para poder continuar con este proyecto es una comprensión amplia de cómo se colocan las cosas en la pantalla LCD TFT, esto se explica a continuación.

Me refiero a todo el LCD como el lienzo, aquí es donde se dibuja todo, todas las bibliotecas de TFT LCD funcionan de manera bastante similar, por lo que las funciones en este código también deberían funcionar con otras bibliotecas. A continuación se muestra un boceto de un cuadrilátero (un rectángulo) que se dibuja en una pantalla LCD TFT.

En este boceto, se dibuja un rectángulo, cada punto está etiquetado, la línea de código que se usa para dibujar un rectángulo es esta,

  tft.fillRect (origenX, origenY, tamañoX, tamañoY, Color);  

• originX está representado por 'z' en el diagrama de arriba, esta es la distancia desde la derecha de la pantalla a la forma.

• originY está representado por 'x' en el boceto, esta es la distancia desde la parte superior de la pantalla a la forma.

• tamañoX es el tamaño de la forma en el eje x, esta es la longitud de la forma.

• sizeY es el tamaño de la forma en el eje y, esta es la altura de la forma.

Beneficios

El usuario en funcionamiento esto proyecto lo hará beneficio En:

• Grafique los datos del sensor en una pantalla LCD TFT

• Hágalo en segundos

Construyendo el Proyecto

Paso 1: Obligatorio Aparato

Este proyecto utiliza un sensor de temperatura y humedad DHT 11 para recibir los datos de temperatura, pero se puede usar cualquier sensor; el cambio de sensor se explicará más adelante.

• 1, Arduino Mega

• 1, pantalla LCD TFT de 2.8 'de Elegoo

• 1, sensor DHT 11

• 1, placa de pruebas

• Cables de puente

Paso 2: Conectando el Circuito

Aquí están los esquemas del proyecto, simplemente conecte el sensor DHT 11 al Arduino Mega y listo.

Paso 3:reconocimiento del código

Hay 3 partes principales del código:

• Configurar gráfico

• Leer temperatura

• Dibujar gráfico

Estas secciones se explican a continuación.

• Configurar gráfico

  // dibuja el título tft.setCursor (10, 10); // establece el cursor tft.setTextColor (BLUE); // establece el color del texto tft.setTextSize (4); // establece el tamaño del texto tft.println (nombreGráfico); // dibuja el contorno tft.drawLine (origenX, origenY, (origenX + tamañoX), origenY, graphColor); tft.drawLine (origenX, origenY, origenX, (origenY - tamañoY), graphColor); // dibujar etiquetas para (int i =0; i  

  chk =DHT.read11 (22); temp =(DHT.temperature);  

Esta línea corta de código leerá la temperatura del sensor DHT 11 y luego la almacenará en una variable.

• Dibujar Gráfico

  if (blockPos <8) {// imprime el tiempo tft.setCursor ((mark [valuePos] - 5), (originY + 16)); tft.setTextColor (graphColor, BLANCO); tft.setTextSize (1); tft.println (timeBlock [valuePos]); // mapea el valor locationBlock [valuePos] =map (temp, 0, graphRange, originY, (originY - sizeY)); // dibujar el punto tft.fillRect ((mark [valuePos] - 1), (locationBlock [valuePos] - 1), markSize, markSize, pointColor); // intente conectarse al punto anterior if (valuePos! =0) {tft.drawLine (mark [valuePos], locationBlock [valuePos], mark [(valuePos - 1)], locationBlock [(valuePos - 1)], lineColor); } blockPos ++; } else {// limpia el lienzo del gráfico tft.fillRect ((origenX + 2), (origenY - tamañoY), tamañoX, tamañoY, BLANCO); // mapea el valor - punto actual locationBlock [valuePos] =map (temp, 0, graphRange, originY, (originY - sizeY)); // punto de dibujo - punto actual tft.fillRect ((mark [7]), (locationBlock [valuePos] - 1), markSize, markSize, pointColor); // dibuja todos los puntos para (int i =0; i <8; i ++) {tft.fillRect ((mark [(blockPos - (i + 1))] - 1), (locationBlock [(valuePos - i)] - 1), markSize, markSize, pointColor); } // dibuja todas las líneas para (int i =0; i <7; i ++) {tft.drawLine (mark [blockPos - (i + 1)], locationBlock [valuePos - i], mark [blockPos - (i + 2)], locationBlock [valuePos - (i + 1)], lineColor); } // cambia las etiquetas de tiempo para (int i =0; i <=8; i ++) {tft.setCursor ((mark [(blockPos - i)] - 5), (originY + 16)); tft.setTextColor (graphColor, BLANCO); tft.setTextSize (1); tft.println (timeBlock [valuePos - i]); }} valuePos ++;  

Esta larga parte del código dibujará los puntos del gráfico en sus valores y luego los unirá a través de líneas, el código verifica si el lienzo del gráfico está lleno, si lo está, comenzará a expulsar el primer valor del gráfico. y moviendo los otros hacia arriba para dejar espacio para que se inserte el nuevo valor, si todavía queda espacio, el dispositivo seguirá agregando valores a intervalos.

Personalización del gráfico

Lo divertido de este gráfico es que es 100% editable, por lo que el usuario puede editar el tamaño del gráfico, su ubicación y su color, el usuario también puede mostrar cualquier dato en el gráfico gracias a su flexibilidad. Son son todas las variables que deberían interesarle.

  bool proDebug =0; uint16_t graphColor =AZUL; uint16_t pointColor =NEGRO; uint16_t lineColor =VERDE; String graphName ="Gráfico de tiempo"; int graphRange =50; int markSize =3;  

• proDebug es la utilidad de depuración incorporada en el proyecto, se establece en 0 de forma predeterminada, cuando se establece en 1 / verdadero, imprimirá la temperatura actual en el Monitor de serie, esta es una utilidad de depuración, tenga en cuenta que si está habilitado, el Monitor de serie es debe estar abierto para que se ejecute el código.

• graphColor establece el color del gráfico, las líneas xey y sus etiquetas se establecen en este color.

• pointColour representa el color del punto que ilustra el valor en el gráfico.

• lineColour establece el color de la línea que une los puntos en el gráfico con el color seleccionado.

• graphRange es la columna vertebral del gráfico, tenga en cuenta que es realmente importante que esté configurado correctamente, representa el valor máximo que se puede graficar, estoy usando un sensor de temperatura, no esperaría que el valor supere los 50ºC, así que configuré el valor a 50, si desea graficar una entrada analógica sin procesar, puede establecer el rango gráfico en 1024, el valor máximo que puede mostrar un pin analógico.

• markSize representa el tamaño del punto que etiqueta el valor del sensor en el gráfico, el valor representa la longitud del cuadrado.

Y eso es todo, es todo de lo que tienes que preocuparte, el resto de las variables serán resueltas automáticamente por Arduino.

Cambiando el Valor

Es bueno graficar la temperatura en su habitación, pero es aún mejor si pudiera mostrar los datos del sensor en el gráfico, y puede, con solo editar unas pocas líneas de código, podría graficar cualquier dato, desde la humedad del suelo hasta la luz. intensidad. Aquí hay una guía para hacerlo.

Asistir Más

Puede seguir experimentando con el proyecto, intente editar las constantes originX, originY, sizeX y sizeY para darle a su gráfico un tamaño y una posición diferentes en la pantalla. Hay un archivo de encabezado adjunto al boceto principal, contiene los códigos de color de algunos colores, intente cambiar el color del gráfico y las barras. Y eso es todo, su gráfico personalizado está listo.

Bibliotecas

• Bibliotecas Elegoo - Copyright (c) 2012 Adafruit Industries bajo la licencia BSD.

• DHT - Autor Rob Tillaart, esta biblioteca es de dominio público

Antecedentes

Recientemente publiqué un proyecto que grafica 1, 2, 3 o 4 valores en un gráfico de barras. He decidido publicar otra plantilla para graficar. No hay plantillas para gráficos de barras que no tengan líneas por todos lados que amenacen con confundir, así que decidí hacer los cálculos nuevamente y publicar un proyecto simple que permite a todos graficar sus datos en un gráfico de historial, en vivo.

Esquemas

schematics_g5pey3GWqv.fzz