dashboard: show pin indicators and update them with htmx

Author: gsilvan

data/index.html

@@ -16,6 +16,24 @@ <h1>ESP Solar Boy</h1>
         <a href="/update">Firmware</a>
     </nav>
     <h2>Dashboard</h2>
+    <div class="pins">
+        <div id="pin0">
+            <span>Pin 0</span>
+            <div class="pin-indicator"
+                 hx-get="/data/pin0indicator"
+                 hx-trigger="load, every 10s"
+                 hx-swap="outerHTML">
+            </div>
+        </div>
+        <div id="pin1">
+            <span>Pin 1</span>
+            <div class="pin-indicator"></div>
+        </div>
+        <div id="pin2">
+            <span>Pin 2</span>
+            <div class="pin-indicator"></div>
+        </div>
+    </div>
     <p>Battery: <span id="battery" hx-get="/data/battery" hx-trigger="load, every 10s" hx-swap="innerHTML">...</span> %</p>
     <p>Battery charge rate: <span id="battery-charge-rate" hx-get="/data/batteryChargeRate" hx-trigger="load, every 10s" hx-swap="innerHTML">...</span> W</p>
     <p>Plant power: <span id="plant-power" hx-get="/data/plantPower" hx-trigger="load, every 10s" hx-swap="innerHTML">...</span> W</p>

data/style.css

@@ -28,3 +28,16 @@ input[type="checkbox"] {
     width: auto;
     margin-left: 6px;
 }
+.pins {
+    display: flex;
+    column-gap: 20px;
+}
+.pin-indicator {
+    width: 23px;
+    height: 23px;
+    border-radius: 50px;
+    background-color: gray;
+}
+.pin-active {
+    background-color: seagreen;
+}

src/main.cpp

@@ -169,6 +169,14 @@ void handlePostSettings() {
 
 void handleNotFound() { httpServer.send(404, "text/html", "<h1>404: Not found</h1>"); }
 
+void handlePin0Indicator() {
+    String pinIndicator = is_pin0_on
+                          ? R"(<div class="pin-indicator pin-active" hx-get="/data/pin0indicator" hx-trigger="load, every 10s" hx-swap="outerHTML"></div>)"
+                          : R"(<div class="pin-indicator" hx-get="/data/pin0indicator" hx-trigger="load, every 10s" hx-swap="outerHTML"></div>)";
+
+    httpServer.send(200, "text/html", pinIndicator);
+}
+
 bool switch_pin(uint8_t pin) {
     bool is_on;
     auto min_battery = *std::min_element(battery_charge_history.begin(), battery_charge_history.end());
@@ -247,6 +255,7 @@ void setup() {
     httpServer.on("/data/plantPower", HTTP_GET, handlePlantPower);
     httpServer.on("/data/powerMeterActivePower", HTTP_GET, handlePowerMeterActivePower);
     httpServer.on("/data/firmwareVersion", HTTP_GET, handleFirmwareVersion);
+    httpServer.on("/data/pin0indicator", HTTP_GET, handlePin0Indicator);
     httpServer.on("/settings", HTTP_GET, handleSettings);
     httpServer.on("/settings", HTTP_POST, handlePostSettings);
     httpServer.onNotFound(handleNotFound);