10. Making something move, from a browser

Unit B · What your device can sense

Making something move, from a browser

What we are making: two links on a web page that physically move a servo. The first time your page does something instead of just saying something.

A page with more than one address

Until now your board has answered one address: /, the front page. Today it answers three. /open and /shut are addresses too, and when the browser asks for one, the board moves the servo before it replies.

That is the whole mechanism behind every button on every web page you have ever pressed. There is nothing else to it.

New words

RouteAn address the server knows how to answer.

server.on()Telling the server which function handles which address.

LinkText a browser can press. The simplest possible button.

The servo takes its power from VIN but its instructions at 3.3 volts. That combination is fine.

Session 10 — a page that moves something — 5 slots

SLOT 1

the servo library — the ESP32 one, not the plain one

#include <ESP32Servo.h>

SLOT 2

the servo, and a function for each address

Servo arm;

void handleOpen() {
arm.write(180);
server.sendHeader("Location", "/");
server.send(303);
}

void handleShut() {
arm.write(0);
server.sendHeader("Location", "/");
server.send(303);
}

SLOT 4

two links on the page

return "<h1>The gate</h1>"
"<p><a href='/open'>OPEN</a></p>"
"<p><a href='/shut'>SHUT</a></p>";

SLOT 5

the signal wire is GPIO 13

arm.attach(13);

SLOT 6

tell the server about the two new addresses

server.on("/open", handleOpen);
server.on("/shut", handleShut);

Do it

Install the ESP32Servo library — the plain Servo library will not work here.
Wire the servo: power from VIN, signal to GPIO 13.
Fill slots 1, 2, 4, 5 and 6. Five slots is the most this year ever asks for.
Upload, open the page on your phone, and press OPEN.
Hand the phone to somebody across the room and let them try it.

💡 Tip

Power the servo from VIN, not 3.3V. On 3.3 volts it will twitch, buzz, and pull the board's voltage down until the ESP32 resets — which looks exactly like a software crash and will waste your whole session. The signal wire is fine at 3.3.

Change it

Add a third link and a third angle, halfway.
Make the front page say which position it is currently in.
Change write(180) to a smaller angle and find your servo's real limit.

What you see	Why	What to do
The board restarts when the servo moves	Servo powered from 3.3V.	Move the red wire to VIN. This is nearly always it.
Servo does nothing, page works	Wrong library or wrong pin.	ESP32Servo, and check the orange wire is on GPIO 13.
Page shows ‘Not found’	A `server.on` line is missing.	Every address needs its own line in setup().
It moves once and never again	The browser cached the page.	Press refresh properly, or use the back link rather than the back button.

What you learned

A web page can cause something physical to happen.
Different addresses run different functions. That is all a button is.
Motors and logic want different power. Mixing them up resets boards.

Challenge optional — only if you finish early

Make the servo move to an angle typed into the page rather than a fixed one.

9. How loud is it in here?