klaute/lumini_p30_control
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 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">
<h3>Config</h3>
<div class="pure-control-group">
@ -59,4 +60,4 @@
<button type="submit" class="pure-button pure-button-primary">Save</button>
</div>
</form>
</div><!-- end of config div -->

20
firmware/data/index_template_bottom.html
View file

@ -1,5 +1,25 @@
<!-- bottom -->
<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() {
console.log('----> generate graph <----');
$.getJSON('/tc_data_blocks', function(data) {

1
firmware/data/index_template_middle.html
View file

@ -5,3 +5,4 @@
</td>
</tr>
</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://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">
<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>
<body>
<fieldset>
@ -27,6 +39,13 @@
<label for="cb" class="pure-checkbox"></label>
</div>
<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">
<label for="tc_on">
<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}}">
</div>
<br>
<script>
let timeoutId;
function sendSliderValue(x) {
@ -86,6 +106,8 @@ console.error(`Error sending slider value to ${url}: ${error}`);
}
</script>
<br>
<div id="tab-main" class="visible">
<table border=0>
<tr>
<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">
<h3>Config</h3>
<div class="pure-control-group">

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

@ -2,15 +2,21 @@
<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>

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

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

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

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