Byg en Lomme-Størrelse Webserver med Mongoose.WS og TTGO T-Display

Introduktion

I dag kombinerer vi to kraftfulde værktøjer: det ultralette embedded webserver-bibliotek Mongoose.WS og det kompakte LILIGO TTGO T-Display-board. Resultatet? En lille, selvstændig HTTPS-server, der passer i din hånd.

Hvad er Mongoose.WS?

Mongoose.WS er en enkelt C-kildefil plus et header-fil, med en flash-størrelse på ca. 55 kB (≈80 kB med TLS). Trods dens lille størrelse tilbyder den:

• Protokoller: HTTPS, WebSocket, MQTT, TCP/UDP

• Sikkerhed: TLS 1.3 understøttet direkte

• Model: Event-drevet, non-blocking — håndterer mange forbindelser på ressourcebegrænsede enheder

• Portabilitet: Kører på tværs af platforme (Linux, Windows, bare-metal MCU’er), så længe du kan kompilere C/C++

• Licens: Dual GPLv2 eller kommerciel — bekræft kompatibilitet med dit brugsscenarie

• Omfang: Kun netværk — du skal selv tilføje RTOS, filsystem eller anden platformspecifik funktionalitet

Organisationer som Bosch, Siemens, NASA og ISS bruger det til “bulletproof” ydeevne og langsigtet vedligeholdelse.

Mød TTGO T-Display

LILIGO TTGO T-Display er bygget omkring en ESP32 Xtensa dual-core LX6 MCU med indbygget Wi-Fi og Bluetooth — perfekt til at hoste Mongoose:

• Formfaktor: Kompakt, batteridrevet, bærbar

• Forbindelse: Wi-Fi til websider; Bluetooth valgfrit

• Strøm: Kan køre alene efter flashing; PC kun nødvendig under udvikling

Denne kombination giver dig en sikker IoT-node eller en edge-server, du kan have i lommen.

Liste over nødvendige komponenter:

TTGO T-Display ESP32 16MB med WiFi, Bluetooth og 1.1" farve LCD skærm

Detaljeret Opsætning

1. Forudsætninger ESP-IDF Installation

Gå til Espressif’s hjemmeside og følg opsætningsguiden til din platform.
Typisk:

• Klon esp-idf repo

• Sæt miljøvariable

• Installer Python-pakker og toolchain

Verificér med:

idf.py --version

ESP32 Board & Drivere
Installer USB-drivere, så din PC kan genkende boardet.
Bekræft COM-port (Windows) eller /dev/ttyUSB* (Linux/macOS).

2. Opret et Nyt ESP-IDF Projekt

Start et tomt projekt via Mongoose Wizard

• Gå til Mongoose.WS hjemmesiden og klik “Start building our own web UI”

• Vælg nyt C-projekt, målplatform: ESP32

• Vælg/udpeg “wizard folder” til byggefiler

• Wizard genererer startopsætning af UI (sider og endpoints)

3. Definér Web UI-sider

Fra transcript oprettes:

• Dashboard:

  • Enhedsnavn (redigerbart)

  • RAM brugt / total RAM

• Settings:

  • Redigér enhedsnavn

• Firmware Update:

  • Upload OTA-firmware (.bin)

I UI’en:

• Træk Container ind

• Tilføj Stats Row med:

  • device_name

  • ram_used

  • ram_total

• I Settings: input til device_name (string, default "MyDevice")

• I Firmware Update: aktiver OTA

Wizard genererer glue-fil (fx mongoose.glue)

4. Implementér Callbacks i C (main.c)

Redigér main/main.c:

// SPDX-FileCopyrightText: 2024 Cesanta Software Limited
// SPDX-License-Identifier: GPL-2.0-only or commercial
// Generated by Mongoose Wizard, https://mongoose.ws/wizard/

#include "mongoose_glue.h"
#include "esp_spiffs.h"

#include "driver/gpio.h"
#include "nvs_flash.h"

#define WIFI_SSID ""
#define WIFI_PASS ""


nvs_handle_t nvs_h;

extern void wifi_init(const char *ssid, const char *pass);

// API callback override example
// void my_get_leds(struct leds *leds) { leds->led1 = gpio_read(LED1); }
// void my_set_leds(struct leds *leds) { gpio_write(LED1, leds->led1); }



void my_get_state(struct state *state) {
  state->ram_total = heap_caps_get_total_size(MALLOC_CAP_DEFAULT);
  state->ram_used = heap_caps_get_free_size(MALLOC_CAP_DEFAULT);
}

void my_get_settings(struct settings *settings)
{
  size_t size = sizeof(settings->device_name);
  if(nvs_get_str(nvs_h, "dn", settings->device_name, &size) != ESP_OK) {
    strncpy(settings->device_name, "MyDevice", sizeof(settings->device_name));
  }  
};

void my_set_settings(struct settings *settings)
{
  nvs_set_str(nvs_h, "dn", settings->device_name);
  nvs_commit(nvs_h);
}

void app_main() {
  esp_vfs_spiffs_conf_t conf = {
    .base_path = "/spiffs",
    .max_files = 20,
    .format_if_mount_failed = true,
  };
  esp_vfs_spiffs_register(&conf);

  wifi_init(WIFI_SSID, WIFI_PASS); // This blocks until connected

  mongoose_init();
  // mongoose_set_http_handlers("leds", my_get_leds, my_set_leds);

  mongoose_set_http_handlers("state", my_get_state, NULL);

    esp_err_t ret = nvs_flash_init();
  if(ret == ESP_ERR_NVS_NO_FREE_PAGES ||
     ret == ESP_ERR_NVS_NEW_VERSION_FOUND) {
    ESP_ERROR_CHECK(nvs_flash_erase());
    ret = nvs_flash_init();
  }
  ESP_ERROR_CHECK(nvs_open("nvs", NVS_READWRITE, &nvs_h));
  mongoose_set_http_handlers("settings", my_get_settings, my_set_settings);

  for (;;) {
    mongoose_poll();
  }
}

• Indeholder nødvendige headers til Mongoose glue, GPIO og NVS

• Placeholder for WIFI_SSID og WIFI_PASS, kalder wifi_init

• my_get_state: læser heap-størrelser

• my_get_settings: læser device_name fra NVS

• my_set_settings: skriver nyt navn til NVS

• app_main:

  • Monterer SPIFFS

  • Initialiserer Wi-Fi

  • Starter Mongoose

  • Initialiserer NVS

  • Registrerer endpoints

  • Kalder mongoose_poll() i loop

5. Wi-Fi Oplysninger

I main.c, find:

#define WIFI_SSID "YourSSID"
#define WIFI_PASS "YourPassword"

Alternativt via menuconfig:

idf.py menuconfig

Under projektindstillinger: sæt SSID/password.
Verificér tilslutning via seriel log.

6. Build & Flash via ESP-IDF

Start ESP-IDF miljø (PowerShell på Windows, export.sh på Linux/macOS)

• Navigér til projektmappe:

cd path/to/your_project

• Sæt target:

idf.py set-target esp32

• Build:

idf.py build

• Flash:

idf.py flash

• Monitor:

idf.py monitor

7. Tilgå Webinterfacet

Efter flashing og genstart, se i seriellog for:

Wi-Fi connected, IP: 192.168.1.123

I browser:
Gå til http://192.168.1.123
Du bør se dashboard med:

• Enhedsnavn

• RAM-data

• Settings og Firmware Update tabs

8. OTA Firmware Update via Web

• Gå til build-mappe (fx build/)

• Find .bin fil (fx your_project.bin)

• I browser UI: gå til Firmware Update → upload .bin → tryk reset

• Bekræft via seriellog at ny firmware kører og indstillinger bevares

9. Persistente Indstillinger med NVS

• NVS initialiseres tidligt

• Settings GET → my_get_settings()

• Settings POST/PUT → my_set_settings()

• Ved genstart: load_device_name() læser gemt navn

Tip: Husk at partitionstabel skal indeholde NVS. Standard “factory + ota_0 + ota_1 + nvs” virker fint.

12. Kommandooversigt

cd your_project

idf.py set-target 

esp32 idf.py build 

idf.py flash 

idf.py monitor

13. Test & Verificering

• Initial Boot: Tjek Wi-Fi og IP i seriellog

• Dashboard: Bekræft visning af enhedsnavn og RAM

• Ændr navn: Opdater via Settings → vises straks

• Reboot: Bekræft navnet bevares

• OTA Update: Upload ny .bin → reset → bekræft ny firmware

Edge Cases:

• Manglende Wi-Fi → fallback/log

• NVS-fejl → håndtér return codes

• Endpoint-fejl → returnér HTTP-status

Afsluttende tanker

Denne opsætning er perfekt til:

• Kompakte IoT-enheder

• Edge computing løsninger

• Embedded demonstratorer

• “Server i lommen”-projekter

Med Mongoose.WS til pålidelig netværk og TTGO T-Display som standalone host, får du en slank, sikker og bærbar server.

Når grundfunktionaliteten er på plads, kan du tilføje sensorer, aktuatorer, WebSocket live-data, MQTT, osv.

Giv det et forsøg og del dine kreative projekter!
Ønsker du en dybere gennemgang (fx LED-styring, temperatursensor, WebSocket-demoer), så spørg endelig i kommentarerne.