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

Fixed config tab look. Rearranged html code.

Browse source
This commit is contained in:
Kai Lauterbach 2023-05-03 14:05:04 +02:00
parent d015f5b31c
commit ebf587c73e
9 changed files with 50 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
firmware/data/config_template.html
View file

@ -1,6 +1,9 @@
<div id="tab-config" class=""> <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> <br>
<label for="startup">
<strong>Light initialization</strong>
</label>
<div class="pure-control-group"> <div class="pure-control-group">
<label for="startup"> <label for="startup">
<strong>Startup</strong> <strong>Startup</strong>
@ -22,7 +25,9 @@
</select> </select>
</div> </div>
<br> <br>
<h3>Wifi</h3> <label for="startup">
<strong>Wifi</strong>
</label>
<div class="pure-control-group"> <div class="pure-control-group">
<label for="ip">SSID</label> <label for="ip">SSID</label>
<input id="ssid" name="ssid" type="text" value="{{WIFI_SSID}}"> <input id="ssid" name="ssid" type="text" value="{{WIFI_SSID}}">
@ -32,7 +37,9 @@
<input id="wpw" name="wpw" type="text" placeholder="1234password"> <input id="wpw" name="wpw" type="text" placeholder="1234password">
</div> </div>
<br> <br>
<h3>Network</h3> <label for="startup">
<strong>Network</strong>
</label>
<div class="pure-control-group"> <div class="pure-control-group">
<label for="dip"> <label for="dip">
<strong>Dynamic-IP</strong> <strong>Dynamic-IP</strong>

20
firmware/data/index_template_top.html
View file

@ -12,6 +12,9 @@
<style> <style>
#tab-lights, #tab-config, #tab-tde { #tab-lights, #tab-config, #tab-tde {
display: none; display: none;
background-color: #ffffff;
color: black;
font-weight: bold;
} }
#tab-lights.visible { #tab-lights.visible {
display: block; display: block;
@ -35,22 +38,25 @@ display: block;
<a href="/?alert=1" class="pure-button">alert</a> <a href="/?alert=1" class="pure-button">alert</a>
</div> </div>
<br> <br>
<div><!-- Tab links -->
<div>
<a href="#" id="tab-a-lights" class="pure-button pure-button-primary">Lights control</a> <a href="#" id="tab-a-lights" class="pure-button pure-button-primary">Lights control</a>
<a href="#" id="tab-a-config" class="pure-button">Config</a> <a href="#" id="tab-a-config" class="pure-button">Config</a>
<a href="#" id="tab-a-tde" class="pure-button">Timing data edit</a> <a href="#" id="tab-a-tde" class="pure-button">Timing data edit</a>
</div> </div>
<br> <br>
<div id="tab-lights" class="visible"> <!-- lights control tab --> <div id="tab-lights" class="visible"> <!-- lights control tab -->
<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>
</label> </label>
<a id="tc_on" class="pure-button {{TC_LINK_PRIMARY_ON}}" href="#">ON</a> <a id="tc_on" class="pure-button {{TC_LINK_PRIMARY_ON}}" href="#">ON</a>
<a id="tc_off" class="pure-button {{TC_LINK_PRIMARY_OFF}}" href="#">OFF</a> <a id="tc_off" class="pure-button {{TC_LINK_PRIMARY_OFF}}" href="#">OFF</a>
<br>
<label for="transition">Transition time (s)</label>
<input id="transition" name="transition" type="text" placeholder="10" value="{{TRANSITION_TIME}}">
</div> </div>
<br>
<script> <script>
var links = document.querySelectorAll('[id^="tc_on"]'); var links = document.querySelectorAll('[id^="tc_on"]');
links.forEach(function(link) { links.forEach(function(link) {
@ -76,15 +82,7 @@ document.getElementById('tc_off').classList.add('pure-button-primary');
document.getElementById('tc_on').classList.remove('pure-button-primary'); document.getElementById('tc_on').classList.remove('pure-button-primary');
}); });
}); });
</script>
<br>
<div class="pure-control-group">
<label for="transition">Transition time (s)</label>
<input id="transition" name="transition" type="text" placeholder="10" value="{{TRANSITION_TIME}}">
</div>
<br>
<script>
let timeoutId; let timeoutId;
function sendSliderValue(x) { function sendSliderValue(x) {
x = x - 1; x = x - 1;

2
firmware/firmware.ino
View file

@ -734,12 +734,14 @@ String replacePlaceholder(String http_content)
if (tc_val == TIMING_CONTROL_ENABLED) if (tc_val == TIMING_CONTROL_ENABLED)
{ {
http_content.replace("{{TC_LINK_PRIMARY_ON}}", "pure-button-primary"); http_content.replace("{{TC_LINK_PRIMARY_ON}}", "pure-button-primary");
} else { } else {
http_content.replace("{{TC_LINK_PRIMARY_ON}}", ""); http_content.replace("{{TC_LINK_PRIMARY_ON}}", "");
} }
if (tc_val == TIMING_CONTROL_DISABLED) if (tc_val == TIMING_CONTROL_DISABLED)
{ {
http_content.replace("{{TC_LINK_PRIMARY_OFF}}", "pure-button-primary"); http_content.replace("{{TC_LINK_PRIMARY_OFF}}", "pure-button-primary");
} else { } else {
http_content.replace("{{TC_LINK_PRIMARY_OFF}}", ""); http_content.replace("{{TC_LINK_PRIMARY_OFF}}", "");
} }

13
firmware/data/org/config_template.html → firmware/html/config_template.html
View file

@ -1,6 +1,9 @@
<div id="tab-config" class=""> <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> <br>
<label for="startup">
<strong>Light initialization</strong>
</label>
<div class="pure-control-group"> <div class="pure-control-group">
<label for="startup"> <label for="startup">
<strong>Startup</strong> <strong>Startup</strong>
@ -22,7 +25,9 @@
</select> </select>
</div> </div>
<br> <br>
<h3>Wifi</h3> <label for="startup">
<strong>Wifi</strong>
</label>
<div class="pure-control-group"> <div class="pure-control-group">
<label for="ip">SSID</label> <label for="ip">SSID</label>
<input id="ssid" name="ssid" type="text" value="{{WIFI_SSID}}"> <input id="ssid" name="ssid" type="text" value="{{WIFI_SSID}}">
@ -32,7 +37,9 @@
<input id="wpw" name="wpw" type="text" placeholder="1234password"> <input id="wpw" name="wpw" type="text" placeholder="1234password">
</div> </div>
<br> <br>
<h3>Network</h3> <label for="startup">
<strong>Network</strong>
</label>
<div class="pure-control-group"> <div class="pure-control-group">
<label for="dip"> <label for="dip">
<strong>Dynamic-IP</strong> <strong>Dynamic-IP</strong>

0
firmware/data/org/index_template_bottom.html → firmware/html/index_template_bottom.html
View file

0
firmware/data/org/index_template_middle.html → firmware/html/index_template_middle.html
View file

30
firmware/data/org/index_template_top.html → firmware/html/index_template_top.html
View file

@ -12,6 +12,9 @@
<style> <style>
#tab-lights, #tab-config, #tab-tde { #tab-lights, #tab-config, #tab-tde {
display: none; display: none;
background-color: #ffffff;
color: black;
font-weight: bold;
} }
#tab-lights.visible { #tab-lights.visible {
display: block; display: block;
@ -35,22 +38,25 @@
<a href="/?alert=1" class="pure-button">alert</a> <a href="/?alert=1" class="pure-button">alert</a>
</div> </div>
<br> <br>
<div><!-- Tab links -->
<div>
<a href="#" id="tab-a-lights" class="pure-button pure-button-primary">Lights control</a> <a href="#" id="tab-a-lights" class="pure-button pure-button-primary">Lights control</a>
<a href="#" id="tab-a-config" class="pure-button">Config</a> <a href="#" id="tab-a-config" class="pure-button">Config</a>
<a href="#" id="tab-a-tde" class="pure-button">Timing data edit</a> <a href="#" id="tab-a-tde" class="pure-button">Timing data edit</a>
</div> </div>
<br> <br>
<div id="tab-lights" class="visible"> <!-- lights control tab --> <div id="tab-lights" class="visible"> <!-- lights control tab -->
<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>
</label> </label>
<a id="tc_on" class="pure-button {{TC_LINK_PRIMARY_ON}}" href="#">ON</a> <a id="tc_on" class="pure-button {{TC_LINK_PRIMARY_ON}}" href="#">ON</a>
<a id="tc_off" class="pure-button {{TC_LINK_PRIMARY_OFF}}" href="#">OFF</a> <a id="tc_off" class="pure-button {{TC_LINK_PRIMARY_OFF}}" href="#">OFF</a>
<br>
<label for="transition">Transition time (s)</label>
<input id="transition" name="transition" type="text" placeholder="10" value="{{TRANSITION_TIME}}">
</div> </div>
<br>
<script> <script>
var links = document.querySelectorAll('[id^="tc_on"]'); var links = document.querySelectorAll('[id^="tc_on"]');
links.forEach(function(link) { links.forEach(function(link) {
@ -76,15 +82,7 @@
document.getElementById('tc_on').classList.remove('pure-button-primary'); document.getElementById('tc_on').classList.remove('pure-button-primary');
}); });
}); });
</script>
<br>
<div class="pure-control-group">
<label for="transition">Transition time (s)</label>
<input id="transition" name="transition" type="text" placeholder="10" value="{{TRANSITION_TIME}}">
</div>
<br>
<script>
let timeoutId; let timeoutId;
function sendSliderValue(x) { function sendSliderValue(x) {
x = x - 1; x = x - 1;

0
firmware/data/org/light_control_template.html → firmware/html/light_control_template.html
View file

10
tools/html_gen_files.sh
View file

@ -1,7 +1,7 @@
#!/bin/bash #!/bin/bash
bash ../../tools/html2string.sh org/index_template_top.html > index_template_top.html bash ../../tools/html2string.sh ../html/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 ../html/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 ../html/index_template_bottom.html > index_template_bottom.html
bash ../../tools/html2string.sh org/config_template.html > config_template.html bash ../../tools/html2string.sh ../html/config_template.html > config_template.html
bash ../../tools/html2string.sh org/light_control_template.html > light_control_template.html bash ../../tools/html2string.sh ../html/light_control_template.html > light_control_template.html