Introduction: Wi-Servo: Wi-fi Browser Controlled Servomotors (with Arduino + ESP8266)
This instructable shows how to control some servomotors remotely in a wi-fi network, using an ordinary internet browser (Firefox, for instance). This might be used in several applications: toys, robots, drones, camera pan/tilt, etc.
The motors were attached to an Arduino Uno, which connects the wi-fi network through a ESP-8266 module. The control interface was designed with HTML and jQuery.
Miguel's tutorial (http://allaboutee.com/2015/01/02/esp8266-arduino-led-control-from-webpage/), which shows how to turn LEDs on/off using ESP-8266, served as inspiration for this post.
The technique shown here is used in one of my projects: "Robô da Alegria":
https://www.instructables.com/id/Joy-Robot-Rob%C3%B4-Da-Alegria-Open-Source-3D-Printed-A/
You might found more about this in one of the following links:
https://hackaday.io/project/12873-rob-da-alegria-joy-robot
Step 1: Electronics
For this project you'll need the following components:
- Arduino Uno (buy)
- ESP8266 (buy)
- Protoshield (for a more compact version) or an ordinary breadboard (buy)
- 10 kohm resistor (x3)
- Some jumper wires
- SG90 servomotor (x2) (buy)
- A computer (for compiling and uploading Arduino code)
You won't need specific tools for the assembly of this project. All the components can be found online on your favourite e-commerce store. The circuit is powered by the USB port (connected to a computer or a ordinary phone charger), but you may also add an external DC power supply or a battery connected to the Arduino power jack.
Step 2: Assembly
Connect all componets according to the schematic. You'll need some jumper wires to connect the ESP-8266 module and the servomotors. You might use a protoshield (for a more compact circuit), an ordinary breadboard, or design you own Arduino shield.
Plug the USB cable to the Arduino Uno board and proceed to the next step.
Step 3: Arduino Code
Install the latest Arduino IDE. In this project servo.h library was used for the control of the servos. In order to avoid conflict between the wi-fi module and computer's USB port during the upload of the code, softserial library was used. No additional library was needed for communication with ESP-8266 module. Please check the baudrate of you ESP8266 and set it properly in the code.
Some servomotors start to jitter and make strange noises when its position is close to the limits (0 and 180 degrees). To avoid that, the angle was limited between 10 and 170 degrees both in the Arduino code and in the control interface (later).
Unfortunatelly, servo.h library and softserial.h library use the same timer of the microcontroller. This might cause jitter in the servos whenever the Arduino communicates with the ESP-8266. To avoid that, the servos are detached from the Arduino after each command. You might also connect the module to the standard serial pins. In this case, remember to disconnect the module before each upload.
Download Arduino code (wi-servo.ino) and replace the XXXXX by your wifi router SSID and YYYYY by router password. Connect the Arduino board to your computer USB port and upload the code.
Attachments
Step 4: Interface
A html interface was designed for the control of the servomotors. In this example, two servos were used, but more can be added to the Arduino Uno (I tested up to four motors).
A textbox form is used to enter IP address of the ESP module.
Download Wi-servo.html and jquere.js files and save both in the same folder.
Attachments
Step 5: Usage
When the Arduino is restarted, it will try to connect your wi-fi network automatically. Use the Serial Monitor to check if the connection was successfull, and to obtain which IP was assigned to your ESP-8266 by your router.
Open the html file in an internet browser (Firefox).
Inform the IP address of your ESP-8266 in the textbox and you'll be ready to go. Select the angle desired for each servo using the sliders. The browser will automatically send a request to the Arduino when you release mouse button, and move each servo.

Participated in the
Maker Olympics Contest 2016
62 Comments
Question 5 months ago
Are there any restrictions on the wi-fi name and password, because my wifi module isn't connecting to the wi-fi?
4 years ago
So, I uploaded the code. But as it was uploading I got this in response:
C:\Users\270050884\Downloads\wiservo\wiservo.ino: In function 'void setup()':
C:\Users\270050884\Downloads\wiservo\wiservo.ino:47:27: warning: ISO C++ forbids converting a string constant to 'char*' [-Wwrite-strings]
while(!esp8266.find("OK")) { //wait for connection
^
C:\Users\270050884\Downloads\wiservo\wiservo.ino: In function 'void loop()':
C:\Users\270050884\Downloads\wiservo\wiservo.ino:61:29: warning: ISO C++ forbids converting a string constant to 'char*' [-Wwrite-strings]
if (esp8266.find("+IPD,")) //if there is a new command
^
C:\Users\270050884\Downloads\wiservo\wiservo.ino:64:23: warning: ISO C++ forbids converting a string constant to 'char*' [-Wwrite-strings]
esp8266.find("?"); //run cursor until command is found
^
Any way to fix this?
Reply 4 years ago
Hi there. Which version of the Arduino IDE are you using?
I've just tested the code again using Arduino IDE 1.8.8 (on Windows) and it compiled without warnings.
5 years ago
Hello, I have arduino D1 with integrated ESP8266 module. I was upload the code but if I scan the serial port the module do not connect on my wi-fi :/ I do not know where is problem. Can you help me please?
Reply 5 years ago
at first write:
ets Jan 8 2013,rst cause:4, boot mode:(1,6)
wdt reset
than I push the reset button on board (wemos D1) and write:
a lot of symbols (bla bla bla) bB׆P…ÕÊÉ¥SNÊÉ¥SNÂI�ë"B„o„Ak�bB׆P…ÕÊÉ¥SNÊÉ¥SNÂI�ë"B„o„Ak�ÁåCüÆü€÷ÁåCüÆü€÷bB׆P…ÕÊÉ¥S
and then always this:
ets Jan 8 2013,rst cause:4, boot mode:(3,6)
wdt reset
load 0x4010f000, len 1384, room 16
tail 8
chksum 0x2dI
csum 0x2d
v40106f00
~ld
I tried change the baud rates from 9600 to 115200 by esp8266 begin but I can not connect to wi-fi :/ . If I change on serial monitor window (down) the baud rate on screen have I only symbols if I set the 115200 i can see only that what I post here. Can you please help me with this problem? thank you.
Reply 5 years ago
I don't think the code I designed will work with your setup. In my case, the code runs on the Arduino. The Arduino sends and receives commands to the ESP8266 using and ordinary serial communication, using standard ESP8266 commands (AT commands). Notice that I don't change the configuration of the ESP8266 module (and that I have two separate pieces of hardware).
In your case, I think the code should be different (but I don't know how), because it will run on the ESP microcontroller itself.
You're receiving some erros because the hardware was unable to work properly, then resets itself every now and then.
Sorry I couldn't help. :/
5 years ago
how can I control four servos simultaneously in four different rooms in my house? The servos will be arranged to open and close the window shutters. I will have the servos and the mechanical linkages, I need help with the wi-fi control. I am handicapped now and I need a way to open and close the shutters without having to go from room to room. Thank you.
Reply 5 years ago
Hi there.
If you want to use the method described in this tutorial, I think you'll have to use four Arduinos (otherwise you'll need cables between each servo and you microcontroller). To actuate them simultaneosly, you'd chenge the control interface (html + jquery), so that it sends the same command to four different IP addresses at the same time.
There are easier ways (using less hardware). You'd use a standalone ESP8266 (without the Arduino) to reduce the number of devices, for instance.
Reply 5 years ago
I am not exactly electronically gifted. Can you help me with the ESP8266 device? I don't understand how everything fits together...or how the servos would be controlled??
Reply 5 years ago
Hi there.
The servos are controlled by the Arduino Uno. It sets the angle for each servo, and communicates with the ESP8266, which works as a "wi-fi modem". The ESP8266 connects to the wi-fi network and receives commands from the browser. For each command, it sends a message to the Arduino, that controlls the servo motors.
I hope it helps!
5 years ago
TNX !
Reply 5 years ago
You're welcome! :D
5 years ago
Hi Igor,
So you need the same connection to use this? And it doesn't work if using different connection? for example, I'm at coffee shop using their wifi trying to connect to the esp8266 at home using different wifi.
Reply 5 years ago
Hi there,
This only works if the computer (or smartphone) and the Arduino are connected to the same wi-fi network. It would be better if it was possible to send commands from outside networks, but for now it only works locally... :/
5 years ago
Hi Igor,
What a great tutorial. I've been made it. Thank You.
Now I have a little experiment. I am trying to make the interface using android (app inventor).But how about the arduino code? I need an examples the arduino code. can you help me, please!
Reply 5 years ago
Hi Frankie!
I'm glad you liked it and made it!
I haven't used Android App Invertor yet. But you can make your interface on the html file itself. This way it will be multiplatfom.
Copy the html file and javascript file into your Android device. The navigate do the file (using Astro file manager for instance) and open the html file on your smartphone browser (Chrome or Firefox).
5 years ago
Hello Igor!
First of all, great tutorial!
I have used the esp8266 for some time now together with other processors like the attiny85 to make use of e.g. the ADC. As my projects evolve I am starting to look more into the development of the web servers UI to make my projects more user friendly. Sooo about that .js file, did you use some kind of program to make the code? It is so intense and vast! If you use some kind of help program, what is it? And if you indeed wrote it, hats off!!!
Best regards, Kristian from Sweden
Reply 5 years ago
Thanks, Kristian. I'm glad you liked the tutorial.
Regarding the jquery.js file, it's a library which, among other things, handles events in a HTML document. I've just downloaded the jquery library and used it.
The scripts I wrote are inside the .html file itself (mouseUpSr1 function for instance), and I used Notepad++ for making the code.
You can find more about jquery on the following website:
https://jquery.com/
I hope it helps! :D
6 years ago
I need urgent need on this. I am getting the output as follows:
I have tried both the baud rates of 9600 & 115200.
Please help.
Best Regards
Reply 6 years ago
This probably means your baudrate still isn't right.
Notice that there are two baudrates: one between the PC and the Arduino, and other between the Arduino and the ESP8266.
You can choose the first one (between PC and Arduino) and set it both on your code (Serial.begin(9600), for instance) and on the Serial monitor.
You will have to discover the baudrate of the ESP8266 by trial and error and configure on your code (esp8266.begin(9600), for instance). Those are the possible values (300, 600, 1200, 2400, 4800, 9600, 14400, 19200, 28800, 38400, 57600, or 115200).