P5.serialport Input from an Arduino

To use this sketch, you need to:
  1. Upload this sketch to an Arduino. Follow the link in the sketch's header to install Arduino_JSON library via the Arduno IDE's Library Manager before you compile. See below for the circuit
  2. Download and install the latest release of the p5.serialcontrol app
  3. Reload this page with p5.serialcontrol open, then select a serial port:

Controls

Power:
Fan Speed:

Explanation

In this example, an Arduino, wired as shown in Figures 1 and 2 below, sends values from a potentiometer and a pushbutton serially to the p5.serialcontrol app. It uses the Arduino_JSON library to format the serial output as JSON. The code can be found at this link. This sketch reads from the app via a websocket, using the p5.serialport library.

When the knob or the pushbutton changes signficantly, their values are sent serially as a JSON string. The sketch reads this string, parses it, and uses the values to set the values of the button and slider above.

Arduino Nano with potentiometer and button, board view
Figure 1. Arduino Nano with potentiometer and button, board view. The Nano is mounted across the center sectionide of the breadboard, in rows 1-15. The Nano's physical pins are numbered in a U pattern from top left to top right. The Vcc Pin (physcial pin 2) connects to the breadboard's voltage bus on the left side. The Ground pin (physical pin 14) connects s to the breadboard's voltage bus on the left side. A pushbutton straddles the center fo the board on rows 18-20. The lower left pin in row 20 is connected to the left side ground bus. The top right pin is connected to the Arduino's digital input (physical pin 20, row 10 of the breadboard on the right side). A potentiometer is mounted in rows 23-25 on the left side of the board. Row 23 is also connected to the left side voltage bus. Row 25 is connected to the left side ground bus. Row 24 is connected to the Arduino's pin A0 (physical pin 4, row 4 of the breadboard on the left side).
Arduino Nano with potentiometer and button, schematic view
Figure 2. Arduino Nano with potentiometer and button, schematic view. A pushbutton is connected to digital input 2 on one side, and to ground on the other. A potentiometer is connected to Vin (3.3V) on one side, and ground on the other. Its wiper is attached to analog input pin A0.