PubInv · nk25719 · Apr 13, 2026 · Apr 13, 2026 · Apr 13, 2026 · Apr 13, 2026
diff --git a/Firmware/GPAD_API/GPAD_API/GPAD_API.ino b/Firmware/GPAD_API/GPAD_API/GPAD_API.ino
@@ -365,7 +365,7 @@ void setup()
   }
   serialSplash();
   // We call this a second time to get the MAC on the screen
-  clearLCD();
+  // clearLCD();
 
 // Set LED pins as outputs
 #if defined(LED_D9)

diff --git a/Firmware/GPAD_API/GPAD_API/GPAD_HAL.cpp b/Firmware/GPAD_API/GPAD_API/GPAD_HAL.cpp
@@ -64,7 +64,9 @@ extern PubSubClient client;
 //  #include <LiquidCrystal_I2C.h>
 
 // https://github.com/johnrickman/LiquidCrystal_I2C
-LiquidCrystal_I2C lcd(LCD_ADDRESS, 20, 4);
+
+LiquidCrystal_I2C Real_lcd(LCD_ADDRESS, 20, 4);
+LCDWrapper lcd;
 
 #include "DFPlayer.h"
 
@@ -333,9 +335,13 @@ void GPAD_HAL_setup(Stream *serialport, wifi_mode_t wifiMode, IPAddress &deviceI
   // Setup the SWITCH_ENCODER
   // Print instructions on DEBUG serial port
 
+  lcd.init(&Real_lcd);
   local_ptr_to_serial = serialport;
   Wire.begin();
-  lcd.init();
+
+  Real_lcd.init();
+
+
 #if (DEBUG > 0)
   serialport->println(F("Clear LCD"));
 #endif

diff --git a/Firmware/GPAD_API/GPAD_API/GPAD_HAL.h b/Firmware/GPAD_API/GPAD_API/GPAD_HAL.h
@@ -168,6 +168,62 @@ namespace gpad_hal
   const GPAD_API gpadApi = GPAD_API(SemanticVersion(API_MAJOR_VERSION, API_MINOR_VERSION, API_PATCH_VERSION));
 }
 
+
+
+class LCDWrapper : public Print
+{
+public :
+    virtual size_t write(uint8_t b) override {
+      return _LCD->write(b); 
+    }
+  void init(LiquidCrystal_I2C* _lcd)
+  {
+    _LCD = _lcd;
+  }
+  void init()
+  {
+    _LCD->init();
+  }
+  void clear(){
+    _LCD->clear();
+  }
+  void backlight(){
+    _LCD->backlight();
+  }
+  void noBacklight(){
+    _LCD->noBacklight();
+  }
+  void setCursor(int16_t col, int16_t row){
+    _LCD->setCursor(col, row);
+  }
+  void print(const char *str)
+  {
+    _LCD->print(str);
+  }
+  void print(int c)
+  {
+    _LCD->print(c);
+  }
+  void print(const __FlashStringHelper* str)
+  {
+    _LCD->print(str);
+  }
+  void noBlink(){
+    _LCD->noBlink();
+  }
+  void blink(){
+    _LCD->blink();
+  }
+  void cursor(){
+    _LCD->cursor();
+  }
+  void noCursor(){
+    _LCD->noCursor();
+  }
+private:
+LiquidCrystal_I2C* _LCD;
+};
+
 // SPI Functions....
 void setup_spi();
 void receive_byte(byte c);
@@ -185,5 +241,6 @@ void interpretBuffer(char *buf, int rlen, Stream *serialport, PubSubClient *clie
 void GPAD_HAL_setup(Stream *serialport, wifi_mode_t wifiMode, IPAddress &deviceIp);
 void GPAD_HAL_loop();
 
-extern LiquidCrystal_I2C lcd;
+extern LiquidCrystal_I2C Real_lcd;
+extern LCDWrapper lcd;
 #endif
diff --git a/Firmware/GPAD_API/GPAD_API/RickmanLiquidCrystal_I2C.h b/Firmware/GPAD_API/GPAD_API/RickmanLiquidCrystal_I2C.h
@@ -10,16 +10,17 @@
 
 #include <Wire.h>
 //    #include <LiquidCrystal_PCF8574.h>
-#include <LiquidCrystal_I2C.h>
+// #include <LiquidCrystal_I2C.h>
+#include "GPAD_HAL.h"
 
 namespace Menu
 {
 
   class lcdOut : public cursorOut
   {
   public:
-    LiquidCrystal_I2C *device;
-    inline lcdOut(LiquidCrystal_I2C *o, idx_t *t, panelsList &p, menuOut::styles s = menuOut::minimalRedraw)
+    LCDWrapper *device;
+    inline lcdOut(LCDWrapper *o, idx_t *t, panelsList &p, menuOut::styles s = menuOut::minimalRedraw)
         : cursorOut(t, p, s), device(o) {}
     size_t write(uint8_t ch) override { return device->write(ch); }
     void clear() override

diff --git a/Firmware/GPAD_API/data/index.html b/Firmware/GPAD_API/data/index.html
@@ -1,24 +1,117 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
-    <title>KRAKE Web Server</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" type="text/css" href="style.css">
-    <link rel="icon" type="image/png" href="favicon.png">
-    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
-          integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
+  <meta charset="UTF-8">
+  <title>Soft KRAKE</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/png" href="/favicon.png">
+  <link rel="stylesheet" href="/style.css">
 </head>
 <body>
-    <div class="topnav">
-        <h1>KRAKE Web Server</h1>
-
+
+  <header class="topbar">
+    <div class="brand">
+      <img src="/favicon.png" alt="KRAKE icon" class="brand-icon">
+      <span>KRAKE</span>
     </div>
-    A public invention device
-
- 	<a href = "update"> Update </a>
-
- <br>
- <h6> Visit: pubinv.org </h6>
-
+
+    <button class="menu-toggle" onclick="toggleMenu()" aria-label="Open menu">☰</button>
+  </header>
+
+  <nav id="sideMenu" class="side-menu">
+    <a href="/update">Update Firmware</a>
+    <a href="/gdt">GDT Track Record</a>
+    <a href="/history">Electrical Test History</a>
+    <a href="/monitor">Factory Test / Developer Monitor</a>
+    <a href="/manual">User Manual</a>
+    <a href="/settings">Settings</a>
+  </nav>
+
+  <main class="container">
+    <section class="card">
+      <h1>KRAKE </h1>
+      <p class="subtitle">A Public Invention device</p>
+
+      <div class="info-row"><span class="label">Serial:</span> <span id="serial">%SERIAL%</span></div>
+      <div class="info-row"><span class="label">URL:</span> <span id="deviceUrl">%URL%</span></div>
+      <div class="info-row"><span class="label">IP:</span> <span id="ip">%IP%</span></div>
+      <div class="info-row"><span class="label">MAC:</span> <span id="mac">%MAC%</span></div>
+      <div class="info-row"><span class="label">WiFi RSSI:</span> <span id="rssi">%RSSI%</span></div>
+      <div class="info-row"><span class="label">Uptime:</span> <span id="uptime">%UPTIME%</span></div>
+      <div class="info-row"><span class="label">MQTT:</span> <span id="mqtt">%MQTT%</span></div>
+
+      <div class="qr-box">
+        <img src="%QR%" alt="QR Code">
+      </div>
+    </section>
+
+    <section class="card">
+      <div class="lcd-title">Live LCD Output</div>
+      <div class="lcd-frame">
+        <div class="lcd-screen">
+          <div id="lcd0" class="lcd-line"></div>
+          <div id="lcd1" class="lcd-line"></div>
+          <div id="lcd2" class="lcd-line"></div>
+          <div id="lcd3" class="lcd-line"></div>
+        </div>
+      </div>
+    </section>
+  </main>
+
+  <footer class="footer">
+    <a href="https://pubinv.org" target="_blank">pubinv.org</a>
+  </footer>
+
+  <script>
+    function toggleMenu() {
+      document.getElementById("sideMenu").classList.toggle("open");
+    }
+
+    function pad20(str) {
+      if (!str) return "                    ";
+      return (str + "                    ").substring(0, 20);
+    }
+
+    function updateLCD(lines) {
+      for (let i = 0; i < 4; i++) {
+        document.getElementById("lcd" + i).textContent = pad20(lines[i]);
+      }
+    }
+
+    async function fetchLCD() {
+      try {
+        const res = await fetch("/lcd");
+        if (!res.ok) return;
+        const data = await res.json();
+        if (data.lines) updateLCD(data.lines);
+      } catch (e) {
+        console.log("LCD fetch failed");
+      }
+    }
+
+    async function fetchStatus() {
+      try {
+        const res = await fetch("/status");
+        if (!res.ok) return;
+        const data = await res.json();
+
+        document.getElementById("ip").textContent = data.ip || "-";
+        document.getElementById("mac").textContent = data.mac || "-";
+        document.getElementById("rssi").textContent = data.rssi || "-";
+        document.getElementById("uptime").textContent = data.uptime || "-";
+        document.getElementById("mqtt").textContent = data.mqtt || "-";
+        document.getElementById("deviceUrl").textContent = data.url || "-";
+      } catch (e) {
+        console.log("Status fetch failed");
+      }
+    }
+
+    fetchLCD();
+    fetchStatus();
+
+    setInterval(fetchLCD, 1000);
+    setInterval(fetchStatus, 2000);
+  </script>
+
 </body>
-</html>
+</html>