esp8266 tft display quotation

When the system is pluged in to power, it will connect to the WiFi (the connection informations --- ssid and password ---, must be configured in code ), will display an inspirational quote for one hour and go to sleep for 24 hours. After the long sleep, it will connect again to the WiFi, display another quote and go to sleep. Again and again.

But there is a plot twist. The used microcontroller (ESP8266) can go to sleep for only 3 hours and 25 minutes (according to the Internet --- see IV.Credits --- ). So I decided to wake up the microcontroller after the before mentioned time (3 hours and 25 minutes) and then put it back to sleep. This will be done 7 times (a total of 23 hours). To keep track of the numbers of wake-ups between 2 quotes, I saved a counter in the RTC user memory from the ESP8266 ( --- see IV.Credits --- ). In this way, when the microcontroller goes to sleep the counter will be kept.

This seems to be all, but... IT IS NOT! The RTC from ESP8266, when this microcontroller is in DeepSleepMode, is not very precise ( in my tests it will fall behind with at least 1 hour in 23 hours of DeepSleep ). So to fix this issue, I made the ESP8266 to take the time from an NTP Server, after displaying the quote for an hour, and storing the hours and minutes in the RTC memory. When the 7 cycles of waking-up and going back to sleep, the ESP8266 take again the time from the NTP Server and compare the stored time with the one took seconds ago. If the hour stored is later than the current hour, the ESP8266 will go to DeepSleep for the remaining time between the two intervals of time ( the stored one and the current one ).Else, if the number of minutes stored are greater than the number of current minutes, the ESP8266 will go to LightSleep for the remaining number of minutes between the two intervals of time ( this time, the RTC is precise enough to wake up the ESP8266 at the exact time ).

// https://www.aliexpress.com/store/product/3-2-TFT-LCD-Display-module-Touch-Screen-Shield-board-onboard-temperature-sensor-w-Touch-Pen/1199788_32755473754.html?spm=2114.12010615.0.0.bXDdc3

In the previous article (“WiFi OLED Mini Weather Station with ESP8266“) I have used the OLED kit from https://blog.squix.org. And as promised, this time it is about the “ESP8266 WiFi Color Display Kit”:

I had ordered both because I thought that the Color Display kit is needs the other kit as a base. Well, it turned out that both kits work independently. My bad. Actually this is good, as I have now two independent ESP8266 weather stations :-). An addition to that, they can exchange data (e.g. temperature/humidity) with a server, so that makes them a perfect dual weather station.

This time assembling the kit needs basic soldering skills. With the excellent tutorial by Daniel Eichhorn  (https://blog.squix.org/wifi-color-display-kit) this should be a piece of cake. The only consideration is what kind of headers to use. I opted for the ‘larger but flexible’ approach. That way I can separate the boards if needed.

Example code is available on GitHub (https://github.com/squix78/esp8266-weather-station-color). The code is very well documented I had no issues to make all the needed configuration (WiFi SSID and connection settings). After a few  hours I had the ESP8266 weather station up and running in the first prototype of the enclosure:

After a few hours, I have now my second ESP8266 WiFi weather station with touch LCD. It is not looking good and I very much enjoy it. The design is available on Thingiverse (https://www.thingiverse.com/thing:2527282).

The ILI9341 TFT module contains a display controller with the same name: ILI9341. It’s a color display that uses SPI interface protocol and requires 4 or 5 control pins, it’s low cost and easy to use.

The resolution of this TFT display is 240 x 320 which means it has 76800 pixels. This module works with 3.3V only and it doesn’t support 5V (not 5V tolerant).

The ILI9341 TFT display board which is shown in project circuit diagram has 14 pins, the first 9 pins are for the display and the other 5 pins are for the touch module.

So, the display part pins are numbered from 1 to 9 (from left to right): VCC (5V), GND (ground), CS (chip select), RST (reset), DC (or D/C: data/command), MOSI (or SDI), SCK (clock), BL (back light LED) and MISO (or SDO).

Pins D5 (GPIO14) and D7 (GPIO13) are hardware SPI module pins of the ESP8266EX microcontroller respectively for SCK (serial clock) and MOSI (master-out slave-in).

The first library is a driver for the ILI9341 TFT display which can be installed from Arduino IDE library manager (Sketch —> Include Library —> Manage Libraries …, in the search box write “ili9341” and choose the one from Adafruit).

The ILI9341 TFT display is connected to NodeMCU hardware SPI module pins (clock and data), the other pins which are: CS (chip select), RST (reset) and DC (data/command) are defined as shown below:

This tutorial shows how to display images (.png and .jpg) in your ESP32 or ESP8266 web servers using Arduino IDE. We cover how to embedded images in an asynchronous web server using the ESPAsyncWebServer library or in a simple HTTP server.

SPIFFS stands for Serial Peripheral Interface Flash File System and it is a lightweight filesystem created for microcontrollers with a flash chip like the ESP32 and ESP8266.

To upload images to the ESP32 and ESP8266 flash memory, we’ll use a plugin for Arduino IDE: Filesystem uploader. Follow one of the next tutorials to install the filesystem uploader depending on the board you’re using:

This section shows how to display an image stored in the ESP32 or ESP8266 flash memory in a web server using the ESPAsyncWebServerlibrary. To build this web server, you need to install the following libraries:

Create a new sketch in Arduino IDE and copy the following code. This code works both with the ESP32 and ESP8266. It includes the proper libraries depending on the board you’re using.

Then, in your Arduino IDE, upload the images to your board. Go to the Toolsmenu and select “ESP32 Sketch Data Upload” or “ESP8266 Sketch Data Upload” depending on the board you’re using.

When it receives a request on /sun URL, we send the image that is stored on the /sun.png path in the ESP32/ESP8266 SPIFFS (filesystem) and it is of type image/png.

This section shows how to convert your images to base64 to include them in the ESP32/ESP8266 web server. We’ll show you how to display images in an asynchronous web server and in a simple HTTP server.

Note: to display images, it is better to use the method with the Asynchronous web server (the previous example). You might have issues with this method if you try to display a lot of images or use large files. However, this method works well if you just want to display a small image or icon.

In this article we’ve shown you different ways to display images in your ESP32/ESP8266 web servers. If you know any other suitable method, you can share it by writing a comment below.

Welcome to my new Weather Widget Project. Earlier I have posted an article on the weather widget, that uses a 0.96" OLED display to display the weather parameters. The main problem in the earlier version is that the display is very small in size, so you have to come very close to it for reading the parameters. That"s why it was always in my mind to upgrade it to a larger color display with a nice 3D printed enclosure.

In this post, I will show you how to make a Weather Widget by using ESP8266 and a 2.8" touch screen display. The device retrieves localized weather information from https://openweathermap.org/ by WLAN and displays it on the Display module.

I would like to give credit to my friend Dani Eichhorn who did all of the programming parts. He is updating the software on his Github page regularly with new features. You can visit SquixTechBlog to see more projects on ESP8266.

My plan is to place the weather display circuit inside a 3D-printed enclosure. But the enclosure that I am going to use is very compact, and there is little room to keep the Wemos board along with the connecting wires inside the housing.

The wiring diagram is very straightforward. You have to connect the TFT display module ( ILI9341 ) pins with Wemos pins as per the schematic diagram. The schematic diagram is shown above. You may also follow the following pin mapping

First, download the schematic diagram, then take a printout. It Is really handy during the soldering and you will save a lot of time also. The most important thing is any mistakes in the connection may damage the display module or Wemos board. During the making of this project,

2. Enterhttps://arduino.esp8266.com/stable/package_esp8266com_index.json into the File>Preferences>Additional Boards Manager URLs field of the Arduino IDE. You can add multiple URLs, separating them with commas.

After setting up Arduino IDE and installing all the libraries we can move to upload the code into the ESP8266 board ( Wemos D1 Mini Pro or any other board )

First, you have to unzip the code downloaded in the earlier step and then save it somewhere on your PC or Laptop. Remove the word master from the folder name, the final name shall be " esp8266-weather-station-color "

After mounting the display unit and circuit board, we can move to box up the housing by using the two covers. The enclosure is designed with very tight clearance, so you don"t need any glue or screw to hold the covers.

Align the cover with the slot in the enclosure and press it all around, you are done. The smaller cover is for the base part and the larger one is for the backside of the display part.

If you are successfully uploaded the code into the ESP8266, you will immediately notice the display on the front page by searching the WiFi Network for connection. After connecting the device to your WiFi router, it will update the time and weather data from the web.

Now you will be able to see all the weather information along with all other parameters on the TFT display. You can swap between the different pages by using the stylus or touching with your finger.

Display to integrate into electronic circuits. Approximate size: 28 x 26 x 3mm. Device designed for integrators and designers of electronic circuits and RC. High quality electronic components. OLED viewfinder WeMos D1 64x48 I2C / IIC TFT ESP8266 compatible NodeMcu LUA.

The project gets the weather forecast from the openweathermap.org website. In order to parse the weather data we need the excellent Arduino JSON library. We also need two libraries for the display.

Let’s see the code now. At first, we have to set the SSID and the password of our WiFi network. Next, we have to enter the free APIKEY from operweathermap.org website. In order to create your own API key, you have to sign up in the website. Getting current weather data and forecast is free but the website offers more options if you are willing to pay some money. Next, we have to find the id of our location. Find your location and copy the ID which can be found in the URL of your location. Then enter your city’s id in the CityID variable. The last step is to enter your time zone in order for the project to display the correct time. Now we are ready to move on.

At first, we connect to the WiFi Network. Then we request weather data from the server. I only request one result, the weather forecast for the next 3 hours. You can easily modify the code to get more forecast results if you wish. We get a reply with the weather data in JSON format. Before sending the data to the JSON library I manually delete some characters that were causing me problems. Then the JSON library takes over and we can easily save the data that we need in variables. We have to take a look at the structure of the JSON data that the openweathermap website replies to see how to get the data we are interested in. After we have saved the data in variables, all we have to do is to display them on the screen and wait for 30 minutes before requesting new data from the server. We display the time of the weather prediction, the temperature and the weather icon. The weather icons consist of some bitmap graphics and some simple shapes. I have also prepared a version of the code which displays the temperature in degrees Fahrenheit.

The Arduino IDE needs to be updated with the board packages for the ESP8266.  This is very easy to do and both Sparkfun & Adafruit have detailed guides on how to do this;

Once the ESP8266 is up an running, the remaining RAM is divided up into;RAM for TCP/IP Stack. If using the refresh function on the main page which has gauges, then there needs to be enough RAM left to accommodate the TCP sessions for the refresh.

We will allocate as much RAM as we can to track historical data. This means, we need to work out how much RAM we will need for the TCP/IP stack and we also need enough for the ESP8266 to run.

The variable count is used to work out if the array is full or not.  When the ESP8266 is first started, the array is empty and we just keep adding values to the next available row. Once the array is full, we cycle the data and then add the latest values to the end.

When a web browser requests a page from the ESP8266, the ESP8266 will respond with a HTML page which will have the temperature and pressure data, as well as code which will force the browser to use google charts to display this data.

Creating HTML pages for the ESP8266 web server is easy, however the pages have to be built from scratch. This means you have to include html headers and GET response codes.

It is important that you don"t make the string to large before sending to the web browser, otherwise the ESP8266 will crash. You can see that in the code snippet below that halfway through the html page, I send the string and then starting building the string  again.

First of all, the pins are named differently from all the examples I can find for connecting it to my ESP32 microcontroller. For example, the TFT specs describe: