11. Communicate with your Pico over the Web Serial API#

pw_web makes it possible to create custom web apps that communicate with embedded devices over the Web Serial API. Try monitoring and controlling your Pico over the web now.

  1. Install NVM. You’ll need to close and re-open your terminal to get nvm on your command line path.

    Note

    You can skip the NVM steps if you’ve already got NPM installed on your machine. Also, you can install NPM however you want; NVM is just one fast option.

  2. Use NVM to install the long-term support (LTS) release of Node.js:

    nvm install --lts

  3. Set your working directory to web_app:

    cd <path>/<to>/sense/web_app

  4. Install the web app’s dependencies:

    npm install

  5. Run the web app:

    npm run dev

    In the output, note the line that looks like > Local: http://127.0.0.1:8000/ (your actual URL may be different). This is the URL you’ll need in the next step.

  6. Open the web app in Google Chrome or Microsoft Edge. This application does not work in other browsers like Apple Safari or Mozilla Firefox because those browsers don’t support the Web Serial API.

    https://storage.googleapis.com/pigweed-media/sense/20240802/webapp_splash.png

  7. Click Connect and select the Pico option (or the Debug Probe (CMSIS-DAP) option if you’re using a Debug Probe).

    https://storage.googleapis.com/pigweed-media/sense/20240802/webapp_connect.png

    Note

    The Pico is not running a web server. The web app spins up its own local server and then communicates with the Pico by sending RPCs over the Web Serial API.

    You should see a chart of the Pico’s onboard temperature getting updated every second.

    https://storage.googleapis.com/pigweed-media/sense/20240802/webapp_home.png

    Note

    We recently updated this web app to support the Pico application described in 14. Run the air quality monitor app. Check back next week for updates.

  8. Close the browser tab running the web app.

  9. In the terminal where you launched the web app, press Control+C to stop the web server.

Summary#

Projects built on top of Pigweed often build themselves custom web apps to make development, support, and manufacturing processes faster. Other teams create web apps that let their end customers manage their own devices.

Next, head over to 12. Run factory workflows at your desk to get familiar with how Pigweed can make it easier to test newly manufactured devices.

On this page