Skip to content

Commit 666ea26

Browse files
author
bigtreetech
committed
Tweak html
1 parent 195e8dc commit 666ea26

File tree

2 files changed

+85
-140
lines changed

2 files changed

+85
-140
lines changed

‎src/index_html.h‎

Lines changed: 81 additions & 138 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,10 @@ const char index_html[] PROGMEM = R"rawliteral(<!DOCTYPE html>
33
display: inline-block;
44
text-align: center;">
55
<head>
6-
<!-- <link rel="stylesheet" type="text/css" href="test.css" /> -->
76
<title>BTT KNOMI SETTINGS MANAGER</title>
87
<link rel='shortcut icon' type='image/x-icon' href='/favicon.ico' />
98
<meta name="viewport" content="width=device-width, initial-scale=1">
10-
<!--link rel="icon" href="data:,"-->
119
<style>
12-
/* body {background-color: powderblue;} */
1310
h1 {
1411
font-size: 1.8rem;
1512
color: white;
@@ -23,7 +20,7 @@ text-align: center;">
2320
}
2421
.topnav {
2522
overflow: hidden;
26-
background-color: #c02f30;
23+
background-color: #C02E2F;
2724
}
2825
body {
2926
margin: 0;
@@ -55,57 +52,41 @@ text-align: center;">
5552
font-weight: bold;
5653
color: #034078
5754
}
58-
input[id="FWbtn"] {
55+
input[id="sys-btn"] {
5956
border: none;
6057
color: #FEFCFB;
61-
background-color: #c02f30;
58+
background-color: #C02E2F;
6259
padding: 15px 15px;
6360
text-align: center;
6461
text-decoration: none;
6562
display: inline-block;
6663
font-size: 16px;
67-
width: 120px;
64+
width: 230px;
65+
height: 45;
6866
margin-right: 0px;
6967
margin-bottom: 0px;
70-
border-radius: 4px;
68+
border-radius: 45px;
7169
transition-duration: 0.4s;
7270
}
73-
input[id="FWbtn"]:hover {
74-
background-color: #EF2f30;
75-
}
76-
input[id="submitwifi"] {
71+
input[id="submit-btn"] {
7772
border: none;
7873
color: #FEFCFB;
79-
background-color: #c02f30;
74+
background-color: #0085FF;
8075
padding: 10px 10px;
8176
text-align: center;
8277
text-decoration: none;
8378
display: inline-block;
8479
font-size: 16px;
8580
width: 100px;
81+
height: 45;
8682
margin-left: 20px;
8783
margin-right: 0px;
8884
margin-bottom: 0px;
89-
border-radius: 4px;
90-
transition-duration: 0.4s;
91-
}
92-
input[id="submitap"] {
93-
border: none;
94-
color: #FEFCFB;
95-
background-color: #c02f30;
96-
padding: 15px 15px;
97-
text-align: center;
98-
text-decoration: none;
99-
display: inline-block;
100-
font-size: 16px;
101-
width: 200px;
102-
margin-right: 0px;
103-
margin-bottom: 1px;
104-
border-radius: 4px;
85+
border-radius: 45px;
10586
transition-duration: 0.4s;
10687
}
10788
input[type=submit]:hover {
108-
background-color: #EF2f30;
89+
background: #0085FF;
10990
}
11091
p {
11192
display: flex;
@@ -133,7 +114,7 @@ text-align: center;">
133114
font-size: 1.2rem;
134115
color: #1282A2;
135116
}
136-
.input-btn{
117+
.refresh-btn{
137118
max-width: 800px;
138119
margin: 0 auto;
139120
position: relative;
@@ -143,11 +124,11 @@ text-align: center;">
143124
width: 100%;
144125
border: none;
145126
color: #FEFCFB;
146-
background-color: #c02f30;
127+
background-color: #0085FF;
147128
text-align: center;
148129
text-decoration: none;
149130
font-size: 16px;
150-
border-radius: 4px;
131+
border-radius: 0px;
151132
transition-duration: 0.4s;
152133
};
153134
.state {
@@ -196,7 +177,7 @@ text-align: center;">
196177
text-align: center;
197178
}
198179
table th {
199-
background-color: #c02f30;
180+
background-color: #C02E2F;
200181
color: white;
201182
}
202183
tr:nth-child(even) {background-color: #f2f2f2;}
@@ -246,13 +227,13 @@ text-align: center;">
246227
width: 100%;
247228
padding: 10px;
248229
border: none;
249-
background: #c02f30;
230+
background: #0085FF;
250231
font-size: 16px;
251232
font-weight: 400;
252233
color: #fff;
253234
}
254235
button:hover {
255-
background: #c02f30;
236+
background: #0085FF;
256237
}
257238
.close {
258239
color: #aaa;
@@ -266,21 +247,6 @@ text-align: center;">
266247
text-decoration: none;
267248
cursor: pointer;
268249
}
269-
button.button {
270-
background: none;
271-
border-top: none;
272-
outline: none;
273-
border-right: none;
274-
border-left: none;
275-
border-bottom: #02274a 1px solid;
276-
padding: 0 0 3px 0;
277-
font-size: 16px;
278-
cursor: pointer;
279-
}
280-
button.button:hover {
281-
border-bottom: #a99567 1px solid;
282-
color: #a99567;
283-
}
284250
.ant-form-item-row{
285251
display: flex;
286252
justify-content: center;
@@ -383,102 +349,45 @@ text-align: center;">
383349
}
384350
</style>
385351
<script>
386-
function moveSSID(nname){
387-
document.getElementById("ssid").value = nname;
352+
function validateRestartForm(){
353+
return confirm("KNOMI will disconnect the network connection and restart\n\nPlease reconnect after KNOMI restart");
388354
}
389-
function validateForm() {
390-
// let x = document.getElementById("ssid").value;
391-
// if (x == "" || x == "empty") {
392-
// alert("You must enter a valid SSID.");
393-
// return false;
394-
// }
395-
// let y = document.getElementById("host").value;
396-
// if (y == "") {
397-
// alert("You must enter a valid hostname.");
398-
// return false;
399-
// }
400-
// alert("The BTT KNOMI will now attempt to connect to the specified network.\n\nIf it fails after 15s then this access point will be re-launched and you can connect to it to try again.");
401-
return true;
355+
function validateKlipperForm(){
356+
var ip = document.getElementById("ip").value;
357+
var port = document.getElementById("port").value;
358+
var tool = document.getElementById("tool").value;
359+
return confirm("Klipper IP: " + ip + "\nKlipper Port: " + port + "\nTool ID: " + tool);
402360
}
403-
function validateModeForm() {
404-
let z = document.getElementById("ap-ssid").value;
405-
console.log(document.getElementById("ap-ssid").value)
406-
if (z == "" || z == "empty") {
407-
alert("You must enter a valid ap-ssid.");
408-
return false;
409-
}
410-
let v = document.getElementById("ap-pwd").value;
411-
if (v == "Mode: Forced access point scanning")
412-
if (v == "" || v == "empty") {
361+
function validateKnomiForm(){
362+
var obj_mode = document.getElementById("mode");
363+
var mode = obj_mode.options[obj_mode.selectedIndex].text;
364+
var ssid = document.getElementById("ap-ssid").value;
365+
var pwd = document.getElementById("ap-pwd").value;
366+
var name = document.getElementById("hostname").value;
367+
return confirm("WiFi mode: " + mode + "\nAP SSID: " + ssid + "\nAP PWD: " + pwd + "\nhostname: " + name);
368+
}
369+
function validateAPForm() {
370+
let ssid = document.getElementById("ap-ssid").value;;
371+
console.log(document.getElementById("ap-ssid").value);
372+
if (ssid == "" || ssid == "empty") {
413373
alert("You must enter a valid ap-ssid.");
414374
return false;
415375
}
416-
return true
417-
// return confirm("This will disconnect you from the current access point and allow you to scan for WiFi networks.\n\nTo get back into normal mode you'll need to enter and submit WiFi credentials.\n\nWould you like to proceed?");
376+
return validateKnomiForm();
418377
}
419-
function validateRestartForm(){
420-
alert("KNOMI will disconnect the network connection and restart\n\nPlease reconnect after KNOMI restart");
421-
return true
422-
}
423-
function togglePassFunction()
424-
{
425-
var x = document.getElementById("pass");
426-
if (x.type === "password") {
427-
x.type = "text";
428-
} else {
429-
x.type = "password";
430-
}
431-
}
432378
</script>
433379
</head>
434380
<body>
435381
<div class="topnav">
436-
<h1>BTT KNOMI SETTINGS MANAGER</h1>
437-
<h2>*Refresh to update wifi network list</h2>
438-
</div>
439-
<div id="modalOne" class="modal">
440-
<div class="modal-content">
441-
<div class="contact-form">
442-
<a class="close">&times;</a>
443-
<form class="modal_form" action="/" method="POST" onsubmit="return validateForm()">
444-
<!-- <h2 id ="ssid">Contact Us</h2> -->
445-
<div>
446-
<input readonly id ="ssid" class="fname" type="text" name="ssid" placeholder="ssid" />
447-
<span></span>
448-
<input class="fname" type="text" name="password" placeholder="password" />
449-
<span></span>
450-
</div>
451-
<button type="submit" >Connect</button>
452-
</form>
453-
</div>
454-
</div>
382+
<h1>BTT KNOMI SETTINGS MANAGER ;)</h1>
455383
</div>
456384
<div class="content">
457-
<div class="table-container">
458-
<table>
459-
<thead>
460-
<tr>
461-
<th>SSID</th>
462-
<th>RSSI</th>
463-
<th>STATUS</th>
464-
</tr>
465-
</thead>
466-
<tbody>
467-
$wifi_list$
468-
</tbody>
469-
</table>
470-
</div>
471-
<div class="card-grid">
472-
<form name="refresh" action="/" method="POST">
473-
<input type ="submit" class="input-btn" name="refresh" value ="Refresh">
474-
</form>
475-
</div>
476385
<div class="card-grid">
477386
<div class="card">
478-
<form name="wifidata" action="/" method="POST">
387+
<form name="wifidata" action="/" method="POST" onsubmit="return validateKlipperForm()">
479388
<label class="ant-form-item-row">
480389
<span>Klipper IP:&nbsp</span>
481-
<input type="text" id ="klipper" name="klipper" $klipper$ maxlength="64" placeholder="1.2.3.4 or printer.local">
390+
<input type="text" id ="ip" name="ip" $ip$ maxlength="64" placeholder="1.2.3.4 or printer.local">
482391
</label>
483392
<label class="ant-form-item-row">
484393
<span>Klipper Port:&nbsp</span>
@@ -488,14 +397,48 @@ text-align: center;">
488397
<span>Tool ID:&nbsp</span>
489398
<input type="text" id ="tool" name="tool" $tool$ maxlength="6">
490399
</label>
491-
<input type ="submit" id="submitwifi" value ="Submit">
400+
<input type ="submit" id="submit-btn" value ="Submit">
492401
</form>
493402
</div>
494403
</div>
404+
<div id="modalOne" class="modal">
405+
<div class="modal-content">
406+
<div class="contact-form">
407+
<a class="close">&times;</a>
408+
<form class="modal_form" action="/" method="POST">
409+
<div>
410+
<input readonly id ="ssid" class="fname" type="text" name="ssid" placeholder="ssid" />
411+
<span></span>
412+
<input class="fname" type="text" name="password" placeholder="password" />
413+
<span></span>
414+
</div>
415+
<button type="submit" >Connect</button>
416+
</form>
417+
</div>
418+
</div>
419+
</div>
420+
<div class="table-container">
421+
<table>
422+
<thead>
423+
<tr>
424+
<th>SSID</th>
425+
<th>RSSI</th>
426+
<th>STATUS</th>
427+
</tr>
428+
</thead>
429+
<tbody>
430+
$wifi_list$
431+
</tbody>
432+
</table>
433+
</div>
434+
<form name="refresh" action="/" method="POST">
435+
<input type ="submit" class="refresh-btn" name="refresh" value ="Refresh">
436+
</form>
437+
495438
<div class="card-grid">
496439
<div class="card">
497-
<form name="wifimode" action="/" method="POST" onsubmit="return validateModeForm()">
498-
<select name="mode">
440+
<form name="wifimode" action="/" method="POST" onsubmit="return validateAPForm()">
441+
<select id ="mode" name="mode">
499442
<option value="ap" $ap$>AP</option>
500443
<option value="sta" $sta$>STA</option>
501444
<option value="apsta" $apsta$>AP+STA</option> <!--selected默认选择-->
@@ -512,17 +455,17 @@ text-align: center;">
512455
<span>Hostname:&nbsp</span>
513456
<input type="text" id ="hostname" name="hostname" $hostname$ maxlength="15">
514457
</label>
515-
<input type ="submit" id="submitwifi" value ="Submit">
458+
<input type ="submit" id="submit-btn" value ="Submit">
516459
</form>
517460
</div>
518461
</div>
519462
<div class="card-grid">
520-
<div class="card">
463+
<div class="card" style="flex-direction: column">
521464
<!-- <br><label id="FIRMWARE">Firmware</label><br><br><br> -->
522-
<a href="update"><input type="button" id="FWbtn" value ="Update FW"></a>
465+
<a href="update"><input type="submit" id="sys-btn" value ="Update Firmware"></a>
523466
<span style="width: 10px;"></span>
524467
<form name="Restart" action="/" method="POST" onsubmit="return validateRestartForm()">
525-
<input type ="submit" id="FWbtn" name="restart" value="Restart">
468+
<input type ="submit" style="background-color: #000000" id="sys-btn" name="restart" value="Restart">
526469
</form>
527470
</div>
528471
</div>

‎src/webserver.cpp‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ String knomi_html_processor(const String& var){
4747
value += wifi_scan.connected[i] ? "connected" : "";
4848
value += "</td> </tr>";
4949
}
50-
} else if (var == "klipper") {
50+
} else if (var == "ip") {
5151
String moonraker_ip = knomi_config.moonraker_ip;
5252
value = (moonraker_ip.isEmpty() ? "" : "value=") + moonraker_ip;
5353
} else if (var == "port") {
@@ -122,7 +122,7 @@ web_post_info_t web_post_info[] = {
122122
.require = WEB_POST_LOCAL_HOSTNAME,
123123
},
124124
{
125-
.name = "klipper",
125+
.name = "ip",
126126
.value = knomi_config.moonraker_ip,
127127
.v_len = sizeof(knomi_config.moonraker_ip),
128128
.require = WEB_POST_MOONRAKER,
@@ -213,6 +213,8 @@ void webserver_setup(void) {
213213
String sta_pwd = knomi_config.sta_pwd;
214214
request->send(200, "text/html", "SSID: " + sta_ssid + "<br>PWD: " + sta_pwd + \
215215
"<br>The BTT KNOMI will now attempt to connect to the specified network.<br>If it fails after 15s then this access point will be re-launched and you can connect to it to try again. <br><a href=\"/\">Return to Home Page</a>");
216+
} else if (post_require & WEB_POST_LOCAL_HOSTNAME){
217+
request->send(200, "text/html", "The hostname needs to be restarted before it takes effect.<br>Please return to the home page and manually restart. <br><a href=\"/\">Return to Home Page</a>");
216218
} else if (post_require & WEB_POST_RESTART){
217219
request->send(200, "text/html", "KNOMI is restarting, please wait for the restart to complete and re-establish the connection. <br><a href=\"/\">Return to Home Page</a>");
218220
} else if (post_require & WEB_POST_WIFI_REFRESH) {

0 commit comments

Comments
 (0)