ESP32 async web server: BME280, slider and relay

/*
 * ESP32 async web server: a page with a BME280's readings, a slider that
 * sets an LED's brightness and a button that switches a relay, served by
 * ESPAsyncWebServer with nothing in loop().
 *
 *   BME280   VIN -> 3V3, GND -> GND, SDA -> GPIO 21 (D21), SCL -> GPIO 22 (D22)
 *   LED      GPIO 26 (D26) -> 220 ohm -> LED -> GND, dimmed with ledcWrite()
 *   Relay    module IN -> GPIO 27 (D27), VCC -> 5 V, GND -> GND
 *            (a 5 V module that switches on a 3.3 V high; COM and NO switch
 *            the 12 V lamp)
 *
 * Libraries: ESPAsyncWebServer and AsyncTCP (ESP32Async), Adafruit BME280.
 *
 * The page is a template: the server fills each %NAME% from processor()
 * as it sends it, so every load shows the newest readings. The slider and
 * the relay button are plain HTML forms, so they work in any browser
 * without JavaScript: /slider?value=128 and /relay?state=on answer by
 * sending the browser back to the page.
 *
 * Press Run, wait for the IP on the Serial Monitor, then open the Web panel.
 * In Mokxi the network is simulated and the Web panel is the only browser;
 * on a real ESP32 any phone on the same WiFi opens http://<the IP>/.
 */
#include <WiFi.h>
#include <AsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include <Wire.h>
#include <Adafruit_Sensor.h>
#include <Adafruit_BME280.h>

const char *SSID = "Mokxi-Lab";
const char *PASSWORD = "breadboard";

const int LED_PIN = 26;
const int RELAY_PIN = 27;

Adafruit_BME280 bme;
AsyncWebServer server(80);

int brightness = 0; // 0 to 255
bool relayOn = false;

const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE html><html><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ESP32 Async Web Server</title>
<style>body{font-family:sans-serif;text-align:center}td{padding:4px 12px}</style>
</head><body>
<h2>ESP32 Async Web Server</h2>
<table align="center">
<tr><td>Temperature</td><td>%TEMPERATURE% &deg;C</td></tr>
<tr><td>Humidity</td><td>%HUMIDITY% %</td></tr>
<tr><td>Pressure</td><td>%PRESSURE% hPa</td></tr>
</table>
<h3>LED brightness: %BRIGHTNESS%</h3>
<form action="/slider">
<input type="range" name="value" min="0" max="255" value="%BRIGHTNESS%">
<input type="submit" value="Set">
</form>
<h3>Relay: %RELAYSTATE%</h3>
<form action="/relay"><button name="state" value="%RELAYNEXT%">Turn %RELAYNEXT%</button></form>
<p><a href="/">Refresh readings</a></p>
</body></html>
)rawliteral";

// Fills each %PLACEHOLDER% of the page.
String processor(const String &var)
{
    if (var == "TEMPERATURE") return String(bme.readTemperature(), 1);
    if (var == "HUMIDITY") return String(bme.readHumidity(), 1);
    if (var == "PRESSURE") return String(bme.readPressure() / 100.0F, 1);
    if (var == "BRIGHTNESS") return String(brightness);
    if (var == "RELAYSTATE") return relayOn ? "on" : "off";
    if (var == "RELAYNEXT") return relayOn ? "off" : "on";
    return String();
}

void setup()
{
    Serial.begin(115200);
    ledcAttach(LED_PIN, 5000, 8); // 5 kHz PWM, 8 bits: duty 0 to 255
    ledcWrite(LED_PIN, brightness);
    pinMode(RELAY_PIN, OUTPUT);
    digitalWrite(RELAY_PIN, LOW);

    if (!bme.begin(0x76)) {
        Serial.println("No BME280 at 0x76: check SDA, SCL and the address");
    }

    WiFi.begin(SSID, PASSWORD);
    Serial.print("Connecting to WiFi");
    while (WiFi.status() != WL_CONNECTED) {
        delay(500);
        Serial.print(".");
    }
    Serial.println();
    Serial.print("Open http://");
    Serial.println(WiFi.localIP());

    server.on("/", HTTP_GET, [](AsyncWebServerRequest *request) {
        request->send(200, "text/html", index_html, processor);
    });

    // /slider?value=0..255 sets the LED's brightness
    server.on("/slider", HTTP_GET, [](AsyncWebServerRequest *request) {
        if (request->hasParam("value")) {
            brightness = constrain(request->getParam("value")->value().toInt(), 0, 255);
            ledcWrite(LED_PIN, brightness);
            Serial.print("LED brightness ");
            Serial.println(brightness);
        }
        request->redirect("/");
    });

    // /relay?state=on or off switches the relay
    server.on("/relay", HTTP_GET, [](AsyncWebServerRequest *request) {
        if (request->hasParam("state")) {
            relayOn = request->getParam("state")->value() == "on";
            digitalWrite(RELAY_PIN, relayOn ? HIGH : LOW);
            Serial.println(relayOn ? "Relay on" : "Relay off");
        }
        request->redirect("/");
    });

    // The readings as JSON, for another program to read
    server.on("/readings", HTTP_GET, [](AsyncWebServerRequest *request) {
        String json = "{\"temperature\":" + String(bme.readTemperature(), 1) +
                      ",\"humidity\":" + String(bme.readHumidity(), 1) +
                      ",\"pressure\":" + String(bme.readPressure() / 100.0F, 1) + "}";
        request->send(200, "application/json", json);
    });

    server.onNotFound([](AsyncWebServerRequest *request) {
        request->send(404, "text/plain", "Not found");
    });

    server.begin();
}

void loop()
{
    // Nothing here: AsyncWebServer answers requests in the background.
}