WiFi OLED Display Badge

with FeatherWing OLED

by Becky Stern

published January 20, 2016, last edited March 08, 2024

posted in Wearables Internet of Things - IOT/ Adafruit IO LCDs & Displays/ OLED

Save Download

Intermediate

Project guide

Overview

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
FeatherWing OLED display
Magnetic pin back
Lipoly battery (350mAh or 500mAh recommended)
Soldering tools and supplies
Accounts on Adafruit IO and IFTTT

Before you begin, please review and understand the following prerequisite guides:

Page last edited January 18, 2016

Text editor powered by tinymce.

Assemble Circuit

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.

If you have an extra feather to spare, setting one up on a breadboard with stacking headers 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.

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.

Page last edited January 18, 2016

Text editor powered by tinymce.

Adafruit IO and IFTTT Setup

lcds___displays_Screen_Shot_2016-01-19_at_3.37.25_PM.png

First, create a feed to store your data on Adafruit IO called "hightemp"-- this will catch the value from IFTTT and your Feather will check this feed for new values.

lcds___displays_Screen_Shot_2016-01-19_at_8.09.27_AM.png

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!

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.

Page last edited January 18, 2016

Text editor powered by tinymce.

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. 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...):

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.

Download File

Copy Code

/*
 *  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 <ESP8266WiFi.h>
#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: <username>/feeds/<feedname>
const char hightemp_FEED[] PROGMEM = AIO_USERNAME "/feeds/hightemp";
Adafruit_MQTT_Subscribe hightemp = Adafruit_MQTT_Subscribe(&mqtt, hightemp_FEED);

#include <SPI.h>
#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>

#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
 *  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 <ESP8266WiFi.h>
#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: <username>/feeds/<feedname>
const char hightemp_FEED[] PROGMEM = AIO_USERNAME "/feeds/hightemp";
Adafruit_MQTT_Subscribe hightemp = Adafruit_MQTT_Subscribe(&mqtt, hightemp_FEED);

#include <SPI.h>
#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>

#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!"));
}

Page last edited January 18, 2016

Text editor powered by tinymce.

Wear it!

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!