Web UI builder for Teensy 4.1 with Ethernet

cpq

New member
TLDR: https://mongoose.ws/wizard/

This is more like a framework announcement rather than a question.

Some explanation: this is a visual tool for building networking functionality with no experience in network and frontend programming.
The tool generates Arduino project for Teensy 4.1, using Mongoose library (a single-file TCP/IP stack with HTTP/MQTT and TLS).
Mongoose is dual-licensed: free for open source projects, paid for commercial products.

In the tool, you can configure your Web UI, click on "Code". Select "Teensy 4.1".
Download .zip or sync to a local folder, open project in your Arduino IDE.
Connect your Teensy 4.1 to Ethernet, open serial monitor, click flash.
You should see a log in the monitor with the IP address:

Code:
mongoose.c:5087:onstatechange  READY, IP: 192.168.0.231
ef4    2 mongoose.c:5088:onstatechange         GW: 192.168.0.1
ef4    2 mongoose.c:5089:onstatechange        MAC: 02:95:c1:4e:92:d2

Go to that IP address in a browser. You should see a UI (see attached).
Now, you can "glue" UI elements to your firmware code by editing "mongoose_glue.c" file.
For example, if you want to attach Teensy LED to the LED2 toggle button on the UI,

1. Add "#include <Arduino.h>" to the top of the mongoose_glue.c
2. Find functions for led2, and change them to the following:

C:
//static bool s_bool_led2 = false;  // Mock, change it
bool glue_bool_get_led2(void) {
  return digitalRead(LED_BUILTIN);
}
void glue_bool_set_led2(bool value) {
  digitalWrite(LED_BUILTIN, value);
}

Reflash, click on LED2 toggle, and see your LED switching on and off.
 

Attachments

  • Screenshot 2024-04-25 at 08.01.36.png
    Screenshot 2024-04-25 at 08.01.36.png
    1 MB · Views: 17
Back
Top