-->
Page 1 of 1

ESP8266 Ajax and PID

PostPosted: Wed Apr 15, 2020 3:41 pm
by Stefano Martini
Hello everyone,

It's first time project with ESP8266 and the question are a lot.
I'm a little bit noob olso in arduino, I work for industrial automation but everything is different :D

Looking on google there's a lot of example but anyone answer me complitely.
I have a wemos d1 and I have to check external temperature and control two heater with two ds18b20 built in, maybe four I don't know.

The first question is the simple way to share data from webserver and software
In this moment I'm refresh variables via json data and it works but I have a lot of variables to share and the string will be very long.

html side
Code: Select allsetInterval(GetData, 2000);
   
function GetData(){
    //Get Humidity Temperature
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
      var txt = this.responseText;
      var obj = JSON.parse(txt); //Ref: https://www.w3schools.com/js/js_json_parse.asp
        document.getElementById("temp").innerHTML = obj.Temperature;
        document.getElementById("humidity").innerHTML = obj.Humidity;
        document.getElementById("dewpoint").innerHTML = obj.DewPoint;
        document.getElementById("FascState0").value = obj.FascState0;
        document.getElementById("FascState1").value = obj.FascState1;
        document.getElementById("FascState2").value = obj.FascState2;
        document.getElementById("FascState3").value = obj.FascState3;
        document.getElementById("FascCy0").value = obj.FascCy0;
        document.getElementById("FascCy1").value = obj.FascCy1;
        document.getElementById("FascCy2").value = obj.FascCy2;
        document.getElementById("FascCy3").value = obj.FascCy3;
      } 
    };
   xhttp.open("GET", "readHomePageData", true); //Handle readADC server on ESP8266
   xhttp.send();
}


arduino side
Code: Select allvoid handleHomePageData() {
 //Refresh dati Home Page
 String data = "{\"Temperature\":\""+ String(temperature) +"\", \"Humidity\":\""+ String(humidity) +"\", \"DewPoint\":\""+ String(Tr) +"\", \"FascState0\":\""+ FascState0 +"\", \"FascState1\":\""+ FascState1 +"\", \"FascState2\":\""+ FascState2 +"\", \"FascState3\":\""+ FascState3 +"\", \"FascCy0\":\""+ FascCy0 +"\", \"FascCy1\":\""+ FascCy1 +"\", \"FascCy2\":\""+ FascCy2 +"\", \"FascCy3\":\""+ FascCy3 +"\"}";
 server.send(200, "text/plane", data); //Send JSON to client ajax request
}


For the buttom I switch the text everytime are clicked, at the moment I have to wait the two secondo of json refresh, the code I use is this, I use this function wid led input for understand which one buttom is pressed.

I have found this code from the internet but I'm sure that it can be optimized cause there's some code I don't use but I want to understand better.
In the case of the buttom I would like to switch the text directly withot waiting the 2second of refresh, taking in consideration that the buttom have different ID

html side
Code: Select allfunction sendData(led) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
//document.getElementById("FascState").value = I dont' knwo whati is this!
//this.responseText; //and this!! But we wait that ajax is ready so I think it's important but olso commented it work
}
};
xhttp.open("GET", "setFASC?FASCstate="+led, true);
xhttp.send();
}


arduino side
Code: Select allvoid handleONFasc() {
String FascState;
String t_state = server.arg("FASCstate"); //Refer xhttp.open("GET", "setLED?LEDstate="+led, true);
Serial.println(t_state);
if(t_state == "0"){  if (OnFasc[0]==1) {FascState0 = "OFF"; OnFasc[0]=0; Serial.println("1spenta!");} else {OnFasc[0]=1; FascState0 = "ON"; Serial.println("1accesa!");}}
if(t_state == "1"){  if (OnFasc[1]==1) {FascState1 = "OFF"; OnFasc[1]=0; Serial.println("2spenta!");} else {OnFasc[1]=1; FascState1 = "ON"; Serial.println("2accesa!");}}
if(t_state == "2"){  if (OnFasc[2]==1) {FascState2 = "OFF"; OnFasc[2]=0; Serial.println("3spenta!");} else {OnFasc[2]=1; FascState2 = "ON"; Serial.println("3accesa!");}}
if(t_state == "3"){  if (OnFasc[3]==1) {FascState3 = "OFF"; OnFasc[3]=0; Serial.println("4spenta!");} else {OnFasc[3]=1; FascState3 = "ON"; Serial.println("4accesa!");}}
if(t_state == "10"){  if (FascCycl[0]==1) {FascCy0 = "MANU"; FascCycl[0]=0; Serial.println("1Manuale!");} else {FascCycl[0]=1; FascCy0 = "AUTO"; Serial.println("1Automatica!");}}
if(t_state == "11"){  if (FascCycl[1]==1) {FascCy1 = "MANU"; FascCycl[1]=0; Serial.println("2Manuale!");} else {FascCycl[1]=1; FascCy1 = "AUTO"; Serial.println("2Automatica!");}}
if(t_state == "12"){  if (FascCycl[2]==1) {FascCy2 = "MANU"; FascCycl[2]=0; Serial.println("3Manuale!");} else {FascCycl[2]=1; FascCy2 = "AUTO"; Serial.println("3Automatica!");}}
if(t_state == "13"){  if (FascCycl[3]==1) {FascCy3 = "MANU"; FascCycl[3]=0; Serial.println("4Manuale!");} else {FascCycl[3]=1; FascCy3 = "AUTO"; Serial.println("4Automatica!");}}

server.send(200, "text/plane", FascState); //Send web page1 WHY THIS??
}


For the slider I'v found this solution based on the button one, it's correct? It can be changed?

html side
Code: Select all  <input type="button" class="manauto" id = "FascState0" onclick="sendData(0)" value="ON" /> <input type="button" class="manauto" id = "FascCy0" onclick="sendData(10)" value="AUTO" />

function SlideValue1(slidevalue) {
var xhttp = new XMLHttpRequest();
var x
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
x= document.getElementById("Slide1").value =  // What is this??
this.responseText; //I really need??
}
};
xhttp.open("GET", "valueFASC1?SLDstate="+slidevalue, true);
xhttp.send();
}


arduino side
Code: Select allvoid handleValuesFasc1() {
String ValueFasc;
String t_value = server.arg("SLDstate"); //Refer xhttp.open("GET", "SLDstate?LEDstate="+led, true);
Serial.println(t_value);
ValueFasc = t_value;
//server.send(200, "text/plane", ValueFasc); //Send web page1
}


Last question,I have to make two pid, I know what is and how it work but I never used in arduino.
Some example I found are not noob level, my idea is not using interrupt or timer for my easiness and bieng a slow heater I don't need a excessive fast respose from the sistem...maybe(? :? ) wich is the best solution (I've seen some libraries that don't need an implementation on the code about timer and interrupt request)?

Thank you for all the answer!