webPage += "<!DOCTYPE html><html><head><style>h1.sansserif {font-family: Arial;color: blue;font-size:200%;}p.sans {font-family: Arial;font-size:150%;}</style></head>";
webPage += "<body><center><h1 class='sansserif'>AIR CONDITIONER CONTROL</h1><hr>";
webPage += "<p id='message' class='sans'>Click the on/off button to control AC</p>";
webPage += "<img src='/ACremote.png' width='200' height='500' alt='Remote' usemap='#remotemap'>";
webPage += "<map name='remotemap'>";
webPage += "<area shape='rect' coords='28,265,88,235' alt='On' href='acon' onclick='myFunction(\"AC turned on\")'>";
webPage += "<area shape='rect' coords='88,265,148,235' alt='Off' href='acoff' onclick='myFunction(\"AC turned off\")'>";
webPage += "</map></center>";
webPage += "<script>";
webPage += "function myFunction(atext){document.getElementById('message').innerHTML = atext;}";
webPage += "</script></body></html>";
There is a script function (myFunction) defined within the webpage text which makes the text line change using innerHTML when an area is selected. However, the 'href' reference in 'area' causes a GET to be sent to the ESP8266. I need this so that I can make the ESP8266 carry out the action (send IR data). I have to respond to the GET but I don't want to re-send the webpage since myFunction has already done the change I need. How should I respond to the GET? I read that status 204 can be used if No Content needs to be sent. I played around with it as follows:
void handle_acon() {
Serial.println("AC on");
// TODO send data to ir
server.send(204, "", "");
}
.
.
.
server.on("/acon", handle_acon);
and it seemed to work on my laptop (using Chrome browser) but on my Ipad (again using Chrome) I get a blank webpage when an area is selected. Any suggestions as to the right way to handle the GET?