Chat freely about anything...

User avatar
By samlewis02
#61253 My ESP8266 program sends a webpage which includes a header, a line of text and an image of a remote controller (from SPIFFS). I define two areas with the image as off and on buttons. When one is pressed I want the line of text to change to indicate the action. I also want the ESP8266 to be informed which area was pressed. Here is the webpage text:

Code: Select all 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:

Code: Select allvoid 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?