Skip to content

Commit 92fb7c0

Browse files
clockspotclockspot
committed
wip: client code reorg was successful, except for small bugs
1 parent 5d31aeb commit 92fb7c0

File tree

2 files changed

+59
-49
lines changed

2 files changed

+59
-49
lines changed

‎formdev.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<!-- For developing and testing the HTML served by network-wifinina.cpp -->
22

3-
<!DOCTYPE html><html><head><title>Clock Settings</title><style>body { background-color: #eee; color: #222; font-family: -apple-system, sans-serif; font-size: 18px; margin: 1.5em; position: absolute; } a { color: #33a; } ul { padding-left: 9em; text-indent: -9em; list-style: none; } ul li { margin-bottom: 1.2em; } ul li * { text-indent: 0; } ul li label:first-child { display: inline-block; width: 8em; text-align: right; padding-right: 1em; font-weight: bold; } ul li.nolabel { margin-left: 9em; } #result { display: none; position: fixed; left: 0; top: 0; width: 100%; padding: 1.5em; box-sizing: border-box; text-align: center; background-color: #8c8; color: #020; } .unit { display: inline-block; } input[type='text'],input[type='submit'] { display: block; margin: 0.3em 0; font-size: 1em; } #wifi { vertical-align: top; display: inline-block; } .wep { display: none; } .wpa { display: block; } @media only screen and (max-width: 550px) { ul { padding-left: 0; text-indent: 0; } ul li label:first-child { display: block; width: auto; text-align: left; padding: 0; } ul li.nolabel { margin-left: 0; }} @media (prefers-color-scheme: dark) { body { background-color: #222; color: #ddd; } a { color: white; } #result { background-color: #373; color: white; } input[type='text'] { background-color: #444; color: #ddd; }} </style><meta charset='utf-8'><meta name='viewport' content='width=device-width, initial-scale=1'><script src='https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script><script type='text/javascript'>$(function(){ let target='http://192.168.1.66/'; $('a').click(function(e){ e.preventDefault(); timer = setTimeout(timedOut,120000); $.ajax({ url: target+$(this).attr('data-action') }).done(sr).fail(timedOut); }); function timedOut(){ $('body').html('Clock settings page has timed out. Please hold Select for 5 seconds to reactivate it, then <a href=\"./\">refresh</a>.'); } function sr(d){$('#result').html(d).stop().slideDown(300); hrTimer = setTimeout(hr,2000);} function hr(){$('#result').slideUp(300);} let timer = setTimeout(timedOut,120000); let hrTimer; $('#wifi input[type="radio"]').change(function(){ $('.wep, .wpa').hide(); $('.'+$(this).attr('id')).show(); $('#wgo').show(); }); $('#wifi input').on("input",function(){$('#wgo').show();}); $('#wifi').submit(function(){ $.ajax({url: target+$(this).attr('action'), type: 'GET', data: $(this).serialize()}).done(sr).fail(timedOut); return false; }); });</script></head><body><div id='result'></div><h2 style='margin-top: 0;'>Clock Settings</h2><ul>
3+
<!DOCTYPE html><html><head><title>Clock Settings</title><style>body { background-color: #eee; color: #222; font-family: -apple-system, sans-serif; font-size: 18px; margin: 1.5em; position: absolute; } a { color: #33a; } ul { padding-left: 9em; text-indent: -9em; list-style: none; } ul li { margin-bottom: 1.2em; } ul li * { text-indent: 0; } ul li label:first-child { display: inline-block; width: 8em; text-align: right; padding-right: 1em; font-weight: bold; } ul li.nolabel { margin-left: 9em; } #result { display: none; position: fixed; left: 0; top: 0; width: 100%; padding: 1.5em; box-sizing: border-box; text-align: center; background-color: #8c8; color: #020; } .unit { display: inline-block; } input[type='text'],input[type='submit'] { display: block; margin: 0.3em 0; font-size: 1em; } #wifi { vertical-align: top; display: inline-block; } .wep { display: none; } .wpa { display: block; } @media only screen and (max-width: 550px) { ul { padding-left: 0; text-indent: 0; } ul li label:first-child { display: block; width: auto; text-align: left; padding: 0; } ul li.nolabel { margin-left: 0; }} @media (prefers-color-scheme: dark) { body { background-color: #222; color: #ddd; } a { color: white; } #result { background-color: #373; color: white; } input[type='text'] { background-color: #444; color: #ddd; }} </style><meta charset='utf-8'><meta name='viewport' content='width=device-width, initial-scale=1'><script src='https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script><script type='text/javascript'>$(function(){ let target='http://192.168.1.66'; $('a').click(function(e){ e.preventDefault(); timer = setTimeout(timedOut,120000); $.ajax({ url: target+$(this).attr('data-action') }).done(sr).fail(timedOut); }); function timedOut(){ $('body').html('Clock settings page has timed out. Please hold Select for 5 seconds to reactivate it, then <a href=\"./\">refresh</a>.'); } function sr(d){$('#result').html(d).stop().slideDown(300); hrTimer = setTimeout(hr,2000);} function hr(){$('#result').slideUp(300);} let timer = setTimeout(timedOut,120000); let hrTimer; $('#wifi input[type="radio"]').change(function(){ $('.wep, .wpa').hide(); $('.'+$(this).attr('id')).show(); $('#wgo').show(); }); $('#wifi input').on("input",function(){$('#wgo').show();}); $('#wifi').submit(function(){ $.ajax({url: target+$(this).attr('action'), type: 'GET', data: $(this).serialize()}).done(sr).fail(timedOut); return false; }); });</script></head><body><div id='result'></div><h2 style='margin-top: 0;'>Clock Settings</h2><ul>
44
<li><label>WiFi</label><form id='wifi' action=''><span class='unit'><input type='radio' name='wifitype' value='wpa' id='wpa' checked/><label for='wpa'>WPA</label></span> <span class='unit'><input type='radio' name='wifitype' value='wep' id='wep'/><label for='wep'>WEP</label></span> <span class='unit'><input type='radio' name='wifitype' value='none' id='wnone'/><label for='wnone'>None</label></span><span class='wpa wep'><input type='text' id='wssid' name='wssid' placeholder='SSID (Network Name)' autocomplete='off'></span><span class='wpa'><input type='text' id='wpass' name='wpass' placeholder='Password' autocomplete='off' /></span><span class='wep'><input type='text' id='wki' name='wki' placeholder='Key Index' autocomplete='off' /><input type='text' id='wkey' name='wkey' placeholder='Key' autocomplete='off' /></span><input type='submit' id='wgo' name='wgo' style='display: none;' value='Save WiFi Settings' /></form>
55
<li><label>Last sync</label>As of page load time: [sync state]</li>
66
<li><label>Sync frequency</label><a href='#' data-action='/m'>Toggle sync frequency</a></li>

‎network-wifinina.cpp

Lines changed: 58 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -185,76 +185,86 @@ void checkClients(){
185185

186186
adminInputLast = millis();
187187

188-
String result = "";
189-
190188
String currentLine = ""; //we'll read the data from the client one line at a time
189+
190+
int requestCode = 0;
191+
191192
while (client.connected()) { // loop while the client's connected
192193
if (client.available()) { // if there's bytes to read from the client,
193194
char c = client.read();
194195
Serial.write(c); //DEBUG
195196

196197
/*
197-
Current approach:
198-
If the byte is a new line character
199-
If the line is blank, that's the end of the client HTTP request, so send a response
200-
If there was a result, just print the result
201-
Else render the page
202-
Else (line not blank, but is a newline)
198+
Proposed approach:
199+
If the byte is not a newline character
200+
Add it to Currentline unless it's a return character
201+
Else (it's a newline)
202+
If Currentline is not empty
203203
Clear Currentline
204-
Else (not a newline), add it to Currentline unless it's a return character
204+
Else (Currentline is empty), that was two newlines in a row, we're done, so send a response
205+
If there was a result, print that
206+
Otherwise render the page
205207
*/
206-
207208

208-
if (c == '\n') { // if the byte is a newline character
209-
210-
// if the current line is blank, you got two newline characters in a row.
211-
// that's the end of the client HTTP request, so send a response:
212-
if (currentLine.length() == 0) {
209+
if(c != '\n'){ //If the byte is not a newline character
210+
if(c != '\r') currentLine += c; //add the character to currentLine (except carriage returns)
211+
}
212+
else { //newline character: end of this line: do something with it
213+
if(currentLine != ""){ //the line had content
214+
//Inspect the end of the line to see if it was a command
215+
if (currentLine.startsWith("GET / HTTP")) requestCode = 0; //display the form //stopping place: this didn't work
216+
else if (currentLine.startsWith("GET /m")) requestCode = 1; //sync frequency
217+
else if (currentLine.startsWith("GET /n")) requestCode = 2; //packets
218+
else if (currentLine.startsWith("GET /b")) requestCode = 3; //brightness
219+
else requestCode = -1; //idk
220+
//Serial.print("requestCode is "); Serial.println(requestCode);
221+
//Clear the buffer for the next line of data
222+
currentLine = "";
223+
}
224+
else { //the line was empty – meaning we've just had two newline characters in a row – the end of the request - so act appropriately and send a reply
213225
// HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK)
214226
// and a content-type so the client knows what's coming, then a blank line:
215227
client.println("HTTP/1.1 200 OK");
216228
client.println("Content-type:text/html");
217229
client.println("Access-Control-Allow-Origin:*");
218230
client.println();
219-
220-
if(result!="") client.print(result); //If this is in response to a specific action request, just send the client the result message
221-
222-
else { //otherwise, render the entire page
223-
// the content of the HTTP response follows the header:
224-
client.print(F("<!DOCTYPE html><html><head><title>Clock Settings</title><style>body { background-color: #eee; color: #222; font-family: -apple-system, sans-serif; font-size: 18px; margin: 1.5em; position: absolute; } a { color: #33a; } ul { padding-left: 9em; text-indent: -9em; list-style: none; } ul li { margin-bottom: 1.2em; } ul li label { display: inline-block; width: 8em; text-align: right; padding-right: 1em; text-indent: 0; font-weight: bold; } ul li.nolabel { margin-left: 9em; } #result { display: none; position: fixed; left: 0; top: 0; width: 100%; padding: 1.5em; box-sizing: border-box; text-align: center; background-color: #8c8; color: #020; } @media only screen and (max-width: 550px) { ul { padding-left: 0; text-indent: 0; } ul li label { display: block; width: auto; text-align: left; padding: 0; } ul li.nolabel { margin-left: 0; }} @media (prefers-color-scheme: dark) { body { background-color: #222; color: #ddd; } a { color: white; } #result { background-color: #373; color: white; }}</style><meta charset='utf-8'><meta name='viewport' content='width=device-width, initial-scale=1'><script src='https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script><script type='text/javascript'>$(function(){ $('a').click(function(e){ e.preventDefault(); timer = setTimeout(timedOut,120000); $.ajax({ url: $(this).attr('data-action') }).done(function(d){$('#result').html(d).stop().slideDown(300); hideResultTimer = setTimeout(hideResult,2000);}).fail(timedOut); }); function timedOut(){ $('body').html('<p>Clock settings page has timed out. Please hold Select for 5 seconds to reactivate it, then <a href=\"./\">refresh</a>.</p>'); } function hideResult(){$('#result').slideUp(300);} let timer = setTimeout(timedOut,120000); let hideResultTimer; });</script></head><body><div id='result'></div><h2 style='margin-top: 0;'>Clock Settings</h2><ul>"));
225-
226-
client.print(F("<li><label>Last sync</label>As of page load time: ")); client.print(getLastSync()); client.print(F("</li>"));
227-
228-
client.print(F("<li><label>Sync frequency</label><a href='#' data-action='/m'>Toggle sync frequency</a></li>"));
229-
client.print(F("<li><label>Sync block</label><a href='#' data-action='/n'>Toggle blocking NTP packets</a></li>"));
230-
client.print(F("<li><label>Brightness</label><a href='#' data-action='/b'>Cycle brightness</a></li>"));
231-
client.print(F("<li><label>Version</label>"));
232-
//client.print(getSoftwareVersion());
233-
client.print(F("</li>"));
234-
client.print(F("</ul></body></html>"));
231+
switch(requestCode){
232+
case 0: //display the full page
233+
client.print(F("<!DOCTYPE html><html><head><title>Clock Settings</title><style>body { background-color: #eee; color: #222; font-family: -apple-system, sans-serif; font-size: 18px; margin: 1.5em; position: absolute; } a { color: #33a; } ul { padding-left: 9em; text-indent: -9em; list-style: none; } ul li { margin-bottom: 1.2em; } ul li label { display: inline-block; width: 8em; text-align: right; padding-right: 1em; text-indent: 0; font-weight: bold; } ul li.nolabel { margin-left: 9em; } #result { display: none; position: fixed; left: 0; top: 0; width: 100%; padding: 1.5em; box-sizing: border-box; text-align: center; background-color: #8c8; color: #020; } @media only screen and (max-width: 550px) { ul { padding-left: 0; text-indent: 0; } ul li label { display: block; width: auto; text-align: left; padding: 0; } ul li.nolabel { margin-left: 0; }} @media (prefers-color-scheme: dark) { body { background-color: #222; color: #ddd; } a { color: white; } #result { background-color: #373; color: white; }}</style><meta charset='utf-8'><meta name='viewport' content='width=device-width, initial-scale=1'><script src='https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script><script type='text/javascript'>$(function(){ $('a').click(function(e){ e.preventDefault(); timer = setTimeout(timedOut,120000); $.ajax({ url: $(this).attr('data-action') }).done(function(d){$('#result').html(d).stop().slideDown(300); hideResultTimer = setTimeout(hideResult,2000);}).fail(timedOut); }); function timedOut(){ $('body').html('<p>Clock settings page has timed out. Please hold Select for 5 seconds to reactivate it, then <a href=\"./\">refresh</a>.</p>'); } function hideResult(){$('#result').slideUp(300);} let timer = setTimeout(timedOut,120000); let hideResultTimer; });</script></head><body><div id='result'></div><h2 style='margin-top: 0;'>Clock Settings</h2><ul>"));
234+
235+
client.print(F("<li><label>Last sync</label>As of page load time: ")); client.print(getLastSync()); client.print(F("</li>"));
236+
237+
client.print(F("<li><label>Sync frequency</label><a href='#' data-action='/m'>Toggle sync frequency</a></li>"));
238+
client.print(F("<li><label>Sync block</label><a href='#' data-action='/n'>Toggle blocking NTP packets</a></li>"));
239+
client.print(F("<li><label>Brightness</label><a href='#' data-action='/b'>Cycle brightness</a></li>"));
240+
client.print(F("<li><label>Version</label>"));
241+
//client.print(getSoftwareVersion());
242+
client.print(F("</li>"));
243+
client.print(F("</ul></body></html>"));
244+
break;
245+
case 1: //sync frequency
246+
client.print(rtcChangeMinuteSync()? F("Now syncing every minute."): F("Now syncing every hour at minute 59."));
247+
break;
248+
case 2:
249+
client.print(networkToggleNTPTest()? F("Now preventing incoming NTP packets."): F("Now allowing incoming NTP packets."));
250+
break;
251+
case 3:
252+
client.print(F("Display brightness set to "));
253+
client.print(displayToggleBrightness());
254+
client.print(F("."));
255+
break;
256+
default:
257+
client.print(F("Error: unknown request.")); break;
235258
}
236-
237259
// The HTTP response ends with another blank line:
238260
client.println();
239261
// break out of the while loop:
240-
break; //breaks the while loop
241-
} else { // if you got a newline, then clear currentLine to read the next line
242-
currentLine = "";
243-
}
244-
//} //end end of the line
245-
} else if (c != '\r') { // if you got anything else but a carriage return character,
246-
currentLine += c; // add it to the end of the currentLine
247-
}
248-
249-
//Inspect the end of the line to see if it was a command
250-
if (currentLine.endsWith("GET /m")) result = (rtcChangeMinuteSync()? F("Now syncing every minute."): F("Now syncing every hour at minute 59.")); //TESTSyncEveryMinute
251-
else if (currentLine.endsWith("GET /n")) result = (networkToggleNTPTest()? F("Now preventing incoming NTP packets."): F("Now allowing incoming NTP packets."));
252-
else if (currentLine.endsWith("GET /b")){ result = F("Display brightness set to "); result+=displayToggleBrightness(); result+=F("."); }
253-
else if (currentLine.endsWith("GET /")){ result = ""; } //just display page
254-
else { result = currentLine; }
255-
262+
break;
263+
} //end empty line / end of request
264+
} //end newline character
256265
} //end if client available
257266
} //end while client connected
267+
258268
// close the connection:
259269
client.stop();
260270
Serial.println("client disconnected");

0 commit comments

Comments
 (0)