klaute/lumini_p30_control
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Removed the select boxes from the timing control editor and replaced them by sliders.

Browse source
This commit is contained in:
Kai Lauterbach 2023-05-08 10:27:35 +02:00
parent a6ac0be517
commit 9844d9fca8
2 changed files with 71 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
firmware/data/bottom.js
View file

@ -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 = "&nbsp;" + value + " %";
div.appendChild(span);
input.oninput = function() {
span.innerHTML = "&nbsp;" + 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 = "&nbsp;" + 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 = "&nbsp;" + 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 = "&nbsp;" + 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 = "&nbsp;" + 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++) {

65
firmware/html/bottom.js
View file

@ -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 = "&nbsp;" + value + " %";
div.appendChild(span);
// Update the span element when the value of the slider changes
input.oninput = function() {
span.innerHTML = "&nbsp;" + 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 = "&nbsp;" + 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 = "&nbsp;" + 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 = "&nbsp;" + 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 = "&nbsp;" + 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});
}