Physical Computing: Arduino with 2 Analog Sensors from cindy wong on Vimeo.

For Serial Communication lab, we’re using multiple sensors to interact between the Arduino and the computer. Just like with the first lab, since I’m in ICM-web, I’m using a Javascript applet as prescribed by Prof. Shawn Van Every to display that interaction visually on a web browser. In this case, we’re using 2 Potentiometer, 1 Switch (button) in the below setup.

The web interface is using HTML 5 <canvas> within Javascript to display the interaction.

Here’s the Arduino code that I uploaded:

int heat = 65; int light = 65; int onOff = 0;

void setup() {

  Serial.begin(9600);
  pinMode(4, INPUT);
  Serial.println("Start");
}

void loop() {

  if (Serial.available() > 0){  //only send if you have hear back
    int input = Serial.read();

    heat  = analogRead(5); // Potentiometer
    light  = analogRead(0); // Potentiometer
    onOff = digitalRead(4); // Button Switch

    Serial.print(heat); Values (0:1020)
    Serial.print(","); // inserts a comma to distinguish the different values for HEAT, LIGHT, onOFF,
    Serial.print(light); Values (0:1020)
    Serial.print(",");
    Serial.print(onOff); Values (O:1)
    Serial.print(",");

    Serial.print(10, BYTE);  //send a return (when user presses button ONSEND transmits an 'A' character)
    Serial.flush();//Flushes the buffer of incoming serial data.Any call to Serial.read() or Serial.available()

//will return only data received after all the most recent call to Serial.flush().

delay(20); //you might use this instead of if available
}
}

On the Javascript side....
// Do some graphing in the canvas
//https://developer.mozilla.org/en/Canvas_tutorial
var parts = String(input).split(','); // parses out the values

var light = parts[0];
var breath = parts[1];
var onOff = parts[2];

canvascontext.clearRect(0,0,500,255); //draws the rectangle
canvascontext.fillStyle = "rgb(" + breath + ",0,0)"; // changes the hue of the rectangle?

if (onOff == "1")
{
canvascontext.fillRect (10, light, 50, 50); // changes the color of the rectangle ?
}
else
{
canvascontext.drawEllipse(10, light, 50, 50); // changes the y-axis movement of rectangle
}