WiFi Servo Controller using WeMos D1 Mini

$(document).ready(function(){
            $('#wheel').draggable({handle: '.ui-rotatable-handle'}).rotatable({
               rotate: function(e, ui){
               var degrees = ui.angle.current * 180/Math.PI;
               if ( degrees > 90 ) {    
                  ui.angle.current = Math.PI/2;    
               } else if ( degrees < -90) {        
                  ui.angle.current = -1*Math.PI/2;  
               }
               degrees = degrees + 90;
               console.log(degrees);
               var s = String(degrees);
            $.ajax({
               type: 'POST',
               url: 'dataHandler',
               data: s,
               contentType: 'application/x-www-form-urlencoded'
            });
           },snap: true   //for the wheel to snap at discrete angles
          });
});;

Every time the wheel rotates, the angle in radians is returned. Degrees is easier to imagine so I converted it:

$('#wheel').draggable({handle: '.ui-rotatable-handle'}).rotatable({
               rotate: function(e, ui){
               var degrees = ui.angle.current * 180/Math.PI;
               ...

Since servo motors rotate from 0 to 180 degrees, I also needed to limit the rotation of the wheel.

  if ( degrees > 90 ) {    
      ui.angle.current = Math.PI/2;    
  } else if ( degrees < -90) {        
      ui.angle.current = -1*Math.PI/2;  
  }
  ...

Then I passed the angle to the server, converting it to 0 to 180 degrees to match that of the Arduino library.

    ...
    degrees = degrees + 90;
    console.log(degrees);    //for debugging on the browser
    var s = String(degrees);
    $.ajax({
         type: 'POST',
         url: 'dataHandler',
         data: s,
         contentType: 'application/x-www-form-urlencoded'
    });

Arduino Code/Sketch

Besides the main Arduino sketch, the project includes the headers “mainpage.h” and “jscript.h”. Both header files contain PROGMEM constants containing the HTML and Javascript for the app. I believe it’s easier to debug if they are separated from the main Arduino code.

As for the Arduino sketch, I used the same code snippets for establishing a WiFi server. The relevant parts are:

//Home page. Contents of 'page' is in mainpage.h
server.on("/", []() {
  server.send(200, "text/html", page);
});
//JavaScript! Contents of 'javascript' is in jscript.h
server.on("/jscript.js", []() {
  server.send(200, "text/javascript", javascript);
});
//POST data handler
server.on("/dataHandler",HTTP_POST,dataHandler);
//start web server
server.begin();
//Just stating things
Serial.println("HTTP server started");
}

When a client visits the home page (the IP address of the WeMos D1), the client sees the contents of the ‘page’ constant which is the HTML of the app. The ‘page’ constant is inside ‘mainpage.h’.

In the HTML, a line calls jscript.js:

<script type='text/javascript' src='jscript.js'></script>

Since jscript.js is a file inside the server, it must pass the client to the relevant file. This is done by passing the contents of the constant ‘javascript’ which is inside ‘jscript.h’

//JavaScript! Contents of 'javascript' is in jscript.h
server.on("/jscript.js", []() {
  server.send(200, "text/javascript", javascript);
});

Finally, since the AJAX call inside the script was a POST request, the server must also handle it:

//POST data handler
server.on("/dataHandler",HTTP_POST,dataHandler);

dataHandler is a function for handling the data from the POST request:

void dataHandler(){
  String angle = server.arg("plain");
  Serial.print("Received: ");
  Serial.println(angle);
  server.sendHeader("Location","/");
  server.send(303);
  int pos = angle.toInt();
  myservo.write(pos);
  delay(15);
}

The angle from the AJAX POST is read through:

String angle = server.arg("plain");

For debugging, I printed the received angle to the serial monitor:

Serial.print("Received: ");
Serial.println(angle);

According to protocol, servers must respond to the client after a POST request, thus:

server.sendHeader("Location","/");
server.send(303);

This is simply sending back the client to the home page with status 303.

The received angle is a string, so it’s converted to int and then used to rotate the servo motor:

int pos = angle.toInt();
myservo.write(pos);
delay(15);

The full code can be downloaded in my repository.

Output Video

Once the code is uploaded to the WeMos D1 Mini, the serial monitor will give its IP address. The app is viewable through that IP address using a web browser.

Honestly, I was expecting an almost real-time reaction by the servo motor but it can’t be helped; the ESP8266 has processing limitations as a web server. Using a small delay between turns seems to overwhelm the ESP8266. I presume the ESP32 will have a much better reaction time.

Edit: Surprisingly, using the app on a desktop computer results in a much faster reaction time. So maybe the phone is having trouble connecting through WiFi.

Nevertheless, I hope someone found this WiFi servo controller project useful. For questions, or suggestions, kindly drop a comment below.