GUI for the Onboard Gateway | Hackaday Dream Team 2020

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

Step 1Define

What It Had to Do

The Onboard Gateway is the topside half of EJA: it stays with the operator as a hand‑held LoRa link to a deployed buoy (see the Onboard Gateway board). In EJA's operating process the fishers set the maximum time the gear will stay underwater, and the buoy is released when that time runs out (EJA project page); this interface sets that time remotely, over LoRa.

• AccessWork from any phone or laptop browser, with no app and no router: the ESP32 runs its own Wi‑Fi access point
• AddressOpen by a name, www.onboard_gateway.eja, instead of an IP address
• PositionShow the buoy's GPS data, received over LoRa: the gateway has no GPS of its own
• TimerSet or cancel the buoy's release countdown over LoRa, and show the countdown only after the buoy confirms it
• MonitorShow LoRa traffic and the board's internal messages
• StatusLight LEDs for LoRa receive, LoRa transmit and recent web‑page requests, plus one LED switched from the web page
• UpdateTake new firmware over Wi‑Fi (over‑the‑air updates)

Step 3Build

Libraries & Tools

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

Wi‑Fi Access Point & DNS

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

                  const char* ssid     = "EJA_Onboard_Gateway";
                  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.onboard_gateway.eja";
                

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

                  http://www.onboard_gateway.eja/
                

Home

The previous link displays the web page used for HOME:

Home Screen.

There is a header with the name "EJA Onboard Gateway" 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.onboard_gateway.eja/gps shows the data from the GPS module.

GPS Screen.

Timer

The page http://www.onboard_gateway.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 send the information to the buoy to create a timer.

Updating the timer.

The Onboard Gateway communicates with the Buoy, and once it receives the confirmation that the timer has been properly set, it displays the countdown to the user.

Remaining time.

In the Onboard Gateway, the countdown timer is an estimate of the one that is running in the Buoy. 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. But it will only work if the Onboard Gateway has communication with the Buoy. When the user deletes the timer, it is possible to create a new one and restart the process.

Screen after the timer is deleted.

LoRa

The page http://www.onboard_gateway.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.onboard_gateway.eja/terminal shows internal messages. In the ESP32 that information is stored in the variable:

                  String terminal_messages = "";
                

Terminal Screen.

LED Test

There is an additional page http://www.onboard_gateway.eja/toggle_led_on that can be use to change the state of a LED, the GPIO port used is define in the following variable of the script:

                  #define LED_TOGGLE LED4         // Led use for togle example (toggle from web page)
                

The buttons in the page (ON and OFF) can be used to change the state of the LED.

Screen used to turn ON/OFF the Led, state ON.

Screen used to turn ON/OFF the Led, state OFF.

Step 4Test

LoRa Link Check

The gateway has no GPS, and its countdown depends on the buoy, so two sets of screenshots above also show the LoRa link to the buoy working:

• GPS — the gateway's /gps_data route returns the last LoRa packet it received, so the values on the GPS screen are the buoy's own GPS message, carried over the air. The buoy had no fix at the time: 0 satellites and no latitude or longitude.
• Timer — after Submit, the gateway keeps showing “Updating timer in Buoy...” until the buoy sends back the same end timestamp, and only then starts its own countdown. The “Remaining time” screen (00:00:56 left of a 2‑minute timer) can only appear after that confirmation has arrived.

The screenshots don't record how far apart the two boards were, so the range of the link is not measured here.

Step 5Refine

Future Improvements

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

The electronics were carried forward in 2021: EJA M replaces the Onboard Gateway board, together with Buoy A and Buoy B, with a single PCB.