{"slug": "logiclab-pro-on-esp32", "title": "LogicLab Pro on ESP32", "summary": "A developer released LogicLab Pro on ESP32, a project that hosts a complete digital logic circuit simulator with an AI-assisted chat panel directly on an ESP32 board, served to any browser on the same Wi-Fi network. The web app's single-file HTML, 127,930 bytes uncompressed, is gzipped to 32,125 bytes, converted into a C array, stored in flash with PROGMEM, and streamed by the ESP32's built-in WebServer with a Content-Encoding: gzip header so the browser decompresses it. The sketch relies only on the WiFi, WebServer and ESPmDNS libraries from the ESP32 Arduino core, and a Python script, tools/embed_html.py, regenerates the index_html.h header after any HTML edit.", "body_md": "Most ESP32 web projects serve a small control page with a few buttons. In this project I pushed that idea further: the ESP32 hosts **LogicLab Pro**, a complete digital logic circuit simulator with an AI-assisted chat panel. Anyone on the same Wi-Fi network can open the ESP32's address in a browser and start building and testing logic circuits on a phone, tablet or PC.\n\nThe interesting part is how the web app gets onto the chip. The original single-file HTML app is about 128 KB. I compress it with gzip (about 32 KB), convert it into a C array, store it in flash with PROGMEM, and let the ESP32's built-in `WebServer` send it with a `Content-Encoding: gzip` header. The browser decompresses it, so the page loads quickly and the ESP32 does no compression work at runtime.\n\n- **One file to deploy.** The whole web app lives inside the sketch. There is no filesystem to upload and no SD card to manage.\n- **Small footprint.** Gzip cuts the app from 127, 930 bytes to 32, 125 bytes.\n- **No third-party libraries.** The sketch uses only`WiFi` ,`WebServer` and`ESPmDNS` , which ship with the ESP32 Arduino core.\n- **Easy to update.** Edit the HTML, run one Python command, re-upload.\n\n- `logiclab_pro_v2.html` is the original, unmodified web app.\n- `tools/embed_html.py` gzips it and writes`index_html.h` , a C header holding the bytes as a`PROGMEM` array.\n- The sketch connects to your Wi-Fi (or starts its own access point as a fallback).\n- When a browser requests `/` , the ESP32 streams the gzip bytes with the right headers.\n- The browser unpacks the page and runs the simulator entirely on the client side. The ESP32 only delivers the file.\n\n**Hardware**\n\n- Any ESP32 development board (for example ESP32 DevKit)\n- Micro-USB or USB-C data cable, depending on the board\n\n**Software**\n\n- Arduino IDE 2.x\n- ESP32 Arduino core (version 2.x or 3.x) by Espressif\n- Python 3 (only needed if you want to modify the web app)\n\n```\nLogicLabPro_ESP32/├─ LogicLabPro_ESP32.ino         main sketch├─ config.h                      Wi-Fi and hostname settings├─ index_html.h                  gzip-compressed web app (auto-generated)├─ webapp/logiclab_pro_v2.html   the original web app└─ tools/embed_html.py           HTML -> index_html.h converter\n```\n\nStep-by-step buildStep 1: Install the ESP32 core\n- Open Arduino IDE and go to **File > Preferences** .\n- In *Additional boards manager URLs* , add Espressif's package index URL (listed in the ESP32 Arduino core documentation).\n- Open **Tools > Board > Boards Manager** , search for**esp32** and install the package by Espressif Systems.\n- Select your board under **Tools > Board** (for example*ESP32 Dev Module* ). The default partition scheme is fine.\n\nDownload the project folder (GitHub link: [add your repository link]) and open `LogicLabPro_ESP32.ino` in Arduino IDE. The folder name must match the sketch name, so keep `LogicLabPro_ESP32`.\n\nOpen `config.h` and set your network name and password:\n\n```\n#define WIFI_SSID        \"YOUR_WIFI_SSID\"#define WIFI_PASS        \"YOUR_WIFI_PASSWORD\"#define WIFI_TIMEOUT_MS  15000#define AP_SSID          \"LogicLab-ESP32\"#define AP_PASS          \"logiclab123\"#define HOSTNAME         \"logiclab\"\n```\n\nIf the ESP32 cannot join your network within the timeout, it starts its own access point named `LogicLab-ESP32` and the app is available at `192.168.4.1`.\n\nConnect the board, choose the correct port under **Tools > Port**, and click **Upload**. If the upload hangs on \"Connecting...\", hold the board's BOOT button until it starts.\n\nOpen **Serial Monitor** at **115200 baud**. After a successful connection you will see something like:\n\n```\n=== LogicLab Pro on ESP32 ===[WiFi] Connected. IP: 192.168.x.x[mDNS] http://logiclab.local[HTTP] Open: http://192.168.x.x\n```\n\nType that address (or `http://logiclab.local`) into a browser on any device on the same network. LogicLab Pro loads.\n\n[Add a photo or screenshot of the Serial Monitor output and the simulator running on a phone.]\n\nCode walkthroughConverting the HTML\nThe core of `embed_html.py` is just a few lines:\n\n``` python\nimport gzip, pathlibraw = pathlib.Path(\"webapp/logiclab_pro_v2.html\").read_bytes()gz  = gzip.compress(raw, compresslevel=9, mtime=0)# ...then write the bytes out as a C array:#   const uint8_t INDEX_HTML_GZ[] PROGMEM = { 0x1f, 0x8b, ... };#   const size_t  INDEX_HTML_GZ_LEN = 32125;\n```\n\nRun it from the project folder:\n\n```\npython3 tools/embed_html.py\n```\n\nServing the page\n\n```\nvoid handleRoot() {  server.sendHeader(\"Content-Encoding\", \"gzip\");  server.sendHeader(\"Cache-Control\", \"no-cache\");  server.send_P(200, \"text/html; charset=utf-8\",                (PGM_P)INDEX_HTML_GZ, INDEX_HTML_GZ_LEN);}\n```\n\nThe `Content-Encoding: gzip` header tells the browser to decompress the data. `send_P` reads straight from flash, so the 32 KB array does not use RAM.\n\n```\nif (connectStation()) {  Serial.printf(\"[WiFi] Connected. IP: %s\\n\", WiFi.localIP().toString().c_str());} else {  startAccessPoint();   // SSID: LogicLab-ESP32}if (MDNS.begin(HOSTNAME)) {  MDNS.addService(\"http\", \"tcp\", HTTP_PORT);}server.on(\"/\", HTTP_GET, handleRoot);server.on(\"/index.html\", HTTP_GET, handleRoot);server.on(\"/health\", HTTP_GET, handleHealth);   // JSON statusserver.onNotFound(handleNotFound);               // redirect to /server.begin();\n```\n\nThe `/health` endpoint returns the mode (station or AP), IP address, uptime and free heap as JSON, which is handy for quick debugging.\n\nLogicLab Pro loads **Tailwind CSS**, **Google Fonts** and the **Gemini API** from the internet. The ESP32 only serves the HTML; your *browser* fetches those resources. That means:\n\n- **Station mode (ESP32 joins your router or phone hotspot):** everything works, as long as your device has internet.\n- **Access-point mode:** the client has no internet connection, so styling and the AI chat will not load.\n\nThe AI chat also needs your own Gemini API key. The app asks for it in the browser and stores it in that browser's local storage, so the key never passes through the ESP32. Local storage is tied to the address you use, so if the ESP32's IP changes you may need to enter the key again. Using `http://logiclab.local` avoids that.\n\n- Edit `webapp/logiclab_pro_v2.html` .\n- Run `python3 tools/embed_html.py` .\n- Re-upload the sketch.\n\n- **Page loads but looks unstyled:** the browser cannot reach the Tailwind CDN. Check that the client device has internet, or connect the ESP32 to a network that does.\n- **`logiclab.local`** **does not resolve:** mDNS support varies by operating system and network. Use the IP address from the Serial Monitor.\n- **ESP32 starts in AP mode unexpectedly:** double-check the SSID and password in`config.h` . The ESP32 connects only to 2.4 GHz networks.\n- **Compile error about a missing header:** make sure`index_html.h` and`config.h` are in the same folder as the`.ino` file.\n\n- Bundle Tailwind and the fonts locally (for example on LittleFS) for a fully offline setup.\n- Add a WebSocket bridge so the simulated circuit can read and drive real ESP32 GPIO pins.\n- Add OTA updates so you can change the web app without a USB cable.\n- Add a simple captive portal for the access-point mode.\n\nWith a gzip-compressed C array and the stock `WebServer` class, an ESP32 can host a surprisingly capable web application. The same technique works for dashboards, configuration pages and educational tools. Try it with your own single-file web app and share what you build.\n\n```\nExplanations about web application performance\n```\n\n[Read more](<javascript:void(0)>)", "url": "https://wpnews.pro/news/logiclab-pro-on-esp32", "canonical_source": "https://www.hackster.io/mehdizahedi13790/logiclab-pro-on-esp32-1ddd46", "published_at": "2026-11-13 08:09:45+00:00", "updated_at": "2026-11-13 09:19:32.365500+00:00", "lang": "en", "topics": ["ai-tools", "developer-tools", "ai-agents"], "entities": ["LogicLab Pro", "ESP32", "Arduino IDE", "Espressif Systems", "Python", "LogicLab-ESP32"], "also_reported_by": [], "alternates": {"html": "https://wpnews.pro/news/logiclab-pro-on-esp32", "markdown": "https://wpnews.pro/news/logiclab-pro-on-esp32.md", "text": "https://wpnews.pro/news/logiclab-pro-on-esp32.txt", "jsonld": "https://wpnews.pro/news/logiclab-pro-on-esp32.jsonld"}}