Servo Controls

Following on from setting up a basic web server with web page functionality. Using the AutoConnet Library created for the esp wifi chip. Here is a modified version of the basic connection script provided previously with added servo controls using .js command from a range slider as well as a set of buttons to set the position of the servo.

Connect the servo signal line to D3 pin, ground to ground pin and power to power pin on your chosen hardware. Then Copy and Paste the script to your Arduino IDE and upload it to your device. Once connected to your local network. Navigate to the webpage by typing the devices I.P in the web browser address bar.

In the webpage you will find a few button’s as well as a range slider to set the servo to different positions

Use of Servos

There are many uses for servos in I.O.T in fact they are one of the main creations of actuation within robotic. There are a lot of different type of servos. Everything from micro sized to servos that can handle large values of wight. Ones that can turn 360 degrees and others restricted to 180 degrees . So chose your servo wisly to fit the project you are trying to achieve. For this project as it is only an example any 5v servo will do but a SG90 is recommended as it will function with both D1 mini or NodeMcu.

#include <Servo.h> // include Servo library
#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>
#include <ESP8266mDNS.h>
#include <AutoConnect.h>
ESP8266WebServer Server;
AutoConnect Portal(Server);
AutoConnectConfig config;

Servo myservo1; // define servos name

const char htmlPage[] PROGMEM = R”=====(
<html> <! –– Below is where you construted the webpage — >
<meta http-equiv=”content-type” content=”text/html;charset=UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<script src=””></script> 
<h1>Servo Controls</h1>

<form id=”myform”>
<button type=”submit” value=”button1″ class=”btn”>Turn 0</button>
<button type=”submit” value=”button2″ class=”btn”>Turn 90</button>
<button type=”submit” value=”button3″ class=”btn”>Turn 180</button>
$(“#myform button”).click(function (ev) {
if ($(this).attr(“value”) == “button1”) {
if ($(this).attr(“value”) == “button2”) {
if ($(this).attr(“value”) == “button3”) {

<div class=”slidecontainer”>
<p>Position: <span id=”servoPos1″></span></p>
<input type=”range” min=”90″ max=”180″ class=”slider” id=”servoSlider1″ onchange=”servo1(this.value)” value=””+valueString+”\”/>

var slider = document.getElementById(“servoSlider1”);
var servoP = document.getElementById(“servoPos1”); servoP.innerHTML = slider.value;
slider.oninput = function() { slider.value = this.value; servoP.innerHTML = this.value; }
$.ajaxSetup({timeout:1000}); function servo1(pos1) {
$.get(“/servo1?value=” + pos1 + “&”); {Connection: close};}


void rootPage() {
Server.send(200, “text/html”, htmlPage);
void setup() {
config.apid = “WebPageDemo”; // Change to suit what you want for the AP Name…
config.psk = “12345678”; // Change to suit what you want as your password or remove num for no password..

myservo1.attach(D3); // Declear which pin the servo is conneted to


Server.on(“/”, rootPage);

Server.on(“/servo1”, []() { //Create on server call to create servo funtionality
String sval = Server.arg(“value”);
int ival = sval.toInt();
Serial.print(“Servo1: “);
Server.send(200, “text/html”, htmlPage);

if (Portal.begin()) {
Serial.println(“HTTP server:” + WiFi.localIP().toString());
MDNS.begin(“WebPageDemo”); // Change to suit what you want as your local address..
MDNS.addService(“http”, “tcp”, 80); // WebPageDemo.Local/ will be active after your first restart on conneted network
void loop() {

Share on facebook
Share on google
Share on twitter
Share on linkedin

Email Away