Compare commits
No commits in common. "e7f0564ff0747ef0bcddca058f9eb7d4481b2f43" and "90b6b36f26ccbcdd561dba3bbf311d3a99f6b87a" have entirely different histories.
e7f0564ff0
...
90b6b36f26
10 changed files with 60 additions and 259 deletions
Binary file not shown.
Before Width: | Height: | Size: 2 MiB After Width: | Height: | Size: 2 MiB |
|
@ -190,7 +190,7 @@ break;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (lowerIndex === -1 || upperIndex === -1) {
|
if (lowerIndex === -1 || upperIndex === -1) {
|
||||||
console.log("Warning: Current time not found in time array and not between two elements in time array. Fixing it...");
|
console.log("Error: Current time not found in time array and not between two elements in time array. Fixing it...");
|
||||||
lowerIndex = 0;
|
lowerIndex = 0;
|
||||||
upperIndex = 1;
|
upperIndex = 1;
|
||||||
var tmp1 = time[0].split(':');
|
var tmp1 = time[0].split(':');
|
||||||
|
@ -336,7 +336,6 @@ button.classList.remove("error");
|
||||||
button.classList.add("pure-button-primary");
|
button.classList.add("pure-button-primary");
|
||||||
button.innerHTML = "OFF";
|
button.innerHTML = "OFF";
|
||||||
}, 2000);
|
}, 2000);
|
||||||
showToast('Error while sending data to server.', 'error');
|
|
||||||
console.log('Error while sending data to server.');
|
console.log('Error while sending data to server.');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -377,7 +376,6 @@ button.classList.remove("error");
|
||||||
button.classList.add("pure-button-primary");
|
button.classList.add("pure-button-primary");
|
||||||
button.innerHTML = "ON";
|
button.innerHTML = "ON";
|
||||||
}, 2000);
|
}, 2000);
|
||||||
showToast('Error while sending data to server.', 'error');
|
|
||||||
console.log('Error while sending data to server.');
|
console.log('Error while sending data to server.');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -407,11 +405,18 @@ tr.appendChild(tdHour);
|
||||||
var tdMinute = createSelectCell(59, 0, 1);
|
var tdMinute = createSelectCell(59, 0, 1);
|
||||||
tdMinute.id = "minute" + i;
|
tdMinute.id = "minute" + i;
|
||||||
tr.appendChild(tdMinute);
|
tr.appendChild(tdMinute);
|
||||||
for (var j = 1; j <=4; j++)
|
var tdCh1 = createSelectCell(100, 0, 1);
|
||||||
{
|
tdCh1.id = "ch1_" + i;
|
||||||
var tdCh = createSlider("ch" + j + "_" + i, 100, 0, 1);
|
tr.appendChild(tdCh1);
|
||||||
tr.appendChild(tdCh);
|
var tdCh2 = createSelectCell(100, 0, 1);
|
||||||
}
|
tdCh2.id = "ch2_" + i;
|
||||||
|
tr.appendChild(tdCh2);
|
||||||
|
var tdCh3 = createSelectCell(100, 0, 1);
|
||||||
|
tdCh3.id = "ch3_" + i;
|
||||||
|
tr.appendChild(tdCh3);
|
||||||
|
var tdCh4 = createSelectCell(100, 0, 1);
|
||||||
|
tdCh4.id = "ch4_" + i;
|
||||||
|
tr.appendChild(tdCh4);
|
||||||
table.appendChild(tr);
|
table.appendChild(tr);
|
||||||
}
|
}
|
||||||
var container = document.getElementById("table-container");
|
var container = document.getElementById("table-container");
|
||||||
|
@ -419,36 +424,6 @@ container.innerHTML = "";
|
||||||
container.classList.add("pure-form");
|
container.classList.add("pure-form");
|
||||||
container.appendChild(table);
|
container.appendChild(table);
|
||||||
}
|
}
|
||||||
function createSlider(id, max, value, step) {
|
|
||||||
var input = document.createElement("input");
|
|
||||||
input.type = "range";
|
|
||||||
input.min = 0;
|
|
||||||
input.max = max;
|
|
||||||
input.step = step;
|
|
||||||
input.value = value;
|
|
||||||
input.classList.add("pure-slider-range");
|
|
||||||
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 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);
|
|
||||||
return td;
|
|
||||||
}
|
|
||||||
function createSelectCell(max, value, step) {
|
function createSelectCell(max, value, step) {
|
||||||
var select = document.createElement("select");
|
var select = document.createElement("select");
|
||||||
for (var i = 0; i <= max; i += step) {
|
for (var i = 0; i <= max; i += step) {
|
||||||
|
@ -471,14 +446,10 @@ for (var i = 0; i < tcdata.length; i++) {
|
||||||
var row = document.getElementById("hour" + (i+1)).parentNode;
|
var row = document.getElementById("hour" + (i+1)).parentNode;
|
||||||
row.cells[0].childNodes[0].value = tcdata[i].hour;
|
row.cells[0].childNodes[0].value = tcdata[i].hour;
|
||||||
row.cells[1].childNodes[0].value = tcdata[i].min;
|
row.cells[1].childNodes[0].value = tcdata[i].min;
|
||||||
row.cells[2].childNodes[0].childNodes[0].value = parseInt(Math.round(tcdata[i].ch1 * 100 / 255));
|
row.cells[2].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].value = parseInt(Math.round(tcdata[i].ch2 * 100 / 255));
|
||||||
row.cells[3].childNodes[0].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[3].childNodes[0].childNodes[1].innerHTML = " " + row.cells[3].childNodes[0].childNodes[0].value + " %";
|
row.cells[5].childNodes[0].value = parseInt(Math.round(tcdata[i].ch4 * 100 / 255));
|
||||||
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();
|
loadTCGraphData();
|
||||||
});
|
});
|
||||||
|
@ -486,42 +457,22 @@ loadTCGraphData();
|
||||||
function createJsonFromTable() {
|
function createJsonFromTable() {
|
||||||
var tableRows = document.querySelectorAll("table tr");
|
var tableRows = document.querySelectorAll("table tr");
|
||||||
var tcdata = [];
|
var tcdata = [];
|
||||||
var timeArr = [];
|
|
||||||
for (var i = 1; i <= 10; i++) {
|
for (var i = 1; i <= 10; i++) {
|
||||||
var row = document.getElementById("hour" + i).parentNode;
|
var row = document.getElementById("hour" + i).parentNode;
|
||||||
var hour = parseInt(row.cells[0].childNodes[0].value);
|
var hour = parseInt(row.cells[0].childNodes[0].value);
|
||||||
var min = parseInt(row.cells[1].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 ch1 = Math.round(parseInt(row.cells[2].childNodes[0].childNodes[0].value) * 2.55);
|
var ch2 = Math.round(parseInt(row.cells[3].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].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].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});
|
tcdata.push({hour: hour, min: min, ch1: ch1, ch2: ch2, ch3: ch3, ch4: ch4});
|
||||||
}
|
}
|
||||||
for (var i = 0; i < timeArr.length - 1; i++) {
|
|
||||||
if (timeArr[i] >= timeArr[i + 1]) {
|
|
||||||
showToast('Error while verifying timing control data. The timestamps are not incrementing.', 'error');
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
var currentTime = {hour: new Date().getHours(), min: new Date().getMinutes()};
|
var currentTime = {hour: new Date().getHours(), min: new Date().getMinutes()};
|
||||||
var jsonData = {tcdata: tcdata, currenttime: currentTime};
|
var jsonData = {tcdata: tcdata, currenttime: currentTime};
|
||||||
return JSON.stringify(jsonData);
|
return JSON.stringify(jsonData);
|
||||||
}
|
}
|
||||||
function sendDataToServer() {
|
function sendDataToServer() {
|
||||||
var jsonData = createJsonFromTable();
|
var jsonData = createJsonFromTable();
|
||||||
if (!jsonData) {
|
|
||||||
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 generating timing control data.');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
var urlEncodedData = encodeURIComponent(jsonData);
|
var urlEncodedData = encodeURIComponent(jsonData);
|
||||||
var url = 'http://{{IP_ADDRESS}}/tc_data_blocks_store?data=' + urlEncodedData;
|
var url = 'http://{{IP_ADDRESS}}/tc_data_blocks_store?data=' + urlEncodedData;
|
||||||
var xhr = new XMLHttpRequest();
|
var xhr = new XMLHttpRequest();
|
||||||
|
@ -548,7 +499,6 @@ button.classList.remove("error");
|
||||||
button.classList.add("pure-button-primary");
|
button.classList.add("pure-button-primary");
|
||||||
button.innerHTML = "save";
|
button.innerHTML = "save";
|
||||||
}, 2000);
|
}, 2000);
|
||||||
showToast('Error while sending timing control data to server.', 'error');
|
|
||||||
console.log('Error while sending data to server.');
|
console.log('Error while sending data to server.');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -556,19 +506,3 @@ console.log('Error while sending data to server.');
|
||||||
xhr.send();
|
xhr.send();
|
||||||
loadTCGraphData();
|
loadTCGraphData();
|
||||||
}
|
}
|
||||||
function showToast(message, type) {
|
|
||||||
const toast = document.querySelector('.toast');
|
|
||||||
if (toast) {
|
|
||||||
toast.textContent = message;
|
|
||||||
toast.classList.remove('success', 'error');
|
|
||||||
if (type === 'success') {
|
|
||||||
toast.classList.add('success');
|
|
||||||
} else if (type === 'error') {
|
|
||||||
toast.classList.add('error');
|
|
||||||
}
|
|
||||||
toast.style.opacity = 1;
|
|
||||||
setTimeout(() => {
|
|
||||||
toast.style.opacity = 0;
|
|
||||||
}, 5000);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
|
@ -15,7 +15,6 @@
|
||||||
<body>
|
<body>
|
||||||
<fieldset>
|
<fieldset>
|
||||||
<h3>{{LIGHT_NAME}}</h3>
|
<h3>{{LIGHT_NAME}}</h3>
|
||||||
<div class="toast"></div>
|
|
||||||
<div class="pure-form pure-form-aligned">
|
<div class="pure-form pure-form-aligned">
|
||||||
<div class="pure-controls">
|
<div class="pure-controls">
|
||||||
<a href="/update" class="pure-button">update</a>
|
<a href="/update" class="pure-button">update</a>
|
||||||
|
@ -45,6 +44,7 @@
|
||||||
<br>
|
<br>
|
||||||
<script src="http://{{IP_ADDRESS}}/js_top">
|
<script src="http://{{IP_ADDRESS}}/js_top">
|
||||||
</script>
|
</script>
|
||||||
|
<br>
|
||||||
<table border=0>
|
<table border=0>
|
||||||
<tr>
|
<tr>
|
||||||
<td class="top-align">
|
<td class="top-align">
|
||||||
|
|
|
@ -44,23 +44,3 @@ background-color: #333;
|
||||||
.top-align {
|
.top-align {
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
}
|
}
|
||||||
.toast {
|
|
||||||
position: fixed;
|
|
||||||
bottom: 10px;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
padding: 10px;
|
|
||||||
border-radius: 5px;
|
|
||||||
color: #fff;
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: bold;
|
|
||||||
text-align: center;
|
|
||||||
opacity: 0;
|
|
||||||
transition: opacity 0.5s ease-in-out;
|
|
||||||
}
|
|
||||||
.toast.success {
|
|
||||||
background-color: #4CAF50;
|
|
||||||
}
|
|
||||||
.toast.error {
|
|
||||||
background-color: #f44336;
|
|
||||||
}
|
|
|
@ -26,7 +26,6 @@ button.classList.remove("error");
|
||||||
button.classList.add("pure-button-primary");
|
button.classList.add("pure-button-primary");
|
||||||
button.innerHTML = "ON";
|
button.innerHTML = "ON";
|
||||||
}, 2000);
|
}, 2000);
|
||||||
showToast('Error while sending data to server.', 'error');
|
|
||||||
console.log('Error while sending data to server.');
|
console.log('Error while sending data to server.');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -64,7 +63,6 @@ button.classList.remove("error");
|
||||||
button.classList.add("pure-button-primary");
|
button.classList.add("pure-button-primary");
|
||||||
button.innerHTML = "OFF";
|
button.innerHTML = "OFF";
|
||||||
}, 2000);
|
}, 2000);
|
||||||
showToast('Error while sending data to server.', 'error');
|
|
||||||
console.log('Error while sending data to server.');
|
console.log('Error while sending data to server.');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -86,7 +84,6 @@ if (!response.ok) {
|
||||||
throw new Error(`HTTP error! status: ${response.status}`);
|
throw new Error(`HTTP error! status: ${response.status}`);
|
||||||
}
|
}
|
||||||
}).catch(error => {
|
}).catch(error => {
|
||||||
showToast(`Error sending slider value to ${url}: ${error}`, 'error');
|
|
||||||
console.error(`Error sending slider value to ${url}: ${error}`);
|
console.error(`Error sending slider value to ${url}: ${error}`);
|
||||||
});
|
});
|
||||||
}, 500);
|
}, 500);
|
||||||
|
|
|
@ -225,7 +225,7 @@ function loadTCGraphData() {
|
||||||
//console.log('lowerIndex=' + lowerIndex);
|
//console.log('lowerIndex=' + lowerIndex);
|
||||||
//console.log('upperIndex=' + upperIndex);
|
//console.log('upperIndex=' + upperIndex);
|
||||||
if (lowerIndex === -1 || upperIndex === -1) {
|
if (lowerIndex === -1 || upperIndex === -1) {
|
||||||
console.log("Warning: Current time not found in time array and not between two elements in time array. Fixing it...");
|
console.log("Error: Current time not found in time array and not between two elements in time array. Fixing it...");
|
||||||
lowerIndex = 0;
|
lowerIndex = 0;
|
||||||
upperIndex = 1;
|
upperIndex = 1;
|
||||||
var tmp1 = time[0].split(':');
|
var tmp1 = time[0].split(':');
|
||||||
|
@ -389,7 +389,6 @@ links.forEach(function(link) {
|
||||||
button.classList.add("pure-button-primary");
|
button.classList.add("pure-button-primary");
|
||||||
button.innerHTML = "OFF";
|
button.innerHTML = "OFF";
|
||||||
}, 2000);
|
}, 2000);
|
||||||
showToast('Error while sending data to server.', 'error');
|
|
||||||
console.log('Error while sending data to server.');
|
console.log('Error while sending data to server.');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -438,7 +437,6 @@ links.forEach(function(link) {
|
||||||
button.classList.add("pure-button-primary");
|
button.classList.add("pure-button-primary");
|
||||||
button.innerHTML = "ON";
|
button.innerHTML = "ON";
|
||||||
}, 2000);
|
}, 2000);
|
||||||
showToast('Error while sending data to server.', 'error');
|
|
||||||
console.log('Error while sending data to server.');
|
console.log('Error while sending data to server.');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -483,12 +481,25 @@ function createTable() {
|
||||||
tdMinute.id = "minute" + i;
|
tdMinute.id = "minute" + i;
|
||||||
tr.appendChild(tdMinute);
|
tr.appendChild(tdMinute);
|
||||||
|
|
||||||
for (var j = 1; j <=4; j++)
|
// ch1
|
||||||
{
|
var tdCh1 = createSelectCell(100, 0, 1);
|
||||||
// chj_i
|
tdCh1.id = "ch1_" + i;
|
||||||
var tdCh = createSlider("ch" + j + "_" + i, 100, 0, 1);
|
tr.appendChild(tdCh1);
|
||||||
tr.appendChild(tdCh);
|
|
||||||
}
|
// ch2
|
||||||
|
var tdCh2 = createSelectCell(100, 0, 1);
|
||||||
|
tdCh2.id = "ch2_" + i;
|
||||||
|
tr.appendChild(tdCh2);
|
||||||
|
|
||||||
|
// ch3
|
||||||
|
var tdCh3 = createSelectCell(100, 0, 1);
|
||||||
|
tdCh3.id = "ch3_" + i;
|
||||||
|
tr.appendChild(tdCh3);
|
||||||
|
|
||||||
|
// ch4
|
||||||
|
var tdCh4 = createSelectCell(100, 0, 1);
|
||||||
|
tdCh4.id = "ch4_" + i;
|
||||||
|
tr.appendChild(tdCh4);
|
||||||
|
|
||||||
table.appendChild(tr);
|
table.appendChild(tr);
|
||||||
}
|
}
|
||||||
|
@ -499,48 +510,6 @@ function createTable() {
|
||||||
container.appendChild(table);
|
container.appendChild(table);
|
||||||
}
|
}
|
||||||
|
|
||||||
function createSlider(id, max, value, step) {
|
|
||||||
// Create a new input element of type range
|
|
||||||
var input = document.createElement("input");
|
|
||||||
input.type = "range";
|
|
||||||
input.min = 0;
|
|
||||||
input.max = max;
|
|
||||||
input.step = step;
|
|
||||||
input.value = value;
|
|
||||||
input.classList.add("pure-slider-range");
|
|
||||||
// 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 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) {
|
function createSelectCell(max, value, step) {
|
||||||
// Erstelle ein neues select-Element
|
// Erstelle ein neues select-Element
|
||||||
var select = document.createElement("select");
|
var select = document.createElement("select");
|
||||||
|
@ -575,18 +544,10 @@ function fillTableFromJson() {
|
||||||
var row = document.getElementById("hour" + (i+1)).parentNode;
|
var row = document.getElementById("hour" + (i+1)).parentNode;
|
||||||
row.cells[0].childNodes[0].value = tcdata[i].hour;
|
row.cells[0].childNodes[0].value = tcdata[i].hour;
|
||||||
row.cells[1].childNodes[0].value = tcdata[i].min;
|
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[2].childNodes[0].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[2].childNodes[0].childNodes[1].innerHTML = " " + row.cells[2].childNodes[0].childNodes[0].value + " %";
|
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[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();
|
loadTCGraphData();
|
||||||
|
@ -596,51 +557,26 @@ function fillTableFromJson() {
|
||||||
function createJsonFromTable() {
|
function createJsonFromTable() {
|
||||||
var tableRows = document.querySelectorAll("table tr");
|
var tableRows = document.querySelectorAll("table tr");
|
||||||
var tcdata = [];
|
var tcdata = [];
|
||||||
|
|
||||||
// Speichert die Zeitangaben (hour, minute) in einem Array
|
|
||||||
var timeArr = [];
|
|
||||||
for (var i = 1; i <= 10; i++) {
|
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);
|
|
||||||
timeArr.push(hour * 60 + min); // Speichert die Zeitangaben als Minuten seit Mitternacht
|
|
||||||
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});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Überprüft, ob die Zeitangaben von datensatz i=0 bis i=9 aufsteigend sind
|
var row = document.getElementById("hour" + i).parentNode;
|
||||||
for (var i = 0; i < timeArr.length - 1; i++) {
|
var hour = parseInt(row.cells[0].childNodes[0].value);
|
||||||
if (timeArr[i] >= timeArr[i + 1]) {
|
var min = parseInt(row.cells[1].childNodes[0].value);
|
||||||
showToast('Error while verifying timing control data. The timestamps are not incrementing.', 'error');
|
var ch1 = Math.round(parseInt(row.cells[2].childNodes[0].value) * 2.55);
|
||||||
return null;
|
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 currentTime = {hour: new Date().getHours(), min: new Date().getMinutes()};
|
||||||
var jsonData = {tcdata: tcdata, currenttime: currentTime};
|
var jsonData = {tcdata: tcdata, currenttime: currentTime};
|
||||||
//console.log("jsonData = " + JSON.stringify(jsonData));
|
//console.log("jsonData = " + JSON.stringify(jsonData));
|
||||||
return JSON.stringify(jsonData);
|
return JSON.stringify(jsonData);
|
||||||
}
|
}
|
||||||
|
|
||||||
function sendDataToServer() {
|
function sendDataToServer() {
|
||||||
var jsonData = createJsonFromTable();
|
var jsonData = createJsonFromTable();
|
||||||
|
|
||||||
if (!jsonData) {
|
|
||||||
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 generating timing control data.');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
var urlEncodedData = encodeURIComponent(jsonData);
|
var urlEncodedData = encodeURIComponent(jsonData);
|
||||||
var url = 'http://{{IP_ADDRESS}}/tc_data_blocks_store?data=' + urlEncodedData;
|
var url = 'http://{{IP_ADDRESS}}/tc_data_blocks_store?data=' + urlEncodedData;
|
||||||
var xhr = new XMLHttpRequest();
|
var xhr = new XMLHttpRequest();
|
||||||
|
@ -667,7 +603,6 @@ function sendDataToServer() {
|
||||||
button.classList.add("pure-button-primary");
|
button.classList.add("pure-button-primary");
|
||||||
button.innerHTML = "save";
|
button.innerHTML = "save";
|
||||||
}, 2000);
|
}, 2000);
|
||||||
showToast('Error while sending timing control data to server.', 'error');
|
|
||||||
console.log('Error while sending data to server.');
|
console.log('Error while sending data to server.');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -675,25 +610,3 @@ function sendDataToServer() {
|
||||||
xhr.send();
|
xhr.send();
|
||||||
loadTCGraphData(); // update the tc data graph
|
loadTCGraphData(); // update the tc data graph
|
||||||
}
|
}
|
||||||
|
|
||||||
function showToast(message, type) {
|
|
||||||
const toast = document.querySelector('.toast');
|
|
||||||
|
|
||||||
if (toast) {
|
|
||||||
toast.textContent = message;
|
|
||||||
toast.classList.remove('success', 'error');
|
|
||||||
|
|
||||||
if (type === 'success') {
|
|
||||||
toast.classList.add('success');
|
|
||||||
} else if (type === 'error') {
|
|
||||||
toast.classList.add('error');
|
|
||||||
}
|
|
||||||
|
|
||||||
toast.style.opacity = 1;
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
toast.style.opacity = 0;
|
|
||||||
}, 5000);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
|
@ -15,7 +15,6 @@
|
||||||
<body>
|
<body>
|
||||||
<fieldset>
|
<fieldset>
|
||||||
<h3>{{LIGHT_NAME}}</h3>
|
<h3>{{LIGHT_NAME}}</h3>
|
||||||
<div class="toast"></div>
|
|
||||||
<div class="pure-form pure-form-aligned">
|
<div class="pure-form pure-form-aligned">
|
||||||
<div class="pure-controls">
|
<div class="pure-controls">
|
||||||
<a href="/update" class="pure-button">update</a>
|
<a href="/update" class="pure-button">update</a>
|
||||||
|
@ -45,6 +44,7 @@
|
||||||
<br>
|
<br>
|
||||||
<script src="http://{{IP_ADDRESS}}/js_top">
|
<script src="http://{{IP_ADDRESS}}/js_top">
|
||||||
</script>
|
</script>
|
||||||
|
<br>
|
||||||
<table border=0>
|
<table border=0>
|
||||||
<tr>
|
<tr>
|
||||||
<td class="top-align">
|
<td class="top-align">
|
||||||
|
|
|
@ -44,23 +44,3 @@ background-color: #333;
|
||||||
.top-align {
|
.top-align {
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
}
|
}
|
||||||
.toast {
|
|
||||||
position: fixed;
|
|
||||||
bottom: 10px;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
padding: 10px;
|
|
||||||
border-radius: 5px;
|
|
||||||
color: #fff;
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: bold;
|
|
||||||
text-align: center;
|
|
||||||
opacity: 0;
|
|
||||||
transition: opacity 0.5s ease-in-out;
|
|
||||||
}
|
|
||||||
.toast.success {
|
|
||||||
background-color: #4CAF50;
|
|
||||||
}
|
|
||||||
.toast.error {
|
|
||||||
background-color: #f44336;
|
|
||||||
}
|
|
|
@ -27,7 +27,6 @@ links.forEach(function(link) {
|
||||||
button.classList.add("pure-button-primary");
|
button.classList.add("pure-button-primary");
|
||||||
button.innerHTML = "ON";
|
button.innerHTML = "ON";
|
||||||
}, 2000);
|
}, 2000);
|
||||||
showToast('Error while sending data to server.', 'error');
|
|
||||||
console.log('Error while sending data to server.');
|
console.log('Error while sending data to server.');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -68,7 +67,6 @@ links.forEach(function(link) {
|
||||||
button.classList.add("pure-button-primary");
|
button.classList.add("pure-button-primary");
|
||||||
button.innerHTML = "OFF";
|
button.innerHTML = "OFF";
|
||||||
}, 2000);
|
}, 2000);
|
||||||
showToast('Error while sending data to server.', 'error');
|
|
||||||
console.log('Error while sending data to server.');
|
console.log('Error while sending data to server.');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -94,7 +92,6 @@ function sendSliderValue(x) {
|
||||||
}
|
}
|
||||||
//console.log(`Sent slider value ${value} to ${url}`);
|
//console.log(`Sent slider value ${value} to ${url}`);
|
||||||
}).catch(error => {
|
}).catch(error => {
|
||||||
showToast(`Error sending slider value to ${url}: ${error}`, 'error');
|
|
||||||
console.error(`Error sending slider value to ${url}: ${error}`);
|
console.error(`Error sending slider value to ${url}: ${error}`);
|
||||||
});
|
});
|
||||||
}, 500);
|
}, 500);
|
||||||
|
|
Binary file not shown.
Before Width: | Height: | Size: 439 KiB After Width: | Height: | Size: 458 KiB |
Loading…
Reference in a new issue