static const char webpageCode[] PROGMEM = R"EOF(
<!DOCTYPE html>
<html>
<style>
#grid {
margin-top: 20px;
display: grid;
grid-template-columns: repeat(10, 40px);
grid-template-rows: repeat(12, 40px);
grid-gap: 2px;
}
#grid > div {
font-size: 10px;
padding: .5em;
background: gold;
text-align: center;
}
</style>
<body>
<div>
<label for="remember">
<input type="checkbox" role="switch" id="toggle-out" name="toggle-out">
Toggle OUTPUT
</label>
<p id="esp-response"></p>
</div>
<div id="grid"></div>
<script>
function sendCellToMCU(e) {
// Get actual text
var cell_ID = e.target.innerHTML;
console.log(cell_ID);
// The MCU must habndle properly this GET AJAX request
var url = new URL("http://" + `${window.location.hostname}` + "/clicked_cell?val=");
url += cell_ID;
// Send the value of clicked cekll back to the MCU
console.log(url);
fetch(url)
.then(response => response.text())
.then(data => {
console.log(data)
});
}
// Fill the "grid" element with "num" cells
function createTable(num) {
var el = document.getElementById("grid");
for (var i=0; i<num; i++) {
// Create a nue empty
var cell = document.createElement("div");
// Set text
cell.innerHTML = i;
// Add a click listener for each cell
cell.addEventListener('click', sendCellToMCU);
// Add the new cell to grid element
el.appendChild(cell);
}
}
// This function fetch the GET request to the ESP webserver
function toggleLed() {
const pars = new URLSearchParams({
val: document.getElementById('toggle-out').checked ? '1' : '0'
});
var url = new URL("http://" + `${window.location.hostname}` + "/led?");
url += pars;
console.log(url);
fetch(url) // Do the request
.then(response => response.text()) // Parse the response
.then(text => { // DO something with response
document.getElementById('esp-response').innerHTML = text;
});
}
// Add event listener to the LED checkbox (the function will be called on every change)
document.getElementById('toggle-out').addEventListener('change', toggleLed );
// Call the function createTable in order to create the grid dinamically
createTable(120);
</script>
</body>
</html>
)EOF";
#include <WiFi.h>
#include <WiFiClient.h>
#include <WebServer.h>
int OUT1 = LOW;
//---------------------------------------------------
WebServer server(80);
const char* ssid = "network name";
const char* password = "password";
//---------------------------------------------------
//=============================================
//Handle functions executed upon client request
//=============================================
void handleRoot()
{
// http://xxx.xxx.xxx.xxx/
server.send(200, "text/html", webpageCode);
}
//---------------------------------------
void handleLed()
{
// http://xxx.xxx.xxx.xxx/led?val=1
if(server.hasArg("val")) {
int value = server.arg("val").toInt();
OUT1 = value;
}
String reply = "OUT is now ";
reply += OUT1 ? "OFF" : "ON";
server.send(200, "text/plain", reply);
}
//---------------------------------------
void handleCell()
{
// http://xxx.xxx.xxx.xxx/clicked_cell?val=15
if(server.hasArg("val")) {
int value = server.arg("val").toInt();
Serial.println(value);
}
server.send(200, "text/plain", "OK");
}
//===================================================
void setup()
{
Serial.begin(115200);
//-------------------------------------------------
WiFi.mode(WIFI_STA);
WiFi.begin(ssid, password);
Serial.println("Connecting to WiFi");
while(WiFi.waitForConnectResult() != WL_CONNECTED)
{
delay(500); Serial.print(".");
}
Serial.print("IP address: ");
Serial.println(WiFi.localIP());
//-------------------------------------------------
server.on("/", handleRoot);
server.on("/led", handleLed);
server.on("/clicked_cell", handleCell);
server.begin();
Serial.println("HTTP server started");
}
//===================================================
void loop(void)
{
server.handleClient();
}