From a4f6d22c34035f3686b4d55b0b762d8d51bfa4d1 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 28 Apr 2026 11:33:32 +0000
Subject: [PATCH 1/2] port UI improvements from esp32-web-interface
 copilot/apply-ui-changes-to-uart-backend branch

Agent-Logs-Url: https://github.com/jsphuebner/esp8266-web-interface/sessions/cf75e917-53ed-4e7d-a001-1abb2cffa1c1

Co-authored-by: jsphuebner <3882041+jsphuebner@users.noreply.github.com>
---
 data/index.html           |  23 ++++--
 data/inverter.js          |  53 +++++++++----
 data/style.css            |  19 +++++
 data/ui.js                | 162 ++++++++++++++++++++++----------------
 esp8266-web-interface.ino |   6 +-
 5 files changed, 169 insertions(+), 94 deletions(-)

diff --git a/data/index.html b/data/index.html
index 412e7d6..7fa98ce 100644
--- a/data/index.html
+++ b/data/index.html
@@ -62,6 +62,10 @@ <h2 id="large-modal-header"></h2>
 			<p>Communication problem between ESP and STM</p>
 		</div>
 
+		<div id="param-success-bar" class="param-success-bar">
+			<p id="param-success-bar-text"></p>
+		</div>
+
 		<!-- 'Add CAN Mapping' modal -->
 		<div id="can-mapping-modal-overlay" class="modal-overlay">
 			<div id="can-mapping-modal-container" class="can-mapping-modal-container">
@@ -91,7 +95,7 @@ <h3 class="underline">New CAN Mapping</h3>
 						<td>Set the ID of the CAN frame to send/receive</td>
 					</tr>
 					<tr>
-						<td>Offset</td>
+						<td>Position</td>
 						<td><input type="number" step="1" min="0" max="63" id="canpos"></td>
 						<td>Specify the position (offset) within the frame to place (transmit) or find (receive) this value</td>
 					</tr>
@@ -105,6 +109,11 @@ <h3 class="underline">New CAN Mapping</h3>
 						<td><input type="number" step="1" min="1" max="100" id="cangain"></td>
 						<td>Specify a gain to scale the value up or down</td>
 					</tr>
+					<tr>
+						<td>Offset</td>
+						<td><input type="number" step="1" min="-128" max="127" id="canoffset"></td>
+						<td>Specify an offset to add to the value</td>
+					</tr>
 				</table>
 				<button onclick="ui.canMapping();">
 					<!-- /icon-check-circle.png -->
@@ -151,17 +160,16 @@ <h3 class="underline">New CAN Mapping</h3>
 					<img class="navimg" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAdRJREFUSInF1T1rlEEUBeBHYpHFJZDFQkhqsxELwdrPwlLtLP0g+heU+Ee0sLIViRYWJgGjEFBT6ppEsDGFNsYQLSUWc4d9s072fSOIB6Y598y5l7kzd/jHOFAT7+AyLqKLyeA3sIqnmMO3/SZuYRZb2KlZ30Pbamo+iZWKwXPMYAqHYnVxE/MV3QommphvxIY1nG5Q0Bmsx56NYUlalcpfYLyBecY4lmLvG4yWRLP6lQ+an8Az/MBXPCxU2sHH8LgzaN7Rb+jgsZzET3829wuODGjP6jd+V5E39Bs6iNzIBxiT+rQQ3L2CPseuVcm5IGcKGx6hJ92ejOOhf1fQ34rY4yq5FuRUYUMJF4Yk6EZstUpuB9muMR6RjjPr7xY07Yht7zfBSFScm3w/uEGMRXyrSjY5opyghyv2nmO7juhgkD0cxalIVsIvqbl1yNf8fZW8HlnnGxjUYTG8rlbJjvQ4dqTZshdeYXlI/Hx4bCqMmjwqPuHwXySojorbJcEo3oZgqVTBEHTwUs2wIw2wPK7XpdlSh3P6lX/W4E+YiCryfV+Qnv+09E7aOBbcYkX3uol5xqg0cnPjh61N6cyLx1L36Y/jkvTpT9v96X+QPv0nkeT/4DdxyppwcyvRBAAAAABJRU5ErkJggg=="><p class="navbar-text">SUPPORT</p></a>
 			</div>
 
-			<!-- spinner div -->
-			<div id="spinner-div" class="control">
-				<img style="vertical-align:middle" src="ajax-loader.gif"><p> refreshing...</p>
-			</div>
-
 			<!-- auto reload toggle -->
 			<div id="auto-reload-toggle-div" class="control small-screen-hide">
 				<label class="switch">
 					<input id="auto-reload-checkbox" type="checkbox" onclick="ui.setAutoReload(this.checked);"><span class="slider round"></span>
 				</label><p style="display: inline-block;">Auto reload</p>
 			</div>
+			<!-- spinner div -->
+			<div id="spinner-div" class="control">
+				<img style="vertical-align:middle" src="ajax-loader.gif"><p> refreshing...</p>
+			</div>
 			<!-- beta features toggle -->
 			<div id="beta-features-toggle-div" onclick="ui.toggleBetaFeaturesVisibility();" class="control small-screen-hide">
 				<label class="switch">
@@ -504,9 +512,10 @@ <h3 class="underline">Existing CAN Mappings</h3>
 								<th>Spot Value</th>
 								<th>Transmit or Receive</th>
 								<th>ID</th>
-								<th>Offset</th>
+								<th>Position</th>
 								<th>Length</th>
 								<th>Gain</th>
+								<th>Offset</th>
 								<th>Delete Mapping</th>
 							</tr>
 						</table>
diff --git a/data/inverter.js b/data/inverter.js
index 7286023..c484890 100644
--- a/data/inverter.js
+++ b/data/inverter.js
@@ -34,10 +34,23 @@ var paramsCache = {
       {
         if ( name in paramsCache.data ) {
           if ( paramsCache.data[name].enums ) {
-                return paramsCache.data[name].enums[paramsCache.data[name].value];
-            } else {
-              return paramsCache.data[name].value;
-            }
+            if (paramsCache.data[name].enums[paramsCache.data[name].value])
+			{
+				return paramsCache.data[name].enums[paramsCache.data[name].value];
+			}
+			else
+			{
+				var active = [];
+				for (var key in paramsCache.data[name].enums)
+				{
+					if (paramsCache.data[name].value & key)
+						active.push(paramsCache.data[name].enums[key]);
+				}
+				return active.join('|');
+			}
+          } else {
+            return paramsCache.data[name].value;
+          }
         }
       }
       return null;
@@ -79,6 +92,23 @@ var inverter = {
 		{
 			if (replyFunc) replyFunc(this.responseText);
 		}
+		xmlhttp.onreadystatechange = function() {
+			if (xmlhttp.readyState === XMLHttpRequest.DONE) {
+				console.log(req + ": " + xmlhttp.status);
+				if (xmlhttp.status != 200) {
+					paramsCache.failedFetchCount += 1;
+					if ( paramsCache.failedFetchCount >= 2 && typeof ui !== 'undefined'){
+						ui.showCommunicationErrorBar();
+					}
+				}
+				else {
+					paramsCache.failedFetchCount = 0;
+				}
+				if ( paramsCache.failedFetchCount < 2 && typeof ui !== 'undefined') {
+					ui.hideCommunicationErrorBar();
+				}
+			}
+		}
 
 		if (repeat)
 			req += "&repeat=" + repeat;
@@ -106,18 +136,10 @@ var inverter = {
 					if (name == "version")
 						inverter.firmwareVersion = parseFloat(param.value);
 				}
-				paramsCache.failedFetchCount = 0;
 			}
 			catch(ex)
 			{
-        paramsCache.failedFetchCount += 1;
-        if ( paramsCache.failedFetchCount >= 2 ){
-          ui.showCommunicationErrorBar();
-        }
-			}
-			if ( paramsCache.failedFetchCount < 2 )
-			{
-				ui.hideCommunicationErrorBar();
+				console.error('Failed to parse params:', ex);
 			}
 			paramsCache.setData(params);
 			if (replyFunc) replyFunc(params);
@@ -144,10 +166,7 @@ var inverter = {
 			replyFunc(values);
 		};
 
-		if (inverter.firmwareVersion < 3.53 || items.length > 10)
-			inverter.sendCmd("get " + items.join(','), process, repeat);
-		else
-			inverter.sendCmd("stream " + repeat + " " + items.join(','), process);
+		inverter.sendCmd("stream " + repeat + " " + items.join(','), process);
 	},
 
 
diff --git a/data/style.css b/data/style.css
index 9f9f0ef..b2d9717 100644
--- a/data/style.css
+++ b/data/style.css
@@ -656,3 +656,22 @@ input:checked + .slider:before {
 .communication-error-bar p {
     text-align: center;
 }
+
+.param-success-bar {
+    display: none;
+    padding: 15px;
+    background-color: #4caf50;
+    color: white;
+    z-index: 100;
+    margin: 0 auto;
+    position: relative;
+    width: 30%;
+    top: 0px;
+    clear: left;
+    height: 20px;
+    border-radius: 0px 0px 20px 20px;
+}
+
+.param-success-bar p {
+    text-align: center;
+}
diff --git a/data/ui.js b/data/ui.js
index 2fa501b..656f2bd 100644
--- a/data/ui.js
+++ b/data/ui.js
@@ -26,6 +26,8 @@ var ui = {
   //Handle for auto refresh interval
   autoRefreshHandle: 0,
 
+	navbarIsBig: true,
+
 	// temp variable to store updates from Parameter Database
 	paramUpdates: "",
 
@@ -33,12 +35,12 @@ var ui = {
 	categoryVisible: {},
 
 	shrinkNavbar: function() {
-		document.getElementById("navbar").style.width = "80px";
+		document.getElementById("navbar").style.width = "60px";
 		var cw = document.getElementById("content-wrapper");
-		cw.style.left = "80px";
-		cw.style.width = "calc(100% - 80px)";
+		cw.style.left = "60px";
+		cw.style.width = "calc(100% - 60px)";
 		var logo = document.getElementById("logo");
-		logo.style.width = "80px";
+		logo.style.width = "60px";
 		logo.style.height = "50px";
 		// buttons
 		var buttons = document.getElementsByClassName("buttonimg");
@@ -134,13 +136,27 @@ var ui = {
 		ui.updateTables();
 		plot.generateChart();
 		ui.parameterDatabaseCheckForUpdates();
-		ui.populateSpotValueDropDown();
 		ui.populateExistingCanMappingTable();
 		wifi.populateWiFiTab();
 		ui.populateFileList();
 		ui.refreshStatusBox();
 		ui.refreshMessagesBox();
 		ui.setAutoReload(true);
+
+		// Pause auto-refresh while the user is editing a parameter field, resume when done
+		var paramsTable = document.getElementById('params');
+		paramsTable.addEventListener('focusin', function(event) {
+			if (event.target.tagName === 'INPUT' || event.target.tagName === 'SELECT') {
+				clearInterval(ui.autoRefreshHandle);
+			}
+		});
+		paramsTable.addEventListener('focusout', function(event) {
+			if (event.target.tagName === 'INPUT' || event.target.tagName === 'SELECT') {
+				if (document.getElementById('auto-reload-checkbox').checked) {
+					ui.autoRefreshHandle = setInterval(ui.refresh, 2000);
+				}
+			}
+		});
 	},
 
 	/** @brief automatically update data on the UI */
@@ -229,7 +245,7 @@ var ui = {
 						if (param.enums[param.value])
 						{
 
-						    valInput = '<SELECT onchange="ui.showParamUpdateModal(\'' + name + '\', this.value)">';
+						    valInput = '<SELECT onchange="ui.sendParameterUpdate(\'' + name + '\', this.value)">';
 
 						    for (var idx in param.enums)
 						    {
@@ -254,7 +270,7 @@ var ui = {
 					else
 					{
 						valInput = '<INPUT type="number" min="' + param.minimum + '" max="' + param.maximum +
-							'" step="0.05" value="' + param.value + '" onchange="ui.showParamUpdateModal(\'' + name + '\', this.value)"/>';
+							'" step="' + (Number.isInteger(param.value) ? 1 : 0.04) + '" value="' + param.value + '" onchange="ui.sendParameterUpdate(\'' + name + '\', this.value)"/>';
 					}
 
 					if (param.i !== undefined)
@@ -297,6 +313,7 @@ var ui = {
       ui.populateVersion();
 			document.getElementById("paramDownload").href = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(params, null, 2));
 			document.getElementById("spinner-div").style.visibility = "hidden";
+			ui.populateSpotValueDropDown();
 		});
 	},
 
@@ -326,7 +343,7 @@ var ui = {
 		versionDiv.innerHTML = "";
 		var firmwareVersion = String(paramsCache.get('version'));
 		versionDiv.innerHTML += "firmware : " + firmwareVersion + "<br>";
-		versionDiv.innerHTML += "web : v2.0"
+		versionDiv.innerHTML += "web : v2.3"
 	},
 
 	/** @brief If beta features are visible, hide them. If hidden, show them. */
@@ -372,6 +389,16 @@ var ui = {
 		document.getElementById('communication-error-bar').style.display = 'none';
 	},
 
+	/** @brief Show green success bar with a message, then auto-hide after a delay */
+	showParamSuccessBar: function(message) {
+		document.getElementById('param-success-bar-text').textContent = message;
+		document.getElementById('param-success-bar').style.display = 'block';
+		clearTimeout(ui.paramSuccessBarTimer);
+		ui.paramSuccessBarTimer = setTimeout(function() {
+			document.getElementById('param-success-bar').style.display = 'none';
+		}, 2000);
+	},
+
 	/**
 	 * ~~~ DASHBOARD ~~~
 	 */
@@ -383,11 +410,6 @@ var ui = {
 		var statusDiv = document.getElementById('top-left');
 
 		var status = paramsCache.get('status');
-
-		if ( status == null ){
-			return;
-		}
-
 		var lasterr = paramsCache.get('lasterr');
 		var udc = paramsCache.get('udc');
 		var tmphs = paramsCache.get('tmphs');
@@ -398,51 +420,60 @@ var ui = {
 		var tbl = document.createElement('table');
 		var tbody = document.createElement('tbody');
 		// status
-		var tr = document.createElement('tr');
-		var td = document.createElement('td');
-		td.appendChild(document.createTextNode('Status'));
-		tr.appendChild(td);
-		td = document.createElement('td');
-		td.appendChild(document.createTextNode(status));
-		tr.appendChild(td);
-		tbody.appendChild(tr);
+		if (status != null) {
+			var tr = document.createElement('tr');
+			var td = document.createElement('td');
+			td.appendChild(document.createTextNode('Status'));
+			tr.appendChild(td);
+			td = document.createElement('td');
+			td.appendChild(document.createTextNode(status));
+			tr.appendChild(td);
+			tbody.appendChild(tr);
+		}
 		// opmode
-		tr = document.createElement('tr');
-	    td = document.createElement('td');
-		td.appendChild(document.createTextNode('Opmode'));
-		tr.appendChild(td);
-		td = document.createElement('td');
-		td.appendChild(document.createTextNode(opmode));
-		tr.appendChild(td);
-		tbody.appendChild(tr);
+		if (opmode != null) {
+			var tr = document.createElement('tr');
+			var td = document.createElement('td');
+			td.appendChild(document.createTextNode('Opmode'));
+			tr.appendChild(td);
+			td = document.createElement('td');
+			td.appendChild(document.createTextNode(opmode));
+			tr.appendChild(td);
+			tbody.appendChild(tr);
+		}
 		// lasterr
-		tr = document.createElement('tr');
-		td = document.createElement('td');
-		td.appendChild(document.createTextNode('Last error'));
-		tr.appendChild(td);
-		td = document.createElement('td');
-		td.appendChild(document.createTextNode(lasterr));
-		tr.appendChild(td);
-		tbody.appendChild(tr);
+		if (lasterr != null) {
+			var tr = document.createElement('tr');
+			var td = document.createElement('td');
+			td.appendChild(document.createTextNode('Last error'));
+			tr.appendChild(td);
+			td = document.createElement('td');
+			td.appendChild(document.createTextNode(lasterr));
+			tr.appendChild(td);
+			tbody.appendChild(tr);
+		}
 		// udc
-		tr = document.createElement('tr');
-		td = document.createElement('td');
-		td.appendChild(document.createTextNode('Battery voltage (udc)'));
-		tr.appendChild(td);
-		td = document.createElement('td');
-		td.appendChild(document.createTextNode(udc));
-		tr.appendChild(td);
-		tbody.appendChild(tr);
+		if (udc != null) {
+			var tr = document.createElement('tr');
+			var td = document.createElement('td');
+			td.appendChild(document.createTextNode('Battery voltage (udc)'));
+			tr.appendChild(td);
+			td = document.createElement('td');
+			td.appendChild(document.createTextNode(udc));
+			tr.appendChild(td);
+			tbody.appendChild(tr);
+		}
 		// tmphs
-		tr = document.createElement('tr');
-		td = document.createElement('td');
-		td.appendChild(document.createTextNode('Inverter temperature'));
-		tr.appendChild(td);
-		td = document.createElement('td');
-		td.appendChild(document.createTextNode(tmphs));
-		tr.appendChild(td);
-		tbody.appendChild(tr);
-
+		if (tmphs != null) {
+			var tr = document.createElement('tr');
+			var td = document.createElement('td');
+			td.appendChild(document.createTextNode('Inverter temperature'));
+			tr.appendChild(td);
+			td = document.createElement('td');
+			td.appendChild(document.createTextNode(tmphs));
+			tr.appendChild(td);
+			tbody.appendChild(tr);
+		}
 
 		tbl.appendChild(tbody);
 		statusDiv.appendChild(tbl);
@@ -562,13 +593,10 @@ var ui = {
 
 		xmlhttp.onload = function()
 		{
-			// Show popup reporting upload completion
-			modal.emptyModal('small');
-			modal.appendToModal('small', 'File upload complete');
-			modal.showModal('small');
+			// Show non-intrusive success notification
+			ui.showParamSuccessBar('File upload complete');
 			// Refresh the list of files on the 'files' page
 			ui.populateFileList();
-			setTimeout(function() { modal.hideModal('small') }, 2000);
 		}
 
 		xmlhttp.open("POST", "/edit");
@@ -787,19 +815,14 @@ var ui = {
      * ~~~ PARAMETERS ~~~
      */
 
-    /** @brief Show modal box with the result of parameter update */
-    showParamUpdateModal: async function(param, value)
+    /** @brief Send parameter update to inverter and show result in success bar */
+    sendParameterUpdate: function(param, value)
     {
     	var c = 'set ' + param + ' ' + value;
-    	modal.emptyModal('small');
-    	modal.showModal('small');
-    	modal.appendToModal('small', 'Setting ' + param + ' to ' + value + "<br>");
     	inverter.sendCmd(c, function(reply)
 		{
-			modal.appendToModal('small', reply);
+			ui.showParamSuccessBar(param + ' = ' + value + ' \u2014 ' + reply.trim());
 		});
-		await sleep(2000);
-		modal.hideModal('small');
     },
 
     /** @brief Show confirmation that params have been saved */
@@ -1268,6 +1291,9 @@ var ui = {
 		        	// cangain
 					var canGainCell = tr.insertCell(-1);
 		        	canGainCell.innerHTML = param.cangain;
+		        	// canoffset value (value offset to add)
+					var canOffsetValCell = tr.insertCell(-1);
+		        	canOffsetValCell.innerHTML = typeof param.canoffset_value !== 'undefined' ? param.canoffset_value : 0;
 		        	// delete button
 					var canDeleteCell = tr.insertCell(-1);
 					var cmd = "inverter.canMapping('del', '" + name + "');ui.populateExistingCanMappingTable();";
@@ -1281,6 +1307,8 @@ var ui = {
 	populateSpotValueDropDown: function()
 	{
 		var select = document.getElementById("add-can-mapping-spot-value-drop-down");
+		// Clear existing options before repopulating to avoid duplicates on refresh
+		while (select.options.length > 0) select.remove(0);
 		inverter.getParamList(function(values) {
 			for (var name in values) {
 				var param = values[name];
diff --git a/esp8266-web-interface.ino b/esp8266-web-interface.ino
index e805aef..4749684 100644
--- a/esp8266-web-interface.ino
+++ b/esp8266-web-interface.ino
@@ -113,7 +113,8 @@ bool handleFileRead(String path){
     if(SPIFFS.exists(pathWithGz))
       path += ".gz";
     File file = SPIFFS.open(path, "r");
-    size_t sent = server.streamFile(file, contentType);
+    server.sendHeader("Cache-Control", "max-age=86400");
+    server.streamFile(file, contentType);
     file.close();
     return true;
   }
@@ -380,7 +381,7 @@ static void handleWifi()
   if (updated)
   {
     File file = SPIFFS.open("/wifi-updated.html", "r");
-    size_t sent = server.streamFile(file, getContentType("wifi-updated.html"));
+    server.streamFile(file, getContentType("wifi-updated.html"));
     file.close();    
   }
 }
@@ -769,7 +770,6 @@ void setup(void){
   });
 
   server.begin();
-  server.client().setNoDelay(1);
 
   MDNS.addService("http", "tcp", 80);
 }

From 79410ba9371134cb61ce00596fd8be2b765bea43 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 28 Apr 2026 11:35:14 +0000
Subject: [PATCH 2/2] use strict inequality for HTTP status comparison in
 inverter.js

Agent-Logs-Url: https://github.com/jsphuebner/esp8266-web-interface/sessions/cf75e917-53ed-4e7d-a001-1abb2cffa1c1

Co-authored-by: jsphuebner <3882041+jsphuebner@users.noreply.github.com>
---
 data/inverter.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/data/inverter.js b/data/inverter.js
index c484890..a52c7de 100644
--- a/data/inverter.js
+++ b/data/inverter.js
@@ -95,7 +95,7 @@ var inverter = {
 		xmlhttp.onreadystatechange = function() {
 			if (xmlhttp.readyState === XMLHttpRequest.DONE) {
 				console.log(req + ": " + xmlhttp.status);
-				if (xmlhttp.status != 200) {
+				if (xmlhttp.status !== 200) {
 					paramsCache.failedFetchCount += 1;
 					if ( paramsCache.failedFetchCount >= 2 && typeof ui !== 'undefined'){
 						ui.showCommunicationErrorBar();