Sten-SLATE ESP Graphical Interface Stensat Group LLC, Copyright 2016 1
References www.arduino.cc http://esp8266.github.io/arduino/versions/2.1.0/doc/reference.html 2
Graphical Interface In this section, you will learn how to build a simple graphical user interface. Keep the circuit and arduino code as is. It will be used in this section. Two buttons will be created to control the two LEDs. A new prorgram will be created in Processing. Open a new window in Processing. 3
Importing Libraries Start the Processing software. Click on the Sketch menu and select the Import Library import processing.network.*; Select the network library. The import command will appear at the top of the editor. This tells the compiler to include the library of functions to support network operations. This library will be used to access the processor over wifi. 4
Setting up a TCP Port The next step is to create a network object that will provide access to the wifi. The variables button1_pressed and button2_pressed are created. These will be used to indicate that the button was already pressed. The draw() function is executed repeatedly so the checks for the buttons being pressed will be true and the commands will be sent repeatedly. import processing.network.*; Client c; int button1_pressed,button2_pressed; 5
setup() In the setup() function, the network object is configured to talk to the robot at the IP address of 192.168.4.1 using port 80. A window of 800 by 600 pixels is also created. The variables are set to zero to indicate the buttons are not pressed. import processing.network.*; Client c; int button1_pressed,button2_pressed; void setup() { size(800,600); c = new Client(this, 192.168.4.1,80); button1_pressed = 0; button2_pressed = 0; This completes the setup() portion of the code. Next is the draw() function. 6
setup() A label will be created for each button. To prepare for the text, the function textalign() tells the program to center the text around the coordinates specified in the text() function otherwise the text will start at the coordinates and be shifted to the right. textsize() sets the font size. import processing.network.*; Client c; int button1_pressed,button2_pressed; void setup() { size(800,600); c = new Client(this, 192.168.4.1,80); button1_pressed = 0; button2_pressed = 0; textalign(center); textsize(18); 7
Rendering the Buttons The draw() function does all the work. First, the window is cleared with the background() function and the buttons are rendered in their proper state. If a button is not pressed, it is gray. If the button is pressed, it is the color of the LED. void draw() { background(0); // black window if(button1_pressed == 0) fill(200); // set button gray else fill(100,0,0); rect(100,100,100,100,10); if(button2_pressed == 0) fill(200); else fill(0,100,0); rect(250,100,100,100,10); 8
Rendering the Buttons The text is rendered after the buttons are created. The order of operation is important. Any graphic created will be rendered on top of previous graphics. The text is rendered on top of the rectangles so the text() function needs to come after the rect() function. void draw() { background(0); // black window if(button1_pressed == 0) fill(200); // set button gray else fill(100,0,0); rect(100,100,100,100,10); if(button2_pressed == 0) fill(200); else fill(0,100,0); rect(250,100,100,100,10); fill(0); text( GREEN,300,155); text( RED,150,155); fill(0) sets the color of the text to black. The text() function renders the text at the specified coordinates. 9
User Interaction After rendering the buttons, it is time to check on the state of the buttons. The first check is if the mouse button is pressed. If true, the variable mousepressed will not be zero. void draw() { background(0); // black window if(button1_pressed == 0) fill(200); // set button gray else fill(100,0,0); rect(100,100,100,100,10); if(button2_pressed == 0) fill(200); else fill(0,100,0); rect(250,100,100,100,10); fill(0); text( GREEN,300,155); text( RED,150,155); if(mousepressed) { if((mousex > 100) && (mousex < 200)) { if((mousey > 100) && (mousey < 200)) { if(button1_pressed == 0) { c.write( F ); button1_pressed = 1; 10
User Interaction To determine which button if any is pressed, a simple boundary check of where the mouse position is in relation to the rectangles used for buttons is performed. First the x dimension is checked. Notice the &&. This means AND. This requires both comparisons to be true for the if() statement to be true. void draw() { background(0); // black window if(button1_pressed == 0) fill(200); // set button gray else fill(100,0,0); rect(100,100,100,100,10); if(button2_pressed == 0) fill(200); else fill(0,100,0); rect(250,100,100,100,10); fill(0); text( GREEN,300,155); text( RED,150,155); if(mousepressed) { if((mousex > 100) && (mousex < 200)) { if((mousey > 100) && (mousey < 200)) { if(button1_pressed == 0) { c.write( F ); button1_pressed = 1; 11
User Interaction Next, the button1_pressed variable is checked to see if it has been changed from zero. If it is zero, the command to turn on the red LED is sent and the variable is changed to 1. This is done so that next time draw() is executed and the button is still pressed, the command will not be sent again. void draw() { background(0); // black window if(button1_pressed == 0) fill(200); // set button gray else fill(100,0,0); rect(100,100,100,100,10); if(button2_pressed == 0) fill(200); else fill(0,100,0); rect(250,100,100,100,10); fill(0); text( GREEN,300,155); text( RED,150,155); if(mousepressed) { if((mousex > 100) && (mousex < 200)) { if((mousey > 100) && (mousey < 200)) { if(button1_pressed == 0) { c.write( F ); button1_pressed = 1; 12
User Interaction The second button is checked and processed like the first button. Only the X position is different and of course a different command is sent. rect(250,100,100,100,10); fill(0); text( GREEN,300,155); text( RED,150,155); if(mousepressed) { if((mousex > 100) && (mousex < 200)) { if((mousey > 100) && (mousey < 200)) { if(button1_pressed == 0) { c.write( F ); button1_pressed = 1; if((mousex > 250) && (mousex < 350)) { if((mousey > 100) && (mousey < 200)) { if(button2_pressed == 0) { c.write( L ); button2_pressed = 1; 13
User Interaction Now when the mouse button is not pressed, any buttons on the screen that was clicked on needs to be changed to the unpressed state. Variable button1_pressed is checked to see if it was a pressed button. The command to turn the LED off is sent and the variable is reset. Same thing happens to the second button. if((mousex > 250) && (mousex < 350)) { if((mousey > 100) && (mousey < 100)) { if(button2_pressed == 0) { c.write( L ); button2_pressed = 1; else { if(button1_pressed == 1) { c.write( B ); button1_pressed = 0; if(button2_pressed == 1) { c.write( S ); button2_pressed = 0; 14
Test Add a third LED to the processor board and update its software to accept commands to turn it on and off. Modify the processing program to add a third button to turn the third LED on and off. 15