Compare commits
3 commits
94e1e703e3
...
99c0c4a6b5
Author | SHA1 | Date | |
---|---|---|---|
|
99c0c4a6b5 | ||
|
2f7ce5019b | ||
|
94a347d3d0 |
11 changed files with 141 additions and 70 deletions
1
.gitignore
vendored
1
.gitignore
vendored
|
@ -1 +1,2 @@
|
||||||
.DS_store
|
.DS_store
|
||||||
|
.vscode/c_cpp_properties.json
|
||||||
|
|
|
@ -32,7 +32,7 @@ atde.classList.add("pure-button-primary");
|
||||||
createTable();
|
createTable();
|
||||||
});
|
});
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.log("Fehler in load listener of the tab action listener management: " + error.message);
|
console.log("Error: load listener of the tab action listener management: " + error.message);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
window.addEventListener('load', function() {
|
window.addEventListener('load', function() {
|
||||||
|
@ -56,14 +56,12 @@ channel4.push(data['tcdata'][i]['ch4']);
|
||||||
}
|
}
|
||||||
currenttime.push(data['currenttime']['hour']);
|
currenttime.push(data['currenttime']['hour']);
|
||||||
currenttime.push(data['currenttime']['min']);
|
currenttime.push(data['currenttime']['min']);
|
||||||
console.log(currenttime);
|
|
||||||
var currentTimeStr = currenttime[0] + ':' + (currenttime[1] < 10 ? '0' : '') + currenttime[1];
|
var currentTimeStr = currenttime[0] + ':' + (currenttime[1] < 10 ? '0' : '') + currenttime[1];
|
||||||
var index = time.indexOf(currentTimeStr);
|
var index = time.indexOf(currentTimeStr);
|
||||||
if (index === -1) {
|
if (index === -1) {
|
||||||
var lowerIndex = -1;
|
var lowerIndex = -1;
|
||||||
var upperIndex = -1;
|
var upperIndex = -1;
|
||||||
for (var i = 0; i < time.length - 1; i++) {
|
for (var i = 0; i < time.length - 1; i++) {
|
||||||
console.log(time[i] + ' <= ' + currentTimeStr + ' >= ' + time[i + 1]);
|
|
||||||
const currentDate = new Date();
|
const currentDate = new Date();
|
||||||
const year = currentDate.getFullYear();
|
const year = currentDate.getFullYear();
|
||||||
const month = (currentDate.getMonth() + 1).toString().padStart(2, '0');
|
const month = (currentDate.getMonth() + 1).toString().padStart(2, '0');
|
||||||
|
@ -72,22 +70,17 @@ const dateString = `${year}-${month}-${day}`;
|
||||||
const start = moment(dateString + ' ' + time[i], 'YYYY-MM-DD HH:mm');
|
const start = moment(dateString + ' ' + time[i], 'YYYY-MM-DD HH:mm');
|
||||||
const curr = moment(dateString + ' ' + currentTimeStr, 'YYYY-MM-DD HH:mm');
|
const curr = moment(dateString + ' ' + currentTimeStr, 'YYYY-MM-DD HH:mm');
|
||||||
const end = moment(dateString + ' ' + time[i + 1], 'YYYY-MM-DD HH:mm');
|
const end = moment(dateString + ' ' + time[i + 1], 'YYYY-MM-DD HH:mm');
|
||||||
console.log(start.format('YYYY-MM-DD HH:mm') + ' <= ' + curr.format('YYYY-MM-DD HH:mm') + ' >= ' + end.format('YYYY-MM-DD HH:mm'));
|
|
||||||
console.log(curr.isBetween(start, end));
|
|
||||||
if (curr.isBetween(start, end)) {
|
if (curr.isBetween(start, end)) {
|
||||||
lowerIndex = i;
|
lowerIndex = i;
|
||||||
upperIndex = i + 1;
|
upperIndex = i + 1;
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
console.log('lowerIndex=' + lowerIndex);
|
|
||||||
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.");
|
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(':');
|
||||||
console.log('tmp1 = ' + tmp1);
|
|
||||||
currenttime[0] = tmp1[0];
|
currenttime[0] = tmp1[0];
|
||||||
currenttime[1] = tmp1[1];
|
currenttime[1] = tmp1[1];
|
||||||
}
|
}
|
||||||
|
@ -95,15 +88,11 @@ var lowerTime = time[lowerIndex].split(":");
|
||||||
var upperTime = time[upperIndex].split(":");
|
var upperTime = time[upperIndex].split(":");
|
||||||
var timeDiff = (currenttime[0] - lowerTime[0]) + ((currenttime[1] - lowerTime[1]) / 60);
|
var timeDiff = (currenttime[0] - lowerTime[0]) + ((currenttime[1] - lowerTime[1]) / 60);
|
||||||
var indexFloat = lowerIndex + timeDiff / ((upperTime[0] - lowerTime[0]) + ((upperTime[1] - lowerTime[1]) / 60));
|
var indexFloat = lowerIndex + timeDiff / ((upperTime[0] - lowerTime[0]) + ((upperTime[1] - lowerTime[1]) / 60));
|
||||||
console.log("Index (float): " + indexFloat);
|
|
||||||
} else {
|
} else {
|
||||||
console.log("Index (integer): " + index);
|
|
||||||
console.log("Index (float): " + index);
|
|
||||||
}
|
}
|
||||||
if (indexFloat > index) {
|
if (indexFloat > index) {
|
||||||
index = indexFloat;
|
index = indexFloat;
|
||||||
}
|
}
|
||||||
console.log("index in graph >>>" + index);
|
|
||||||
var trace1 = {
|
var trace1 = {
|
||||||
x: time,
|
x: time,
|
||||||
y: channel1,
|
y: channel1,
|
||||||
|
@ -171,7 +160,6 @@ const onLinkOn = document.getElementById(`on${i - 1}_on`);
|
||||||
const onLinkOff = document.getElementById(`on${i - 1}_off`);
|
const onLinkOff = document.getElementById(`on${i - 1}_off`);
|
||||||
briSlider.value = data.bri;
|
briSlider.value = data.bri;
|
||||||
briSliderVal.innerHTML = (Math.round((data.bri * 100.0 / 255.0) * 100) / 100).toFixed(2);
|
briSliderVal.innerHTML = (Math.round((data.bri * 100.0 / 255.0) * 100) / 100).toFixed(2);
|
||||||
console.log('data.on ' + i + ' = ' + data.on);
|
|
||||||
if (data.on == true) {
|
if (data.on == true) {
|
||||||
onLinkOn.classList.add('pure-button-primary');
|
onLinkOn.classList.add('pure-button-primary');
|
||||||
onLinkOff.classList.remove('pure-button-primary');
|
onLinkOff.classList.remove('pure-button-primary');
|
||||||
|
@ -194,7 +182,6 @@ if (pwmElement) {
|
||||||
const url = `http://{{IP_ADDRESS}}/state?light=${lightID}`;
|
const url = `http://{{IP_ADDRESS}}/state?light=${lightID}`;
|
||||||
fetch(url).then(response => response.json()).then(data => {
|
fetch(url).then(response => response.json()).then(data => {
|
||||||
const pwmValue = ((Math.round((data.curpwm - ((data.curpwm >= {{PWM_MIN}}) ? {{PWM_MIN}} : 0)) / {{PWM_MAX}} * 10000) / 100).toFixed(2));
|
const pwmValue = ((Math.round((data.curpwm - ((data.curpwm >= {{PWM_MIN}}) ? {{PWM_MIN}} : 0)) / {{PWM_MAX}} * 10000) / 100).toFixed(2));
|
||||||
console.log('curpwm[' + i + '] = ' + data.curpwm + ' = ' + pwmValue);
|
|
||||||
pwmElement.innerText = pwmValue.toString();
|
pwmElement.innerText = pwmValue.toString();
|
||||||
pwmElement.value = pwmValue;
|
pwmElement.value = pwmValue;
|
||||||
pwmElementTxt.innerText = pwmValue.toString();
|
pwmElementTxt.innerText = pwmValue.toString();
|
||||||
|
@ -271,7 +258,9 @@ contentRow.appendChild(channelCell);
|
||||||
table.appendChild(contentRow);
|
table.appendChild(contentRow);
|
||||||
}
|
}
|
||||||
var button = document.createElement("button");
|
var button = document.createElement("button");
|
||||||
button.innerHTML = "Export als JSON";
|
button.innerHTML = "Save";
|
||||||
|
button.classList.add("pure-button");
|
||||||
|
button.classList.add("pure-button-primary");
|
||||||
button.onclick = function() {
|
button.onclick = function() {
|
||||||
var data = [];
|
var data = [];
|
||||||
var rows = table.getElementsByTagName("tr");
|
var rows = table.getElementsByTagName("tr");
|
||||||
|
@ -294,6 +283,7 @@ xhr.send();
|
||||||
};
|
};
|
||||||
var container = document.getElementById("table-container");
|
var container = document.getElementById("table-container");
|
||||||
container.innerHTML = "";
|
container.innerHTML = "";
|
||||||
|
container.classList.add("pure-form");
|
||||||
container.appendChild(table);
|
container.appendChild(table);
|
||||||
container.appendChild(button);
|
container.appendChild(button);
|
||||||
}
|
}
|
|
@ -9,22 +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">
|
||||||
<style>
|
<style src="http://{{IP_ADDRESS}}'/css">
|
||||||
#tab-lights, #tab-config, #tab-tde {
|
|
||||||
display: none;
|
|
||||||
background-color: #ffffff;
|
|
||||||
color: black;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
#tab-lights.visible {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
#tab-config.visible {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
#tab-tde.visible {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
52
firmware/data/style.css
Normal file
52
firmware/data/style.css
Normal file
|
@ -0,0 +1,52 @@
|
||||||
|
#tab-lights, #tab-config, #tab-tde {
|
||||||
|
display: none;
|
||||||
|
background-color: #ffffff;
|
||||||
|
color: black;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
#tab-lights.visible {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
#tab-config.visible {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
#tab-tde.visible {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
/* CSS-Regeln für die Tabellenzellen */
|
||||||
|
.pure-table td {
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* CSS-Regeln für die Eingabefelder */
|
||||||
|
.pure-form input[type="number"] {
|
||||||
|
width: 60px;
|
||||||
|
height: 20px;
|
||||||
|
border-radius: 3px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* CSS-Regeln für die Auswahllisten */
|
||||||
|
.pure-form select {
|
||||||
|
width: 80px;
|
||||||
|
height: 26px;
|
||||||
|
border-radius: 3px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* CSS-Regeln für den Export-Button */
|
||||||
|
.pure-button {
|
||||||
|
background-color: #5a5a5a;
|
||||||
|
color: #fff;
|
||||||
|
border-radius: 3px;
|
||||||
|
border: none;
|
||||||
|
padding: 8px 12px;
|
||||||
|
font-size: 14px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pure-button:hover {
|
||||||
|
background-color: #333;
|
||||||
|
}
|
||||||
|
|
|
@ -5,7 +5,6 @@ event.preventDefault();
|
||||||
var xhr = new XMLHttpRequest();
|
var xhr = new XMLHttpRequest();
|
||||||
xhr.open('GET', 'http://{{IP_ADDRESS}}/?tc=true', true);
|
xhr.open('GET', 'http://{{IP_ADDRESS}}/?tc=true', true);
|
||||||
xhr.send();
|
xhr.send();
|
||||||
console.log('tc=true call');
|
|
||||||
document.getElementById('tc_on').classList.add('pure-button-primary');
|
document.getElementById('tc_on').classList.add('pure-button-primary');
|
||||||
document.getElementById('tc_off').classList.remove('pure-button-primary');
|
document.getElementById('tc_off').classList.remove('pure-button-primary');
|
||||||
});
|
});
|
||||||
|
@ -17,7 +16,6 @@ event.preventDefault();
|
||||||
var xhr = new XMLHttpRequest();
|
var xhr = new XMLHttpRequest();
|
||||||
xhr.open('GET', 'http://{{IP_ADDRESS}}/?tc=false', true);
|
xhr.open('GET', 'http://{{IP_ADDRESS}}/?tc=false', true);
|
||||||
xhr.send();
|
xhr.send();
|
||||||
console.log('tc=false call');
|
|
||||||
document.getElementById('tc_off').classList.add('pure-button-primary');
|
document.getElementById('tc_off').classList.add('pure-button-primary');
|
||||||
document.getElementById('tc_on').classList.remove('pure-button-primary');
|
document.getElementById('tc_on').classList.remove('pure-button-primary');
|
||||||
});
|
});
|
||||||
|
@ -33,7 +31,6 @@ fetch(url).then(response => {
|
||||||
if (!response.ok) {
|
if (!response.ok) {
|
||||||
throw new Error(`HTTP error! status: ${response.status}`);
|
throw new Error(`HTTP error! status: ${response.status}`);
|
||||||
}
|
}
|
||||||
console.log(`Sent slider value ${value} to ${url}`);
|
|
||||||
}).catch(error => {
|
}).catch(error => {
|
||||||
console.error(`Error sending slider value to ${url}: ${error}`);
|
console.error(`Error sending slider value to ${url}: ${error}`);
|
||||||
});
|
});
|
||||||
|
|
|
@ -499,6 +499,11 @@ void init_webserver()
|
||||||
server.send(200, "text/html", replacePlaceholder(loadSPIFFSFile("/bottom.js")));
|
server.send(200, "text/html", replacePlaceholder(loadSPIFFSFile("/bottom.js")));
|
||||||
});
|
});
|
||||||
|
|
||||||
|
server.on("/css", []()
|
||||||
|
{
|
||||||
|
server.send(200, "text/html", loadSPIFFSFile("/style.css"));
|
||||||
|
});
|
||||||
|
|
||||||
server.on("/", []()
|
server.on("/", []()
|
||||||
{
|
{
|
||||||
|
|
||||||
|
|
|
@ -41,7 +41,7 @@ function addTabListener() {
|
||||||
createTable();
|
createTable();
|
||||||
});
|
});
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.log("Fehler in load listener of the tab action listener management: " + error.message);
|
console.log("Error: load listener of the tab action listener management: " + error.message);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
window.addEventListener('load', function() {
|
window.addEventListener('load', function() {
|
||||||
|
@ -66,14 +66,14 @@ function loadGraphData() {
|
||||||
}
|
}
|
||||||
currenttime.push(data['currenttime']['hour']);
|
currenttime.push(data['currenttime']['hour']);
|
||||||
currenttime.push(data['currenttime']['min']);
|
currenttime.push(data['currenttime']['min']);
|
||||||
console.log(currenttime);
|
//console.log(currenttime);
|
||||||
var currentTimeStr = currenttime[0] + ':' + (currenttime[1] < 10 ? '0' : '') + currenttime[1];
|
var currentTimeStr = currenttime[0] + ':' + (currenttime[1] < 10 ? '0' : '') + currenttime[1];
|
||||||
var index = time.indexOf(currentTimeStr);
|
var index = time.indexOf(currentTimeStr);
|
||||||
if (index === -1) {
|
if (index === -1) {
|
||||||
var lowerIndex = -1;
|
var lowerIndex = -1;
|
||||||
var upperIndex = -1;
|
var upperIndex = -1;
|
||||||
for (var i = 0; i < time.length - 1; i++) {
|
for (var i = 0; i < time.length - 1; i++) {
|
||||||
console.log(time[i] + ' <= ' + currentTimeStr + ' >= ' + time[i + 1]);
|
//console.log(time[i] + ' <= ' + currentTimeStr + ' >= ' + time[i + 1]);
|
||||||
const currentDate = new Date();
|
const currentDate = new Date();
|
||||||
const year = currentDate.getFullYear();
|
const year = currentDate.getFullYear();
|
||||||
const month = (currentDate.getMonth() + 1).toString().padStart(2, '0');
|
const month = (currentDate.getMonth() + 1).toString().padStart(2, '0');
|
||||||
|
@ -82,22 +82,22 @@ function loadGraphData() {
|
||||||
const start = moment(dateString + ' ' + time[i], 'YYYY-MM-DD HH:mm');
|
const start = moment(dateString + ' ' + time[i], 'YYYY-MM-DD HH:mm');
|
||||||
const curr = moment(dateString + ' ' + currentTimeStr, 'YYYY-MM-DD HH:mm');
|
const curr = moment(dateString + ' ' + currentTimeStr, 'YYYY-MM-DD HH:mm');
|
||||||
const end = moment(dateString + ' ' + time[i + 1], 'YYYY-MM-DD HH:mm');
|
const end = moment(dateString + ' ' + time[i + 1], 'YYYY-MM-DD HH:mm');
|
||||||
console.log(start.format('YYYY-MM-DD HH:mm') + ' <= ' + curr.format('YYYY-MM-DD HH:mm') + ' >= ' + end.format('YYYY-MM-DD HH:mm'));
|
//console.log(start.format('YYYY-MM-DD HH:mm') + ' <= ' + curr.format('YYYY-MM-DD HH:mm') + ' >= ' + end.format('YYYY-MM-DD HH:mm'));
|
||||||
console.log(curr.isBetween(start, end));
|
//console.log(curr.isBetween(start, end));
|
||||||
if (curr.isBetween(start, end)) {
|
if (curr.isBetween(start, end)) {
|
||||||
lowerIndex = i;
|
lowerIndex = i;
|
||||||
upperIndex = i + 1;
|
upperIndex = i + 1;
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
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.");
|
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(':');
|
||||||
console.log('tmp1 = ' + tmp1);
|
//console.log('tmp1 = ' + tmp1);
|
||||||
currenttime[0] = tmp1[0];
|
currenttime[0] = tmp1[0];
|
||||||
currenttime[1] = tmp1[1];
|
currenttime[1] = tmp1[1];
|
||||||
}
|
}
|
||||||
|
@ -105,15 +105,15 @@ function loadGraphData() {
|
||||||
var upperTime = time[upperIndex].split(":");
|
var upperTime = time[upperIndex].split(":");
|
||||||
var timeDiff = (currenttime[0] - lowerTime[0]) + ((currenttime[1] - lowerTime[1]) / 60);
|
var timeDiff = (currenttime[0] - lowerTime[0]) + ((currenttime[1] - lowerTime[1]) / 60);
|
||||||
var indexFloat = lowerIndex + timeDiff / ((upperTime[0] - lowerTime[0]) + ((upperTime[1] - lowerTime[1]) / 60));
|
var indexFloat = lowerIndex + timeDiff / ((upperTime[0] - lowerTime[0]) + ((upperTime[1] - lowerTime[1]) / 60));
|
||||||
console.log("Index (float): " + indexFloat);
|
//console.log("Index (float): " + indexFloat);
|
||||||
} else {
|
} else {
|
||||||
console.log("Index (integer): " + index);
|
//console.log("Index (integer): " + index);
|
||||||
console.log("Index (float): " + index);
|
//console.log("Index (float): " + index);
|
||||||
}
|
}
|
||||||
if (indexFloat > index) {
|
if (indexFloat > index) {
|
||||||
index = indexFloat;
|
index = indexFloat;
|
||||||
}
|
}
|
||||||
console.log("index in graph >>>" + index);
|
//console.log("index in graph >>>" + index);
|
||||||
var trace1 = {
|
var trace1 = {
|
||||||
x: time,
|
x: time,
|
||||||
y: channel1,
|
y: channel1,
|
||||||
|
@ -182,7 +182,7 @@ function updateLightState() {
|
||||||
const onLinkOff = document.getElementById(`on${i - 1}_off`);
|
const onLinkOff = document.getElementById(`on${i - 1}_off`);
|
||||||
briSlider.value = data.bri;
|
briSlider.value = data.bri;
|
||||||
briSliderVal.innerHTML = (Math.round((data.bri * 100.0 / 255.0) * 100) / 100).toFixed(2);
|
briSliderVal.innerHTML = (Math.round((data.bri * 100.0 / 255.0) * 100) / 100).toFixed(2);
|
||||||
console.log('data.on ' + i + ' = ' + data.on);
|
//console.log('data.on ' + i + ' = ' + data.on);
|
||||||
if (data.on == true) {
|
if (data.on == true) {
|
||||||
onLinkOn.classList.add('pure-button-primary');
|
onLinkOn.classList.add('pure-button-primary');
|
||||||
onLinkOff.classList.remove('pure-button-primary');
|
onLinkOff.classList.remove('pure-button-primary');
|
||||||
|
@ -206,7 +206,7 @@ function updatePWMValues() {
|
||||||
const url = `http://{{IP_ADDRESS}}/state?light=${lightID}`;
|
const url = `http://{{IP_ADDRESS}}/state?light=${lightID}`;
|
||||||
fetch(url).then(response => response.json()).then(data => {
|
fetch(url).then(response => response.json()).then(data => {
|
||||||
const pwmValue = ((Math.round((data.curpwm - ((data.curpwm >= {{PWM_MIN}}) ? {{PWM_MIN}} : 0)) / {{PWM_MAX}} * 10000) / 100).toFixed(2));
|
const pwmValue = ((Math.round((data.curpwm - ((data.curpwm >= {{PWM_MIN}}) ? {{PWM_MIN}} : 0)) / {{PWM_MAX}} * 10000) / 100).toFixed(2));
|
||||||
console.log('curpwm[' + i + '] = ' + data.curpwm + ' = ' + pwmValue);
|
//console.log('curpwm[' + i + '] = ' + data.curpwm + ' = ' + pwmValue);
|
||||||
pwmElement.innerText = pwmValue.toString();
|
pwmElement.innerText = pwmValue.toString();
|
||||||
pwmElement.value = pwmValue;
|
pwmElement.value = pwmValue;
|
||||||
pwmElementTxt.innerText = pwmValue.toString();
|
pwmElementTxt.innerText = pwmValue.toString();
|
||||||
|
@ -310,7 +310,9 @@ for (var row = 0; row < 10; row++) {
|
||||||
|
|
||||||
// Button
|
// Button
|
||||||
var button = document.createElement("button");
|
var button = document.createElement("button");
|
||||||
button.innerHTML = "Export als JSON";
|
button.innerHTML = "Save";
|
||||||
|
button.classList.add("pure-button");
|
||||||
|
button.classList.add("pure-button-primary");
|
||||||
button.onclick = function() {
|
button.onclick = function() {
|
||||||
var data = [];
|
var data = [];
|
||||||
|
|
||||||
|
@ -339,6 +341,7 @@ button.onclick = function() {
|
||||||
|
|
||||||
var container = document.getElementById("table-container");
|
var container = document.getElementById("table-container");
|
||||||
container.innerHTML = "";
|
container.innerHTML = "";
|
||||||
|
container.classList.add("pure-form");
|
||||||
container.appendChild(table);
|
container.appendChild(table);
|
||||||
container.appendChild(button);
|
container.appendChild(button);
|
||||||
}
|
}
|
|
@ -9,22 +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">
|
||||||
<style>
|
<style src="http://{{IP_ADDRESS}}'/css">
|
||||||
#tab-lights, #tab-config, #tab-tde {
|
|
||||||
display: none;
|
|
||||||
background-color: #ffffff;
|
|
||||||
color: black;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
#tab-lights.visible {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
#tab-config.visible {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
#tab-tde.visible {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
52
firmware/html/style.css
Normal file
52
firmware/html/style.css
Normal file
|
@ -0,0 +1,52 @@
|
||||||
|
#tab-lights, #tab-config, #tab-tde {
|
||||||
|
display: none;
|
||||||
|
background-color: #ffffff;
|
||||||
|
color: black;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
#tab-lights.visible {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
#tab-config.visible {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
#tab-tde.visible {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
/* CSS-Regeln für die Tabellenzellen */
|
||||||
|
.pure-table td {
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* CSS-Regeln für die Eingabefelder */
|
||||||
|
.pure-form input[type="number"] {
|
||||||
|
width: 60px;
|
||||||
|
height: 20px;
|
||||||
|
border-radius: 3px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* CSS-Regeln für die Auswahllisten */
|
||||||
|
.pure-form select {
|
||||||
|
width: 80px;
|
||||||
|
height: 26px;
|
||||||
|
border-radius: 3px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* CSS-Regeln für den Export-Button */
|
||||||
|
.pure-button {
|
||||||
|
background-color: #5a5a5a;
|
||||||
|
color: #fff;
|
||||||
|
border-radius: 3px;
|
||||||
|
border: none;
|
||||||
|
padding: 8px 12px;
|
||||||
|
font-size: 14px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pure-button:hover {
|
||||||
|
background-color: #333;
|
||||||
|
}
|
||||||
|
|
|
@ -5,7 +5,7 @@ links.forEach(function(link) {
|
||||||
var xhr = new XMLHttpRequest();
|
var xhr = new XMLHttpRequest();
|
||||||
xhr.open('GET', 'http://{{IP_ADDRESS}}/?tc=true', true);
|
xhr.open('GET', 'http://{{IP_ADDRESS}}/?tc=true', true);
|
||||||
xhr.send();
|
xhr.send();
|
||||||
console.log('tc=true call');
|
//console.log('tc=true call');
|
||||||
document.getElementById('tc_on').classList.add('pure-button-primary');
|
document.getElementById('tc_on').classList.add('pure-button-primary');
|
||||||
document.getElementById('tc_off').classList.remove('pure-button-primary');
|
document.getElementById('tc_off').classList.remove('pure-button-primary');
|
||||||
});
|
});
|
||||||
|
@ -17,7 +17,7 @@ links.forEach(function(link) {
|
||||||
var xhr = new XMLHttpRequest();
|
var xhr = new XMLHttpRequest();
|
||||||
xhr.open('GET', 'http://{{IP_ADDRESS}}/?tc=false', true);
|
xhr.open('GET', 'http://{{IP_ADDRESS}}/?tc=false', true);
|
||||||
xhr.send();
|
xhr.send();
|
||||||
console.log('tc=false call');
|
//console.log('tc=false call');
|
||||||
document.getElementById('tc_off').classList.add('pure-button-primary');
|
document.getElementById('tc_off').classList.add('pure-button-primary');
|
||||||
document.getElementById('tc_on').classList.remove('pure-button-primary');
|
document.getElementById('tc_on').classList.remove('pure-button-primary');
|
||||||
});
|
});
|
||||||
|
@ -34,7 +34,7 @@ function sendSliderValue(x) {
|
||||||
if (!response.ok) {
|
if (!response.ok) {
|
||||||
throw new Error(`HTTP error! status: ${response.status}`);
|
throw new Error(`HTTP error! status: ${response.status}`);
|
||||||
}
|
}
|
||||||
console.log(`Sent slider value ${value} to ${url}`);
|
//console.log(`Sent slider value ${value} to ${url}`);
|
||||||
}).catch(error => {
|
}).catch(error => {
|
||||||
console.error(`Error sending slider value to ${url}: ${error}`);
|
console.error(`Error sending slider value to ${url}: ${error}`);
|
||||||
});
|
});
|
||||||
|
|
|
@ -7,3 +7,4 @@ bash ../../tools/html2string.sh ../html/config_template.html > config_template.h
|
||||||
bash ../../tools/html2string.sh ../html/light_control_template.html > light_control_template.html
|
bash ../../tools/html2string.sh ../html/light_control_template.html > light_control_template.html
|
||||||
bash ../../tools/html2string.sh ../html/top.js > top.js
|
bash ../../tools/html2string.sh ../html/top.js > top.js
|
||||||
bash ../../tools/html2string.sh ../html/bottom.js > bottom.js
|
bash ../../tools/html2string.sh ../html/bottom.js > bottom.js
|
||||||
|
cp -av ../html/style.css .
|
||||||
|
|
Loading…
Reference in a new issue