Getting Started
Adafruit Playground is a wonderful and safe place to share your interests with Adafruit's vibrant community of makers and doers. Have a cool project you are working on? Have a bit of code that you think others will find useful? Want to show off your electronics workbench? You have come to the right place.
The goal of Adafruit Playground is to make it as simple as possible to share your work. On the Adafruit Playground users can create Notes. A note is a single-page space where you can document your topic using Adafruit's easy-to-use editor. Notes are like Guides on the Adafruit Learning System but guides are high-fidelity content curated and maintained by Adafuit. Notes are whatever you want them to be. Have fun and be kind.
Click here to learn more about Adafruit Playground and how to get started.
-
Page Playground: Using Web Serial in Firefox
Firefox's browser engine, Gecko, added support for Web Serial in release 151. This opens up a fun new path for hardware-to-web experiments and experiences. To try it out, I built Page Playground: a device featuring a variety of novel input methods that allows me to point at elements on a web page and alter their colors, layout, text properties, and transforms in real time. It reveals the potential for powerful and intuitive user experiences integrating hardware with the web.
Idea
As seen in the video, the Page Playground can alter various properties of elements on a webpage. It creates a new and fun way to interact with a page, but you can imagine a lot of professional use cases for such a tool, too (like web development, style tweaking, etc).
Assembly
Adafruit stocks a great set of essentially plug-n-play parts, so getting this off the ground didn't take much time at all! I decided to use the MACROPAD RP2040 as the base of the device functionality, since it has a nice screen, rotary encoder, and 12 keys with RGB LEDs. This was plenty to work with already, but I also added:
- two more rotary encoders,
- an IMU (BNO085),
- a color/proximity sensor (APDS-9960),
- a joystick, and
- a slide potentiometer.
All of these provide fun and different ways to interact with the webpage.
The joystick and potentiometer are simple analog devices, so I needed to get another board to access those over I2C (because the MACROPAD doesn't expose anything other than I2C over a STEMMA QT port). Conveniently, my order was large enough that Adafruit provided a KB2040 for free :)
MACROPAD
The MACROPAD was very easy to assemble; I just had to add the key switches and caps, and a rotary encoder top (I didn't realize the bare bones kit didn't come with one, so I came up short one top, whoops).