This is a rewrite of firmata-io to ES2015 with zero dependency which works directly in browsers that support WebSerial.
Original firmata-io has been written for nodejs but doesn't work out of the box in the browser. This library brings support to use firmata directly in browsers that support WebSerial.
Changes to original library:
- Rewrite to JavaScript modules.
- A custom polyfill for
Bufferthat works in the browser, based on buffer-es6. - a class
WebSerialTransportto bridge the gap between firmata-io and WebSerial.
- Remake similar UI as the desktop tool.
- Remove the
Bufferdependency by usingUint8Arraydirectly. - [-] Polyfill for common serial usb devices so it also works on browsers without WebSerial.
<script type="importmap">
{
"imports": {
"firmata-web": "https://cdn.jsdelivr.net/npm/firmata-web"
}
}
</script>
<script>
import { Firmata, WebSerialTransport } from "firmata-web";
</script>The API is for most part the same as firmata-io. Only the bootstrapping is a bit different. WebSerialTransport should be used to bridge the gap between firmata-io and WebSerial.
import { Firmata, WebSerialTransport } from "../lib/index.js";
const baudRate = 57600; // Default Firmata baudrate
// Get all serial ports the user has previously granted the website access to.
const ports = await navigator.serial.getPorts();
if (ports.length) {
connect(ports[0]);
}
// Add some nice button <button id="requestPort">Connect</button>
document.querySelector("#requestPort").addEventListener("click", async () => {
// Prompt user to select any serial port.
const port = await navigator.serial.requestPort();
connect(port);
});
async function connect(port) {
// Wait for the serial port to open.
await port.open({ baudRate });
const transport = new WebSerialTransport(port);
const board = new Firmata(transport);
board.on("ready", () => {
// Arduino is ready to communicate
const pin = 13;
let state = 1;
board.pinMode(pin, board.MODES.OUTPUT);
setInterval(() => {
board.digitalWrite(pin, (state ^= 1));
}, 2000);
});
board.on("close", () => {
// Unplug the board to see this event!
console.log("Closed!");
});
}Feel play around with a simple UI for this library.
