Microbot32_WebControl

An arduino library to generate a modular browser based UI that can be hosted on an ESP32 based robot to interface with a robot through a browser. Developed by Team 3932: Dirty Mechanics members.

Features

• Log console widgets
• Numerical input widgets
• Gamepad input map widget
• Customizable button widgets
• Tank drive control using WASD or arrow keys
• Display widgets that work with numbers and text

Installation

1. Install the ESP32 boards and the ESP32 file system manager in the Arduino IDE. See here for instructions on installing the board in the Arduino IDE, and see here for instructions on how to install the file system uploader in the Arduino IDE.
2. Install the library dependencies to your IDE: ESPAsyncWebServer, AsyncTCP, ArduinoJson
3. Clone this repository.
4. Open the driverStation.ino file in the Arduino IDE. This will allow your Arduino IDE to be positioned at the correct file location locally.
5. Using the wifiSecrets_EXAMPLE.h file as refference Change the ssid and password to the name of your WiFi network so that the program can connect to your WiFi upon startup. Alternatively you can remove the line #include "wifiSecrets.h" and directly set your ssid and password in your ino sketch.
6. Upload the data folder to the ESP32 filesystem. To do this, choose the Tools > ESP32 Sketch Data Upload option in the Arduino menu bar. Wait for this process to complete. You should see a message similar to Leaving... or Hard reseting... when the process is done.
7. Upload the current file to the ESP32 through the Arduino IDE by using the Upload button (commonly styled as a right arrow) in the Arduino menu. Make sure the board is set to ESP32 Dev Module in your board settings. Again, you should see a message similar to Leaving... or Hard reseting... when the process is done.
8. If you have bonjour or Avahi mDNS installed on your computer you can open robot.local in your browser. If the domain does not work on a windows device install Bonjour Browser. If this does not work, open up your serial monitor when the program is finished uploading. The robots assigned local IP will be printed. Enter this IP address into your web browser.

UI Usage

Using the Gamepad

• When the dashboard is enabled the gamepad widget is hidden until a valid controller input and button press is detected

Using Keyboard Input Mode

• Selecting either WASD or Arrow Keys input mode in settings will substitute for the gamePad widget using tank drive
• You can press these buttons with a mouse or use your keyboards actual buttons
• To use the keyboard buttons simply click anywhere on this widget. Clicking anywhere off will stop the listening for keyboard button presses

Locking the Widget Configuration

• When you use the dashboard for the first time the widgets will be placed in rows. You can resize the length of buttons displays and inputs, the height of the gamepad map, and the size of consoles using the resizers in the four corners of all widgets.
• You can move all widgets draging them by their top banner.
• Using the lock in the top right will ensure every time you use the dashboard your widgets will stay the same.
• You can unlock the configuration make modifications and lock them again at any time.

Clearing and Downloading Console Logs

• You can use the download button to save the console logs as a .txt file
• The clear button will clear the console field and its save file.

Settings

Widget Settings

Configuration

• The widget configuration stores data for both position and size of widgets
• After creating a widget setup you can download your configuration to migrate to another computer or share with others
• You can upload position configurations here
• You can also reset your widget position configuration to default here

Dragging

• Turning on Grid will snap widgets to a grid with the resolution specified by the slider from 1 to 40 pixels
• Turning on Snap To Edges will cause widgets to snap to nearby widgets sides and corners

Controller Input Settings

• GamePad mode allows for reading controller buttons and joysticks to control your robot
• WASD and Arrow Key modes emulate gamepad joystick axes #1 and #3 for left and right respectively as a tank drive configuration
• By default WASD and Arrow Key joystick emulation uses a value of -100 for joystick up and 100 for joystick down
• Invert Y axis mode will invert all joystick Y axes

Library Usage

Setup

Class Functions

Setup Functions

//DriverStationDashboard class that creates a driver station with the specified widgets
DriverStationDashboard::DriverStationDashboard(int btnCount, int inpCount, int dispCount, int consCount,
    DashButton *dashButtons, DashInput *dashInputs, DashDisplay *dashDisplays, DashConsole *dashConsoles)

//Initialize the driver station webpage on your local network
void DriverStationDashboard::initialize(char *ssid, char *password)

Static Functions

//Returns true if the driver station is enabled
bool DriverStationDashboard::enabled(void)

Widget Structures

struct DashButton { String btnName, bool momentaryType, bool defaultState, String onText, String offText, bool currentState };

struct DashInput { String inpName, double inpData };

struct DashDisplay { String dispName, char dispData[20] };

struct DashGamePad { bool gpButtons[16], int gpAxes[4] };

struct DashConsole { String consName, char consBuffer[1000], int bufferStart, int bufferEnd };

Virtual Input Functions

//Get the value of a specified input widget
double DriverStationDashboard::dashInput(int inpNum)

Virtual Button Functions

//Get the state of a specified dash button widget 
bool DriverStationDashboard::dashButton(int btnNum)

Gamepad Controller Functions

//Get the value of a specified game pad button
bool DriverStationDashboard::gamePadButton(int btnNum)

//Get the value of a specified game pad axes 
int DriverStationDashboard::gamePadAxes(int axesNum)

Virtual Display Functions

//Update a specified dash board display widget with text
void DriverStationDashboard::setDashDisplay(int dispNum, String dataToDisplay)

//Update a specified dash board display widget with a double
void DriverStationDashboard::setDashDisplay(int dispNum, double dataToDisplay)

//Update a specified dash board display widget with an int
void DriverStationDashboard::setDashDisplay(int dispNum, int dataToDisplay)

Virtual Console Functions

//Send data to a dash board console with a string
void DriverStationDashboard::sendToConsole(int consNum, String dataToDisplay)

//Send data to a dash board console with a double
void DriverStationDashboard::sendToConsole(int consNum, double dataToDisplay)

//Send data to a dash board console with an int
void DriverStationDashboard::sendToConsole(int consNum, int dataToDisplay)

Contributing

Contributions are welcome. Please open an issue or make a pull request as needed.