0
Ich habe vor kurzem gelernt, wie in Arduino zu programmieren, um eine HTML/CSS/Javascript Webseite auf einem Adafruit HUZZAH Esp8266 Chip Breakout Host, so wenden Sie sich bitte Verzeih mir, wenn meine Methoden hier völlig aus sind.Wie auf einer Esp8266 HTML Webseite mit Arduino serviert Ajax und setInterval verwenden
ich zur Zeit versucht, einen Wert zu erhalten automatisch mit einer Javascript-Funktion über Ajax zu aktualisieren, die setInterval laufen alle fünf Sekunden verwendet. Und während es den Wert mindestens einmal aktualisiert, dauert es viel länger als fünf Sekunden, und dann wird der Wert nie wieder aktualisiert.
Bitte lassen Sie mich wissen, was Sie über die Art und Weise denken, die ich derzeit versuche, dies zu implementieren, und wenn ich weit von der Marke bin? Um Ihnen bei der Navigation der wichtigsten Funktionen zu helfen, sind loadNum() und sendNum(); und die Variable, die inkrementiert wird, ist testNumPart2 (es gibt auch mehr Code hier, der eine Taste verwendet, um eine LED an/aus zu schalten).
Danke!
#include <ESP8266WiFi.h>
#define LED_PIN 15 // This example assumes you have a LED connected to pin 13
const char* ssid = "REDACTED";
const char* password = "REDACTED";
// Create an instance of the server
// specify the port to listen on as an argument
WiFiServer server(80);
void setup() {
Serial.begin(115200);
delay(10);
// prepare GPIO2
pinMode(LED_PIN, OUTPUT);
//digitalWrite(2, 0);
// Connect to WiFi network
Serial.println();
Serial.println();
Serial.print("Connecting to ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.println("WiFi connected");
// Start the server
server.begin();
Serial.println("Server started");
// Print the IP address
Serial.println(WiFi.localIP());
}
void loop() {
// Check if a client has connected
WiFiClient client = server.available();
if (client) {
Serial.println("new client");
// an http request ends with a blank line
boolean currentLineIsBlank = true;
String currentLine = "";
String LEDstatus = "off";
String testNumPart1 = "document.getElementById('demo').innerHTML = ";
int testNumPart2 = 23;
String testNum = testNumPart1 + testNumPart2;
//Serial.print("TEST: ");
//Serial.println(testNum);
while (client.connected()) {
if (client.available()) {
char c = client.read();
Serial.write(c);
testNumPart2++;
testNum = testNumPart1 + testNumPart2;
// if you've gotten to the end of the line (received a newline
// character) and the line is blank, the http request has ended,
// so you can send a reply
if (c == '\n' && currentLineIsBlank) {
// send a standard http response header
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/html");
client.println("Connection: close"); // the connection will be closed after completion of the response
//client.println("Refresh: 5"); // refresh the page automatically every 5 sec
client.println();
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; }");
client.println("</style>");
//Javascript Function
client.println("<script>");
client.println("function LEDswitch(){");
client.println("var LEDswitchCheck = document.getElementById('myonoffswitch').checked;");
client.println("if(LEDswitchCheck){");
client.println("window.location.href = '/H';");
client.println("}");
client.println("else {");
client.println("window.location.href = '/L';");
client.println("}");
client.println("}");
client.println("function loadNum() {");
client.println("setInterval(sendNum, 5000);");
client.println("}");
client.println("function sendNum() {");
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(testNum);
client.println("}");
client.println("}");
client.println("};");
client.println("request.open('GET', '', true);");
client.println("request.send();");
client.println("}");
client.println("</script>");
client.println("</head>");
client.println("<body style='background-color:#558C89;' onload=\"loadNum()\">");
client.println("<div style='background-color:#74AFAD;'>");
client.println("<h1 style='text-decoration: underline;'>Adafruit HUZZAH ESP8266</h1>");
client.println("</div>");
}
if (c == '\n') {
// you're starting a new line
currentLineIsBlank = true;
// if the current line is blank, you got two newline characters in a row.
// that's the end of the client HTTP request, so send a response:
if (currentLine.length() == 0) {
client.println("<div style='background-color:#74AFAD;'>");
client.println("<h2 style='color: red;'>LED Controls</h2>");
// The HTTP response ends with another blank line:
client.println();
client.println("<div 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("<button type='button' onclick='loadNum()'>Change Content</button>");
client.println("</div>");
client.println("</div>");
client.println("</body>");
client.println("</html>");
break;
} //end if
else
{
currentLine = "";
} //end else
}
else if (c != '\r') {
// you've gotten a character on the current line
currentLineIsBlank = false;
currentLine += c;
}
// Check to see if the client request was "GET /H" or "GET /L":
if (currentLine.endsWith("GET /H")) {
digitalWrite(LED_PIN, HIGH); // GET /H turns the LED on
LEDstatus = "on";
} //end if (/H)
if (currentLine.endsWith("GET /L")) {
digitalWrite(LED_PIN, LOW); // GET /L turns the LED off
LEDstatus = "off";
} //end if (/L)
} //end if (client available)
} //end while
// give the web browser time to receive the data
delay(1);
// close the connection:
client.stop();
Serial.println("client disconnected");
} //end if (client)
} //end void loop
Ich sehe keine Aktualisierung in Ihrem AJAX-Request. Sie setzen nur die gleiche Nummer wie beim Laden der Seite. Sie ignorieren vollständig, was auch immer Ihr AJAX-Anruf zurückgibt. Und ich sehe keine URL für Ihren AJAX-Anruf. –
Nun, das ist die Sache, die ich nicht verstehe, von dem, was ich über Arduino weiß ich kann nur die individuelle Arduino (.ino) -Datei auf den ESP8266 hochladen, so eine andere Datei mit Ajax Aufruf scheint unmöglich? Also, anstatt eine Datei aufzurufen, versuche ich eine Variable aufzurufen, wenn das Sinn macht. Sie können oben in der Datei sehen, dass ich testNum mit steigenden Werten von testNumPart2 aktualisiere. –