Assignment

Interface and Application programming

In this week assignment, I have to create an application that interfaces the user with input or output or both devices that I made before. I did use some graphics tools that make the application, one of them called MIT app inventor and the other one called Thunkable But here I'm trying to use somthing new which is called processing. It's very common and used a lot with microcontroller such as Arduino

After downloading the processing for windows 64 bit to be compatible with my computer, I got a zip file. I extracted it and opened the folder. The program is there and no need to set up something. By clicking on the program, it’s open now

To make the communication happens, I should write a code and upload on my microcontroller board. The code should sends values through serial, the values can be captured by processing to change something on screen or interact.

The other way of communication is that the processing can send values to the arduino by clicking on specific button or space in the processing software after run the code.

In general, the communication can be in both ways by using the serial ports.

I’m planning to use joystick module sensor. This sensor can detect the movment in 4 directions in addtion to the push button in the middel

The sensor has 5 pins, 5v, GND, VX, VY, and S. VX and VY can detect the movement in the X axis and Y axis, both of them are analog inputs to the microcntroller. S is the switch, it's digital, if pressed or not

I created a new code to read sensor values, the values will help me in mapping and creating something in processing program

void setup() {
  pinMode(2, INPUT);
  pinMode(A2, INPUT);
  pinMode(A1, INPUT);
 
  Serial.begin(9600);
}

void loop() {
  Serial.print("Switch:  ");
  Serial.print(digitalRead(2));
  Serial.print("\n");
  Serial.print("X-axis: ");
  Serial.print(analogRead(A2));
  Serial.print("\n");
  Serial.print("Y-axis: ");
  Serial.println(analogRead(A1));
  Serial.print("\n\n");
  delay(500);
}

I used my Atmega328p board to test the module. I designed this board to be used in the final project, It has many inputs and outputs. I did not use external crystal

I checked the microcontrollers available and used before for such applications, one is very common that called Atmega 328p from Atmel

As shown above, the microcontroller has more than 14 pins for inputs/outputs. So, I started designing the microcontroller board based on it. I created a new project using Eagle software and created a new schematic under it. After a quick research, I have to use at least 3 components with Atmega328p to start uploading the code correctly. The components are 100 nF capacitor, 1 uF capacitor, and 10 kohm resistor. So the total component that I need to add and solder later are:

- Atmega328p

- 100 nF capacitor

- 1 uF capacitor

- 10 kohm resistor

- Headers (for: inputs/outputs, ISP, VCC, GND, FTDI)

I added the components and connect them together in the schematic page (I tried to take all the I/O pins because maybe I need to connect something new adding more features or something). I used labels to organize the connections

Then I moved to the board by clicking on the “generate/switch to board” icon, then I started organizing the paths/traces as much as I can with 14 line width to get the final one with no intersections

By hiding no need layers and exporting the file as Dxf, I prepared the file to be ready for milling and cut after using inkscape to create svg file that has vectors only. I added my name at the corner as well

This is the board after I mill it and solder it using Carvey machine. For more details, it's mentioned in the final project page

I considered the pins as 2 for the switch, A2 for X axis, A1 for Y axis. the code is simply raad the values and print them on serial monitor

I connected the circuit accordingly

I uploaded the code and opened the serial monitor

What I just noticed, the Y axis and X axis give values from 0 to 1023 as it goes from right to left, I can say it was around 500 at the middel with no movment. As for the switch, it's 1 if I pressed, otherwise zero

Now I understood the sensor, I need to do something with processing

I checked the tutorials on how to make the codes using processing as it’s my first time dealing with it. I found very interesting tutorials Here

I started understanding the code structure, the code has void setup as Arduino, but void loop called void draw in processing. I found something that I can build the code based on it Here

This code draws multiple things based on my requirements. I changed it to make one big circle at the middle and 4 small circles around, the code became as the following

void setup() {
  size(700, 700);
  background(51);


}

void draw() {
 
  drawTarget(width*0.5, height*0.2, 150, 4);
  drawTarget(width*0.5, height*0.8, 150, 4);
 drawTarget(width*0.2, height*0.5, 150, 4);
drawTarget(width*0.8, height*0.5, 150, 4);
 drawTarget(width*0.5, height*0.5, 250, 100);
  
 
}

void drawTarget(float xloc, float yloc, int size, int num) {
  float grayvalues = 255/num;
  float steps = size/num;
  for (int i = 0; i < num; i++) {
    fill(i*grayvalues);
    ellipse(xloc, yloc, size - i*steps, size - i*steps);
  }
}

The results after clicking on run was

Now, what I’m planning to do is to make each circle appears once I go to the right direction. First I need to edit my microcontroller board code to send 4 different values, when I go up, down, right, left. I edit the code accordingly

void setup() {
  pinMode(2, INPUT);
  pinMode(A2, INPUT);
  pinMode(A1, INPUT);
 
  Serial.begin(9600);
}

void loop() {
  int s= digitalRead(2);
  int x= analogRead(A2);
  int y=analogRead(A1);

  if (x >700){
    Serial.println("50");
  }

   if (x <300){
    Serial.println("51");
  }

   if (y <300){
    Serial.println("52");
  }

   if (y >700){
    Serial.println("53");
  }
  
 
}

So, I assumed the values based on the test that I have done, the code will send 4 different values through the serial monitor (50, 51, 52, 53) as the sensor goes (up, down, right, left)

I did upload the code and moved to edit the processing code. After checking many tutorials on how to connect the processing with Arduino, I added a set of commands to make the connection and receive the values and show the circles accordingly

import processing.serial.*;
Serial myPort; // Create object from Serial class
String val;
int y=0; //giving y an initial value

void setup() {
  size(700, 700);
  background(51);

myPort = new Serial(this, "COM13", 9600);
}

void draw() {
  while (myPort.available() > 0) {
    val = myPort.readStringUntil(13);
    if (val != null) {
      try {
    y =Integer.parseInt(val.trim()); 
   if (y== 50) {
        drawTarget(width*0.5, height*0.2, 150, 4);

    }
 if (y== 51) {
        drawTarget(width*0.5, height*0.8, 150, 4);

    }  
    
    if (y== 52) {
        drawTarget(width*0.2, height*0.5, 150, 4);

    }  
    
      if (y== 53) {
drawTarget(width*0.8, height*0.5, 150, 4);
    }


}
  catch (NumberFormatException npe){}}}
  
  drawTarget(width*0.5, height*0.5, 250, 100);
  
 
}

void drawTarget(float xloc, float yloc, int size, int num) {
  float grayvalues = 255/num;
  float steps = size/num;
  for (int i = 0; i < num; i++) {
    fill(i*grayvalues);
    ellipse(xloc, yloc, size - i*steps, size - i*steps);
  }
}

So, basically I added the serial port to be read from COM13 as my board is detected COM13 and the bude rate as I set in Arduino code 9600. I started wither if the serial communication is available. In this case will read the value and convert it to integer, then check the value, if it’s 50 or if it’s 51 or if it’s 52 or if it’s 53. Each value will draw the circle if I go up, the circle will be drawn up, if I go right the circle will be drawn right and so on

I recorded video to keep the results

Download Files' Links:

Sensor test code

Final microcontroller code

Processing test code

Final processing code