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

Compare commits

base: klaute:db6dff5a9755f99d24a5bb9928bfea434508b9f9
Branches Tags
klaute:main
klaute:develop
..
compare: klaute:9844d9fca81f9fb88cb95500f6a4811ba0d7b624
Branches Tags
klaute:develop
klaute:main

5 commits
db6dff5a97 ... 9844d9fca8

Author SHA1 Message Date
Kai Lauterbach
9844d9fca8 Removed the select boxes from the timing control editor and replaced them by sliders. 2023-05-08 10:27:35 +02:00
Kai Lauterbach
a6ac0be517 Replaces static code which generates the timing control data editor by a dynamic block. 2023-05-08 10:05:10 +02:00
Kai Lauterbach
967a3071af Lights control main page newline removed 2023-05-08 09:47:55 +02:00
Kai Lauterbach
25c2e8622f Added a toast message to the webinterface. 2023-05-08 09:46:25 +02:00
Kai Lauterbach
b95c73cfb5 Added a check which verifies the data in the timing data block editor 2023-05-08 09:30:37 +02:00
8 changed files with 258 additions and 59 deletions
Show stats Expand all files Collapse all files

108
firmware/data/bottom.js
View file

@ -190,7 +190,7 @@ break;
} }
} }
if (lowerIndex === -1 || upperIndex === -1) { 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..."); console.log("Warning: 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,6 +336,7 @@ 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.');
} }
} }
@ -376,6 +377,7 @@ 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.');
} }
} }
@ -405,18 +407,11 @@ 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);
var tdCh1 = createSelectCell(100, 0, 1); for (var j = 1; j <=4; j++)
tdCh1.id = "ch1_" + i; {
tr.appendChild(tdCh1); var tdCh = createSlider("ch" + j + "_" + i, 100, 0, 1);
var tdCh2 = createSelectCell(100, 0, 1); tr.appendChild(tdCh);
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");
@ -424,6 +419,36 @@ 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 = "&nbsp;" + value + " %";
div.appendChild(span);
input.oninput = function() {
span.innerHTML = "&nbsp;" + 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) {
@ -446,10 +471,14 @@ 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].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 = "&nbsp;" + row.cells[2].childNodes[0].childNodes[0].value + " %";
row.cells[4].childNodes[0].value = parseInt(Math.round(tcdata[i].ch3 * 100 / 255)); row.cells[3].childNodes[0].childNodes[0].value = parseInt(Math.round(tcdata[i].ch2 * 100 / 255));
row.cells[5].childNodes[0].value = parseInt(Math.round(tcdata[i].ch4 * 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(); loadTCGraphData();
}); });
@ -457,22 +486,42 @@ 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);
var ch1 = Math.round(parseInt(row.cells[2].childNodes[0].value) * 2.55); timeArr.push(hour * 60 + min);
var ch2 = Math.round(parseInt(row.cells[3].childNodes[0].value) * 2.55); var ch1 = Math.round(parseInt(row.cells[2].childNodes[0].childNodes[0].value) * 2.55);
var ch3 = Math.round(parseInt(row.cells[4].childNodes[0].value) * 2.55); var ch2 = Math.round(parseInt(row.cells[3].childNodes[0].childNodes[0].value) * 2.55);
var ch4 = Math.round(parseInt(row.cells[5].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}); 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();
@ -499,6 +548,7 @@ 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.');
} }
} }
@ -506,3 +556,19 @@ 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);
}
}

2
firmware/data/index_template_top.html
View file

@ -15,6 +15,7 @@
<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>
@ -44,7 +45,6 @@
<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">

20
firmware/data/style.css
View file

@ -44,3 +44,23 @@ 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;
}

3
firmware/data/top.js
View file

@ -26,6 +26,7 @@ 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.');
} }
} }
@ -63,6 +64,7 @@ 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.');
} }
} }
@ -84,6 +86,7 @@ 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);

157
firmware/html/bottom.js
View file

@ -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("Error: Current time not found in time array and not between two elements in time array. Fixing it..."); console.log("Warning: 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,6 +389,7 @@ 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.');
} }
} }
@ -437,6 +438,7 @@ 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.');
} }
} }
@ -481,25 +483,12 @@ function createTable() {
tdMinute.id = "minute" + i; tdMinute.id = "minute" + i;
tr.appendChild(tdMinute); tr.appendChild(tdMinute);
// ch1 for (var j = 1; j <=4; j++)
var tdCh1 = createSelectCell(100, 0, 1); {
tdCh1.id = "ch1_" + i; // chj_i
tr.appendChild(tdCh1); var tdCh = createSlider("ch" + j + "_" + i, 100, 0, 1);
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);
} }
@ -510,6 +499,48 @@ 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 = "&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) { 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");
@ -544,10 +575,18 @@ 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[3].childNodes[0].value = parseInt(Math.round(tcdata[i].ch2 * 100 / 255)); row.cells[2].childNodes[0].childNodes[0].value = parseInt(Math.round(tcdata[i].ch1 * 100 / 255));
row.cells[4].childNodes[0].value = parseInt(Math.round(tcdata[i].ch3 * 100 / 255)); row.cells[2].childNodes[0].childNodes[1].innerHTML = "&nbsp;" + row.cells[2].childNodes[0].childNodes[0].value + " %";
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 = "&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(); loadTCGraphData();
@ -557,26 +596,51 @@ 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 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); // Speichert die Zeitangaben als Minuten seit Mitternacht
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});
} }
// Überprüft, ob die Zeitangaben von datensatz i=0 bis i=9 aufsteigend sind
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};
//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();
@ -603,6 +667,7 @@ 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.');
} }
} }
@ -610,3 +675,25 @@ 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);
}
}

2
firmware/html/index_template_top.html
View file

@ -15,6 +15,7 @@
<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>
@ -44,7 +45,6 @@
<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">

20
firmware/html/style.css
View file

@ -44,3 +44,23 @@ 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;
}

3
firmware/html/top.js
View file

@ -27,6 +27,7 @@ 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.');
} }
} }
@ -67,6 +68,7 @@ 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.');
} }
} }
@ -92,6 +94,7 @@ 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);