Readme updated

README.md

@@ -25,3 +25,6 @@ All except of the timing control data block.
 
 You have to click at the link "reset timing control data" on the webinterface.
 
+Sample schematics (no NodeMCU pins defined in there)
+
+![Sample schematics](pic/schematics.png)

firmware/data/bottom.js

@@ -13,6 +13,7 @@ tabTDE.classList.remove("visible");
 amain.classList.add("pure-button-primary");
 acfg.classList.remove("pure-button-primary");
 atde.classList.remove("pure-button-primary");
+loadGraphData();
 });
 acfg.addEventListener("click", function() {
 tabMain.classList.remove("visible");
@@ -50,10 +51,10 @@ var channel3 = [];
 var channel4 = [];
 for (var i = 0; i < data['tcdata'].length; i++) {
 time.push(data['tcdata'][i]['hour'] + ':' + (data['tcdata'][i]['min'] < 10 ? '0' : '') + data['tcdata'][i]['min']);
-channel1.push(data['tcdata'][i]['ch1']);
+channel1.push(data['tcdata'][i]['ch1'] * 100 / 255);
-channel2.push(data['tcdata'][i]['ch2']);
+channel2.push(data['tcdata'][i]['ch2'] * 100 / 255);
-channel3.push(data['tcdata'][i]['ch3']);
+channel3.push(data['tcdata'][i]['ch3'] * 100 / 255);
-channel4.push(data['tcdata'][i]['ch4']);
+channel4.push(data['tcdata'][i]['ch4'] * 100 / 255);
 }
 currenttime.push(data['currenttime']['hour']);
 currenttime.push(data['currenttime']['min']);
@@ -130,7 +131,7 @@ tickangle: -45,
 },
 yaxis: {
 title: 'Brightness',
-range: [0, 255],
+range: [0, 100],
 },
 shapes: [{
 type: 'line',
@@ -150,6 +151,119 @@ Plotly.newPlot('plot_chart', [trace1, trace2, trace3, trace4], layout);
 }
 setInterval(loadGraphData, 10000);
 loadGraphData();
+function loadTCGraphData() {
+console.log('----> generate tc data graph <----');
+var data = JSON.parse(createJsonFromTable());
+var currenttime = [];
+var time = [];
+var channel1 = [];
+var channel2 = [];
+var channel3 = [];
+var channel4 = [];
+for (var i = 0; i < data['tcdata'].length; i++) {
+time.push(data['tcdata'][i]['hour'] + ':' + (data['tcdata'][i]['min'] < 10 ? '0' : '') + data['tcdata'][i]['min']);
+channel1.push(data['tcdata'][i]['ch1'] * 100 / 255);
+channel2.push(data['tcdata'][i]['ch2'] * 100 / 255);
+channel3.push(data['tcdata'][i]['ch3'] * 100 / 255);
+channel4.push(data['tcdata'][i]['ch4'] * 100 / 255);
+}
+currenttime.push(data['currenttime']['hour']);
+currenttime.push(data['currenttime']['min']);
+var currentTimeStr = currenttime[0] + ':' + (currenttime[1] < 10 ? '0' : '') + currenttime[1];
+var index = time.indexOf(currentTimeStr);
+if (index === -1) {
+var lowerIndex = -1;
+var upperIndex = -1;
+for (var i = 0; i < time.length - 1; i++) {
+const currentDate = new Date();
+const year = currentDate.getFullYear();
+const month = (currentDate.getMonth() + 1).toString().padStart(2, '0');
+const day = currentDate.getDate().toString().padStart(2, '0');
+const dateString = `${year}-${month}-${day}`;
+const start = moment(dateString + ' ' + time[i], 'YYYY-MM-DD HH:mm');
+const curr = moment(dateString + ' ' + currentTimeStr, 'YYYY-MM-DD HH:mm');
+const end = moment(dateString + ' ' + time[i + 1], 'YYYY-MM-DD HH:mm');
+if (curr.isBetween(start, end)) {
+lowerIndex = i;
+upperIndex = i + 1;
+break;
+}
+}
+if (lowerIndex === -1 || upperIndex === -1) {
+console.log("Error: Current time not found in time array and not between two elements in time array. Fixing it...");
+lowerIndex = 0;
+upperIndex = 1;
+var tmp1 = time[0].split(':');
+currenttime[0] = tmp1[0];
+currenttime[1] = tmp1[1];
+}
+var lowerTime = time[lowerIndex].split(":");
+var upperTime = time[upperIndex].split(":");
+var timeDiff = (currenttime[0] - lowerTime[0]) + ((currenttime[1] - lowerTime[1]) / 60);
+var indexFloat = lowerIndex + timeDiff / ((upperTime[0] - lowerTime[0]) + ((upperTime[1] - lowerTime[1]) / 60));
+} else {
+}
+if (indexFloat > index) {
+index = indexFloat;
+}
+var trace1 = {
+x: time,
+y: channel1,
+name: 'Channel 1',
+type: 'scatter',
+mode: 'lines+markers',
+};
+var trace2 = {
+x: time,
+y: channel2,
+name: 'Channel 2',
+type: 'scatter',
+mode: 'lines+markers',
+};
+var trace3 = {
+x: time,
+y: channel3,
+name: 'Channel 3',
+type: 'scatter',
+mode: 'lines+markers',
+};
+var trace4 = {
+x: time,
+y: channel4,
+name: 'Channel 4',
+type: 'scatter',
+mode: 'lines+markers',
+};
+var layout = {
+title: 'Timing Control Data Blocks',
+xaxis: {
+title: 'Time',
+tickangle: -45,
+},
+yaxis: {
+title: 'Brightness',
+range: [0, 100],
+},
+shapes: [{
+type: 'line',
+x0: index,
+y0: 0,
+x1: index,
+y1: 255,
+line: {
+color: 'lightgrey',
+width: 3,
+dash: 'dot'
+}
+}]
+};
+Plotly.newPlot('tc_plot_chart', [trace1, trace2, trace3, trace4], layout);
+}
+setInterval(function() {
+if (document.getElementById('tab-tde').classList.contains('visible')) {
+loadTCGraphData();
+}
+}, 2000);
 function updateLightState() {
 console.log('----> setting bri and power switch <----');
 for (let i = 1; i <= {{LIGHT_COUNT}}; i++) {
@@ -231,22 +345,22 @@ headerRow.appendChild(th);
 table.appendChild(headerRow);
 for (var i = 1; i <= 10; i++) {
 var tr = document.createElement("tr");
-var tdHour = createSelectCell(23, 0);
+var tdHour = createSelectCell(23, 0, 1);
 tdHour.id = "hour" + i;
 tr.appendChild(tdHour);
-var tdMinute = createSelectCell(59, 0);
+var tdMinute = createSelectCell(59, 0, 1);
 tdMinute.id = "minute" + i;
 tr.appendChild(tdMinute);
-var tdCh1 = createSelectCell(100, 0);
+var tdCh1 = createSelectCell(100, 0, 1);
 tdCh1.id = "ch1_" + i;
 tr.appendChild(tdCh1);
-var tdCh2 = createSelectCell(100, 0);
+var tdCh2 = createSelectCell(100, 0, 1);
 tdCh2.id = "ch2_" + i;
 tr.appendChild(tdCh2);
-var tdCh3 = createSelectCell(100, 0);
+var tdCh3 = createSelectCell(100, 0, 1);
 tdCh3.id = "ch3_" + i;
 tr.appendChild(tdCh3);
-var tdCh4 = createSelectCell(100, 0);
+var tdCh4 = createSelectCell(100, 0, 1);
 tdCh4.id = "ch4_" + i;
 tr.appendChild(tdCh4);
 table.appendChild(tr);
@@ -256,9 +370,9 @@ container.innerHTML = "";
 container.classList.add("pure-form");
 container.appendChild(table);
 }
-function createSelectCell(max, value) {
+function createSelectCell(max, value, step) {
 var select = document.createElement("select");
-for (var i = 0; i <= max; i++) {
+for (var i = 0; i <= max; i += step) {
 var option = document.createElement("option");
 option.value = i;
 option.text = i;
@@ -278,11 +392,12 @@ for (var i = 0; i < tcdata.length; i++) {
 var row = document.getElementById("hour" + (i+1)).parentNode;
 row.cells[0].childNodes[0].value = tcdata[i].hour;
 row.cells[1].childNodes[0].value = tcdata[i].min;
-row.cells[2].childNodes[0].value = parseInt(tcdata[i].ch1 * 100 / 255);
+row.cells[2].childNodes[0].value = parseInt(Math.round(tcdata[i].ch1 * 100 / 255));
-row.cells[3].childNodes[0].value = parseInt(tcdata[i].ch2 * 100 / 255);
+row.cells[3].childNodes[0].value = parseInt(Math.round(tcdata[i].ch2 * 100 / 255));
-row.cells[4].childNodes[0].value = parseInt(tcdata[i].ch3 * 100 / 255);
+row.cells[4].childNodes[0].value = parseInt(Math.round(tcdata[i].ch3 * 100 / 255));
-row.cells[5].childNodes[0].value = parseInt(tcdata[i].ch4 * 100 / 255);
+row.cells[5].childNodes[0].value = parseInt(Math.round(tcdata[i].ch4 * 100 / 255));
 }
+loadTCGraphData();
 });
 }
 function createJsonFromTable() {
@@ -300,20 +415,40 @@ tcdata.push({hour: hour, min: min, ch1: ch1, ch2: ch2, ch3: ch3, ch4: ch4});
 }
 var currentTime = {hour: new Date().getHours(), min: new Date().getMinutes()};
 var jsonData = {tcdata: tcdata, currenttime: currentTime};
-console.log("jsonData = " + JSON.stringify(jsonData));
 return JSON.stringify(jsonData);
 }
 function sendDataToServer() {
 var jsonData = createJsonFromTable();
 var urlEncodedData = encodeURIComponent(jsonData);
 var url = 'http://{{IP_ADDRESS}}/tc_data_blocks_store?data=' + urlEncodedData;
-console.log("url so save = " + url);
 var xhr = new XMLHttpRequest();
 xhr.open('GET', url, true);
-xhr.onreadystatechange = function() {
+xhr.onreadystatechange = function () {
-if (xhr.readyState === 4 && xhr.status === 200) {
+if (xhr.readyState === 4) {
+var button = document.getElementById("save-button");
+if (xhr.status === 200) {
+button.classList.remove("pure-button-primary");
+button.classList.add("success");
+button.innerHTML = "Saved!";
+setTimeout(function () {
+button.classList.remove("success");
+button.classList.add("pure-button-primary");
+button.innerHTML = "save";
+}, 2000);
 console.log('Data successfully sent to server!');
+} else {
+button.classList.remove("pure-button-primary");
+button.classList.add("error");
+button.innerHTML = "Error!";
+setTimeout(function () {
+button.classList.remove("error");
+button.classList.add("pure-button-primary");
+button.innerHTML = "save";
+}, 2000);
+console.log('Error while sending data to server.');
+}
 }
 };
 xhr.send();
+loadTCGraphData();
 }

firmware/data/index_template_bottom.html

@@ -6,10 +6,20 @@
 <strong>Timming control data editor</strong>
 </label>
 <br>
-<div id="table-container">
+<table>
+<tr>
+<td>
+<div id="table-container" class="top-align">
 </div>
+</td>
+<td>
+<div id="tc_plot_chart" class="top-align">
+</div>
+</td>
+</tr>
+</table>
 <br>
-<a href="#" class="pure-button pure-button-primary" onclick="sendDataToServer();">save</a>
+<a href="#" id="save-button" class="pure-button pure-button-primary" onclick="sendDataToServer();">save</a>
 </div>
 </div> <!-- end of tab-tde -->
 <script src="http://{{IP_ADDRESS}}/js_bottom">

firmware/data/index_template_middle.html

@@ -1,7 +1,7 @@
 <!-- middle -->
 </td>
 <td>
-<div id="plot_chart"></div>
+<div id="plot_chart" class="top-align"></div>
 </td>
 </tr>
 </table>

firmware/data/index_template_top.html

@@ -47,4 +47,4 @@
 <br>
 <table border=0>
 <tr>
-<td>
+<td class="top-align">

firmware/data/style.css

@@ -41,3 +41,6 @@ cursor: pointer;
 .pure-button:hover {
 background-color: #333;
 }
+.top-align {
+vertical-align: top;
+}

firmware/html/bottom.js

@@ -19,6 +19,8 @@ function addTabListener() {
             amain.classList.add("pure-button-primary");
             acfg.classList.remove("pure-button-primary");
             atde.classList.remove("pure-button-primary");
+
+            loadGraphData(); // reload the graph
         });
 
         acfg.addEventListener("click", function() {
@@ -64,10 +66,10 @@ function loadGraphData() {
         var channel4 = [];
         for (var i = 0; i < data['tcdata'].length; i++) {
             time.push(data['tcdata'][i]['hour'] + ':' + (data['tcdata'][i]['min'] < 10 ? '0' : '') + data['tcdata'][i]['min']);
-            channel1.push(data['tcdata'][i]['ch1']);
+            channel1.push(data['tcdata'][i]['ch1'] * 100 / 255);
-            channel2.push(data['tcdata'][i]['ch2']);
+            channel2.push(data['tcdata'][i]['ch2'] * 100 / 255);
-            channel3.push(data['tcdata'][i]['ch3']);
+            channel3.push(data['tcdata'][i]['ch3'] * 100 / 255);
-            channel4.push(data['tcdata'][i]['ch4']);
+            channel4.push(data['tcdata'][i]['ch4'] * 100 / 255);
         }
         currenttime.push(data['currenttime']['hour']);
         currenttime.push(data['currenttime']['min']);
@@ -155,7 +157,7 @@ function loadGraphData() {
             },
             yaxis: {
                 title: 'Brightness',
-                range: [0, 255],
+                range: [0, 100],
             },
             shapes: [{
                 type: 'line',
@@ -176,6 +178,135 @@ function loadGraphData() {
 setInterval(loadGraphData, 10000);
 loadGraphData();
 
+function loadTCGraphData() {
+    console.log('----> generate tc data graph <----');
+
+    var data = JSON.parse(createJsonFromTable());
+    //console.log(data);
+    var currenttime = [];
+    var time = [];
+    var channel1 = [];
+    var channel2 = [];
+    var channel3 = [];
+    var channel4 = [];
+    for (var i = 0; i < data['tcdata'].length; i++) {
+        time.push(data['tcdata'][i]['hour'] + ':' + (data['tcdata'][i]['min'] < 10 ? '0' : '') + data['tcdata'][i]['min']);
+        channel1.push(data['tcdata'][i]['ch1'] * 100 / 255);
+        channel2.push(data['tcdata'][i]['ch2'] * 100 / 255);
+        channel3.push(data['tcdata'][i]['ch3'] * 100 / 255);
+        channel4.push(data['tcdata'][i]['ch4'] * 100 / 255);
+    }
+    currenttime.push(data['currenttime']['hour']);
+    currenttime.push(data['currenttime']['min']);
+    //console.log(currenttime);
+    var currentTimeStr = currenttime[0] + ':' + (currenttime[1] < 10 ? '0' : '') + currenttime[1];
+    var index = time.indexOf(currentTimeStr);
+    if (index === -1) {
+        var lowerIndex = -1;
+        var upperIndex = -1;
+        for (var i = 0; i < time.length - 1; i++) {
+            //console.log(time[i] + ' <= ' + currentTimeStr + ' >= ' + time[i + 1]);
+            const currentDate = new Date();
+            const year = currentDate.getFullYear();
+            const month = (currentDate.getMonth() + 1).toString().padStart(2, '0');
+            const day = currentDate.getDate().toString().padStart(2, '0');
+            const dateString = `${year}-${month}-${day}`;
+            const start = moment(dateString + ' ' + time[i], 'YYYY-MM-DD HH:mm');
+            const curr = moment(dateString + ' ' + currentTimeStr, 'YYYY-MM-DD HH:mm');
+            const end = moment(dateString + ' ' + time[i + 1], 'YYYY-MM-DD HH:mm');
+            //console.log(start.format('YYYY-MM-DD HH:mm') + ' <= ' + curr.format('YYYY-MM-DD HH:mm') + ' >= ' + end.format('YYYY-MM-DD HH:mm'));
+            //console.log(curr.isBetween(start, end));
+            if (curr.isBetween(start, end)) {
+                lowerIndex = i;
+                upperIndex = i + 1;
+                break;
+            }
+        }
+        //console.log('lowerIndex=' + lowerIndex);
+        //console.log('upperIndex=' + upperIndex);
+        if (lowerIndex === -1 || upperIndex === -1) {
+            console.log("Error: Current time not found in time array and not between two elements in time array. Fixing it...");
+            lowerIndex = 0;
+            upperIndex = 1;
+            var tmp1 = time[0].split(':');
+            //console.log('tmp1 = ' + tmp1);
+            currenttime[0] = tmp1[0];
+            currenttime[1] = tmp1[1];
+        }
+        var lowerTime = time[lowerIndex].split(":");
+        var upperTime = time[upperIndex].split(":");
+        var timeDiff = (currenttime[0] - lowerTime[0]) + ((currenttime[1] - lowerTime[1]) / 60);
+        var indexFloat = lowerIndex + timeDiff / ((upperTime[0] - lowerTime[0]) + ((upperTime[1] - lowerTime[1]) / 60));
+        //console.log("Index (float): " + indexFloat);
+    } else {
+        //console.log("Index (integer): " + index);
+        //console.log("Index (float): " + index);
+    }
+    if (indexFloat > index) {
+        index = indexFloat;
+    }
+    //console.log("index in graph >>>" + index);
+    var trace1 = {
+        x: time,
+        y: channel1,
+        name: 'Channel 1',
+        type: 'scatter',
+        mode: 'lines+markers',
+    };
+    var trace2 = {
+        x: time,
+        y: channel2,
+        name: 'Channel 2',
+        type: 'scatter',
+        mode: 'lines+markers',
+    };
+    var trace3 = {
+        x: time,
+        y: channel3,
+        name: 'Channel 3',
+        type: 'scatter',
+        mode: 'lines+markers',
+    };
+    var trace4 = {
+        x: time,
+        y: channel4,
+        name: 'Channel 4',
+        type: 'scatter',
+        mode: 'lines+markers',
+    };
+    var layout = {
+        title: 'Timing Control Data Blocks',
+        xaxis: {
+            title: 'Time',
+            tickangle: -45,
+        },
+        yaxis: {
+            title: 'Brightness',
+            range: [0, 100],
+        },
+        shapes: [{
+            type: 'line',
+            x0: index,
+            y0: 0,
+            x1: index,
+            y1: 255,
+            line: {
+                color: 'lightgrey',
+                width: 3,
+                dash: 'dot'
+            }
+        }]
+    };
+    Plotly.newPlot('tc_plot_chart', [trace1, trace2, trace3, trace4], layout);
+
+}
+
+setInterval(function() {
+    if (document.getElementById('tab-tde').classList.contains('visible')) {
+        loadTCGraphData();
+    }
+}, 2000);
+
 function updateLightState() {
     console.log('----> setting bri and power switch <----');
     for (let i = 1; i <= {{LIGHT_COUNT}}; i++) {
@@ -283,32 +414,32 @@ function createTable() {
       var tr = document.createElement("tr");
   
       // Stunde
-      var tdHour = createSelectCell(23, 0);
+      var tdHour = createSelectCell(23, 0, 1);
       tdHour.id = "hour" + i;
       tr.appendChild(tdHour);
   
       // Minute
-      var tdMinute = createSelectCell(59, 0);
+      var tdMinute = createSelectCell(59, 0, 1);
       tdMinute.id = "minute" + i;
       tr.appendChild(tdMinute);
   
       // ch1
-      var tdCh1 = createSelectCell(100, 0);
+      var tdCh1 = createSelectCell(100, 0, 1);
       tdCh1.id = "ch1_" + i;
       tr.appendChild(tdCh1);
   
       // ch2
-      var tdCh2 = createSelectCell(100, 0);
+      var tdCh2 = createSelectCell(100, 0, 1);
       tdCh2.id = "ch2_" + i;
       tr.appendChild(tdCh2);
   
       // ch3
-      var tdCh3 = createSelectCell(100, 0);
+      var tdCh3 = createSelectCell(100, 0, 1);
       tdCh3.id = "ch3_" + i;
       tr.appendChild(tdCh3);
   
       // ch4
-      var tdCh4 = createSelectCell(100, 0);
+      var tdCh4 = createSelectCell(100, 0, 1);
       tdCh4.id = "ch4_" + i;
       tr.appendChild(tdCh4);
   
@@ -321,12 +452,12 @@ function createTable() {
     container.appendChild(table);
 }
   
-function createSelectCell(max, value) {
+function createSelectCell(max, value, step) {
     // Erstelle ein neues select-Element
     var select = document.createElement("select");
 
     // Füge Optionen hinzu
-    for (var i = 0; i <= max; i++) {
+    for (var i = 0; i <= max; i += step) {
         var option = document.createElement("option");
         option.value = i;
         option.text = i;
@@ -355,11 +486,13 @@ function fillTableFromJson() {
             var row = document.getElementById("hour" + (i+1)).parentNode;
             row.cells[0].childNodes[0].value = tcdata[i].hour;
             row.cells[1].childNodes[0].value = tcdata[i].min;
-            row.cells[2].childNodes[0].value = parseInt(tcdata[i].ch1 * 100 / 255);
+            row.cells[2].childNodes[0].value = parseInt(Math.round(tcdata[i].ch1 * 100 / 255));
-            row.cells[3].childNodes[0].value = parseInt(tcdata[i].ch2 * 100 / 255);
+            row.cells[3].childNodes[0].value = parseInt(Math.round(tcdata[i].ch2 * 100 / 255));
-            row.cells[4].childNodes[0].value = parseInt(tcdata[i].ch3 * 100 / 255);
+            row.cells[4].childNodes[0].value = parseInt(Math.round(tcdata[i].ch3 * 100 / 255));
-            row.cells[5].childNodes[0].value = parseInt(tcdata[i].ch4 * 100 / 255);
+            row.cells[5].childNodes[0].value = parseInt(Math.round(tcdata[i].ch4 * 100 / 255));
         }
+
+        loadTCGraphData();
     });
 }
 
@@ -380,7 +513,7 @@ function createJsonFromTable() {
     }
     var currentTime = {hour: new Date().getHours(), min: new Date().getMinutes()};
     var jsonData = {tcdata: tcdata, currenttime: currentTime};
-    console.log("jsonData = " + JSON.stringify(jsonData));
+    //console.log("jsonData = " + JSON.stringify(jsonData));
     return JSON.stringify(jsonData);
 }
 
@@ -388,14 +521,34 @@ function sendDataToServer() {
     var jsonData = createJsonFromTable();
     var urlEncodedData = encodeURIComponent(jsonData);
     var url = 'http://{{IP_ADDRESS}}/tc_data_blocks_store?data=' + urlEncodedData;
-    console.log("url so save = " + url);
     var xhr = new XMLHttpRequest();
     xhr.open('GET', url, true);
-    xhr.onreadystatechange = function() {
+    xhr.onreadystatechange = function () {
-      if (xhr.readyState === 4 && xhr.status === 200) {
+        if (xhr.readyState === 4) {
-        console.log('Data successfully sent to server!');
+            var button = document.getElementById("save-button");
-      }
+            if (xhr.status === 200) {
+                button.classList.remove("pure-button-primary");
+                button.classList.add("success");
+                button.innerHTML = "Saved!";
+                setTimeout(function () {
+                    button.classList.remove("success");
+                    button.classList.add("pure-button-primary");
+                    button.innerHTML = "save";
+                }, 2000);
+                console.log('Data successfully sent to server!');
+            } else {
+                button.classList.remove("pure-button-primary");
+                button.classList.add("error");
+                button.innerHTML = "Error!";
+                setTimeout(function () {
+                    button.classList.remove("error");
+                    button.classList.add("pure-button-primary");
+                    button.innerHTML = "save";
+                }, 2000);
+                console.log('Error while sending data to server.');
+            }
+        }
     };
     xhr.send();
-  }
+    loadTCGraphData(); // update the tc data graph
-  
+}

firmware/html/index_template_bottom.html

@@ -6,10 +6,21 @@
                 <strong>Timming control data editor</strong>
             </label>
             <br>
-            <div id="table-container">
+            <table>
-            </div>
+                <tr>
+                    <td>
+                        <div id="table-container" class="top-align">
+                        </div>
+                    </td>
+                    <td>
+                        <div id="tc_plot_chart" class="top-align">
+                        </div>
+                    </td>
+                </tr>
+            </table>
+            
             <br>
-            <a href="#" class="pure-button pure-button-primary" onclick="sendDataToServer();">save</a>
+            <a href="#" id="save-button" class="pure-button pure-button-primary" onclick="sendDataToServer();">save</a>
         </div>
     </div> <!-- end of tab-tde -->
 

firmware/html/index_template_middle.html

@@ -1,7 +1,7 @@
 <!-- middle -->
                     </td>
                     <td>
-                        <div id="plot_chart"></div>
+                        <div id="plot_chart" class="top-align"></div>
                     </td>
                 </tr>
             </table>

firmware/html/index_template_top.html

@@ -47,5 +47,5 @@
             <br>
             <table border=0>
                 <tr>
-                    <td>
+                    <td class="top-align">
 

firmware/html/style.css

@@ -41,3 +41,6 @@ cursor: pointer;
 .pure-button:hover {
 background-color: #333;
 }
+.top-align {
+vertical-align: top;
+}