Skip to main content

Example

Here is an example of how to use the Webserial API to interact with a PinPax device.

src/webserial/pinPax.js
import { PinPax } from "@danidoble/webserial";

const pinPax = new PinPax();

pinPax.on("serial:disconnected", (event) => {
  document.getElementById("disconnected").style.display = "block";
});

pinPax.on("serial:connected", (event) => {
  document.getElementById("disconnected").style.display = "none";
  document.getElementById("need-permission").style.display = "none";
});

pinPax.on("serial:need-permission", (event) => {
  document.getElementById("need-permission").style.display = "block";
});

pinPax.on("serial:soft-reload", (event) => {
  // reset your variables
});

pinPax.on("serial:unsupported", (event) => {
  document.getElementById("unsupported").style.display = "block";
});

function tryConnect() {
  pinPax
    .connect()
    .then(() => {})
    .catch(console.error);
}

document.addEventListener("DOMContentLoaded", () => {
  tryConnect();
  document.getElementById("connect").addEventListener("click", tryConnect);
});

// i don't recommend expose pinPax object since it's a global object and has control over the pinPax
//window.pinPax = pinPax;
index.html
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Example</title>
    <script src="./src/webserial/pinPax.js" type="module"></script>
  </head>
  <body>
    <button id="connect">Connect to serial</button>

    <div id="need-permission" style="display: none">
      Woooah! It seems that you need to give permission to access the serial
      port. Please, click the button to try again.
    </div>

    <div id="disconnected">
      The pinPax is disconnected. Please, check the connection.
    </div>

    <div id="unsupported">
      This browser does not support the WebSerial API. Please, use a compatible
      browser.
    </div>
  </body>
</html>