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

Disabled slider button styles. Fixed minute range in tc editor. Fixed transition time after sliders were changed in non tc mode. Fixed indention in lights control thml page. Added color gradient to tc editor.

Browse source
This commit is contained in:
Kai Lauterbach 2023-05-10 10:48:50 +02:00
parent f935948402
commit 4b02bba607
9 changed files with 90 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
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')) {
@ -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);

3
firmware/data/style.css
View file

@ -74,6 +74,7 @@ background-color: #ddd;
input[type=range]:focus {
outline: none;
}
/*
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
@ -96,4 +97,4 @@ 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);

25
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() {
@ -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>

3
firmware/html/style.css
View file

@ -74,6 +74,7 @@ background-color: #ddd;
input[type=range]:focus {
outline: none;
}
/*
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
@ -96,4 +97,4 @@ 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}`);

4
firmware/timing_control.ino
View file

@ -450,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"] + " ");