- Fri Apr 22, 2016 4:50 pm
#46024
I have been recently learning how to program in Arduino to host a HTML/CSS/Javascript webpage on an Adafruit HUZZAH ESP8266 breakout chip, so please forgive me if my methods here are completely off.
So I'm using ajax to update a few pressure gauge values on a page and it works for a little while but eventually I just get ERR_CONNECTION_TIMED_OUT.
I get this all the time, especially when I'm just starting the server up and if I reset the wifi card enough times eventually it seems to load just fine but
it's problematic and really unstable.
I've also noticed that it seems that the ESP8266 can only handle one user on it at a time, and once I try to connect from another computer/phone it crashes the server and I have to hit the reset button to get it working on that new host.
Can someone help me understand if I'm just doing ajax in a really inefficient way or why this is happening?
So I'm using ajax to update a few pressure gauge values on a page and it works for a little while but eventually I just get ERR_CONNECTION_TIMED_OUT.
I get this all the time, especially when I'm just starting the server up and if I reset the wifi card enough times eventually it seems to load just fine but
it's problematic and really unstable.
I've also noticed that it seems that the ESP8266 can only handle one user on it at a time, and once I try to connect from another computer/phone it crashes the server and I have to hit the reset button to get it working on that new host.
Can someone help me understand if I'm just doing ajax in a really inefficient way or why this is happening?
Code: Select all
#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <Wire.h>
#define LED_PIN 15 // This example assumes you have a LED connected to pin 15
WiFiServer server(80);
WiFiClient client;
String HTTP_req;
String req;
double test = 42;
String LEDstatus = "off";
uint8_t rxBuff[256];
uint8_t som = 0x11;
uint8_t eom = 0x12;
uint8_t subsys;
uint8_t receivedSubsys;
uint8_t rx_byte = 0x00;
uint8_t messageLength = 0;
uint8_t receivedMessageLength = 0;
uint8_t messageContent;
uint8_t serialCurrent;
int initialCounter = 0;
boolean messageBegun = false;
boolean messageInProgress = false;
int currNumRefresh = 0;
int currPressureC = 0;
int currPressureD = 0;
int currPressureE = 0;
int currFluid = 0;
void switchLEDon() {
//Serial.println("TEST LED ON");
int ledStatusLength = 1;
subsys = 0x13;
//Account for the end of message
messageLength = ledStatusLength + 2;
messageContent = 1;
Serial.write(som);
Serial.write(messageLength);
Serial.write(subsys);
Serial.write(messageContent);
Serial.write(eom);
//Serial.println("");
//Serial.println("TURN LED ON|");
LEDstatus = "on";
} //end switchLEDon
void switchLEDoff() {
int ledStatusLength = 1;
subsys = 0x13;
//Account for the end of message
messageLength = ledStatusLength + 2;
messageContent = 0;
Serial.write(som);
Serial.write(messageLength);
Serial.write(subsys);
Serial.write(messageContent);
Serial.write(eom);
//Serial.println("");
//Serial.println("TURN LED OFF|");
LEDstatus = "off";
} //end switchLEDoff
void sendNum(WiFiClient cl) {
cl.print("Test: ");
cl.print(currNumRefresh);
}
void setPressureC(WiFiClient cl) {
/*
currPressureC += 22;
if(currPressureC > 180)
{
currPressureC -= 180;
}
*/
//cl.print("<script>currPressureTest = '");
cl.print(currPressureC);
//cl.print("';</script>");
/*
Serial.print("Pressure Test: ");
Serial.println(currPressure);
*/
}
void setPressureD(WiFiClient cl) {
/*
currPressureD += 22;
if(currPressureD > 180)
{
currPressureD -= 180;
}
*/
//cl.print("<script>currPressureTest = '");
cl.print(currPressureD);
//cl.print("';</script>");
/*
Serial.print("Pressure Test: ");
Serial.println(currPressure);
*/
}
void setPressureE(WiFiClient cl) {
/*
currPressureE += 22;
if(currPressureE > 180)
{
currPressureE -= 180;
}
*/
//cl.print("<script>currPressureTest = '");
cl.print(currPressureE);
//cl.print("';</script>");
/*
Serial.print("Pressure Test: ");
Serial.println(currPressure);
*/
}
void setFluid(WiFiClient cl) {
currFluid += 22;
if(currFluid > 100)
{
currFluid -= 100;
}
//cl.print("<script>currPressureTest = '");
cl.print(currFluid);
//cl.print("';</script>");
/*
Serial.print("Pressure Test: ");
Serial.println(currPressure);
*/
}
void setup() {
Serial.begin(115200);
pinMode(LED_PIN, OUTPUT);
WiFi.begin(SSID, pass);
while (WiFi.status() != WL_CONNECTED)
{
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.println("WiFi connected");
// Start the server
server.begin();
Serial.println("Server started");
Serial.println(WiFi.localIP());
}
void loop() {
//Communication Protocol
if(Serial.available() > 0)
{
//Serial.print("SERIAL.AVAILABLE: ");
//Serial.println(Serial.available());
//delay(1000);
if(initialCounter == 0)
{
rx_byte = Serial.read();
/*
//Print Start of Message
Serial.print("0x");
if(rx_byte<0x10)
{
Serial.print("0");
}
Serial.println(rx_byte, HEX);
*/
//Serial.println(rx_byte, BIN);
//Serial.println(rx_byte);
initialCounter++;
}
if((!messageBegun) && (rx_byte == som))
{
messageBegun = true;
//Serial.println("MESSAGE BEGUN TRUE");
} //end if (messageInProgress && rx_byte)
if((messageBegun) && (!messageInProgress))
{
serialCurrent = Serial.available();
if(serialCurrent > 0)
{
receivedMessageLength = (uint8_t)Serial.read();
/*
Serial.print("MESSAGE LENGTH: ");
Serial.println(receivedMessageLength);
*/
messageBegun = false;
messageInProgress = true;
//Serial.println("MESSAGE IN PROGRESS TRUE");
} //end if (serialCurrent)
} //end if (messageBegun && messageInProgress)
if(messageInProgress)
{
serialCurrent = Serial.available();
if(serialCurrent >= receivedMessageLength)
{
Serial.readBytes(rxBuff, receivedMessageLength);
if((byte)rxBuff[receivedMessageLength-1] != eom)
{
//Serial.println("ERROR");
//Serial.write(Serial.read());
} //end if (rxBuff != eom)
else
{
messageInProgress = false;
for(int i=0; i<receivedMessageLength; i++)
{
if(rxBuff[i] == eom)
{
/*
//Print End of Message
Serial.print("0x");
if(rx_byte<0x10)
{
Serial.print("0");
}
Serial.println(rxBuff[i], HEX);
*/
initialCounter = 0;
receivedMessageLength = 0;
} //end if
else if(i == 0)
{
receivedSubsys = rxBuff[i];
/*
//Print Subsystem
Serial.print("0x");
if(rx_byte<0x10)
{
Serial.print("0");
}
Serial.println(rxBuff[i], HEX);
*/
} //end if
else
{
if(receivedSubsys == 0x14)
{
currNumRefresh = rxBuff[i];
} //end if
else if(receivedSubsys == 0x15)
{
currPressureC = rxBuff[i];
} //end else if
else if(receivedSubsys == 0x16)
{
currPressureD = rxBuff[i];
} //end else if
else if(receivedSubsys == 0x17)
{
currPressureE = rxBuff[i];
} //end else if
} //end else
} //end for
} //end else
} //end if (serialCurrent)
} //end if (messageInProgress)
} //end if (Serial.available)
WiFiClient client = server.available();
if (client) {
boolean currentLineIsBlank = true;
String currentLine = "";
/*
if(digitalRead(LED_PIN))
{
LEDstatus = "on";
}
else if(!digitalRead(LED_PIN))
{
LEDstatus = "off";
}
*/
while (client.connected()) {
if (client.available()) {
char c = client.read();
HTTP_req += c;
//test++;
// Check to see if the client request was "GET /H" or "GET /L":
/*
if (HTTP_req.indexOf("/H") != -1) {
digitalWrite(LED_PIN, HIGH); // GET /H turns the LED on
LEDstatus = "on";
} //end if (/H)
else if(HTTP_req.indexOf("/L") != -1){
digitalWrite(LED_PIN, LOW); // GET /L turns the LED off
LEDstatus = "off";
} //end if (/L)
*/
if (c == '\n' && currentLineIsBlank)
{
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/html");
client.println("Connection: keep-alive");
client.println();
//LED Functions
if (HTTP_req.indexOf("ajax_LED_switch_on") > -1) {
switchLEDon();
}
else if(HTTP_req.indexOf("ajax_LED_switch_off") > -1) {
switchLEDoff();
}
//Num Functions
else if (HTTP_req.indexOf("ajax_num_switch") > -1) {
sendNum(client);
}
else if(HTTP_req.indexOf("ajax_set_pressure_c") > -1) {
setPressureC(client);
}
else if(HTTP_req.indexOf("ajax_set_pressure_d") > -1) {
setPressureD(client);
}
else if(HTTP_req.indexOf("ajax_set_pressure_e") > -1) {
setPressureE(client);
}
else if(HTTP_req.indexOf("ajax_set_fluid") > -1) {
setFluid(client);
}
else {
client.println("<!DOCTYPE html>");
client.println("<html>");
client.println("<head>");
client.println("<title>Adafruit HUZZAH ESP8266</title>");
client.println("<style type='text/css'>");
//Styles for on/off switch
client.println(".onoffswitch { position: relative; width: 90px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none; }");
client.println(".onoffswitch-checkbox { display: none; }");
client.println(".onoffswitch-label { display: block; overflow: hidden; cursor: pointer; border: 2px solid #999999; border-radius: 20px; }");
client.println(".onoffswitch-inner { display: block; width: 200%; margin-left: -100%; transition: margin 0.3s ease-in 0s;}");
client.println(".onoffswitch-inner:before, .onoffswitch-inner:after { display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 30px; font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold; box-sizing: border-box; }");
client.println(".onoffswitch-inner:before { content: 'ON'; padding-left: 10px; background-color: #34A7C1; color: #FFFFFF; }");
client.println(".onoffswitch-inner:after { content: 'OFF'; padding-right: 10px; background-color: #EEEEEE; color: #999999; text-align: right; }");
client.println(".onoffswitch-switch { display: block; width: 18px; margin: 6px; background: #FFFFFF; position: absolute; top: 0; bottom: 0; right: 56px; border: 2px solid #999999; border-radius: 20px; transition: all 0.3s ease-in 0s; }");
client.println(".onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner { margin-left: 0; }");
client.println(".onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch { right: 0px; }");
//Styles for Pressure Bar Gauge
client.println(".pressureRow{ width: 100%; height: 200px; }");
client.println(".pressureContainer{ width:400px; height:200px; position: relative; overflow: hidden; text-align: center; float:left; display:block; }");
client.println(".gauge-a,.fluid-a{ z-index: 1; position: absolute; background-color: rgba(255,255,255,.2); width: 400px; height: 200px; top: 0%; border-radius:250px 250px 0px 0px; }");
client.println(".gauge-b{ z-index: 3; position: absolute; background-color: #222; width: 250px; height: 125px; top: 75px; margin-left: 75px; margin-right: auto; border-radius:250px 250px 0px 0px ; }");
client.println(".gauge-c,.gauge-d,.gauge-e{ z-index: 2; position: absolute; background-color: #5664F9; width: 400px; height: 200px; top: 200px; margin-left: auto; margin-right: auto; border-radius:0px 0px 200px 200px ; transform-origin:center top; transition: all 1.3s ease-in-out; }");
client.println(".gauge-data{ z-index: 4; color: white; font-size: 1.5em; line-height: 25px; position: absolute; width: 400px; height: 200px; top: 90px; margin-left: auto; margin-right: auto; transition: all 1s ease-out; }");
//Styles for Fluid Level Container
client.println(".fluidContainer { float:left; position:relative; margin-top: 180px; display:block; }"); //clear:both;
client.println("meter { margin: 0 auto 4.5em; width: 300px; height: 50px; display: block; -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -o-transform: rotate(270deg); transform: rotate(270deg); }");
client.println("meter::-webkit-meter-optimum-value{ background: green;}");
client.println("meter::-webkit-meter-suboptimum-value{ background: red;}");
client.println("meter::-webkit-meter-even-less-good-value{ background: yellow;}");
client.println(".fluid-data { background: #222222; color:white; font-size: 1.5em; width:120px; margin-left:175px; }");
client.println("</style>");
client.println("<script>");
client.println("var currPressureTest = 0;");
client.println("var currFluidTest = 0;");
client.println("function setFluid(){");
client.println("nocache = \"&nocache=\"+ Math.random() * 1000000;");
client.println("var request = new XMLHttpRequest();");
client.println("request.onreadystatechange = function() {");
client.println("if (this.readyState == 4) {");
client.println("if (this.status == 200) {");
client.println("if (this.responseText != null) {");
client.println("currFluidTest = this.responseText;");
client.println("var fluidValue = document.querySelector('.fluidMeter');");
client.print("fluidValue.value = this.responseText;");
client.println("var fluidText = this.responseText;");
client.println("document.getElementById(\"fluidPercent\").innerHTML = fluidText + '%';");
client.println("}}}}");
client.println("request.open(\"GET\", \"ajax_set_fluid\" + nocache, true);");
client.println("request.send(null);");
client.println("setTimeout('setFluid()', 5000);");
client.println("}");
client.println("function setPressureC(){");
client.println("nocache = \"&nocache=\"+ Math.random() * 1000000;");
client.println("var request = new XMLHttpRequest();");
client.println("request.onreadystatechange = function() {");
client.println("if (this.readyState == 4) {");
client.println("if (this.status == 200) {");
client.println("if (this.responseText != null) {");
client.println("currPressureTest = this.responseText;");
client.println("var pressureValue = document.querySelector('.gauge-c');");
client.println("pressureValue.style.transform = 'rotate('+ currPressureTest +'deg)';");
client.println("var pressureText = (((this.responseText)/180)*100).toFixed(0);");
client.println("document.getElementById(\"pressurePercentC\").innerHTML = pressureText + '%';");
client.println("if(pressureText > 75){");
client.println("pressureValue.style.background = 'red';");
client.println("}");
client.println("else if(pressureText > 25 && pressureText < 75){");
client.println("pressureValue.style.background = '#5664F9';");
client.println("}");
client.println("else if(pressureText < 25){");
client.println("pressureValue.style.background = 'red';");
client.println("}");
client.println("}}}}");
client.println("request.open(\"GET\", \"ajax_set_pressure_c\" + nocache, true);");
client.println("request.send(null);");
client.println("setTimeout('setPressureC()', 5000);");
client.println("}");
client.println("function setPressureD(){");
client.println("nocache = \"&nocache=\"+ Math.random() * 1000000;");
client.println("var request = new XMLHttpRequest();");
client.println("request.onreadystatechange = function() {");
client.println("if (this.readyState == 4) {");
client.println("if (this.status == 200) {");
client.println("if (this.responseText != null) {");
client.println("currPressureTest = this.responseText;");
client.println("var pressureValue = document.querySelector('.gauge-d');");
client.println("pressureValue.style.transform = 'rotate('+ currPressureTest +'deg)';");
client.println("var pressureText = (((this.responseText)/180)*100).toFixed(0);");
client.println("document.getElementById(\"pressurePercentD\").innerHTML = pressureText + '%';");
client.println("if(pressureText > 75){");
client.println("pressureValue.style.background = 'red';");
client.println("}");
client.println("else if(pressureText > 25 && pressureText < 75){");
client.println("pressureValue.style.background = '#5664F9';");
client.println("}");
client.println("else if(pressureText < 25){");
client.println("pressureValue.style.background = 'red';");
client.println("}");
client.println("}}}}");
client.println("request.open(\"GET\", \"ajax_set_pressure_d\" + nocache, true);");
client.println("request.send(null);");
client.println("setTimeout('setPressureD()', 5000);");
client.println("}");
client.println("function setPressureE(){");
client.println("nocache = \"&nocache=\"+ Math.random() * 1000000;");
client.println("var request = new XMLHttpRequest();");
client.println("request.onreadystatechange = function() {");
client.println("if (this.readyState == 4) {");
client.println("if (this.status == 200) {");
client.println("if (this.responseText != null) {");
client.println("currPressureTest = this.responseText;");
client.println("var pressureValue = document.querySelector('.gauge-e');");
client.println("pressureValue.style.transform = 'rotate('+ currPressureTest +'deg)';");
client.println("var pressureText = (((this.responseText)/180)*100).toFixed(0);");
client.println("document.getElementById(\"pressurePercentE\").innerHTML = pressureText + '%';");
client.println("if(pressureText > 75){");
client.println("pressureValue.style.background = 'red';");
client.println("}");
client.println("else if(pressureText > 25 && pressureText < 75){");
client.println("pressureValue.style.background = '#5664F9';");
client.println("}");
client.println("else if(pressureText < 25){");
client.println("pressureValue.style.background = 'red';");
client.println("}");
client.println("}}}}");
client.println("request.open(\"GET\", \"ajax_set_pressure_e\" + nocache, true);");
client.println("request.send(null);");
client.println("setTimeout('setPressureE()', 5000);");
client.println("}");
client.println("function LEDswitch(){");
client.println("var LEDswitchCheck = document.getElementById('myonoffswitch').checked;");
client.println("if(LEDswitchCheck){");
client.println("nocache = \"&nocache=\"+ Math.random() * 1000000;");
client.println("var request = new XMLHttpRequest();");
client.println("request.onreadystatechange = function() {");
client.println("if (this.readyState == 4) {");
client.println("if (this.status == 200) {");
client.println("if (this.responseText != null) {");
//client.println("document.getElementById(\"LEDbtn\").innerHTML = this.responseText;");
client.println("}}}}");
client.println("request.open(\"GET\", \"ajax_LED_switch_on\" + nocache, true);");
client.println("request.send(null);");
client.println("}");
client.println("else if(!LEDswitchCheck) {");
client.println("nocache = \"&nocache=\"+ Math.random() * 1000000;");
client.println("var request = new XMLHttpRequest();");
client.println("request.onreadystatechange = function() {");
client.println("if (this.readyState == 4) {");
client.println("if (this.status == 200) {");
client.println("if (this.responseText != null) {");
//client.println("document.getElementById(\"LEDbtn\").innerHTML = this.responseText;");
client.println("}}}}");
client.println("request.open(\"GET\", \"ajax_LED_switch_off\" + nocache, true);");
client.println("request.send(null);");
client.println("}");
client.println("}");
client.println("function loadNum() {");
client.println("nocache = \"&nocache=\"+ Math.random() * 1000000;");
client.println("var request = new XMLHttpRequest();");
client.println("request.onreadystatechange = function() {");
client.println("if (this.readyState == 4) {");
client.println("if (this.status == 200) {");
client.println("if (this.responseText != null) {");
client.println("document.getElementById(\"demo\").innerHTML = this.responseText;");
client.println("}}}}");
client.println("request.open(\"GET\", \"ajax_num_switch\" + nocache, true);");
client.println("request.send(null);");
client.println("setTimeout('loadNum()', 5000);");
client.println("}");
client.println("</script>");
client.println("</head>");
client.println("<body style='background-color:#558C89;' onload=\"loadNum(); setPressureC(); setPressureD(); setPressureE(); setFluid(); \">");
client.println("<div style='background-color:#74AFAD;'>");
client.println("<h1 style='text-decoration: underline;'>Adafruit HUZZAH ESP8266</h1>");
client.println("</div>");
client.println("<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=yes\">\n</div>\n<div style=\"clear:both;\"></div><p>"); client.println("<div style='background-color:#74AFAD;'>");
client.println("<h2 style='color: red;'>LED Controls</h2>");
client.println("<div id='LEDbtn' class='onoffswitch'>");
/*
if (LEDstatus == "on")
{
client.println("<input type='checkbox' name='onoffswitch' class='onoffswitch-checkbox' id='myonoffswitch' checked='checked' onclick='LEDswitch()'>");
} //end if
*/
/*
else if(LEDstatus == "off")
{*/
client.println("<input type='checkbox' name='onoffswitch' class='onoffswitch-checkbox' id='myonoffswitch' onclick='LEDswitch()'>");
//} //end else
client.println("<label class='onoffswitch-label' for='myonoffswitch'>");
client.println("<span class='onoffswitch-inner'></span>");
client.println("<span class='onoffswitch-switch'></span>");
client.println("</label>");
client.println("</div>");
client.println("</div>");
client.println("<div style='background-color:#74AFAD;'>");
client.println("<h2 style='color: green;'>Num Refresh Test</h2>");
client.println("<div id=\"demo\"><h2>Let AJAX change this text</h2></div>");
client.println("</div>");
client.println("</div>");
//client.println("<div id='gaugeCounter'></div>");
client.println("<div class='pressureRow'>");
client.println("<div class='pressureContainer'>");
client.println("<div class='gauge-a'></div>");
client.println("<div class='gauge-b'></div>");
client.println("<div class='gauge-c'></div>");
client.println("<div class='gauge-data'><h1 id='pressurePercentC'>0%</h1></div>");
client.println("</div>");
client.println("<div class='pressureContainer'>");
client.println("<div class='gauge-a'></div>");
client.println("<div class='gauge-b'></div>");
client.println("<div class='gauge-d'></div>");
client.println("<div class='gauge-data'><h1 id='pressurePercentD'>0%</h1></div>");
client.println("</div>");
client.println("<div class='pressureContainer'>");
client.println("<div class='gauge-a'></div>");
client.println("<div class='gauge-b'></div>");
client.println("<div class='gauge-e'></div>");
client.println("<div class='gauge-data'><h1 id='pressurePercentE'>0%</h1></div>");
client.println("</div>");
client.println("</div>");
client.println("<div class='fluidContainer'>");
client.println("<meter class='fluidMeter' max='100' value='50' low='25' high='75'></meter>");
client.println("<div class='fluid-data'><h1 id='fluidPercent'>0%</h1></div>");
client.println("</div>");
client.println("</body>");
client.println("</html>");
}
req = HTTP_req;
// Serial.print(HTTP_req);
HTTP_req = "";
break;
} //end if
}
}
delay(1);
client.stop();
}
}
Last edited by Th3On3Fr33man on Tue Apr 26, 2016 4:10 pm, edited 1 time in total.
