How to build a local web server UI for your IoT automation — Featuring the EQSP32 IIoT PLC
Using a web server solution and adding a local web interface to your EQSP32 lets you control and monitor your system directly from any browser on your network — via Wi-Fi or Ethernet (if using the EQSP32CE model) — with no external cloud service or extra HMI hardware required.
It’s one of the simplest ways to visualize I/O states, toggle outputs and combine manual controls with virtual switches — all in real time.
When used with the EQConnect mobile app (for Wi-Fi provisioning and commissioning), or with Ethernet on the EQSP32CE model (no setup needed), this becomes one of the simplest zero-fee IoT solutions available.
In this tutorial, you’ll see two practical ways to build a web server user interface (UI) with EQSP32:
- Basic UI — A simple page that lets you toggle a single output. Simulating how to control a fan or a light.
- Real-Time UI Dashboard — A more advanced approach that uses AJAX to keep your browser in sync with your hardware, with live temperature readings, switch states, virtual controls and multiple relays for controlling any kind of loads.
While this approach is powerful for local control, it’s worth keeping a few things in mind:
- A local web server runs only within your network unless you set up VPNs or port forwarding.
- The built-in server runs on HTTP, not HTTPS, so add extra security measures if you expose it externally.
- The EQSP32 is designed for reliable I/O tasks — hosting very heavy web pages or handling lots of simultaneous connections may affect performance.
A Real-Time Modern UI Dashboard with AJAX.
A simple local web server UI
The first approach keeps things as simple as possible: the EQSP32 serves a basic web page that lets you toggle a single relay output — like a fan or a light — right from your browser. There’s no complex frontend code; when you press the button, the page refreshes and the relay state updates instantly. The UI web server page consists of the heading, the ventilation fan state, the system’s local time and the virtual control button.
Ventilation control wiring diagram
How the simple web server UI works
- The relay output is configured in RELAY mode, which handles the coil’s hold power and derate timing automatically — no guesswork for managing inductive loads.
- The EQSP32 waits until the device is online — either via Wi-Fi (if configured with EQConnect) or Ethernet (on EQSP32CE models) — and the local time is synced before starting the web server, so your page always shows accurate local time.
- The web server uses two routes: the root route / serves the full HTML page each time you load or refresh it, and a /toggleFan route handles the relay toggle command. When you press the button, it sends a basic HTTP GET request, flips the relay state, and reloads the page — so the physical output and the page display are always in sync.
This example is useful when you want a quick way to control or test an output without wiring a physical switch. It’s also a great demonstration of how the EQSP32’s built-in connectivity and NTP time sync can be combined — whether connected via Wi-Fi or Ethernet. On the same page, you can see the current state (ON or OFF) and the local time pulled straight from your EQSP32 — so you always know when your last action happened.
A simple static web page like this is lightweight, fast to load, and runs entirely on your local network. There’s no JavaScript or JSON API in this version — which means it’s rock-solid for single outputs or quick test benches where you don’t need real-time status updates every second.
Example code: EQSP32_WebServer_Basic_UI_Demo
A real-time modern UI dashboard with AJAX
This approach builds on the same idea but takes it a big step further with a modern, responsive interface that feels more like a local HMI. Instead of relying on page refreshes, it uses AJAX and lightweight JavaScript to keep your browser fully updated in real time.
In this example, we’ll assume the EQSP32 is wired to control a cooling fan, ventilation, and the lights in your workshop.
With this setup, you can toggle multiple relays — for example, a fan, ventilation, or different lights — while monitoring your ambient temperature and the state of any physical switches you’ve connected. The page updates itself automatically every few hundred milliseconds, so you never have to reload to see what’s happening. This modern design makes it easy to combine manual switches with virtual controls and still keep everything perfectly in sync. It’s an ideal approach for workshops, test benches, greenhouses, or any setup where you want live status and control on the same local network — without needing extra panels or software.
Your device can be connected via Wi-Fi (using EQConnect for provisioning) or Ethernet if you’re using the EQSP32CE version, offering a flexible, cloud-free setup tailored to your installation.
Workshop control wiring diagram
How the real-time modern web server UI dashboard works
- Multiple relay outputs run in RELAY mode with proper hold and derate settings for safe coil operation.
- The ambient temperature sensor is set up in TIN mode, which automatically converts raw voltage to Celsius.
- Manual switches are wired in SWT mode with debounce, and are read every loop cycle to update the ceiling and hidden light relays.
- Virtual controls for fan and ventilation are triggered by AJAX fetch() calls, which send HTTP requests to /handleToggleFan and /handleToggleVent — these routes switch each relay state instantly and update the JSON status.
- The EQSP32’s embedded web server dynamically generates the main UI page (/) using the handleRoot() function, which combines HTML, styles, and embedded JavaScript every time you load it.
- The web server also responds to AJAX status requests (/status) with live JSON data for temperature, relays, switches, and local time.
- The webpage’s JavaScript runs a timer that uses fetch() to call /status every 250 ms, fetching fresh JSON so the UI stays fully in sync without reloading the full page every time.
- A moving average is used for the temperature reading to keep it stable and readable in the UI.
We used a simple JSON API for the status data because it’s lightweight and flexible. Each time your browser makes a request, the EQSP32 collects the latest sensor readings, switch states, relay states, and local time, and sends it all back as a single JSON object. The frontend JavaScript then updates the page instantly. This approach also keeps the EQSP32’s workload reasonable — there’s no huge web framework running on the controller itself.
Example code: EQSP32_WebServer_AJAX_UI_Demo
Whether you’re connecting over Wi-Fi or Ethernet (EQSP32CE), EQSP32 gives you a powerful, flexible foundation for zero-fee IIoT automation — no cloud fees, no extra hardware, no added complexity.
Connectivity Note:
All EQSP32 models support Wi-Fi and require credentials to be configured using the EQConnect mobile app. If you’re using the EQSP32CE model, you also have the option to connect via Ethernet, with no Wi-Fi setup necessary.
Regardless of the connection type, time zone settings must be configured in EQConnect to ensure accurate local time display in the web interface.
Take a look at our product catalog of EQSP32 controller versions and our range of expansion modules — we’re always happy to assist you with your selection and integration process.
Have questions? Feel free to reach out to us at info@erqos.com.
Related products
EQSP32CE – Industrial IoT ESP32 PLC With Ethernet