1. Einführung
Letzte Aktualisierung: 19.09.2022
Umfang
In diesem Codelab erstellen Sie eine Webseite, die über die Web Serial API mit einem BBC micro:bit-Board interagiert, um Bilder auf der 5 × 5 LED-Matrix anzuzeigen. Sie lernen die Web Serial API kennen und erfahren, wie Sie lesbare, beschreibbare und transformierte Streams verwenden können, um über den Browser mit seriellen Geräten zu kommunizieren.
Aufgaben in diesem Lab
- Web-Serienport öffnen und schließen
- Anleitung zum Verwenden einer Leseschleife zum Verarbeiten von Daten aus einem Eingabestream
- Daten über einen Schreibstream senden
Voraussetzungen
- Ein BBC micro:bit v1-Board mit der Espruino-Firmware 2v04
- Eine aktuelle Version von Chrome (80 oder höher)
- Kenntnisse in HTML, CSS, JavaScript und den Chrome-Entwicklertools
Wir haben uns für dieses Codelab für micro:bit v1 entschieden, da es erschwinglich ist, einige Eingaben (Tasten) und Ausgaben (5 × 5 LED-Display) bietet und zusätzliche Eingaben und Ausgaben bereitstellen kann. Auf der BBC micro:bit-Seite auf der Espruino-Website finden Sie weitere Informationen zu den Funktionen von micro:bit.
2. Web Serial API
Die Web Serial API ermöglicht es Websites, mit Skripts auf einem seriellen Gerät zu lesen und auf diesem zu schreiben. Die API verbindet das Web und die physische Welt, indem sie Websites ermöglicht, mit seriellen Geräten wie Mikrocontrollern und 3D-Druckern zu kommunizieren.
Es gibt viele Beispiele für Steuersoftware, die mithilfe von Webtechnologie entwickelt wird. Beispiel:
In einigen Fällen kommunizieren diese Websites über eine native Agentanwendung, die vom Nutzer manuell installiert wird. In anderen Fällen wird die Anwendung in einer paketierten nativen Anwendung über ein Framework wie Electron bereitgestellt. In anderen Fällen muss der Nutzer einen zusätzlichen Schritt ausführen, z. B. eine kompilierte Anwendung mit einem USB-Speicher auf das Gerät kopieren.
Die Nutzerfreundlichkeit kann durch eine direkte Kommunikation zwischen der Website und dem Gerät, das sie steuert, verbessert werden.
3. Einrichtung
Code abrufen
Wir haben alles, was Sie für dieses Codelab benötigen, in ein Glitch-Projekt gepackt.
- Öffnen Sie einen neuen Browsertab und rufen Sie https://web-serial-codelab-start.glitch.me/ auf.
- Klicke auf den Link Remix Glitch, um deine eigene Version des Startprojekts zu erstellen.
- Klicken Sie auf die Schaltfläche Anzeigen und wählen Sie In einem neuen Fenster aus, um den Code in Aktion zu sehen.
4. Serielle Verbindung öffnen
Prüfen, ob die Web Serial API unterstützt wird
Prüfen Sie zuerst, ob die Web Serial API im aktuellen Browser unterstützt wird. Dazu musst du prüfen, ob sich serial
in navigator
befindet.
Fügen Sie Ihrem Projekt im Ereignis DOMContentLoaded
den folgenden Code hinzu:
script.js - DOMContentLoaded
// CODELAB: Add feature detection here.
const notSupported = document.getElementById('notSupported');
notSupported.classList.toggle('hidden', 'serial' in navigator);
Damit wird geprüft, ob Web Serial unterstützt wird. Ist das der Fall, wird durch diesen Code das Banner ausgeblendet, in dem steht, dass Web Serial nicht unterstützt wird.
Ausprobieren
- Laden Sie die Seite.
- Prüfe, ob auf der Seite kein rotes Banner angezeigt wird, das darauf hinweist, dass Web Serial nicht unterstützt wird.
Seriellen Port öffnen
Als Nächstes müssen wir den seriellen Port öffnen. Wie die meisten anderen modernen APIs ist die Web Serial API asynchron. Dadurch wird verhindert, dass die Benutzeroberfläche beim Warten auf Eingaben blockiert. Dies ist jedoch auch wichtig, da serielle Daten jederzeit von der Webseite empfangen werden können und wir eine Möglichkeit benötigen, auf diese zu warten.
Ein Computer kann mehrere serielle Geräte haben. Wenn der Browser versucht, einen Port anzufordern, wird der Nutzer aufgefordert, das Gerät auszuwählen, zu dem eine Verbindung hergestellt werden soll.
Fügen Sie Ihrem Projekt den folgenden Code hinzu:
script.js - connect()
// CODELAB: Add code to request & open port here.
// - Request a port and open a connection.
port = await navigator.serial.requestPort();
// - Wait for the port to open.
await port.open({ baudRate: 9600 });
Beim requestPort
-Aufruf wird der Nutzer gefragt, mit welchem Gerät er eine Verbindung herstellen möchte. Durch Aufrufen von port.open
wird der Port geöffnet. Außerdem müssen wir die Geschwindigkeit angeben, mit der wir mit dem seriellen Gerät kommunizieren möchten. Der BBC micro:bit verwendet eine 9600-Baud-Verbindung zwischen dem USB-zu-Serien-Chip und dem Hauptprozessor.
Als Nächstes verbinden wir die Schaltfläche „Verbinden“, damit connect()
aufgerufen wird, wenn der Nutzer darauf klickt.
Fügen Sie Ihrem Projekt den folgenden Code hinzu:
script.js - clickConnect()
// CODELAB: Add connect code here.
await connect();
Ausprobieren
Unser Projekt hat jetzt das absolute Minimum für den Einstieg. Wenn der Nutzer auf die Schaltfläche Verbinden klickt, wird er aufgefordert, das serielle Gerät auszuwählen, mit dem eine Verbindung hergestellt werden soll. Anschließend stellt er eine Verbindung zum micro:bit her.
- Lade die Seite neu.
- Klicken Sie auf Verbinden.
- Wählen Sie im Dialogfeld „Serieller Port auswählen“ das BBC micro:bit-Gerät aus und klicken Sie auf Verbinden.
- Auf dem Tab sollte ein Symbol angezeigt werden, das angibt, dass Sie eine Verbindung zu einem seriellen Gerät hergestellt haben:
Eingabestream einrichten, um Daten vom seriellen Port zu überwachen
Nachdem die Verbindung hergestellt wurde, müssen wir einen Eingabestream und ein Lesegerät einrichten, damit die Daten vom Gerät gelesen werden können. Zuerst rufen wir den lesbaren Stream aus dem Port ab, indem wir port.readable
aufrufen. Da wir wissen, dass wir Text vom Gerät erhalten, leiten wir ihn über einen Textdekodierer weiter. Als Nächstes holen wir einen Leser ab und starten die Leseschleife.
Fügen Sie Ihrem Projekt den folgenden Code hinzu:
script.js - connect()
// CODELAB: Add code to read the stream here.
let decoder = new TextDecoderStream();
inputDone = port.readable.pipeTo(decoder.writable);
inputStream = decoder.readable;
reader = inputStream.getReader();
readLoop();
Die Leseschleife ist eine asynchrone Funktion, die in einer Schleife ausgeführt wird und auf Inhalte wartet, ohne den Hauptthread zu blockieren. Wenn neue Daten eintreffen, gibt der Reader zwei Eigenschaften zurück: value
und einen booleschen Wert done
. Wenn done
„wahr“ ist, wurde der Anschluss geschlossen oder es werden keine Daten mehr empfangen.
Fügen Sie Ihrem Projekt den folgenden Code hinzu:
script.js - readLoop()
// CODELAB: Add read loop here.
while (true) {
const { value, done } = await reader.read();
if (value) {
log.textContent += value + '\n';
}
if (done) {
console.log('[readLoop] DONE', done);
reader.releaseLock();
break;
}
}
Ausprobieren
Unser Projekt kann jetzt eine Verbindung zum Gerät herstellen und alle vom Gerät empfangenen Daten werden an das Logelement angehängt.
- Lade die Seite neu.
- Klicken Sie auf Verbinden.
- Wählen Sie im Dialogfeld „Serieller Port auswählen“ das BBC micro:bit-Gerät aus und klicken Sie auf Verbinden.
- Das Espruino-Logo sollte angezeigt werden:
Ausgabestream zum Senden von Daten an den seriellen Port einrichten
Die serielle Kommunikation ist in der Regel bidirektional. Wir möchten nicht nur Daten vom seriellen Port empfangen, sondern auch Daten an den Port senden. Wie beim Eingabestream senden wir über den Ausgabestream nur Text an das micro:bit.
Erstellen Sie zuerst einen Text-Encoder-Stream und leiten Sie den Stream an port.writeable
weiter.
script.js - connect()
// CODELAB: Add code setup the output stream here.
const encoder = new TextEncoderStream();
outputDone = encoder.readable.pipeTo(port.writable);
outputStream = encoder.writable;
Bei einer seriellen Verbindung mit der Espruino-Firmware fungiert das BBC-micro:bit-Board als JavaScript-Read-Eval-Print-Schleife (REPL), ähnlich wie in einer Node.js-Shell. Als Nächstes müssen wir eine Methode zum Senden von Daten an den Stream bereitstellen. Im folgenden Code wird ein Writer aus dem Ausgabestream abgerufen und dann jede Zeile mit write
gesendet. Jede gesendete Zeile enthält ein Zeilenvorschubzeichen (\n
), um das micro:bit-Element anzuweisen, den gesendeten Befehl auszuwerten.
script.js - writeToStream()
// CODELAB: Write to output stream
const writer = outputStream.getWriter();
lines.forEach((line) => {
console.log('[SEND]', line);
writer.write(line + '\n');
});
writer.releaseLock();
Um das System in einen bekannten Zustand zu versetzen und zu verhindern, dass es die von uns gesendeten Zeichen zurückgibt, müssen wir Strg+C senden und das Echo ausschalten.
script.js - connect()
// CODELAB: Send CTRL-C and turn off echo on REPL
writeToStream('\x03', 'echo(false);');
Ausprobieren
Unser Projekt kann jetzt Daten von der micro:bit senden und empfangen. Lassen Sie uns überprüfen, ob wir ordnungsgemäß einen Befehl senden können:
- Lade die Seite neu.
- Klicken Sie auf Verbinden.
- Wählen Sie im Dialogfeld „Serieller Port auswählen“ das BBC micro:bit-Gerät aus und klicken Sie auf Verbinden.
- Öffnen Sie in den Chrome-Entwicklertools den Tab Console und geben Sie
writeToStream('console.log("yes")');
ein.
Auf der Seite sollte in etwa Folgendes angezeigt werden:
5. LED-Matrix steuern
Matrix-Raster-String erstellen
Um die LED-Matrix auf dem micro:bit zu steuern, müssen wir show()
aufrufen. Bei dieser Methode werden Grafiken auf dem integrierten 5x5-LED-Bildschirm angezeigt. Hierfür wird eine Binärzahl oder ein String verwendet.
Wir durchlaufen die Kästchen und generieren ein Array von Einsen und Nullen, die angeben, welche aktiviert ist und welche nicht. Wir müssen das Array dann umkehren, da die Reihenfolge unserer Kästchen der Reihenfolge der LEDs in der Matrix entspricht. Als Nächstes wandeln wir das Array in einen String um und erstellen den Befehl, der an den micro:bit gesendet werden soll.
script.js - sendGrid()
// CODELAB: Generate the grid
const arr = [];
ledCBs.forEach((cb) => {
arr.push(cb.checked === true ? 1 : 0);
});
writeToStream(`show(0b${arr.reverse().join('')})`);
Kästchen hinzufügen, um die Matrix zu aktualisieren
Als Nächstes müssen wir auf Änderungen an den Kästchen achten und diese Informationen an das micro:bit senden, falls sich etwas ändert. Fügen Sie im Code für die Feature-Erkennung (// CODELAB: Add feature detection here.
) die folgende Zeile hinzu:
script.js - DOMContentLoaded
initCheckboxes();
Setzen wir auch das Raster zurück, wenn micro:bit zum ersten Mal verbunden wird, damit ein glückliches Gesicht angezeigt wird. Die Funktion drawGrid()
ist bereits vorhanden. Diese Funktion funktioniert ähnlich wie sendGrid()
. verwendet sie ein Array von Einsen und Nullen und aktiviert die entsprechenden Kontrollkästchen.
script.js - clickConnect()
// CODELAB: Reset the grid on connect here.
drawGrid(GRID_HAPPY);
sendGrid();
Ausprobieren
Wenn die Seite jetzt eine Verbindung zum micro:bit herstellt, wird ein glückliches Gesicht gesendet. Wenn Sie auf die Kästchen klicken, wird die Anzeige auf der LED-Matrix aktualisiert.
- Lade die Seite neu.
- Klicken Sie auf Verbinden.
- Wählen Sie im Dialogfeld „Serieller Port auswählen“ das BBC micro:bit-Gerät aus und klicken Sie auf Verbinden.
- Auf der micro:bit-LED-Matrix sollte ein Lächeln zu sehen sein.
- Zeichnen Sie ein anderes Muster auf die LED-Matrix, indem Sie die Kästchen ändern.
6. Micro:bit-Tasten verbinden
Ein „watch“-Ereignis auf den „micro:bit“-Schaltflächen hinzufügen
Auf dem micro:bit befinden sich zwei Tasten, eine links und eine rechts neben der LED-Matrix. Espruino bietet eine setWatch
-Funktion, die beim Drücken der Schaltfläche ein Ereignis oder einen Callback sendet. Da wir beide Schaltflächen überwachen möchten, machen wir unsere Funktion generisch und lassen sie die Details des Ereignisses ausdrucken.
script.js - watchButton()
// CODELAB: Hook up the micro:bit buttons to print a string.
const cmd = `
setWatch(function(e) {
print('{"button": "${btnId}", "pressed": ' + e.state + '}');
}, ${btnId}, {repeat:true, debounce:20, edge:"both"});
`;
writeToStream(cmd);
Als Nächstes müssen wir beide Tasten (BTN1 und BTN2 auf der micro:Bit-Platine) verbinden, sobald der serielle Port mit dem Gerät verbunden wird.
script.js - clickConnect()
// CODELAB: Initialize micro:bit buttons.
watchButton('BTN1');
watchButton('BTN2');
Ausprobieren
Durch Drücken einer der Tasten auf dem micro:bit wird nicht nur ein fröhliches Gesicht auf der Seite angezeigt, sondern auch ein Text, der angibt, welche Schaltfläche gedrückt wurde. Höchstwahrscheinlich steht jedes Zeichen in einer eigenen Zeile.
- Lade die Seite neu.
- Klicken Sie auf Verbinden.
- Wählen Sie im Dialogfeld „Serieller Port auswählen“ das BBC micro:bit-Gerät aus und klicken Sie auf Verbinden.
- Auf der micro:bits-LED-Matrix sollte ein Lächeln zu sehen sein.
- Drücken Sie die Tasten auf „micro:bit“ und prüfen Sie, ob der neue Text mit Details zur gedrückten Schaltfläche an die Seite angehängt wird.
7. Eingehende Daten mit einem Transformationsstream parsen
Grundlegende Streamverarbeitung
Wenn eine der micro:bit-Schaltflächen gedrückt wird, sendet micro:bit Daten über einen Stream an den seriellen Anschluss. Streams sind sehr nützlich, können aber auch eine Herausforderung darstellen, da nicht unbedingt alle Daten auf einmal abgerufen und die Daten beliebig aufgeteilt werden können.
Die App gibt den eingehenden Stream derzeit so aus, wie er eintrifft (in readLoop
). In den meisten Fällen befindet sich jedes Zeichen auf einer eigenen Zeile, was aber nicht sehr hilfreich ist. Idealerweise sollte der Stream in einzelne Zeilen geparst und jede Nachricht als eigene Zeile angezeigt werden.
Streams mit TransformStream
transformieren
Dazu können wir einen Transform-Stream (TransformStream
) verwenden, mit dem der eingehende Stream geparst und geparste Daten zurückgegeben werden können. Ein Transformationsstream kann sich zwischen der Streamquelle (in diesem Fall dem micro:Bit) und dem Element befinden, das den Stream nutzt (in diesem Fall readLoop
) und eine beliebige Transformation anwenden, bevor er schließlich genutzt wird. Stellen Sie sich das wie ein Fließband vor: In der Zeit verändert sich ein Widget bei jedem Schritt in der Linie, sodass es bis zur endgültigen Station zu einem voll funktionsfähigen Widget wird.
Weitere Informationen findest du unter Konzepte der Streams API von MDN.
Stream mit LineBreakTransformer
transformieren
Erstellen wir eine LineBreakTransformer
-Klasse, die einen Stream annimmt und anhand von Zeilenenden (\r\n
) in Chunks aufteilt. Die Klasse benötigt zwei Methoden, transform
und flush
. Die Methode transform
wird jedes Mal aufgerufen, wenn der Stream neue Daten empfängt. Sie können die Daten entweder in die Warteschlange stellen oder für später speichern. Die Methode flush
wird aufgerufen, wenn der Stream geschlossen wird. Dabei werden alle Daten verarbeitet, die noch nicht verarbeitet wurden.
Bei der transform
-Methode fügen wir neue Daten zu container
hinzu und prüfen dann, ob in container
Zeilenumbrüche vorhanden sind. Falls ja, teilen Sie sie in ein Array auf und iterieren Sie dann durch die Zeilen. Rufen Sie controller.enqueue()
auf, um die geparsten Zeilen zu senden.
script.js - LineBreakTransformer.transform()
// CODELAB: Handle incoming chunk
this.container += chunk;
const lines = this.container.split('\r\n');
this.container = lines.pop();
lines.forEach(line => controller.enqueue(line));
Wenn der Stream geschlossen wird, werden einfach alle verbleibenden Daten im Container mithilfe von enqueue
geleert.
script.js - LineBreakTransformer.flush()
// CODELAB: Flush the stream.
controller.enqueue(this.container);
Zum Schluss muss der eingehende Stream über die neue LineBreakTransformer
geleitet werden. Unser ursprünglicher Eingabestream wurde nur über eine TextDecoderStream
weitergeleitet. Daher müssen wir eine zusätzliche pipeThrough
hinzufügen, um ihn über unsere neue LineBreakTransformer
weiterzuleiten.
script.js - connect()
// CODELAB: Add code to read the stream here.
let decoder = new TextDecoderStream();
inputDone = port.readable.pipeTo(decoder.writable);
inputStream = decoder.readable
.pipeThrough(new TransformStream(new LineBreakTransformer()));
Ausprobieren
Wenn Sie jetzt eine der micro:bit-Schaltflächen drücken, sollten die gedruckten Daten in einer einzigen Zeile zurückgegeben werden.
- Lade die Seite neu.
- Klicken Sie auf Verbinden.
- Wählen Sie im Dialogfeld „Serieller Port auswählen“ das BBC micro:bit-Gerät aus und klicken Sie auf Verbinden.
- Auf der micro:bit-LED-Matrix sollte ein Lächeln zu sehen sein.
- Drücken Sie die Tasten auf dem micro:bit und prüfen Sie, ob etwa Folgendes angezeigt wird:
Stream mit JSONTransformer
transformieren
Wir könnten versuchen, den String in der readLoop
in JSON zu parsen. Erstellen wir stattdessen einen sehr einfachen JSON-Transformer, der die Daten in ein JSON-Objekt umwandelt. Wenn die Daten kein gültiges JSON-Format haben, geben Sie einfach die empfangenen Daten zurück.
script.js - JSONTransformer.transform
// CODELAB: Attempt to parse JSON content
try {
controller.enqueue(JSON.parse(chunk));
} catch (e) {
controller.enqueue(chunk);
}
Leiten Sie als Nächstes den Stream über den JSONTransformer
weiter, nachdem er LineBreakTransformer
durchlaufen hat. Auf diese Weise bleibt unser JSONTransformer
einfach, da wir wissen, dass die JSON-Datei immer nur in einer einzigen Zeile gesendet wird.
script.js - connect
// CODELAB: Add code to read the stream here.
let decoder = new TextDecoderStream();
inputDone = port.readable.pipeTo(decoder.writable);
inputStream = decoder.readable
.pipeThrough(new TransformStream(new LineBreakTransformer()))
.pipeThrough(new TransformStream(new JSONTransformer()));
Ausprobieren
Wenn Sie jetzt eine der micro:bit-Tasten drücken, sollte auf der Seite [object Object]
gedruckt werden.
- Lade die Seite neu.
- Klicken Sie auf Verbinden.
- Wählen Sie im Dialogfeld „Serieller Port auswählen“ das BBC micro:bit-Gerät aus und klicken Sie auf Verbinden.
- Auf der LED-Matrix von micro:bit sollte ein Lächeln zu sehen sein.
- Drücken Sie die Tasten auf micro:bit und prüfen Sie, ob Folgendes angezeigt wird:
Auf Tastendrücke reagieren
Wenn du auf das Drücken der micro:bit-Schaltfläche reagieren möchtest, aktualisiere readLoop
, um zu prüfen, ob es sich bei den empfangenen Daten um eine object
mit dem Attribut button
handelt. Rufe dann buttonPushed
auf, um den Tastendruck zu verarbeiten.
script.js - readLoop()
const { value, done } = await reader.read();
if (value && value.button) {
buttonPushed(value);
} else {
log.textContent += value + '\n';
}
Wenn eine micro:bit-Taste gedrückt wird, sollte sich das Display auf der LED-Matrix ändern. Verwenden Sie den folgenden Code, um die Matrix festzulegen:
script.js - buttonPushed()
// CODELAB: micro:bit button press handler
if (butEvt.button === 'BTN1') {
divLeftBut.classList.toggle('pressed', butEvt.pressed);
if (butEvt.pressed) {
drawGrid(GRID_HAPPY);
sendGrid();
}
return;
}
if (butEvt.button === 'BTN2') {
divRightBut.classList.toggle('pressed', butEvt.pressed);
if (butEvt.pressed) {
drawGrid(GRID_SAD);
sendGrid();
}
}
Ausprobieren
Wenn Sie jetzt eine der micro:bit-Tasten drücken, sollte sich die LED-Matrix in ein glückliches oder trauriges Gesicht ändern.
- Lade die Seite neu.
- Klicken Sie auf Verbinden.
- Wählen Sie im Dialogfeld „Serieller Port auswählen“ das BBC micro:bit-Gerät aus und klicken Sie auf Verbinden.
- Auf der micro:bits-LED-Matrix sollte ein Lächeln zu sehen sein.
- Drücken Sie die Tasten auf „micro:bit“ und prüfen Sie, ob sich die LED-Matrix ändert.
8. Seriellen Port schließen
Im letzten Schritt müssen Sie die Funktion zum Trennen der Verbindung einrichten, damit der Anschluss geschlossen wird, wenn der Nutzer fertig ist.
Schließen Sie den Anschluss, wenn der Nutzer auf die Schaltfläche „Verbinden/Trennen“ klickt.
Wenn der Nutzer auf die Schaltfläche Verbinden/Trennen klickt, müssen wir die Verbindung schließen. Wenn der Port bereits geöffnet ist, rufe disconnect()
auf und aktualisiere die Benutzeroberfläche, um anzuzeigen, dass die Seite nicht mehr mit dem seriellen Gerät verbunden ist.
script.js - clickConnect()
// CODELAB: Add disconnect code here.
if (port) {
await disconnect();
toggleUIConnected(false);
return;
}
Streams und Port schließen
In der Funktion disconnect
müssen wir den Eingabe- und den Ausgabestream sowie den Anschluss schließen. Rufen Sie reader.cancel()
auf, um den Eingabestream zu schließen. Der Aufruf von cancel
ist asynchron. Daher müssen wir mit await
warten, bis er abgeschlossen ist:
script.js - disconnect()
// CODELAB: Close the input stream (reader).
if (reader) {
await reader.cancel();
await inputDone.catch(() => {});
reader = null;
inputDone = null;
}
Um den Ausgabestream zu schließen, rufen Sie einen writer
ab, rufen Sie close()
auf und warten Sie, bis das Objekt outputDone
geschlossen wurde:
script.js - disconnect()
// CODELAB: Close the output stream.
if (outputStream) {
await outputStream.getWriter().close();
await outputDone;
outputStream = null;
outputDone = null;
}
Schließen Sie abschließend den seriellen Port und warten Sie, bis er geschlossen ist:
script.js - disconnect()
// CODELAB: Close the port.
await port.close();
port = null;
Ausprobieren
Sie können den seriellen Anschluss jetzt nach Belieben öffnen und schließen.
- Lade die Seite neu.
- Klicken Sie auf Verbinden.
- Wählen Sie im Dialogfeld „Serieller Port auswählen“ das BBC micro:bit-Gerät aus und klicken Sie auf Verbinden.
- Auf der LED-Matrix von micro:bit sollte ein Lächeln zu sehen sein.
- Drücken Sie die Schaltfläche Trennen und prüfen Sie, ob die LED-Matrix ausgeschaltet ist und in der Konsole keine Fehler angezeigt werden.
9. Glückwunsch
Glückwunsch! Sie haben Ihre erste Webanwendung erstellt, die die Web Serial API verwendet.
Unter https://goo.gle/fugu-api-tracker finden Sie aktuelle Informationen zur Web Serial API und zu allen anderen spannenden neuen Webfunktionen, an denen das Chrome-Team gerade arbeitet.