Web Serial Demo

This demo uses a slider to send a number between 0-255 to your connected serial device (e.g., a CPX or Arduino).

To begin, read the instructions below and then click this "Connect" button.

Instructions

This demo and the instructions below are based on a web.dev post by François Beaufort.

For this demo to work, there are two requirements:
  1. First, you must run Chrome and enable the 'experimental-web-platform-features' flag (see below)
  2. Second, you must be running a supported program on your Adafruit CPX or Arduino
We expand on each below.

Chrome Setup

To check to see if your current version of Chrome supports WebSerial:
  1. Open Chrome to any webpage
  2. Open the dev console (cmd-option-i on Mac or ctrl-shift-i on Windows) and type: > navigator.serial
  3. If you see something like "Serial {onconnect:null, ondisconnect: null}" then it worked! If, instead, it says "undefined", then it didn't work (see below)
To enable web serial support in Chrome:
  1. First, type chrome://flags in the address bar
  2. Then, in the search box, type "experimental-web-platform-features"
  3. This flag should be set to "Enabled"
  4. Restart your browser and follow the steps above to ensure that it worked

CPX/Arduino

To see the full demo, you must have your CPX or Arduino plugged in and running code that listens to the serial port, parses it, and does something. We've created a few demos:

Arduino

- TODO LED output demo - TODO LED output with text demo (based on DisplayTextSerial)

CPX Demos

  1. SerialColorNeoPixels
  2. SerialFadeNeoPixels