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

Compare commits

base: klaute:07c3b8e5e5e75a91c7282f5c985177a737a341d0
Branches Tags
klaute:main
klaute:develop
..
compare: klaute:e2ca6ceadecedf6490fc1dbf0815a345e332d07e
Branches Tags
klaute:develop
klaute:main

No commits in common. "07c3b8e5e5e75a91c7282f5c985177a737a341d0" and "e2ca6ceadecedf6490fc1dbf0815a345e332d07e" have entirely different histories.
07c3b8e5e5 ... e2ca6ceade

10 changed files with 178 additions and 156 deletions
Show stats Expand all files Collapse all files

66
firmware/data/bottom.js
View file

@ -95,17 +95,34 @@ var indexFloat = lowerIndex + timeDiff / ((upperTime[0] - lowerTime[0]) + ((uppe
if (indexFloat > index) { if (indexFloat > index) {
index = indexFloat; index = indexFloat;
} }
var traces = []; var trace1 = {
for (var i = 1; i <= 4; i++) {
var trace = {
x: time, x: time,
y: eval("channel" + i), y: channel1,
name: 'Channel ' + i, name: 'Channel 1',
type: 'scatter',
mode: 'lines+markers',
};
var trace2 = {
x: time,
y: channel2,
name: 'Channel 2',
type: 'scatter',
mode: 'lines+markers',
};
var trace3 = {
x: time,
y: channel3,
name: 'Channel 3',
type: 'scatter',
mode: 'lines+markers',
};
var trace4 = {
x: time,
y: channel4,
name: 'Channel 4',
type: 'scatter', type: 'scatter',
mode: 'lines+markers', mode: 'lines+markers',
}; };
traces.push(trace);
}
var layout = { var layout = {
title: 'Timing Control Data Blocks', title: 'Timing Control Data Blocks',
xaxis: { xaxis: {
@ -129,7 +146,7 @@ dash: 'dot'
} }
}] }]
}; };
Plotly.newPlot('plot_chart', traces, layout); Plotly.newPlot('plot_chart', [trace1, trace2, trace3, trace4], layout);
}); });
} }
setInterval(loadGraphData, 10000); setInterval(loadGraphData, 10000);
@ -189,17 +206,34 @@ var indexFloat = lowerIndex + timeDiff / ((upperTime[0] - lowerTime[0]) + ((uppe
if (indexFloat > index) { if (indexFloat > index) {
index = indexFloat; index = indexFloat;
} }
var traces = []; var trace1 = {
for (var i = 1; i <= 4; i++) {
var trace = {
x: time, x: time,
y: eval("channel" + i), y: channel1,
name: 'Channel ' + i, name: 'Channel 1',
type: 'scatter',
mode: 'lines+markers',
};
var trace2 = {
x: time,
y: channel2,
name: 'Channel 2',
type: 'scatter',
mode: 'lines+markers',
};
var trace3 = {
x: time,
y: channel3,
name: 'Channel 3',
type: 'scatter',
mode: 'lines+markers',
};
var trace4 = {
x: time,
y: channel4,
name: 'Channel 4',
type: 'scatter', type: 'scatter',
mode: 'lines+markers', mode: 'lines+markers',
}; };
traces.push(trace);
}
var layout = { var layout = {
title: 'Timing Control Data Blocks', title: 'Timing Control Data Blocks',
xaxis: { xaxis: {
@ -223,7 +257,7 @@ dash: 'dot'
} }
}] }]
}; };
Plotly.newPlot('tc_plot_chart', traces, layout); Plotly.newPlot('tc_plot_chart', [trace1, trace2, trace3, trace4], layout);
var plot = document.getElementById('tc_plot_chart'); var plot = document.getElementById('tc_plot_chart');
} }
function rgbaToHex(rgba) { function rgbaToHex(rgba) {

1
firmware/data/index_template_bottom.html
View file

@ -19,7 +19,6 @@
</tr> </tr>
</table> </table>
<a href="#" id="save-button" class="pure-button pure-button-primary" onclick="sendDataToServer();">save</a> <a href="#" id="save-button" class="pure-button pure-button-primary" onclick="sendDataToServer();">save</a>
<a href="#" id="save-button" class="pure-button pure-button-primary" onclick="fillTableFromJson();">reset</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">

2
firmware/data/index_template_top.html
View file

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Light setup - {{LIGHT_NAME}}{{LIGHT_NAME_DEV_POSTFIX}}</title> <title>Light setup - {{LIGHT_NAME}}</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script> <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<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>

28
firmware/data/style.css
View file

@ -1,24 +1,20 @@
body { #tab-lights, #tab-config, #tab-tde {
font-family: Arial, sans-serif;
}
#tab-lights,
#tab-config,
#tab-tde {
display: none; display: none;
background-color: #ffffff; background-color: #ffffff;
color: black; color: black;
font-weight: bold; font-weight: bold;
padding: 10px;
border-radius: 3px;
} }
#tab-lights.visible, #tab-lights.visible {
#tab-config.visible, display: block;
}
#tab-config.visible {
display: block;
}
#tab-tde.visible { #tab-tde.visible {
display: block; display: block;
} }
.pure-table td { .pure-table td {
padding: 4px; padding: 4px;
vertical-align: top;
} }
.pure-form input[type="number"] { .pure-form input[type="number"] {
width: 60px; width: 60px;
@ -45,6 +41,9 @@ cursor: pointer;
.pure-button:hover { .pure-button:hover {
background-color: #333; background-color: #333;
} }
.top-align {
vertical-align: top;
}
.toast { .toast {
position: fixed; position: fixed;
bottom: 10px; bottom: 10px;
@ -60,7 +59,7 @@ opacity: 0;
transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out;
} }
.toast.success { .toast.success {
background-color: #4caf50; background-color: #4CAF50;
} }
.toast.error { .toast.error {
background-color: #f44336; background-color: #f44336;
@ -76,8 +75,5 @@ input[type=range]:focus {
outline: none; outline: none;
} }
[id^="bri"] { [id^="bri"] {
width: 50%; width: 50%;
}
.top-align {
vertical-align: top;
} }

85
firmware/html/bottom.js
View file

@ -9,6 +9,7 @@ function addTabListener() {
var acfg = document.getElementById("tab-a-config"); var acfg = document.getElementById("tab-a-config");
var atde = document.getElementById("tab-a-tde"); var atde = document.getElementById("tab-a-tde");
amain.addEventListener("click", function() { amain.addEventListener("click", function() {
//console.log("Switch to main lights tab"); //console.log("Switch to main lights tab");
tabMain.classList.add("visible"); tabMain.classList.add("visible");
@ -120,18 +121,34 @@ function loadGraphData() {
index = indexFloat; index = indexFloat;
} }
//console.log("index in graph >>>" + index); //console.log("index in graph >>>" + index);
var traces = []; var trace1 = {
for (var i = 1; i <= 4; i++) { x: time,
var trace = { y: channel1,
x: time, name: 'Channel 1',
y: eval("channel" + i), type: 'scatter',
name: 'Channel ' + i, mode: 'lines+markers',
type: 'scatter', };
mode: 'lines+markers', var trace2 = {
}; x: time,
y: channel2,
traces.push(trace); name: 'Channel 2',
} type: 'scatter',
mode: 'lines+markers',
};
var trace3 = {
x: time,
y: channel3,
name: 'Channel 3',
type: 'scatter',
mode: 'lines+markers',
};
var trace4 = {
x: time,
y: channel4,
name: 'Channel 4',
type: 'scatter',
mode: 'lines+markers',
};
var layout = { var layout = {
title: 'Timing Control Data Blocks', title: 'Timing Control Data Blocks',
xaxis: { xaxis: {
@ -155,7 +172,7 @@ function loadGraphData() {
} }
}] }]
}; };
Plotly.newPlot('plot_chart', traces, layout); Plotly.newPlot('plot_chart', [trace1, trace2, trace3, trace4], layout);
}); });
} }
setInterval(loadGraphData, 10000); setInterval(loadGraphData, 10000);
@ -229,18 +246,34 @@ function loadTCGraphData() {
index = indexFloat; index = indexFloat;
} }
//console.log("index in graph >>>" + index); //console.log("index in graph >>>" + index);
var traces = []; var trace1 = {
for (var i = 1; i <= 4; i++) { x: time,
var trace = { y: channel1,
x: time, name: 'Channel 1',
y: eval("channel" + i), type: 'scatter',
name: 'Channel ' + i, mode: 'lines+markers',
type: 'scatter', };
mode: 'lines+markers', var trace2 = {
}; x: time,
y: channel2,
traces.push(trace); name: 'Channel 2',
} type: 'scatter',
mode: 'lines+markers',
};
var trace3 = {
x: time,
y: channel3,
name: 'Channel 3',
type: 'scatter',
mode: 'lines+markers',
};
var trace4 = {
x: time,
y: channel4,
name: 'Channel 4',
type: 'scatter',
mode: 'lines+markers',
};
var layout = { var layout = {
title: 'Timing Control Data Blocks', title: 'Timing Control Data Blocks',
xaxis: { xaxis: {
@ -264,7 +297,7 @@ function loadTCGraphData() {
} }
}] }]
}; };
Plotly.newPlot('tc_plot_chart', traces, 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 var plot = document.getElementById('tc_plot_chart'); // Das HTML-Div-Element, in dem der Plot angezeigt wird
} }

1
firmware/html/index_template_bottom.html
View file

@ -20,7 +20,6 @@
</table> </table>
<a href="#" id="save-button" class="pure-button pure-button-primary" onclick="sendDataToServer();">save</a> <a href="#" id="save-button" class="pure-button pure-button-primary" onclick="sendDataToServer();">save</a>
<a href="#" id="save-button" class="pure-button pure-button-primary" onclick="fillTableFromJson();">reset</a>
</div> </div>
</div> <!-- end of tab-tde --> </div> <!-- end of tab-tde -->

2
firmware/html/index_template_top.html
View file

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Light setup - {{LIGHT_NAME}}{{LIGHT_NAME_DEV_POSTFIX}}</title> <title>Light setup - {{LIGHT_NAME}}</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script> <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<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>

132
firmware/html/style.css
View file

@ -1,107 +1,79 @@
/* Vereinheitlichter Look */ #tab-lights, #tab-config, #tab-tde {
body { display: none;
font-family: Arial, sans-serif; background-color: #ffffff;
color: black;
font-weight: bold;
} }
#tab-lights.visible {
/* Gemeinsame Regeln für die Tabs */ display: block;
#tab-lights, }
#tab-config, #tab-config.visible {
#tab-tde { display: block;
display: none;
background-color: #ffffff;
color: black;
font-weight: bold;
padding: 10px;
border-radius: 3px;
} }
/* Sichtbarkeitsregeln für die Tabs */
#tab-lights.visible,
#tab-config.visible,
#tab-tde.visible { #tab-tde.visible {
display: block; display: block;
} }
/* Gemeinsame Regeln für Tabellenzellen */
.pure-table td { .pure-table td {
padding: 4px; padding: 4px;
vertical-align: top;
/* Hinzugefügt: vertikale Ausrichtung oben */
} }
/* Stil für Formularelemente */
.pure-form input[type="number"] { .pure-form input[type="number"] {
width: 60px; width: 60px;
height: 20px; height: 20px;
border-radius: 3px; border-radius: 3px;
border: 1px solid #ccc; border: 1px solid #ccc;
} }
.pure-form select { .pure-form select {
width: 80px; width: 80px;
height: 26px; height: 26px;
border-radius: 3px; border-radius: 3px;
border: 1px solid #ccc; border: 1px solid #ccc;
background-color: #fff; background-color: #fff;
} }
/* Stil für Buttons */
.pure-button { .pure-button {
background-color: #5a5a5a; background-color: #5a5a5a;
color: #fff; color: #fff;
border-radius: 3px; border-radius: 3px;
border: none; border: none;
padding: 8px 12px; padding: 8px 12px;
font-size: 14px; font-size: 14px;
cursor: pointer; cursor: pointer;
} }
.pure-button:hover { .pure-button:hover {
background-color: #333; background-color: #333;
}
.top-align {
vertical-align: top;
} }
/* Stil für die Toast-Nachrichten */
.toast { .toast {
position: fixed; position: fixed;
bottom: 10px; bottom: 10px;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
padding: 10px; padding: 10px;
border-radius: 5px; border-radius: 5px;
color: #fff; color: #fff;
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
opacity: 0; opacity: 0;
transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out;
} }
.toast.success { .toast.success {
background-color: #4caf50; background-color: #4CAF50;
} }
.toast.error { .toast.error {
background-color: #f44336; background-color: #f44336;
} }
/* Stil für den Range-Slider */
input[type=range] { input[type=range] {
-webkit-appearance: none; -webkit-appearance: none;
width: 70%; width: 70%;
height: 7px; height: 7px;
margin: 4px 0; margin: 4px 0;
background-color: #ddd; background-color: #ddd;
} }
input[type=range]:focus { input[type=range]:focus {
outline: none; outline: none;
} }
/* Spezifischer Stil für Elemente mit ID, die mit "bri" beginnen */
[id^="bri"] { [id^="bri"] {
width: 50%; width: 50%;
} }
.top-align {
vertical-align: top;
}

7
tools/html2string.sh
View file

@ -4,10 +4,7 @@
sed -e 's/^[[:space:]]*//' -e '/^\/\/.*/d' $1 | sed -e 's/^[[:space:]]*//' -e '/^\/\/.*/d' $1 |
# Remove one line comments starting with // # Remove one line comments starting with //
sed -e 's/^\/\/.*$//' | sed -e 's/^\/\/.*$//' |
# Remove trailing comments starting with space // # Remove trailing comments starting with //
sed -e 's/ \/\/.*$//' | sed -e 's/ \/\/.*$//' |
# Remove one-line comments starting with /*
sed -e 's/\/\*.*//g' |
# Remove empty lines # Remove empty lines
sed -e '/^\s*$/d' sed '/^\s*$/d'

10
tools/html_gen_files.sh
View file

@ -20,13 +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
bash ../../tools/html2string.sh ../html/style.css > style.css cp -av ../html/style.css . > /dev/null
#for file in *"_tmp"; do
# if [[ -f "$file" ]]; then
# new_file="${file%_tmp}"
# html-minifier --collapse-whitespace --remove-comments --remove-optional-tags --remove-redundant-attributes --remove-script-type-attributes --remove-tag-whitespace --use-short-doctype --minify-css true "$file" > "$new_file"
# rm "$file"
# fi
#done