Hello! Welcome to Embedic!
This website uses cookies. By using this site, you consent to the use of cookies. For more information, please take a look at our Privacy Policy.
Home > Embedded Events > Smart Thermometer with ESP-01F and Web Socket

Smart Thermometer with ESP-01F and Web Socket

Date: 18-08-2021 ClickCount: 109

This tutorial teaches you how to make ATTINY 85 a simple thermometer that can work for more than 140 days on one battery, and after 40 days of work, it can still do its job with great efficiency.


When it comes to electronic devices and programming, many people may be discouraged. So, in this tutorial, let Embedic show you how to make a thermometer on steroids, and in the process of learning, Embedic sure you'll learn a lot about electronic devices and programming, so let me get started!


The device will have the following features.


1. Real-time reading using WebSockets

2. Auto-sleep when not in use

3. Control thermometer from the web

4. Stylish PCB design

5. Integrated esp-01F programmer

6.3D printing case


Step 1: Why ESP-01F?


In version 1, the flash memory storage is very limited, almost only 8kb, and I had some difficulties to run different libraries. So, this time I chose the esp-01f, which comes with 1MB flash memory, 128 times bigger than ATTINY 85. It also has WiFi, UART and clock speed up to 160MHz. even if it is not critical for this particular project, we can adjust the specs to make the thermometer look more practical and efficient.


The price is that it is not cheap. esp-01f is a very power hungry module because it has on-board wifi connectivity, but this power consumption can be greatly reduced by putting the module in deep sleep, it should only consume 20uA.


Step 2: Other components

Other components

The other components are similar to the thermometer version 1. For the display, I used the same 0.91" 128X32 OLED display for the temperature sensor DS18B20 probe, and finally the battery uses a small 150MAh Li-ion battery.


Step 3: Some details

Some details

First of all, the esp-01f has a very small size and no built-in antenna. So, either we have to build one on the PCB or add an external antenna, otherwise there will be stability issues and shorter wifi connection range.


In any case, other than programming, this module is difficult to use because of the small footprint and the inability to solder it on any performance board. Many of my previous programming methods and techniques did not work well with this problem.


Step 4: USB to Serial Converter

USB to Serial Converter

This is why I plan to integrate a USB to serial converter to program the esp-01f. Just like the ones on development boards like Arduino, Nodemcu, etc. So, technically, if you can provide more pins to the thermometer, it can be used as a development board, which is one of the reasons why I say it's efficient.


To implement a serial programmer, there are many options, we can use the cheapest CH340, mainly seen on Arduino clones, or the FTDI. previously used on the original Arduino development boards. I would not use them because their IC package is very large and much bigger than the wifi module.


Step 5: CP2102 USB to serial port

CP2102 USB to serial port

I chose the CP2012. this is a USB to serial converter from Silicon Labs, mainly used for NodeMCU and ESP32 development boards. they are quite affordable compared to the FTDI and the IC package size is very small, making them perfect for our device.


Step 6: Charging Circuit

Charging Circuit

There is one more problem, the LiPo battery. Since it is a rechargeable battery, we need to charge it. One way we can do this is to remove and charge the battery and reinstall it when we are done. But we need to add a tp4056 IC and a micro USB to have an on-board charging circuit.


Step 7: Solder


Everything went very smoothly, just plug in the micro USB and the charging circuit to charge the battery, just connect this micro USB to the PC and you can program the esp-01f using the Arduino IDE.


Step 8: Programming the smart thermometer

Programming the smart thermometer

Programming is very easy in this version. Simply open the code (Github) "Thermometer V2.ino" in the Arduino IDE and set the Arduino IDE to upload the code to the esp8285. when you press the upload button, the code should automatically refresh the esp8285 with the latest code, but if not, simply click and hold the program button shown in the first image during the upload process.


Step 9: Making the Web Page

Making the Web Page

I kind of hate web development, but I managed to build a haphazard web page using WebSockets that displays some real-time temperature readings from the temperature sensor. It doesn't use any fancy libraries or fancy frameworks. It is written in HTML, CSS and Vanilla Javascript (code).


Step 10: 3D printing and assembly

3D printing and assembly

With the board ready to go, I wanted to make a snazzy case for the thermometer. I was going to make a bong, but unfortunately I didn't have that in mind when I was working on the PCB design. So it was quite difficult to build and it didn't look that good, so I had to abandon the idea.


Instead, I measured the exact dimensions of the PCB and started designing a simple and elegant enclosure, while still managing to access the circuitry as easily as version 1 without any fasteners.


Step 11: Testing the Smart Thermometer

 Testing the Smart Thermometer

Simply click the top button, which will reset the esp and wake it up from sleep mode. Once the device is active, it will open the access point to which we can connect. Once connected open any web browser and search for the IP address assigned in the code or by searching for a website. That's it, now we can measure the temperature by clicking Start and view the live data on the web page. You can also put the thermometer to sleep by clicking the Sleep button. This will clear the display and put the thermometer into a deep sleep. If the device is on for more than a minute and no one is connected to the web page, the device will automatically go into deep sleep to save power.


Final step: Test power consumption

Test power consumption

As I told you at the beginning of the tutorial, due to the ESP-01F, the power consumption will be higher than version 1. Therefore, if you see a multimeter reading when the access point is on and the client is connected, the power consumption will be about 93mA. When the thermometer is in deep sleep, it draws about 1.8mA, which is significant compared to the previous version which drew less than 60uA. Considering that the ESP-01F consumes about 20uA (from the datasheet), the total circuit consumption should still be below 100uA. The reason it consumes 1.8mA is because we added other features such as the charging circuit and the on-board CP2102 USB to serial programmer.

  • Electronic kitchen timer based on 8-bit STM8S103F3P6 microcontroller and encoder
  • 5 features of high-performance MCUs to help you meet the challenge with ease!

Hot Products

  • ADSP-BF518BSWZ-4F4

    Manufacturer: Analog Devices

    IC DSP 16/32B 400MHZ LP 176LQFP

    Product Categories: DSP



  • PIC16C710-04/P

    Manufacturer: Microchip

    IC MCU 8BIT 896B OTP 18DIP

    Product Categories: 8bit MCU



  • TMS320C6747BZKB3

    Manufacturer: Texas Instruments


    Product Categories: DSP



  • PIC18F46K42-E/PT

    Manufacturer: Microchip


    Product Categories: 8bit MCU



Customer Comments

  • Looking forward to your comment

  • Comment

    Verification Code * 

Compare products

Compare Empty