Added some more code to the timing controller editor tab.

This commit is contained in:
Kai Lauterbach 2023-05-05 20:40:06 +02:00
parent 8f76e5d846
commit 975e0d140d
5 changed files with 216 additions and 188 deletions

View file

@ -220,98 +220,99 @@ 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 = ["Stunde", "Minute", "ch1", "ch2", "ch3", "ch4"]; var headers = ["Hour", "Minute", "Ch1", "Ch2", "Ch3", "Ch4"];
for (var i = 0; i < headers.length; i++) { headers.forEach(header => {
var header = document.createElement("th"); var th = document.createElement("th");
header.innerHTML = headers[i]; th.innerHTML = header;
headerRow.appendChild(header); headerRow.appendChild(th);
} });
table.appendChild(headerRow); table.appendChild(headerRow);
for (var row = 0; row < 10; row++) { for (var i = 1; i <= 10; i++) {
var contentRow = document.createElement("tr"); var tr = document.createElement("tr");
var hourCell = document.createElement("td"); var tdHour = createSelectCell(23, 0);
var hourSelect = document.createElement("select"); tdHour.id = "hour" + i;
for (var hour = 0; hour <= 23; hour++) { tr.appendChild(tdHour);
var option = document.createElement("option"); var tdMinute = createSelectCell(59, 0);
option.value = hour; tdMinute.id = "minute" + i;
option.text = hour.toString().padStart(2, "0"); tr.appendChild(tdMinute);
hourSelect.appendChild(option); 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);
} }
hourCell.appendChild(hourSelect);
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 channelSelect = document.createElement("select");
for (var i = 0; i <= 100; i++) {
var option = document.createElement("option");
option.value = i;
option.text = i.toString();
channelSelect.appendChild(option);
}
channelCell.appendChild(channelSelect);
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() { function fillTableFromJson() {
var xhr = new XMLHttpRequest(); fetch('http://{{IP_ADDRESS}}/tc_data_blocks_read')
xhr.onreadystatechange = function() { .then(response => response.json())
if (this.readyState == 4 && this.status == 200) { .then(data => {
var json = JSON.parse(this.responseText); 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 tableRows = document.querySelectorAll("table tr");
for (var i = 1; i < tableRows.length; i++) { var tcdata = [];
var cells = tableRows[i].querySelectorAll("td"); for (var i = 1; i <= 10; i++) {
var hour = parseInt(cells[0].querySelector("select").value); var row = document.getElementById("hour" + i).parentNode;
var minute = parseInt(cells[1].querySelector("select").value); var hour = parseInt(row.cells[0].childNodes[0].value);
for (var j = 0; j < json.tcdata.length; j++) { var min = parseInt(row.cells[1].childNodes[0].value);
if (json.tcdata[j].hour == hour && json.tcdata[j].min == minute) { var ch1 = Math.round(parseInt(row.cells[2].childNodes[0].value) * 2.55);
cells[2 + j].querySelector("select").value = json.tcdata[j]["ch" + (j + 1)]; 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.open("GET", "http://192.168.0.27/tc_data_blocks_read", true);
xhr.send();
} }

View file

@ -6,7 +6,10 @@
<strong>Timming control data editor</strong> <strong>Timming control data editor</strong>
</label> </label>
<br> <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">

View file

@ -262,119 +262,140 @@ links.forEach(function(link) {
}); });
function createTable() { function createTable() {
// Erstelle eine Tabelle
var table = document.createElement("table"); var table = document.createElement("table");
table.border = "1";
// Headerzeile // Erstelle eine Kopfzeile
var headerRow = document.createElement("tr"); var headerRow = document.createElement("tr");
var headers = ["Stunde", "Minute", "ch1", "ch2", "ch3", "ch4"];
for (var i = 0; i < headers.length; i++) { // Füge die Spaltenüberschriften hinzu
var header = document.createElement("th"); var headers = ["Hour", "Minute", "Ch1", "Ch2", "Ch3", "Ch4"];
header.innerHTML = headers[i]; headers.forEach(header => {
headerRow.appendChild(header); var th = document.createElement("th");
} th.innerHTML = header;
headerRow.appendChild(th);
});
table.appendChild(headerRow); table.appendChild(headerRow);
// Inhaltszeilen // Erstelle Zeilen mit Zellen für jedes Element
for (var row = 0; row < 10; row++) { for (var i = 1; i <= 10; i++) {
var contentRow = document.createElement("tr"); var tr = document.createElement("tr");
// Spalte "Stunde" // Stunde
var hourCell = document.createElement("td"); var tdHour = createSelectCell(23, 0);
var hourSelect = document.createElement("select"); tdHour.id = "hour" + i;
for (var hour = 0; hour <= 23; hour++) { tr.appendChild(tdHour);
var option = document.createElement("option");
option.value = hour;
option.text = hour.toString().padStart(2, "0");
hourSelect.appendChild(option);
}
hourCell.appendChild(hourSelect);
contentRow.appendChild(hourCell);
// Spalte "Minute" // Minute
var minuteCell = document.createElement("td"); var tdMinute = createSelectCell(59, 0);
var minuteSelect = document.createElement("select"); tdMinute.id = "minute" + i;
for (var minute = 0; minute <= 50; minute += 10) { tr.appendChild(tdMinute);
var option = document.createElement("option");
option.value = minute;
option.text = minute.toString().padStart(2, "0");
minuteSelect.appendChild(option);
}
minuteCell.appendChild(minuteSelect);
contentRow.appendChild(minuteCell);
// Spalten "ch1" bis "ch4" // ch1
for (var channel = 1; channel <= 4; channel++) { var tdCh1 = createSelectCell(100, 0);
var channelCell = document.createElement("td"); tdCh1.id = "ch1_" + i;
var channelSelect = document.createElement("select"); tr.appendChild(tdCh1);
for (var i = 0; i <= 100; i++) {
var option = document.createElement("option");
option.value = i;
option.text = i.toString();
channelSelect.appendChild(option);
}
channelCell.appendChild(channelSelect);
contentRow.appendChild(channelCell);
}
table.appendChild(contentRow); // 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);
} }
// Button
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) {
// Erstelle ein neues select-Element
var select = document.createElement("select");
// Füge Optionen hinzu
for (var i = 0; i <= max; i++) {
var option = document.createElement("option");
option.value = i;
option.text = i;
select.appendChild(option);
}
// Wähle die Option aus, die dem übergebenen Wert entspricht
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() { function fillTableFromJson() {
var xhr = new XMLHttpRequest(); // Lade JSON-Daten
xhr.onreadystatechange = function() { fetch('http://{{IP_ADDRESS}}/tc_data_blocks_read')
if (this.readyState == 4 && this.status == 200) { .then(response => response.json())
var json = JSON.parse(this.responseText); .then(data => {
var tableRows = document.querySelectorAll("table tr"); // Fülle die Tabelle mit Daten
for (var i = 1; i < tableRows.length; i++) { var tcdata = data.tcdata;
var cells = tableRows[i].querySelectorAll("td"); for (var i = 0; i < tcdata.length; i++) {
var hour = parseInt(cells[0].querySelector("select").value); var row = document.getElementById("hour" + (i+1)).parentNode;
var minute = parseInt(cells[1].querySelector("select").value); row.cells[0].childNodes[0].value = tcdata[i].hour;
for (var j = 0; j < json.tcdata.length; j++) { row.cells[1].childNodes[0].value = tcdata[i].min;
if (json.tcdata[j].hour == hour && json.tcdata[j].min == minute) { row.cells[2].childNodes[0].value = parseInt(tcdata[i].ch1 * 100 / 255);
cells[2 + j].querySelector("select").value = json.tcdata[j]["ch" + (j + 1)]; 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);
}
} }
}; });
xhr.open("GET", "http://192.168.0.27/tc_data_blocks_read", true);
xhr.send();
} }
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();
}

View file

@ -6,7 +6,10 @@
<strong>Timming control data editor</strong> <strong>Timming control data editor</strong>
</label> </label>
<br> <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 -->

View file

@ -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: disabled 20, 0, 25, 0, 25, 0, // 9: 10% all blues
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
}; };