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
- 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 mobile browser by scanning the QR code
Connections
- VCC – 5v
- GND – GND
- Trig -through level converter or resistor set- D3
- Echo -through level converter or resistor 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:
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
#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 #define ECHO D2 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); pinMode(ECHO, INPUT); } void loop() { remoteMe.loop(); static long time=millis(); if (time+700<millis()){//cannot send more frwquent since it will be block time=millis(); setDistance(getDistance()); } } 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 in yellow:
|
1 2 |
#define TRIGGER D3 #define ECHO D2 |
We define the connection of pins to make the code clearer.
|
1 2 |
pinMode(TRIGGER, OUTPUT); pinMode(ECHO, INPUT); |
Pins setup
|
1 2 3 4 5 |
static long time=millis(); if (time+700<millis()){//cannot send more frwquent 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:
|
1 2 3 4 5 6 7 8 9 10 11 |
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 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