Control a Servo Motor by smartphone/pc


Description

In this tutorial is shown how to control a Servo Motor by a Smartphone/PC using an Arduino UNO WiFi.

Warning:
Please, it's important to upgrade to the latest ESP firmware, using the Arduino UNO firmware updater tool, before to continue this tutorial.

 

Hardware 

For more details visit our Store.

Circuit

The Servo motor has three wires: Vcc(red), the Signal(white or yellow) and the Ground (black). 
Connect the Vcc(red) to 5V, the Ground (black) to GND and the other one to the pin 3 of the board, you can use three wires to realize the connections, as shown in the below image.

servo circuit
Code

Now connect the board to PC, via USB cable, and upload the code below, using the Arduino IDE (click here to download the sketch):

Warning:
If you are using the Arduino IDE 1.7.x then continue to use the ArduinoWiFi.h library.
Instead if you are using the Arduino IDE 1.8.x then download the UNOWiFiDev.Edition library from Library Manager and modify the code, replacing #include <ArduinoWiFi.h> with #include <UnoWiFiDevEd.h>


/*
Control a servo motor by smartphone/PC
Upload the code and open your borwser on http://<IP>/arduino/webserver/ or http://<hostname>.local/arduino/webserver/
for more information:
http://www.arduino.org/learning/tutorials/boards-tutorials/control-a-servo-motor-by-smartphone-pc

created in November 2016
by sebba[at]arduino[dot]org & a.ferrante[at]arduino[dot]org
*/

/*Import libraries*/
#include <Wire.h>
#include <ArduinoWiFi.h>// if you are using the Arduino IDE 1.8.x then: //#include <UnoWiFiDevEd.h>
#include <Servo.h>

Servo myservo; // create servo object to control a servo
// 6 servo objects can be created on the Uno WiFi
#define SERVOPIN 3

/*SET UP*/
void setup() {
Wifi.begin();
Wifi.println("WebServer Server is up");

myservo.attach(SERVOPIN); // attaches the servo on pin 9 to the servo object
}


/*LOOP*/
void loop() {
while (Wifi.available()) {
process(Wifi);//call process() function
}
delay(50);
}

/*functions*/
/*process()
There are special messages availables that allow you to
control the 328p from the ESP8266:
'arduino/webserver': to create your own personalized web server
'arduino/digital': to control digital pins
'arduino/analog': to control analog pins
'arduino/servo': to control servos
'arduino/custom': to create your personalized command
*/

void process(WifiData client) {
// read the command
String command = client.readStringUntil('/');
if (command == "webserver") {
WebServer(client);// call WebServer() function
}
if (command == "servo") {
servoCommand(client);//call digitalCommand() function
}
}

/*WebServer()*/
void WebServer(WifiData client) {
client.println(F("<html><head><style>"));
client.println(F("input[type=range]{font-size:40px;color:#FFF;width:50%;margin:10% 0 0 25%;background:#666;}"));
client.println(F("p{margin:10% 25% 0 25%;text-align:center;font-size:xx-large;}"));
client.println(F("</style><script>"));
client.println(F("function servoCommand(pin,elm){"));
//Retrive the value from the object that creates the event
client.println(F("var value=document.getElementById(elm.id).value"));
//Send an ajax request to the Uno Wifi
client.println(F("ajax(pin,value,'servo',elm)}"));

client.println(F("function ajax(pin,value,command,srcElement){"));
//Manage the command received for the Uno WiFi
client.println(F("var arduinoURL_array=document.URL.split('/')"));
client.println(F("var arduinoURL=arduinoURL_array[0]+'//'+arduinoURL_array[2]"));
client.println(F("url=arduinoURL+'/arduino/'+command+'/'+pin+'/'+value"));
//Create the HTTP Request
client.println(F("xmlhttp=new XMLHttpRequest()"));
client.println(F("xmlhttp.onreadystatechange=function(){"));
client.println(F("if(xmlhttp.readyState==4 && xmlhttp.status==200)"));
client.println(F("var resp=xmlhttp.responseText"));
//Do not consider undefined responses
client.println(F("if(typeof resp==='undefined')return"));
client.println(F("document.getElementById('label').innerHTML=srcElement.value}"));
//Return a proper message for each command
client.println(F("xmlhttp.open('GET',url,true)"));
client.println(F("xmlhttp.send()"));
client.println(F("}"));

client.println(F("</script></head><body>"));
client.println(F("<p>Select your angle between 0-180</p>"));
client.print(F("<input id='slider' type='range' min='0' max='180' onchange='servoCommand("));
client.print(SERVOPIN);
client.println(F(", this);' value='0'/>"));
client.println(F("<p id='label'></p>"));
client.println(F("</body></html>"));
client.print(DELIMITER); //end communication
client.flush();
}

/*servoCommand() function*/
void servoCommand(WifiData client) {
int pin, value;
// Read pin number
pin = client.parseInt();
// If the next character is a '/' it means we have an URL
// with a value like: "/digital/13/1"
if (client.read() == '/') {
value = client.parseInt();
myservo.write(value);
}

// Send feedback to client
client.println("Status: 200 OK\n");
client.print(F("VAL:"));
client.print(value);
client.print(EOL); //char terminator
}
Warning:

If you want to use an external webserver, for example Apache, then use this other code.


OUTPUT

Move the cursor between 0 ° and 180 ° degrees, for selecting the angle of rotation

servo example

Note: 
If you haven't configured your board then click here.