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

Bygg en webbserver i fickformat med Mongoose.WS och TTGO T-Display

  • June 10, 2025
  • |
  • Teofil Corad

Introduktion

Idag kombinerar vi två kraftfulla verktyg: det ultralätta inbäddade webbserverbiblioteket Mongoose.WS och det kompakta LILIGO TTGO T-Display-kortet. Resultatet? En liten, fristående HTTPS-server som får plats i din hand.

Vad är Mongoose.WS?

Mongoose.WS är en enda C-källfil plus en header-fil, med en flashstorlek på cirka 55 kB (≈80 kB med TLS). Trots sin lilla storlek erbjuder den:

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

  • Säkerhet: TLS 1.3 stöds direkt

  • Modell: Händelsestyrd, icke-blockerande — hanterar många anslutningar på resursbegränsade enheter

  • Portabilitet: Körs över plattformar (Linux, Windows, bare-metal MCU:er), så länge du kan kompilera C/C++

  • Licens: Dubbel GPLv2 eller kommersiell — bekräfta kompatibilitet med ditt användningsscenario

  • Omfattning: Endast nätverk — du måste själv lägga till RTOS, filsystem eller annan plattformsspecifik funktionalitet

Organisationer som Bosch, Siemens, NASA och ISS använder det för "bulletproof" prestanda och långsiktigt underhåll.

Möt TTGO T-Display

LILIGO TTGO T-Display är byggd kring en ESP32 Xtensa dual-core LX6 MCU med inbyggt Wi-Fi och Bluetooth – perfekt för att hosta Mongoose:

  • Formfaktor: Kompakt, batteridriven, bärbar

  • Anslutning: Wi-Fi för webbsidor; Bluetooth valfritt

  • Ström: Kan köras fristående efter flashning; PC behövs endast under utveckling

Denna kombination ger dig en säker IoT-nod eller en edge-server som du kan ha i fickan.

Lista över nödvändiga komponenter:

TTGO T-Display ESP32 16MB med WiFi, Bluetooth och 1.1" färg LCD-skärm

 

Detaljerad inställning

  1. Förutsättningar ESP-IDF Installation

Gå till Espressifs webbplats och följ installationsguiden för din plattform.
Typiskt:

  • Klona esp-idf repo

  • Sätt miljövariabler

  • Installera Python-paket och toolchain

Verifiera med:

idf.py --version

ESP32 Board & Drivrutiner
Installera USB-drivrutiner så att din PC kan känna igen kortet.
Bekräfta COM-port (Windows) eller /dev/ttyUSB* (Linux/macOS).

2. Skapa ett Nytt ESP-IDF Projekt

Starta ett tomt projekt via Mongoose Wizard

  • Gå till Mongoose.WS webbplats och klicka på "Start building our own web UI"

  • Välj nytt C-projekt, målplattform: ESP32

  • Välj/utse "wizard folder" för byggfiler

  • Wizard genererar startinställning av UI (sidor och endpoints)

3. Definiera webbgränssnittssidor

Från transkript skapas:

  • Dashboard:

    • Enhetsnamn (redigerbart)

    • RAM använt / totalt RAM

  • Inställningar:

    • Redigera enhetsnamn

  • Firmware Update:

    • Ladda upp OTA-firmware (.bin)

I UI:t:

  • Dra in Container

  • Lägg till Stats Row med:

    • device_name

    • ram_used

    • ram_total

  • I Settings: input för device_name (string, default "MyDevice")

  • I Firmware Update: aktivera OTA

Wizard genererar glue-fil (t.ex. mongoose.glue)

4. Implementera Callbacks i C (main.c)

Redigera 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();
  }
}

 

  • Innehåller nödvändiga headers för Mongoose glue, GPIO och NVS

  • Platshållare för WIFI_SSID och WIFI_PASS, anropar wifi_init

  • my_get_state: läser heap-storlekar

  • my_get_settings: läser device_name från NVS

  • my_set_settings: skriver nytt namn till NVS

  • app_main:

    • Monterar SPIFFS

    • Initialiserar Wi-Fi

    • Startar Mongoose

    • Initialiserar NVS

    • Registrerar endpoints

    • Anropar mongoose_poll() i loop

5. Wi-Fi Information

I main.c, hitta:

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

Alternativt via menuconfig:

idf.py menuconfig
 

Under projektinställningar: sätt SSID/lösenord.
Verifiera anslutning via serieloggen.

6. Bygg & Flash via ESP-IDF

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

  • Navigera till projektmappen:
cd path/to/your_project
  • Sätt target:
idf.py set-target esp32
  • Bygg:
idf.py build
  • Flash:
idf.py flash
  • Monitor:
idf.py monitor

7. Åtkomst till webbgränssnittet

Efter flashing och omstart, titta i serieloggen efter:

Wi-Fi connected, IP: 192.168.1.123

I webbläsaren:
Gå till http://192.168.1.123
Du bör se instrumentpanelen med:

  • Enhetsnamn

  • RAM-data

  • Flikarna Inställningar och Firmwareuppdatering

8. OTA Firmwareuppdatering via webb

  • Gå till byggmappen (t.ex. build/)

  • Hitta .bin-filen (t.ex. your_project.bin)

  • I webbgränssnittet: gå till Firmware Update → ladda upp .bin → tryck på reset

  • Verifiera via serieloggen att den nya firmwaren körs och att inställningarna bevaras

9. Beständiga inställningar med NVS

  • NVS initialiseras tidigt

  • Inställningar GET → my_get_settings()

  • Inställningar POST/PUT → my_set_settings()

  • Vid omstart: load_device_name() läser lagrat namn

Tips: Kom ihåg att partitionstabellen måste innehålla NVS. Standard "factory + ota_0 + ota_1 + nvs" fungerar bra.

12. Kommandoöversikt

cd your_project

idf.py set-target 

esp32 idf.py build 

idf.py flash 

idf.py monitor

13. Test & Verifiering

  • Initial Boot: Kontrollera Wi-Fi och IP i serieloggen

  • Instrumentpanel: Bekräfta visning av enhetsnamn och RAM

  • Ändra namn: Uppdatera via Inställningar → visas omedelbart

  • Omstart: Bekräfta att namnet sparas

  • OTA-uppdatering: Ladda upp ny .bin → återställ → bekräfta ny firmware

Gränsfall:

  • Saknar Wi-Fi → fallback/logg

  • NVS-fel → hantera returkoder

  • Endpoint-fel → returnera HTTP-status

Avslutande tankar

Denna uppsättning är perfekt för:

  • Kompakta IoT-enheter

  • Edge computing-lösningar

  • Inbyggda demonstratorer

  • "Server i fickan"-projekt

Med Mongoose.WS för pålitlig nätverkskommunikation och TTGO T-Display som fristående värd får du en smal, säker och bärbar server.

När grundfunktionaliteten är på plats kan du lägga till sensorer, aktuatorer, WebSocket live-data, MQTT, etc.

Prova det och dela dina kreativa projekt!
Önskar du en djupare genomgång (t.ex. LED-styrning, temperatursensor, WebSocket-demonstrationer), så fråga gärna i kommentarerna.

Lämna en kommentar

Observera att kommentarer måste godkännas innan de publiceras.