Close

Building Arduino Swipe Detection

This tutorial will show you how to detect a swipe gesture across any surface, using an Arduino and a potentiometer in the form of a small flat strip.

Arduino Potentiometer

A ‘soft potentiometer‘ is a resistor in the form of a flat strip. By pressing on the surface, your Arduino can measure the resistance, essentially telling you where on the strip a user is pressing.

You can use your Arduino to keep track of previous presses. By comparing presses you can detect motion. For example, if the resistance starts out high, and keeps getting lower every few milliseconds, someone is swiping across the strip.

This movie shows an Arduino that sends a signal to an animation on a laptop, when someone is swiping the strip to the left.

Building an Arduino Swipe Detector

To rebuild the swipe detector you need the following components:
Arduino board
Soft potentiometer (Ribbon sensor)
10K Ohm resistor
Mini breadboard
Wire

Once you have these components, use this sketch and code to build your own gesture detector!

Resistor

Putting the 10K resistor between the potentiometer output and the Arduino input makes sure that there’s always a value of 0 detected when the user is not pressing anywhere.

The following code detects where the potentiometer is being pressed. If this value keeps dropping within a certain amount of time, we can conclude that the user is sliding to the left. If this is the case, the Arduino sends a “1” signal through the Serial port. If not, it sends a “0”.

Note: the Arduino sends data through the serial port, so the board needs to be connected to a computer through a basic USB cable.

int potPin = A2;
int ledPin = 13;
int decreasing = 0;
int previous = 0;
int current = 0;

// detect if the potmeter input keeps getting smaller for a certain amount of time
// (value ranges from 1024 to 0 without pullup resistor)
// if yes, then send "1" for a while before starting the detection again

void setup() {
  Serial.begin(9600);
  pinMode(ledPin, OUTPUT);
}

void loop() {
  current = analogRead(potPin);
  // to check the current value use Serial.println(curr);
  
  // now check if current value is smaller than previous. if this happens enough
  // times we assume the user is pressing their finger leftward
  if(current < previous) {
    decreasing++;
  } else {
    decreasing = 0;
  }
  
  previous = current;
  
  // if we've been decreasing 10 times, send a "1" value (and light the LED on the arduino)
  if(decreasing > 10) {
    // this lights up the LED on the Arduino board
    digitalWrite(ledPin, HIGH);
    // this sends a '1' signal across the serial connection to the laptop
    Serial.print(1);
  } else {
    digitalWrite(ledPin, LOW);
    Serial.print(0);
  }
  // a little delay to make sure we're not detecting too fast
  delay(20);
}

Congrats! Now you can make any surface interactive by sticking a swipe detector on it!

Reading Arduino messages with Processing

Now that our Arduino is sending a message across the serial port, we need a way to catch that message and do something with it. In this case we’ll use Processing to read the serial port, and catch the ‘1’ signal that Arduino may be sending.

Note that connecting the serial port to processing works differently on some machines. You may have to do some testing to see if you’re reading the correct serial port. Read more about the serial connection here!

When Processing is receiving the swipe signal, it’s up to you to trigger some cool animation or video!

import processing.serial.*;

int pausecounter = 100;
// The serial port
Serial myPort;  

void setup() {
  // use this to check which serial port you should be reading
  println(Serial.list());
  // in my case the arduino data comes in at serial port 5
  myPort = new Serial(this, Serial.list()[5], 9600);
}

void draw() {
  // only check arduino if enough time has passed
  // this prevents multiple readings of the serial port
  pausecounter++;
  checkArduino();
}


void checkArduino() {
  while (myPort.available() > 0) {
    int inByte = myPort.read();
    println("serial: " + inByte);
    // when using println from arduino, you get line feeds (byte 10 and 13)
    if(inByte == 49 && pausecounter > 35) {
      // WE DETECTED THE SWIPE SIGNAL! DO SOMETHING HERE!
      println("Processing has received this signal from Arduino: " + inByte);
    }
  }
}

What if you don’t want to use Processing?

The reason we’re using Processing is that access to the serial port is restricted to software running natively on your machine. You can access the serial port in other languages, for example Python or C#.

Javascript

A webbrowser does not allow access to the inner workings of your machine – if it did, that could lead to some truly disastrous hacking!
You could use a Wifi-connected Arduino to get data straight into the browser, but if you want to use a serial cable, you could try setting up Node on your machine and install Node-Serialport. I haven’t had the chance to try this myself!