Web UI

Coert Vonk

When the OPNpool device connects to the WiFi access point, it will be assigned an IP address. Only the access point and the device know this address. Other hosts can access the device by its mDNS name opnpool.local.

This relies on service auto-discovery using the Multicast DNS (mDNS) protocol. Note that mDNS’ use of multicast packets is designed to work within a single IP subnet. That implies that in general your computer/phone need to be on the same subnet as the OPNpool device for the mDNS protocol to work.

HTML

As you may have seem in the video in the Deploying chapter, the OPNpool device can be controlled through a simple HTML UI. This allows the user to monitor the state of the pool controller, pump and chlorinator.

This UI is accessed through the URL http://opnpool.local/. The unsecure connection implies that security solitary relies on your WiFi credentials. If you want to access the device from the public internet, I urge you by tunneling into your LAN instead of simply opening a port on your router.

To conserve memory, the OPNpool device only contains the minimum HTML code that refers to an external site for the Stylesheet and the replacement element that refers to the JavaScript.

Notes on going dark
To switch to a dark theme:
  • Change data-theme="a" data-content-theme="a" to data-theme="b" data-content-theme="b" in replace-body.js, and
  • Change .rs-bg-color from white to #2b2b2b in index.css.
data-theme in the HTML , and

Some examples of the UI are shown below

Request activate Pool circuit
Air temperature
Pool thermostat
Pump speed
Salt level
Schedules

JSON

The raw state of the pool controller is accessible through http://opnpool.local/json. The HTML page uses this internally, but you can also poll this state from home automation systems. However, if your home automation supports MQTT, I suggest using MQTT as described in the Home Assistant chapter.

{ “system”:{ “tod”:{ “time”:”09:56″, “date”:”2022-04-04″ }, “firmware”:”v2.080″ }, “temps”:{ “air”:66, “solar”:80 }, “thermos”:{ “pool”:{ “temp”:66, “sp”:70, “src”:”None”, “heating”:false }, “spa”:{ “temp”:66, “sp”:0, “src”:”None”, “heating”:false } }, “pump”:{ “time”:”09:55″, “mode”:”FILTER”, “running”:true, “state”:”OK”, “pwr”:604, “rpm”:2250, “err”:0, “timer”:0 }, “chlor”:{ “name”:”Intellichlor–40″, “pct”:25, “salt”:3800, “status”:”OK” }, “circuits”:{ “active”:{ “spa”:false, “aux1”:false, “aux2”:false, “aux3”:false, “ft1”:false, “pool”:true, “ft2”:false, “ft3”:false, “ft4”:false }, “delay”:{ “spa”:false, “aux1”:false, “aux2”:false, “aux3”:false, “ft1”:false, “pool”:false, “ft2”:false, “ft3”:false, “ft4”:false } }, “scheds”:{ “pool”:{ “start”:”08:00″, “stop”:”10:00″ } }, “modes”:{ “service”:false, “UNKOWN_01”:false, “tempInc”:false, “freezeProt”:false, “timeout”:false } }
Formatted output of http://opnpool.local/json

Who

The IP address of the OPNpool device can be found using the http://opnpool.local/who page. An example is shown in illustration below.

{ “name”:”opnpool”, “firmware”:{ “version”:”interface.v1.2.3″, “date”:”Apr 3 2022 14:51:15″ }, “wifi”:{ “connect”:1, “address”:”10.1.1.24″, “SSID”:”Guest Barn”, “RSSI”:-30 }, “mqtt”:{ “connect”:1 }, “mem”:{ “heap”:151084 } }
Formatted output of http://opnpool.local/who

Continue reading to learn about the Home Automation UI.