From 9844d9fca81f9fb88cb95500f6a4811ba0d7b624 Mon Sep 17 00:00:00 2001 From: Kai Lauterbach Date: Mon, 8 May 2023 10:27:35 +0200 Subject: [PATCH] Removed the select boxes from the timing control editor and replaced them by sliders. --- firmware/data/bottom.js | 45 ++++++++++++++++++---------- firmware/html/bottom.js | 65 ++++++++++++++++++++++++++--------------- 2 files changed, 71 insertions(+), 39 deletions(-) diff --git a/firmware/data/bottom.js b/firmware/data/bottom.js index b419d8a..3682501 100644 --- a/firmware/data/bottom.js +++ b/firmware/data/bottom.js @@ -409,8 +409,7 @@ tdMinute.id = "minute" + i; tr.appendChild(tdMinute); for (var j = 1; j <=4; j++) { -var tdCh = createSelectCell(100, 0, 1); -tdCh.id = "ch" + j + "_" + i; +var tdCh = createSlider("ch" + j + "_" + i, 100, 0, 1); tr.appendChild(tdCh); } table.appendChild(tr); @@ -428,13 +427,23 @@ input.max = max; input.step = step; input.value = value; input.classList.add("pure-slider-range"); -var div = document.createElement("div"); -div.classList.add("pure-control-group"); +if (id.startsWith("ch1_")) { +input.style.backgroundColor = "blue"; +} else if (id.startsWith("ch2_")) { +input.style.backgroundColor = "orange"; +} else if (id.startsWith("ch3_")) { +input.style.backgroundColor = "green"; +} else if (id.startsWith("ch4_")) { +input.style.backgroundColor = "red"; +} +div = document.createElement("div"); div.appendChild(input); -var label = document.createElement("label"); -label.innerHTML = id; -label.classList.add("pure-slider-label"); -div.insertBefore(label, input); +var span = document.createElement("span"); +span.innerHTML = " " + value + " %"; +div.appendChild(span); +input.oninput = function() { +span.innerHTML = " " + this.value + " %"; +}; var td = document.createElement("td"); td.id = id; td.appendChild(div); @@ -462,10 +471,14 @@ 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(Math.round(tcdata[i].ch1 * 100 / 255)); -row.cells[3].childNodes[0].value = parseInt(Math.round(tcdata[i].ch2 * 100 / 255)); -row.cells[4].childNodes[0].value = parseInt(Math.round(tcdata[i].ch3 * 100 / 255)); -row.cells[5].childNodes[0].value = parseInt(Math.round(tcdata[i].ch4 * 100 / 255)); +row.cells[2].childNodes[0].childNodes[0].value = parseInt(Math.round(tcdata[i].ch1 * 100 / 255)); +row.cells[2].childNodes[0].childNodes[1].innerHTML = " " + row.cells[2].childNodes[0].childNodes[0].value + " %"; +row.cells[3].childNodes[0].childNodes[0].value = parseInt(Math.round(tcdata[i].ch2 * 100 / 255)); +row.cells[3].childNodes[0].childNodes[1].innerHTML = " " + row.cells[3].childNodes[0].childNodes[0].value + " %"; +row.cells[4].childNodes[0].childNodes[0].value = parseInt(Math.round(tcdata[i].ch3 * 100 / 255)); +row.cells[4].childNodes[0].childNodes[1].innerHTML = " " + row.cells[4].childNodes[0].childNodes[0].value + " %"; +row.cells[5].childNodes[0].childNodes[0].value = parseInt(Math.round(tcdata[i].ch4 * 100 / 255)); +row.cells[5].childNodes[0].childNodes[1].innerHTML = " " + row.cells[5].childNodes[0].childNodes[0].value + " %"; } loadTCGraphData(); }); @@ -479,10 +492,10 @@ 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); timeArr.push(hour * 60 + min); -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); +var ch1 = Math.round(parseInt(row.cells[2].childNodes[0].childNodes[0].value) * 2.55); +var ch2 = Math.round(parseInt(row.cells[3].childNodes[0].childNodes[0].value) * 2.55); +var ch3 = Math.round(parseInt(row.cells[4].childNodes[0].childNodes[0].value) * 2.55); +var ch4 = Math.round(parseInt(row.cells[5].childNodes[0].childNodes[0].value) * 2.55); tcdata.push({hour: hour, min: min, ch1: ch1, ch2: ch2, ch3: ch3, ch4: ch4}); } for (var i = 0; i < timeArr.length - 1; i++) { diff --git a/firmware/html/bottom.js b/firmware/html/bottom.js index ba9c07b..7b6b029 100644 --- a/firmware/html/bottom.js +++ b/firmware/html/bottom.js @@ -486,8 +486,7 @@ function createTable() { for (var j = 1; j <=4; j++) { // chj_i - var tdCh = createSelectCell(100, 0, 1); - tdCh.id = "ch" + j + "_" + i; + var tdCh = createSlider("ch" + j + "_" + i, 100, 0, 1); tr.appendChild(tdCh); } @@ -509,26 +508,38 @@ function createSlider(id, max, value, step) { input.step = step; input.value = value; input.classList.add("pure-slider-range"); - - // Create a new div element to contain the input element - var div = document.createElement("div"); - div.classList.add("pure-control-group"); + // Change the color of the slider based on the id + if (id.startsWith("ch1_")) { + input.style.backgroundColor = "blue"; + } else if (id.startsWith("ch2_")) { + input.style.backgroundColor = "orange"; + } else if (id.startsWith("ch3_")) { + input.style.backgroundColor = "green"; + } else if (id.startsWith("ch4_")) { + input.style.backgroundColor = "red"; + } + + div = document.createElement("div"); div.appendChild(input); - - // Create a new label element for the slider - var label = document.createElement("label"); - label.innerHTML = id; - label.classList.add("pure-slider-label"); - div.insertBefore(label, input); - + + // Create a new span element to contain the value of the slider + var span = document.createElement("span"); + span.innerHTML = " " + value + " %"; + div.appendChild(span); + + // Update the span element when the value of the slider changes + input.oninput = function() { + span.innerHTML = " " + this.value + " %"; + }; + // Create a new td element to contain the div element var td = document.createElement("td"); td.id = id; td.appendChild(div); - + // Return the td element return td; - } +} function createSelectCell(max, value, step) { // Erstelle ein neues select-Element @@ -564,10 +575,18 @@ 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(Math.round(tcdata[i].ch1 * 100 / 255)); - row.cells[3].childNodes[0].value = parseInt(Math.round(tcdata[i].ch2 * 100 / 255)); - row.cells[4].childNodes[0].value = parseInt(Math.round(tcdata[i].ch3 * 100 / 255)); - row.cells[5].childNodes[0].value = parseInt(Math.round(tcdata[i].ch4 * 100 / 255)); + + row.cells[2].childNodes[0].childNodes[0].value = parseInt(Math.round(tcdata[i].ch1 * 100 / 255)); + row.cells[2].childNodes[0].childNodes[1].innerHTML = " " + row.cells[2].childNodes[0].childNodes[0].value + " %"; + + row.cells[3].childNodes[0].childNodes[0].value = parseInt(Math.round(tcdata[i].ch2 * 100 / 255)); + row.cells[3].childNodes[0].childNodes[1].innerHTML = " " + row.cells[3].childNodes[0].childNodes[0].value + " %"; + + row.cells[4].childNodes[0].childNodes[0].value = parseInt(Math.round(tcdata[i].ch3 * 100 / 255)); + row.cells[4].childNodes[0].childNodes[1].innerHTML = " " + row.cells[4].childNodes[0].childNodes[0].value + " %"; + + row.cells[5].childNodes[0].childNodes[0].value = parseInt(Math.round(tcdata[i].ch4 * 100 / 255)); + row.cells[5].childNodes[0].childNodes[1].innerHTML = " " + row.cells[5].childNodes[0].childNodes[0].value + " %"; } loadTCGraphData(); @@ -585,10 +604,10 @@ function createJsonFromTable() { var hour = parseInt(row.cells[0].childNodes[0].value); var min = parseInt(row.cells[1].childNodes[0].value); timeArr.push(hour * 60 + min); // Speichert die Zeitangaben als Minuten seit Mitternacht - 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); + var ch1 = Math.round(parseInt(row.cells[2].childNodes[0].childNodes[0].value) * 2.55); + var ch2 = Math.round(parseInt(row.cells[3].childNodes[0].childNodes[0].value) * 2.55); + var ch3 = Math.round(parseInt(row.cells[4].childNodes[0].childNodes[0].value) * 2.55); + var ch4 = Math.round(parseInt(row.cells[5].childNodes[0].childNodes[0].value) * 2.55); tcdata.push({hour: hour, min: min, ch1: ch1, ch2: ch2, ch3: ch3, ch4: ch4}); }