Interface and application programming

Arduino IDE

I modify the joystick code for the input device week, and make data from all axis readable

int JoyStick_X = 0; //x
int JoyStick_Y = 1; //y
int JoyStick_Z = 3; //key
void setup() 
{ 
 pinMode(JoyStick_X, INPUT); 
 pinMode(JoyStick_Y, INPUT); 
 pinMode(JoyStick_Z, INPUT); 
 Serial.begin(9600); // 9600 bps
}
void loop() 
{
     int x,y,z;
     x=analogRead(JoyStick_X);
     y=analogRead(JoyStick_Y);
     Serial.print(x ,DEC);
     Serial.print(",");
     Serial.print(y ,DEC);
     Serial.print(",");
     Serial.println(z ,DEC);
     delay(100);
}

Although it works find in arduino, I can get a steady data shown in serial monitor

516,526,0

Processing code

import processing.serial.*;
Serial myport;
int joy;
void setup() {
  size(1000, 1000);
  background(0);
  // Open whatever port is the one you're using.
  myport = new Serial(this, "/dev/tty.usbserial-AH01B140", 9600);
}
void draw(){
  joy = myport.read();
  ellipse (joy*10,50,5,5);
  println(joy);
}

The result wasn't pretty

53
49
54
44
53
50
54
13
10
53
49
54
44
53
50
54
13
10
53
49

After days of debugging process, I finally realized that the data obtained in processing is ASCII format, so I went back to modify the original Arduino code uploaded to the chip

Modify Arduino code

int JoyStick_X = 0; //x 
int JoyStick_Y = 1; //y 
int JoyStick_Z = 3; //key 
void setup() {
 pinMode(JoyStick_X, INPUT);
 pinMode(JoyStick_Y, INPUT);
 pinMode(JoyStick_Z, INPUT);
 Serial.begin(9600); // 9600 bps 
} 

void loop() { 
	int x,y,z; x=analogRead(JoyStick_X)/4; 
	y=analogRead(JoyStick_Y)/4; 
	Serial.write(x); 
	Serial.write(y); delay(100); 
}

Modify Processing code

I tweak the color a little bit to get a better view result

import processing.serial.*;
Serial myport;
int joy;

void setup() {
  size(258, 262);
  background(255,255,255);
 myport = new Serial(this, "/dev/tty.usbserial-AH01B140", 9600);
}

void draw(){
   if(myport.available() > 1) {
int x = myport.read();
int y = myport.read();
println( "x = " +x );
println( "y = " +y );
background(255,255,255);
fill(255,0,0);
stroke(255,0,0);
ellipse(x,y,20,20);
 }
}

So here I got a GUI with a red dot shoing the position of the joystick! (finally)

Processing GUI