11. Switching something bigger

Unit B · What your device can sense

Switching something bigger

What we are making: a page with one button that switches a relay on and off, and remembers which way round it is.

The device now has a memory

Last session's page had two links because the board did not know what state it was in. Today there is one button, and it flips whatever the current state happens to be — which means the board has to remember.

That is what bool isOn is for. One variable, kept between requests, holding the truth about the machine. Every device you use has some version of this, and getting it wrong is why a light switch app sometimes shows the wrong state.

New words

boolA variable that is either true or false.

!‘Not’. isOn = !isOn flips it.

RedirectSending the browser somewhere else after it presses something.

StateWhat the machine currently is, as opposed to what just happened.

The relay. The coil wants 5 volts; the signal pin is happy at 3.3.

Session 11 — one button, and a machine that remembers — 4 slots

SLOT 2

the pin, the memory, and the one function

int relayPin = 26;
bool isOn = false; // the machine's memory

void handleToggle() {
isOn = !isOn; // flip it
digitalWrite(relayPin, isOn);
server.sendHeader("Location", "/");
server.send(303);
}

SLOT 4

say which way round it is, and offer to change it

String state = isOn ? "ON" : "OFF";
return "<h1>The lamp is " + state + "</h1>"
"<p><a href='/toggle'>Press to change it</a></p>";

SLOT 5

the pin is an output

pinMode(relayPin, OUTPUT);

SLOT 6

one new address

server.on("/toggle", handleToggle);

Do it

Wire the relay. VCC to VIN, IN to GPIO 26.
Fill slots 2, 4, 5 and 6.
Upload. Press the link and listen for the click.
Open the page on a second phone at the same time. Press on one. Refresh the other.

The interesting problem

That last step is worth two minutes of discussion. The second phone shows the old state until it refreshes, because a web page is a photograph, not a window — it shows how things were at the moment it loaded.

Everything in Unit C exists to deal with this.

⚠ Careful

Low-voltage loads only. Nothing from a wall socket, in this session or your project. The module is rated for mains and that rating is real, but a classroom breadboard with thirty pairs of hands around it is not the place to use it. Battery-powered devices only. No exceptions.

What you see	Why	What to do
No click	No power to the module, or the wrong pin.	VCC on VIN, IN on GPIO 26, GND shared.
It clicks twice per press	The browser requested the address twice.	Use the redirect shown, not a plain page reply.
The page always says OFF	`isOn` is being reset.	Declare it outside every function, not inside one.
Board resets on the click	The relay coil is drawing too much.	Power the module from a separate battery, sharing GND.

What you learned

A device holds state — what it currently is.
A web page shows the past. It does not update itself.
A small signal can switch a large circuit, safely, if they stay separate.

Challenge optional — only if you finish early

Make the relay switch itself off after thirty seconds, whatever the page says.

10. Making something move, from a browser