Arduino Web Oscilloscoop met Geavanceerde Triggering – 6 Kanalen, Instelbare Instellingen

Onderdelen en Benodigdheden

Over dit Project

Als je beginner bent, kun je meer leren over Arduino - WiFi.

Demonstratie

[Demonstratie video/afbeelding niet beschikbaar in deze tekstversie]

Kenmerken

• Ondersteunt 6 kanalen
• Ondersteunt single trigger, multiple triggers
• Kiesbare trigger-modus: vallend, stijgend, vallend en stijgend
• Instelbare triggerwaarde
• Tijddeling instelbaar via web-knop
• Spanningsdeling per kanaal instelbaar via web-knop
• Weergave-offset per kanaal instelbaar via web-knop
• Tik of klik om instellingengebied te tonen/verbergen
• Werkt cross-platform: Windows, Linux, iOS, Android... (door web-kenmerk), op elk apparaat met webbrowser

Gebruikersinterface

Hoe het Werkt

Omdat de Web Oscilloscoop een aanpassing is van de Web Serial Monitor op PHPoC, leg ik eerst uit hoe de Web Serial Monitor werkt.

De PHPoC Shield heeft een ingebouwde embedded web-app, genaamd "Web Serial Monitor". Deze lijkt op de Serial Monitor in de Arduino IDE. Het verschil:

• Serial Monitor op Arduino IDE: Leest data van Arduino TX-pin via USB-kabel.
• Web Serial Monitor op PHPoC Shield: Leest data van Arduino TX-pin via Internet.

In detail: De PHPoC Shield communiceert met de Arduino via SPI. Wanneer de gebruiker de Web Serial Monitor opent in een webbrowser, maakt de pagina na laden een WebSocket-verbinding met de PHPoC Shield. Op dat moment is de PHPoC Shield op de Arduino gestapeld, hij vangt data van de Arduino TX-pin op en stuurt deze via WebSocket naar de Web Serial Monitor in de browser. De Web Serial ontvangt de data en toont deze op het web.

Dit laat de gebruiker niet alleen data op de PC zien, maar ook op mobiel of elk apparaat met een webbrowser.

Nu kijken we hoe de Web Oscilloscoop werkt.

De Web Oscilloscoop werkt hetzelfde als de Web Serial Monitor, behalve voor het laatste deel.

In plaats van ruwe data te tonen op het web, visualiseert de Web Oscilloscoop de data op een grafiek. Extra functies zijn toegevoegd om de UI aan te passen en triggers uit te voeren.

Over de data, die van de Arduino wordt verstuurd

De Arduino leest data van de ADC-pinnen (A0 tot A5) en de tijdstempel (in microseconden).

De ADC-data wordt omgerekend naar spanning en naar de seriële poort gestuurd samen met de tijdstempel volgens het volgende formaat:

• Eerst de tijdstempel, gevolgd door een spatie of "\t" teken.
• Dan de spanningsdata. Data van elk kanaal gescheiden door een spatie of "\t".
• Einde is newline-teken

Let op: Maximum 6 kanalen, maar je kunt ook data van slechts 1, 2 of 3 kanalen sturen.

Broncode

De broncode bestaat uit twee delen:

• Arduino Code (zie WebOscilloscope.ino)
• Web-app code (oscilloscope.php): dit is de gebruikersinterface-code. Deze moet geüpload worden naar de PHPoC Shield volgens deze instructie.

Hoe te Gebruiken

Open de Web Oscilloscoop in een webbrowser op je PC of smartphone via: https://vervang_ip_adres/oscilloscope.php

Hoe te meten: Je hebt slechts twee draden nodig, één naar GND en één naar een willekeurige analoge pin van de Arduino (A0 tot A5). Verbind deze twee pinnen met het meetpunt waar je het signaal wilt controleren.

Omdat er 6 kanalen zijn, heb je 6 massa-draden nodig. Voor het gemak heeft de Arduino echter maar 2 GND-pinnen. Ik doe het als volgt om meer GND-pinnen te krijgen:

De Beste Arduino Starter Kit voor Beginners

Als je op zoek bent naar een Arduino kit, zie De Beste Arduino Kit voor Beginners.

Functie Referenties

• Serial.begin()
• Serial.println()
• delay()
• millis()
• for loop
• while loop
• if else
• loop()
• setup()
• String.toInt()
• String.substring()
• String.indexOf()
• String.remove()
• String.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() {
  // Lees systeemtijd
  unsigned long time_a = micros();
  
  // Lees analoge waarden en converteer naar spanning
  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;
  
  // Stuur systeemtijd eerst
  Serial.print(time_a);
  Serial.print(" ");
  
  // Stuur waarde van elk kanaal, gescheiden door " " of "\t"
  Serial.print(voltageChannel0); Serial.print(" ");
  Serial.print(voltageChannel1); Serial.print(" ");
  Serial.print(voltageChannel2); Serial.print(" ");
  // Serial.print(voltageChannel3); Serial.print(" "); // Uitgecommentarieerd
  Serial.print(voltageChannel4); Serial.print(" ");
  // Laatste kanaal met newline
  Serial.println(voltageChannel5);
}

oscilloscope.php (PHP/Web)

<!DOCTYPE html>
<html>
<head>
<title>PHPoC Shield - Web Oscilloscoop voor Arduino</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  body { text-align:center; background-color: #595959; color: white; display: flex; justify-content:space-between; }
  .graph_container { display:inline-block; }
  .setting_container { display:inline-block; float:right; background-color: #595959; padding: 0px; width: 260px; }
  .setting { justify-content: center; width: 260px; padding: 3px; display: flex; justify-content:space-between; }
  .button { background-color: #999999; border: none; color: white; padding: 5px; text-align: center; display: inline-block; font-weight: bold; font-size: 115%; }
  .button2, .select { border: none; padding: 5px; text-align: center; display: inline-block; font-weight: bold; font-size: 115%; }
  .select { width: 100%; background-color: #F2F2F2; color: #4CAF50; }
  .button_channel { border-radius: 50%; width: 14%; }
  .button_trigger { border-radius: 4px; width: 60%; }
  .button_go { border-radius: 4px; width: 35%; }
  .button_mode { border-radius: 8px; width: 32%; }
  .button_setting { border-radius: 45%; width: 33%; }
  .input_text { width: 50%; background-color: #F2F2F2; color: #4CAF50; }
  .label { width: 50%; background-color: transparent; color: #4CAF50; }
  button:focus { outline: none; }
  #knob { padding: 5px; }
</style>
<script>
// ... (volledige JavaScript code voor oscilloscoop functionaliteit)
// De code bevat: WebSocket verbinding, canvas tekening, knob besturing,
// trigger handling, multi-kanaal weergave, tijd/spanning/offset instellingen
// Zie originele bron voor complete implementatie
</script>
</head>
<body onresize="canvas_resize()">
  <div class="graph_container" id="graph_container">
    <canvas id="graph"></canvas>
  </div>
  <div class="setting_container" id="setting_container">
    <div class="setting" id="setting_channel">
      <button class="button button_channel" id="0">0</button>
      <button class="button button_channel" id="1">1</button>
      <button class="button button_channel" id="2">2</button>
      <button class="button button_channel" id="3">3</button>
      <button class="button button_channel" id="4">4</button>
      <button class="button button_channel" id="5">5</button>
    </div>
    <div class="setting">
      <input type="text" class="button2 label" value="Trigger Waarde: " disabled>
      <input type="text" class="button2 input_text" id="trigger_value" value="1.5">
    </div>
    <div class="setting">
      <select class="select" id="trigger_type">
        <option value="0">Vallend</option>
        <option value="1">Stijgend</option>
        <option value="2" selected>Vallend & Stijgend</option>
      </select>
    </div>
    <div class="setting" id="setting_trigger">
      <button class="button button_trigger" id="TRIGGER" disabled>TRIGGER</button>
      <button class="button button_go" id="GO">GO</button>
    </div>
    <div class="setting" id="setting_mode">
      <button class="button button_mode" id="AUTO">AUTO</button>
      <button class="button button_mode" id="NORMAL">NORMAL</button>
      <button class="button button_mode" id="SINGLE">SINGLE</button>
    </div>
    <canvas id="knob"></canvas>
    <div class="setting" id="setting_option">
      <button class="button button_setting" id="TIME">ms / div</button><br>
      <button class="button button_setting" id="VOLTAGE">V / div</button><br>
      <button class="button button_setting" id="OFFSET">Offset</button><br>
    </div>
  </div>
</body>
</html>

Schema's