Ajax Based GPIO Control. Easy Html + Spiffs Loading.
Posted: Fri Jul 22, 2016 9:22 amAjax Based GPIO Modifications. Very cool. Change the provided Html file for your specific needs.
Just modify simple html file and your code is ready.
HTML File: index.html in Data Folder To Make Spiffs:
Just modify simple html file and your code is ready.
Code: Select all
#include <ESP8266WiFi.h>
#include"FS.h"
const char* ssid = "Cherry";
const char* password = "mereshiv";
String file1="";
// Create an instance of the server
// specify the port to listen on as an argument
WiFiServer server(80);
int dac = 0;
int DigitalPin[] = {4, 12, 13};
int DacPin = 5;
void setup() {
Serial.begin(115200);
delay(10);
bool ok = SPIFFS.begin();
if (ok) {
Serial.println("ok");
bool exist = SPIFFS.exists("/index.html");
if (exist) {
Serial.println("The file exists!");
File f = SPIFFS.open("/index.html", "r");
if (!f) {
Serial.println("Some thing went wrong trying to open the file...");
}
else {
int s = f.size();
Serial.printf("Size=%d\r\n", s);
file1 = f.readString();
//Serial.println(data);
f.close();
}
}
else {
Serial.println("No such file found.");
}
}
pinMode(4,INPUT);
pinMode(4, INPUT_PULLUP);
pinMode(12,OUTPUT);
pinMode(13,OUTPUT);
// Connect to WiFi network
Serial.println();
Serial.println();
Serial.print("Connecting to ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.println("WiFi connected");
// Start the server
server.begin();
Serial.println("Server started");
// Print the IP address
Serial.println(WiFi.localIP());
}
void loop() {
// Check if a client has connected
WiFiClient client = server.available();
if (!client) {
return;
}
// Wait until the client sends some data
Serial.println("new client");
while(!client.available()){
delay(1);
}
// Read the first line of the request
String command1 = client.readStringUntil('/');
String command = client.readStringUntil('/');
Serial.println(command1);
Serial.println(command);
if (command == "digital") {
int pin, value;
pin = client.parseInt();
Serial.println(pin);
if (client.read() == '/') {
value = client.parseInt();
digitalWrite(pin, value);
}
else {
value = digitalRead(pin);
}
client.print(F("digital,"));
client.print(pin);
client.print(F(","));
client.println(value);
}
else if (command == "dac"){
int pin, value;
pin = client.parseInt();
if (client.read() == '/') {
value = client.parseInt();
dac = value;
analogWrite(pin, value);
}
else {
value = dac;
}
client.print(F("dac,"));
client.print(pin);
client.print(F(","));
client.println(value);
}
else if (command == "status") {
int pin, value;
client.print(F("status"));
for (int thisPin = 0; thisPin < 3; thisPin++) {
pin = DigitalPin[thisPin];
value = digitalRead(pin);
client.print(F("#"));
client.print(pin);
client.print(F("="));
client.print(value);
}
{
pin = DacPin;
value = dac;
client.print(F("#"));
client.print(pin);
client.print(F("="));
client.print(value);
}
{
value = analogRead(A0);
float lux=value;
client.print(F("#A0"));
client.print(F("="));
client.print(lux);
}
client.println("");
}
else { // Prepare the response
String s = "HTTP/1.1 200 OK\r\nContent-Type: text/html\r\n\r\n";
s += file1;
client.flush();
// Send the response to the client
while(s.length()>2000)
{
String dummy = s.substring(0,2000);
client.print(dummy);
s.replace(dummy," ");
}
client.print(s);
delay(1);
Serial.println("Client disconnected");
// The client will actually be disconnected
// when the function returns and 'client' object is destroyed
}
}HTML File: index.html in Data Folder To Make Spiffs:
Code: Select all
<html>
<head> <title> ESP8266 I/O Demo</title>
<script type="text/javascript">
window.onload=Pinstatus;
function Pinstatus(){
morestatus();
}
function morestatus(){ setTimeout(morestatus, 4000);
document.getElementById("description").innerHTML = "Processing Status";
server = "status/99";
request = new XMLHttpRequest();
request.onreadystatechange = updateasyncstatus;
request.open("GET", server, true);
request.send(null);
}
function updateasyncstatus(){
if ((request.readyState == 4) && (request.status == 200)) {
result = request.responseText;
document.getElementById("description").innerHTML = result;
fullset = result.split("#");
document.getElementById("description").innerHTML = fullset;
for(i = 1; i < fullset.length; i++){
PinPair = fullset[i];
singleset = PinPair.split("=");
PN = singleset[0];
Pinstatus = singleset[1];
if (PN > 11) {
ActNum = "action" + PN;
TxtNum = "text" + PN;
if (Pinstatus == 0) { PinAct = "1";
text = "Off";
} else {
PinAct = "0";
text = "On";
}
document.getElementById(ActNum).value = PinAct;
document.getElementById(TxtNum).innerHTML = text;
}
if (PN == 4) {
TxtNum = "text" + PN;
if (Pinstatus == 1) {
text = "On";
} else {
text = "Off";
}
document.getElementById(TxtNum).innerHTML = text;
}
if (PN == 5 ) {
PinVal = parseInt(singleset[1]);
DacNum = "dac" + PN;
ValNum = "valueDac" + PN;
document.getElementById(DacNum).value = PinVal;
document.getElementById(ValNum).innerHTML = PinVal;
}
if (PN.substr(0,1) == "A") {
PinVal = parseFloat(singleset[1]);
AnalogNum = "analog" + PN.substr(1,2);
document.getElementById(AnalogNum).value = PinVal;
} } } }
function sendbutton(Pin,action){
document.getElementById("description").innerHTML = "Processing Button Click";
server = "digital/" + Pin + "/" + action;
request = new XMLHttpRequest();
request.onreadystatechange = updateasyncbutton;
request.open("GET", server, true);
request.send(null);
}
function updateasyncbutton(){
if ((request.readyState == 4) && (request.status == 200)) {
result = request.responseText;
document.getElementById("description").innerHTML = result;
singleset = result.split(",");
PinType = singleset[0];
PinNum = singleset[1];
Pinstatus = singleset[2];
ActNum = "action" + PinNum;
TxtNum = "text" + PinNum;
if (Pinstatus == 0) {
PinAct = "1";
text = "Off";
} else {
PinAct = "0";
text = "On";
}
document.getElementById(ActNum).value = PinAct;
document.getElementById(TxtNum).innerHTML = text;
document.getElementById("description").innerHTML = result;
} }
function sendDac(Pin,value){ ValNum = "valueDac" + Pin;
document.getElementById(ValNum).innerHTML=value;
document.getElementById("description").innerHTML = "Processing Slider";
server = "dac/" + Pin + "/" + value;
request = new XMLHttpRequest();
request.onreadystatechange = updateasyncDac;
request.open("GET", server, true);
request.send(null);
}
function updateasyncDac(){
if ((request.readyState == 4) && (request.status == 200)) {
result = request.responseText;
singleset = result.split(",");
PinType = singleset[0];
PinNum = singleset[1];
PinVal = parseInt(singleset[2]);
DacNum = "dac" + PinNum;
ValNum = "valueDac" + PinNum;
document.getElementById(DacNum).value = PinVal;
document.getElementById(ValNum).innerHTML = PinVal;
document.getElementById("description").innerHTML = result;
} }
</script> </head> <font face="Arial">
<table name="Table" border="1" cellpadding="6"> <tr> <th align="center" colspan="6" >Analog Input</th></tr>
<tr> <td align="center">
Ambient Light in Lux <br> <input type="text" style="text-align: center;" name="analog" id="analog0" value="0" size="6" readonly/> </td> </tr>
<tr> <th align="center" colspan="6" >Digital Input</th></tr>
<tr> <td align="center"> GPIO 4 <br> <p id="text4">Off</p> </td> </tr>
<tr> <th align="center" colspan="6" >PWM Output</th></tr>
<tr> <td align="center"> GPIO 5 <br> <input type="hidden" name="pin" value="5" id="pin5" />
<input type="range" style="width: 90px; height: 30px;" id="dac5" min="0" max="255" value="0" step="1" onchange="sendDac(document.getElementById('pin5').value, this.value);"/>
<br> <span id="valueDac5">0</span>
</td>
</tr>
<tr> <th align="center" colspan="6" >Digital Output</th></tr>
<tr>
<td align="center">
<input type="hidden" name="pin" value="12" id="pin12" />
<input type="hidden" name="action" value="0" id="action12" />
<button onclick="sendbutton(document.getElementById('pin12').value,document.getElementById('action12').value);"/> GPIO 12 </button>
<p id="text12">Off</p>
</td>
</tr>
<tr>
<td align="center">
<input type="hidden" name="pin" value="13" id="pin13" />
<input type="hidden" name="action" value="0" id="action13" />
<button onclick="sendbutton(document.getElementById('pin13').value,document.getElementById('action13').value);"/>GPIO 13</button>
<p id="text13">Off</p>
</td>
</tr>
</table>
<br><br>
<br><br>
<p id="description"> - </p>
</font>
</html>