Friday, January 28, 2022

Blynk part 5 sending notifications to Android

 For an index to all my stories click this text

This time I present you a simple tutorial for using with Blynk. Apparently some of the readers of this blog did not know how to get a notification on their phone when an event in Blynk takes place. So I am going to show you how it is done.

For those in the dark: a notification means that if something happens at the microcontroller side a message is send to your phone. Something happening might be a button pressed, a PIR that notices movement, a door or window that opens, a temperature rising above a critical level etc etc etc.

For this tutorial I assume that you have already made some projects with Blynk. If not I urge you to read the previous stories on this weblog which you can find here:
http://lucstechblog.blogspot.com/2021/03/blynk-part-1-starting-with-blynk.html
http://lucstechblog.blogspot.com/2021/04/blynk-part-2-sending-data-to-blynk.html
http://lucstechblog.blogspot.com/2021/04/blynk-part-3-your-own-blynk-server.html
http://lucstechblog.blogspot.com/2021/06/blynk-part-4-using-blynk-with-multiple.html

http://lucstechblog.blogspot.com/2021/07/blynk-sad-story.html

So beware that the tutorial presented here is only working with the OLD Blynk.
For this tutorial start a new project.



The project is called (how surprising) Notification and the microcontroller to be used is the ESP8266.



The first thing to add to the project is a led. I chose as color red and attached it to virtual pin V1.
Next resize it to about half the screen.



Then search in the Widget Box (by pressing the + at the top of the screen) for the Notifications group and add a Notification widget.



The project is done !!
That really is all.

The ESP8266 breadboard layout


It can not get more simpler as this.



Just an ESP8266 with a pushbutton. The pushbutton is attached to D1. For simplicity I even did not add a pull-up resistor but did the pull-up in the software.

The ESP8266 notification program.

As usual I start with the complete program and then explain some details.

#include <ESP8266WiFi.h>
#include <BlynkSimpleEsp8266.h>

char auth[] = "Blynk-Authentification-token";

char ssid[] = "YOUR-ROUTERS-NAME";
char pass[] = "PASSWORD";

const int button = D1;

WidgetLED led1(V1);

BlynkTimer timer;

void buttonLedWidget()
{
    Blynk.run();
    if (digitalRead(button) == LOW) 
    {
      led1.on();
      Blynk.notify("Alert:The button was pressed.");
    } else 
    {
      led1.off();
    }
}

void setup()
{
  Blynk.begin(auth, ssid, pass, IPAddress(XXXX.XXXX.XXXX.XXXX), 8080);

  pinMode(button, INPUT_PULLUP);

  timer.setInterval(500L, buttonLedWidget);
}

void loop()
{
  Blynk.run();
  timer.run();
}

A look at the details.

#include <ESP8266WiFi.h>
#include <BlynkSimpleEsp8266.h>

Naturally we need to include the Wifi library to contact the Blynk server and the Blynk library.

char auth[] = "Blynk-Authentification-token";

Fill in your Blynk Authentification token for this project. There are two ways to get the authentification token. I will show them later on in this story.

char ssid[] = "YOUR-ROUTERS-NAME";
char pass[] = "PASSWORD";


Fill in your own routers name and password. If you don't the program can not connect to the internet and to the Blynk server.

WidgetLED led1(V1);

BlynkTimer timer;

led1 is defined as a Blynk widget and attached to Blynks virtual pin V1
timer is defined as a Blynk timer and that is used to frequently check on the button.

void buttonLedWidget()
{
    Blynk.run();
    if (digitalRead(button) == LOW) 
    {
      led1.on();
      Blynk.notify("Alert:The button was pressed.");
    } else 
    {
      led1.off();
    }
}

This routine is frequently visited from the loop().
It tests wether the button has been pressed. And if it is the virtual led called led1 in the Blynk app is set ON and (there it is) a notification is send to the Blynk app.

In the setup there are two important lines.

Blynk.begin(auth, ssid, pass, IPAddress(XXX.XXX.XXX.XXX), 8080);

This line connects the ESP8266 to the Blynk server. In this case the XXX.XXX.XXX.XXX is the IP number of my own Blynk server. If you are using the Blynk cloud server replace that line by:

Blynk.begin(auth, ssid, pass);

The next line:

timer.setInterval(500L, buttonLedWidget);

uses the Blynk timer and calls every 500 microseconds (half a second) the buttonLedWidget routine that checks if the button has been pressed.

void loop()
{
  Blynk.run();
  timer.run();
}


In Blynk programs the loop should always be as short as possibel. So here it just constantly runs the Blynk library and the blink timer.

And that's it

Where to get the authentification token.

There are several ways to get your authentification token from Blynk.

The first method is when you are using Blynks cloud server. As soon as you start making your project the authentification token is send to your email adres and you can copy it from there. You can re-read hoiw this works in the first story in this series: http://lucstechblog.blogspot.com/2021/03/blynk-part-1-starting-with-blynk.html

If you are using your own Blynk server you can find it in the users section of the server as described in the third story in this series : http://lucstechblog.blogspot.com/2021/04/blynk-part-3-your-own-blynk-server.html

The easiest way is the following.
On your computer download an Android emulator. I use LDplayer which I described in this story : http://lucstechblog.blogspot.com/2021/03/ldplayer-android-emulator.html
With this emulator I build all my Blynk apps and test them before I test them on my phone. I love the big screen on my PC, the ability to make screendumps for this blog without having to transfer them and the ease of copy and paste between Blynk and the Arduino IDE.



In the Blynk app in the emulator press on the little nut on the top of the page. 


 

Halfway the page there is a text saying Copy All. Press on that and the authentification code is copied Now you can paste it into your ESP's program.

Does it work ???

Of course it does.



Here is a screenshot from my faithfull Nokia 5 phone that got a notification from Blynk when I pressed the button on the ESP8266.

Now add this to the ESP32-Cam doorbell and you will get a notification when someone is at the door.

Till next time.
Have fun

Luc Volders








Friday, January 21, 2022

ESP Webserver tutorial part 3 - button with status save and led

For a complete index to all my articles click this text.

This is a series on building a webpage with the ESP8266 and the ESP32. When this series is completed all the information needed for building a webpage with buttons, textfields, sliders and color pickers witch have interaction with the ESP8266 or ESP32 will be discussed and demonstrated.

This third part leans heavy on the previous two parts in this series, so I urge you to read these stories first:

ESP webserver tutorial part 1 - textfields
ESP webserver tutorial part 2 - button

In the previous story I showed you how to build a webpage with buttons. Clicking the button would put a led on the ESP8266 or ESP32 ON or OFF the webpage looks like this:



This is a perfectly valid way to use buttons on a webpage with which you can set leds on and off, start and stop motors, pumps or ventilators, open the garage door etc etc etc. There are however two flaws with this setup.

- When you press the button there is no feedback
- There is no clue about the initial state of the led, motor or whatever.

Wether you think that these issues are severe is a personal preference. When the led is off and you press the OFF button it will stay off. If the led was on it will be put off. So actually it is not a big deal.

However you might be building a project for  non-computer-minded people and then a more visual attractive feedback might be appropriate. Or you just might like the looks of a visual attractive webpage better (I  do !!). Next to that it can be very convenient to see the actual state of the led, motor etc. when the webpage is opened or refreshed.

So in this part I am showing you how to put a circle representing a led on your webpage that will initially show the actual state of the led/motor/pump and that will change its color if you press the button and sending the opposite signal to the ESP.

The webpage will look like this:



The colorscheme I used is as follows. When the IO port which is affected by the button is off (0) the led will be green. When the IO port is on (1) the led will be red. My idea is that green is safe and red is danger. You can alter the colors to your own liking like black for off and white for on. To achive this you only need to alter the colors in the <style> part of the code.

To achive this we will use HTML for building the webpage, CSS for background coloring text coloring and the color of the led, and Javascript for reacting on the buttonpress on the website. This all will be incorporated in an Arduino (C++) program for the ESP series.

This program is intended for the ESP8266. By changing just a few lines in the software and the breadboard setup it will work on the ESP32 as well.

The ESP8266 breadboard setup.

The breadboard setup is the same as in the previous story and as simple as it can be.




Just an ESP8266 (the Wemos D1 mini version) with a led and a current delimiting resistor attached to D5. Any ESP8266 like the NodeMCU will work. You could even adapt this foran ESP8266-01.

The ESP32 breadboard setup

The ESP32 breadboard setup is equally simple.



I am using the ESP32 Devkit board. These boards will not fit a breadboard. Therefore I use 2 breadboards. From one of these breadboards I stripped the power rail as discussed in the story you can read here:
https://lucstechblog.blogspot.com/2018/08/breadboard-hack-for-esp32-and-esp8266.html

The led is attached to GPIO32 through a 220 Ohm current delimiting resistor.

The program

Just like the previous entries in this series the program is written in Arduino language (C++) and is almost identical for the ESP8266 and the ESP32. The changes for the ESP32 are really minimal. I will give you the ESP8266 program as a whole and you can find the few lines which have to be modified for the ESP32 at the end of this story.



// ======================================================
// Webserver program that sends button information
// to ESP8266 and puts a control led on the page
// with save function by Luc Volders
// ======================================================

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

ESP8266WebServer server(80);

// Your routers credentials
const char* ssid = "XXXXXXXXXXXXXXX";
const char* password = "YYYYYYYYYYYYYYYY";

// ==========================================
// initial variables
// ========================================== 

String buttonON;
bool ledstate = 0;

// =========================================
// Here we build the HTML page
// =========================================
String getPage()
  {
  String page = "<!DOCTYPE HTML>";
  page += "<html>";
  page += "<head>";
  page += "<meta name = \"viewport\" content = \"width = device-width, initial-scale = 1.0 maximum-scale = 2.5, user-scalable=1\">";
  page += "<title>Luc's button demo</title>";
  page += "<body style='background-color:powderblue; onload='myFunction()'>";
  
  page += "<style>";
  page += ".green {";
  page += "height: 25px;";
  page += "width: 25px;";
  page += "background-color: #080;";
  page += "border-radius: 50%;";
  page += "display: inline-block;";
  page += "}";
  page += ".red {";
  page += "height: 25px;";
  page += "width: 25px;";
  page += "background-color: #f00;";
  page += "border-radius: 50%;";
  page += "display: inline-block;";
  page += "}";
  page += "</style>";
  page += "</head>";
  page += "<body>";
  
  page += "<h1 style='color:red'>Luc's web-button for ESP8266</h1>";
  page += "<br>";
  page += "<br>";
  if (ledstate == 1)
  {
    page += "<div id='dot1' class='red'></div>&emsp;&emsp;&emsp;";
  }
  else 
  {
    page += "<div id='dot1' class='green'></div>&emsp;&emsp;&emsp;";  
  }
  page += "<br>";
  page += "<br>";

  page += "<FORM action=\"/\" method=\"post\">";
  page += "<button type=\"submit\" name=\"button1\" id=\"button1\" value=\"but1\" onclick=\'update()\'>CLICK ME</button>";
  page += "</form>";

  page += "<br>";
  page += "<br>";
  
  page += "<script>";
  page += "function update() {";
  page += "if (document.getElementById('dot1').className == 'red'){";
  page += "element = document.getElementById('dot1');";
  page += "element.classList.remove('red');";
  page += "element.classList.add('green');";
  page += "}";
  page += "else{";
  page += "element = document.getElementById('dot1');";
  page += "element.classList.remove('green');";
  page += "element.classList.add('red');";
  page += "}";
  page += "}";
  page += "function myFunction() {";
  // Here we put commands that must be executed when the page is loaded
  page += "}";
  page += "</script>";  
  page += "</body>";
  page += "</html>";
  return page;
  }


// ==================================================
// Handle for page not found
// ==================================================
void handleNotFound()
{
  server.send(200, "text/html", getPage());
}


// ==================================================
// Handle submit form
// ==================================================
void handleSubmit()
{   
   if (server.hasArg("button1"))
      {
      buttonON = server.arg("button1");
      Serial.print("Thereceived button is:             ");
      Serial.println(buttonON);
      Serial.print("If it is an integer its value is:        ");
      Serial.println(buttonON.toInt());
      ledstate= !ledstate;
      digitalWrite(D5, ledstate);
      } 
  server.send(200, "text/html", getPage());       //Response to the HTTP request

}  


// ===================================================
// Handle root
// ===================================================
void handleRoot() 
{   
  if (server.args() ) 
    {
    handleSubmit();
    } 
  else 
    {
    server.send(200, "text/html", getPage());  
    }
}


// ===================================================
// Setup
// ===================================================
void setup()
{
  delay(1000);
  Serial.begin(115200);

  // Connect to Wi-Fi network with SSID and password
  Serial.print("Connecting to ");
  Serial.println(ssid);
  WiFi.begin(ssid,password);
  while (WiFi.status() != WL_CONNECTED) 
  {
    delay(500);
    Serial.print(".");
  }
  // Print local IP address and start web server
  Serial.println("");
  Serial.println("WiFi connected.");
  Serial.println("IP address: ");
  Serial.println(WiFi.localIP());
  server.begin();
  server.on("/", handleRoot);
  server.onNotFound(handleNotFound);

  server.begin();
  delay(500);

  pinMode(D5, OUTPUT);
  digitalWrite(D5,LOW);
}


// ===================================================
// Loop
// ===================================================
void loop()
{  
  server.handleClient(); 
  delay(50);
}

Lets go over this step by step.


#include <ESP8266WiFi.h>

#include <ESP8266WebServer.h>


ESP8266WebServer server(80);


// Your routers credentials

const char* ssid = "XXXXXXXXXX";

const char* password = "YYYYYYYYY";

This is standard material. The necessary libraries are loaded and the wifi credentials are set. Do not forget to alter the XXXXXXXXX and YYYYYYYYY in your routers name and password.


String buttonON;

bool ledstate = 0;

A variable buttonON is created which will receive the data from the webpage. A second variable called ledstate is set to 0. This is used to set the IO pin. for safety reasons it is initially set to 0. So the led or relay or whatever you will attach to the ESP will be set OFF.

lets skip to the handleNotFound routine

 

// ==================================================

// Handle for page not found

// ==================================================

void handleNotFound()

{

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

}

This routine just sends the webpage anew when an unknown command is received from the webpage. This is likely never going to happen and therefore just a safety measure.


// ==================================================

// Handle submit form

// ==================================================

void handleSubmit()

{  

   if (server.hasArg("button1"))

      {

      buttonON = server.arg("button1");

      Serial.print("Thereceived button is:             ");

      Serial.println(buttonON);

      Serial.print("If it is an integer its value is:        ");

      Serial.println(buttonON.toInt());

      ledstate= !ledstate;

      digitalWrite(D5, ledstate);

      }

  server.send(200, "text/html", getPage());       //Response to the HTTP request


} 

This part analyses what the ESP receives from the webpage if the button is pressed and acts on it. First the program tests what the webpage has send. In this case it is information from "button1". On this simple website there is only one button. By copying the IF test we can expand this for a multitude of buttons.

Next the buttonON variable gets the value that is send by the webpage. In this program the webpage sends the word "but1" when button1 on the page is pressed. Again you can alter this when using multiple buttons.

The Serial monitor prints then the received information and tries to make an integer value from the recived information. In this case we just receive the string "but1" and as stated this can be altered to many things like a value by altering the code on the webpage.

Next as the button is pressed (otherwise the if is not executed) we negate the ledstate variable so ON will be OFF and the other way round. Then we will write the ledstate to the IO pin so the led on the ESP will go ON or OFF.

And then the getpage() String is called. This rebuilds the webpage.


// ===================================================

// Handle root

// ===================================================

void handleRoot()

{  

  if (server.args() )

    {

    handleSubmit();

    }

  else

    {

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

    }

}

This routine takes care of refreshing the webpage. If the button on the webpage is pressed the server will get an argument and the before discussed handleSubmit routine is called. If the webpage is simply refreshed or called for the first time then the webpage is simply build and send.

In the setup() routine nothing special happens.
Connection is made with the router like always with programs that use Wifi. Next the webserver is started and the D5 IO pin is set as output and set to OFF.
As the setup routine is only called once when the ESP is powered up or reset the IO pin will be set OFF at the start of the program. This is for avoiding lamps or motors to be put on immediately when the program starts.

The loop() just simply akes sure that the server is activated all the time.


String getPage()

This is where the interesting things happen. Let's look how the webpage is being build.

The first part just sets the width according to the width on which device the webpage is shown. A computer screen is wider as a phone screen or a tablet screen and that is what the vieuwport part takes care off.
Next the name of the page is defined and the background color which is my favorite powderblue.


  page += "<style>";

  page += ".green {";

  page += "height: 25px;";

  page += "width: 25px;";

  page += "background-color: #080;";

  page += "border-radius: 50%;";

  page += "display: inline-block;";

  page += "}";

  page += ".red {";

  page += "height: 25px;";

  page += "width: 25px;";

  page += "background-color: #f00;";

  page += "border-radius: 50%;";

  page += "display: inline-block;";

  page += "}";

  page += "</style>";

This part defines the CSS code for the led on the webpage. There is only one led and it will be green or red. The height and width are defined. The border radius command makes sure the led is round. Put the value 0% in there and the led will be a square.


  if (ledstate == 1)

  {

    page += "<div id='dot1' class='red'></div>&emsp;&emsp;&emsp;";

  }

  else

  {

    page += "<div id='dot1' class='green'></div>&emsp;&emsp;&emsp;"; 

  }

These lines are most important. As I stated at the beginning of this story and in the previous story the previous program from story number 2 had a flaw. The user did not know in which state the led actually is.
These lines take care of that.
The webpage receives the ledstate (being the IO port state) from the ESP. And then the led will get the color as defined by its state. In this case green when the led is off and red when it is on as defined in the CSS <style> lines.
The CSS code for the color and shape is called by the word class.


&emsp;

This is just standard HTML code that puts a fixed space after the led so we can put multiple leds on a line if we want with some space between them.

  page += "<FORM action=\"/\" method=\"post\">";

  page += "<button type=\"submit\" name=\"button1\" id=\"button1\" value=\"but1\" onclick=\'update()\'>CLICK ME</button>";

  page += "</form>";

This code puts the button on the screen. The name of this button is 'button1' and that is what the ESP will react upon. The value that is send when the button is clicked is "but1". If you want multiple buttons just copy this piece of code for eacht button and alter the name and the value. Then alter the code in the handleSubmit() routine accordingly.

  page += "function update() {";

  page += "if (document.getElementById('dot1').className == 'red'){";

  page += "element = document.getElementById('dot1');";

  page += "element.classList.remove('red');";

  page += "element.classList.add('green');";

  page += "}";

  page += "else{";

  page += "element = document.getElementById('dot1');";

  page += "element.classList.remove('green');";

  page += "element.classList.add('red');";

  page += "}";

  page += "}";

  page += "function myFunction() {";

  // Here we put commands that must be executed when the page is loaded

  page += "}";

  page += "</script>";

This part is the Javascript part of the webpage that alters the state of the led oin the screen when the button is pressed. If the led is red the class red is removed and replaced for the calss green and the other way round.

That's all folks...............

Looks complicated and maybe it is. However it will give you much freedom in designing your webpage. You can alter the background color and layout easily. You can alter the shape, size and color of the leds by just altering the CSS <style> codes.
You can even alter the looks of the button if you want.

This will give you the opportunity to build visual attractive websites for manipulating the IO ports on your ESP microcontrollers.

For more info on the HTML, CSS and Javascript used in this program look at the https://www.w3schools.com/ website which offers in-dept information and free courses on these subjects.

The ESP32

With some very small changes we can make the program above suitable for the ESP32.

Change the following lines in the beginning of the program:

#include <ESP8266WiFi.h>

#include <ESP8266WebServer.h>


ESP8266WebServer server(80);

into:

#include <WiFi.h>

#include <WebServer.h>


WebServer server(80);

and in the handleSubmit() routine change:

digitalWrite(D5, ledstate);

into:

digitalWrite(32, ledstate);

In the setup() routine change D5 into 32 for using the right IO pins on the ESP32 so change:



  pinMode(D5, OUTPUT);
  digitalWrite(D5,LOW);
into

  pinMode(32, OUTPUT);
  digitalWrite(32,LOW);
For cosmetics change the following line in the webpage part:


page += "<h1 style='color:red'>Luc's web-button for ESP8266</h1>";

into:


page += "<h1 style='color:red'>Luc's web-button for ESP32</h1>";

That's all

Next steps

So in this 3 parts in this series I covered how to input textfields on a website and send their text to the ESP, put buttons on a webpage and have the ESP react on them and visualise the state of the button and IO port. Next to that you can expand the website by putting sensor readings on it as discussed in earlier stories on this weblog.
All this will allow you to make decent looking webpages to control your ESP from remote locations.

In the next story I will show a very important expansion to the buttons. I will show you how to put sliders on the webpage for controlling RGB leds or the speed of a motor.

So stay tuned and have fun

Luc Volders

Friday, January 7, 2022

ESP Webserver tutorial part 2 - button

For an index to all my stories click this line.

This is the second installment in a series about building a webpage in the Arduino language for the ESP8266 and the ESP32 to command appliences.

This time I am going to show you how to put a button on a web-page which you can click and that action will set a led on the ESP off your choice on or off.

This seems like old school and has been done numerous times before. However I am taking a different approach. One I have not seen being used before and which opens possibilities for more ways to process the data which we receive from a webpage. So stay with me and let's make a webpage with many different items in this series.

This weblog entry leans heavily on the previous story in this series. That story showed you how to build a web-server and send text messages to the ESP. We are going to use that same webserver here but now for buttons. So please read and study the previous article first. You can find it here: http://lucstechblog.blogspot.com/2019/07/esp-webserver-tutorial-part-1-textfields.html

The ESP8266 setup routine.

The setup routine is the same as the routine in the program from the first article. I just added two lines that make IO pin D5 available for attaching a led:


  pinMode(D5, OUTPUT);
  digitalWrite(D5,LOW);

The button routine.

As we use the same web-server from the previous article in this series as a framework we only have to alter a few parts in the program to bring a button to the webpage.
There are two entries in the software. First the HTML part:


  page += "<FORM action=\"/\" method=\"post\">";
  page += "<button type=\"submit\" name=\"button1ON\" id=\"button1ON\" value=\"but1ON\">Led 1 ON</button>";
  page += "</form>";

  page += "<FORM action=\"/\" method=\"post\">";
  page += "<button type=\"submit\" name=\"button1OFF\" id=\"button1OFF\" value=\"but1OFF\">Led 1 OFF</button>";
  page += "</form>";
  page += "<br>";
  page += "<br>";

For each button (the ON and the OFF button) we build a webform. The button type is submit which makes sure the value is send to the webserver. The ON button will send the command but1ON to the ESP8266 and the OFF button will send but1OFF.

And then the server has to react on what it receives from the web-page:


   if (server.hasArg("button1ON"))
      {
      buttonON = server.arg("button1ON");
      Serial.print("Thereceived button is:             ");
      Serial.println(buttonON);
      Serial.print("If it is an integer its value is:        ");
      Serial.println(buttonON.toInt());
      digitalWrite(D5, HIGH);
      } 

   if (server.hasArg("button1OFF"))
      {
      buttonOFF = server.arg("button1OFF");
      Serial.print("Thereceived button is:             ");
      Serial.println(buttonOFF);
      Serial.print("If it is an integer its value is:        ");
      Serial.println(buttonOFF.toInt());
      digitalWrite(D5, LOW);
      }  

As you can see the server receives a command from the webpage. That command will be but1ON or but1OFF. Actually nothing is done with this command besides displaying it on the Serial Monitor. This just shows you how to send a command from the webpage to the ESP8266. You can alter these commands to your own purposes.
What the routine does however is directly set the led which is attached to D5 ON or OFF depending on the received command.

The ESP8266 breadboard setup

The breadboard setup is as simple as it can be.




Just an ESP8266, a Wemos D1 mini, with a led attached through a 220 ohm delimiting resistor to D5.


The ESP32 breadboard setup

The ESP32 breadboard setup is equally simple.




I am using the ESP32 Devkit Board. These ESP32's do not fit on a breadboard. I therefore use 2 breadboards. From one of these I stripped the power rail as discussed in the story you can find here:
https://lucstechblog.blogspot.com/2018/08/breadboard-hack-for-esp32-and-esp8266.html

The led is attached to GPIO32 through a 220Ohm current delimiting resistor.

The complete program.

I will not go over the framework here as I did that already in the previous story. If you want to re-read that just click this link: http://lucstechblog.blogspot.com/2019/07/esp-webserver-tutorial-part-1-textfields.html


You do need to make some minor alterations for using the program with the ESP32 which will be described below the listing.



 // ======================================================
// Webserver program that sends button information
// to ESP8266 and puts a control led on the page
// ======================================================

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

ESP8266WebServer server(80);

// Your routers credentials
const char* ssid = "YOUR-ROUTERS-NAME";
const char* password = "PASSWORD";

// ==========================================
// initial variables
// ========================================== 

String buttonON;
String buttonOFF;



// =========================================
// Here is the HTML page
// =========================================
String getPage()
  {
  String page = "<!DOCTYPE HTML>";
  page += "<html>";
  page += "<head>";
  page += "<meta name = \"viewport\" content = \"width = device-width, initial-scale = 1.0 maximum-scale = 2.5, user-scalable=1\">";
  page += "<title>Luc's button demo</title>";
  page += "<body style='background-color:powderblue;'>"; 
  page += "</head>";
  page += "<body>";
  
  page += "<h1 style='color:red'>Luc's web-button for ESP8266</h1>";
  page += "<br>";
  page += "<br>";

  page += "<FORM action=\"/\" method=\"post\">";
  page += "<button type=\"submit\" name=\"button1ON\" id=\"button1ON\" value=\"but1ON\">Led 1 ON</button>";
  page += "</form>";

  page += "<FORM action=\"/\" method=\"post\">";
  page += "<button type=\"submit\" name=\"button1OFF\" id=\"button1OFF\" value=\"but1OFF\">Led 1 OFF</button>";
  page += "</form>";
  page += "<br>";
  page += "<br>";

  return page;
  }


// ==================================================
// Handle for page not found
// ==================================================
void handleNotFound()
{
  server.send(200, "text/html", getPage());
}


// ==================================================
// Handle submit form
// ==================================================
void handleSubmit()
{
  //Text to show
   
   if (server.hasArg("button1ON"))
      {
      buttonON = server.arg("button1ON");
      Serial.print("Thereceived button is:             ");
      Serial.println(buttonON);
      Serial.print("If it is an integer its value is:        ");
      Serial.println(buttonON.toInt());
      digitalWrite(D5, HIGH);
      } 

   if (server.hasArg("button1OFF"))
      {
      buttonOFF = server.arg("button1OFF");
      Serial.print("Thereceived button is:             ");
      Serial.println(buttonOFF);
      Serial.print("If it is an integer its value is:        ");
      Serial.println(buttonOFF.toInt());
      digitalWrite(D5, LOW);
      }      
     
  server.send(200, "text/html", getPage());       //Response to the HTTP request

}  


// ===================================================
// Handle root
// ===================================================
void handleRoot() 
{   
  if (server.args() ) 
    {
    handleSubmit();
    } 
  else 
    {
    server.send(200, "text/html", getPage());  
    }
}


// ===================================================
// Setup
// ===================================================
void setup()
{
  delay(1000);
  Serial.begin(115200);

  // Connect to Wi-Fi network with SSID and password
  Serial.print("Connecting to ");
  Serial.println(ssid);
  WiFi.begin(ssid,password);
  while (WiFi.status() != WL_CONNECTED) 
  {
    delay(500);
    Serial.print(".");
  }
  // Print local IP address and start web server
  Serial.println("");
  Serial.println("WiFi connected.");
  Serial.println("IP address: ");
  Serial.println(WiFi.localIP());
  server.begin();
  server.on("/", handleRoot);
  server.onNotFound(handleNotFound);

  server.begin();
  delay(500);

  pinMode(D5, OUTPUT);
  digitalWrite(D5,LOW);
}


// ===================================================
// Loop
// ===================================================
void loop()
{  
  server.handleClient(); 
  delay(50);
}

The difference with the previous story was that in that story text was send from a textfield.  This version sends the data from a button. The details in sending the button data are described above.

The alterations for the ESP32

There are just some minimal alterations you should make for using this program with the ESP32.


#include <WiFi.h>
#include <WebServer.h>

WebServer server(80);

// Your routers credentials
const char* ssid = "YourRoutersName";
const char* password = "YourPassWord";

These are the first lines in the program being the lines that load and initialise the libraries. As you can see the changes are minimal.


  pinMode(32, OUTPUT);
  digitalWrite(32,LOW);

You also need to make some changes in the setup routine as the led is attached to GPIO32 as the breadboard setup showed you.

The last alterations you need to make in the  handleSubmit() routine.

digitalWrite(D5, HIGH);

Should be altered in:

digitalWrite(32, HIGH);

And

digitalWrite(D5, LOW);

Should be altered in:

digitalWrite(32, LOW);

The webpage



Here is how the webpage will look. Nothing to fancy. You could add some CSS code to make the buttons more attractive like having rounded corners and colors. I leave that up to you for now.


The difference with other programs.

Setting a button ON or OFF from a webpage has been done many times before. But there is a distinct difference here. Not only can we react immediately on the click on a button on the webpage by setting the led ON or OFF, we also receive a text which we can use and test on in other parts of the program. So we have more feedback as in other programs which do the same. And more feedback means more possibillities to act upon.

In the blind ???

The above featured program has a flaw. As we press the ON button or OFF button the led on the ESP8266 will react. However the website does not show us what was pressed. As long as we are near the ESP8266 we can check visually. However when you are using this program from a distant location you do not have a feedback. That is what we will tackle next time.


So make sure you understand what is happening in this program and make some alterations like extra headings and maybe a combination with buttons and a textfield like described last time. The better you understand all this the more attarctive your own websites will get. So get ready for the next step.


Till next time.
Have fun

Luc