Wirelessly Debugging an espMouse

Wireless debugging is an immensely useful tool for troubleshooting. Without it, your chances of success are slim. Although these modifications to your code may look daunting and time consuming, they will almost certainly save you time in the long run.

To add wireless debugging to your espMouse, you must first add the following libraries somewhere toward the top of your program (to the file that ends with a .ino).
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>

Below your include statements add these lines to define the SSID and Password. Change the SSID and password so they match what you used when you created your web app to remotely control your robot.
const char *ssid = "ESPapBackus";
const char *password = "abcd1234";

Somewhere in your variables section add
String debugMessage = "";

Directly before void setup() add
ESP8266WebServer server(80);

Insert these as the first lines within void setup()
  delay(1000);
  WiFi.softAP(ssid, password);
  server.on("/", handleRoot);
  server.on("/debug.html", handleDebug);
  server.begin();

Within the while loop for your button add the following below your yield(); command
server.handleClient();

In order to send information to the device you plan to use to wirelessly debug your espMouse, you'll need to add the server.handleClient(); command to any loops you create within the void setup(); function or after any 

The pages that will be served by your espMouse to relay debugging information are defined using the following functions. Add them at the very end of your program.
void handleDebug()
{
  server.send(200, "text/html", debugMessage);
  debugMessage = "";
}

void handleRoot()
{
  String message = "<!DOCTYPE html>\n"
                   "<html>\n"
                   "<head>\n"
                   "<script>\n"
                   "var refreshIntervalId = '';\n"
                   "\n"
                   "function loadXMLDoc()\n"
                   "{\n"
                   " xmlhttp=new XMLHttpRequest();\n"
                   " var msg = 'http://192.168.4.1/debug.html';\n"
                   " xmlhttp.open('GET',msg,true);\n"
                   "\n"
                   " xmlhttp.onreadystatechange=function()\n"
                   " {\n"
                   "   if (xmlhttp.readyState==4 /*&& xmlhttp.status==200*/)\n"
                   "   {\n"
                   "     var textarea = document.getElementById('response');\n"
                   "     textarea.innerHTML += xmlhttp.responseText;\n"
                   "     textarea.scrollTop = textarea.scrollHeight;\n"
                   "     loadXMLDoc();\n"
                   "   }\n"
                   " }\n"
                   "\n"
                   " xmlhttp.send();\n"
                   "}\n"
                   "\n"
                   "function start()\n"
                   "{\n"
                   " loadXMLDoc();\n"
                   "}\n"
                   "\n"
                   "function stop()\n"
                   "{\n"
                   " window.location.reload();\n"
                   "}\n"
                   "</script>\n"
                   "\n"
                   "<style>\n"
                   "button {\n"
                   "    width: 49%;\n"
                   "    font-size: 48px;\n"
                   "}\n"
                   "html {\n"
                   " height: 100%;\n"
                   "}\n"
                   "body {\n"
                   " font-size: 48px;\n"
                   " padding:16px;\n"
                   " height: 100%;\n"
                   "}\n"
                   "textarea {\n"
                   " box-sizing: border-box;         /* For IE and modern versions of Chrome */\n"
                   " -moz-box-sizing: border-box;    /* For Firefox                          */\n"
                   " -webkit-box-sizing: border-box; /* For Safari                           */\n"
                   "\n"
                   " margin-top: 8px;\n"
                   " width: 100%;\n"
                   " height: calc(100% - 130px);\n"
                   " font-family: Monaco,monospace;\n"
                   " font-size: x-large;\n"
                   "}\n"
                   "</style>\n"
                   "\n"
                   "</head>\n"
                   "<body>\n"
                   "<button type='button' onclick='start();'>Start</button>\n"
                   "<button type='button' style='float: right;' onclick='stop();'>Stop</button>\n"
                   "<br/>\n"
                   "<textarea id='response'></textarea>\n"
                   "</body>\n"
                   "</html>\n";
  server.send(200, "text/html", message);
}

The espMouseMaze.h library uses the same debugMessage variable to relay information wirelessly from the print(); function. Change it by adding estern to the beginning of the variable's declaration.
extern String debugMessage;

Now you are ready to test whether all of the changes you have made work. Add the following lines below the button while loop within the void setup().
  debugMessage = "Hello World";
  server.handleClient();

When you connect to your robot's WiFi signal and navigate to 192.168.4.1, the words "Hello World" should appear.

You can debug your robot simply by passing whatever information you want to the debugMessage variable. For example, to see the values calculated during calibration, add the following to the bottom of your void calibrate() function.
  debugMessage += "Side Target: ";
  debugMessage += targetSide;
  debugMessage += "\n";
  debugMessage += "Side Threshold: ";
  debugMessage += thresholdSide;
  debugMessage += "\n";
  debugMessage += "Front Target: ";
  debugMessage += targetFront;
  debugMessage += "\n";
  debugMessage += "Front Threshold: ";
  debugMessage += thresholdFront;
  debugMessage += "\n";

The \n is a new line character.
Comments