ESP32 - Graficador Serial

Este tutorial te enseña cómo usar Serial Plotter en el IDE de Arduino con ESP32.

Hardware Requerido

1×Módulo de Desarrollo ESP32 ESP-WROOM-32
1×Cable USB Tipo-A a Tipo-C (para PC USB-A)
1×Cable USB Tipo-C a Tipo-C (para PC USB-C)
1×(Opcional) Conector de Alimentación DC
1×Protoboard
1×Cables Puente
1×(Recomendado) Placa de Expansión de Terminales de Tornillo para ESP32
1×(Recomendado) Breakout Expansion Board for ESP32
1×(Recomendado) Divisor de Alimentación para ESP32

Or you can buy the following kits:

1×DIYables ESP32 Starter Kit (ESP32 included)
1×DIYables Sensor Kit (30 sensors/displays)
1×DIYables Sensor Kit (18 sensors/displays)
Divulgación: Algunos de los enlaces proporcionados en esta sección son enlaces de afiliado de Amazon. Podemos recibir una comisión por las compras realizadas a través de estos enlaces sin costo adicional para usted. Apreciamos su apoyo.

Acerca de Serial Plotter

El Serial Plotter es una herramienta del IDE de Arduino que puede recibir datos desde el ESP32 a través de Serial y trazarlos en un gráfico. El Serial Plotter puede trazar los datos de múltiples sensores en la misma pantalla.

Para recibir los datos del ESP32, es necesario utilizar un cable micro USB entre el ESP32 y la PC.

Serial Plotter está compuesto por dos componentes:

  • una caja de selección: utilizada para seleccionar la velocidad en baudios de la comunicación serie
  • un gráfico: una pantalla que muestra los datos visualizados
    • eje X: muestra el tiempo. Tiene 500 puntos. El tiempo entre cada punto es el tiempo entre dos llamadas consecutivas a la función Serial.println().
    • eje Y: muestra los valores de datos recibidos desde el ESP32. El eje Y se escala automáticamente cuando el valor de los datos aumenta o disminuye.

Cómo abrir Serial Plotter

En el IDE de Arduino, haga clic en Serial Plotter como se muestra a continuación:

¿Cómo abrir el plotter serial?

Cómo trazar una única línea en un gráfico

Para trazar una sola línea en el gráfico, solo necesitamos enviar los datos terminados por el carácter “\r\n”. Podemos usar la función Serial.println().

Serial.println(variable);

※ Nota:

Serial.println() añade automáticamente los caracteres “\r\n” a los datos.

Código de ejemplo

El siguiente código de ejemplo para ESP32 lee el valor de una entrada analógica y lo envía al Serial Plotter.

/* * Este código de ESP32 fue desarrollado por es.newbiely.com * Este código de ESP32 se proporciona al público sin ninguna restricción. * Para tutoriales completos y diagramas de cableado, visite: * https://es.newbiely.com/tutorials/esp32/esp32-serial-plotter */ void setup() { Serial.begin(9600); } void loop() { int variable_1 = analogRead(A0); Serial.println(variable_1); delay(100); }

Pasos R\u00e1pidos

  • Si es la primera vez que usas ESP32, consulta cómo configurar el entorno para ESP32 en Arduino IDE.
  • Copia el código anterior y pégalo en Arduino IDE.
  • Compila y carga el código en la placa ESP32 haciendo clic en el botón Subir en Arduino IDE.
  • Abre el Plotter Serial.
  • Selecciona la velocidad de baudios 9600.
  • Ve el gráfico en el Plotter Serial.
ejemplo de plotter serial de una sola línea

Cómo graficar varias líneas en un gráfico

Para graficar múltiples variables, necesitamos separar las variables entre sí mediante “\t” o el carácter " " . El último valor DEBE terminar con las secuencias “\r\n” de caracteres.

En detalle:

  • La primera variable
Serial.print(variable_first);
  • Las variables intermedias
Serial.print("\t"); // or Serial.print(" ") Serial.print(variable_nth);
  • La última variable
Serial.print("\t"); // or Serial.print(" ") Serial.println(variable_last);

Código de ejemplo

El código de ejemplo de ESP32 a continuación lee los valores de cuatro pines de entrada analógica y los envía al Serial Plotter.

/* * Este código de ESP32 fue desarrollado por es.newbiely.com * Este código de ESP32 se proporciona al público sin ninguna restricción. * Para tutoriales completos y diagramas de cableado, visite: * https://es.newbiely.com/tutorials/esp32/esp32-serial-plotter */ void setup() { Serial.begin(9600); } void loop() { int variable_1 = analogRead(A0); int variable_2 = analogRead(A1); int variable_3 = analogRead(A2); int variable_4 = analogRead(A3); Serial.print(variable_1); Serial.print(" "); // a tab '\t' or space ' ' character is printed between the two values. Serial.print(variable_2); Serial.print(" "); // a tab '\t' or space ' ' character is printed between the two values. Serial.print(variable_3); Serial.print(" "); // a tab '\t' or space ' ' character is printed between the two values. Serial.println(variable_4); // the last value is terminated by a carriage return and a newline characters. delay(100); }

El resultado en el monitor serial:

Plotter serial varias líneas

Ejemplo de tres formas de onda senoidales

El siguiente código de ejemplo para ESP32 imprime los valores de tres ondas senoidales en el Serial Plotter.

/* * Este código de ESP32 fue desarrollado por es.newbiely.com * Este código de ESP32 se proporciona al público sin ninguna restricción. * Para tutoriales completos y diagramas de cableado, visite: * https://es.newbiely.com/tutorials/esp32/esp32-serial-plotter */ void setup() { Serial.begin(9600); } void loop() { for (int i = 0; i < 360; i += 5) { float sine_1 = 1 * sin(i * M_PI / 180); float sine_2 = 2 * sin((i + 90) * M_PI / 180); float sine_3 = 5 * sin((i + 180) * M_PI / 180); Serial.print(sine_1); Serial.print("\t"); // a tab '\t' or space ' ' character is printed between the two values. Serial.print(sine_2); Serial.print("\t"); // a tab '\t' or space ' ' character is printed between the two values. Serial.println(sine_3); // the last value is terminated by a carriage return and a newline characters. delay(100); } }

El resultado en Serial Plotter:

plotter en serie onda sinusoidal

Si quieres este plotter en la web, echa un vistazo a ESP32 - Web Plotter

Video Tutorial

Estamos considerando crear tutoriales en video. Si considera que los tutoriales en video son importantes, suscríbase a nuestro canal de YouTube para motivarnos a crear los videos.

※ NUESTROS MENSAJES

  • No dude en compartir el enlace de este tutorial. Sin embargo, por favor no use nuestro contenido en otros sitios web. Hemos invertido mucho esfuerzo y tiempo en crear el contenido, ¡por favor respete nuestro trabajo!