Theory and Practice of Tangible User Interfaces

Announcements

November 24, 2007
Reading for November 27th, are now posted. Enjoy!

October 2, 2007
To upload your thoughtless acts, create a new assignment page like any other lab. You'll see "Thoughtless Acts" listed as one of the assignment options.

May 24, 2008
This site has been archived and is no longer editable. Stay tuned for the next version, coming in the fall!


Home

Collaborative Decision Making/Voting

Thu, 09/27/2007 - 09:39 — Aylin Selcukoglu
Assignment: 
Lab 4 - Sensors: Force sensitive resistors and photocells
Project Members: 
Aylin Selcukoglu

Description

Originally (i.e. when I first did this lab), I had some trouble getting the code to work and ended up with an unfinished product. Throughout the course of the semester, I actually used Processing and Arduino for another class (cmc).

I created a visualization which I now propose here for collaborative decision making/aggregated voting over cmc. Each user has a pedal (which works just like a pot) connected to their visualization which they see on the bottom and above it they see the same visualization but it represents the aggregated total of all the other users, so anonymity is preserved in the process. 

Mechanical Idea for FSR

To distribute force around my FSR, I wanted to use either a squishy clown nose or a stress ball, cut a hole and hollow it out for my FSR to go inside. I couldn't find either of these on hand though, so I wasn't able to test it and take a photo. 

Components Used

wires
2 10-ohm resistors (brown, black, orange, gold) 
2 Roland EV5 Expression pedals

Arduino Code

/*
 * one pot, value sent to Processing over serial
 * modified version of AnalogInput
 * by DojoDave <http://www.0j0.org>
 * http://www.arduino.cc/en/Tutorial/AnalogInput 
 */
 
int potPin = 0;   // select the input pin for the potentiometer
//int ledPin = 9;   // select the pin for the LED
int val = 0;      // variable to store the value coming from the sensor

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

void loop() {
  val = analogRead(potPin);    // read the value from the sensor, between 0 - 1024
  //Serial.print("me ");
  Serial.println(val/4);
  delay(50);
  //analogWrite(ledPin, val/4); // analogWrite can be between 0-255
}
  

Processing Code 

client
/*
* graphical representations
* client
*/

import processing.net.*;
import processing.serial.*;

// serial variables
String portname = "/dev/tty.usbserial-A4001o19";

Serial port;
String buf = "";
int cr = 13;    // ASCII return
int lf = 10;    // ASCII linefeed

// network variables
Client c;
int input, oldInput;

// other variables
int count, oldCount;
PFont font;

void setup() {

  frameRate(20);

  // set background
  size(300, 385);
  background(#DCDCDC);
  smooth();

  // text
  font = loadFont("Verdana-20.vlw");
  textFont(font);
  fill(0, 0, 0);
  textAlign(CENTER, TOP);
  text("Remote User", 150, 146);
  text("You", 150, 326);
  
  // divider
  stroke(0,0,0);
  strokeWeight(3);
  line(0, 194, 400, 194);

  /* // crosshair
  strokeWeight(1);
  line(150, 0, 150, 510);
  line(0, 255, 400, 255);*/

  // set variables (to middle of no signal range)
  count = 128;
  input = 128;

  // connect with serial (Arduino)
  port = new Serial(this, portname, 9600);
  /*if (port != null)
    println("connected to port over serial");
  else
    println("serial failed");*/

  // connect to server
  c = new Client(this, "136.152.144.124", 5204);
  /*if (c != null)
    println("connected to server");
  else
    println("failed to connect");*/

}

void draw(){
  
  float a, x1, y1, x2, y2;
  float r = 60.0;

  // receive data from other person
  if (c.available() > 0) {
    oldInput = input;
    input = c.read();
    //println("received from client: " + input);
  }
 // else
    //println("no data from server");
  
  smooth();

  // Remote User
  //if ((input > (oldInput+1)) || (input < (oldInput-1))) {  
    
    // erase current arc (re-draw in background color)
    fill(#DCDCDC);                      
    strokeWeight(2);
    stroke(#DCDCDC);
    arc(150, 140, 200, 200, PI, TWO_PI);  // re-draw arc
 
    // negative
    if (input <= 127) {
      
      // re-draw arc - red
      fill(255, (0+(input*2)), (0+(input*2)));   // fill red
      strokeWeight(1);
      stroke(255, (0+(input*2)), (0+(input*2)));
      arc(150, 140, 200, 200, PI, TWO_PI);
      
      // draw spindle
      if (input <= 1)
        input = 0;
       
      a = (input/1.42 + 180) * (float)PI/180;
      x1 = 150;
      y1 = 125;
      x2 = (int) (cos(a)*r + x1);
      y2 = (int) (sin(a)*r + y1);
      stroke(0, 0, 0);                      
      strokeWeight(3);
      line(x1, y1, x2, y2);
    }
    // positive
    else if (input >= 128) {
      int input2 = input-155; // (0 to 100)
      fill((255-(input2*2)), 255, (255-(input2*2)));   //fill green
      strokeWeight(1);
      stroke((255-(input2*2)), 255, (255-(input2*2)));      
      arc(150, 140, 200, 200, PI, TWO_PI);
      
      // draw spindle
      if (input >= 251)
        input = 255;
   
      a = (input/1.42 + 180) * (float)PI/180;
      x1 = 150;
      y1 = 125;
      x2 = (int) (cos(a)*r + x1);
      y2 = (int) (sin(a)*r + y1);
      stroke(0, 0, 0);                      
      strokeWeight(3);
      line(x1, y1, x2, y2);
    }
  //}
  
  // you
  //if ((count > (oldCount+1)) || (count < (oldCount-1))) {  
    
    // erase current arc (re-draw in background color)
    fill(#DCDCDC);                      
    strokeWeight(2);
    stroke(#DCDCDC);
    arc(150, 320, 200, 200, PI, TWO_PI);  // re-draw arc
 
    // negative
    if (count <= 127) {
      
      // re-draw arc - red
      fill(255, (0+(count*2)), (0+(count*2)));   // fill red
      strokeWeight(1);
      stroke(255, (0+(count*2)), (0+(count*2)));
      arc(150, 320, 200, 200, PI, TWO_PI);
      
      // draw spindle
      if (count <= 1)
        count = 0;
       
      a = (count/1.42 + 180) * (float)PI/180;
      x1 = 150;
      y1 = 300;
      x2 = (int) (cos(a)*r + x1);
      y2 = (int) (sin(a)*r + y1);
      stroke(0, 0, 0);                      
      strokeWeight(3);
      line(x1, y1, x2, y2);
    }
    // positive
    else if (count >= 128) {
      int count2 = count-155; // (0 to 100)
      fill((255-(count2*2)), 255, (255-(count2*2)));   //fill green
      strokeWeight(1);
      stroke((255-(count2*2)), 255, (255-(count2*2)));    
      arc(150, 320, 200, 200, PI, TWO_PI);
      
      // draw spindle
      if (count >= 251)
        count = 255;
   
      a = (count/1.42 + 180) * (float)PI/180;
      x1 = 150;
      y1 = 300;
      x2 = (int) (cos(a)*r + x1);
      y2 = (int) (sin(a)*r + y1);
      stroke(0, 0, 0);                      
      strokeWeight(3);
      line(x1, y1, x2, y2);
    }
  //}

}

// called whenever serial data arrives
void serialEvent(Serial p) {
  int d = port.read();
  if (d != lf && d != cr) {
    buf += char(d);
  }
  if (d == lf) {
    oldCount = count;
    count = int(buf);
    //println("from arduino="+count); 
    buf = "";
    
    // only send data if there is a change
    if ((count > (oldCount+2)) || (count < (oldCount-2)) || frameCount%10 == 0)
     c.write(count);  // send your value to other person 
    //println("sent: " + count);
  }
}
 
server
/*
* graphical representations
* client
*/

//import processing.net.*;
import processing.serial.*;

// serial variables
String portname = "/dev/tty.usbserial-A4001o19";
Serial port;
String buf = "";
int cr = 13;    // ASCII return
int lf = 10;    // ASCII linefeed

// network variables
/*Server s;
Client c;*/
int input, oldInput;

// other variables
int count, oldCount;
PFont font;

void setup() {

  frameRate(2);

  // set background
  size(300, 385);
  background(#DCDCDC);
  smooth();

  // text
  font = loadFont("Verdana-20.vlw");
  textFont(font);
  fill(0, 0, 0);
  textAlign(CENTER, TOP);
  text("Remote User", 150, 146);
  text("You", 150, 326);
  
  // divider
  stroke(0,0,0);
  strokeWeight(3);
  line(0, 194, 400, 194);

  /* // crosshair
  strokeWeight(1);
  line(150, 0, 150, 510);
  line(0, 255, 400, 255);*/

  // set variables (to middle of no signal range)
  count = 128;
  input = 128;

  // connect with serial (Arduino)
  port = new Serial(this, portname, 9600);
  if (port != null)
    println("connected to port over serial");
  else
    println("serial failed");

 /* s = new Server(this, 5204);  // start 
  if (s != null)
    println("connected to server");
  else
    println("failed to connect");*/

}

void draw(){
  
  float a, x1, y1, x2, y2;
  float r = 60.0;

 // receive data from other person
 /* c = s.available();
  if (c!= null) {
    input = c.read();
    println("received from client: " + input);
  }
  else
    println("no data from client");*/
  
  smooth();

  // Remote User
  if ((input > (oldInput+1)) || (input < (oldInput-1))) {  
    
    // erase current arc (re-draw in background color)
    fill(#DCDCDC);                      
    strokeWeight(2);
    stroke(#DCDCDC);
    arc(150, 140, 200, 200, PI, TWO_PI);  // re-draw arc
 
    // negative
    if (input <= 127) {
      
      // re-draw arc - red
      fill(255, (0+(input*2)), (0+(input*2)));   // fill red
      strokeWeight(1);
      stroke(255, (0+(input*2)), (0+(input*2)));
      arc(150, 140, 200, 200, PI, TWO_PI);
      
      // draw spindle
      if (input <= 1)
        input = 0;
       
      a = (input/1.42 + 180) * (float)PI/180;
      x1 = 150;
      y1 = 125;
      x2 = (int) (cos(a)*r + x1);
      y2 = (int) (sin(a)*r + y1);
      stroke(0, 0, 0);                      
      strokeWeight(3);
      line(x1, y1, x2, y2);
    }
    // positive
    else if (input >= 128) {
      int input2 = input-155; // (0 to 100)
      fill((255-(input2*2)), 255, (255-(input2*2)));   //fill green
      strokeWeight(1);
      stroke((255-(input2*2)), 255, (255-(input2*2)));     
      arc(150, 140, 200, 200, PI, TWO_PI);
      
      // draw spindle
      if (input >= 251)
        input = 255;
   
      a = (input/1.42 + 180) * (float)PI/180;
      x1 = 150;
      y1 = 125;
      x2 = (int) (cos(a)*r + x1);
      y2 = (int) (sin(a)*r + y1);
      stroke(0, 0, 0);                      
      strokeWeight(3);
      line(x1, y1, x2, y2);
    }
  }
  
  // you
  if ((count > (oldCount+1)) || (count < (oldCount-1))) {  
    
    // erase current arc (re-draw in background color)
    fill(#DCDCDC);                      
    strokeWeight(2);
    stroke(#DCDCDC);
    arc(150, 320, 200, 200, PI, TWO_PI);  // re-draw arc
 
    // negative
    if (count <= 127) {
      
      // re-draw arc - red
      fill(255, (0+(count*2)), (0+(count*2)));   // fill red
      strokeWeight(1);
      stroke(255, (0+(count*2)), (0+(count*2)));
      arc(150, 320, 200, 200, PI, TWO_PI);
      
      // draw spindle
      if (count <= 1)
        count = 0;
       
      a = (count/1.42 + 180) * (float)PI/180;
      x1 = 150;
      y1 = 300;
      x2 = (int) (cos(a)*r + x1);
      y2 = (int) (sin(a)*r + y1);
      stroke(0, 0, 0);                      
      strokeWeight(3);
      line(x1, y1, x2, y2);
    }
    // positive
    else if (count >= 128) {
      int count2 = count-155; // (0 to 100)
      fill((255-(count2*2)), 255, (255-(count2*2)));   //fill green
      strokeWeight(1);
      stroke((255-(count2*2)), 255, (255-(count2*2)));     
      arc(150, 320, 200, 200, PI, TWO_PI);
      
      // draw spindle
      if (count >= 251)
        count = 255;
   
      a = (count/1.42 + 180) * (float)PI/180;
      x1 = 150;
      y1 = 300;
      x2 = (int) (cos(a)*r + x1);
      y2 = (int) (sin(a)*r + y1);
      stroke(0, 0, 0);                      
      strokeWeight(3);
      line(x1, y1, x2, y2);
    }
  }


}

// called whenever serial data arrives
void serialEvent(Serial p) {
  int d = port.read();
  if (d != lf && d != cr) {
    buf += char(d);
  }
  if (d == lf) {
    oldCount = count;
    count = int(buf);
    println("count="+count); 
    buf = "";
    
   /* s.write(count);  // send your value to other person 
    println("sent to client: " + count);*/
  }
}
 

Images 

viz 


Powered by Drupal - Design by Artinet