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. Open a terminal.

  2. 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.

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

    nvm install --lts

  4. Set your working directory to web_app:

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

  5. Install the web app’s dependencies:

    npm install

  6. 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.

  7. Open the web app in Google Chrome or Microsoft Edge.

    Warning

    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

  8. Click Connect and select the Pico option.

    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.

    The No Enviro+ Board Found! warning is expected. Your Pico is currently running the blinky bringup app. In 14. Run the air quality monitor app you will revisit this web app when your Pico is running the production app and you will see more information on the web app.

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

  9. Close the browser tab running the web app.

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

  11. Set your working directory back to the root directory of your Sense repository:

    cd ..

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