Introduction: Capacitive Sensor Visualization With Processing

To test and demo the e-textile capacitive wheel I worked on with Rachel Freire, we visualized the sensors' responsiveness with Processing. It was much easier to see what was going on using a visualization rather than just looking at the Serial Monitor in the Arduino IDE.

We used fabric to make our sensors along with a Teensy 3.2, but you could adapt this to work with other sensors and boards. See Rachel's instructable on how to make an e-textile capacitive wheel here.

Step 1: Tools and Materials

Tools:

Arduino IDE

Processing IDE

Materials:

Teensy 3.2 (or similar)

Capacitive sensors

Step 2: Arduino Code

CapacitiveSensorToProcessing.ino

// List of pins that are used for the touch
// sensors. const int touchPin1 = 15; const int touchPin2 = 17; const int touchPin3 = 18; const int touchPin4 = 19; const int touchPin5 = 16; const int touchPin6 = 22; void setup(void) { Serial.begin(9600); } void loop(void) { // JSON is a way to structure data that is easy to work with in // Processing. String json; // I assigned a lowercase letter to each touch sensor. // In our case, we had 6 sensors that I named a-f. We read // from each sensor and then assemble the JSON from concatenated // strings. The JSON for this example looks like: // {a:1000,b:1,c:1200,d:3000,e:4000,f:2000} json = "{\"a\":"; json = json + touchRead(touchPin1); json = json + ",\"b\":"; json = json + touchRead(touchPin2); json = json + ",\"c\":"; json = json + touchRead(touchPin3); json = json + ",\"d\":"; json = json + touchRead(touchPin4); json = json + ",\"e\":"; json = json + touchRead(touchPin5); json = json + ",\"f\":"; json = json + touchRead(touchPin6); json = json + "}"; // This gets printed to Serial, which Processing will read. Serial.println(json); delay(200); }

After uploading this to your board, you can test that it outputs the correct JSON by opening the Serial Monitor in the Arduino IDE (see screenshot). Make note of the biggest values being read from your sensors for your Processing program.

Step 3: Processing Code

CapacitiveSensorToProcessing.pde

import processing.serial.*;

int numPins_ = 6; // UDPATE THIS TO YOUR NUMBER OF SENSORS

Serial port_; JSONObject json_; float[] pinValues_; int maxPinInput_ = 9000; // UPDATE THIS TO THE MAX VALUE YOU READ FROM YOUR SENSORS

void setup() { size(400, 400); // The code below will print out all your ports to your console. // MAKE A NOTE of which port is the first listing for /dev/tty.usbmodem#####. for (int i = 0; i < Serial.list().length; i++) { println(Serial.list()[i]); } // CHANGE 2 TO BE WHICHEVER PORT WAS /DEV/TTY.USBMODEM#######. // You start counting with 0. Ours was the third listing, so we put 2. String portName = Serial.list()[2]; port_ = new Serial(this, portName, 9600); pinValues_ = new float[numPins_]; for (int i = 0; i < numPins_; i++) { pinValues_[i] = 0; } }

void draw() { if (getData()) { background(255); // clears background // The value read from each sensor gets mapped to the range [0, Screen Width]. // This value becomes the length of the rectangle associated with that sensor. float rh = height / pinValues_.length; float maxRw = width; fill(255, 0, 0); for (int i = 0; i < pinValues_.length; i++) { float rw = map(pinValues_[i], 0, maxPinInput_, 0, maxRw); rect(0, i * rh, rw, rh); } } }

boolean getData() { if (port_.available() > 0) { // If data is available, json_ = parseJSONObject(port_.readString()); // println(json_); if (json_ != null) { pinValues_[0] = json_.getInt("a"); // IF YOU HAVE MORE OR LESS SENSORS, UPDATE THIS pinValues_[1] = json_.getInt("b"); pinValues_[2] = json_.getInt("c"); pinValues_[3] = json_.getInt("d"); pinValues_[4] = json_.getInt("e"); pinValues_[5] = json_.getInt("f"); // println(pinValues_); return true; } } // println("INVALID JSON"); return false; }

Step 4: Run

After uploading the .ino file to your board, compile and run your processing sketch.

NOTE: You cannot have the Arduino Serial Monitor and the Processing sketch running at the same time.

In the Processing code, you can adjust maxPinInput_ at the top of the file to make the visualization more or less responsive.

Comments

author
rachelfreire made it! (author)2017-05-14

sensor on the finished garment prototype

IMG_3145.jpgIMG_3151.jpgIMG_3143.jpg

About This Instructable

193views

10favorites

License:

Bio: Sophia Brueckner, born in Detroit, MI, is an artist, designer, and engineer. Inseparable from computers since the age of two, she believes she is a ... More »
More by sab-art:Capacitive Sensor Visualization With ProcessingE-Textile Jumper Wires for SnapsTouch-Sensitive Musical Painting
Add instructable to: