To put it more plainly: A client sending a url from HTML and receiving back a page of HTML will result in the new HTML being displayed.
But sending the same url from javascript and receiving back the same HTML does not refresh the page. Why? Now how do I refresh this page?
I started with the example
and modified from there. The hardware required is just the board as in the example except the LED is on D11 not D2.
The setup is the MKR1010 as the server and any tablet or phone as client with direct communication (not via the internet).
As in the example every user action results in a url sent to the server and the server resends all the HTML including changes in values that may have happened and the client screen shows the new values. I attach the GcaFront.ino file and include line numbers in the details below.
/*
WiFi Web Server for front of GCA Garratt.
This sketch will connect your WiFi module then print the IP address
to the Serial monitor.
From there, you can open that address in a web browser to control the GCA.
For example if the IP address of your board is yourAddress:
http://yourAddress/H turns the LED on
http://yourAddress/L turns it off
For board with NINA module Arduino MKR WiFi 1010.
*/
//#include <SPI.h>
#include "WiFiNINA.h"
#include "arduino_secrets.h"
///////please enter your sensitive data in the Secret tab/arduino_secrets.h
char ssid[] = SECRET_SSID; // your network SSID (name)
char pass[] = SECRET_PASS; // your network password (use for WPA, or use as key for WEP)
int keyIndex = 0; // your network key Index number (needed only for WEP)
int status = WL_IDLE_STATUS;
WiFiServer server(80);
#include <Arduino.h>
#include "Adafruit_ZeroTimer.h"
#include "SFlash.h"
#include "SamdRegs.h"
int iPosMin[8]; //Working minimum in percent full scale.
int iPosMax[8]; //Working maxmum in percent full scale.
int iPosSet[8]; //Percent full scale.
int iPosMIN[8] = {15,15,15,33,15,15,15}; //Default minimum.
int iPosMAX[8] = {88,90,99,70,95,88,90}; //Default maxmum.
int i1,i2; //Short term counters.
void InitLevels()
{
for(i1=0; i1<8; i1++) //Put default levels in working arrays.
{
iPosMin[i1] = iPosMIN[i1];
iPosMax[i1] = iPosMAX[i1];
iPosSet[i1] = (iPosMin[i1]+iPosMax[i1])/2;
}
delay(1);
}
void InitWiFi()
{
// check for the WiFi module:
if(WiFi.status() == WL_NO_MODULE)
{
Serial.println("Connection failed!");
while(true); // don't continue
}
String fv = WiFi.firmwareVersion();
if(fv < WIFI_FIRMWARE_LATEST_VERSION) Serial.println("Please upgrade the firmware");
Serial.print("Creating access point named: ");
Serial.println(ssid);
// Attempt to create open Wifi network:
status = WiFi.beginAP(ssid,pass);
if(status != WL_AP_LISTENING)
{
Serial.println("Creating access point failed");
while(true);
}
else
{
Serial.print("SSID: ");
Serial.println(ssid); // print the network name (SSID);
// Connect to WPA/WPA2 network. Change this line if using open or WEP network:
// wait 10 seconds for connection:
}
Serial.print(" Delay 10 seconds. ");
for(i1=0; i1<20; i1++) //Let WiFi settle.
{
Serial.print(i1);
if(i1&1) digitalWrite(11,LOW);
else digitalWrite(11,HIGH);
delay(1000-50*i1);
}
Serial.println("");
server.begin(); // start the web server on port 80
printWifiStatus(); // you're connected now, so print out the status
}
void setup()
{
pinMode(LED_BUILTIN, OUTPUT); //Initialize digital pin LED_BUILTIN as an output.
pinMode(11, OUTPUT); // set the LED pin mode
Serial.begin(9600); // initialize serial communication
for(i1=0; i1<10; i1++)
{
delay(100);
if(i1&1) digitalWrite(11,LOW);
else digitalWrite(11,HIGH);
}
InitWiFi();
InitLevels();
Serial.println(" Initial slider levels set.");
Serial.println("");
Serial.println("");
}
uint16_t cChan = 0;
void loop()
{
String str1 = "";
String str2 = "";
String strGet = "";
//Loop always listens for client.
WiFiClient client = server.available(); //Listen for incoming clients.
if(client)
{ //If client arrives
Serial.println("new client"); // print a message on serial port.
String currentLine = ""; //Make a String to hold client data.
while(client.connected())
{ //Loop while the client's connected.
if(client.available())
{ //If byte available from the client
char c = client.read(); // read it.
// Serial.write(c); //Print it out the serial monitor.
if(c == '\n')
{ //If the byte is a newline character
if(currentLine.length() == 0)
{ // and the line is empty that's the end of the client HTTP request.
Serial.print("GET =:");
Serial.println(strGet);
Serial.println("Sending HTML.");
//HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK)
//and a content-type so the client knows what's coming, then a blank line:
client.println("HTTP/1.1 200 OK");
client.println("Content-type:text/html");
client.println();
// the content of the HTTP response follows the header:
client.println("<head>"); //Start head-------------------------------------------------
client.println("<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">");
client.println("<style>"); //Start style------------------------------------------------
client.println("table, td, th {");
client.println(" border: 1px solid black;");
client.println(" border-collapse: collapse; }");
client.println(".slidecontainer { width: 100%;}"); //slidecontainer-------------------CSS
client.println(".sliderRg {");
client.println(" -webkit-appearance: none;");
client.println(" width: 60%;");
client.println(" height: 10px;");
client.println(" background: #d3ffd3;");
client.println(" outline: 1px solid black;");
client.println(" opacity: 0.7;");
client.println(" -webkit-transition: .2s;");
client.println(" transition: opacity .2s;");
client.println("}");
// client.println(".slidecontainer { width: 100%;}");
client.println(".sliderRv {");
client.println(" -webkit-appearance: none;");
client.println(" width: 60%;");
client.println(" height: 10px;");
client.println(" background: #33ffd3;");
client.println(" outline: 1px solid black;");
client.println(" opacity: 0.7;");
client.println(" -webkit-transition: .2s;");
client.println(" transition: opacity .2s;");
client.println("}");
client.println(".bMin {"); //button details-------------------
// client.println(" display: block;");
client.println(" width: 18%;");
client.println(" border: none;");
client.println(" background-color: lime;");
client.println(" padding: 0px 0px;");
client.println(" font-size: 12px;");
client.println(" cursor: pointer;");
client.println(" text-align: center;");
client.println(" }");
client.println(".bMax {");
// client.println(" display: block;");
client.println(" width: 18%;");
client.println(" border: none;");
client.println(" background-color: #ffcf3f;");
client.println(" padding: 0px 0px;");
client.println(" font-size: 12px;");
client.println(" cursor: pointer;");
client.println(" text-align: center;");
client.println(" }");
client.println(".bVar {");
// client.println(" display: block;");
client.println(" width: 6%;");
client.println(" border: none;");
client.println(" background-color: white;");
client.println(" padding: 0px 0px;");
client.println(" font-size: 12px;");
client.println(" cursor: pointer;");
client.println(" text-align: center;");
client.println(" }");
client.println(".bVar1 {");
// client.println(" display: block;");
client.println(" width: 42%;");
client.println(" border: 1 px solid black;");
client.println(" background-color: white;");
client.println(" padding: 0px 0px;");
client.println(" font-size: 12px;");
client.println(" cursor: pointer;");
client.println(" text-align: center;");
client.println(" }");
client.println("</style>"); //End style------------------------------------------------
client.println("<script>"); //Start script---------------------------------------------
client.println("strTest = new String(\"Change text\")");
str2 = "\" to iPulse = ";
str2 += c;
str2 += "\"";
// Serial.println(str2);
client.println("strTest = strTest.concat("+str2+")");
client.println("function TryIt() {");
client.println(" document.getElementById(\"TestText\").innerHTML = strTest");
client.println(" var request = new XMLHttpRequest();");
client.println(" }");
client.println("</script>"); //End script------------------------------------------------
client.println("</head>"); //End header------------------------------------------------
client.println("<body>"); //Start Body------------------------------------------------
client.println("<b><h2>GCA Garratt 2-6-2+2-6-2</h2></b>");
client.println("<table style=\"width:100%\">");
client.println(" <tr>");
client.println(" <th><button style=\"color: green;\"> Regulator % </button></th>");
client.println(" </tr>");
client.println(" <tr>");
/*232*/ str1 = " <td><button type=\"button\" class=\"bMin\"><a href=\"/PreRg\">\<--</a></button>"; //href=/ is current URL.
str1 += "<class=\"slidecontainer\"><input type=\"range\" min=\"";
str1 += (signed char)iPosMin[0]%0xff;
str1 += "\" max=\"";
str1 += (signed char)iPosMax[0]%0xff;
str1 += "\" value=\"";
str1 += (signed char)iPosSet[0]%0xff;
str1 += "\" class=\"sliderRg\" id=\"myRangeRg\">";
/*240*/ str1 += "<button type=\"button\" class=\"bMax\"><a href=\"/NxtRg\">--\></a></button></td>";
client.println(str1); //First button sends http://192.168.4.1/PreRg to server (Arduino).
client.println("<p>ValueRg: <span id=\"demoRg\"></span> ValueRv: <span id=\"demoRv\"></span></p>");
client.println(" </tr>");
client.println(" <tr>");
str1 = " <td>";
str1 += " <button type=\"button\" class=\"bVar\"> </button>";
str1 += " <button type=\"button\" class=\"bMin\">";
str1 += (signed char)iPosMin[0]%0xff;
str1 += "</button>";
str1 += " <button type=\"button\" class=\"bVar1\">";
str1 += (signed char)iPosSet[0]%0xff;
str1 += "</button>";
str1 += " <button type=\"button\" class=\"bMax\">";
str1 += (signed char)iPosMax[0]%0xff;
str1 += "</button>";
str1 += " <button type=\"button\" class=\"bVar\"> </button>";
str1 += " </td>";
client.println(str1);
Serial.println(str1);
client.println(" </tr>");
client.println(" <tr>");
client.println(" <th><button style=\"color: green;\"> Reverser % </button></th>");
client.println(" </tr>");
client.println(" <tr>");
str1 = " <td><button type=\"button\" class=\"bMin\"><a href=\"/PreRv\">\<--</a></button>"; //href=/ is current URL.
str1 += "<class=\"slidecontainer\"><input type=\"range\" min=\"";
str1 += (signed char)iPosMin[1]%0xff;
str1 += "\" max=\"";
str1 += (signed char)iPosMax[1]%0xff;
str1 += "\" value=\"";
str1 += (signed char)iPosSet[1]%0xff;
str1 += "\" class=\"sliderRv\" id=\"myRangeRv\">";
/*274*/ str1 += "<button type=\"button\" class=\"bMax\"><a href=\"/SliderRv=60\">--\></a></button></td>"; //href=/ is current URL.
client.println(str1);
client.println(" </tr>");
client.println(" <tr>");
str1 = (" <td>");
str1 += " <button type=\"button\" class=\"bVar\"> </button>";
str1 += " <button type=\"button\" class=\"bMin\">";
str1 += (signed char)iPosMin[1]%0xff;
str1 += "</button>";
str1 += " <button type=\"button\" class=\"bVar1\">";
str1 += (signed char)iPosSet[1]%0xff;
str1 += "</button>";
str1 += " <button type=\"button\" class=\"bMax\">";
str1 += (signed char)iPosMax[1]%0xff;
str1 += "</button>";
str1 += " <button type=\"button\" class=\"bVar\"> </button>";
str1 += (" </td>");
client.println(str1);
client.println(" </tr>");
/*295*/ client.println("<script>"); //Start script---------------------------------------------
client.println("var sliderRg = document.getElementById(\"myRangeRg\");");
client.println("var outputRg = document.getElementById(\"demoRg\");");
client.println("outputRg.innerHTML = sliderRg.value;");
client.println("sliderRg.oninput = function() {");
client.println(" outputRg.innerHTML = this.value; ");
client.println(" var requestRg = new XMLHttpRequest();");
/*302*/ client.println(" var urlRg = \"http://192.168.4.1/SliderRg=\"+sliderRg.value;");
client.println(" requestRg.open(\"GET\",urlRg,true);");
client.println(" requestRg.send();");
client.println(" }");
// client.println("</script>"); //End script------------------------------------------------
// client.println("<script>"); //Start script---------------------------------------------
client.println("var sliderRv = document.getElementById(\"myRangeRv\");");
client.println("var outputRv = document.getElementById(\"demoRv\");");
client.println("outputRv.innerHTML = sliderRv.value;");
client.println("sliderRv.oninput = function() {");
client.println(" outputRv.innerHTML = this.value; ");
client.println(" var requestRv = new XMLHttpRequest();");
client.println(" var urlRv = \"http://192.168.4.1/SliderRv=\"+sliderRv.value;");
client.println(" requestRv.open(\"GET\",urlRv,true);");
client.println(" requestRv.send();");
client.println(" }");
client.println("</script>"); //End script------------------------------------------------
client.print("<p id=\"TestText\">Initial text.</p>");
client.print("<h2><button type=\"button\" class=\"bVar1\" onclick=\"TryIt()\">Try it</button></h2>");
client.println("</body>"); //End Body------------------------------------------------
client.println(); // The HTTP response ends with another blank line.
Serial.println("HTML sent.");
break;
}
else
{
currentLine = "";
}
}
else if(c=='\r')
{ //End of a line.
Serial.print("Received: ");
Serial.println(currentLine);
if(currentLine.startsWith("GET /"))
{
Serial.print("GOT: ");
strGet = currentLine;
Serial.println(strGet);
strGet.remove(0,5);
Serial.println(strGet);
if(strGet.startsWith("PreRg"))
{
digitalWrite(11, LOW);
iPosSet[0] -= 5;
}
else if(strGet.startsWith("NxtRg"))
{
digitalWrite(11, LOW);
iPosSet[0] += 5;
}
else if(strGet.startsWith("PreRv"))
{
digitalWrite(11, LOW);
iPosSet[1] -= 5;
}
else if(strGet.startsWith("NxtRv"))
{
digitalWrite(11, LOW);
iPosSet[1] += 5;
}
else if(strGet.startsWith("SliderRg="))
{
digitalWrite(11, LOW);
str1 = strGet;
Serial.println(str1);
str1.remove(0, 9);
Serial.println(str1);
/*372*/ iPosSet[0] = (signed char)str1.toInt();
Serial.println(iPosSet[0]);
}
else if(strGet.startsWith("SliderRv="))
{
digitalWrite(11, LOW);
str1 = strGet;
Serial.println(str1);
str1.remove(0, 9);
Serial.println(str1);
iPosSet[1] = (signed char)str1.toInt();
Serial.println(iPosSet[1]);
}
}
}
else
{ //If not carriage return or line feed
currentLine += c; // add c to the end of currentLine.
}
}
}
client.stop(); // close the connection.
Serial.println("Client disconnected ------------------");
Serial.println("");
Serial.println("");
}
}
void printWifiStatus()
{
// print the SSID of the network you're attached to:
Serial.print("SSID: ");
Serial.println(WiFi.SSID());
// print your board's IP address:
IPAddress ip = WiFi.localIP();
// Serial.print("IP Address: ");
// Serial.println(ip);
// print the received signal strength:
long rssi = WiFi.RSSI();
// Serial.print("signal strength (RSSI):");
// Serial.print(rssi);
// Serial.println(" dBm");
// print where to go in a browser:
Serial.print("To see this page in action, open a browser to http://");
Serial.println(ip);
}
Nearly everything I need works except when using sliders instead of buttons for the user input I have a problem.
Now the url sent to the server has to be sent using javascript (line 295) insted of directly from the HTML (line 232).
The script does send the http:// 192.168.4.1/SliderRg=37 (or whatever the slidervalue is)(line 302). This does correctly change my c code variable iPosSet[0] to 37 (line 372).
The problem though is that the client screen does not get refreshed.
Why not???? How can I fix it????
If I use a button to send http:// 192.168.4.1/SliderRv=60 itworks correctly (line 274).
If I type http:// 192.168.4.1/SliderRv=60 (or similar) in the browser window it works correctly.
If I use a button to send http:// 192.168.4.1/NxtRg (or similar)(line 240) the screen updates correctly including the effect of any url sent by the script.
Note1: I am completely new to javascript and web programmingand and have only the internet to tell me how to do it.
Note2: As I am not allowed to place many links in the post I have added a space after each http:// in the text above. This is not in my actual source code.
Below is the some of the serial monitor output that might be of help.
There is a significant difference for the communications that results in a client screen update and the one that does not.
-----------------The next section gets output when a http:// 192.168.4.1/PreRg is received:--------------
new client
Received: GET /PreRg HTTP/1.1
GOT: GET /PreRg HTTP/1.1
PreRg HTTP/1.1
Received: Host: 192.168.4.1
Received: Connection: keep-alive
Received: Upgrade-Insecure-Requests: 1
Received: User-Agent: Mozilla/5.0 (Linux; Android 11; SAMSUNG SM-N980F) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/15.0 Chrome/90.0.4430.210 Mobile Safari/537.36
Received: Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
Received: Referer: http://192.168.4.1/PreRg
Received: Accept-Encoding: gzip, deflate
Received: Accept-Language: en-IE,en-US;q=0.9,en;q=0.8
Received:
GET =:PreRg HTTP/1.1
Sending HTML.
PreRg HTTP/1.1
<td> <button type="button" class="bVar"> </button> <button type="button" class="bMin">15</button> <button type="button" class="bVar1">80</button> <button type="button" class="bMax">88</button> <button type="button" class="bVar"> </button> </td>
HTML sent.
Client disconnected ------------------
-----------------The next section follows the above section automatically:--------------
new client
Received: GET /favicon.ico HTTP/1.1
GOT: GET /favicon.ico HTTP/1.1
favicon.ico HTTP/1.1
Received: Host: 192.168.4.1
Received: Connection: keep-alive
Received: User-Agent: Mozilla/5.0 (Linux; Android 11; SAMSUNG SM-N980F) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/15.0 Chrome/90.0.4430.210 Mobile Safari/537.36
Received: Accept: image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8
Received: Referer: http://192.168.4.1/PreRg
Received: Accept-Encoding: gzip, deflate
Received: Accept-Language: en-IE,en-US;q=0.9,en;q=0.8
Received:
GET =:favicon.ico HTTP/1.1
Sending HTML.
favicon.ico HTTP/1.1
<td> <button type="button" class="bVar"> </button> <button type="button" class="bMin">15</button> <button type="button" class="bVar1">80</button> <button type="button" class="bMax">88</button> <button type="button" class="bVar"> </button> </td>
HTML sent.
Client disconnected ------------------
---------------The next section gets output when a http:// 192.168.4.1/SliderRg= is received:------------
new client
Received: GET /SliderRg=30 HTTP/1.1
GOT: GET /SliderRg=30 HTTP/1.1
SliderRg=30 HTTP/1.1
SliderRg=30 HTTP/1.1
30 HTTP/1.1
30
Received: Host: 192.168.4.1
Received: Connection: keep-alive
Received: User-Agent: Mozilla/5.0 (Linux; Android 11; SAMSUNG SM-N980F) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/15.0 Chrome/90.0.4430.210 Mobile Safari/537.36
Received: Accept: */*
Received: Referer: http://192.168.4.1/PreRg
Received: Accept-Encoding: gzip, deflate
Received: Accept-Language: en-IE,en-US;q=0.9,en;q=0.8
Received:
GET =:SliderRg=30 HTTP/1.1
Sending HTML.
SliderRg=30 HTTP/1.1
<td> <button type="button" class="bVar"> </button> <button type="button" class="bMin">15</button> <button type="button" class="bVar1">30</button> <button type="button" class="bMax">88</button> <button type="button" class="bVar"> </button> </td>
HTML sent.
Client disconnected ------------------
---------------------------------No automatic additional section:-------------------------