Ajax Based GPIO Control. Easy Html + Spiffs Loading.

Your new topic does not fit any of the above??? Check first. Then post here. Thanks.

Moderator: igrr

 Reply

User avatar

Ajax Based GPIO Control. Easy Html + Spiffs Loading.

By ajaybnl
- Fri Jul 22, 2016 9:22 am #51264 Ajax Based GPIO Modifications. Very cool. Change the provided Html file for your specific needs.

Just modify simple html file and your code is ready. :D


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>

 
 Reply
Return to General Discussions