Oscilloscope web Arduino avec déclenchement avancé – 6 canaux, paramètres personnalisables

Composants et fournitures

Arduino UNO	1
Shield PHPoC pour Arduino (WiFi/Ethernet embarqué + serveur web)	1
Fils de connexion	1 jeu

À propos de ce projet

Si vous êtes débutant, découvrez Arduino + WiFi avec le shield PHPoC.

Démonstration

L'interface web permet de visualiser jusqu'à 6 canaux analogiques en temps réel sur n'importe quel navigateur (PC, mobile, tablette).

Fonctionnalités

• 6 canaux maximum (A0-A5)
• Déclenchement simple, multiple
• Modes de déclenchement : front montant, front descendant, les deux
• Seuil de déclenchement réglable
• Division temporelle ajustable via bouton web (ms/div)
• Division tension par canal ajustable (V/div)
• Décalage d'affichage par canal (offset)
• Zone de paramètres masquable/affichable par clic
• Multi-plateforme : Windows, Linux, iOS, Android (navigateur web uniquement)

Interface utilisateur

(Capture d'écran de l'interface web disponible dans le projet original.)

Comment ça marche

Le shield PHPoC intègre une application web embarquée « Web Serial Monitor ». Elle lit les données de la broche TX de l'Arduino via SPI et les transmet au navigateur via WebSocket. L'oscilloscope web réutilise cette architecture : au lieu d'afficher du texte brut, il trace les courbes sur un canvas HTML5 et ajoute les fonctions de déclenchement et réglages UI.

Format des données envoyées par l'Arduino :

• Timestamp (microsecondes) suivi d'un espace ou tabulation
• Tensions de chaque canal (converties depuis l'ADC), séparées par espace/tabulation
• Fin de ligne (newline)
• Maximum 6 canaux, mais vous pouvez n'en envoyer que 1, 2, 3...

Code source

Deux parties :

1. Code Arduino (WebOscilloscope.ino) – lecture ADC + envoi série
2. Application web (oscilloscope.php) – interface HTML5/JS + WebSocket, à uploader sur le shield PHPoC

Utilisation

1. Accédez à l'oscilloscope via navigateur : https://<IP_DU_SHIELD>/oscilloscope.php
2. Pour mesurer un signal : deux fils, un sur GND, un sur une broche analogique (A0-A5). Raccordez au point de test.
3. Pour 6 canaux, il faut 6 masses. L'Arduino n'ayant que 2 broches GND, utilisez une breadboard pour multiplier les connexions GND (voir photo dans le projet original).

Références de fonctions Arduino utilisées

• Serial.begin(), Serial.println(), delay(), millis()
• Boucles for, while, conditionnels if else
• loop(), setup()
• Manipulation String : toInt(), substring(), indexOf(), remove(), equals()

Code

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 v0 = analogRead(A0) * ratio;
  float v1 = analogRead(A1) * ratio;
  float v2 = analogRead(A2) * ratio;
  float v3 = analogRead(A3) * ratio;
  float v4 = analogRead(A4) * ratio;
  float v5 = analogRead(A5) * ratio;

  Serial.print(time_a); Serial.print(" ");
  Serial.print(v0); Serial.print(" ");
  Serial.print(v1); Serial.print(" ");
  Serial.print(v2); Serial.print(" ");
  // Serial.print(v3); Serial.print(" "); // canal 3 commenté dans l'exemple
  Serial.print(v4); Serial.print(" ");
  Serial.println(v5); // dernier canal avec newline
}

oscilloscope.php (PHP/HTML/JS – Application web)

Le code complet (HTML + CSS + JavaScript + WebSocket) est trop long pour être reproduit intégralement ici. Il est disponible dans le projet original. Points clés :

• Canvas HTML5 pour le tracé temps réel (60 FPS via setInterval(update_loop, 1000/60))
• Gestion WebSocket binaire vers le shield PHPoC (protocole uint8.phpoc)
• Parsing des lignes reçues (timestamp + tensions)
• Gestion du débordement du timer Arduino (micros() sur 32 bits)
• Moteur de déclenchement : détection front montant/descendant/both, modes AUTO/NORMAL/SINGLE
• Bouton virtuel rotatif (knob) pour régler temps/div, tension/div, offset
• Affichage grille, légendes, canaux colorés, compteur de déclenchements
• Responsive : plein écran ou panneau latéral selon orientation

Schémas

Photo du montage : Arduino UNO + shield PHPoC + fils vers broches analogiques et GND distribué sur breadboard.