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

The webinterface is splitted into two inner tabs now

Browse source
This commit is contained in:
Kai Lauterbach 2023-05-02 14:06:10 +02:00
parent c973cf0ed0
commit 1fe243fb27
9 changed files with 65 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
firmware/data/config_template.html
View file

@ -1,3 +1,4 @@
<div id="tab-config" class="">
<form class="pure-form pure-form-aligned" action="/" method="post"> <form class="pure-form pure-form-aligned" action="/" method="post">
<h3>Config</h3> <h3>Config</h3>
<div class="pure-control-group"> <div class="pure-control-group">
@ -59,4 +60,4 @@
<button type="submit" class="pure-button pure-button-primary">Save</button> <button type="submit" class="pure-button pure-button-primary">Save</button>
</div> </div>
</form> </form>
</div><!-- end of config div -->

20
firmware/data/index_template_bottom.html
View file

@ -1,5 +1,25 @@
<!-- bottom --> <!-- bottom -->
<script> <script>
var tabMain = document.getElementById("tab-main");
var tabConfig = document.getElementById("tab-config");
var amain = document.getElementById("tab1-a");
var acfg = document.getElementById("tab2-a");
document.getElementById("tab1-a").addEventListener("click", function() {
tabMain.classList.add("visible");
tabConfig.classList.remove("visible");
amain.classList.add("pure-button-primary");
acfg.classList.remove("pure-button-primary");
});
document.getElementById("tab2-a").addEventListener("click", function() {
tabMain.classList.remove("visible");
tabConfig.classList.add("visible");
acfg.classList.add("pure-button-primary");
amain.classList.remove("pure-button-primary");
});
</script>
<script>
function loadGraphData() { function loadGraphData() {
console.log('----> generate graph <----'); console.log('----> generate graph <----');
$.getJSON('/tc_data_blocks', function(data) { $.getJSON('/tc_data_blocks', function(data) {

1
firmware/data/index_template_middle.html
View file

@ -5,3 +5,4 @@
</td> </td>
</tr> </tr>
</table> </table>
</div><!-- end of main-tab div -->

22
firmware/data/index_template_top.html
View file

@ -9,6 +9,18 @@
<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>
<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">
<style>
#tab-main, #tab-config {
display: none;
}
#tab-main.visible {
display: block;
}
#tab-config.visible {
display: block;
}
</style>
</head> </head>
<body> <body>
<fieldset> <fieldset>
@ -27,6 +39,13 @@
<label for="cb" class="pure-checkbox"></label> <label for="cb" class="pure-checkbox"></label>
</div> </div>
<br> <br>
<div>
<a href="#" id="tab1-a" class="pure-button pure-button-primary">Main</a>
<a href="#" id="tab2-a" class="pure-button">Config</a>
</div>
<br>
<div class="pure-control-group"> <div class="pure-control-group">
<label for="tc_on"> <label for="tc_on">
<strong>Timing control</strong> <strong>Timing control</strong>
@ -66,6 +85,7 @@ document.getElementById('tc_on').classList.remove('pure-button-primary');
<input id="transition" name="transition" type="text" placeholder="10" value="{{TRANSITION_TIME}}"> <input id="transition" name="transition" type="text" placeholder="10" value="{{TRANSITION_TIME}}">
</div> </div>
<br> <br>
<script> <script>
let timeoutId; let timeoutId;
function sendSliderValue(x) { function sendSliderValue(x) {
@ -86,6 +106,8 @@ console.error(`Error sending slider value to ${url}: ${error}`);
} }
</script> </script>
<br> <br>
<div id="tab-main" class="visible">
<table border=0> <table border=0>
<tr> <tr>
<td> <td>

2
firmware/data/org/config_template.html
View file

@ -1,4 +1,4 @@
<div id="tab-config"> <div id="tab-config" class="">
<form class="pure-form pure-form-aligned" action="/" method="post"> <form class="pure-form pure-form-aligned" action="/" method="post">
<h3>Config</h3> <h3>Config</h3>
<div class="pure-control-group"> <div class="pure-control-group">

6
firmware/data/org/index_template_bottom.html
View file

@ -2,15 +2,21 @@
<script> <script>
var tabMain = document.getElementById("tab-main"); var tabMain = document.getElementById("tab-main");
var tabConfig = document.getElementById("tab-config"); var tabConfig = document.getElementById("tab-config");
var amain = document.getElementById("tab1-a");
var acfg = document.getElementById("tab2-a");
document.getElementById("tab1-a").addEventListener("click", function() { document.getElementById("tab1-a").addEventListener("click", function() {
tabMain.classList.add("visible"); tabMain.classList.add("visible");
tabConfig.classList.remove("visible"); tabConfig.classList.remove("visible");
amain.classList.add("pure-button-primary");
acfg.classList.remove("pure-button-primary");
}); });
document.getElementById("tab2-a").addEventListener("click", function() { document.getElementById("tab2-a").addEventListener("click", function() {
tabMain.classList.remove("visible"); tabMain.classList.remove("visible");
tabConfig.classList.add("visible"); tabConfig.classList.add("visible");
acfg.classList.add("pure-button-primary");
amain.classList.remove("pure-button-primary");
}); });
</script> </script>
<script> <script>

1
firmware/data/org/index_template_middle.html
View file

@ -5,3 +5,4 @@
</td> </td>
</tr> </tr>
</table> </table>
</div><!-- end of main-tab div -->

8
firmware/data/org/index_template_top.html
View file

@ -41,11 +41,11 @@
<br> <br>
<div> <div>
<a href="#" id="tab1-a" class="pure-button">Main</a> <a href="#" id="tab1-a" class="pure-button pure-button-primary">Main</a>
<a href="#" id="tab2-a" class="pure-button">Config</a> <a href="#" id="tab2-a" class="pure-button">Config</a>
</div> </div>
<br>
<div id="tab-main">
<div class="pure-control-group"> <div class="pure-control-group">
<label for="tc_on"> <label for="tc_on">
<strong>Timing control</strong> <strong>Timing control</strong>
@ -85,6 +85,7 @@
<input id="transition" name="transition" type="text" placeholder="10" value="{{TRANSITION_TIME}}"> <input id="transition" name="transition" type="text" placeholder="10" value="{{TRANSITION_TIME}}">
</div> </div>
<br> <br>
<script> <script>
let timeoutId; let timeoutId;
function sendSliderValue(x) { function sendSliderValue(x) {
@ -104,8 +105,9 @@
}, 500); }, 500);
} }
</script> </script>
</div><!-- end of main-tab div -->
<br> <br>
<div id="tab-main" class="visible">
<table border=0> <table border=0>
<tr> <tr>
<td> <td>

7
tools/html_gen_files.sh Normal file
View file

@ -0,0 +1,7 @@
#!/bin/bash
bash ../../tools/html2string.sh org/index_template_top.html > index_template_top.html
bash ../../tools/html2string.sh org/index_template_middle.html > index_template_middle.html
bash ../../tools/html2string.sh org/index_template_bottom.html > index_template_bottom.html
bash ../../tools/html2string.sh org/config_template.html > config_template.html
bash ../../tools/html2string.sh org/light_control_template.html > light_control_template.html