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

Merge branch 'develop'

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

23
firmware/data/bottom.js
View file

@ -258,6 +258,14 @@ dash: 'dot'
}]
};
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() {
if (document.getElementById('tab-tde').classList.contains('visible')) {
@ -404,7 +412,7 @@ var tr = document.createElement("tr");
var tdHour = createSelectCell(23, 0, 1);
tdHour.id = "hour" + i;
tr.appendChild(tdHour);
var tdMinute = createSelectCell(59, 0, 1);
var tdMinute = createSelectCell(59, 0, 10);
tdMinute.id = "minute" + i;
tr.appendChild(tdMinute);
for (var j = 1; j <=4; j++)
@ -419,6 +427,10 @@ container.innerHTML = "";
container.classList.add("pure-form");
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) {
var input = document.createElement("input");
input.type = "range";
@ -426,15 +438,16 @@ input.min = 0;
input.max = max;
input.step = step;
input.value = value;
input.style = "1px solod darkgray";
input.classList.add("pure-slider-range");
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_")) {
input.style.backgroundColor = "orange";
input.style.background = "linear-gradient(to bottom, " + rgb2Hex(255, 127, 14) + ", white)";
} 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_")) {
input.style.backgroundColor = "red";
input.style.background = "linear-gradient(to bottom, " + rgb2Hex(214, 39, 40) + ", white)";
}
div = document.createElement("div");
div.appendChild(input);

34
firmware/data/style.css
View file

@ -64,3 +64,37 @@ background-color: #4CAF50;
.toast.error {
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;
}*/

8
firmware/data/top.js
View file

@ -80,7 +80,13 @@ x = x - 1;
clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
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 => {
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);

3
firmware/firmware.ino
View file

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

27
firmware/html/bottom.js
View file

@ -299,6 +299,16 @@ function loadTCGraphData() {
};
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() {
@ -479,7 +489,7 @@ function createTable() {
tr.appendChild(tdHour);
// Minute
var tdMinute = createSelectCell(59, 0, 1);
var tdMinute = createSelectCell(59, 0, 10);
tdMinute.id = "minute" + i;
tr.appendChild(tdMinute);
@ -499,6 +509,12 @@ function createTable() {
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) {
// Create a new input element of type range
var input = document.createElement("input");
@ -507,16 +523,17 @@ function createSlider(id, max, value, step) {
input.max = max;
input.step = step;
input.value = value;
input.style = "1px solod darkgray";
input.classList.add("pure-slider-range");
// Change the color of the slider based on the id
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_")) {
input.style.backgroundColor = "orange";
input.style.background = "linear-gradient(to bottom, " + rgb2Hex(255, 127, 14) + ", white)";
} 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_")) {
input.style.backgroundColor = "red";
input.style.background = "linear-gradient(to bottom, " + rgb2Hex(214, 39, 40) + ", white)";
}
div = document.createElement("div");

56
firmware/html/light_control_template.html
View file

@ -1,29 +1,29 @@
<h4>Light {{LIGHT_NUMBER}}</h4>
<div class="pure-control-group">
<label for="power">
<strong>Power</strong>
</label>
<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>
</div>
<div class="pure-control-group">
<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">
&nbsp;
<span id="bri{{LIGHT_NUMBER_DEC}}_val" name="bri{{LIGHT_NUMBER_DEC}}">9</span>
%
<br>
<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>
&nbsp;
<span id="light{{LIGHT_NUMBER_DEC}}_pwm_txt"></span>
%
<script>
var slider{{LIGHT_NUMBER_DEC}} = document.getElementById("bri{{LIGHT_NUMBER_DEC}}");
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);
slider{{LIGHT_NUMBER_DEC}}.oninput = function() {
output{{LIGHT_NUMBER_DEC}}.innerHTML = (Math.round((this.value * 100.0 / 255.0) * 100) / 100).toFixed(2);
}
</script>
</div>
<div class="pure-control-group">
<label for="power">
<strong>Power</strong>
</label>
<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>
</div>
<div class="pure-control-group">
<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">
&nbsp;
<span id="bri{{LIGHT_NUMBER_DEC}}_val" name="bri{{LIGHT_NUMBER_DEC}}">9</span>
%
<br>
<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>
&nbsp;
<span id="light{{LIGHT_NUMBER_DEC}}_pwm_txt"></span>
%
<script>
var slider{{LIGHT_NUMBER_DEC}} = document.getElementById("bri{{LIGHT_NUMBER_DEC}}");
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);
slider{{LIGHT_NUMBER_DEC}}.oninput = function() {
output{{LIGHT_NUMBER_DEC}}.innerHTML = (Math.round((this.value * 100.0 / 255.0) * 100) / 100).toFixed(2);
}
</script>
</div>

34
firmware/html/style.css
View file

@ -64,3 +64,37 @@ background-color: #4CAF50;
.toast.error {
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;
}*/

9
firmware/html/top.js
View file

@ -87,7 +87,14 @@ function sendSliderValue(x) {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
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 => {
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);

14
firmware/timing_control.ino
View file

@ -165,6 +165,16 @@ void tc_update_main()
{
// no new predecessor or successor found, start over
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;
}
@ -440,8 +450,8 @@ void tc_jsonDataBlocksToEEPROM(String json_data_string)
int minute = obj["min"];
if (minute < 0) {
minute = 0;
} else if (minute > 59) {
minute = 59;
} else if (minute > 50) {
minute = 50;
}
tc_data[i].mm = minute;
Serial.print("minute = " + (String)tc_data[i].mm + " " + (String)obj["min"] + " ");

16
tools/html_gen_files.sh
View file

@ -1,5 +1,18 @@
#!/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_middle.html > index_template_middle.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/top.js > top.js
bash ../../tools/html2string.sh ../html/bottom.js > bottom.js
cp -av ../html/style.css .
cp -av ../html/style.css . > /dev/null