prepare websocket for dynamic data

IgorYbema · Sep 3, 2024 · 8eb712b · 8eb712b
1 parent a494440
commit 8eb712b
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 6 deletions.
diff --git a/HeishaMon/HeishaMon.ino b/HeishaMon/HeishaMon.ino
@@ -402,8 +402,11 @@ void log_message(char* string)
       mqtt_client.disconnect();
     }
   }
-  websocket_write_all(log_line, strlen(log_line));
+  char* websocketMsg = (char *) malloc(len+12);
+  snprintf(websocketMsg, len+12, "{\"logMsg\":\"%s\"}", log_line);
   free(log_line);
+  websocket_write_all(websocketMsg, strlen(websocketMsg));
+  free(websocketMsg);
 #ifdef ESP32
   if (!inSetup) blinkNeoPixel(false);
 #endif  

diff --git a/HeishaMon/htmlcode.h b/HeishaMon/htmlcode.h
@@ -49,11 +49,15 @@ static const char websocketJS[] PROGMEM =
   "      };"
   ""
   "      oWebsocket.onmessage = function(evt) {"
-  "        let obj = document.getElementById(\"cli\");"
-  "        let chk = document.getElementById(\"autoscroll\");"
-  "        obj.value += evt.data + \"\\n\";"
-  "        if(chk.checked) {"
-  "          obj.scrollTop = obj.scrollHeight;"
+  "        const jsonObject = JSON.parse(evt.data);"
+  "        if (jsonObject.hasOwnProperty('logMsg')) {"
+  "          let obj = document.getElementById(\"cli\");"
+  "          let chk = document.getElementById(\"autoscroll\");"
+  "          obj.value += jsonObject['logMsg'] + \"\\n\";"
+  "          if(chk.checked) {"
+  "            obj.scrollTop = obj.scrollHeight;"
+  "          }"
+  "        } else if (jsonObject.hasOwnProperty('data')) {"
   "        }"
   "      }"
   "    }"
@@ -92,9 +96,11 @@ static const char refreshJS[] PROGMEM =
   "       tableBody.innerHTML = '';"  
   "       jsonData.heatpump.forEach(item => {"
   "         const row = document.createElement('tr');"
+  "         const topic = item['Topic'];"
   "         for (const key in item) {"
   "           if (Object.hasOwn(item,key)) {"
   "             const cell = document.createElement('td');"
+  "             cell.id = `${topic}-${key}`;"
   "             cell.textContent = item[key];"
   "             row.appendChild(cell);"
   "           }"
@@ -106,9 +112,11 @@ static const char refreshJS[] PROGMEM =
   "       const tableBody = document.getElementById('heishavalues');"  
   "       jsonData['heatpump extra'].forEach(item => {"
   "         const row = document.createElement('tr');"
+  "         const topic = item['Topic'];"  
   "         for (const key in item) {"
   "           if (Object.hasOwn(item,key)) {"
   "             const cell = document.createElement('td');"
+  "             cell.id = `${topic}-${key}`;"
   "             cell.textContent = item[key];"
   "             row.appendChild(cell);"
   "           }"
@@ -120,9 +128,11 @@ static const char refreshJS[] PROGMEM =
   "       const tableBody = document.getElementById('heishavalues');"  
   "       jsonData['heatpump optional'].forEach(item => {"
   "         const row = document.createElement('tr');"
+  "         const topic = item['Topic'];"  
   "         for (const key in item) {"
   "           if (Object.hasOwn(item,key)) {"
   "             const cell = document.createElement('td');"
+  "             cell.id = `${topic}-${key}`;"
   "             cell.textContent = item[key];"
   "             row.appendChild(cell);"
   "           }"
@@ -135,9 +145,11 @@ static const char refreshJS[] PROGMEM =
   "       tableBody.innerHTML = '';"  
   "       jsonData['1wire'].forEach(item => {"  
   "         const row = document.createElement('tr');"
+  "         const sensorID = item['Sensor'];"  
   "         for (const key in item) {"
   "           if (Object.hasOwn(item,key)) {"
   "             const cell = document.createElement('td');"
+  "             cell.id = `SensorID-${sensorID}-${key}`;"  
   "             if (key === 'Alias') {"
   "               const div = document.createElement('div');"
   "               div.textContent = item[key];"
@@ -161,10 +173,12 @@ static const char refreshJS[] PROGMEM =
   "       tableBody.innerHTML = '';"  
   "       jsonData.s0.forEach(item => {"  
   "         const row = document.createElement('tr');"  
+  "         const s0Port = item['S0 port'];"
   "         for (const key in item) {"
   "           if (Object.hasOwn(item,key)) {"
   "             const cell = document.createElement('td');"
   "             cell.textContent = item[key];"
+  "             cell.id = `s0port-${s0Port}-${key}`;"  
   "             row.appendChild(cell);"
   "           }"
   "         }"
@@ -179,6 +193,9 @@ static const char refreshJS[] PROGMEM =
   "         const nameCell = document.createElement('td');"
   "         const typeCell = document.createElement('td');"
   "         const valueCell = document.createElement('td');"
+  "         nameCell.id = key;"
+  "         typeCell.id = `${key}-type`;"
+  "         valueCell.id = `${key}-value`;"
   "         nameCell.textContent = key;"
   "         typeCell.textContent = type;"
   "         valueCell.textContent = value;"