ESP8266 HTML button to modify arduino code variable

So you're a Noob? Post your questions here until you graduate! Don't be shy.
 Reply

User avatar

ESP8266 HTML button to modify arduino code variable

By atticus
- Sun Oct 08, 2017 5:09 am #70710 Hi guys

I'm new here. Decided to join because i recently got into the esp8266. So i am having a bit of trouble understanding how to do something due to my lack of knowledge of html/javascript/AJAX etc.

What i want to do:

I have an Arduino that measures a value based on a incremental encoder then displays the counter value on a HTML page which the esp8266 makes possible by acting as an access point and a webserver. Every time an interrupt occurs a variable increments its value and is displayed on the webserver html page.

The html page uses AJAX to update the counter value value without refreshing the page. This works great.

my problem:

The HTML page has one button that when clicked must zero the counter value. For example if the sensor value is 15. And i click the zero button i want the HTML page to display 0 again and as the sensor value increases, the html page will then show the value as it increases. i can try explain this as follows:

function zero(){
zero_value = current_counter_value;
}

function display(){
display_value = current_counter_value - zero_value
}

My counter value variable is set in the arduino code. This variable is then displayed by the html page. I do not know how to reset the arduino variable to zero or how to offset it to zero based on its current value with the html button, as a variables in the html script can not be seen by the arduino code.

Here is my current code that does not yet implement a zero function because i cannot get it right.


Code: Select all/* Create a WiFi access point and provide a web server on it. */

#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>


const byte interruptPin = 5;
const byte sensePin = 4;
volatile uint8_t interruptCounter = 0;
uint8_t sensor_value = 0;
uint8_t minus = 0;


/* Set these to your desired credentials. */
const char *ssid = "Access poit";
const char *password = "";
int milisInterval = 200;
int count = 0;
ESP8266WebServer server(80);

/* Just a little test message.  Go to http://192.168.4.1 in a web browser
 * connected to this access point to see it.
 */

 
void handleRoot() {


String html ="<!DOCTYPE html>";

html +="<style>";
html +="html {height: 100%; background: radial-gradient(rgb(50,50,50), rgb(40,40,40), rgb(20,20,20));}";

html +="h1 {display: block; margin:auto; font-family: Arial ; font-weight: bold; font-size: 2000%;color: white; text-align: center; position: relative;margin-top:0px;}";

html +="p1 {display: block; margin:auto; font-family: Arial ; font-weight: bold; font-size: 2500%;color: white; text-align: center; position: relative; margin-top:30px;}";

html +="button {display: block; margin:auto;height: 400px; width: 400px; font-family: Arial ;font-size: 800%; font-weight: bold; border-radius: 50%; outline-style: none; position:relative; margin-top:150 px; }";

html +="#dataVals { max-width: 400px; display: block; margin-top: 30px; }";
html +="</style>";





html +="</head>";
html +="<body>";
html +="<h1>Counter_value</h1>";
html +="<p1 id=\"sensor_value\"></p1>";
html +="<button onclick=zero()> Zero </button>";




html +="<script>";

html +="var changed = false;";

html +="function loadDoc() {";
html +="    var xhttp = new XMLHttpRequest();";
html +="    xhttp.onreadystatechange = function() {";
html +="        if (this.readyState == 4 && this.status == 200) {";
html +="        var obj = JSON.parse(this.responseText);";
html +="        document.getElementById(\"sensor_value\").innerHTML = obj.data[0].dataValue;";
html +="        }";
html +="    };";
html +="    xhttp.open(\"GET\", \"/data\", true);";
html +="    xhttp.send();";
html +="}";

html +="function zero(){";
html +=" zero = document.getElementById(\"sensor_value\").innerHTML;";
html +="}";

html +="}";

html +="var timedEvent = setInterval(function(){ loadDoc(); }, 200);";


html +="</script>";





html +="</body> </html>";

server.send(200, "text/html", html);

}







void getData() {   
   //This is a JSON formatted string that will be served. You can change the values to whatever like.
   //you can update multiple parameters of page like this
   // {"data":[{"dataValue":"1024"},{"dataValue":"23"}]} This is essentially what is will output you can add more if you like
  //LDRReading = analogRead(LDRPin);
  sensor_value = interruptCounter;
 
  String text2 = "{\"data\":[";
 
  text2 += "{\"dataValue\":\"";
  text2 += sensor_value;
  text2 += "\"}]}";
 
  server.send(200, "text/html", text2);
  count++;
}





void setup() {
  delay(200);
  //set interrupt pin as input
  pinMode(interruptPin, INPUT_PULLUP);
  pinMode(sensePin,INPUT);
  attachInterrupt(digitalPinToInterrupt(interruptPin), handleInterrupt, FALLING);

 
  /* You can remove the password parameter if you want the AP to be open. */
  WiFi.softAP(ssid, password);
  IPAddress myIP = WiFi.softAPIP();
  server.on("/", handleRoot);
  server.on("/data", getData);
  server.begin();
}

void loop() {
  server.handleClient();
}





void handleInterrupt() {
 
  //If interrupt pin is HIGH
  //if sense pin is low incriment
  //else if low decriment
  if (digitalRead(interruptPin) == HIGH){
    //if HIGH incriment counter
    if (digitalRead(sensePin) == HIGH){
        interruptCounter++;
      }
   
   
   

    else{
        interruptCounter--;
      }

    }



  if (digitalRead(interruptPin) == LOW){
    //if HIGH incriment counter
    if (digitalRead(sensePin) == HIGH){
        interruptCounter--;
      }
   

    else{
        interruptCounter++;
      }
    }
}
User avatar

Re: ESP8266 HTML button to modify arduino code variable

By Stacey Freya
- Tue Oct 17, 2017 3:31 am #70918 There are a couple of ways to do this. You can try creating a page which resets the variable when clicking the button. For example:

server.on("/reset", [](){
server.send(200, "text/html", html);
counter = 0;
delay(500);
}

and instead of this: html +="<button onclick=zero()> Zero </button>";
you do this: html += "<button onclick="window.location.href='/reset'"> Zero </button>";

assuming the variable you are talking about is "counter", which has to be global in this case.

I got this idea from this page: https://www.teachmemicro.com/simple-nodemcu-web-server/
 Reply
Return to Newbie Corner