Web Page Visitor Counter Part 3 - Putting it all Together

Now that I finished building the software "LEGO" that I needed to do in order to have some way of displaying the number of visitors that I had on my website, the time had finally come to stop pounding away on the keyboard and to work on something that was a wee bit more tangible.

Before I started work on creating my Google Sheets and ThingSpeak applications, I first made a couple of quick purchases on eBay for the various electronic bits that I would need to make my visitor counter a reality.


Remarkably, since most of the heavy lifting for the viewer is being done by software, I really only needed to order a few parts:

• A Wemos D1 Mini Pro ESP8266 module 
• A MAX7219 7 Segment 8 digit display 
• Some 10cm lengths of Female to Female Dupont Jumper wires. 

In a stroke of good luck, all my parts arrived just as I was finishing up building the ThingSpeak app.

Connecting up all the components is actually pretty straight forward. Since both the Wemos and the LED display contain male connector pins, it's really a simple matter of connecting the correct output pins on the Wemos to the correct input pins on the LED display board with the Dupont jumper wires. 

Based on the programming choices that I made for coding the Wemos (more on this later), I made the following wiring mapping: 

• Wemos Ground Pin to LED Ground
• Wemos D4 Pin to LED DIN Pin
• Wemos D3 Pin to LED LODA Pin
• Wemos D2 Pin to LED CLK Pin

The connections can be further illustrated by the diagram below.

With all the connections completed, the next step is to program the Wemos with the necessary code to read the ThingSpeak API and display the data from the API.

One of the little trade secrets in the IT world is that you never really write a new program from scratch, but rather you find an existing piece of code that somewhat does what you want to do and modify it to suit your purpose (why reinvent the wheel if there is something already out there that already does 80% of what you want to do).  The important thing to note is that if you use something that someone else has written, always, always make sure you give credit to the source.

In my case, I found the code that Electronoobs had developed in order to display the view counts for his YouTube channel seemed to be a good candidate for my purposes.

His program was tailored for the same Wemos board that I was using and I found the program that he had written to be very easy to modify to point from the YouTube API that he was using to the ThingSpeak API that I had built.

As a result, I came up with this Arduino program for my Wemos:

//Includes

#include <ESP8266WiFi.h>
//This are just for the Hello message
#include "7seg_helo.h"
#include "shift.h"
#include "ThingSpeak.h"

#define SECRET_CH_ID XXXXXX   //ThingSpeak Channel ID
#define SECRET_READ_APIKEY_COUNTER "XXXXXXXXXXXXXXXX" //API Key for Test channel

//Outputs
#define MAX7219_Data_IN 2         //D4 of WeMos
#define MAX7219_Chip_Select  0    //D3 of WeMos
#define MAX7219_Clock 4           //D2 of WeMos


//Variabels
byte adr = 0x08;
byte num = 0x00;
int i = 0;
long subs = 0;
String thisString_prev;
int statusCode = 0;

char ssid[] = "XXXXXXXXXX";              // your network SSID (name)
char password[] = "XXXXXXXXX";                // your network key

WiFiClient client;

// Channel details
unsigned long ChannelNumber = SECRET_CH_ID;
unsigned int FieldNumber = 1;

int readValue; // variable to save channel field reading                               
    

void setup() {  
  Serial.begin(115200);
  delay(100);
  delay(100);
  
  //Define the pins as outputs and disable CS
  pinMode(MAX7219_Data_IN, OUTPUT);
  pinMode(MAX7219_Chip_Select, OUTPUT);
  pinMode(MAX7219_Clock, OUTPUT);
  digitalWrite(MAX7219_Chip_Select, HIGH);
  delay(200);
  //Setup of the 7seg module
  shift(0x0f, 0x00); //display test register - test mode off
  shift(0x0c, 0x01); //shutdown register - normal operation
  shift(0x0b, 0x07); //scan limit register - display digits 0 - 7
  shift(0x0a, 0x0f); //intensity register - max brightness
  shift(0x09, 0xff); //decode mode register - CodeB decode all digits

  //Print the hello message
  hello(0,2,100);
  
  // Set WiFi to station mode and disconnect from an AP if it was Previously
  // connected
  WiFi.mode(WIFI_STA);
  WiFi.disconnect();
  delay(100);
  // Attempt to connect to Wifi network:
  Serial.print("Connecting Wifi: ");
  Serial.println(ssid);
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    Serial.print(".");
    delay(500);
  }
  Serial.println("");
  Serial.println("WiFi connected");
  Serial.println("IP address: ");
  IPAddress ip = WiFi.localIP();
  Serial.println(ip);
  ThingSpeak.begin(client);  // Initialize ThingSpeak
}

void loop() {

 // Read in field 4 of the public channel recording the temperature
 int Count = ThingSpeak.readIntField(ChannelNumber, FieldNumber);  

  // Check the status of the read operation to see if it was successful
  statusCode = ThingSpeak.getLastReadStatus();
  if(statusCode == 200){
    Serial.println("Pageviews: " + String(Count));
  }
  else{
    Serial.println("Problem reading channel. HTTP error code " + String(statusCode)); 
  }
  
  
 String thisString = String(Count, DEC);

  i =  thisString.length();//This variable will go character by cahracter and send the value to the 7 segment display
      if(i==8)
        {
          shift(0x0b, 0x07); //scan limit register - display digits 0 thru 7
          adr=0x01;
        }        
        if(i==7)
        {
          shift(0x0b, 0x06); //scan limit register - display digits 0 thru 7
          adr=0x01;
        }
        if(i==6)
        {
          shift(0x0b, 0x05); //scan limit register - display digits 0 thru 7
          adr=0x01;
        }
        if(i==5)
        {
          shift(0x0b, 0x04); //scan limit register - display digits 0 thru 7
          adr=0x01;
        }
        if(i==4)
        {
          shift(0x0b, 0x03); //scan limit register - display digits 0 thru 7
          adr=0x01;
        }
        if(i==3)
        {
          shift(0x0b, 0x02); //scan limit register - display digits 0 thru 7
          adr=0x01;
        }
        if(i==2)
        {
          shift(0x0b, 0x01); //scan limit register - display digits 0 thru 7
          adr=0x01;
        }
        if(i==1)
        {
          shift(0x0b, 0x00); //scan limit register - display digits 0 thru 7
          adr=0x01;
        }
        i=i-1;
            
      while (i >= 0)
      {
        if(thisString[i] == '0')
        {
        num = 0x00;
        }
        if(thisString[i] == '1')
        {
        num = 0x01;
        }
        if(thisString[i] == '2')
        {
        num = 0x02;
        }
        if(thisString[i] == '3')
        {
        num = 0x03;
        }
        if(thisString[i] == '4')
        {
        num = 0x04;
        }
        if(thisString[i] == '5')
        {
        num = 0x05;
        }
        if(thisString[i] == '6')
        {
        num = 0x06;
        }
        if(thisString[i] == '7')
        {
        num = 0x07;
        }
        if(thisString[i] == '8')
        {
        num = 0x08;
        }
        if(thisString[i] == '9')
        {
        num = 0x09;
        }

     
        shift(adr, num);  
              
        adr=adr+0x01;
        i=i-1;         
      }
      delay(10000);
    }


A few notes:

• I needed to first load in the following libraries into my Arduino compiler before I could compile the program:
• ESP8266WiFi.h, 
• 7seg_helo.h, shift.h 
• ThingSpeak.h 
• I've "X" out my API key and Wifi details - for obvious reasons 😊
• The delay statement at the end of the program allows for a few minutes delay between reads of the API 

I then hooked up the Wemos to my PC via a USB cable and compiled and uploaded the code to the Wemos.

If everything worked properly I would have then been rewarded with a "Hello" startup message on the LED followed by the number of visitors to my website being proudly displayed.

And with that my trek to find a way to display my website visitor count was at an end. It was a bit of an adventurous journey which made me encounter many new areas of the internet that I hadn't explored before. But like any grand journey, I learned a great deal from the experience.