Tactile Keyboard / Game Controller With Arduino and Processing

Intro: Tactile Keyboard / Game Controller With Arduino and Processing

This instructable describes a quick and simple way to create a tactile keyboard or game controller using
- cardboard,
- aluminium foil,
- and an Arduino.

It also provides the Arduino and Processing codes to immediately start playing !

Ideal for quick prototyping of games and electronic setup, as well as for educational purposes

STEP 1: Prepare the Tactile Keyboard

Cut pieces of aluminum foil to make the keys. Simply tape them to a piece of cardboard.

Shapes, dimensions, and arrangement of the keys can be varied. In this example, I used triangle shapes arranged in a Top/Down/Left/Right configuration to create a game controller.

Round shapes in a line, can make a keyboard, for a visual or musical control panel, for example.

STEP 2: Wire the Keyboard to the Breadboard

The first step is to insert a 8-10cm wire between the aluminium foil and the cardboard, and tape it in place. Repeat for each

Then twist the wires so that they reach the breadboard. The wires might be sufficient to hold the keyboard in the air, otherwise you may build a simple cardboard base, for example.

STEP 3: Connect the Arduino

Connect four 1 MOhm resistors to digital pins of the Arduino.

Connect the wires dangling from each of the keyboard keys, to one end of each of the resistors.

STEP 4: Program the Arduino

The code below is a simple sketch that sends a character (T, B, L, R) for each of the keys (Top, Botton, Left, Right), if the sensor is above a certain threshold.

EDIT : I forgot to mention that you need to download first the library CapacitiveSensor here

You can un-comment the print commands at first, to test with the Arduino console that your keyboard is working. Do not forget that when you will use Processing to read the Serial port however, you cannot have the Arduino console at the same time.

(few more thoughts

The code can be enriched by sending also the detected value, but the Processing code would be more complex, so I did not include it here..

Similarly, the detection threshold is hardcoded, and identical for all keys. It could be made different for each, and calibrated in the setup() function.)


#include <CapacitiveSensor.h>
//Circuit
//4 tactile capacitive detectors with 1 MOhm resistors

CapacitiveSensor sensorTop = CapacitiveSensor(13, 11);
CapacitiveSensor sensorBottom = CapacitiveSensor(10, 8);
CapacitiveSensor sensorLeft = CapacitiveSensor(7, 5);
CapacitiveSensor sensorRight = CapacitiveSensor(4, 2);

//hardcoded threshold
//lower to get a more sensitive touchpad
//higher to avoid noise
const int threshold = 150;

void setup(){
  Serial.begin(9600);
}

void loop(){
  long valTop = sensorTop.capacitiveSensor(30);
  long valBottom = sensorBottom.capacitiveSensor(30);
  long valLeft = sensorLeft.capacitiveSensor(30);
  long valRight = sensorRight.capacitiveSensor(30);

  //send the pressed key info to Processing

  if (valTop> threshold){
    Serial.print("T");
    //Serial.println(valTop);
  }

  if (valBottom> threshold){
    Serial.print("B");
    //Serial.println(valBottom);
  }

  if (valLeft > threshold){
    Serial.print("L");
    //Serial.println(valLeft);
  }

  if (valRight > threshold){
    Serial.print("R");
    //Serial.println(valRight);
  }

}

STEP 5: Processing Sketch: Receiver

The code below is a simple demo, able to receive the key info sent by the Arduino.

import processing.serial.*;
Serial myPort;
char key= 'N'; //default = no key

void setup(){
  size(400, 400);

  //hardcoded port selection. Mine is the second port, you'll have to check which is your Arduino Serial
  println("ports: ");
  println(Serial.list());
  myPort = new Serial(this, Serial.list()[1], 9600);

}

void draw(){
  background(255, 128, 0);
  fill(255);
  //four white circles
  ellipse(200, 50, 80, 80);
  ellipse(200, 350, 80, 80);
  ellipse(50, 200, 80, 80);
  ellipse(350, 200, 80, 80);

  if(myPort.available() > 0){
    key = myPort.readChar();
    println(key);
  }

  fill(0);

  switch(key) {
  //if one of the keys : black circle
  case 'T':
    ellipse(200, 50, 80, 80);
    break;
  case 'B':
    ellipse(200, 350, 80, 80);
    break;
  case 'L':
    ellipse(50, 200, 80, 80);
    break;
  case 'R':
    ellipse(350, 200, 80, 80);
    break;
  //if N: do nothing
  case 'N':
    break; 
  }

  key= 'N';

}

Comments

[cantona]

Thankd for the reply. I was able to set things up
http://i46.tinypic.com/e86dc2.jpg

is it possible to run another processing sketch

eg \\\\\\\\\ import processing.dxf.*;

void setup() {
size(400, 400, P3D);

background(#DEF6FF);
beginRaw(DXF,"positions.dxf");
}

void draw() {

}

void mouseDragged() {
fill(#0299CE);
ellipse(mouseX, mouseY,10, 10);
}

void keyPressed() {
endRaw();
exit();
}\\\\\\\\\\\\\\\\\

within a case statement or link the case statement to another sketch , so that when a button is pressed, the other sketch runs ?

[donmatito]

Not sure I understand, but you might be complicating things. Can't you just put the "button" code in a function or a class?

[cantona]

is it possible to print t,b,l,r into a text file when pressed ?

[donmatito]

Yes, I am pretty sure it is possible, although I have not done it myself.

The Processing code can do that easily with the createWriter() commande. You can see an example at http://www.processing.org/reference/createWriter_.html

Other than that , you could try to do it using Gobetwino (http://playground.arduino.cc/Interfacing/GoBetwino) or using the write() function of the SD library if you log your file on a SD card (http://arduino.cc/en/Reference/SD).

Let us know how it goes !