Feature Request: Responsive Web Dashboard for Local Device Configuration on ESP-IDF (AEGHB-545)

[hayschan]

Answers checklist.

• I have read the documentation ESP-IDF Programming Guide and the issue is not addressed there.
• I have updated my IDF branch (master or release) to the latest version and checked that the issue is present there.
• I have searched the issue tracker for a similar issue and not found a similar issue.

General issue report

Dear Espressif Team,

I am reaching out to propose a valuable addition to the ESP-IoT-Solution that I believe will significantly enhance the user interface and configuration capabilities of devices built with Espressif chips.

Recognizing the prevalent use of mobile devices in managing IoT applications, this proposal focuses on a responsive and secure web dashboard for local device configuration, ensuring seamless interaction across various platforms including mobile phones and desktops.

Imagine you have a printer and you want to connect it to your WiFi or change print settings. Instead of using small buttons on the printer or installing special software, you just connect your phone or computer to the printer's network. There, you find a simple web page where you can easily change settings. This web page is what we want to make for all devices using ESP-IDF. It's like a printer's web page, but for different devices. You can use your phone or computer to change device settings quickly and without hassle. This makes it easier for everyone to manage their devices, especially in places like offices or schools where you often need to change settings fast.

Feature Description

The envisioned feature is an embedded, responsive web dashboard allowing end-users to configure and manage device settings directly from the device via a local network. This approach is particularly beneficial for devices lacking traditional input mechanisms, aligning with the modern trend of mobile-first interactions.

Detailed Feature Components

1. Responsive and Adaptive Web UI:

   • A lightweight, adaptive web interface that provides a consistent user experience across different devices, from desktops to smartphones and tablets.
   • Employ modern web design principles to ensure the interface adjusts layout and controls optimally based on the accessing device, enhancing usability and accessibility.

2. User Authentication:

   • Robust login mechanisms to secure access to the configuration interface.
   • Support for multiple user roles and permission levels, ensuring configuration integrity by allowing only authorized modifications.

3. Intuitive and Dynamic Setting Controls:

   • User-friendly controls (toggle switches, dropdowns, input fields with validation) to simplify device configuration processes.
   • Immediate feedback and input validation to reduce errors and streamline user interactions.

4. Embedded and Resilient Design:

   • Embedding the web UI within the firmware binary to ensure high availability and resilience, independent of external filesystems.
   • Optional integration with filesystems like SPIFFS for devices with higher storage capacity, offering extended functionality.

5. Efficient Resource Management:

   • Optimization for minimal resource consumption, targeting a total size under 20KB (gzip) to accommodate devices with limited storage and memory.

6. API-Driven Configuration:

   • Easy management of device settings through a well-defined API, allowing for programmatic interaction (e.g., api/settings/get, api/settings/set).

Rationale & Benefits

The proposal addresses a crucial need in the IoT sector – the need for a versatile, secure, and user-friendly configuration interface that caters to the increasing use of mobile devices for device management. The benefits of introducing this feature include:

• Enhanced Accessibility: Making device configuration accessible on any device, aligning with the mobile-first approach prevalent in today's technology landscape.
• Cost-Effectiveness: Reducing the need for physical input mechanisms, potentially lowering production costs.
• Development Efficiency: Offering developers a standardized, modular approach to integrating configuration interfaces into their devices.
• Improved Security: Ensuring secure access and data transmission through robust authentication and communication protocols.

Leveraging the existing capabilities of ESP-IDF, especially in HTTP server support, filesystems, and WiFi connectivity, I believe this feature would integrate seamlessly and provide substantial value to the ESP community.

I am keen to contribute to the discussion, development, or testing phases of this feature and eagerly await your feedback.

Thank you for considering this proposal.

Warm regards,
Hays Chan

[leeebo]

@hayschan Thanks for your detailed proposal.

Yes, I agree that Web Dashboard is a useful feature, which provides a unified, lightweight configuration experience for multiple platforms.

We already have some good examples using this Web based Dashboard, like usb_cdc_4g_module using a webpage to config the 4G Wi-Fi router's behaviors and monitor the devices' status, the other project like esp-who using the webpage for camera control and result display.

But. there is no such Official Web Dashboard framework （and we don't have related development plans at the moment, but there are some excellent third-party projects, like ESPUI, I think it's good enough for most projects and simplify the development process.

[hayschan]

but there are some excellent third-party projects, like ESPUI, I think it's good enough for most projects and simplify the development process.

Thanks for the suggestion. ESPUI is indeed a promising project, but currently, it lacks official ESP-IDF support.

While some users have managed partial ports, it mainly supports PlatformIO and Arduino, as highlighted in this discussion. The issue seems tied to Async web implementation compatibility with ESP-IDF.

A similar approach to Espressif's LVGL port could be a viable pathway for integrating ESPUI with ESP-IDF.

[leeebo]

@hayschan Thanks for your propose! We will further evaluate what espressif can do for the ESPUI project.

[igrr]

@hayschan does https://github.com/espressif/esp-idf/tree/master/examples/protocols/http_server/restful_server example provide something that you are looking for?

[hayschan]

@hayschan does https://github.com/espressif/esp-idf/tree/master/examples/protocols/http_server/restful_server example provide something that you are looking for?

Thanks for the suggestion. This one does help. I will try to use this restful_server to build something and try out. Thanks a lot. 👍🏼

This is not the perfect library for me. But better than my other options.

As you can see in the code for this example, there are a lot of code about network connection and restful API. This is not the skillset of a usual embedded system software engineer. The better solution would be something similar to ESPUI, a framework packing in all the network related things.