Web Serial - Seriële poort lezen

De Web Serial API maakt het mogelijk voor webapplicaties om te communiceren met seriële apparaten, zoals microcontrollers, via een seriële poort. Dit biedt een krachtige manier om hardware te besturen en gegevens uit te wisselen met seriële apparaten rechtstreeks vanuit de browser.

De Web Serial API wordt ondersteund in de volgende browsers:

  • Google Chrome(vanaf versie 89)
  • Microsoft Edge(vanaf versie 89)
  • Opera(vanaf versie 75)

Het is belangrijk om te weten dat de Web Serial API niet wordt ondersteundin sommige populaire browsers, zoals:

  • Firefox
  • Safari (inclusief op iOS)

Let op dat het gebruik van de Web Serial API in ondersteunde browsers vaak beperkt is tot secure contexts(HTTPS). Je moet het dus uploaden op een website met https-connectie om het te kunnen testen.

Benodigde scripts

Schermafbeelding van ontvangen data van een Arduino met temperatuursensor.

Om de ArduinoSerial class correct te gebruiken, moet je ervoor zorgen dat het juiste script aan je HTML-bestand is gekoppeld. Gebruik de volgende code:

Voorbeeld van het gebruik van de ArduinoSerial Class

Hieronder vind je een voorbeeld van hoe je de ArduinoSerial class kunt gebruiken om verbinding te maken met een Arduino en de gegevens weer te geven:


const arduinoSerial = new ArduinoSerial('dataOutput');
document.getElementById('connectButton').addEventListener('click', () => arduinoSerial.connect());
document.getElementById('js').addEventListener('click', function(){
  var j = arduinoSerial.getJsonData();
  console.log(j);
});

Functies in de ArduinoSerial Class

  • constructor(outputElementId):Initialiseert de class en koppelt een HTML element om de ontvangen gegevens weer te geven.
  • connect():Start de verbinding met de Arduino via de Web Serial API en begint met het ontvangen van data.
  • getJsonData():Converteert de ontvangen gegevens naar JSON-formaat en retourneert dit object.

HTML-elementen

  • Verbinding maken:Een knop met id connectButton waarmee de gebruiker handmatig de verbinding met de Arduino kan starten.
  • JSON gegevens:Een knop met id js om de gegenereerde JSON-gegevens naar de console te loggen.
  • Data-output:Een element met id dataOutput om de ontvangen data van de Arduino in de interface weer te geven.

Conclusie

Met de ArduinoSerial class kun je eenvoudig gegevens ontvangen van een Arduino via de Web Serial API en deze converteren naar JSON. Deze class is ideaal voor het verwerken en weergeven van sensorwaarden op een webpagina.

Demo:  https://www.leerschool.be/test/serial/

Volgende pagina