Some time around 2013 I started playing with PIC microcontrollers. I then added nRF24L01 radios for remote operation. Several years later I discovered the ESP8266. This tiny device had WiFi and Bluetooth built in. Not only did I no longer need external radios but I no longer had to build my own dedicated controllers. A web page or Android app could often do the job. Then the ESP32 came out, even more powerful than the ESP8266.

In 2018 I switched almost entirely to ESP devices. Some time ago I discovered Random Nerd Tutorials (RNT) and this has become my go to place for information about these microcontrollers.

Many of my projects are aimed at monitoring my daughter's greenhouses. I have built alarms for low temperature and general monitors for temperature and humidity. Most now use MQTT to transmit their data and I have been looking for some sort of central control panel where I could aggregate and monitor all the devices in one place.

Recently I cane across this RNT project:
ESP32 Web Server: Display Sensor Readings in Gauges
Easy to read gauges in a simple web page. Exactly what I was looking for but it had a few limitations so I modified it.

   added Barometric Pressure
   made all gauges circular to fit better on the screen
   added monitoring of remote devices by MQTT
   added client ssl for secure MQTT connection, server cannot use ssl
   added ini file for configuration information
   if present at boot time the following files are copied from the SD card to SPIFFS
   iniFileName[] = "/WebServer.ini";
   htmFileName[] = "/index.htm";
   jsFileName[] = "/script.js";
   styFileName[] = "/style.css";
   icoFileName[] = "/favicon.png";

I use these devices at several different locations so I have standardized, whenever possible, on reading an INI file from an SD card upon bootup to get WiFi credentials, etc. I don't always permanently install the card reader but I use a pin-header so I can put one on temporarilly whenever needed.

You can download the project here:ESP32_Web_Server_7.zip
Remember to edit the INI file with your own WiFi credentials. The MQTT credentials provided are read-only and will work for the demo.

It still had two problems as far as I was concerned.
1) I could not find any way to secure the server, many browsers balk at that.
2) I normally block my microcontroller devices from direct connection with the outside world (Internet).

Then I came across this article:
Steve's Internet Guide: Using The JavaScript MQTT Client With Websockets

My Mosquitto MQTT Broker was already configured for secure websockets. Why not combine the two projects? The microcontrollers could sense the data and transmit it by MQTT. The web page could be moved to my IIS server where it would display the gauges.

This is what resulted: https://gauges.mulvey.us
You can download the site here: Gauges.zip
As everything runs in the browser, you do not actually need a server.
Just double-click the default.htm file to open it in a browser.

This method exposed the MQTT username and password so I created a special restricted, read-only account for the job. It is included in both downloads above for demonstration purposes.

Perhaps some day I will further modify this to dynamically create however many gauges are defined on the SD card rather than just use nine predefined gauges.

5 December 2021, Update
Some day is today. It turned out to be easier than I expected to dynamically create any number of gauges based on a number specified in the variables.js file.
You can download the site here: Gauges2.zip

Allen Mulvey, Rome, NY

Click the images below for a larger view.

Some of My Devices
The one on the right, showing lines of text,
monitors MQTT devices and posts the data
to an SQL database.

Two "Ruggedized" ESP32 Devices
With Atmospheric Sensors

Small Board With 2 Relays
SD pin-header on lower right

Big Board With 1 Relay
SD pin-header on left