Cesanta Software introduced Mongoose Wizard – a no-code visual tool that enables embedded developers to effortlessly build a professionally looking device dashboard (WebUI) and REST API without writing any frontend code, transforming the microcontroller (MCU) board into a browser-accessible web dashboard for control, monitoring, and updates. Whether for prototyping or building production devices, integrating a web dashboard into firmware gives end users intuitive and powerful control.
Designed for use in Industrial, Automotive, Smart home, or any Internet of Things product (machinery, devices, appliances, etc.) that benefits from a browser-based interface.
Mongoose Wizard utilises the Mongoose Library, an open source network library for C/C++. Mongoose Library provides event-driven non-blocking APIs for TCP, UDP, HTTP, WebSocket, MQTT, and other protocols. It is designed for connecting devices and bringing them online. On the market since 2004, used by a vast number of open-source and commercial products – it even runs on the International Space Station.
Mongoose library is cross-platform and works on Linux/UNIX, MacOS, Windows, Android, STM, NXP, ESP32, Nordic, TI, Microchip, Infineon, Renesas, and other microcontrollers. It has a tiny static and run-time footprint, and its source code is both ISO C and ISO C++ compliant. Mongoose can run on top of an existing TCP/IP stack with BSD API, e.g. lwIP, Zephyr, Azure, etc., but also has a built-in TCP/IP stack with drivers for bare metal or RTOS systems. It has a built-in TLS 1.3 ECC stack, but also can use external TLS libraries – mbedTLS, OpenSSL, or others.
Mongoose Wizard is a powerful solution that enables embedded developers to quickly build Web UIs, REST APIs, OTA updates, and more – all without writing a single line of frontend code.
Mongoose Wizard package includes:
- Professional look and feel – With Mongoose Wizard, developers can create a professional-looking interface without any design or frontend skills.
- User login support – User authentication with multiple access levels is enabled with a single checkbox.
- UI auto-refresh – Always ensure that the developer’s dashboard is up-to-date with the device connection indicator on the toolbar.
- Easy to attach UI controls to the device hardware – Panels with dropdowns, toggles, and inputs can be mapped to C structures. All developers need to do is adjust the getter and setter C functions.
- Conditional display – Use conditional display to show device data that exceeds thresholds with an alternative style.
- Built-in OTA firmware updates – For many microcontrollers, such as STM32, ESP32, MIMXRT, and others, Mongoose provides built-in over-the-air firmware update support. Developers don’t need to do anything – it just works.
- Cross-platform code – The generated networking code is truly cross-platform. Whether developers choose GCC + make, CubeIDE, Zephyr, Linux, macOS, MCUXpresso, or Windows, the choice is yours.
- TLS 1.3 built-in, enabled by default – Typically TLS is a burden, but not with Mongoose. Developers can enjoy fast handshakes (<1s) and minimal RAM usage (few Kb per connection).
- Tiny flash and RAM footprint – Default dashboard UI takes about 55k of flash, Mongoose code (with TLS) takes less than 80k of flash, and each connection uses few Kb of RAM.
With Mongoose Wizard, developers can create a professional-looking interface without any design or frontend skills. The generated networking code is truly cross-platform: GCC + make, Zephyr, Linux, macOS, or Windows. User authentication with multiple access levels is enabled with a single checkbox. TLS 1.3 is built-in, enabled by default, and allows fast handshakes (<1s) and minimal RAM usage (few kilobytes per connection).
ESP32 Device Dashboard: A Step-by-Step Guide for Developers
Now, let’s deep dive into the ESP32 tutorial as an example, but the same way it can be applied to any other supported microcontrollers, like STM32, NXP, Renesas, Infineon, TI, Microchip, RPi, and others.
We will show you how to build a complete ESP32 device dashboard using the Mongoose Library, transforming your ESP32-C6 board into a browser-accessible web dashboard for control, monitoring, and updates.
We will guide you step-by-step through creating a functional web dashboard with system stats, LED control, device settings, and firmware updates. The web dashboard you’ll build will run directly on the ESP32, accessible from any browser on the same network.
Step 1: Set Up Your Development Environment
Before building your ESP32 device dashboard, prepare your development environment:
- Hardware: ESP32-C6 development board
- Toolchain: ESP-IDF
- Web Server: Mongoose Library
- Visual Web UI builder: Mongoose Wizard
We’ll use Docker to build ESP32 firmware, so there’s no need to install the ESP-IDF toolchain directly. The Mongoose Wizard creates a ready-to-go project for you, so all you need is Docker installed
– no additional setup on your workstation is required.
Step 2. Create the Dashboard Layout
Visit https://mongoose.ws/wizard/ and create a project with three web dashboard pages:
- Dashboard Page
- Device Settings Page
- Firmware Update Page
This tool allows you to create your ESP32 device dashboard in a visual way. Click on the “New” button to start a new design. Select ESP32 as the target architecture, and choose an empty dashboard template.
An empty “dashboard” page is created automatically. Add two more pages: a device Settings page and a Firmware Update page.
Step 3. Dashboard Page
The Dashboard page shows:
- Device name
- Current temperature
- RAM usage
We will create 3 cards for those. However, the information will be taken from different places. A device name would be settable by the user on the “Device Settings” page. Therefore, it will be
backed by the “settings” API endpoint.
Go to the API endpoint editor and create the settings endpoint, with a single string attribute device_name in it.
The current temperature and RAM usage are read-only metrics, so create a separate API endpoint for that, called state. Mark it read-only, and create three attributes in it: ram_free, ram_used, and temperature.
Add the leds endpoint with a single led1 boolean attribute.
Now we’re ready to add UI elements to the Dashboard page. Add “stats row” element, add cards to have 4 in total, and edit their titles and values that reference recently added API endpoints.
Add a panel for the LED toggle. Set the toggle button to “autosave”.
Step 4. Device Settings Page
Click on the device settings page, and add a panel there. Remove all unnecessary settings, leave only one with the text input. Label it “Device name”. Set API reference for the text input to settings.device_name.
Step 5. Firmware Update Page
This page would enable OTA firmware updates using the web dashboard:
- Handle file uploads using Mongoose
- Store new firmware
- Reboot after validation
First, add a new API endpoint. Name it “ota”, and choose the name “ota”. Then on the page, add a panel with the firmware update button.
Step 6. Build and test the firmware
Now the Web dashboard is ready. Click on the Generate button. Wizard creates a new ESP32 project in the output directory. Edit the WiFi credentials in main/main.c, then build it and flash it.
|
1 2 |
$ docker run --rm -v `pwd`:`pwd` -w `pwd` espressif/idf idf.py set-target esp32c6 $ docker run --rm -v `pwd`:`pwd` -w `pwd` espressif/idf idf.py build |
Note that the target could be any other microcontroller from the ESP32 family, such as ESP32, ESP32S3, ESP32C3, and so on.
Attach a serial console, reboot the device. Get the device’s IP address from the serial logs. Open your browser, type the device’s IP address into the address bar. Now you should see the web dashboard served by the device.
Step 7. Attach UI controls to the hardware
Clicking on the LED toggle does not do anything because the led’s endpoint is not yet linked to the hardware. OTA updates work without any further efforts! The settings page gets saved only to RAM, and rebooting the device loses all changes. RAM and temperature stats show mock data instead of the real one.
Let’s link all these API endpoints – leds, settings, stats – to our ESP32 device. For that, we need to override the default API callback functions that are generated in mongoose/mongoose_glue.h with our own custom callbacks.
Here is the updated main/main.c:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
// 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 "wifi.h" include "driver/gpio.h" include "driver/temperature_sensor.h" include "nvs_flash.h" temperature_sensor_handle_t temp_sensor = NULL; nvs_handle_t nvs_h; extern void wifi_init(const char *ssid, const char *pass); define LED1 GPIO_NUM_15 void my_get_leds(struct leds *leds) { leds->led1 = !gpio_get_level(LED1); } void my_set_leds(struct leds *leds) { gpio_set_level(LED1, !leds->led1); } void my_get_state(struct state *state) { float t = 0; ESP_ERROR_CHECK(temperature_sensor_get_celsius(temp_sensor,&t)); state->temperature = t; 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() { wifi_init(WIFI_SSID, WIFI_PASS); // This blocks until connected mongoose_init(); gpio_config_t io_conf = { .pin_bit_mask = (1ULL << LED1), // Select the pin .mode = GPIO_MODE_INPUT_OUTPUT, // Set as output .pull_up_en = GPIO_PULLUP_DISABLE, // No pull-up .pull_down_en = GPIO_PULLDOWN_DISABLE,// No pull-down mode .intr_type = GPIO_INTR_DISABLE, // No interrupts }; gpio_config(&io_conf); mongoose_set_http_handlers("leds", my_get_leds, my_set_leds); temperature_sensor_config_t tc = TEMPERATURE_SENSOR_CONFIG_DEFAULT(0, 70); temperature_sensor_install(&tc, &temp_sensor); temperature_sensor_enable(temp_sensor); 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(); } } |
Rebuild the firmware. Use the firmware update page, select the freshly built firmware.bin to update to the new firmware. Congratulations! Now our dashboard shows actual device values. LED control works, and the device settings page saves device data permanently on flash.
Conclusion
You’ve just built a full-featured ESP32 device dashboard on your ESP32-C6 using the Mongoose Embedded Web Server. Your web dashboard can now:
- Toggle an LED
- Display system stats
- Let users update device settings
- Support over-the-air firmware updates
This web dashboard architecture is ideal for smart devices, industrial sensors, or any IoT product that benefits from a browser-based interface.
The ESP32 device dashboard approach helps eliminate the need for separate mobile apps, making your solution more accessible and cross-platform. Whether you’re prototyping or building production devices, integrating a web dashboard into your firmware gives your users intuitive and powerful control. And of course, remember, the same approach of implementing a dashboard can be applied to any other supported microcontrollers, like STM32, NXP, Renesas, Infineon, TI, Microchip, Raspberry Pi, and others.
This account is for paid-for, sponsored posts. We do not collect any commission on sales, and content is usually provided by the advertisers themselves, although we sometimes write it for our clients.
Support CNX Software! Donate via cryptocurrencies, become a Patron on Patreon, or purchase goods on Amazon or Aliexpress. We also use affiliate links in articles to earn commissions if you make a purchase after clicking on those links.
