14. Interface and application programming

This week we had to make a user interface so a user could interact with the development boards we made in previous weeks. Processing is a nice program we can use to create user interfaces on the computer and interact with peripherals using serial communication, UDP, TCP, HTTP or a range of other protocols. I decided to use UDP as the means of communication with the board this week. The board would act as both the UDP server and the wifi network.

View the group assignment here

The Program's Functionality

The user on the computer can do a right or left click and a corresponding number (0 or 1 respectively) will be displayed on the tft screen attached to the esp microcontroller.

Arduino Code

The arduino code can be broken down as folows:

• Lines 1-4 the libraries for drawing on the screen on my board and the libraries for wifi and UDP networking are imported.

              
                #include 
                #include 
                #include     // Core graphics library
                #include  // Hardware-specific library for ST7735
              
            

• 6-11 sets the appropritate pins to communicate with the screen

              
          #define TFT_CS        9
          #define TFT_RST        46 // Or set to -1 and connect to Arduino RESET pin
          #define TFT_DC         3
  
          #define TFT_MOSI 10  // Data out
          #define TFT_SCLK 11  // Clock out
              
            

• 13-14 create the objects to draw to the screen as well as the SPI class to communicate with it

              
                SPIClass *spi = new SPIClass(HSPI);
                Adafruit_ST7735 tft = Adafruit_ST7735(spi, TFT_CS, TFT_DC, TFT_RST);
              
            

• 16-19 set the credentials for when the local network on the esp32 will be created

  
              const char* ssid = "ESP32_AP";        // SSID of the Access Point
              const char* password = "12345678";    // Password of the Access Point
  
              unsigned int localPort = 5005;      // local port to listen on
            

• 123 create the UDP object

              
                WiFiUDP Udp;
              
            

• 25-44 starts the screen communication and UDP server.

              
                void setup() {
                  spi->begin(TFT_SCLK, -1, TFT_MOSI, TFT_CS);
                  tft.initR(INITR_MINI160x80);  // Init ST7735S mini display
                  tft.setRotation(1);
                  tft.fillScreen(ST77XX_BLACK);
                  Serial.begin(9600);
  
                  // Set up the Wi-Fi in Access Point mode
                  Serial.println("Setting up AP...");
                  WiFi.softAP(ssid, password);
  
                  IPAddress IP = WiFi.softAPIP();
                  Serial.print("AP IP address: ");
                  Serial.println(IP);
  
                  // start UDP
                  Udp.begin(localPort);
                  Serial.print("Listening on port ");
                  Serial.println(localPort);
                }            
              
            

• 46-68 Polls for UDP packets. If one is received it checks the value. If it is a 1 or a 0 it will be printed to the TFT screen.

            
              void loop() {
                int packetSize = Udp.parsePacket();
                if (packetSize) {
                  // read the packet into packetBuffer
                  int len = Udp.read(packetBuffer, 255);
                  if (len > 0) {
                    packetBuffer[len] = 0;
                  }
                  Serial.print("Received packet: ");
                  Serial.println(packetBuffer);
  
                    tft.setTextColor(ST77XX_BLACK, ST77XX_WHITE);
                    tft.setTextSize(1);
                    tft.setCursor(0, 0);
                  if (strcmp(packetBuffer, "1") == 0) {
                    tft.println("Received 1");
                    // Add your action for 1 here
                  } else if (strcmp(packetBuffer, "0") == 0) {
                    tft.println("Received 0");
                    // Add your action for 0 here
                  }
                }
              }
            
          

Processing Code

The processing code can be broken down as follows

• line 1 imports the UDP library

  
              import hypermedia.net.*;
  
            

• 6-10 sets up the UDP class and the size of the interface (200x200). It does not listen on the UDP port because it will only send, not receive data.

  
            void setup() {
              size(200, 200);  // set the size of the window
              udp = new UDP(this, 6000);  // create a new UDP object
              udp.listen(false);  // disable listening (client mode)
            }
  
            

• 12-16 draws the actual interface which is just a box asking the user to right or left click in it.

  
              void draw() {
                background(255);  // set background color to white
                fill(0);  // set fill color to black
                text("Click to send 1 or 0", 50, height/2);  // display instructions
              }
  
            

• 18-22 is the callback function for mouse clicks and sends data over UDP, 1 corresponding to a left click, 0 for a rihgt click.

              
                void mousePressed() {
                  String message = (mouseButton == LEFT) ? "1" : "0";  // send "1" for left click and "0" for any other click
                  udp.send(message, "192.168.4.1", 5005);  // replace with your Arduino's IP address and port
                  println("Mouse pressed: " + message);  // print the message to the console
                }
  
              
            

Code files

code for this week can be found here