Hello,
I am working on a project, where I display (for now random) values in table and then control (for now) led on pin 2.
I am having troubles with putting this two parts together.
Is here anyone who would be able to help me, point me in the right direction?
Main.ino:
#include <WiFi.h>
#include <WiFiClient.h>
#include <WebServer.h>
#include "index.h" //Web page header file
WebServer server(80);
int X1 = 0;
//Enter your SSID and PASSWORD
const char* ssid = "ESP";
const char* password = "123456789";
//===============================================================
// This routine is executed when you open its IP in browser
//===============================================================
void handleRoot() {
String s = MAIN_page; //Read HTML contents
server.send(200, "text/html", s); //Send web page
}
void handleADC() {
Xvalue();
Serial.print(X1);
String adcValue = String(X1);
server.send(200, "text/plane", adcValue); //Send ADC value only to client ajax request
}
void Xvalue(){
X1 = random(300);
}
//===============================================================
// Setup
//===============================================================
void setup(void){
Serial.begin(115200);
pinMode(output2, OUTPUT);
digitalWrite(output2, LOW);
Serial.println();
Serial.println("Booting Sketch...");
//ESP32 As access point
WiFi.mode(WIFI_AP); //Access Point mode
WiFi.softAP(ssid, password);
Serial.println("Connecting to ");
Serial.print(ssid);
IPAddress IP = WiFi.softAPIP();
Serial.print("AP IP address: ");
Serial.println(IP);
//----------------------------------------------------------------
server.on("/", handleRoot); //This is display page
server.on("/readADC", handleADC);//To get update of ADC Value only
server.begin(); //Start server
Serial.println("HTTP server started");
}
//===============================================================
// This routine is executed when you open its IP in browser
//===============================================================
void loop(void){
server.handleClient();
delay(1);
}
Index.h:
const char MAIN_page[] PROGMEM = R"=====(
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<style>tab-table, th, td {border: 1px solid black;border-collapse:
collapse;text-align: center;}</style>
</head>
// buttons
<div class="button"align="center">
<button type="start" class="btn btn-success" style="margin:2%;
height:45px; width:28%; margin-top:40px;">Start</button>
<button type="button" class="btn btn-primary"style="margin:2%;
height:45px; width:28%; margin-top:40px;">Pause</button>
<button type="button" class="btn btn-danger"style="margin:2%;
height:45px; width:28%; margin-top:40px;">Reset</button>
</div>
// table
<body>
<table style="margin-top:20px; width:92.8%; margin-left:3.6%; ">
<tr>
<th style="height:45px; width:40%">Name</th>
<th style="height:45px; width:20%">X location</th>
<th style="height:45px; width:20%">Y location</th>
</tr>
<tr>
<td bgcolor="#D3D3D3" style="height:45px; width:40%">Location 1</td>
////////////////
// Here I update number in tab, it is called adc because of some other code I used for this. Will change later
/////////////////
<td bgcolor="#D3D3D3" style="height:45px; width:20%"><span id="ADCValue">0</span></td>
<td bgcolor="#D3D3D3" style="height:45px; width:20%"><span
id="Y1">Y</span></td>
</tr>
<tr>
<td style="height:40px; width:45%">Location 2</td>
<td style="height:45px; width:20%">X</td>
<td style="height:45px; width:20%">Y</td>
</tr>
<tr>
<td bgcolor="#D3D3D3" style="height:45px; width:40%">Location 3</td>
<td bgcolor="#D3D3D3" style="height:45px; width:20%">X</td>
<td bgcolor="#D3D3D3" style="height:45px; width:20%">Y</td>
</tr>
</table>
</body>
</html>
<body>
<script>
setInterval(function() {
// Call a function repetatively with 2 Second interval
getData();
}, 2000); //2000mSeconds update rate
function getData() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("ADCValue").innerHTML =
this.responseText; // again, it is called adc because of some other code I used.
}
};
xhttp.open("GET", "readADC", true);
xhttp.send();
}
</script>
</body>
</html>
)=====";
I am attaching how the http site looks like.
I would like to add something like "handle.button" function next to handle client.
Thank you for any ideas.
