Send Data From ESP to the Webpage with Minimal Efforts

Why this tutorial

It's very common that you need to display something to a webpage from your ESP device. There are several ways to do that. In this tutorial, I will show you the simplest one (in my opinion). It requires 10 minutes of your time to get your measurements onto the webpage.

I've used remoteMe.org

In this tutorial, briefly learn how to send and display data from ESP (I used WEMOS D1 pro version, but it will be the same for other types of ESP ) on the website. In the example, I used the ultrasonic distance sensor and the measurement from it will be displayed on the website.

Video

The whole step-by-step is posted in the video:

Assumptions

• We will use the mechanism of variables
• The integer variable will be set by ESP
• The same variable will be displayed on the website in the form of a gauge
• We can display the page on the website opened on the mobile browser by scanning the QR code

Connections

• VCC – 5v
• GND – GND
• Trig – trough Level converter or resistors set – D3
• Echo – trough Level converter or resistors set – D2

Webpage

You need an account at https://app.remoteme.org in sign up tab you can create your account for free.

After creating the account, go to the variables tab and on the right on the top “Add” fill in:

More about fields here

After this step, we have our variable in the system, which will be update by ESP and displayed on the webpage.

To add a website.

Go to the “Devices”, “New Device” tab and then “New Web Page”:

Fields described  here

Now we will add a component to display the variable. Open the web page bar, click on index.html, then “Edit With wizard”, and “Insert Component”:

Choosing the “1” magnifier we choose our variable “distance” – because we want the status of this variable to display our component.

More about code generation here

After clicking “Insert”, we can open our website in the new tab (index.html open in new tab) we get:

Of course, gauge shows 0 – the default value of the variable. In order for the gauge to move, we have to change our variable by the ESP code.

ESP Sketch

Before upload sketch make Sure You have install all required libraries:
https://remoteme.org/network-devices/

To start with, we need to add our device in RemoteMe:

Go to the “Devices”, “New Device” tab and then “New Network device”.

Filled :

Fields Described here

It’s time to generate the code for arduino, click “burger menu” and “Code generator wizard”:

In the first step, we mark our variable, in the second the parameters of our Wifi network, in the next steps we do not change anything. In the last step, click “View” to display our code, which should be pasted to the Arduino IDE

#define WIFI_NAME "ania24"
#define WIFI_PASSWORD "xxxxxx"
#define DEVICE_ID 11
#define DEVICE_NAME "esp"
#define TOKEN "~155_D49LDj@aBFhdffK."
 
 
#include <RemoteMe.h>
#include <RemoteMeSocketConnector.h>
#include <ESP8266WiFi.h>
 
#define TRIGGER D3 //added
#define ECHO    D2 //added
 
RemoteMe& remoteMe = RemoteMe::getInstance(TOKEN, DEVICE_ID);
 
//*************** CODE FOR CONFORTABLE VARIABLE SET *********************
 
inline void setDistance(int32_t i) {remoteMe.getVariables()->setInteger("distance", i); }
 
//*************** IMPLEMENT FUNCTIONS BELOW *********************
 
 
 
 
 
 
void setup() {
 
    WiFi.begin(WIFI_NAME, WIFI_PASSWORD);
 
    while (WiFi.status() != WL_CONNECTED) {
        delay(100);
    }
    
    remoteMe.setConnector(new RemoteMeSocketConnector());
    remoteMe.sendRegisterDeviceMessage(DEVICE_NAME);
    pinMode(TRIGGER, OUTPUT); //added
    pinMode(ECHO, INPUT); //added
}
 
 
void loop() {
    remoteMe.loop();
//added
    static long time=millis();
    if (time+700<millis()){//cannot send more frequent since it will be block
      time=millis();
      setDistance(getDistance());
    }
// END added
}
 
//added
int32_t getDistance(){ 
  digitalWrite(TRIGGER, LOW);  
  delayMicroseconds(2); 
  
  digitalWrite(TRIGGER, HIGH);
  delayMicroseconds(10); 
  
  digitalWrite(TRIGGER, LOW);
  long duration = pulseIn(ECHO, HIGH);
  return (duration/2) / 29.09;
  
  
}

Added code lines marked by //added:

#define TRIGGER D3
#define ECHO    D2

We define the connection of pins to make the code clearer.

pinMode(TRIGGER, OUTPUT);
pinMode(ECHO, INPUT);

Pins setup

 static long time=millis();
    if (time+700<millis()){//cannot send more frequent since it will be block
      time=millis();
      setDistance(getDistance());
    }

Sending distances to the remoteMe system we used the setDistance function generated by the “wizard”

The code block also makes sure that you do not send measurements more than 700ms, because RemoteMe will not allow you to send more messages in a minute than 110 minutes.

The measurement function itself looks as follows:

int32_t getDistance(){
  digitalWrite(TRIGGER, LOW);  
  delayMicroseconds(2); 
  
  digitalWrite(TRIGGER, HIGH);
  delayMicroseconds(10); 
  
  digitalWrite(TRIGGER, LOW);
  long duration = pulseIn(ECHO, HIGH);
  return (duration/2) / 29.09;
}

How ultrasonic sensor and the code works at this article

After uploading the ESP program, with the open web page, we will see that our gauge shows the measured distances.

Smartphone

To open the website it is best to scan the QR code available after clicking index.html -> get anymous link -> “green QR code icon”. This will allow us to open and automatically log in to our account, more here.

Summary

In this article I showed the easiest way to display the measurement on a website, of course variables can be more, and we can display them on different components, and even add your own. 

I encourage you to read the articles about the techniques used, the links of which I put in the article. To be up to date You can follow FB page of the project.