Send data from ESP to the webPage with minimal effort

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.

In this tutorial, briefly 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

Connections

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 updated by ESP and displayed on the web page.

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

Added code lines marked in yellow:

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

Pins setup

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:

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 now shows the measured distances.

Smartphone

To open the website it is best to scan the QR code available after clicking index.html -> get anonymous 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