Cell display update

Software/src/devboard/webserver/cellmonitor_html.cpp

@@ -11,44 +11,147 @@ String cellmonitor_processor(const String& var) {
     content += ".cell { width: 48%; margin: 1%; padding: 10px; border: 1px solid white; text-align: center; }";
     content += ".low-voltage { color: red; }";              // Style for low voltage text
     content += ".voltage-values { margin-bottom: 10px; }";  // Style for voltage values section
+    content += "#graph {display: flex;align-items: flex-end;height: 200px;border: 1px solid #ccc;position: relative;}";
+    content +=
+        ".bar {margin: 0 0px;background-color: blue;display: inline-block;position: relative;cursor: pointer;border: "
+        "1px solid white; /* Add this line */}";
+    content += "#valueDisplay {text-align: left;font-weight: bold;margin-top: 10px;}";
     content += "</style>";
 
     // Start a new block with a specific background color
     content += "<div style='background-color: #303E47; padding: 10px; margin-bottom: 10px; border-radius: 50px'>";
 
     // Display max, min, and deviation voltage values
-    content += "<div class='voltage-values'>";
+    content += "<div id='voltageValues' class='voltage-values'></div>";
-    content += "Max Voltage: " + String(system_cell_max_voltage_mV) + " mV<br>";
+    // Display cells
-    content += "Min Voltage: " + String(system_cell_min_voltage_mV) + " mV<br>";
+    content += "<div id='cellContainer' class='container'></div>";
-    int deviation = system_cell_max_voltage_mV - system_cell_min_voltage_mV;
+    // Display bars
-    content += "Voltage Deviation: " + String(deviation) + " mV";
+    content += "<div id='graph'></div>";
-    content += "</div>";
+    // Display single hovered value
-
+    content += "<div id='valueDisplay'>Value: ...</div>";
-    // Visualize the populated cells in forward order using flexbox with conditional text color
-    content += "<div class='container'>";
-    for (int i = 0; i < 120; ++i) {
-      // Skip empty values
-      if (system_cellvoltages_mV[i] == 0) {
-        continue;
-      }
-
-      String cellContent = "Cell " + String(i + 1) + "<br>" + String(system_cellvoltages_mV[i]) + " mV";
-
-      // Check if the cell voltage is below 3000, apply red color
-      if (system_cellvoltages_mV[i] < 3000) {
-        cellContent = "<span class='low-voltage'>" + cellContent + "</span>";
-      }
-
-      content += "<div class='cell'>" + cellContent + "</div>";
-    }
-    content += "</div>";
 
     // Close the block
     content += "</div>";
 
     content += "<button onclick='goToMainPage()'>Back to main page</button>";
     content += "<script>";
+    // Populate cell data
+    content += "const data = [";
+    for (uint8_t i = 0u; i < 120; i++) {
+      if (system_cellvoltages_mV[i] == 0) {
+        continue;
+      }
+      content += String(system_cellvoltages_mV[i]) + ",";
+    }
+    content += "];";
+
+    content += "const min_mv = Math.min(...data) - 20;";
+    content += "const max_mv = Math.max(...data) + 20;";
+    content += "const min_index = data.indexOf(Math.min(...data));";
+    content += "const max_index = data.indexOf(Math.max(...data));";
+    content += "const graphContainer = document.getElementById('graph');";
+    content += "const valueDisplay = document.getElementById('valueDisplay');";
+    content += "const cellContainer = document.getElementById('cellContainer');";
+
     content += "function goToMainPage() { window.location.href = '/'; }";
+
+    // Arduino-style map() function
+    content +=
+        "function map(value, fromLow, fromHigh, toLow, toHigh) {return (value - fromLow) * (toHigh - toLow) / "
+        "(fromHigh - fromLow) + toLow;}";
+
+    // Mark cell and bar with highest/lowest values
+    content +=
+        "function checkMinMax(cell, bar, index) {if ((index == min_index) || (index == max_index)) "
+        "{cell.style.borderColor = 'red';bar.style.borderColor = 'red';}}";
+
+    // Bar function. Basically get the mV, scale the height and add a bar div to its container
+    content +=
+        "function createBars(data) {"
+        "data.forEach((mV, index) => {"
+        "const bar = document.createElement('div');"
+        "const mV_limited = map(mV, min_mv, max_mv, 20, 200);"
+        "bar.className = 'bar';"
+        "bar.id = `barIndex${index}`;"
+        "bar.style.height = `${mV_limited}px`;"
+        "bar.style.width = `${750/data.length}px`;"
+
+        "const cell = document.getElementById(`cellIndex${index}`);"
+
+        "checkMinMax(cell, bar, index);"
+
+        "bar.addEventListener('mouseenter', () => {"
+        "valueDisplay.textContent = `Value: ${mV}`;"
+        "bar.style.backgroundColor = `lightblue`;"
+        "cell.style.backgroundColor = `blue`;"
+        "});"
+
+        "bar.addEventListener('mouseleave', () => {"
+        "valueDisplay.textContent = 'Value: ...';"
+        "bar.style.backgroundColor = `blue`;"
+        "cell.style.removeProperty('background-color');"
+        "});"
+
+        "graphContainer.appendChild(bar);"
+        "});"
+        "}";
+
+    // Cell population function. For each value, add a cell block with its value
+    content +=
+        "function createCells(data) {"
+        "data.forEach((mV, index) => {"
+        "const cell = document.createElement('div');"
+        "cell.className = 'cell';"
+        "cell.id = `cellIndex${index}`;"
+        "let cellContent = `Cell ${index + 1}<br>${mV} mV`;"
+        "if (mV < 3000) {"
+        "cellContent = `<span class='low-voltage'>${cellContent}</span>`;"
+        "}"
+        "cell.innerHTML = cellContent;"
+
+        "cell.addEventListener('mouseenter', () => {"
+        "let bar = document.getElementById(`barIndex${index}`);"
+        "valueDisplay.textContent = `Value: ${mV}`;"
+        "bar.style.backgroundColor = `lightblue`;"
+        "cell.style.backgroundColor = `blue`;"
+        "});"
+
+        "cell.addEventListener('mouseleave', () => {"
+        "let bar = document.getElementById(`barIndex${index}`);"
+        "bar.style.backgroundColor = `blue`;"
+        "cell.style.removeProperty('background-color');"
+        "});"
+
+        "cellContainer.appendChild(cell);"
+        "});"
+        "}";
+
+    // On fetch, update the header of max/min/deviation client-side for consistency
+    content +=
+        "function updateVoltageValues(data) {"
+        "const min_mv = Math.min(...data);"
+        "const max_mv = Math.max(...data);"
+        "const cell_dev = max_mv - min_mv;"
+        "const voltVal = document.getElementById('voltageValues');"
+        "voltVal.innerHTML = `Max Voltage : ${max_mv} mV<br>Min Voltage: ${min_mv} mV<br>Voltage Deviation: "
+        "${cell_dev} mV`"
+        "}";
+
+    // If we have values, do the thing. Otherwise, display friendly message and wait
+    content += "if (data.length != 0) {";
+    content += "createCells(data);";
+    content += "createBars(data);";
+    content += "updateVoltageValues(data);";
+    content += "}";
+    content += "else {";
+    content +=
+        "document.getElementById('voltageValues').textContent = 'Cell information not yet fetched, or information not "
+        "available';";
+    content += "}";
+
+    // Automatic refresh is nice
+    content += "setTimeout(function(){ location.reload(true); }, 10000);";
+
     content += "</script>";
     return content;
   }