ESP8266 PlaneSpotter Color

Do you like this post? A regular project like the PlaneSpotter Color takes many hours of my free time to develop and maintain. Would you offer me a beer for my hard work if I was your neighbour? Modern technology called teleportation makes it easy to send me a beer. Just click here. Thank you!

After many hours of work I’m very happy to finally publish all the sources for the ESP8266 PlaneSpotter project. It is not yet really in a V1.0.0 state but I’m sure with the help of the community it will quickly get better. While this post is more a “making-of” you can find build instructions on Github: https://github.com/squix78/esp8266-plane-spotter-color

 

 

The Beginnings

A few months back I had already built and published a PlaneSpotter project for the tiny OLED screens. It was quite useful but could only display text information about the nearest plane. How much cooler would it be to have a tiny and affordable device displaying a map with airplanes on it, just like the apps you have on your smart phone? The idea kept coming back to me but one important puzzle piece was missing: the TFT library could only display raw bitmap files (BMP) and I didn’t know of any mapping service which would let you download bmp images. Of course, I could have built a web service which would have converted JPEGs and PNGs to BMPs on the fly but that wasn’t really my goal. So I was stuck with the idea until I recently found Frederic Plante’s fork of the JPEGDecoder library with adaptations for the ESP8266. This suddenly changed the game and I started working on the PlaneSpotter Color project.

 

The JPEGDecoder library

It seems that this library has seen several iterations and forks. It is built around Rich Geldreich’s picojpeg library which is very good on embedded devices with limited memory. The library was wrapped by Makoto Kurauchi 3 years ago for Arduino. Then Bodmer created a new repository and added more samples until Frédéric Plante ported it to the ESP8266. There might have been too much forking and copying but it is still a very good example for how open source works. Since this library is currently not available in the Arduino IDE library manager you’ll have to clone Frédéric’s repository or download the zip file.

 

JPG with distortions

While the maps from MapQuest were displayed without issues I had problems with other JPEG files. The splash screen which I had ordered from a Fiverr designer didn’t display properly on the TFT. I had opened it in GIMP and exported it with the proper dimensions but on the TFT it would always show up with artefacts. I first suspected compression but the artefacts did even shop up with 0% compression (or 100% quality). Another open source tool had to help: ImageMagick’s identify showed me that images which worked at a sampling factor of 1×1, 1×1, 1×1 while my Gimp export had 2×2, 1×1, 1×1. So keep in mind if you want to display your own files.

From what I could tell the library currently cannot decode data from PROGMEM. What does that mean? When you mark a variable or array with the PROGMEM keyword it will not be loaded into your memory after startup but stay packed in your firmware. With a special read command you can then read this data and do what you need with it. Usually font files also use this little trick. This is quite cool since you don’t have to upload images to the ESP8266 by using an additional Arduino IDE plugin. In the WeatherStation Color I had worked around this problem by downloading the moon phase images from my web server. But having the images in the source code is much better. You can create your own images on a Linux/Unix system like this:

xxd -i image.jpg | sed "1s/.*/const uint8_t image[] PROGMEM = {/" | sed "s/ [a-zA-Z_]*_len/ image_len/" > image.h

Explanation: the xxd command creates a hex dump of image.jpg but it doesn’t contain the PROGMEM keyword. So the first sed command replaces the first line with a new one. The second sed replaces the name of the variable that holds the length of the array. Then the file is written to a header file.

I mentioned that the library is currently not capable of loading data from PROGMEM. I therefore wrote a little routine which copies the PROGMEM data onto the SPIFFS file system of the ESP. From there the JPEGDecoder library can read it.

 

The Wifi GeoLocator

I’m most probably not the first one to do this but I still think it’s worth mentioning. Did you know that your ESP8266 has a GPS device built-in? Well, it is not exactly a GPS device but under certain situations can be even more precise. It works by scanning visible access points and sending them with the signal strength to a web service. If your database is good enough and contains the necessary SSIDs you will get a pretty decent location fix. This only works if you are connected to the internet and if you can call the webservice but hey, it basically comes for free.

Alexandar Mylnikov is running such a webservice which is fairly easy to use:

https://api.mylnikov.org/geolocation/wifi?v=1.1&data=open&bssid=00:0C:42:1F:65:E9

which returns a JSON object:

{"result":200, "data":{"lat": 45.21981301815, "range": 125.417, "lon": 16.54716187303, "time": 1483362238}}

There is also a beta version which takes a base64 encoded list of multiple bssids and the rssi (signal strength) which in theory should result in even higher precision.

 

Drawing on the TFT

The current setup shows an ugly flickering with the update of the data every few seconds. Sadly I couldn’t find a way around that issue yet and this is for a good reason. In the OLED display library I could just build a frame buffer, do all drawing operations there and then write the whole buffer to the display. But 128*64*1 bits don’t consume so much memory like 320*240*16 . (2 bytes per pixel with a resolution of 320×240). There are certainly some tricks you can use to work around this issue but they would currently consume time I don’t have. If you have suggestions or even pull-requests on github, please let me know.

You might also notice that the flight tracks are not working 100% properly yet. Sometimes they seem to forget their past and start over again.

 

PCB design, Fritzing and KiCad

In this project I tried out a lot of new things. One of them was designing my own printed circuit board. The board is actually quite simple and only needs to connect the 14 pins of the Touch screen/ TFT with the Wemos D1 Mini. I had used Fritzing to create a wiring diagram so it was easy to turn it into a PCB. After a bit of renaming files I was able to send the Gerbers to http://dirtypcbs.com/ and after about 10 days I had my first ever self-designed PCB in my hands. I soldered the TFT and the Wemos D1 Mini onto the board and everything fit nicely. How big was my disappointment when nothing would light up? I first was afraid that had designed a short between two pins which Fritzing hadn’t warned me about but the connectivity test revealed that I simply had forgotten one connection between the ESP8266 and the display. That could be solved quickly by adding a bodge wire as you can see on the photo:

Faulty PCB design, fixed with a wire (click to zoom)

Even before I had received the Fritzing PCB from dirtypcbs.com I had worked through a great KiCad video tutorial by Chris Garmel (Contextual Electronic). With the help of the tutorial I had a PCB design ready in no time. But I have to say that KiCad is not the most intuitive tool;-). I sent them off to https://oshpark.com/ and received 3 wonderful boards. Sadly I had made a mistake again. The Wemos pins were so far inside of the PCB that I only could attach the USB connector if the Wemos board was soldered with a gap to the connector board. This defied the goal to have a design as flat as possible:

The second faulty design: the Wemos D1 Mini must be about 3-4mm from the connector board or the USB plug does not fit

I updated the KiCad file and I’m currently waiting for a new delivery.

 

OpenScad and the 3D printed enclosure

The last piece of the puzzle was to design an enclosure for the hardware. I like to use OpenScad for that since it lets you “program” the objects which is a good thing for a programmer;-).

Lid
Case Bottom
Case from top

Posted by squix78

55 comments

  1. Observation, you could pull the weather icons from the Weatherunderground server rather than host them yourself. I think they do-not apply any read quotas.

    Did embedding the icons in flash prove to be too great an overhead?

    1. Hi David. If I’m not mistaken these icons are from a 3rd party (which reminds me to put their credits up). So I’d have to host it somewhere anyway. I currently also only use uncompressed bmp format and I doubt that any reasonable person still has them around for normal use;-). And then: downloading has the advantage to be easier to change compared to embedding in the firmware… But it was a design decision. Comparing pros and cons…

    1. Hi Stephen. I plan to upgrade the plane spotter project to the color screen, so yes, it’s definitely possible. Just a question of time:-)

  2. Hi,

    I have a working esp8266 weather but the small LCD only.
    im trying this one as i have the exact LCD lying around. i saw the “settings.h” where values need to be changed. (i.e. wundeground API, country, city, etc).. the only one that i was not sure and I did not see any explanation was the ThingSpeak value.

    May i ask what is the purpose of the Thingspeak value? i tried to view it but I think its a private channel.

    Anyway, i uploaded it on NodeMCU and when i inspect the Serial monitor, i can get to the part where it downloads the pictures.
    Here is the last bottom lines on the Serial.
    There is a line that says “connection failed.”…. Im guessing it has something to do with the Thingspeak..or maybe something else..

    …….(lots of downloding lines here…………..)
    Downloading http://www.squix.org/blog/moonphase_L19.bmp and saving as /moon19.bmp
    Downloading http://www.squix.org/blog/moonphase_L20.bmp and saving as /moon20.bmp
    Downloading http://www.squix.org/blog/moonphase_L21.bmp and saving as /moon21.bmp
    Downloading http://www.squix.org/blog/moonphase_L22.bmp and saving as /moon22.bmp
    connection failed
    connection failed
    connection failed
    connection failed

    Loading image ‘unknown.bmp’
    File not found
    Loading image ‘/mini/unknown.bmp’
    File not found
    Loading image ‘/mini/unknown.bmp’
    File not found
    Loading image ‘/mini/unknown.bmp’
    File not found
    Loading image ‘/moon0.bmp’
    File not foundconnection failed
    connection failed
    connection failed
    connection failed

    1. Hi Glenn,
      The purpose of the Thingspeak channel is to display (say) your own local temperature and humidity. So I have an ESP8266 and BME280 sensor running that reports every 10-mins to thingspeak the current temperature and humidity in my garden. Therefore I provide the keys for my channel and it gets reported on the weather display. Ideally there would be a software (compile time) switch to remove that option.

  3. Please ignore the comment below.
    I was able to solve it. Apparently, the wifimanager didn’t connect successfully to my router, so i had to manually connect and put the static SSID and password.

    So its working now, yey! i can see the pictures and the icons properly.

    im still dumbfounded with the Thingspeak channel in the settings.h.
    May i know if that is really needed?

    1. Hi Glenn, I’m a program newbie and met same message from serial port, but I struggled for long time but cant overcome this issue, do you mind give me some suggestion?

      Thanks!

  4. Hi,
    Is there any chance regarding tutorial how to call bitmaps using WiFi connection?
    I want to prepare own set of icons but I don’t know how to use it in your script 🙁
    As well I have a question reagrding screen refreshing, as I see that is the issue when the time is updated and some pixels are not removed?
    Thanks in advance for help.
    Piotr

  5. Very impressive weather station, works great!
    If it could automatically update summer/winter-time, it would be absolutely perfect.
    Have fun with the beer 😉

  6. I was able to get this running, but wanted to mention a small issue I ran into. (Sounds like the same one Mike McRoberts references.) The bitmaps require more than 1M of SPIFFS, so if you were like me and had selected only 1M at compile time, you run out of space to download all of the bitmaps, and many of the moon-phase bitmaps will fail to download, or will be perhaps truncated or corrupted. I went back and changed to 4M (3M SPIFFS) in the IDE and was able to solve this. Still having a bit of overlay issues with the time updates, but as Daniel mentioned, the code may still need a little work.

    Thanks for all the effort on this…now to add some of my own tweaks!

  7. Hi Daniel,
    i tried to flash the script but i will receiving all the time the following error:
    *******************************
    In file included from esp8266-weather-station-color.ino:34:0:
    C:\Users\Jens\Documents\Arduino\libraries\esp8266-weather-station-color-master/WebResource.h:25:31: fatal error: ESP8266HTTPClient.h: No such file or directory
    #include
    ^
    compilation terminated.
    Fehler beim Kompilieren.
    *******************************
    I added the ESP8266HTTPClient-library to the Arduino 1.6.5 but there is still the same error.
    Do you have any idea what i can make that the script will runing?
    Jens

    1. Same error here, anybody found a solution for this? I have Arduino 1.6.5, tried ESP core module from v2.0.0 up to v2.3.0. Also the wifi manager did not show a config page, if I use ESP core 2.1.0 or higher…

  8. Unfortunately Banggood.com are no longer stocking the 2.2 Inch Serial TFT SPI Display ILI9341 display! Can it be obtained from another supplier? Or can an alternative be used?

    I would like a bigger screen for my PlaneSpotter project so that I can enclose everything in a case with the lcd screen acting as a box top : )

  9. Dani, excellent! Built this over the weekend (preparing to teach another IoT class this week) and almost worked flawlessly (2.4″ TFT + Wemos D1 Mini). Couldn’t get the WifiManager to connect, tried a few different things then finally went manual mode. The 199: timeClient.updateTime(); would sometimes hang, changed the .h to use “us.pool.ntp.org” instead; didn’t do a lot of troubleshooting, was more in quick-fix mode. Maybe later this month I’ll try incorporating Neptune’s daylight savings code back into this (thanks btw for the link to that). PS will try to get some pictures with the kids doing projects over the session the next two weeks. Regards, Mike

    1. Mike, you stated that you changed the .h to use “us.pool.ntp.org”. What is the path/filename to that .h file?

  10. Dani,

    I’ve been adding some of my own enhancements to your original code for several weeks now, and thought I’d share some of my changes in case anyone was interested. I’ve posted these on GitHub if you’re interested…https://github.com/fowlerk/ESP8266-Color-Weather-Station-v8 .
    This version includes many enhancements to the displays (see the README on GitHub), along with Neptune’s enhancements for daylight savings time. The code could stand some clean-up, but otherwise seems to work well.

    Let me know what you think…I’ll post some photos of the displays when I get a chance.

    Keith Fowler

    1. Hi Keith

      You put some really nice things into the code! I knew that the WifiManager had this configuration UI feature but never got around to use it in my code. Now with your code I have a very nice example to use it;-). Thank you a lot for sharing! I just posted your fotos on Twitter and linked to your repository, I hope you don’t mind.

      I am working ATM on a 2.4″ display with touch. This would allow to switch screens or similar…

      Dani

      1. Dani…I don’t mind at all, in fact I’m honored. One thing to note, which I pointed out in the README on the repo, is that I have added a few fields over the past few months that may (or may not) have made it into the Weather Station library for the Weather Underground functions. Not sure how exactly to go about getting those into the master. (You may even be able to spot these on some of the displays.) I did not put those library changes up on the repo.

        I’d also had my eyes on those touch-screens and had similar thoughts on using them to control the screen displays. I’m anxious to see what you end up doing with it. Your projects always give me more ideas to try ;).

    2. keith, can you ples tell me what i need to download in the the IDE program to set this up there are so many files i do not know what one i need ! thansk

      1. Andrew…yes, sorry for not making this more clear in the documentation. I’ve (mostly) just used libraries that others have contributed and were already referenced in Dani’s examples, but you’re right that the list has gotten relatively long and may take some digging to find all the sources. Give me some time today and I will add the links to the documentation on my Github repository.

      2. I have updated the README on my repository with info on the contributed libraries and links to make it easier to find these. Let me know if you have any other questions.

  11. Hey Dani and Keith, I just tried this out a few days ago and love it. Just wanted to confirm that when I tried to use Keiths’ version, it failed to compile due to the changes in the Weather_Station library. I would really like to try out this version if one of you could point me at the correct library.
    This was my first project with an esp8266 and I am really surprised at how powerful and easy it is to use.

    Kevin

    1. Kevin…yes, sorry, I knew that would bite someone. I really wanted to get the changes merged into Dani’s master library rather than start off on another branch. In the interim, I have uploaded the two changed library files for the Weather Underground components to a separate folder on the repo if you want to download those to (temporarily) replace the original ones in the Weather Station library. That should allow it to compile. Let me know if that doesn’t work for you. Hopefully I’ll figure out the right (permanent) solution to address the changes soon.

      Keith

      1. Thanks for the update Keith,

        I got the new code and everything works great. Now I just have to figure out how to make it work with a bigger screen, maybe 7 inch. My eyes ain’t what they used to be. 🙂

        Kevin

        1. Glad you got it working Kevin…and I know what you mean about the old eyes! I’m right there with you. I’m torn between the compact size and being able to read all the data displayed without my glasses ;). Let me know if you find a bigger option that works well for a reasonable cost.

  12. Dani…just made a pull request on your repository to add some of the changes I had made to your Weather Underground library. Let me know if you have questions or issues.

  13. Dani, I just made another pull request for some new updates to the Weather Underground client library. These include changes to support some additional enhancements I have been working on recently that display weather alerts (as per the WU API call “/alerts”), as well as the addition of probability of precipitation (PoP). I have uploaded a new version to my repository on GitHub that shows these additional enhancements (see the README for further details), along with screenshots.

    As always, let me know if you have any questions or issues, and best wishes for the upcoming holidays!

  14. Hi Daniel. I don’t like the Ardunid IDE because of the lack of debugging with breakpoints. Therefore, I’ve just started with VisualGDB and JLink debugger and ESP8266. I have quite some difficulties.

    Do you have any experiences with VisualGDB?

    By the way: I am situated near Zurich and I like your projects! Great work!

  15. I have been having a lot of fun working through the examples with your weatherstation library. I bought your kit, which was an easy way to get started with the ESP8266.
    I am working through the WeatherStationDemoExtendedDST, for some reason updateData is not firing every 10 minutes. updateDHT is working fine, fires every minute.
    I think this is where the problem is, it isn’t setting readyForWeatherUpdate to true. However, it looks exactly the same as your other examples.
    if (readyForWeatherUpdate && ui.getUiState()->frameState == FIXED) {
    updateData(&display);
    }
    Thanks for any help.

  16. Figured it out. Apparently you can’t attach two events to a single ticker? I created two tickers, and now it works.
    tickerUpdateData.attach(UPDATE_INTERVAL_SECS, setReadyForWeatherUpdate);
    tickerUpdateSensor.attach(60, setReadyForDHTUpdate);

  17. I have problems getting it to run with Arduino 1.8.1, esp8266 2.3.0 board plugin and an SPI display. I have to slow down SPI to 250 kHz, otherwise I get all but pixel trash. But when I set OLEDDISPLAY_REDUCE_MEMORY I get a blank screen.

    Do you know of any problems with given setup? Can you recommend a good working combination of Arduino IDE, ESP plugin and SPI settings?

    1. I am a bit confused: which project are you referring to? The OLED Weather station or the color weather station which uses an TFT? Since you posted this in a Color Weather Station post I assume you are referring to the color code? But why then use the OLEDDISPLAY_REDUCE_MEMORY? Can you share a gist which shows your ino file?

      1. I’m sure, I posted that to “ESP8266: SSD1306 Oled Library Release”. 🙂

        Well, I’m just using your examples for the SSD1306 driver. Using a Wemos D1 mini R2 and “SSD1306Spi display(D0, D2, D8);”

        I had it working some weeke before. In the mean time I updated a lot of software, including IDE and board definitions.

        So, there are few choices left: the software combination I have is broken or D1 or display are broken.

        Can you or anyone else report that Wemos D1 mini R2, Arduino 1.8.1 and esp8266 2.3.0 are working with this SSD1306 library (unmodified)?

        Thank you!

        1. I’m still not sure, if my hardware or software combination is broken. But I finally got it all working. Key was reducing SPI speed. In SSD1306Spi.h we have a SPI.setClockDivider (SPI_CLOCK_DIV2), which means 8 MHz. It seems, the (just my?) display can’t handle that, I get mostly pixel garbage. If I reduce that to SPI_CLOCK_DIV64 (which means 250 kHz), it all works. I can even skip the yields() in SSD1306Spi.h’s display() routine. And I can get some speed back with replacing the SPI.transfer-loop for non-double-buffer cases with “SPI.writeBytes(buffer, sizeof(uint8_t) * DISPLAY_BUFFER_SIZE);”

  18. Thanks for making this template availble in the public domain. It has proven to be very valuable. As an improvemnet, would it be possible to have the NodeMCU pin assignment names on the PCB board, similar to the arduino one.

  19. I am having problems with the Weather Station. First screen (time) works well. Second screen says “N/A C”, Third scrren shows N/As, Fourth screen (temp, humid) works well. I have tried installing the latest github code and it doesnt solved the problem. Any tips?

  20. I have bought the Weather Station on Amazon. It came with a DHT11 in a board with a pull up resitor. I am following the pdf with instructions. When pluging this board, the figure at the pdf looks like inverted. My litthe dht board is (from left to right): data, vcc, gnd. It took me a while to figure out this. Also, by printing the read temp and humid values, I saw half of them come as nan. Any tip for improving this?

Leave a Reply