Learn how to send an email alert with the ESP32 based on a temperature threshold. The ESP32 also hosts a Web Server that shows the latest sensor readings and input fields to change the threshold value, email’s recipient, and the option to arm or disarm the system.
Watch the Video Demonstration
To see how the project works, you can watch the following video demonstration:
The following image shows a high-level overview of the project we’ll build.
The following image shows an overview of the web server page.
Make sure you check each of the following prerequisites before proceeding with this project.
1. ESP32 add-on Arduino IDE
We’ll program the ESP32 using Arduino IDE. So, you need to have the ESP32 add-on installed in your Arduino IDE. Follow the next tutorial, if you haven’t already.
2. ESP32 Mail Client Library
In your Arduino IDE go to Sketch > Include Library > Manage Libraries…
The Library Manager should open. Search for ESP32 Mail Client by Mobizt and install the library as shown below.
3. Create a Sender Email (New Account)
We recommend creating a new email account to send the emails to your main personal email address. Do not use your main personal email to send emails via ESP32. If something goes wrong in your code or if by mistake you make too many requests, you can be banned or have your account temporary disabled.
We’ll use a newly created Gmail.com account to send the emails, but you can use any other email provider. The receiver email can be your personal email without any problem.
Create a new email account for sending emails with the ESP32. If you want to use a Gmail account, go to this link to create a new one.
Allow less secure apps
Allow less secure apps to get access to this new Gmail account, so that you’re able to send emails. You can open this link to go to that menu.
4. SMTP Server Settings
Before proceeding you need to know the SMTP server settings of the sender email.
Gmail SMTP Server Settings
If you’re using a Gmail account, these are the SMTP Server details:
Outlook SMTP Server Settings
For Outlook accounts, these are the SMTP Server settings:
Live or Hotmail SMTP Server Settings
For Live or Hotmail accounts, these are the SMTP Server settings:
If you’re using another email provider, you need to search for its SMTP Server settings.
5. Async Web Server and DS18B20 Libraries
In this project, we’ll build an asynchronous web server using the next libraries:
These two libraries aren’t available to install through the Arduino Library Manager, so you need to copy the library files to the Arduino Installation folder. Alternatively, in your Arduino IDE, you can go to Sketch > Include Library > Add .zip Library and select the libraries you’ve just downloaded.
Open your Arduino IDE and go to Sketch > Include Library > Manage Libraries. The Library Manager should open and you can install these libraries:
6. Parts Required
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!
Wire the DS18B20 temperature sensor to the ESP32 as shown in the following schematic diagram, with the data pin connected to GPIO 4
ESP32 Code – Email Web Server
Copy the following code to your Arduino IDE, but don’t upload it yet. You need to make some changes to make it work for you. You need to insert the sender’s email address, the recipient’s email address, your default threshold input and your network credentials.
How the Code Works
Continue reading to learn how the code works, or skip to the demonstration section.
Start by importing the required libraries. The WiFi, AsyncTCP and ESPAsyncWebServer are required to build the web server. The OneWire and DallasTemperature are required to interface with the DS18B20 and the ESP32_MailClient is required to send emails with the ESP32 via SMTP server.
Insert your network credentials in the following lines:
Insert the sender email – this is the email that will be used to send emails by the ESP32.
Type the email sender password:
In the next lines, insert the email sender SMTP server settings. We’re using a Gmail account. If you’re using another email provider you need to insert the right server settings.
Insert the email subject on the following line:
Next, we have some auxiliar variables to save the values submitted through the form. The inputMessage variable holds the recipient’s email. You can insert the default’s recipient’s email. You can change the recipient’s email later on the form.
The enableEmailChecked variable will tell us whether the checkbox to send an email is checked or not.
In case it’s checked, the value saved on the inputMessage2 should be set to true.
The inputMessage3 holds the temperature threshold value. By default is set to 25.0ºC, but you can set it to any other default value that makes more sense to you. You can also change it later in the HTML form.
The lastTemperature variable saves the last temperature value to compare with the current value.
Then, we have some basic HTML text to build a page with three input fields: the recipient’s email, a checkbox to enable or disable email notifications and the temperature threshold input field. The web page also displays the latest temperature reading from the DS18B20 temperature sensor.
The following lines display the temperature:
The %TEMPERATURE% is placeholder that will be replaced by the actual temperature value when the ESP32 serves the page.
Then, we have a form with three input fields and a “Submit” button. When the user types some data and clicks the “Submit” button, those values are sent to the ESP32 to update the variables.
The first input field is of type email, the second input field is a checkbox and the last input field is of type number. To learn more about input fields, we recommend taking a look at following resources of the w3schools website:
The action attribute of the form specifies where to send the data inserted on the form after pressing submit. In this case, it makes an HTTP GET request to:
The value refers to the text you enter in each of the input fields. To learn more about handling input fields with the ESP32, read: Input Data on HTML Form ESP32 Web Server using Arduino IDE.
The processor() function replaces all placeholders in the HTML text with the actual values.
Input Field Parameters
The following variables will be used to check whether we’ve received an HTTP GET request from those input fields and save the values into variables accordingly.
DS18B20 Temperature Sensor Init
Initialize the DS18B20 temperature sensor.
To learn more about interfacing the DS18B20 temperature sensor with the ESP32, read: ESP32 DS18B20 Temperature Sensor with Arduino IDE.
The smtpData object contains configurations and data to be sent via email. These configurations are set later on the sendEmailNotification() function.
In the setup(), connect to Wi-Fi in station mode and print the ESP32 IP address:
Initialize the DS18B20 temperature sensor:
Handle Web Server
Then, define what happens when the ESP32 receives HTTP requests. When we get a request on the root / url, send the HTML text with the processor (so that the placeholders are replaced with the latest values).
When a form is submitted, the ESP32 receives a request on the following URL:
So, we check whether the request contains input parameters, and save those parameters into variables:
This is the part of the code where the variables will be replaced with the values submitted on the form. The inputMessage variable saves the recipient’s email address, the inputMessage2 saves whether the email notification system is enabled or not and the inputMessage3 saves the temperature threshold.
After submitting the values on the form, it displays a new page saying the request was successfully sent to the ESP32 with a link to return to the homepage.
Finally, start the server:
In the loop(), we use timers to get new temperature readings every 5 seconds.
After getting a new temperature reading, we check whether it is above or below the threshold and send an email if necessary.
You’ll send an email alert, if all these conditions are met:
The email contains a message saying the temperature is above the threshold and the current temperature.
Then, if the temperature goes below the threshold, send another email.
To send emails, we’ve created the sendEmailNotification function that contains all the details to send the email. This function returns true if the email was successfully sent, or false if it failed. To learn more about sending emails via SMTP Server with the ESP32, read: ESP32 Send Emails using an SMTP Server.
Upload the code to your ESP32 board (with the DS18B20 wired to your ESP32 board).
Open the Serial Monitor at a baud rate of 115200 and press the on-board RST button. The ESP32 will print its IP address and it will start displaying new temperature values every 5 seconds.
Open a browser and type the ESP32 IP address. A similar web page should load with the default values (defined in your code):
If the email notifications are enabled (checkbox checked) and if the temperature goes above the threshold, you’ll receive an email notification.
After that, when the temperature goes below the threshold, you’ll receive another email.
You can use the web page input fields to set up a different recipient’s email address, to enable or disable email notifications, and to change the threshold value. For any change to take effect, you just need to press the “Submit” button.
At the same time, you should get the new input fields in the Serial Monitor.
In this project you’ve learn how to set a threshold value and send an email notification when the temperature crosses that value. We hope you’ve found this project interesting. Now, feel free to modify the project to meet your own needs. For, example, when the temperature crosses the threshold, you may also want to trigger an output to control a relay.
In this project, we’ve used raw HTML text, to make the project easier to follow. We suggest adding some CSS to style your web page to make it look nicer.
Instead of using a DS18B20, you might consider using a different temperature sensor: DHT vs LM35 vs DS18B20 vs BME280 vs BMP180.
If you want to learn more about the ESP32, try our projects and resources:
Thanks for reading.
This content was originally published here.