GUI for Buoy B | Hackaday Dream Team 2020

This project contains a GUI for the Buoy B PCB design. The microcontroller used in the PCB is the ESP32.

Requirements:

1. ESP32 Add-on in Arduino IDE
2. ESPAsyncWebServer
3. AsyncTCP
4. SPIFFS File System
5. ESP32 Async Over The Air
6. TinyGPSPlus
7. LoRa

The ESP32 creates an Asynchronous Web Server, with the following credentials:

                  const char* ssid     = "EJA_Buoy_B";
                  const char* password = "123456789";
                

With those credentials it is possible to access the WiFi network.

Wifi network.

The ESP32 creates a Domain Name System (DNS) to assign a domain name to the web server. That means that it is not necessary to know the server IP, it is possible to access the web server using the defined domain name for the host, in this case, the name is:

                  const char* host = "www.buoy_b.eja";
                

Once the device (phone/computer) is connected to the server (EJA_Buoy_B), open a browser and visit the following url:

                  http://www.buoy_b.eja/
                

Home

The previous link displays the web page used for HOME:

Home Screen.

There is a header with the name "EJA Buoy B" that opens a sidebar with links to the different test functionalities. It is also possible to access those pages using the buttons in HOME.

Side Menu.

GPS

The page http://www.buoy_b.eja/gps shows the data from the GPS module.

GPS Screen.

Timer

The page http://www.buoy_b.eja/timer shows the interface to create a timer in the Buoy. The timer represents a countdown that activates the release mechanism when the time has reached zero. The initial page allows the user to set the timer.

Timer Screen.

After selecting the amount of time the user has to click the Submit button. That will create the timer, the interface displays the countdown to the user.

Remaining time.

When the timer reaches zero, the Buoy activates the release mechanism.

Screen when the timer reaches zero.

The user can delete the timer at any time clicking the button Delete Timer. When the user deletes the timer, it is possible to create a new one a restart the process.

Screen after the timer is deleted.

LoRa

The page http://www.buoy_b.eja/lora shows internal messages related to LoRa. In the ESP32 that information is stored in the variable:

                  String lora_all_msg = "";
                

LoRa Screen.

Terminal

The page "http://www.buoy_b.eja/terminal" shows internal messages. In the ESP32 that information is stored in the variable:

                  String terminal_messages = "";
                

Terminal Screen.

Future Improvements

For more information about the recommended future improvements for the electronic design visit the following post.