Tutorial LEARNING SLEEVE

Learning Sleeve is an interactive learning game based on a sleeve to improve the learning in a fun and exciting way. We used processing and the arduino software for coding.

Materials needed:

  • Textile base for the sleeve (We used leather)
  • 22 x 17 cm for sleeve – 5 x 15  for each card
  • conductive thread
  • Lilypad arduino
  • 3 different resistors + one for each card
  • needle and thread
  • press buttons (6 for the Lilypad and 4 per card)
  • printed/plotted symbols for the cards

 

bildschirmfoto-2017-02-12-um-13-00-03

Step 1 – Planning:

Before you start you should think the project through. You will need 2 different circuits to get signals from. Since we want to read the value of the resistor of each card (to keep them apart) we need to connect the ground with a analog slot (we used A2) on the lilypad and of course we need to leave some space for the conduction points of the replaceable card. Make sure to connect it with the positive terminal and be aware that you will need another resistor in front of it to get rid of any electrical fluctuations. For the second circuit it will be exactly the same, with the only difference that the type of switch you use on the card itself is up to you. We used a stroke sensor, but of course there could also be a light sensor etc. In case we want to establish a card with potentiometer or any switches that run on power values we decided to connect the card switch circuit to an analog slot aswell (A5).

Once you understood the theory its time to get to work!

dsc_0105
Step 2 – Cutting the sleeve:

At first we need to create a basis for our electronical parts, so cut out the sleeve. The dimensions we used are  22 x 17 cm. This will suit a grown up, so if you want to customize it to smaler persons just measure the persons arm.

img-20170113-wa0001

Step 3 – The Cards:

The cards are next, so cut them out of your material of choice. We used the dimensions  5 x 15 cm, in order to make sure there would be enough place for two different circuits crossing it and our sensor of choice.

In order to establish a connection between the sleeve and the cards we need to sew 4 press buttons on the corners of each card. After that we sew a (different) resistor on each card and connect each side to one of the press buttons.

Now its time for some aesthetical work, so print, plot or draw the symbols for the cards to give them a sassy look and to define the object you want to teach.

Step 4 – Putting it all together:

Next we need to put a sensor (in our case a stroke sensor, but just choose the one that works for you) on one of the cards and sew the press buttons for the arduino on the sleeve to finalize the connection between cards and sleeve. Now we connect the ground with conductive thread with the press buttons on one side of the card according to our circuit diagram.

Now its time to create some cool animations that are triggered by the right cards and running their sensors. So be creative and have some fun!

Optional last step:

If you want to give your sleeve a permanent grip just use rubber band or a buckle to close the sleeve around the arm. Voila you got yourself your own translation sleeve!

16389371_10202626273573902_2046533352_o

 

The Code:

Arduino:
int card;
int touch;
int counter;void setup() {
// put your setup code here, to run once:
Serial.begin(9600);
card = 0;
touch = 0;
}

void loop() {
// put your main code here, to run repeatedly:
card = card*0.3 + analogRead(A3)*0.7;
touch = touch*0.7 + analogRead(A5)*0.3;

if (counter==0) {
Serial.print(card);
Serial.print(“,”);
Serial.print(touch);
Serial.print(“,”);
Serial.print(“\n”);
}
counter++;
if (counter>100) counter = 0;
delay(10);
}

Processing:
import processing.serial.*;
import gifAnimation.*;
import cc.arduino.*;
Gif myAnimation1, myAnimation2, myAnimation3, myAnimation4;
Serial myPort; // Create object from Serial class
int val; // Data received from the serial port#
boolean ready,a1,a2,a3,stop;void setup()
{
size(1000, 1000);
//println(Serial.list());
String portName = Serial.list()[3];
myPort = new Serial(this, portName, 9600);
myAnimation1 = new Gif(this, “bilder/.gif”);
myAnimation2 = new Gif(this, “bilder/lion2.gif”);
myAnimation3 = new Gif(this, “bilder/lion3.gif”);
myAnimation1.loop();
myAnimation2.loop();
myAnimation3.loop();
}

void draw()
{
background(0);
if(a1)image(myAnimation1, 30, height/2-180);
if(a2)image(myAnimation2, 30, height/2-180);
if(a3)image(myAnimation3, 30, height/2-180);
}

void serialEvent (Serial port) {
String in = port.readStringUntil(0x0a);
if (in != null && in.contains(“,”) && in.contains(“\n”)) {
in.replace(“\n”,””);
String[] values = in.split(“,”);

if (values.length>2) {
int card = (Integer.parseInt(values[0]));
int touch = (Integer.parseInt(values[1]));
println(“card: “+card);
println(“touch: “+touch);
println();

if (card<600 && touch>200 && !stop) {
a1 = false;
a2 = true;
a3 = false;
}
else if (card<600 && touch<=200) {
a1 = false;
a2 = false;
a3 = true;
stop = true;
}
else if (card>900) {
a1 = true;
a2 = false;
a3 = false;
stop = false;
}}}}

Make sure you have the right format installed to connect Arduino & Processing
Gif Animations:
lion1.gif
lion2.giflion3.gif