Merge branch 'develop'

This commit is contained in:
Kai Lauterbach 2023-05-10 11:02:00 +02:00
commit 2446632324
10 changed files with 183 additions and 45 deletions

View file

@ -258,6 +258,14 @@ dash: 'dot'
}] }]
}; };
Plotly.newPlot('tc_plot_chart', [trace1, trace2, trace3, trace4], layout); Plotly.newPlot('tc_plot_chart', [trace1, trace2, trace3, trace4], layout);
var plot = document.getElementById('tc_plot_chart');
}
function rgbaToHex(rgba) {
var hex = rgba.map(function (value) {
var hexValue = Math.round(value * 255).toString(16);
return hexValue.length === 1 ? '0' + hexValue : hexValue;
});
return '#' + hex.join('').toUpperCase();
} }
setInterval(function() { setInterval(function() {
if (document.getElementById('tab-tde').classList.contains('visible')) { if (document.getElementById('tab-tde').classList.contains('visible')) {
@ -404,7 +412,7 @@ var tr = document.createElement("tr");
var tdHour = createSelectCell(23, 0, 1); var tdHour = createSelectCell(23, 0, 1);
tdHour.id = "hour" + i; tdHour.id = "hour" + i;
tr.appendChild(tdHour); tr.appendChild(tdHour);
var tdMinute = createSelectCell(59, 0, 1); var tdMinute = createSelectCell(59, 0, 10);
tdMinute.id = "minute" + i; tdMinute.id = "minute" + i;
tr.appendChild(tdMinute); tr.appendChild(tdMinute);
for (var j = 1; j <=4; j++) for (var j = 1; j <=4; j++)
@ -419,6 +427,10 @@ container.innerHTML = "";
container.classList.add("pure-form"); container.classList.add("pure-form");
container.appendChild(table); container.appendChild(table);
} }
function rgb2Hex(r, g, b) {
var hex = "#" + ((1 << 24) | (r << 16) | (g << 8) | b).toString(16).slice(1);
return hex;
}
function createSlider(id, max, value, step) { function createSlider(id, max, value, step) {
var input = document.createElement("input"); var input = document.createElement("input");
input.type = "range"; input.type = "range";
@ -426,15 +438,16 @@ input.min = 0;
input.max = max; input.max = max;
input.step = step; input.step = step;
input.value = value; input.value = value;
input.style = "1px solod darkgray";
input.classList.add("pure-slider-range"); input.classList.add("pure-slider-range");
if (id.startsWith("ch1_")) { if (id.startsWith("ch1_")) {
input.style.backgroundColor = "blue"; input.style.background = "linear-gradient(to bottom, " + rgb2Hex(31, 119, 180) + ", white)";
} else if (id.startsWith("ch2_")) { } else if (id.startsWith("ch2_")) {
input.style.backgroundColor = "orange"; input.style.background = "linear-gradient(to bottom, " + rgb2Hex(255, 127, 14) + ", white)";
} else if (id.startsWith("ch3_")) { } else if (id.startsWith("ch3_")) {
input.style.backgroundColor = "green"; input.style.background = "linear-gradient(to bottom, " + rgb2Hex(44, 160, 44) + ", white)";
} else if (id.startsWith("ch4_")) { } else if (id.startsWith("ch4_")) {
input.style.backgroundColor = "red"; input.style.background = "linear-gradient(to bottom, " + rgb2Hex(214, 39, 40) + ", white)";
} }
div = document.createElement("div"); div = document.createElement("div");
div.appendChild(input); div.appendChild(input);

View file

@ -64,3 +64,37 @@ background-color: #4CAF50;
.toast.error { .toast.error {
background-color: #f44336; background-color: #f44336;
} }
input[type=range] {
-webkit-appearance: none;
width: 70%;
height: 7px;
margin: 4px 0;
background-color: #ddd;
}
input[type=range]:focus {
outline: none;
}
/*
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 15px;
height: 15px;
border-radius: 10%;
background-color: #a1a1a1;
cursor: pointer;
}
input[type=range]::-moz-range-thumb {
width: 15px;
height: 15px;
border-radius: 10%;
background-color: #a1a1a1;
cursor: pointer;
}
input[type=range]::-ms-thumb {
width: 15px;
height: 15px;
border-radius: 10%;
background-color: #a1a1a1;
cursor: pointer;
}*/

View file

@ -80,7 +80,13 @@ x = x - 1;
clearTimeout(timeoutId); clearTimeout(timeoutId);
timeoutId = setTimeout(() => { timeoutId = setTimeout(() => {
var value = document.getElementById(`bri${x}`).value; var value = document.getElementById(`bri${x}`).value;
var url = `http://{{IP_ADDRESS}}/?bri${x}=${value}`; var trans = document.getElementById('transition').value;
if (isNaN(trans) || parseInt(trans) != trans)
{
showToast("Error the transition is not a valid integer number.", "error");
return false;
}
var url = `http://{{IP_ADDRESS}}/?bri${x}=${value}&transition=`+parseInt(trans);
fetch(url).then(response => { 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}`);

View file

@ -274,7 +274,10 @@ void setup()
SPIFFS.begin(); SPIFFS.begin();
#ifdef DEVELOPMENT
// Serial is not used in non development mode
Serial.begin(SERIAL_BAUD_RATE); Serial.begin(SERIAL_BAUD_RATE);
#endif
Serial.flush(); Serial.flush();
delay(1000); delay(1000);

View file

@ -299,6 +299,16 @@ function loadTCGraphData() {
}; };
Plotly.newPlot('tc_plot_chart', [trace1, trace2, trace3, trace4], layout); Plotly.newPlot('tc_plot_chart', [trace1, trace2, trace3, trace4], layout);
var plot = document.getElementById('tc_plot_chart'); // Das HTML-Div-Element, in dem der Plot angezeigt wird
}
function rgbaToHex(rgba) {
var hex = rgba.map(function (value) {
var hexValue = Math.round(value * 255).toString(16);
return hexValue.length === 1 ? '0' + hexValue : hexValue;
});
return '#' + hex.join('').toUpperCase();
} }
setInterval(function() { setInterval(function() {
@ -479,7 +489,7 @@ function createTable() {
tr.appendChild(tdHour); tr.appendChild(tdHour);
// Minute // Minute
var tdMinute = createSelectCell(59, 0, 1); var tdMinute = createSelectCell(59, 0, 10);
tdMinute.id = "minute" + i; tdMinute.id = "minute" + i;
tr.appendChild(tdMinute); tr.appendChild(tdMinute);
@ -499,6 +509,12 @@ function createTable() {
container.appendChild(table); container.appendChild(table);
} }
function rgb2Hex(r, g, b) {
// RGB-Werte in hexadezimale Werte umwandeln
var hex = "#" + ((1 << 24) | (r << 16) | (g << 8) | b).toString(16).slice(1);
return hex;
}
function createSlider(id, max, value, step) { function createSlider(id, max, value, step) {
// Create a new input element of type range // Create a new input element of type range
var input = document.createElement("input"); var input = document.createElement("input");
@ -507,16 +523,17 @@ function createSlider(id, max, value, step) {
input.max = max; input.max = max;
input.step = step; input.step = step;
input.value = value; input.value = value;
input.style = "1px solod darkgray";
input.classList.add("pure-slider-range"); input.classList.add("pure-slider-range");
// Change the color of the slider based on the id // Change the color of the slider based on the id
if (id.startsWith("ch1_")) { if (id.startsWith("ch1_")) {
input.style.backgroundColor = "blue"; input.style.background = "linear-gradient(to bottom, " + rgb2Hex(31, 119, 180) + ", white)";
} else if (id.startsWith("ch2_")) { } else if (id.startsWith("ch2_")) {
input.style.backgroundColor = "orange"; input.style.background = "linear-gradient(to bottom, " + rgb2Hex(255, 127, 14) + ", white)";
} else if (id.startsWith("ch3_")) { } else if (id.startsWith("ch3_")) {
input.style.backgroundColor = "green"; input.style.background = "linear-gradient(to bottom, " + rgb2Hex(44, 160, 44) + ", white)";
} else if (id.startsWith("ch4_")) { } else if (id.startsWith("ch4_")) {
input.style.backgroundColor = "red"; input.style.background = "linear-gradient(to bottom, " + rgb2Hex(214, 39, 40) + ", white)";
} }
div = document.createElement("div"); div = document.createElement("div");

View file

@ -1,29 +1,29 @@
<h4>Light {{LIGHT_NUMBER}}</h4> <h4>Light {{LIGHT_NUMBER}}</h4>
<div class="pure-control-group"> <div class="pure-control-group">
<label for="power"> <label for="power">
<strong>Power</strong> <strong>Power</strong>
</label> </label>
<a id="on{{LIGHT_NUMBER_DEC}}_on" class="pure-button" href="#">ON</a> <a id="on{{LIGHT_NUMBER_DEC}}_on" class="pure-button" href="#">ON</a>
<a id="on{{LIGHT_NUMBER_DEC}}_off" class="pure-button" href="#">OFF</a> <a id="on{{LIGHT_NUMBER_DEC}}_off" class="pure-button" href="#">OFF</a>
</div> </div>
<div class="pure-control-group"> <div class="pure-control-group">
<label for="bri{{LIGHT_NUMBER_DEC}}">Target brightness</label> <label for="bri{{LIGHT_NUMBER_DEC}}">Target brightness</label>
<input id="bri{{LIGHT_NUMBER_DEC}}" onchange="sendSliderValue({{LIGHT_NUMBER}})" name="bri{{LIGHT_NUMBER_DEC}}" type="range" min="0" max="255" value="25"> <input id="bri{{LIGHT_NUMBER_DEC}}" onchange="sendSliderValue({{LIGHT_NUMBER}})" name="bri{{LIGHT_NUMBER_DEC}}" type="range" min="0" max="255" value="25">
&nbsp; &nbsp;
<span id="bri{{LIGHT_NUMBER_DEC}}_val" name="bri{{LIGHT_NUMBER_DEC}}">9</span> <span id="bri{{LIGHT_NUMBER_DEC}}_val" name="bri{{LIGHT_NUMBER_DEC}}">9</span>
% %
<br> <br>
<label for="light{{LIGHT_NUMBER_DEC}}_pwm">Actual Bri.</label> <label for="light{{LIGHT_NUMBER_DEC}}_pwm">Actual Bri.</label>
<input type="range" min="0" max="100" value="0" id="light{{LIGHT_NUMBER_DEC}}_pwm" disabled> <input type="range" min="0" max="100" value="0" id="light{{LIGHT_NUMBER_DEC}}_pwm" disabled>
&nbsp; &nbsp;
<span id="light{{LIGHT_NUMBER_DEC}}_pwm_txt"></span> <span id="light{{LIGHT_NUMBER_DEC}}_pwm_txt"></span>
% %
<script> <script>
var slider{{LIGHT_NUMBER_DEC}} = document.getElementById("bri{{LIGHT_NUMBER_DEC}}"); var slider{{LIGHT_NUMBER_DEC}} = document.getElementById("bri{{LIGHT_NUMBER_DEC}}");
var output{{LIGHT_NUMBER_DEC}} = document.getElementById("bri{{LIGHT_NUMBER_DEC}}_val"); var output{{LIGHT_NUMBER_DEC}} = document.getElementById("bri{{LIGHT_NUMBER_DEC}}_val");
output{{LIGHT_NUMBER_DEC}}.innerHTML = (Math.round((slider{{LIGHT_NUMBER_DEC}}.value * 100.0 / 255.0) * 100) / 100).toFixed(2); output{{LIGHT_NUMBER_DEC}}.innerHTML = (Math.round((slider{{LIGHT_NUMBER_DEC}}.value * 100.0 / 255.0) * 100) / 100).toFixed(2);
slider{{LIGHT_NUMBER_DEC}}.oninput = function() { slider{{LIGHT_NUMBER_DEC}}.oninput = function() {
output{{LIGHT_NUMBER_DEC}}.innerHTML = (Math.round((this.value * 100.0 / 255.0) * 100) / 100).toFixed(2); output{{LIGHT_NUMBER_DEC}}.innerHTML = (Math.round((this.value * 100.0 / 255.0) * 100) / 100).toFixed(2);
} }
</script> </script>
</div> </div>

View file

@ -64,3 +64,37 @@ background-color: #4CAF50;
.toast.error { .toast.error {
background-color: #f44336; background-color: #f44336;
} }
input[type=range] {
-webkit-appearance: none;
width: 70%;
height: 7px;
margin: 4px 0;
background-color: #ddd;
}
input[type=range]:focus {
outline: none;
}
/*
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 15px;
height: 15px;
border-radius: 10%;
background-color: #a1a1a1;
cursor: pointer;
}
input[type=range]::-moz-range-thumb {
width: 15px;
height: 15px;
border-radius: 10%;
background-color: #a1a1a1;
cursor: pointer;
}
input[type=range]::-ms-thumb {
width: 15px;
height: 15px;
border-radius: 10%;
background-color: #a1a1a1;
cursor: pointer;
}*/

View file

@ -87,7 +87,14 @@ function sendSliderValue(x) {
clearTimeout(timeoutId); clearTimeout(timeoutId);
timeoutId = setTimeout(() => { timeoutId = setTimeout(() => {
var value = document.getElementById(`bri${x}`).value; var value = document.getElementById(`bri${x}`).value;
var url = `http://{{IP_ADDRESS}}/?bri${x}=${value}`; var trans = document.getElementById('transition').value;
if (isNaN(trans) || parseInt(trans) != trans)
{
showToast("Error the transition is not a valid integer number.", "error");
return false;
}
var url = `http://{{IP_ADDRESS}}/?bri${x}=${value}&transition=`+parseInt(trans);
fetch(url).then(response => { 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}`);

View file

@ -165,6 +165,16 @@ void tc_update_main()
{ {
// no new predecessor or successor found, start over // no new predecessor or successor found, start over
current_target_data_block = 255; current_target_data_block = 255;
// disable the lights
for (uint8_t i = 0; i < LIGHTS_COUNT; i++)
{
light_state[i] = false;
bri[i] = 0;
current_bri[i] = 0;
current_pwm[i] = 0;
}
return; return;
} }
@ -440,8 +450,8 @@ void tc_jsonDataBlocksToEEPROM(String json_data_string)
int minute = obj["min"]; int minute = obj["min"];
if (minute < 0) { if (minute < 0) {
minute = 0; minute = 0;
} else if (minute > 59) { } else if (minute > 50) {
minute = 59; minute = 50;
} }
tc_data[i].mm = minute; tc_data[i].mm = minute;
Serial.print("minute = " + (String)tc_data[i].mm + " " + (String)obj["min"] + " "); Serial.print("minute = " + (String)tc_data[i].mm + " " + (String)obj["min"] + " ");

View file

@ -1,5 +1,18 @@
#!/bin/bash #!/bin/bash
# Prüfen, ob wir im data-Verzeichnis sind
if [[ $(basename "$PWD") != "data" ]]; then
echo "Fehler: Bitte wechseln Sie in das 'data'-Verzeichnis"
exit 1
fi
# Prüfen, ob der HTML-Ordner im übergeordneten Verzeichnis existiert
if [[ ! -d "../html" ]]; then
echo "Fehler: Das Verzeichnis '../html' existiert nicht"
exit 1
fi
echo "Creating html files..."
bash ../../tools/html2string.sh ../html/index_template_top.html > index_template_top.html bash ../../tools/html2string.sh ../html/index_template_top.html > index_template_top.html
bash ../../tools/html2string.sh ../html/index_template_middle.html > index_template_middle.html bash ../../tools/html2string.sh ../html/index_template_middle.html > index_template_middle.html
bash ../../tools/html2string.sh ../html/index_template_bottom.html > index_template_bottom.html bash ../../tools/html2string.sh ../html/index_template_bottom.html > index_template_bottom.html
@ -7,4 +20,5 @@ 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 . cp -av ../html/style.css . > /dev/null