In this workshop you’ll build a digital notebook, a pocket-sized device for taking notes with a USB keyboard. We’re using affordable, widely available components: a Seeed XIAO ESP32-S3 microcontroller, a 1-inch OLED display, and a microSD card reader, arranged on a solderless breadboard. The ESP32-S3 connects to the display via the I2C (Inter-Integrated Circuit) protocol, and to the microSD card reader uses the SPI (Serial Peripheral Interface) protocol.
Folks who have a basic familiarity with programming/electronics will get the most out of this workshop, but no specific knowledge is required. The soldering step is suitable for beginners. Cutting and stripping jumper wires requires a degree of manual dexterity.
Here’s what you’ll need to complete this project:
• Seeed XIAO ESP32-S3 development board w/ pre-soldered header pins
• 0.96″ OLED display (SSD1306)
• microSD card reader (SPI interface) w/ 6 header pins
• USB-C port breakout board w/ 4 header pins
• 400 tie point solderless breadboard
• Single-core 22AWG jumper wire (1 meter)
• Wire cutter/stripper tool
• 5V 1 Amp power brick with USB-A port
• Tiny USB-C to USB-A adapter (for keyboard)
• USB-C to USB-A cable (for power)
• microSD card (any size)
We’ll be referring to the ESP32-S3 development board by the more general term MCU, short for microcontroller unit.
❏ Line up the MCU‘s header pins with column B and column F on your breadboard, with the USB-C side starting at row 1. Press the MCU down to secure it in place.
❏ Line up the USB-C port‘s header pins with column A, rows 19–22 and press into place.
❏ Line up the microSD card reader‘s header pins with column F, rows 24–29, then press into place. Note: We’re leaving one row unused (row 30) to the left of the microSD card reader.
❏ Optional: Use a marker to draw a rectangle around the four tie points where you’ll attach your OLED screen later in the project: column c, rows 14–17.
Here’s a pinout diagram for the Seed XIAO ESP32-C3:
❏ Connect the ground pin on the MCU (column G, row 2) to the ground rail (the column on the edge with a blue stripe next to it).
❏ Connect the 3.3V pin to the 3.3V rail (above the ground rail, next to the red line). This is how you’ll power the OLED screen and microSD card reader.
Next you’ll you’ll add connections for your SSD1306 OLED screen, which looks like this:
❏ Connect column E, row 17 to the ground rail (the one with the blue line next to it).
❏ Connect the tie point next to it, column E, row 16, to the voltage rail (red line side).
❏ One step to the right, connect your OLED screen’s SCL pin (column E, row 15) to D5/GPIO6 on your MCU (column A, row 6).
❏ Connect your OLED screen’s SDA pin (column E, row 15) to D4/GPIO5 on your MCU (column A, row 5).
❏ Now we’ll move the USB-C port, which will provide 5V power to the MCU. Connect the ground pin (G) to the ground rail (blue line side).
❏ The USB-C port’s voltage (V) pin connects to the 5V pin on the MCU, so you’ll need a wire about twice as long as the last step. Starting at column D, row 19, curve your wire to the left slightly before connecting to column J, row 1 in the bottom right corner.
❏ We’ll move on to the microSD card reader. Connect the ground (GND) pin on the microSD card reader (column J, row 24) to the ground rail.
❏ Connect the microSD card reader’s voltage (VCC) pin (column J, row 29) to the voltage rail.
❏
❏
❏
❏
❏
