Home / Projects / ESP8266 Projects / WiFi Servo Controller using WeMos D1 Mini

WiFi Servo Controller using WeMos D1 Mini

In this article, I will guide you to the steps on how to build a WiFi servo controller project using the WeMos D1 Mini ESP8266 breakout board.

Materials

  • WeMos D1 Mini
  • Tower Pro SG90 Micro Servo
  • Connecting wires, power source

The WeMos D1 Mini is one of the smallest breakout boards for the ESP8266. In this project, I will write the code for the WeMos D1 using the Arduino IDE.

All digital pins of the WeMos D1 Mini support PWM so there’s a lot of options in connecting the servo motor. I will presume that you already know how a servo motor works with a microcontroller.

The SG90 servo motor was chosen primarily because of its lower power consumption. I haven’t tried a larger servo motor but I presume using it, with the WeMos D1 on WiFi, will strain the device.

Wiring Diagram

The WeMos D1 Mini connects to the servo motor as shown:

WeMos D1 Mini Servo Controller Wiring

As previously mentioned, all digital pins of the WeMos D1 Mini supports PWM. I chose D4 because it’s the closest one to the power pins.

WiFi Servo Controller App

Most WiFi servo controllers I see use buttons to move the servo motor arm between positions. For this project, I decided to use a rotating wheel to move the servo motor arm.

wemos servo controller app

To achieve this, I need to use JQuery UI to make the wheel rotatable and then AJAX to send the angle of the wheel to be read by the WeMos D1 server. JQuery UI is for desktop web applications so I also needed to add a plugin for the app to work on touch devices. Finally, I also used bootstrap to position the elements on the app.

All in all, these were the needed Javascript libraries:

These are all in the <head> tag of the app.

Here’s the HTML code for the <body> of the app:

The wheel is the background image of the ‘wheel’ <div>. It is tied to a JQuery script and is rotatable thanks to the Rotatable library. Here’s the script:

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

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

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

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:

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:

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’

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

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

The angle from the AJAX POST is read through:

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

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

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:

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.

Check Also

solid state relay tutorial

Solid State Relay Tutorial | WiFi Switch

Relays in electronics are useful for controlling a high-power load using a smaller-power circuit. For …

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.