Osciloscopio web Arduino con disparo avanzado – 6 canales, ajustes personalizables

Componentes y suministros

Componente	Cantidad
Arduino UNO	1
PHPoC Shield para Arduino	1
Cables jumper	1

Sobre este proyecto

Si eres principiante, puedes aprender más sobre Arduino + WiFi.

Demostración

(Ver demo en proyecto original)

Características

• Soporte 6 canales
• Disparo simple y múltiple
• Modos de disparo: flanco descendente, ascendente, o ambos
• Valor de disparo configurable
• Ajuste división temporal via perilla web
• Ajuste división voltaje por canal via perilla web
• Ajuste offset visual por canal via perilla web
• Click/tap para mostrar/ocultar panel ajustes
• Multiplataforma: Windows, Linux, iOS, Android... (navegador web)

Interfaz de usuario

Cómo funciona

El Osciloscopio Web es una modificación del Monitor Serie Web en PHPoC. Primero explico el Monitor Serie Web.

El shield PHPoC tiene una web app embebida: "Web Serial Monitor". Similar al Monitor Serie de Arduino IDE, pero:

• Monitor Serie Arduino IDE: Lee datos del pin TX Arduino vía USB.
• Web Serial Monitor PHPoC: Lee datos del pin TX Arduino vía Internet.

En detalle: PHPoC Shield comunica con Arduino por SPI. Al acceder al Web Serial Monitor desde navegador, se establece conexión WebSocket al shield. El shield captura datos del pin TX Arduino y los envía al navegador vía WebSocket. Permite ver datos no solo en PC, sino en móvil o cualquier dispositivo con navegador.

Cómo funciona el Osciloscopio Web:

Igual que Web Serial Monitor, salvo la visualización: en lugar de datos crudos, grafica las señales. Añade funciones para ajustar UI y realizar disparos (trigger).

Formato de datos desde Arduino:

Arduino lee ADC (A0–A5) y timestamp (microsegundos). Convierte ADC a voltaje e imprime por puerto serie:

• Timestamp, seguido de espacio o \t
• Datos de voltaje por canal, separados por espacio o \t
• Final: salto de línea

Nota: Máximo 6 canales, pero puedes enviar 1, 2, 3... canales.

Código fuente

Dos partes:

• Código Arduino (WebOscilloscope.ino)
• Código web app (oscilloscope.php): interfaz usuario. Subir a PHPoC Shield según instrucciones.

Cómo usar

Accede al osciloscopio desde navegador (PC o móvil): https://direccion_ip/oscilloscope.php

Medir señal: 2 cables, uno a GND y otro a cualquier pin analógico (A0–A5). Conecta al punto a medir.

Como hay 6 canales, se necesitan 6 tierras. Arduino solo tiene 2 pines GND; yo extiendo así:

Referencias de funciones

• Serial.begin()
• Serial.println()
• delay()
• millis()
• for / while / if else / loop() / setup()
• String.toInt() / substring() / indexOf() / remove() / equals()

Código

WebOscilloscope.ino (Arduino)

#include <SPI.h>
#include <Phpoc.h>

#define AREF 5.0
#define ADC_MAX 1023.0
float ratio = AREF / ADC_MAX;

void setup() {
  Serial.begin(115200);
  Phpoc.begin();
}

void loop() {
  unsigned long time_a = micros();
  float voltageChannel0 = analogRead(A0) * ratio;
  float voltageChannel1 = analogRead(A1) * ratio;
  float voltageChannel2 = analogRead(A2) * ratio;
  float voltageChannel3 = analogRead(A3) * ratio;
  float voltageChannel4 = analogRead(A4) * ratio;
  float voltageChannel5 = analogRead(A5) * ratio;

  Serial.print(time_a); Serial.print(" ");
  Serial.print(voltageChannel0); Serial.print(" ");
  Serial.print(voltageChannel1); Serial.print(" ");
  Serial.print(voltageChannel2); Serial.print(" ");
  // Serial.print(voltageChannel3); Serial.print(" "); // Canal 3 comentado
  Serial.print(voltageChannel4); Serial.print(" ");
  Serial.println(voltageChannel5); // Último canal con newline
}

oscilloscope.php (PHP - Interfaz web)

Código completo de la interfaz web con canvas, perilla virtual, controles de disparo, canales, divisiones tiempo/voltaje, offset, modos AUTO/NORMAL/SINGLE. Incluye WebSocket para datos en tiempo real, renderizado gráfico a 60 FPS, gestión de trigger (flanco subida/bajada/ambos), pantalla completa responsive. Ver código completo en proyecto original.

Esquemáticos