Need help with using ESP8266 as webserver
Posted: Mon Jul 20, 2015 9:04 amI want to use my ESP8266 communication with MCU in order to get the servo status(speed ,position) and display it into html page. When i clicked on the button it should print out the information via serial port. For instance when i click on button max it should print out "Maximum speed of Servo1" via serial port. But with my code it doesn't. I try to change the a href part remove "?" out and reflash firmware again it WORK!! but when i click it the webpage will load another webpage that its doesn't exist so it have the error. With "?" i doesn't seem to open another html page. Can someone help me solved this problem?
I'm new to the world of ESP8266. So maybe some little example code with explanation might be really nice to me
Thank
I'm new to the world of ESP8266. So maybe some little example code with explanation might be really nice to me
Thank
Code: Select all
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
char ssid[] = "SSID"; // your network SSID (name)
char pass[] = "PASS"; // your network password
String form;
int spd,pos;
// HTTP server will listen at port 80
ESP8266WebServer server(80);
void setup() {
//Initialize serial and wait for port to open:
Serial.begin(115200);
WiFi.mode(WIFI_STA);
delay(500);
//Setup STA
WiFi.begin(ssid, pass);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
printWifiStatus();
//Set http response when received GET packet
server.on("/", [](){
server.send(200, "text/html", form);
});
//Serveral function invoke form event
server.on("/Servo1=decpos",[](){
Serial.println("decrease position of Servo1");
spd+=10;
});
server.on("/?Servo1=incpos",[](){
Serial.println("Increase position of Servo1");
});
server.on("/Servo1=maxspd",[](){
Serial.println("Maximum speed of Servo1");
});
server.on("/Servo1=minspd",[](){
Serial.println("Minimum speed of Servo1");
});
// Start the server
server.begin();
Serial.println("HTTP server started");
}
void loop(void) {
// check for incomming client connections frequently in the main loop:
server.handleClient();
//Update status for html content
UpdateWebpage();
delay(1000);
Serial.print("SPD: ");
Serial.println(spd);
}
void printWifiStatus() {
Serial.println("");
Serial.print("Connected to ");
Serial.println(ssid);
Serial.print("IP address: ");
Serial.println(WiFi.localIP());
}
void UpdateWebpage(){
form = "<h1>This is ESP8266</h1>";
form += "<label>Number of Servo:</label>";
form += "<select onchange=\"checkNoOfServo(this);\">";
form += "<option value=\"0\">0</option>";
form += "<option value=\"1\">1</option>";
form += "<option value=\"2\">2</option>";
form += "<option value=\"3\">3</option>";
form += "<option value=\"4\">4</option></select>";
for(int i=0;i<4;i++){
form += "<div style=\"width:500px;height:140px;background-color:#E1E1E1;padding-top:5px;border-radius:7px;\"><center>Servo " ;
form += i+1;
form += "</center><hr>";
form += "<div style=\"width:75px;border-right: 1px solid lightgray;display:inline-block;height:30px;\">Position </div>" ;
form += "<div style=\"width:55px;display:inline-block;height:30px;\"><center><a href=\"?Servo";
form += i+1;
form += "=incpos\"><button>+</button></a></center></div>";
form += "<div style=\"width:55px;border-right: 1px solid lightgray;display:inline-block;height:30px;\"><center><a href=\"?Servo";
form += i+1;
form += "=decpos\"><button>-</button></a></center></div>";
form += "<div style=\"width:125px;border-right: 1px solid lightgray;display:inline-block;height:30px;\">Current Position</div>" ;
form += "<div style=\"width:55px;display:inline-block;height:30px;\"><center><div>";
form += pos;
form += "</div></center></div>";
form += "<br>";
form += "<div style=\"width:75px;border-right: 1px solid lightgray;display:inline-block;height:30px;\">Speed </div>";
form += "<div style=\"width:55px;display:inline-block;height:30px;\"><center><a href=\"?Servo";
form += i+1;
form += "=maxspd\"><button>Max</button></a></center></div>";
form += "<div style=\"width:55px;border-right: 1px solid lightgray;display:inline-block;height:30px;\"><center><a href=\"?Servo";
form += i+1;
form += "=minspd\"><button>Min</button></a></center></div>" ;
form += "<div style=\"width:125px;border-right: 1px solid lightgray;display:inline-block;height:30px;\">Current Speed </div>" ;
form += "<div style=\"width:55px;display:inline-block;height:30px;\"><center><div>";
form += spd;
form += "</div></center></div>";
}
}