14. Interface and application programming¶
Hello! this time, let’s learn about Interface and application programming
Interface¶
Graphical interfaces are known as GUI (graphical user interface) and are programs that, based on objects and images, present information and actions in an interface, their main use is to provide a visual environment.
Programs¶
Arduino¶
We are working with our own board based on the Seeed Xiao, which we developed in assignment 8 Electronics Design, here is the code, but I have to explain a couple of things about the code.
int X_Pos = 0;
int Y_Pos = 0;
int b;
void setup(){
Serial.begin(9600) ;
pinMode(D2, INPUT_PULLUP) ;
}
void loop(){
X_Pos = analogRead(A1);
Y_Pos = analogRead(A2);
Serial.print(X_Pos, DEC);
Serial.print(",");
Serial.print(Y_Pos, DEC);
Serial.print(",");
Serial.print(!b);
Serial.print("\n");
delay(10);
}
In the code, we are sending DEC data, that is, numbering in base 10, this is why we are sending numbers, and second, you can see the: ” Serial.print(“,”);”, if we are sending the data separated by a comma. This is important because we will send the data through the Serial port, and we will separate them by the comma, to maintain an order when receiving them, in processing we must clarify this, we must make the program know that the data separation is given by a comma. Also the Serial.print(“\n”) is important because it delimits up to where the reading is done in a cycle
Processing¶
Processing is flexible software and a language for learning how to code visual arts. It allows the creation of programs in a visual way, even using Augmented Reality.
First comment that, like arduino, processing has two main functions, the void setup, and the void draw, which would be like the void loop but in this case would be to draw. I will separate the code in parts, to be able to understand what is happening…
First we declare the variables
import processing.serial.*;
Serial port;
int x;
int y;
int Switch;
PFont f;
String portName;
String value;
In the void setup, we define our canvas with “size” it will be 512x512 pixels, then two important points, first we open the serial port and review the list of elements in the serial port and since we only have our board connected, we put the first one that would be the first of the list, that is, 0 (the count of elements in the list starts at 0, not 1), and we also establish the communication baud rate, we leave it at 9600, then we define up to which element we do the reading, remember the Serial.print (“\n”) in arduino?, here is important, our seeed Xiao will send this information and processing with port.bufferUntil(‘\n’) will know how far to read the data.
void setup(){
size ( 512 , 512 ) ;
port = new Serial(this, Serial.list()[0], 9600);
port.bufferUntil('\n');
f = createFont("Arial", 16, true);
textFont ( f, 16 ) ;
}
Then we have to define our drawing structure, i draw a circle in two cases, when the jostick switch is pressed and when not, and also the data, let’s not forget the data.
We received 3 data from the Seees XIAO, which were sent in series separated by a comma with the command: splitTokens(value, “,”), the data comes in 3 parts, remember that the first data or value comes from the pisicion reading 0, then 1 and then 2, there we have the 3 data. with the lines of code, x = values[0]; y = values[1]; Switch = values[2];
void draw(){
fill(0) ;
clear() ;
fill(255) ;
if (Switch == 1){
ellipse(x/2,y/2,100, 100);
}
else{
ellipse(x/2,y/2, 25, 25);
}
text("AnalogX="+(1023-x)+" AnalogY="+(1023-y),10,20);
}
void serialEvent( Serial port) {
value = port.readStringUntil('\n');
if (value != null){
value = trim(value);
int[] values = int(splitTokens(value, ","));
x = values[0];
y = values[1];
Switch = values[2];
}
}
basically the movement of the circle responds to the movement of the joystick, I leave you a test video.
Well, the board we use is already an old acquaintance, and you can find the design in my Assignment 8 Electronics Design Here.