Check web UI version and show alert on mismatch with Firmware version (#1329)

* SHhw Web UI version and compare it with the firmware. If it does not match, show a warning in the log

* compare version on Web UI loading and show alert on mismatch

* restructured info page

code/main/main.cpp

@@ -35,6 +35,7 @@ extern const char* GIT_REV;
 extern const char* GIT_BRANCH;
 extern const char* BUILD_TIME;
 
+extern const char* getHTMLversion(void);
 
 #define __HIDE_PASSWORD
 
@@ -145,16 +146,9 @@ void task_NoSDBlink(void *pvParameter)
 extern "C" void app_main(void)
 {
     TickType_t xDelay;
-    string versionFormated = "Branch: '" + std::string(GIT_BRANCH) + "', Tag: '" + std::string(GIT_TAG) + \
-            "', Revision: " + std::string(GIT_REV) +", Date/Time: " + std::string(BUILD_TIME);
 
     ESP_LOGI(TAG, "\n\n\n\n\n"); // Add mark on log to see when it restarted
-    ESP_LOGD(TAG, "=============================================================================================");
-    ESP_LOGD(TAG, "%s", versionFormated.c_str());
-    ESP_LOGD(TAG, "=============================================================================================");
-    ESP_LOGD(TAG, "Reset reason: %s", getResetReason().c_str());
-
-
+    
     PowerResetCamera();
     esp_err_t cam = Camera.InitCam();
     Camera.LightOnOff(false);
@@ -162,13 +156,25 @@ extern "C" void app_main(void)
     ESP_LOGD(TAG, "After camera initialization: sleep for: %ldms", (long) xDelay);
     vTaskDelay( xDelay );   
 
-
     if (!Init_NVS_SDCard())
     {
         xTaskCreate(&task_NoSDBlink, "task_NoSDBlink", configMINIMAL_STACK_SIZE * 64, NULL, tskIDLE_PRIORITY+1, NULL);
         return;
     };
 
+    string versionFormated = "Branch: '" + std::string(GIT_BRANCH) + \
+        "', Revision: " + std::string(GIT_REV) +", Date/Time: " + std::string(BUILD_TIME) + \
+        ", Web UI: " + getHTMLversion();
+
+    if (std::string(GIT_TAG) != "") { // We are on a tag, add it as prefix
+        string versionFormated = "Tag: '" + std::string(GIT_TAG) + "', " + versionFormated;
+    }
+
+    ESP_LOGD(TAG, "=============================================================================================");
+    ESP_LOGD(TAG, "%s", versionFormated.c_str());
+    ESP_LOGD(TAG, "=============================================================================================");
+    ESP_LOGD(TAG, "Reset reason: %s", getResetReason().c_str());
+
     CheckOTAUpdate();
 
     LogFile.CreateLogDirectories();
@@ -221,6 +227,10 @@ extern "C" void app_main(void)
     LogFile.WriteToFile(ESP_LOG_INFO, TAG, versionFormated);
     LogFile.WriteToFile(ESP_LOG_INFO, TAG, "Reset reason: " + getResetReason());
 
+    if (std::string(getHTMLversion()) != std::string(GIT_REV)) {
+        LogFile.WriteToFile(ESP_LOG_WARN, TAG, "Web UI version does not match firmware version!");
+    }
+
     std::string zw = gettimestring("%Y%m%d-%H%M%S");
     ESP_LOGD(TAG, "time %s", zw.c_str());
 

sd-card/html/common.js

@@ -31,26 +31,72 @@ function LoadHostname() {
 }
 
 
-function LoadVersion() {
+var fwVersion = "";
+var webUiVersion = "";
+
+function LoadFwVersion() {
     _basepath = getbasepath(); 
 
     var xhttp = new XMLHttpRequest();
     xhttp.addEventListener('load', function(event) {
         if (xhttp.status >= 200 && xhttp.status < 300) {
-            version = xhttp.responseText;
-            document.getElementById("Version").innerHTML  = version;
+            fwVersion = xhttp.responseText;
+            document.getElementById("Version").innerHTML  = fwVersion;
+            console.log(fwVersion);
+            compareVersions();
         } 
         else {
-                console.warn(request.statusText, request.responseText);
+            console.warn(request.statusText, request.responseText);
+            fwVersion = "NaN";
         }
     });
 
     try {
-            url = _basepath + '/version?type=GitBaseBranch';     
-            xhttp.open("GET", url, true);
-            xhttp.send();
+        url = _basepath + '/version?type=GitBaseBranch';     
+        xhttp.open("GET", url, true);
+        xhttp.send();
+    }
+    catch (error) {
+        fwVersion = "NaN";
+    }
+}
+
+function LoadWebUiVersion() {
+    _basepath = getbasepath(); 
+
+    var xhttp = new XMLHttpRequest();
+    xhttp.addEventListener('load', function(event) {
+        if (xhttp.status >= 200 && xhttp.status < 300) {
+            webUiVersion = xhttp.responseText;
+            console.log("Web UI Version: " + webUiVersion);
+            compareVersions();
+        } 
+        else {
+            console.warn(request.statusText, request.responseText);
+            webUiVersion = "NaN";
+        }
+    });
 
+    try {
+        url = _basepath + '/version?type=HTMLVersion';     
+        xhttp.open("GET", url, true);
+        xhttp.send();
+    }
+    catch (error) {
+        webUiVersion = "NaN";
+    }
+}
+
+
+function compareVersions() {
+    if (fwVersion == "" || webUiVersion == "") {
+        return;
+    }
+
+    arr = fwVersion.split(" ");
+    fWGitHash = arr[arr.length - 1].substring(0, 7);
+    
+    if (fWGitHash != webUiVersion) {
+        alert("The Version of the Web Interface does not match the Firmware Version!");
     }
-    catch (error)
-    {}
 }

sd-card/html/index.html

@@ -83,7 +83,8 @@
 
 <script type="text/javascript">
   LoadHostname();
-  LoadVersion();
+  LoadFwVersion();
+  LoadWebUiVersion();
 </script>
 
 </div>

sd-card/html/info.html

@@ -37,13 +37,10 @@ div {
 			</div>
 		</td>
 	</tr>
-	</table>
+</table>
 
 
-<table style="font-family: arial">
 <h3>Host Info</h3>
-
-
 <table style="font-family: arial">
 	<tr>
 		<td>
@@ -77,8 +74,64 @@ div {
 	</tr>
 </table>
 
-
+<h3>Version Info</h3>
 <table style="font-family: arial">
+  <tr>
+	<td>
+		Git-Branch:
+	</td>
+	<td>
+		<div id="gitbranch">
+			<object data="/version?type=GitBranch"></object>
+		</div>
+	</td>
+  </tr>
+
+  <tr>
+	<td>
+		Git-Tag:
+	</td>
+	<td>
+		<div>
+			<object data="/version?type=GitTag"></object>
+		</div>
+	</td>
+  </tr>
+
+  <tr>
+	<td>
+		Git-Revision:
+	</td>
+	<td>
+		<div>
+			<object data="/version?type=GitRevision"></object>
+		</div>
+	</td>
+  </tr>
+
+  <tr>
+	<td>
+		Build Time:
+	</td>
+	<td>
+		<div>
+			<object data="/version?type=BuildTime"></object>
+		</div>
+	</td>
+  </tr>
+
+	<tr>
+	<td>
+		HTML Version:
+	</td>
+	<td>
+		<div>
+			<object data="/version?type=HTMLVersion"></object>
+		</div>
+	</td>
+  </tr>
+</table>
+
 <h3>SD Card Info</h3>
 <table style="font-family: arial">
 	<tr>
@@ -153,67 +206,6 @@ div {
 	</tr>
 </table>
 
-
-<table style="font-family: arial">
-<h3>Version Info</h3>
-
-<table style="font-family: arial">
-  <tr>
-	<td>
-		Git-Branch:
-	</td>
-	<td>
-		<div id="gitbranch">
-			<object data="/version?type=GitBranch"></object>
-		</div>
-	</td>
-  </tr>
-
-  <tr>
-	<td>
-		Git-Tag:
-	</td>
-	<td>
-		<div>
-			<object data="/version?type=GitTag"></object>
-		</div>
-	</td>
-  </tr>
-
-  <tr>
-	<td>
-		Git-Revision:
-	</td>
-	<td>
-		<div>
-			<object data="/version?type=GitRevision"></object>
-		</div>
-	</td>
-  </tr>
-
-  <tr>
-	<td>
-		Build Time:
-	</td>
-	<td>
-		<div>
-			<object data="/version?type=BuildTime"></object>
-		</div>
-	</td>
-  </tr>
-
-	<tr>
-	<td>
-		HTML Version:
-	</td>
-	<td>
-		<div>
-			<object data="/version?type=HTMLVersion"></object>
-		</div>
-	</td>
-  </tr>
-</table>
-
 <h3>Copyright</h3>
 Copyright &copy; 2020 - 2022 by <a href="https://github.com/jomjol/AI-on-the-edge-device" target=_blank>Jomjol</a> and others.