# WiFi OLED Display Badge ## Overview https://youtu.be/dQkrPbU4SNU Create an internet connected display brooch and wear your data on your sleeve (or jacket, or backpack...)! This simple Adafruit IO project pulls forecast data from IFTTT and displays it on a FeatherWing OLED display, made wearable with a magnetic pin back. It also toggles to display a favorite quote, or serve as a nametag! For this project you will need: - [Adafruit Feather HUZZAH ESP8266 WiFi board](https://www.adafruit.com/products/2821) - [FeatherWing OLED display](https://www.adafruit.com/products/2900) - [Magnetic pin back](https://www.adafruit.com/products/1170) - Lipoly battery ([350mAh](https://www.adafruit.com/products/2750) or [500mAh](https://www.adafruit.com/products/1578) recommended) - [Soldering tools and supplies](../../../adafruit-guide-excellent-soldering) - Accounts on [Adafruit IO](https://io.adafruit.com/) and [IFTTT](https://ifttt.com/) Before you begin, please review and understand the following prerequisite guides: - [Adafruit Feather HUZZAH ESP8266](../../../adafruit-feather-huzzah-esp8266) - [Monochrome OLED breakouts](../../../../monochrome-oled-breakouts) - [Adafruit IO](../../../adafruit-io) - [MQTT, Adafruit.IO & you!](MQTT,%20Adafruit.IO%20&%20You!) - [Adafruit guide to excellent soldering](../../../adafruit-guide-excellent-soldering) ![](https://cdn-learn.adafruit.com/assets/assets/000/029/907/medium800/lcds___displays_wifi-feather-badge-06.jpg?1453174378) # WiFi OLED Display Badge ## Assemble Circuit ![](https://cdn-learn.adafruit.com/assets/assets/000/029/901/medium800/lcds___displays_wifi-feather-badge-02.jpg?1453171303) First up, solder headers onto the FeatherWing OLED. The easiest way to get the headers installed with proper alignment is to do this in a solderless breadboard. Trim one of the sections to fit the shorter row of holes on the FeatherWing and press into the breadboard. Slide the FeatherWing OLED onto the headers and solder in place. ![](https://cdn-learn.adafruit.com/assets/assets/000/029/902/medium800/lcds___displays_wifi-feather-badge-03.jpg?1453171358) If you have an extra feather to spare, setting one up on a breadboard with [stacking headers](https://www.adafruit.com/products/2830) is a great way to prototype with FeatherWings. Though not strictly necessary, this lets you try out different FeatherWings and assess any faulty solder connections without committing to permanently connecting the two. ![](https://cdn-learn.adafruit.com/assets/assets/000/029/910/medium800/lcds___displays_wifi-feather-badge-10.jpg?1453175350) Next, solder your FeatherWing OLED to your Feather main board-- but don't let it be crooked! It's easiest to solder the pin closest to the JST battery connector first, then level the board as that solder cools. Then the rest of the pins will be oriented nicely for soldering up a perfectly parallel board sandwich. ![lcds___displays_wifi-feather-badge-04.jpg](https://cdn-learn.adafruit.com/assets/assets/000/029/905/medium640/lcds___displays_wifi-feather-badge-04.jpg?1453174193) ![lcds___displays_wifi-feather-badge-05.jpg](https://cdn-learn.adafruit.com/assets/assets/000/029/906/medium640/lcds___displays_wifi-feather-badge-05.jpg?1453174309) # WiFi OLED Display Badge ## Adafruit IO and IFTTT Setup ![](https://cdn-learn.adafruit.com/assets/assets/000/029/914/medium800/lcds___displays_Screen_Shot_2016-01-19_at_3.37.25_PM.png?1453235872) First, create a feed to store your data on Adafruit IO called "hightemp"-- this will catch the value from [IFTTT](https://ifttt.com/) and your Feather will check this feed for new values. ![](https://cdn-learn.adafruit.com/assets/assets/000/029/911/medium800/lcds___displays_Screen_Shot_2016-01-19_at_8.09.27_AM.png?1453209009) Next, create a recipe on IFTTT using the weather channel, and set it to trigger at the time of your choice. Select the Adafruit channel as the output and configure it to send today's forecasted high temperature value to the "hightemp" feed you already created. [You can also adopt the pre-made recipe we published on IFTTT!](https://ifttt.com/recipes/374855-send-today-s-high-temp-f-to-adafruit-io-feed) Now each day the recipe will update the feed with today's projected high temperature! Substitute this recipe with any value, weather related or not, to customize the project. You can manually add a value to the feed to test the project, since the IFTTT recipe will only update the feed once per day. # WiFi OLED Display Badge ## Code This guide assumes you've completed the setup required to get your ESP8266 up and running with Arduino IDE and Adafruit IO.  - If you haven't yet set up your ESP8266 for use with Adafruit IO and the Arduino IDE, [follow along with this guide](https://learn.adafruit.com/adafruit-io-basics-esp8266-arduino/arduino-io-library). The setup only needs to be performed once. The following Arduino libraries are required (install manually or through the library manager under Sketch-\> Include Library-\> Manage Libraries...): - [Adafruit SSD1306](https://github.com/adafruit/Adafruit_SSD1306) - [Adafruit GFX](https://github.com/adafruit/Adafruit-GFX-Library) - [Adafruit BusIO](https://github.com/adafruit/Adafruit_BusIO) Modify the variables near the top of the sketch to match your WiFi network's SSID, password, Adafruit IO username, and Adafruit IO key before programming your Feather with the sketch. ```auto /* * WiFi OLED Display Badge * guide: https://learn.adafruit.com/digital-display-badge/ * based on Home Automation sketch by M. Schwartz * with contributions from Becky Stern and Tony Dicola */ #include #include "Adafruit_MQTT.h" #include "Adafruit_MQTT_Client.h" const char* ssid = "SSID"; const char* password = "password"; // Adafruit IO #define AIO_SERVER "io.adafruit.com" #define AIO_SERVERPORT 1883 #define AIO_USERNAME "your IO username" #define AIO_KEY "your IO key" // Functions void connect(); // Create an ESP8266 WiFiClient class to connect to the MQTT server. WiFiClient client; // Store the MQTT server, client ID, username, and password in flash memory. // This is required for using the Adafruit MQTT library. const char MQTT_SERVER[] PROGMEM = AIO_SERVER; // Set a unique MQTT client ID using the AIO key + the date and time the sketch // was compiled (so this should be unique across multiple devices for a user, // alternatively you can manually set this to a GUID or other random value). const char MQTT_CLIENTID[] PROGMEM = AIO_KEY __DATE__ __TIME__; const char MQTT_USERNAME[] PROGMEM = AIO_USERNAME; const char MQTT_PASSWORD[] PROGMEM = AIO_KEY; // Setup the MQTT client class by passing in the WiFi client and // MQTT server and login details. Adafruit_MQTT_Client mqtt(&client, MQTT_SERVER, AIO_SERVERPORT, MQTT_CLIENTID, MQTT_USERNAME, MQTT_PASSWORD); /****************************** Feeds ***************************************/ // Setup a feed called 'hightemp' for subscribing to changes. // Notice MQTT paths for AIO follow the form: /feeds/ const char hightemp_FEED[] PROGMEM = AIO_USERNAME "/feeds/hightemp"; Adafruit_MQTT_Subscribe hightemp = Adafruit_MQTT_Subscribe(&mqtt, hightemp_FEED); #include #include #include #include #define OLED_RESET 3 Adafruit_SSD1306 display(128, 32, &Wire, OLED_RESET); // this constant won't change: const int buttonPin = 2; // the pin that the pushbutton is attached to // Variables will change: int buttonPushCounter = 0; // counter for the number of button presses int buttonState = 0; // current state of the button int lastButtonState = 0; // previous state of the button void setup() { Serial.begin(115200); delay(100); // initialize the button pin as a input: pinMode(buttonPin, INPUT_PULLUP); // SSD1306_SWITCHCAPVCC = generate display voltage from 3.3V internally display.begin(SSD1306_SWITCHCAPVCC, 0x3C); // Address 0x3C for 128x32 // Show initial display buffer contents on the screen -- // the library initializes this with an Adafruit splash screen. display.display(); delay(2000); // Pause for 2 seconds // Clear the buffer. display.clearDisplay(); // We start by connecting to a WiFi network Serial.println(); Serial.println(); Serial.print("Connecting to "); Serial.println(ssid); WiFi.begin(ssid, password); while (WiFi.status() != WL_CONNECTED) { delay(500); Serial.print("."); } Serial.println(""); Serial.println("WiFi connected"); Serial.println("IP address: "); Serial.println(WiFi.localIP()); display.setTextSize(1); display.setTextColor(WHITE); display.setCursor(0,0); display.print("Connected to "); display.println(ssid); display.setCursor(0,16); display.print("IP address: "); display.println(WiFi.localIP()); display.display(); delay(2000); // listen for events on the weather feed mqtt.subscribe(&hightemp); // connect to adafruit io connect(); } int temp = 151; int whichbutton = 0; void loop() { Adafruit_MQTT_Subscribe *subscription; // ping adafruit io a few times to make sure we remain connected if(! mqtt.ping(3)) { // reconnect to adafruit io if(! mqtt.connected()) connect(); } // read the pushbutton input pin: buttonState = digitalRead(buttonPin); // compare the buttonState to its previous state if (buttonState != lastButtonState) { // if the state has changed, increment the counter if (buttonState == LOW) { // if the current state is LOW then the button was pressed buttonPushCounter++; Serial.print("number of button pushes: "); Serial.println(buttonPushCounter); } } // this is our 'wait for incoming subscription packets' busy subloop if (subscription = mqtt.readSubscription(1000)) { // we only care about the weather events if (subscription == &hightemp) { temp = atoi((char*)hightemp.lastread); Serial.print(F("Received: ")); Serial.println(temp); } } //A button position - display today's high temperature if (buttonPushCounter % 3 == 0) { if(temp == 151) { display.clearDisplay(); display.setCursor(0,16); display.println("Waiting for temp data"); display.display(); Serial.println(F("Printed: Waiting for temp data")); } else { display.clearDisplay(); display.setCursor(0,16); display.print("Today's high: "); display.print(temp); display.println(" F"); display.display(); Serial.print(F("Printed: ")); Serial.println(temp); } } //B button position - David Bowie quote if (buttonPushCounter % 3 == 1) { display.clearDisplay(); display.setCursor(0,0); display.println("I'm an instant star. Just add water and "); display.println("stir."); display.println(" - David Bowie"); display.display(); } //C button position - nametag if (buttonPushCounter % 3 == 2) { display.clearDisplay(); display.setCursor(0,0); display.println("Your Name"); display.println(); display.println("Your Title"); display.display(); } // save the current state as the last state, //for next time through the loop lastButtonState = buttonState; } // connect to adafruit io via MQTT void connect() { Serial.print(F("Connecting to Adafruit IO... ")); int8_t ret; while ((ret = mqtt.connect()) != 0) { switch (ret) { case 1: Serial.println(F("Wrong protocol")); break; case 2: Serial.println(F("ID rejected")); break; case 3: Serial.println(F("Server unavail")); break; case 4: Serial.println(F("Bad user/pass")); break; case 5: Serial.println(F("Not authed")); break; case 6: Serial.println(F("Failed to subscribe")); break; default: Serial.println(F("Connection failed")); break; } if(ret >= 0) mqtt.disconnect(); Serial.println(F("Retrying connection...")); delay(5000); } Serial.println(F("Adafruit IO Connected!")); } ``` # WiFi OLED Display Badge ## Wear it! ![](https://cdn-learn.adafruit.com/assets/assets/000/029/908/medium800/lcds___displays_wifi-feather-badge-07.jpg?1453174754) When your circuit is working properly, attach the magnetic pin back by peeling the paper from the adhesive backing on the metal plate. Stick it to the back of the Feather, and use the magnetic plate to attach it to your jacket, backpack, and more! The C button on the FeatherWing OLED serves to toggle between display modes. If you wish, you may tuck your battery inside a [3D printed pocket](../../../../mystical-led-halloween-hood/3d-printed-battery-pocket)! ![](https://cdn-learn.adafruit.com/assets/assets/000/029/909/medium800/lcds___displays_wifi-feather-badge-09.jpg?1453174873) ## Featured Products ### Adafruit Feather HUZZAH with ESP8266 - Loose Headers [Adafruit Feather HUZZAH with ESP8266 - Loose Headers](https://www.adafruit.com/product/2821) Feather is the new development board from Adafruit, and like its namesake, it is thin, light, and lets you fly! We designed Feather to be a new standard for portable microcontroller cores. This is the  **Adafruit Feather HUZZAH ESP8266**  - our take on an... In Stock [Buy Now](https://www.adafruit.com/product/2821) [Related Guides to the Product](https://learn.adafruit.com/products/2821/guides) ### Adafruit FeatherWing OLED - 128x32 OLED Add-on For Feather [Adafruit FeatherWing OLED - 128x32 OLED Add-on For Feather](https://www.adafruit.com/product/2900) A Feather board without ambition is a Feather board without FeatherWings! This is the **FeatherWing OLED** : it adds a 128x32 monochrome OLED plus 3 user buttons to _any_ Feather main board. Using our [Feather Stacking...](https://www.adafruit.com/products/2830) In Stock [Buy Now](https://www.adafruit.com/product/2900) [Related Guides to the Product](https://learn.adafruit.com/products/2900/guides) ### Magnetic Pin Back [Magnetic Pin Back](https://www.adafruit.com/product/1170) These magnetic pin backs have two pieces: a metal bar with adhesive strip and a plastic piece with two strong rare-earth magnets. Affix the metal bar to your FLORA projects-- it's just the right size! Then attach your FLORA project to any garment without poking holes in your clothes. The... Out of Stock [Buy Now](https://www.adafruit.com/product/1170) [Related Guides to the Product](https://learn.adafruit.com/products/1170/guides) ### Lithium Ion Polymer Battery - 3.7v 500mAh [Lithium Ion Polymer Battery - 3.7v 500mAh](https://www.adafruit.com/product/1578) Lithium-ion polymer (also known as 'lipo' or 'lipoly') batteries are thin, light, and powerful. The output ranges from 4.2V when completely charged to 3.7V. This battery has a capacity of 500mAh for a total of about 1.9 Wh. If you need a larger (or smaller!) battery, In Stock [Buy Now](https://www.adafruit.com/product/1578) [Related Guides to the Product](https://learn.adafruit.com/products/1578/guides) ### Assembled Adafruit FeatherWing OLED [Assembled Adafruit FeatherWing OLED](https://www.adafruit.com/product/3045) A Feather board without ambition is a Feather board without FeatherWings! This is the **Assembled FeatherWing OLED** : it adds a 128x32 monochrome OLED plus 3 user buttons to _any_ Feather main board. Comes fully assembled so you can connect a FeatherWing on top of your... In Stock [Buy Now](https://www.adafruit.com/product/3045) [Related Guides to the Product](https://learn.adafruit.com/products/3045/guides) ## Related Guides - [Adafruit Feather HUZZAH ESP8266](https://learn.adafruit.com/adafruit-feather-huzzah-esp8266.md) - [Adafruit OLED FeatherWing](https://learn.adafruit.com/adafruit-oled-featherwing.md) - [CircuitPython Hardware: SSD1306 OLED Display](https://learn.adafruit.com/micropython-hardware-ssd1306-oled-display.md) - [Using LoraWAN and The Things Network with Feather](https://learn.adafruit.com/the-things-network-for-feather.md) - [MicroPython Basics: Blink a LED](https://learn.adafruit.com/micropython-basics-blink-a-led.md) - [MicroPython Basics: Load Files & Run Code](https://learn.adafruit.com/micropython-basics-load-files-and-run-code.md) - [MicroPython Hardware: Digital I/O](https://learn.adafruit.com/micropython-hardware-digital-i-slash-o.md) - [MicroPython Basics: How to Load MicroPython on a Board](https://learn.adafruit.com/micropython-basics-how-to-load-micropython-on-a-board.md) - [MAC Address Finder](https://learn.adafruit.com/mac-address-finder.md) - [Build an ESP8266 Mobile Robot](https://learn.adafruit.com/build-an-esp8266-mobile-robot.md) - [CircuitPython Powered AT Hand-Raiser](https://learn.adafruit.com/at-hand-raiser.md) - [Feather Weather Lamp](https://learn.adafruit.com/feather-weather-lamp.md) - [Wireless NeoPixel Controller](https://learn.adafruit.com/neotrellis-neopixel-controller.md) - [CircuitPython 2FA TOTP Authentication Friend](https://learn.adafruit.com/circuitpython-totp-otp-2fa-authy-authenticator-friend.md) - [MicroPython Hardware: I2C Devices](https://learn.adafruit.com/micropython-hardware-i2c-devices.md) - [ESP8266 WiFi Weather Station with Color TFT Display](https://learn.adafruit.com/wifi-weather-station-with-tft-display.md) - [Circuit Playground Minecraft Gesture Controller](https://learn.adafruit.com/circuitplayground-minecraft-gesture-controller.md)