Compare commits
No commits in common. "120a0e3efd96a3002c1a963312c0caf0fd1873ef" and "84dd924a1df618c85f5053c286755509956b1acf" have entirely different histories.
120a0e3efd
...
84dd924a1d
10 changed files with 251 additions and 343 deletions
|
@ -30,7 +30,6 @@ amain.classList.remove("pure-button-primary");
|
||||||
acfg.classList.remove("pure-button-primary");
|
acfg.classList.remove("pure-button-primary");
|
||||||
atde.classList.add("pure-button-primary");
|
atde.classList.add("pure-button-primary");
|
||||||
createTable();
|
createTable();
|
||||||
fillTableFromJson();
|
|
||||||
});
|
});
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.log("Error: load listener of the tab action listener management: " + error.message);
|
console.log("Error: load listener of the tab action listener management: " + error.message);
|
||||||
|
@ -220,100 +219,71 @@ document.getElementById('on'+id+'_off').classList.remove('pure-button-primary');
|
||||||
});
|
});
|
||||||
function createTable() {
|
function createTable() {
|
||||||
var table = document.createElement("table");
|
var table = document.createElement("table");
|
||||||
table.border = "1";
|
|
||||||
var headerRow = document.createElement("tr");
|
var headerRow = document.createElement("tr");
|
||||||
var headers = ["Hour", "Minute", "Ch1", "Ch2", "Ch3", "Ch4"];
|
var headers = ["Stunde", "Minute", "ch1", "ch2", "ch3", "ch4"];
|
||||||
headers.forEach(header => {
|
for (var i = 0; i < headers.length; i++) {
|
||||||
var th = document.createElement("th");
|
var header = document.createElement("th");
|
||||||
th.innerHTML = header;
|
header.innerHTML = headers[i];
|
||||||
headerRow.appendChild(th);
|
headerRow.appendChild(header);
|
||||||
});
|
|
||||||
table.appendChild(headerRow);
|
|
||||||
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);
|
|
||||||
}
|
}
|
||||||
|
table.appendChild(headerRow);
|
||||||
|
for (var row = 0; row < 10; row++) {
|
||||||
|
var contentRow = document.createElement("tr");
|
||||||
|
var hourCell = document.createElement("td");
|
||||||
|
var hourInput = document.createElement("input");
|
||||||
|
hourInput.type = "number";
|
||||||
|
hourInput.min = 0;
|
||||||
|
hourInput.max = 23;
|
||||||
|
hourCell.appendChild(hourInput);
|
||||||
|
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 channelInput = document.createElement("input");
|
||||||
|
channelInput.type = "number";
|
||||||
|
channelInput.min = 0;
|
||||||
|
channelInput.max = 100;
|
||||||
|
channelCell.appendChild(channelInput);
|
||||||
|
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");
|
var container = document.getElementById("table-container");
|
||||||
container.innerHTML = "";
|
container.innerHTML = "";
|
||||||
container.classList.add("pure-form");
|
container.classList.add("pure-form");
|
||||||
container.appendChild(table);
|
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() {
|
|
||||||
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");
|
|
||||||
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.send();
|
|
||||||
}
|
|
|
@ -5,11 +5,7 @@
|
||||||
<label>
|
<label>
|
||||||
<strong>Timming control data editor</strong>
|
<strong>Timming control data editor</strong>
|
||||||
</label>
|
</label>
|
||||||
<br>
|
<div id="table-container"></div>
|
||||||
<div id="table-container">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
<a href="#" class="pure-button pure-button-primary" onclick="sendDataToServer();">save</a>
|
|
||||||
</div>
|
</div>
|
||||||
</div> <!-- end of tab-tde -->
|
</div> <!-- end of tab-tde -->
|
||||||
<script src="http://{{IP_ADDRESS}}/js_bottom">
|
<script src="http://{{IP_ADDRESS}}/js_bottom">
|
||||||
|
|
|
@ -9,7 +9,7 @@
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
|
||||||
<link rel="stylesheet" href="https://unpkg.com/purecss@0.6.2/build/pure-min.css">
|
<link rel="stylesheet" href="https://unpkg.com/purecss@0.6.2/build/pure-min.css">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<link rel="stylesheet" href="http://{{IP_ADDRESS}}/css">
|
<style src="http://{{IP_ADDRESS}}'/css">
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
|
@ -1,43 +1,52 @@
|
||||||
#tab-lights, #tab-config, #tab-tde {
|
#tab-lights, #tab-config, #tab-tde {
|
||||||
display: none;
|
display: none;
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
color: black;
|
color: black;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
#tab-lights.visible {
|
#tab-lights.visible {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
#tab-config.visible {
|
#tab-config.visible {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
#tab-tde.visible {
|
#tab-tde.visible {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
.pure-table td {
|
/* CSS-Regeln für die Tabellenzellen */
|
||||||
padding: 4px;
|
.pure-table td {
|
||||||
}
|
padding: 4px;
|
||||||
.pure-form input[type="number"] {
|
}
|
||||||
width: 60px;
|
|
||||||
height: 20px;
|
/* CSS-Regeln für die Eingabefelder */
|
||||||
border-radius: 3px;
|
.pure-form input[type="number"] {
|
||||||
border: 1px solid #ccc;
|
width: 60px;
|
||||||
}
|
height: 20px;
|
||||||
.pure-form select {
|
border-radius: 3px;
|
||||||
width: 80px;
|
border: 1px solid #ccc;
|
||||||
height: 26px;
|
}
|
||||||
border-radius: 3px;
|
|
||||||
border: 1px solid #ccc;
|
/* CSS-Regeln für die Auswahllisten */
|
||||||
background-color: #fff;
|
.pure-form select {
|
||||||
}
|
width: 80px;
|
||||||
.pure-button {
|
height: 26px;
|
||||||
background-color: #5a5a5a;
|
border-radius: 3px;
|
||||||
color: #fff;
|
border: 1px solid #ccc;
|
||||||
border-radius: 3px;
|
background-color: #fff;
|
||||||
border: none;
|
}
|
||||||
padding: 8px 12px;
|
|
||||||
font-size: 14px;
|
/* CSS-Regeln für den Export-Button */
|
||||||
cursor: pointer;
|
.pure-button {
|
||||||
}
|
background-color: #5a5a5a;
|
||||||
.pure-button:hover {
|
color: #fff;
|
||||||
background-color: #333;
|
border-radius: 3px;
|
||||||
}
|
border: none;
|
||||||
|
padding: 8px 12px;
|
||||||
|
font-size: 14px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pure-button:hover {
|
||||||
|
background-color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
|
@ -484,7 +484,6 @@ void init_webserver()
|
||||||
if (server.hasArg("data"))
|
if (server.hasArg("data"))
|
||||||
{
|
{
|
||||||
String jsonData = server.arg("data");
|
String jsonData = server.arg("data");
|
||||||
Serial.println("Received: " + jsonData);
|
|
||||||
tc_jsonDataBlocksToEEPROM(jsonData);
|
tc_jsonDataBlocksToEEPROM(jsonData);
|
||||||
server.send(200, "text/html", "tcdata saved");
|
server.send(200, "text/html", "tcdata saved");
|
||||||
}
|
}
|
||||||
|
@ -502,7 +501,7 @@ void init_webserver()
|
||||||
|
|
||||||
server.on("/css", []()
|
server.on("/css", []()
|
||||||
{
|
{
|
||||||
server.send(200, "text/css", loadSPIFFSFile("/style.css"));
|
server.send(200, "text/html", loadSPIFFSFile("/style.css"));
|
||||||
});
|
});
|
||||||
|
|
||||||
server.on("/", []()
|
server.on("/", []()
|
||||||
|
|
|
@ -1,5 +1,4 @@
|
||||||
function addTabListener() {
|
function addTabListener() {
|
||||||
//console.log("Try to add tab listener");
|
|
||||||
try {
|
try {
|
||||||
var tabMain = document.getElementById("tab-lights");
|
var tabMain = document.getElementById("tab-lights");
|
||||||
var tabConfig = document.getElementById("tab-config");
|
var tabConfig = document.getElementById("tab-config");
|
||||||
|
@ -11,7 +10,6 @@ function addTabListener() {
|
||||||
|
|
||||||
|
|
||||||
amain.addEventListener("click", function() {
|
amain.addEventListener("click", function() {
|
||||||
//console.log("Switch to main lights tab");
|
|
||||||
tabMain.classList.add("visible");
|
tabMain.classList.add("visible");
|
||||||
tabConfig.classList.remove("visible");
|
tabConfig.classList.remove("visible");
|
||||||
tabTDE.classList.remove("visible");
|
tabTDE.classList.remove("visible");
|
||||||
|
@ -22,7 +20,6 @@ function addTabListener() {
|
||||||
});
|
});
|
||||||
|
|
||||||
acfg.addEventListener("click", function() {
|
acfg.addEventListener("click", function() {
|
||||||
//console.log("Switch to config tab");
|
|
||||||
tabMain.classList.remove("visible");
|
tabMain.classList.remove("visible");
|
||||||
tabConfig.classList.add("visible");
|
tabConfig.classList.add("visible");
|
||||||
tabTDE.classList.remove("visible");
|
tabTDE.classList.remove("visible");
|
||||||
|
@ -33,7 +30,6 @@ function addTabListener() {
|
||||||
});
|
});
|
||||||
|
|
||||||
atde.addEventListener("click", function() {
|
atde.addEventListener("click", function() {
|
||||||
//console.log("Switch to TDE tab");
|
|
||||||
tabMain.classList.remove("visible");
|
tabMain.classList.remove("visible");
|
||||||
tabConfig.classList.remove("visible");
|
tabConfig.classList.remove("visible");
|
||||||
tabTDE.classList.add("visible");
|
tabTDE.classList.add("visible");
|
||||||
|
@ -42,8 +38,7 @@ function addTabListener() {
|
||||||
acfg.classList.remove("pure-button-primary");
|
acfg.classList.remove("pure-button-primary");
|
||||||
atde.classList.add("pure-button-primary");
|
atde.classList.add("pure-button-primary");
|
||||||
|
|
||||||
createTable(); // recreate the table on timing data editor tab
|
createTable();
|
||||||
fillTableFromJson();
|
|
||||||
});
|
});
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.log("Error: load listener of the tab action listener management: " + error.message);
|
console.log("Error: load listener of the tab action listener management: " + error.message);
|
||||||
|
@ -262,140 +257,91 @@ links.forEach(function(link) {
|
||||||
});
|
});
|
||||||
|
|
||||||
function createTable() {
|
function createTable() {
|
||||||
// Erstelle eine Tabelle
|
var table = document.createElement("table");
|
||||||
var table = document.createElement("table");
|
|
||||||
table.border = "1";
|
|
||||||
|
|
||||||
// Erstelle eine Kopfzeile
|
|
||||||
var headerRow = document.createElement("tr");
|
|
||||||
|
|
||||||
// Füge die Spaltenüberschriften hinzu
|
|
||||||
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);
|
|
||||||
|
|
||||||
// Erstelle Zeilen mit Zellen für jedes Element
|
|
||||||
for (var i = 1; i <= 10; i++) {
|
|
||||||
var tr = document.createElement("tr");
|
|
||||||
|
|
||||||
// Stunde
|
|
||||||
var tdHour = createSelectCell(23, 0);
|
|
||||||
tdHour.id = "hour" + i;
|
|
||||||
tr.appendChild(tdHour);
|
|
||||||
|
|
||||||
// Minute
|
|
||||||
var tdMinute = createSelectCell(59, 0);
|
|
||||||
tdMinute.id = "minute" + i;
|
|
||||||
tr.appendChild(tdMinute);
|
|
||||||
|
|
||||||
// ch1
|
|
||||||
var tdCh1 = createSelectCell(100, 0);
|
|
||||||
tdCh1.id = "ch1_" + i;
|
|
||||||
tr.appendChild(tdCh1);
|
|
||||||
|
|
||||||
// ch2
|
|
||||||
var tdCh2 = createSelectCell(100, 0);
|
|
||||||
tdCh2.id = "ch2_" + i;
|
|
||||||
tr.appendChild(tdCh2);
|
|
||||||
|
|
||||||
// ch3
|
|
||||||
var tdCh3 = createSelectCell(100, 0);
|
|
||||||
tdCh3.id = "ch3_" + i;
|
|
||||||
tr.appendChild(tdCh3);
|
|
||||||
|
|
||||||
// ch4
|
|
||||||
var tdCh4 = createSelectCell(100, 0);
|
|
||||||
tdCh4.id = "ch4_" + i;
|
|
||||||
tr.appendChild(tdCh4);
|
|
||||||
|
|
||||||
table.appendChild(tr);
|
|
||||||
}
|
|
||||||
|
|
||||||
var container = document.getElementById("table-container");
|
|
||||||
container.innerHTML = "";
|
|
||||||
container.classList.add("pure-form");
|
|
||||||
container.appendChild(table);
|
|
||||||
}
|
|
||||||
|
|
||||||
function createSelectCell(max, value) {
|
|
||||||
// Erstelle ein neues select-Element
|
|
||||||
var select = document.createElement("select");
|
|
||||||
|
|
||||||
// Füge Optionen hinzu
|
// Headerzeile
|
||||||
for (var i = 0; i <= max; i++) {
|
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);
|
||||||
|
}
|
||||||
|
table.appendChild(headerRow);
|
||||||
|
|
||||||
|
// Inhaltszeilen
|
||||||
|
for (var row = 0; row < 10; row++) {
|
||||||
|
var contentRow = document.createElement("tr");
|
||||||
|
|
||||||
|
// Spalte "Stunde"
|
||||||
|
var hourCell = document.createElement("td");
|
||||||
|
var hourInput = document.createElement("input");
|
||||||
|
hourInput.type = "number";
|
||||||
|
hourInput.min = 0;
|
||||||
|
hourInput.max = 23;
|
||||||
|
hourCell.appendChild(hourInput);
|
||||||
|
contentRow.appendChild(hourCell);
|
||||||
|
|
||||||
|
// Spalte "Minute"
|
||||||
|
var minuteCell = document.createElement("td");
|
||||||
|
var minuteSelect = document.createElement("select");
|
||||||
|
for (var minute = 0; minute <= 50; minute += 10) {
|
||||||
var option = document.createElement("option");
|
var option = document.createElement("option");
|
||||||
option.value = i;
|
option.value = minute;
|
||||||
option.text = i;
|
option.text = minute.toString().padStart(2, "0");
|
||||||
select.appendChild(option);
|
minuteSelect.appendChild(option);
|
||||||
|
}
|
||||||
|
minuteCell.appendChild(minuteSelect);
|
||||||
|
contentRow.appendChild(minuteCell);
|
||||||
|
|
||||||
|
// Spalten "ch1" bis "ch4"
|
||||||
|
for (var channel = 1; channel <= 4; channel++) {
|
||||||
|
var channelCell = document.createElement("td");
|
||||||
|
var channelInput = document.createElement("input");
|
||||||
|
channelInput.type = "number";
|
||||||
|
channelInput.min = 0;
|
||||||
|
channelInput.max = 100;
|
||||||
|
channelCell.appendChild(channelInput);
|
||||||
|
contentRow.appendChild(channelCell);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Wähle die Option aus, die dem übergebenen Wert entspricht
|
table.appendChild(contentRow);
|
||||||
select.value = value;
|
|
||||||
|
|
||||||
// Erstelle eine neue Zellenreihe und -zelle
|
|
||||||
var row = document.createElement("td");
|
|
||||||
row.appendChild(select);
|
|
||||||
|
|
||||||
// Gib die Zelle zurück
|
|
||||||
return row;
|
|
||||||
}
|
|
||||||
|
|
||||||
function fillTableFromJson() {
|
|
||||||
// Lade JSON-Daten
|
|
||||||
fetch('http://{{IP_ADDRESS}}/tc_data_blocks_read')
|
|
||||||
.then(response => response.json())
|
|
||||||
.then(data => {
|
|
||||||
// Fülle die Tabelle mit Daten
|
|
||||||
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() {
|
// Button
|
||||||
var tableRows = document.querySelectorAll("table tr");
|
var button = document.createElement("button");
|
||||||
var tcdata = [];
|
button.innerHTML = "Save";
|
||||||
for (var i = 1; i <= 10; i++) {
|
button.classList.add("pure-button");
|
||||||
|
button.classList.add("pure-button-primary");
|
||||||
|
button.onclick = function() {
|
||||||
|
var data = [];
|
||||||
|
|
||||||
var row = document.getElementById("hour" + i).parentNode;
|
var rows = table.getElementsByTagName("tr");
|
||||||
var hour = parseInt(row.cells[0].childNodes[0].value);
|
for (var row = 1; row < rows.length; row++) {
|
||||||
var min = parseInt(row.cells[1].childNodes[0].value);
|
var cells = rows[row].getElementsByTagName("td");
|
||||||
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 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 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 json = JSON.stringify(data);
|
||||||
var jsonData = createJsonFromTable();
|
console.log(json);
|
||||||
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();
|
var xhr = new XMLHttpRequest();
|
||||||
xhr.open('GET', url, true);
|
xhr.open("POST", "http://{{IP_ADDRESS}}/tc_data_save?data=" + encodeURIComponent(json), true);
|
||||||
xhr.onreadystatechange = function() {
|
|
||||||
if (xhr.readyState === 4 && xhr.status === 200) {
|
|
||||||
console.log('Data successfully sent to server!');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
xhr.send();
|
xhr.send();
|
||||||
}
|
|
||||||
|
};
|
||||||
|
|
||||||
|
var container = document.getElementById("table-container");
|
||||||
|
container.innerHTML = "";
|
||||||
|
container.classList.add("pure-form");
|
||||||
|
container.appendChild(table);
|
||||||
|
container.appendChild(button);
|
||||||
|
}
|
|
@ -5,11 +5,7 @@
|
||||||
<label>
|
<label>
|
||||||
<strong>Timming control data editor</strong>
|
<strong>Timming control data editor</strong>
|
||||||
</label>
|
</label>
|
||||||
<br>
|
<div id="table-container"></div>
|
||||||
<div id="table-container">
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
<a href="#" class="pure-button pure-button-primary" onclick="sendDataToServer();">save</a>
|
|
||||||
</div>
|
</div>
|
||||||
</div> <!-- end of tab-tde -->
|
</div> <!-- end of tab-tde -->
|
||||||
|
|
||||||
|
|
|
@ -9,7 +9,7 @@
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
|
||||||
<link rel="stylesheet" href="https://unpkg.com/purecss@0.6.2/build/pure-min.css">
|
<link rel="stylesheet" href="https://unpkg.com/purecss@0.6.2/build/pure-min.css">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<link rel="stylesheet" href="http://{{IP_ADDRESS}}/css">
|
<style src="http://{{IP_ADDRESS}}'/css">
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
|
@ -1,43 +1,52 @@
|
||||||
#tab-lights, #tab-config, #tab-tde {
|
#tab-lights, #tab-config, #tab-tde {
|
||||||
display: none;
|
display: none;
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
color: black;
|
color: black;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
#tab-lights.visible {
|
#tab-lights.visible {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
#tab-config.visible {
|
#tab-config.visible {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
#tab-tde.visible {
|
#tab-tde.visible {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
.pure-table td {
|
/* CSS-Regeln für die Tabellenzellen */
|
||||||
padding: 4px;
|
.pure-table td {
|
||||||
}
|
padding: 4px;
|
||||||
.pure-form input[type="number"] {
|
}
|
||||||
width: 60px;
|
|
||||||
height: 20px;
|
/* CSS-Regeln für die Eingabefelder */
|
||||||
border-radius: 3px;
|
.pure-form input[type="number"] {
|
||||||
border: 1px solid #ccc;
|
width: 60px;
|
||||||
}
|
height: 20px;
|
||||||
.pure-form select {
|
border-radius: 3px;
|
||||||
width: 80px;
|
border: 1px solid #ccc;
|
||||||
height: 26px;
|
}
|
||||||
border-radius: 3px;
|
|
||||||
border: 1px solid #ccc;
|
/* CSS-Regeln für die Auswahllisten */
|
||||||
background-color: #fff;
|
.pure-form select {
|
||||||
}
|
width: 80px;
|
||||||
.pure-button {
|
height: 26px;
|
||||||
background-color: #5a5a5a;
|
border-radius: 3px;
|
||||||
color: #fff;
|
border: 1px solid #ccc;
|
||||||
border-radius: 3px;
|
background-color: #fff;
|
||||||
border: none;
|
}
|
||||||
padding: 8px 12px;
|
|
||||||
font-size: 14px;
|
/* CSS-Regeln für den Export-Button */
|
||||||
cursor: pointer;
|
.pure-button {
|
||||||
}
|
background-color: #5a5a5a;
|
||||||
.pure-button:hover {
|
color: #fff;
|
||||||
background-color: #333;
|
border-radius: 3px;
|
||||||
}
|
border: none;
|
||||||
|
padding: 8px 12px;
|
||||||
|
font-size: 14px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pure-button:hover {
|
||||||
|
background-color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
|
@ -48,7 +48,7 @@ uint8_t example_timer_data_block[] = {
|
||||||
18, 0, 205, 205, 205, 205, // 4: 80% all for 5 hours
|
18, 0, 205, 205, 205, 205, // 4: 80% all for 5 hours
|
||||||
19, 0, 50, 50, 50, 50, // 5: 20% all
|
19, 0, 50, 50, 50, 50, // 5: 20% all
|
||||||
19, 30, 50, 0, 50, 0, // 6: 20% all blues
|
19, 30, 50, 0, 50, 0, // 6: 20% all blues
|
||||||
20, 0, 25, 0, 25, 0, // 9: 10% all blues
|
20, 0, 25, 0, 25, 0, // 9: disabled
|
||||||
20, 30, 25, 0, 0, 0, // 7: 10% ch1 blues
|
20, 30, 25, 0, 0, 0, // 7: 10% ch1 blues
|
||||||
21, 0, 0, 0, 0, 0, // 8: 0% all
|
21, 0, 0, 0, 0, 0, // 8: 0% all
|
||||||
};
|
};
|
||||||
|
@ -415,16 +415,13 @@ String tc_getJsonData()
|
||||||
|
|
||||||
void tc_jsonDataBlocksToEEPROM(String json_data_string)
|
void tc_jsonDataBlocksToEEPROM(String json_data_string)
|
||||||
{
|
{
|
||||||
StaticJsonDocument<1289> doc;
|
StaticJsonDocument<512> doc;
|
||||||
deserializeJson(doc, json_data_string);
|
deserializeJson(doc, json_data_string);
|
||||||
|
|
||||||
Serial.println("Reading data from json data:");
|
|
||||||
// Loop through each data block in the JSON data and store it in the tc_data array
|
// Loop through each data block in the JSON data and store it in the tc_data array
|
||||||
for (uint8_t i = 0; i < NUMBER_OF_TIMER_DATA_BLOCKS; i++)
|
for (uint8_t i = 0; i < NUMBER_OF_TIMER_DATA_BLOCKS; i++)
|
||||||
{
|
{
|
||||||
//Serial.println("<< " + (String)i);
|
JsonObject obj = doc[i];
|
||||||
|
|
||||||
JsonObject obj = doc["tcdata"][i];
|
|
||||||
|
|
||||||
// Check and set the limits of the hour value
|
// Check and set the limits of the hour value
|
||||||
int hour = obj["hour"];
|
int hour = obj["hour"];
|
||||||
|
@ -434,7 +431,6 @@ void tc_jsonDataBlocksToEEPROM(String json_data_string)
|
||||||
hour = 23;
|
hour = 23;
|
||||||
}
|
}
|
||||||
tc_data[i].hh = hour;
|
tc_data[i].hh = hour;
|
||||||
Serial.print("hour = " + (String)tc_data[i].hh + " " + (String)obj["hour"] + " ");
|
|
||||||
|
|
||||||
// Check and set the limits of the minute value
|
// Check and set the limits of the minute value
|
||||||
int minute = obj["min"];
|
int minute = obj["min"];
|
||||||
|
@ -444,7 +440,6 @@ void tc_jsonDataBlocksToEEPROM(String json_data_string)
|
||||||
minute = 59;
|
minute = 59;
|
||||||
}
|
}
|
||||||
tc_data[i].mm = minute;
|
tc_data[i].mm = minute;
|
||||||
Serial.print("minute = " + (String)tc_data[i].mm + " " + (String)obj["min"] + " ");
|
|
||||||
|
|
||||||
// Check and set the limits of the ch1 value
|
// Check and set the limits of the ch1 value
|
||||||
int ch1 = obj["ch1"];
|
int ch1 = obj["ch1"];
|
||||||
|
@ -454,7 +449,6 @@ void tc_jsonDataBlocksToEEPROM(String json_data_string)
|
||||||
ch1 = 255;
|
ch1 = 255;
|
||||||
}
|
}
|
||||||
tc_data[i].ch1 = ch1;
|
tc_data[i].ch1 = ch1;
|
||||||
Serial.print("ch1 = " + (String)tc_data[i].ch1 + " " + (String)obj["ch1"] + " ");
|
|
||||||
|
|
||||||
// Check and set the limits of the ch2 value
|
// Check and set the limits of the ch2 value
|
||||||
int ch2 = obj["ch2"];
|
int ch2 = obj["ch2"];
|
||||||
|
@ -464,7 +458,6 @@ void tc_jsonDataBlocksToEEPROM(String json_data_string)
|
||||||
ch2 = 255;
|
ch2 = 255;
|
||||||
}
|
}
|
||||||
tc_data[i].ch2 = ch2;
|
tc_data[i].ch2 = ch2;
|
||||||
Serial.print("ch2 = " + (String)tc_data[i].ch2 + " " + (String)obj["ch2"] + " ");
|
|
||||||
|
|
||||||
// Check and set the limits of the ch3 value
|
// Check and set the limits of the ch3 value
|
||||||
int ch3 = obj["ch3"];
|
int ch3 = obj["ch3"];
|
||||||
|
@ -474,7 +467,6 @@ void tc_jsonDataBlocksToEEPROM(String json_data_string)
|
||||||
ch3 = 255;
|
ch3 = 255;
|
||||||
}
|
}
|
||||||
tc_data[i].ch3 = ch3;
|
tc_data[i].ch3 = ch3;
|
||||||
Serial.print("ch3 = " + (String)tc_data[i].ch3 + " " + (String)obj["ch3"] + " ");
|
|
||||||
|
|
||||||
// Check and set the limits of the ch4 value
|
// Check and set the limits of the ch4 value
|
||||||
int ch4 = obj["ch4"];
|
int ch4 = obj["ch4"];
|
||||||
|
@ -484,21 +476,12 @@ void tc_jsonDataBlocksToEEPROM(String json_data_string)
|
||||||
ch4 = 255;
|
ch4 = 255;
|
||||||
}
|
}
|
||||||
tc_data[i].ch4 = ch4;
|
tc_data[i].ch4 = ch4;
|
||||||
Serial.println("ch4 = " + (String)tc_data[i].ch4 + " " + (String)obj["ch4"] + "\n---");
|
|
||||||
}
|
}
|
||||||
|
|
||||||
Serial.println("Writing to EEPROM...");
|
|
||||||
// Write the tc_data array to the EEPROM
|
// Write the tc_data array to the EEPROM
|
||||||
for (uint16_t i = 0; i < (NUMBER_OF_TIMER_DATA_BLOCKS * LENGTH_OF_TIMER_DATA_BLOCK); i++)
|
for (uint16_t i = 0; i < (NUMBER_OF_TIMER_DATA_BLOCKS * LENGTH_OF_TIMER_DATA_BLOCK); i++)
|
||||||
{
|
{
|
||||||
//Serial.println(" " + (String)(EEPROM_TIMING_DATA_ADDRESS + i) + " " + (String)(*((uint8_t*)&tc_data + i)));
|
|
||||||
|
|
||||||
EEPROM.write(EEPROM_TIMING_DATA_ADDRESS + i, *((uint8_t*)&tc_data + i));
|
EEPROM.write(EEPROM_TIMING_DATA_ADDRESS + i, *((uint8_t*)&tc_data + i));
|
||||||
/*if (((i+1) % 6 == 0))
|
|
||||||
{
|
|
||||||
Serial.println("---");
|
|
||||||
}*/
|
|
||||||
|
|
||||||
}
|
}
|
||||||
EEPROM.commit();
|
EEPROM.commit();
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue