loading

Hello Friends,

in this Instructable we are going to see hot to build this Weather Forecast Display. It uses a Wemos D1 mini board along with a 1.8” Color TFT screen to display the weather forecast. I also designed and 3d printed an enclosure for this project using wood filament! I got the inspiration for this Art Deco style enclosure from an old radio. I wanted a design for the Weather Station that would be unique and somehow artistic, I was bored of the square enclosures without any character. I wanted something to make me feel good when looking at it.

The project connects to the internet and retrieves the weather forecast for my location and displays it on the screen. The project only displays the weather icon, the temperature and the time of the prediction because I wanted a minimal look for this project. Of course you can easily add more information if you wish. Now let’s see how to build this project.

Step 1: Get All the Parts

The parts needed in order to build this project are the following:

The cost of the project is very low it is around $12!

We also need an enclosure for this project. If you like the Art Deco enclosure I designed for this project you download it from Thingiverse.

Get it here ▶ http://www.thingiverse.com/thing:1964380

Step 2: The Wemos D1 Mini

The Wemos D1 mini is fantastic new board which costs around $5!

The board is very small. It uses the ESP8266 EX chip which can operate at a frequency up to 160MHz. It has a lot of memory, 64Kb of instruction RAM, 96Kb of data RAM and 4MBs of flash memory to store your programs. It offers WiFi connectivity, Over the Air updates and much more. The D1 mini board offers 11 GPIO pins and one analog input. Despite its small size many shields are being developed for this board which I think is great, since this way we can easily build great Internet of Things projects! Of course we can program this board using the Arduino IDE.

The board despite its small size it outperforms all the other Arduino compatible boards in performance. I have performed a comparison between the ESP8266 and Arduino, you can check the video I have attached in this step. This board is 17 times faster than an Arduino Uno! It also outperforms the fastest Arduino board, the Arduino Due. All that, with a cost of less than $6! Impressive.

Step 3: The 1.8" Color TFT Display

This is a 1.8" Color TFT display which uses the ST7735 driver. This was the first color display to use with Arduino and the color display I use the most. It is inexpensive, it costs around $6, it has a resolution of 160x128 pixels, it can display 65.000 colors, it offers and SD card slot at the back and it has a great library support. It works on every Arduino, it works on Teensy and with the ESP8266 boards! What else to ask about? A great display!

I have prepared a detailed video tutorial about this display and I have attached in this instructable.


Step 4: Build the Prototype Circuit

It is now time to connect all the parts together. It is very easy. We only need to connect 8 wires!

Connecting the 1.8" Color TFT Display

  1. Vcc of the display goes to the 5V output of the Wemos D1 mini
  2. GND of the display goes to the Wemos GND
  3. CS pin goes to Digital Pin 2
  4. Reset pin goes to Digital Pin 4
  5. A0 pin goes to Digital Pin 3
  6. SDA pin goes to Digital Pin 7
  7. SCK pin goes to Digital Pin 5
  8. LED pin goes to the 3.3V output of the Wemos D1 mini

That's it! The electronics are ready! If we power up the project, everything works as expected!

Step 5: 3D Print the Enclosure

The next step is to 3D print the enclosure. I designed this enclosure using Fusion 360 free software.

I tried a lot of different 3d design software but Fusion 360 became my favorite for the following reasons.

  • It is very powerful
  • It is free
  • It is relatively easy to use
  • There are a lot of tutorials online on how to use this software

I took me around half an hour to 3D desing this enclosure and have in mind that I am very new to 3D design and 3D printing. It is the second design that I have ever made! This design is based on the design of an old, very old radio.

If you like the Art Deco enclosure I designed for this project you download it from Thingiverse.
Get it here ▶ http://www.thingiverse.com/thing:1964380

I 3D printed it using wood filament. I used Form Futura’s Easy Wood Coconut filament. I have to say that this filament is by far my favorite. It looks and feels great.

Step 6: Finishing the 3D Print

The enclosure consists of 3 parts, and it took me afew hours to print it, but the result was fantastic!

After the print was over, I sanded the parts using fine sand paper. Then polished them using wood varnish. I waited for about a day for the varnish to dry before proceding the project.

The end result is impressive.

Since I am very new to 3d printing my technique for polishing the 3d print may not be ideal, but the end result is really great!

Step 7: Connecting Everything Together

After the wood varnish was dry, I attached the display to the front piece with some tape and soldered the wires to the Wemos D1 mini board. I then connected the wires to the screen. After testing the circuit again to be sure that everything is working as expected it was time to glue the Wemos D1 mini board in place.

Unfortunately, the design was not perfect and the parts didn’t fit in the enclosure for an error of a couple millimeters, so I had to make some modifications to the design the hard way. The 3D files that I have uploaded are the correct ones, after the modifications were transferred to the 3D design.

Then, I powered up the project and centered the display before attaching it permanently with hot glue. It was then time to glue a small piece of fabric on the front piece in order to add some color and contrast to the enclosure. The last step was to glue all the parts together! Our project is ready! Impressive isn’t it? I really like the shape and the feel of the enclosure. It makes an ordinary Weather Station to look unique. Let’s now see the software side of the project.

Step 8: The Code of the Project

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.

The libraries needed are the following:

  1. Adafruit GFX: https://github.com/adafruit/Adafruit-GFX-Library
  2. Adafruit ST7735: https://github.com/adafruit/Adafruit-ST7735-Libra...
  3. Arduino JSON: https://github.com/bblanchon/ArduinoJson

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 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 result 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 in 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.

You can find the code of the project attached to this Instructable. I order to download the latest version of the code you can check the project's website here: http://educ8s.tv/art-deco-weather-forecast-display

Step 9: Final Result

As you can see, with the technology now available we can build impressive projects easily and with very low cost! This project is a clear demonstration of this, it costs less than 15$! Of course, we can add many things to this project in order to improve it. We can add a speaker and make it an MP3 player, we can add an FM radio receiver and turn it into a vintage radio and many more things. I would love to hear your opinion about this project. Do you have any ideas on how to improve this project? Please post your thoughts and ideas below. Thanks!

<p>Been playing with the code today. Didn't care for the time stamp display so I changed it to display the weather description. Cool project!</p>
<p>After correcting an error in my APIKEY the weather data loaded fine! </p>
<p>Success!</p><p>After getting my IDE properly configured for the ESP8266 I was able to get a clean compile and install. </p><p>I'm sitting here watching the LCD display &quot;Connecting...&quot; so there may be a bit more work to do before I can successfully forecast the weather. This has been a very fun project! </p>
<p>Do you need the ESP8266 library also?</p>
<p>Yes, you need the following 4 libraries:</p><p>ESP8266WiFi.h, ArduinoJson.h, Adafruit_ST7735.h and Adafruit_GFX.h</p>
<p>About the libraries, </p><p>#include &lt;ESP8266WiFi.h&gt;<br>#include &lt;ArduinoJson.h&gt;<br>#include &lt;Adafruit_ST7735.h&gt;<br>#include &lt;Adafruit_GFX.h&gt;</p><p>The ESP8266 library has the color orange, and the other ones still black. What does this mean., is this an error?</p>
<p>VERY cool project, I am in the process of making my own. Just a quick question however, you mentioned you could add a FM radio to this project and make it a vintage radio as well. How difficult is this and could you list steps to that end goal? I will post pics of my finished project. Thank you for the instructable- </p><p>Cheers!</p>
<p>Adding an FM radio receiver is not difficult. I will prepare an instructable about that soon. </p>
<p>Hi educ8s,</p><p>I very much like the case you made. At first looks I wondered what material you used and I did not expext it to be printed as you normally see the lines. What printer are you using?</p><p>Nico</p>
<p>Hello friend,</p><p>I am using the Wanhao Duplicator i3. It is a low cost 3D printer and the result with the wood filament is fantastic. With proper sanding the result can be very smooth!</p><p>Cheers!</p>
<p>Ok, Thanks for the tip. I did get the libraries installed, but now I get totally different errors. There are a lot mentioning things like: &quot;_cs' was not declared in this scope&quot;. There are many more errors stating the same thing, but mentioning other things like &quot;_rs was not declared in this scope&quot; and &quot;sid&quot;, &quot;sclk&quot;, &quot;scpinmask&quot;, &quot;csport&quot; and so on...</p><p>It's kinda driving me crazy. Perhaps I have too many files included, or maybe missing some???</p><p>When I have the Arduino open, I have the following tabs at the top of the code included:</p><p>WeatherForecast_F, Adafruit_GFX.cpp, Adafruit_GFX.h, Adafruit_ST7735.cpp, Adafruit_ST7735.h, ArduinoJson.h, gfxfont.h, and icons.c</p><p>I am guessing that something is either missing or I've got too much stuff added to the arduino file.</p><p>What on earth am I doing wrong here? </p>
<p>Have you installed the ST7735 library from the above link or by the Library Manager of the Arduino IDE?</p>
<p>I have both. I downloaded the file from above, and I went into the Arduino program and by using &quot;manage libraries&quot; I downloaded the Adafruit ST7735 library.</p>
<p>Hello and thank you</p><p>(COMPLETE newbie here, definitely not dummiesproof)</p><p>all I get is a blank screen. I am not 100% sure of my soldering skills: is there a way to see if my GPIO solders are good with a voltmeter? I tried to load examples (circles) from arduino prog, I installed the library. Still blank screen. I can get the wemos board led to bleep with basic script.</p>
<p>Edit, soldered my second Wemos D oins, plugged to my second TFT screen (I wanted to make 2). Tried cross-testing items. Still a blank screen. I used the link provided in the description for the products so .</p><p>Is there something like a demo mode for screen when plugged to a wemos without any library or example loaded? Or is it white?</p>
<p>I'm not very &quot;up-to-speed&quot; with Arduino, but I am trying to learn. I've tried to compile this code and when I click on the &quot;Verify&quot; button I get an error message. Can someone tell men what is wrong? It seems to indicate that there is no &quot;file included called &quot;adafruit_ST7735&quot; but I've copied it and included it in the Arduino file for the board. Thanks much ahead of time.</p><p>Here is the resulting error message copied from the Arduino programmer:</p><p>Arduino: 1.6.13 (Mac OS X), Board: &quot;WeMos D1 R2 &amp; mini, 80 MHz, 115200, 4M (3M SPIFFS)&quot;</p><p>/Users/StevenandJoy/Desktop/Arduino/WeatherForecast_F/WeatherForecast_F.ino:9:29: fatal error: Adafruit_ST7735.h: No such file or directory</p><p>#include &lt;Adafruit_ST7735.h&gt;</p><p>^</p><p>compilation terminated.</p><p>exit status 1</p><p>Error compiling for board WeMos D1 R2 &amp; mini.</p><p>This report would have more information with</p><p>&quot;Show verbose output during compilation&quot;</p>
<p>Hello friend,</p><p>You need to install the library, please google &quot;how to install Arduino libraries&quot; to learn how to achieve that.</p>
How is this Powered?
<p>yeah, he didnt record connecting power. both boards appear to be 5 volts... so you can take it from there (off the shelf power brick or even inserting a battery but the USB (used to program it) should also work to power it<br><br>great idea and project but rates at advanced due to steps omitted since they are obvious to a DIY veteran but a newbie might get confused</p>
<p>I had a question about displaying the temperature in Farenheit (for those countries like mine - a country that can accomplish great things - but thinks it's too difficult to change a measuring system LOL) and saw that on your web link you have code to do just that. THANKS, again.</p><p>http://educ8s.tv/art-deco-weather-forecast-display </p>
<p>Very neat! The one thing I don't like- It looks like you can see an edge of the screen (I know, it's my problem, call me a perfectionist if you will). If I was to build something like this, I think I'd use an OLED display, and maybe add some more functionality. Even better, combine this with the raspberry pi Amazon Echo project in <a href="https://www.instructables.com/id/Build-a-Raspberry-Pi-Powered-Amazon-Echo/">this instructable</a>, and get an awesome art-deco personal assistant! Oh, if only I had time and money for all these awesome ideas. ;D</p>
<p>WOW!! Art Deco, Right down to the wood fiber plastic! That material really finishes this project.</p><p>My fanatical nature for completeness only wishes you would have created screw bosses for mounting the boards and a mechanical key for the display.</p><p>I would very much like to build this project, although with my additions ;-) </p><p>Kudos to you!</p>
<p>Hello friend, </p><p>Thank you very much for your comment and the nice words! You are right about the imrovements! I am very new to 3D printing and to making in general, and this is my first &quot;complete&quot; project. Your additions will further improve the project and it look! I would to see a similar project from you, please post some images when ready!</p><p>Thanks!</p>
<p>WOW! Lots of good information here, and a great design! Thanks!</p>
<p>Thank you very much! I really appreciate it!</p>
great design. I love the case.
<p>I love the design as well, and with the help of the 3D printing technology we can build anything we want. What a time to be alive!</p>
wow, what a great design! love the look
<p>Thanks for the nice words!</p>

About This Instructable

13,617views

249favorites

License:

Bio: I am Nick Koumaris from Sparta, Greece. I'm extremely passionate about electronics, making things and design. I love teaching what I know and sharing ... More »
More by educ8s:YouTube Subscriber Counter Using an ESP8266 Board Arduino Fingerprint Sensor Tutorial Arduino Easy Weather Station With BME280 Sensor 
Add instructable to: