Electronics Simplified

HTML for Gadgets, lesson 1 of 9

How Your Gadget Talks to Your Phone

beginner4 min readFree lesson

An ESP8266 talking to a phone

Introduction

You've wired an LED and a fan to an ESP32. Now you want to switch them on from your phone, without any app. How? You turn the ESP32 into a tiny website. Your phone's browser opens it, and the buttons on the page switch your gadgets.

That page is written in HTML. You don't need to become a web designer for this. About a dozen tags are enough, and this course teaches exactly those.

Working principle

  1. The ESP32 joins your Wi-Fi and gets an address, like 192.168.1.20.
  2. You type that address into your phone's browser. The browser sends a request: "please give me the page at /".
  3. The ESP32 sends back the HTML page it keeps in its memory.
  4. You tap a button whose link is /led/on. That's a new request. The ESP32 sees /led/on, switches the LED on, and sends the page again.

The "page" is just text. The browser reads the tags in it and draws headings, buttons and readings.

The tags you'll learn

You want to…TagsLesson
Make a page<html>, <head>, <body>2
Make it fit a phone<title>, <meta name="viewport">3
Add on/off buttons<a href="/led/on">4
Show sensor readings<table>, %TEMPERATURE%5
Make it look good<style>6
Add a dimmer<input type="range">7

Then you'll build the whole control panel (lesson 8) and put it on a real ESP32 (lesson 9). Part 2 goes further: forms, live readings that update by themselves, dashboards, charts and a Wi-Fi setup page.

Try it

This is where you're heading. Tap the buttons on the phone, drag the slider, and watch the pretend ESP32 below it. The box "The ESP32 heard" shows each request.

On the phone
ESP32LED OFFFan OFFDHT1127.5°C, 62%
The ESP32 heardNothing yet. Tap a button on the phone.

Make it yours: add a second light, change the colours, or put the readings in a table.

Check what you learnt

  1. In the restaurant analogy, what is the ESP32?

  2. What happens when you tap a button linked to /led/on?

  3. Which language describes the page the ESP32 sends?

Conclusion

  • An ESP32 can be a tiny website that your phone opens in its browser.
  • Each tap on a button is a request; the ESP32 does the job and sends the page back.
  • You only need a handful of HTML tags to build a control panel.

What next?

Your first page: write the page your ESP32 will send.