Code Along - Chapter 23

ESP32: A Web Page as Text

Build a web page as a String with page +=, then turn a slider value into a brightness.

Estimated time 10-15 minExercises passed 0 / 2

ESP32 code on the virtual board

The virtual board is an Uno, not an ESP32, so there is no Wi-Fi here. You practise the code around it. A pot reading is a pretend number in a variable, like int reading = 2048;. The LED on GPIO 2 works the same; the test list calls it pin D2.

Exercise 23.1

Build a web page as text

Not started

A web server sends its page as one long String. page += adds text to the end. Add <p>LED is ON</p> when ledOn is true, or <p>LED is OFF</p> when it is false.

Sample output

<h1>ESP32 lamp</h1><p>LED is ON</p>

bool ledOn = true;   // pretend the LED is on

void setup() {
  Serial.begin(115200);
  String page = "<h1>ESP32 lamp</h1>";
  if (ledOn) {
    // add <p>LED is ON</p> to the page
  } else {
    // add <p>LED is OFF</p> to the page
  }
  Serial.println(page);
}

void loop() {
}

Turn on JavaScript to edit, run and test this code in the browser.

Exercise 23.2

A slider value from the browser

DeeperNot started

A web page slider sends its value as text, like "300". Turn it into a number with value.toInt(), keep it between 0 and 255 with constrain(), then print it.

Sample output

String value = "300";   // pretend the slider sent this text

void setup() {
  Serial.begin(115200);
  // Make brightness from value, keep it 0 to 255, then print it

}

void loop() {
}

Turn on JavaScript to edit, run and test this code in the browser.