Social Stats Tracker Display With ESP8266

20,225

184

33

About: Making and sharing are my two biggest passions! In total I've published hundreds of tutorials about everything from microcontrollers to knitting. I'm a New York City motorcyclist and unrepentant dog mom. My ...

Frame your followers! Here's how to build a social media stats tracker display using the a wifi arduino-compatible ESP8266 microcontroller board and several seven-segment displays. This project is an extension of my YouTube Subscriber Counter project, but uses one "brain" to track and display multiple networks. Easily omit the left (large digits) displays for any stat under 10k to bring the cost of components down.

Before attempting this project, you should be generally familiar with uploading new programs to your Arduino board and installing code libraries, both of which you can learn for free in my Arduino Class, though you really don't have to understand much of the actual Arduino code to get this project running.

For a more in-depth introduction to the ESP8266 board (and its installation and setup), check out my free Internet of Things Class.

For this project, you will need the following materials:

and the following tools:

Required software libraries (all searchable through the Library Manager):

Unique data required:

  • Twitter API bearer token (read Brian's instructions for getting this)
  • usernames for Twitter, Instagram, and Instructables
  • Wifi network name/password

As an alternative to the NodeMCU board, you can also use your favorite ESP8266 microcontroller board, some of which require a 3v FTDI programmer to upload new programs.

Before you dive into this project, you should first make sure you've got your Arduino software set up properly to program the board you are using, which in my case involves installing the SiLabs USB driver and installing ESP8266 board support (explained in more detail in my Internet of Things Class):

  • Go to Arduino-> Preferences...
  • Look for a text field labeled "Additional Boards Manager URLs:" and paste the following URL into the field (separate multiple URLs with commas if applicable):
    http://arduino.esp8266.com/stable/package_esp8266com_index.json
  • Click OK
  • Go to Tools->Board-> Boards Manager...
  • Search for ESP8266 and click the Install button in the box "esp8266 by ESP8266 Community" when it shows up

To ensure you have a proper programming connection with your board, first load up the blink sketch. You can find a sample blink sketch by navigating to File->Examples->ESP8266->Blink, or copy it from here:

void setup() {
  pinMode(LED_BUILTIN, OUTPUT);
}
void loop() {
  digitalWrite(LED_BUILTIN, HIGH);
  delay(500);
  digitalWrite(LED_BUILTIN, LOW);
  delay(500);
}

Plug in your USB cable to the board and configure your settings under the Tools menu as follows:

  • Board: NodeMCU 1.0
  • CPU Frequency: 80MHz
  • Flash Size: 4M (3M SPIFFS)
  • Upload Speed: 115200
  • Port: whichever one ends in SLAB_USBtoUART (Mac) or COMx (Windows)

Click the Upload button to send the program to your board. This will take several seconds (longer than you are used to with Arduino Uno). After complete, the onboard LED should start blinking.

While many boards auto-detect when they're being sent a new program, some other ESP8266 boards may require a sequence of button presses to get into bootloader mode.

Do not proceed until you've successfully uploaded a blink test program to your board. Seriously, because how can you expect the project code to upload if the test didn't? =D

Step 1: Prepare Displays & Prototype

Follow the assembly instructions for your seven-segment displays, and also solder headers onto your ESP8266 board if it didn't come with headers pre-soldered.

For your microcontroller to tell the different displays apart, you'll need to change their addresses. Do this by applying a blob of solder to bridge the labeled pads on the back of the board. The board as-is has an address of 0x70, and if you bridge A0, it has an address of 0x71. More info on i2c addresses in the official product guide. Here's how the displays in my circuit/code are configured:

  • 0x71 high digits Twitter, A0 shorted
  • 0x70 low digits Twitter, no alteration
  • 0x74 high digits Instagram, A2 shorted (not installed)
  • 0x73 low digits Instagram, A0 and A1 shorted
  • 0x75 high digits Instructables, A0 and A2 shorted (not installed)
  • 0x72 low digits Instructables, A1 shorted

When working with electronics, I always like to create a solderless prototype first. Download the code attached to this step (big thanks to Brian Lough for writing all those awesome Arduino libraries).

I'm using a NodeMCU board this time, but any ESP8266 board with the I2C pins exposed will work fine. In my case that's D1 and D2.

Connections:

NodeMCU D1 to displays C (clock)

NodeMCU D2 to displays D (data)

NodeMCU Vin to displays + (power)

NodeMCU GND to displays - (ground)

Step 2: Assemble With Paper Template & Shadowbox

Download the paper template attached to this step or create your own 5x7 artwork to fit in the front of the shadowbox frame. This template also contains an alignment helper, which you can tape directly to or use as a reference for taping the displays directly to the back of the front-facing printout. The thickness of your paper will determine your light throughput and circuit sturdiness, so feel free to play around with the combo of layers and thicknesses of paper that work best for you.

I soldered my multi-display counter (Twitter only) to a perma-proto board to keep them aligned, and plugged female header wires into the single display headers. The NodeMCU board gets its own small perma-proto, where I soldered more wires to plug into all the various displays. This keeps the project modular in case I want to take it apart or add more displays later.

Step 3: Close Up the Circuit

Use some cardboard or other stiff material to brace against the back of each display before installing the back cover (use scissors to cut a notch for the USB cable). It took me a few tries to get the displays pressed evenly against the artwork/glass to create crisp digits. If they're not pressed tightly or evenly enough, the numbers will appear blurry.

Step 4: Enjoy!

Display your project and track your growth! I love having these displays hanging above my workbench to inspire me to keep making and sharing fun projects with all of you. Thanks for reading!

I'd be delighted to see your tracker displays in the comments below, as well as to hear your thoughts, questions, and feedback.

If you like this project, you may be interested in some of my others:

To keep up with what I'm working on, follow me on YouTube, Instagram, Twitter, Pinterest, and Snapchat.

3 People Made This Project!

Recommendations

  • 1 Hour Challenge

    1 Hour Challenge
  • Beauty Tips Contest

    Beauty Tips Contest
  • Pets Challenge

    Pets Challenge

33 Discussions

0
None
JordiKoki

2 months ago

Is it possible to work with only one display?
I test the program only using one display, but the digits can't display.

Now i see the problem: Error getting Author Stats: Library: Failed to parse response

2 replies
0
None
JordiKokibekathwia

Reply 2 months ago

Thnks for your reply.
After see a lot of atricles, posts, commnets, i saw the solution at IG Followers = 0

Install ESP8266 Core 2.4.0
Install ArduinoJson 5.13.4

Another thing, doesn't works my twitter stats, but, how i can do it for only use a Social Stats? That i modify for only view IG stats or TW stats?

Here a link to get a BEARER_TOKEN: https://npm.runkit.com/get-twitter-bearer-token

Finally i can get the Twitter info, but ALL info, don't receive only followers.

And the Display doesn't starts, i don't know if the wire combination is correct or that...

IMG_20190420_185722.jpgIMG_20190420_185745.jpgScreenshot_3.png
0
None
Weltenbummler

5 months ago

Hello becky,

what is wrong i get the correct output in the serial monitor but how i can get it on the max7219
My soldering is:
3VV auf VCC
G auf GND
D8 auf DIN
D7 auf CS
D6 auf CLK

maybe you can help me

Screenshot_3.jpgScreenshot_4.jpgScreenshot_7.jpgScreenshot_8.jpg
0
None
MichelleM455

7 months ago

I want to have a go at making this, code is not my strong point though, is there any way to have it update instantly rather than one minute sweeps?

1 reply
0
None
RickA64MichelleM455

Reply 6 months ago

I built this solely as an Instagram follower counter, and it is possible to change the value in the loop to change how often the device checks for followers. I modified the value from 60,000 (1 minute) to 6000 (six seconds) and it worked ok. I will say that for some reason my count will be several number lower than what I see on Instagrams website or on my phone app. I have no idea what causes this. I'd fear that if you made the device check your count more frequently, it might be viewed as aggressive behavior by the other ends servers and you might get your IP blocked. Hope this helps!

1
None
SinanM1

6 months ago

the parts are here, i'm goin' to share the finished product. All I have to try is combine the code with the youtube one, to get 2 displays working: instagram + youtube … :)

2 replies
0
None
GregA85SinanM1

Reply 6 months ago

Just ordered parts to do exactly that today - let us know how it goes!

0
None
SinanM1GregA85

Reply 6 months ago

Hey GregA85! just have a look at the I MADE IT section :) it goes well!

0
None
makexplore

7 months ago

Hey Becky!

I have a question for you:

It is not possible to find a common cathode led display with a backpack for now, so:

1. Why can’t I use one with common anode including backpack? Is there a way to use it?

2. If not, I have access to led displays with common cathode without backpacks. Is there a way to use them?

A gorgeous project to do without losing another second! Thanks!

2 replies
0
None
bekathwiamakexplore

Reply 7 months ago

The backpack makes it easy to control the display with only two pins. Without it, more microcontroller pins and code are required to control the display, and multiple displays would exceed the number of pins available. As for using a common-cathode display with the backpacks, that's a product question for Adafruit that I don't know the answer to-- try asking it in their customer support forums.

0
None
kjdf17

1 year ago

I don't have many friends/followers on social media, however, this project has me very interested in building it out. So in the spirit of building, I have challenged a few friends that can benefit from it (they actually have followers) and we are going to have a build party following your Instructable Becky! Thanks so much for the inspiration and we will be sure to share our final products with you.

1 reply
0
None
bekathwiakjdf17

Reply 1 year ago

Yay thank you so much for your kind words and I can't wait to see what you build!

0
None
Yonatan24

1 year ago

I would love to make this so much! I have 1,558 followers here on Instructables and 913 on Youtube. I would also want to add total views but I have no idea on how to code!

1 reply
0
None
bekathwiaYonatan24

Reply 1 year ago

Try out my beginner classes linked in the intro to learn enough code to make your project! Once you get the general basics, I think you will be able to customize the sketch from this project to suit your goals.