Temperature Sensor Web Display With the ESP8266

So I just had to get one of the ESP8266 chips and give it a try.

I was really intrigued by the size and also the possibility of using it as a stand alone system. I bought one online from AliExpress for a few dollars and waited the necessary month for delivery but all was well when it eventually arrived.

Step 1: What I Used

For my trial I wanted to use the ESP8266 to read a digital thermometer and transfer the results to a web site for visualization.

Here's what I used:

1 ESP8266-E12

1 Keyes Arduino Compatible DS18B20 Digital Temperature Sensor

1 Lithium ion battery 3.7v (which I salvaged from an old digital camera).

Step 2: Connecting Everything Up

Well I won't go through all the nitty gritty of the wiring as there are better instructables out there but the attached diagram is a good starting point

The main points are:

1. I used a mini breadboard to connect the ESP and the Thermometer to the battery.

2. I made use of a USB to TTL converter (also bought from AliExpress). Makes life nice and easy in order to upload your code to the ESP board.

3. Arduino IDE used to write and upload the program

Step 3: The Arduino Code

So this is the beauty if the ESP8266. We can avoid having to use an arduino board at all and just use the ESP itself.

My program simply:

1. Reads the temperature sensor

2. Sends the data to a web page

3. Puts the ESP board into sleep mode.

Step 3 is the most critical since we want this to run on a battery and therefore use as little power as possible. We do this by invoking the ESP's deepSleep() command, passing the function a duration for when it is to wake up again. As a result the program only ever runs once, and only as far as the deepSleep() command. When the board wakes up it performs a reset and starts the program again.

The following is the main snippet:

Temperature = sensors.getTempCByIndex(0);
t = Temperature.toFloat() * 100;

//I multiply it by 100 so that I can pass a full integer to the web page

//At the web page I then divide by 100 to get the full decimal value.

Temperature = String(t);

// Why "byIndex"? // You can have more than one IC on the same bus.

// 0 refers to the first IC on the wire

sendToWeb(Temperature); // My web page is a simple PHP page which expects a single parameter

// I simply do a HTTP GET to pass the data.

ESP.deepSleep(SLEEPTIMEINSECONDS * 1000000);

delay(1000); //Should never get here

Step 4: The Web Page

The web site is composed of two aspects:

1. A PHP page which accepts the temperature posts and writes the data to a txt file with the corresponding date and time of the temperature reading. Watch out for the time zone your web server is in. I found my website was sitting somewhere in the US ( I'm in Europe) and saving the US local date time. This was easily fixed by setting the time zone in the PHP code.

2. A HTML + javscript page which displays the temperature chart.

This was a little tricky since I had no experience with developing charts for websites. But this is where the beauty of the internet and open source comes in. I quickly found a super cool javascript charting library by www.amcharts.com/javascript-charts. What a great library guys! I used the free version and was also able to find an example of how to load a txt file. With a little bit of tweaking I had my temperature data on screen and able to zoom in and out. Thanks again amcharts.