Introduction: ESP-8266 Live Instructable View Counter

If you have ever created an Instructable, you will no doubt be familiar with the satisfaction of watching the amount of views on your instructable increase over time. What is even more satisfying, however, is to create a device that displays how many views you have on a 7 segment display, in real time.

Making such a device is surprisingly simple as only a few components are required.

In particular, an ESP-8266 board is used which connects to the internet and processes the data itself, meaning a web server or computer is not required to retrieve the data.

Even better, the project can be built for around £20 or ($25), excluding tools.

So, let's build!

Step 1: Concept

An ESP-8266 using Witnessmenow's library is used to retrieve the data/statistics from a specified Instructable, using the Instructables API.

To display the amount of views, a commonly available dual 7-segment display module is used which incorporates the MAX7219 shift register.

To power the project, a micro USB phone charger is used which is directly connected to the ESP-8266.

The device is housed in a laser cut case, cut from 3mm Plywood. If you do not have access to a laser cutter, you can simply use an online service to cut the parts, or modify an existing enclosure to accommodate for the parts.

Lastly, I take no responsibility or liability for any loss or damage to personnel or property.

Step 2: Parts List

To build the view counter, you will need the following parts and tools. I have compiled a table with links and prices to make it easier to source these parts. Please note these prices are only current at the date of publication and are for guidance only.

Part (As labeled in diagram)Retailer & LinkCost
1- Electrical tapeAmazon$3.94
2- NodeMCU ESP-8266

Amazon

$8.79
3- Needle-nose pliers

Amazon

$6.45
4- Laser cut pieces

N/A

N/A
5- 7 Segment module

Amazon

$7.80

6- Female to female jumpers *

Amazon

$5.99
7- Hot glue gun

Amazon

$10.59
8 - Micro USB charger

Amazon

$8.79

*Note: Only 5 female to female jumpers are needed.

I live in the UK, but to help readers from America I have tried, where possible, to include American suppliers and rough prices.

If you are having difficulty sourcing any of the parts used in this Instructable, comment and I will try to help.

Step 3: Cut the Enclosure

The enclosure compromises of 6 pieces, which interlock together. Use the PDF attached at the end of this Instructable to cut the pieces out of 3mm Plywood.

Note: In this Instructable, I will refer to the laser cut pieces as the names shown in the picture.

Step 4: ESP-8266 Preparation

To keep the unit as compact as possible, the headers of the ESP-8266 need to be bent at a right angle to allow the components to be stacked.

To do this grip the headers on one side and bend them outwards, being careful not to exert too much stress on the PCB. Repeat this for the other side, individually bending any headers that are not well aligned.

Now individually bend pins GND, 3.3V, D7, D8 and D9 (all on the same side) so that they are at a 45 degree angle to the PCB (as shown with the jumpers). Insert the female jumpers into the pins and check that there are no issues. Once satisfied remove the jumpers.

Step 5: Mounting the 7 Segment Module

If the headers are straight, bend the input headers on the module so that they are at a right angle, making sure the pins faces away from the displays.

Place the front panel on a flat surface, text side down and press-fit the display module, checking that the decimal points face away from the text on the front of the panel (as shown). If it does not fit, try wiggling the 7-segment displays until they do.

When satisfied, apply gentle pressure to the module and apply hot glue between the 7-segment displays and the panel (as shown).

Step 6: Wiring

Insert the 5 female to female jumpers onto the display module input headers. Connect the other end of each jumper to the corresponding pin on the ESP-8266. Note that the display module input headers are in the same order as the output headers (which are labelled), the only difference being DOUT and DIN, as shown.

The wiring is shown below:

Display Module ESP-8266
VCC3.3v
GNDGND

DIN

D8

LOAD

D6

CLKD7

Step 7: ESP-8266​ Instillation

To install the ESP-8266, first line the back of the display module with electrical tape as this prevents against electrical shorts.

Next slot in and glue the port panel, making sure the slot is facing away from the front panel. If needed, add a top/bottom panel to stop movement, but do not glue it yet.

Then insert the ESP-8266 into the slot at a slight angle angle and press it down so it fits on top of the display module. If it does not fit, try bending the pins outwards so that they fit over the module then re-bend them back to their 45 degree angle. Also, check that all the headers are still connected.

When satisfied, install the remaining panels, except from the back plate applying hot glue if desired.

Step 8: ESP-8266 Reinforcement

To stop the ESP-8266 moving around, first gather some scrap plywood or other material that is 3mm thick. Ensure the ESP-8266 is properly lined up and protrudes through the slot.

Apply some hot glue to the scrap material (shown as white dots in the photo) and place it behind the ESP-8266. Then press the back-plate on and apply general pressure. Wait for a couple of seconds then remove the back plate. The scrap material should now be firmly attached. If desired add more hot glue to reinforce it.

Finally, press the back plate back on, making sure the scrap material is supporting the ESP-8266. I found that the back panel does not need to be glued on as it holds itself well, plus the unit can be opened later if required.

If you do wish to glue it, remove the panel, apply glue to the top corners and press it down.

Step 9: Library Installation

To program the ESP-8266, first make sure you have the latest Arduino IDE installed. Then install the ESP-8266 board definition by following this guide, selecting 'NodeMcu 1.0' instead of the 'Sparkfun ESP 8266 Thing' .

The next step is to install the three libraries. Do this by downloading the .zip from the following places:

Instructables API library: https://github.com/witnessmenow/arduino-instructab...

Arduino JSON: https://github.com/bblanchon/ArduinoJson

Led Control:Ihave attached a .zip of the LED control library which I had to modify (explained below) as I had problems compiling the code with the original one.

If you are unfamiliar with installing a .zip library,the official guide can be found here.

For anyone interested in the modification I made, I had to change line 30 to 'pgmspace.h ' in the ledcontrol.h file to allow it to compile, as it kept looking for an AVR chip, which the ESP-8266 is not.

Step 10: Code Configuration

Import the code attached at the end of the Instructable into the Arduino IDE and replace the following sections as shown and as commented in the code:

Line 37: replace the dotted lines with your network SSID (name). This can be found by looking at the network settings on any wireless device connected to your network. This can also be found on the back of your router.

Line 38: replace the doted lines with your network password/key, which can be found on the back of your router.

Line 39: replace the dotted lines with the author's username of the instructable you want to monitor.

Line 40: as shown above, replace this with the ID of the instructable you want to monitor. To find this, first find the desired instructable in Google Chrome and right click anywhere on the page. Then click 'view page source' or hit Ctrl + U. Now hit Ctrl + F and type in 'LogHit'. Replace the lines in the code with the first string of letters in the brackets.

Note: Make sure you do not remove any quote marks (") or semi-colons (;) when replacing the dots.

Step 11: Upload and Testing

The final step is to upload the code. Do this by connecting the ESP-8266 to your computer with a micro-USB cable.

Ensure that you have the 'NodeMCU 1.0' board selected, and that the correct COM port is selected. When ready hit the upload button, or press Ctrl + U.

To use the view counter, apply power and let it connect to the internet. It will display the amount of views as soon as it has a connection. You can place the counter on a surface, or stick it to a wall using silicone or other adhesive.

I hope you have enjoyed this Instructable, and if you have any questions please comment below.

~DIYtronics.

Comments

author
Eric+Brouwer made it!(author)2017-07-01

Hi again.

I have made my own Hit Counter thanks to your Instructable. Please have a look here:

https://www.instructables.com/id/Instructables-Hit...

I have made several changes to the code, and setup of the unit. No need to reprogram the device when you want to change the Instructable ID.

1.jpg
author
diytronics made it!(author)2017-07-10

Hi Eric,

Looks fantastic! I like how you have made the configuration process run on the ESP8266-01. It also looks good in that enclosure as well :)

Its good to see that you found this Instructable useful,

~DIYtronics

author
Eric+Brouwer made it!(author)2017-07-11

Thank you

author
chimeranzl made it!(author)2017-05-14

Looks good, grammatically it should be "Number Of Views" :-) "amount of" is an uncountable number of nouns, "number of" is a countable number of nouns. Unless of course, your project is so popular it becomes uncountable!

author
Grozzie made it!(author)2017-05-18

Semantics. ;-\

author
witnessmenow made it!(author)2017-05-14

Hey,

Really great looking project, fantastic use of the library! Glad you found a use for it!

author
Eric+Brouwer made it!(author)2017-05-17

Hi witnessmenow

Thank you for an excellent library. I was able to compile a project within a few minute to get my Instructable stats.Thanks also to diytronic for his Instructable using your library.

Regards

Eric

20170517_155129_HDR.jpg
author
diytronics made it!(author)2017-05-17

Hi witnessmenow,

Thank you for providing the excellent library used to retrieve the data - it has been very useful!

~DIYtronics

author
Grozzie made it!(author)2017-05-14

Great Instructable.

I'm amazed no one has thought of this before.

author
diytronics made it!(author)2017-05-17

Hi Grozzie,

Thank you for checking out the Instructable!

~DIYtronics

author
PiotrK15 made it!(author)2017-05-15

can you do the Facebook like countrr ?

author
diytronics made it!(author)2017-05-17

Hi PiotrK15,

The Instructables API library used here would not support Facebook, however there are libraries similar to this one that would work.

~DIYtronics

author
Eric+Brouwer made it!(author)2017-05-17

Thank you for a simple, clear and simple Instructable. Mine is up and running.

Please note that this is my first ever exposure to the NodeMCU, and it was very easy to follow your instructions.

Now only if I can get my hits up....

Regards

Eric

20170517_155129_HDR(1).jpg
author
diytronics made it!(author)2017-05-17

Looks good Eric Brouwer!

It is fantastic to see that you have found the Instructable useful, and have used it for your own project.

~DIYtronics

author
Eric+Brouwer made it!(author)2017-05-14

Thanks for sharing.

I was trying to do the same thing using an Arduino and LAN module. Yours seems much easier. Ordered my NodeMCU today :)

Regards

author
witnessmenow made it!(author)2017-05-15

Hey eric

If you look at the branches on github for the instructable api library I did some work to get it working on a ethernet shield and an uno

I got one of the requests working but I'm not sure if the uno he enough ram for the second one

I think it is a better idea to get the esp8266 though!

author
Eric+Brouwer made it!(author)2017-05-15

Hi

Yes, the Arduino does not have enough RAM. Waiting in anticipation for my NodeMCU.

Will keep you posted

Regards

Eric

author
diytronics made it!(author)2017-05-14

Hi Eric Brouwer,

I am glad you found the Instructable usefull. If you have any questions regarding the build, please fell free to ask :0)

~DIYtronics

author
iccycold3000 made it!(author)2017-05-13

How could you adjust this to work for my total views not just for an individual instructable?

author
witnessmenow made it!(author)2017-05-14

There is a second method call available with the instructables api library "getAuthorStats" that returns information on the given user, one of them is total number of views. I use it in my social counter instructable

Check out the example from the library for more details of what is returned.

https://github.com/witnessmenow/arduino-instructables-api/blob/master/examples/ESP8266/BasicExample/BasicExample.ino

author
ThirdEarthDesign made it!(author)2017-05-14

Nice project, I didn't even know there was an Instructables API, thanks for sharing.

author
diytronics made it!(author)2017-05-14

You're welcome ThirdEarthDesign!

I hope you found the Instructable useful :)

~DIYtronics

author
Techovator0819 made it!(author)2017-05-14

Can you please give me an example api call.

author
diytronics made it!(author)2017-05-14

Hi Youngtinker0819,

The API call is in the 'getdata' function inside the code.

Thanks for taking a look,

~DIYtronics

author
Surajit+Majumdar made it!(author)2017-05-13

Woow it's an amazing project. Voted for u

author
diytronics made it!(author)2017-05-14

Hi Surajit Majumdar,

Thank you for your vote and for looking at the Instructable!

~DIYtronics

About This Instructable

4,813views

88favorites

License:

Bio: Into electronics, particularly Arduino as well as building and fixing things. Also enjoy 3D Printing, Mechanics and CAD.
More by diytronics:ESP-8266 Live Instructable View CounterProgrammable Automatic Blind OpenerArduino KSP Launch Button (Kerbal Space Program)
Add instructable to: