In this project, you’ll build a sensor monitoring system using a TTGO LoRa32 SX1276 OLED board that sends temperature, humidity and pressure readings via LoRa radio to an ESP32 LoRa receiver. The receiver displays the latest sensor readings on a web server.

With this project you’ll learn how to:

Watch the Video Demonstration

Watch the video demonstration to see what you’re going to build throughout this tutorial.

Project Overview

The following image shows a high-level overview of the project we’ll build throughout this tutorial.

Project Overview ESP32 LoRa Sender and ESP32 LoRa32 Receiver board

For an introduction to LoRa communication: what’s LoRa, LoRa frequencies, LoRa applications and more, read our Getting Started ESP32 with LoRa using Arduino IDE.

Parts Required

For this project, we’ll use the following components:

You’ll also need some jumper wires and a breadboard.

You can use the preceding links or go directly to MakerAdvisor.com/tools to find all the parts for your projects at the best price!

Preparing the Arduino IDE

To program the TTGO LoRa32 SX1276 OLED boards we’ll use Arduino IDE. To upload files to the ESP32 filesystem, we’ll use the ESP32 filesystem uploader plugin.

So, before proceeding, you need to install the ESP32 package and the ESP32 filesystem uploader plugin in your Arduino IDE.

For this project you need to install several libraries.

LoRa, BME280 and OLED Libraries

The following libraries can be installed through the Arduino Library Manager. Go to Sketch > Include Library> Manage Libraries and search for the library name.

Asynchronous Web Server Libraries

These libraries are not available to install through the Library Manager. So, you need to unzip the libraries and move them to the Arduino IDE installation libraries folder.

Alternatively, you can go to Sketch > Include Library > Add .ZIP library… and select the libraries you’ve just downloaded.

NTPClient Library

Everytime the LoRa receiver picks up a new a LoRa message, it will request the date and time from an NTP server so that we know when the last packet was received.

For that we’ll be using the NTPClient library forked by Taranais. Follow the next steps to install this library in your Arduino IDE:

Alternatively, you can go to Sketch > Include Library> Add .ZIP library… and select the library you’ve just downloaded.

LoRa Sender

The LoRa Sender is connected to a BME280 sensor and sends temperature, humidity, and pressure readings every 10 seconds. You can change this period of time later in the code.

LoRa Sender Circuit

The BME280 we’re using communicates with the ESP32 using I2C communication protocol. Wire the sensor as shown in the next schematic diagram:

BME280 ESP32
VIN 3.3 V
GND GND
SCL GPIO 13
SDA GPIO 21

LoRa Sender Code

The following code reads temperature, humidity and pressure from the BME280 sensor and sends the readings via LoRa radio.

Copy the following code to your Arduino IDE.

How the Code Works

Start by including the necessary libraries for LoRa, OLED display and BME280 sensor.

Define the pins used by the LoRa transceiver module. We’re using the TTGO LoRa32 SX1276 OLED board V1.0 and these are the pins used by the LoRa chip:

Note: if you’re using another LoRa board, check the pins used by the LoRa transceiver chip.

Select the LoRa frequency:

Define the OLED pins.

Define the OLED size.

Define the pins used by the BME280 sensor.

Create an I2C instance for the BME280 sensor and a bme object.

Create some variables to hold the LoRa message, temperature, humidity, pressure and reading ID.

Create a display object for the OLED display.

setup()

In the setup(), we call several functions that were created previously in the code to initialize the OLED display, the BME280 and the LoRa transceiver module.

loop()

In the loop(), we call the getReadings() and sendReadings() functions that were also previously created. These functions are responsible for getting readings from the BME280 sensor, and to send those readings via LoRa, respectively.

getReadings()

Getting sensor readings is as simple as using the readTemperature(), readHumidity(), and readPressure() methods on the bme object:

sendReadings()

To send the readings via LoRa, we concatenate all the readings on a single variable, LoRaMessage:

Note that each reading is separated with a special character, so the receiver can easily identify each value.

Then, send the packet using the following:

Each time we send a LoRa packet, we increase the readingID variable so that we have an idea on how many packets were sent. You can delete this variable if you want.

The loop() is repeated every 10000 milliseconds (10 seconds). So, new sensor readings are sent every 10 seconds. You can change this delay time if you want.

Testing the LoRa Sender

Upload the code to your ESP32 LoRa Sender Board.

Go to Tools > Port and select the COM port it is connected to. Then, go to Tools > Board and select the board you’re using. In our case, it’s the TTGO LoRa32-OLED V1.

Finally, press the upload button.

Open the Serial Monitor at a baud rate of 115200. You should get something as shown below.

The OLED of your board should be displaying the latest sensor readings.

Your LoRa Sender is ready. Now, let’s move on to the LoRa Receiver.

LoRa Receiver

The LoRa Receiver gets incoming LoRa packets and displays the received readings on an asynchronous web server. Besides the sensor readings, we also display the last time those readings were received and the RSSI (received signal strength indicator).

The following figure shows the web server we’ll build.

As you can see, it contains a background image and styles to make the web page more appealing. There are several ways to display images on an ESP32 web server. We’ll store the image on the ESP32 filesystem (SPIFFS). We’ll also store the HTML file on SPIFFS.

Organizing your Files

To build the web server you need three different files: the Arduino sketch, the HTML file and the image. The HTML file and the image should be saved inside a folder called data inside the Arduino sketch folder, as shown below.

Creating the HTML File

Create an index.html file with the following content or download all the project files here:

We’ve also included the CSS styles on the HTML file as well as some JavaScript that is responsible for updating the sensor readings automatically.

Something important to notice are the placeholders. The placeholders go between % signs: %TIMESTAMP%, %TEMPERATURE%, %HUMIDITY%, %PRESSURE% and %RSSI%.

These placeholders will then be replaced with the actual values by the Arduino code.

The styles are added between the <style> and </style> tags.

If you want a different image for your background, you just need to modify the following line to include your image’s name. In our case, it is called winter.jpg.

The JavaScript goes between the <scritpt> and </script> tags.

We won’t explain in detail how the HTML and CSS works, but a good place to learn is the W3Schools website.

LoRa Receiver Arduino Sketch

Copy the following code to your Arduino IDE or download all the project files here. Then, you need to type your network credentials (SSID and password) to make it work.

You start by including the necessary libraries. You need libraries to:

Define the pins used by the LoRa transceiver module.

Note: if you’re using another LoRa board, check the pins used by the LoRa transceiver chip.

Define the LoRa frequency:

Set up the OLED pins:

Enter your network credentials in the following variables so that the ESP32 can connect to your local network.

Define an NTP Client to get date and time:

Create variables to save date and time:

More variables to store the sensor readings received via LoRa radio.

Create an AsyncWebServer object called server on port 80.

Create an object called display for the OLED display:

processor()

The processor() function is what will attribute values to the placeholders we’ve created on the HTML file.

It accepts as argument the placeholder and should return a String that will replace that placeholder.

For example, if it finds the TEMPERATURE placeholder, it will return the temperature String variable.

setup()

In the setup(), you initialize the OLED display, the LoRa communication, and connect to Wi-Fi.

You also initialize SPIFFS:

Async Web Server

The ESPAsyncWebServer library allows us to configure the routes where the server will be listening for incoming HTTP requests.

For example, when a request is received on the route URL, we send the index.html file that is saved in the ESP32 SPIFFS:

As mentioned previously, we added a bit of Javascript to the HTML file that is responsible for updating the web page every 10 seconds. When that happens, it makes a request on the /temperature, /humidity, /pressure, /timestamp, /rssi URLs.

So, we need to handle what happens when we receive those requests. We simply need to send the temperature, humidity, pressure, timestamp and rssi variables. The variables should be sent in char format, that’s why we use the .c_str() method.

Because we included an image in the web page, we’ll get a request “asking” for the image. So, we need to send the image that is saved on the ESP32 SPIFFS.

Finally, start the web server.

Still in the setup(), create an NTP client to get the time from the internet.

The time is returned in GMT format, so if you need to adjust for your timezone, you can use the following:

loop()

In the loop(), we listen for incoming LoRa packets:

If a new LoRa packet is available, we call the getLoRaData() and getTimeStamp() functions.

The getLoRaData() function receives the LoRa message and splits it to get the different readings.

The getTimeStamp() function gets the time and date from the internet at the moment we receive the packet.

Uploading Code and Files

After inserting your network credentials, save your sketch. Then, in your Arduino IDE go to Sketch > Show Sketch Folder, and create a folder called data. Inside that folder, you should have the HTML file and the image file.

After making sure you have all the needed files in the right directories, go to Tools and select ESP32 Data Sketch Upload.

After a few seconds, the files should be successfully uploaded to SPIFFS.

Note: if you don’t see the “ESP32 Sketch Data Upload” option that means you don’t have the ESP32 filesystem uploader plugin installed (how to install the ESP32 filesystem uploader plugin).

Now, upload the sketch to your board.

Open the Serial Monitor at a baud rate of 115200.

You should get the ESP32 IP address, and you should start receiving LoRa packets from the sender.

You should also get the IP address displayed on the OLED.

Open a browser and type your ESP32 IP address. You should see the web server with the latest sensor readings.

With these boards we were able to get a stable LoRa communication up to 180 meters (590 ft) in open field. These means that we can have the sender and receiver 180 meters apart and we’re still able to get and check the readings on the web server.

Getting a stable communication at a distance of 180 meters with such low cost boards and without any further customization is really impressive.

However, in a previous project using an RFM95 SX1276 LoRa transceiver chip with an home made antenna, we got better results: more than 250 meters with many obstacles in between.

The communication range will really depend on your environment, the LoRa board you’re using and many other variables.

Wrapping Up

You may also want to access your sensor readings from anywhere or plot them on a chart:

We hope you’ve found this project interesting. If you’d like to see more projects using LoRa radio, let us know in the comments’ section.

Thanks for reading.

This content was originally published here.