From 975e0d140d58e739c7fa260435b6e45151c381b2 Mon Sep 17 00:00:00 2001 From: Kai Lauterbach Date: Fri, 5 May 2023 20:40:06 +0200 Subject: [PATCH] Added some more code to the timing controller editor tab. --- firmware/data/bottom.js | 161 ++++++++-------- firmware/data/index_template_bottom.html | 5 +- firmware/html/bottom.js | 231 ++++++++++++----------- firmware/html/index_template_bottom.html | 5 +- firmware/timing_control.ino | 2 +- 5 files changed, 216 insertions(+), 188 deletions(-) diff --git a/firmware/data/bottom.js b/firmware/data/bottom.js index 3d4258f..981ef00 100644 --- a/firmware/data/bottom.js +++ b/firmware/data/bottom.js @@ -220,98 +220,99 @@ document.getElementById('on'+id+'_off').classList.remove('pure-button-primary'); }); function createTable() { var table = document.createElement("table"); +table.border = "1"; var headerRow = document.createElement("tr"); -var headers = ["Stunde", "Minute", "ch1", "ch2", "ch3", "ch4"]; -for (var i = 0; i < headers.length; i++) { -var header = document.createElement("th"); -header.innerHTML = headers[i]; -headerRow.appendChild(header); -} +var headers = ["Hour", "Minute", "Ch1", "Ch2", "Ch3", "Ch4"]; +headers.forEach(header => { +var th = document.createElement("th"); +th.innerHTML = header; +headerRow.appendChild(th); +}); table.appendChild(headerRow); -for (var row = 0; row < 10; row++) { -var contentRow = document.createElement("tr"); -var hourCell = document.createElement("td"); -var hourSelect = document.createElement("select"); -for (var hour = 0; hour <= 23; hour++) { -var option = document.createElement("option"); -option.value = hour; -option.text = hour.toString().padStart(2, "0"); -hourSelect.appendChild(option); +for (var i = 1; i <= 10; i++) { +var tr = document.createElement("tr"); +var tdHour = createSelectCell(23, 0); +tdHour.id = "hour" + i; +tr.appendChild(tdHour); +var tdMinute = createSelectCell(59, 0); +tdMinute.id = "minute" + i; +tr.appendChild(tdMinute); +var tdCh1 = createSelectCell(100, 0); +tdCh1.id = "ch1_" + i; +tr.appendChild(tdCh1); +var tdCh2 = createSelectCell(100, 0); +tdCh2.id = "ch2_" + i; +tr.appendChild(tdCh2); +var tdCh3 = createSelectCell(100, 0); +tdCh3.id = "ch3_" + i; +tr.appendChild(tdCh3); +var tdCh4 = createSelectCell(100, 0); +tdCh4.id = "ch4_" + i; +tr.appendChild(tdCh4); +table.appendChild(tr); } -hourCell.appendChild(hourSelect); -contentRow.appendChild(hourCell); -var minuteCell = document.createElement("td"); -var minuteSelect = document.createElement("select"); -for (var minute = 0; minute <= 50; minute += 10) { -var option = document.createElement("option"); -option.value = minute; -option.text = minute.toString().padStart(2, "0"); -minuteSelect.appendChild(option); -} -minuteCell.appendChild(minuteSelect); -contentRow.appendChild(minuteCell); -for (var channel = 1; channel <= 4; channel++) { -var channelCell = document.createElement("td"); -var channelSelect = document.createElement("select"); -for (var i = 0; i <= 100; i++) { -var option = document.createElement("option"); -option.value = i; -option.text = i.toString(); -channelSelect.appendChild(option); -} -channelCell.appendChild(channelSelect); -contentRow.appendChild(channelCell); -} -table.appendChild(contentRow); -} -var button = document.createElement("button"); -button.innerHTML = "Save"; -button.classList.add("pure-button"); -button.classList.add("pure-button-primary"); -button.onclick = function() { -var data = []; -var rows = table.getElementsByTagName("tr"); -for (var row = 1; row < rows.length; row++) { -var cells = rows[row].getElementsByTagName("td"); -var hour = cells[0].querySelector("input").value; -var minute = cells[1].querySelector("select").value; -var ch1 = cells[2].querySelector("input").value; -var ch2 = cells[3].querySelector("input").value; -var ch3 = cells[4].querySelector("input").value; -var ch4 = cells[5].querySelector("input").value; -var rowObject = {"hour": hour, "min": minute, "ch1": ch1, "ch2": ch2, "ch3": ch3, "ch4": ch4}; -data.push(rowObject); -} -var json = JSON.stringify(data); -console.log(json); -var xhr = new XMLHttpRequest(); -xhr.open("POST", "http://{{IP_ADDRESS}}/tc_data_save?data=" + encodeURIComponent(json), true); -xhr.send(); -}; var container = document.getElementById("table-container"); container.innerHTML = ""; container.classList.add("pure-form"); container.appendChild(table); -container.appendChild(button); +} +function createSelectCell(max, value) { +var select = document.createElement("select"); +for (var i = 0; i <= max; i++) { +var option = document.createElement("option"); +option.value = i; +option.text = i; +select.appendChild(option); +} +select.value = value; +var row = document.createElement("td"); +row.appendChild(select); +return row; } function fillTableFromJson() { -var xhr = new XMLHttpRequest(); -xhr.onreadystatechange = function() { -if (this.readyState == 4 && this.status == 200) { -var json = JSON.parse(this.responseText); +fetch('http://{{IP_ADDRESS}}/tc_data_blocks_read') +.then(response => response.json()) +.then(data => { +var tcdata = data.tcdata; +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[3].childNodes[0].value = parseInt(tcdata[i].ch2 * 100 / 255); +row.cells[4].childNodes[0].value = parseInt(tcdata[i].ch3 * 100 / 255); +row.cells[5].childNodes[0].value = parseInt(tcdata[i].ch4 * 100 / 255); +} +}); +} +function createJsonFromTable() { var tableRows = document.querySelectorAll("table tr"); -for (var i = 1; i < tableRows.length; i++) { -var cells = tableRows[i].querySelectorAll("td"); -var hour = parseInt(cells[0].querySelector("select").value); -var minute = parseInt(cells[1].querySelector("select").value); -for (var j = 0; j < json.tcdata.length; j++) { -if (json.tcdata[j].hour == hour && json.tcdata[j].min == minute) { -cells[2 + j].querySelector("select").value = json.tcdata[j]["ch" + (j + 1)]; -} +var tcdata = []; +for (var i = 1; i <= 10; i++) { +var row = document.getElementById("hour" + i).parentNode; +var hour = parseInt(row.cells[0].childNodes[0].value); +var min = parseInt(row.cells[1].childNodes[0].value); +var ch1 = Math.round(parseInt(row.cells[2].childNodes[0].value) * 2.55); +var ch2 = Math.round(parseInt(row.cells[3].childNodes[0].value) * 2.55); +var ch3 = Math.round(parseInt(row.cells[4].childNodes[0].value) * 2.55); +var ch4 = Math.round(parseInt(row.cells[5].childNodes[0].value) * 2.55); +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() { +if (xhr.readyState === 4 && xhr.status === 200) { +console.log('Data successfully sent to server!'); } }; -xhr.open("GET", "http://192.168.0.27/tc_data_blocks_read", true); -xhr.send(); } diff --git a/firmware/data/index_template_bottom.html b/firmware/data/index_template_bottom.html index 4eaf97f..c1156c1 100644 --- a/firmware/data/index_template_bottom.html +++ b/firmware/data/index_template_bottom.html @@ -6,7 +6,10 @@ Timming control data editor
-
+
+
+
+save