So, I just got a SEEED Studio Xiao today (haven't even plugged it in yet!), and I have some project ideas that would require remote communication (Bluetooth, WiFi, etc.) between the Xiao and another device (probably my tablet). Does anybody have recommendations for a UI toolkit/system/builder. I probably won't have access to a WiFi network “in the field” so to speak, so whatever I use has to be completely local. I know that it's possible to write HTML and CSS on the Xiao and broadcast that as a webpage, but I would prefer something more along the lines of a WYSIWYG UI builder. Does such a program exist?
You should mention which XIAO, they use several different platforms. Some of my newest XIAO are SI Labs, most others are esp32.
Sorry, it’s an ESP-32 C3. Edit: Double sorry, when I ordered the board I was certain that it was C3, but the board itself says a C6.
That is an esp32.
Sorry, I have no idea what a ‘UI toolkit/system/builder’ is regarding the ESP32 platform.
I mean a way to build a UI and either upload it to the board or upload it to an external device that communicates with the board.
-
Not 100% sure what’s being asked for.
-
Peruse this web site.
- See this YouTube video.
I'm sorry if I'm not explaining well. I'm looking for a way to build ESP32 web UIs without entering in every single line of HTML by hand. I was just wondering if anybody had a preferred way of doing that.
I mean tools like this:GitHub - s00500/ESPUI: A simple web user interface library for ESP32 and ESP8266
Hi ethanp,
Yes, such a tool that is used for created web interfaces absolutely exists. The tool is called Mongoose Wizard. It's a web-browser application designed specifically for this purpose: letting embedded developers build a professional UI without writing any HTML, CSS, or JavaScript.
A short summary on how it works and its features:
-
You design your UI visually, by creating, inserting, dragging or dropping components like buttons, sliders, charts, and text displays onto a canvas to build your interface.
-
Moreover, it allows you to link the UI components to variables in your C/C++ code. For example, a toggle switch in the UI can be tied to a bool led_is_on; variable, or a chart can be tied to a float sensor_data[100]; array.
-
Finally, the Wizard then generates a complete, project ready to be compiled, including all the UI code and the C/C++ backend.
The generated project uses the Mongoose Networking Library, a lightweight library designed specifically for embedded devices, with support for many networking protocols and other features, it’s well documented and includes support for ESP32 with WiFi, as per your requirements
The Wizard is well documented here and there are also video tutorials showing you in detail how to use the Wizard.
Heads up: I am part of the Mongoose development team. We built the Wizard precisely for developers who want to build web UIs with minimal frontend knowledge or coding effort.
Hope this is exactly what you were looking for!
Hi there, and I apologize for the extremely late reply ( I haven't checked my account for months). But thank you for the suggestion! This does look like an excellent solution, and I will definitely look into it. I have never heard of this project,but it looks like something which I would very much like to use in the future.
Glad to hear our solution suits you! If you need any assistance or have any questions, you can use our discord channel to chat with us!