Adding LCD to Web Page Controlled LED (Arduino + ESP8266)

The Plan

In my previous post (LED’s Control Through ESP8266 + Arduino Web Page), I demonstrated how I used the ESP8266 and an Arduino Mega to create a web page that could control some LED lights from anyplace I could access the internet.  In my other previous post (Cheap $4.59 LCD with Arduino), I showed how I wired up a very cheap LCD to my Arduino and the demo software that showed how to draw various item and text on the screen.  I have not played around with the LCD a little and am now going to mash the 2 together and display a few key server statistics on the LCD screen.  Amazingly, it wasn’t as hard as I thought it would be.

In some of my previous posts, I already included details about how I have a counter for some key servers stats like number of web pages served, number or LED change request served, etc.  I am going to reuse those same counters and display to the screen.

The Arduino SW

First I draw the basic background of the screen by the following code.  I added comments to help make things easy to understand.

Note: I luckily guessed the LCD library was using the same color codes used for HTML pages.  I used this page to get the colors I wanted… http://www.w3schools.com/html/html_colors.asp

...
#define LCD_NETWORK_ROW 101
#define LCD_IPADDR_ROW 114
#define LCD_GRAY_ROW 101
#define LCD_SERVED_ROW 14
#define LCD_CHANGES_ROW 28
#define LCD_RESETS_ROW 42
...
void SetUpLCDBaseDisplay(){
 myGLCD.InitLCD();
 myGLCD.setFont(SmallFont);
 myGLCD.clrScr();

 //*** Create blue title bar with name ***
 myGLCD.setColor(0, 0, 255); // Blue for interior of rectangle coming up
 myGLCD.fillRect(0, 0, 159, 13); // Draw a solid rectangle from upper left = (0,0) to bottom right (159,13) 
 myGLCD.setBackColor(0, 0, 255); // Blue background for upcoming text
 myGLCD.setColor(255, 255, 255); // White lettering for upcoming text
 myGLCD.print("Pete's ESP8266 Hack", RIGHT, 1); // Write the text right justified at row 1
 
 //*** Create gray bar at bottom with status ***
 myGLCD.setColor(64, 64, 64); // Grey 
 myGLCD.fillRect(0, LCD_GRAY_ROW, 159, 127); // Gray box at bottom of screen
 myGLCD.setBackColor(64, 64, 64); // Gray background for upcoming text
 myGLCD.setColor(255, 255, 255); // White lettering for upcoming text
 myGLCD.print("Network:", LEFT, LCD_NETWORK_ROW); 
 myGLCD.print("...init",RIGHT, LCD_NETWORK_ROW);
 myGLCD.print("IP Add:", LEFT, LCD_IPADDR_ROW);
 myGLCD.print("...init",RIGHT, LCD_IPADDR_ROW);

 //** Create labels for key server stats 
 myGLCD.setBackColor(0, 66, 0); // Darkish Green ... note: lettering is set to white from last above still
 myGLCD.print("LED Changes: " + String(int(NumberLEDRequest)), RIGHT, LCD_CHANGES_ROW);
 myGLCD.print("Web Served: " + String(int(NumberServed)), RIGHT, LCD_SERVED_ROW);
 myGLCD.print("ESP8266 RSTS: " + String(int(NumberOfResets)), RIGHT, LCD_RESETS_ROW); 
}

This is what the screen looks like ..

20141224_233050

Whenever I increment any of my key server stats, I call this function…

void UpdateLCDStats(){
 myGLCD.setBackColor(0, 66, 0); // Darkish green background
 myGLCD.setColor(255, 255, 255); // White lettering
 myGLCD.print(String(int(NumberLEDRequest)), RIGHT, LCD_CHANGES_ROW);
 myGLCD.print(String(int(NumberServed)), RIGHT, LCD_SERVED_ROW);
 myGLCD.print(String(int(NumberOfResets)), RIGHT, LCD_RESETS_ROW);
}

This will update the LCD with the most recent counter values.  I was originally re-writing the entire line including the label, but found that I would sometime miss some of the incoming serial data.  The screen updating turns out to be pretty slow so writing all the characters must have been taking too long.  I minimized the amount of LCD update to just 3 digits to try to avoid this issue.

Here is the full Arduino sketch if you want it…

https://drive.google.com/file/d/0B1a0nPfCQQvKc2otRWY4Tkc4Tkk/view?usp=sharing

Save to your local drive and then you can open it in a text editor if you don’t have the Arduino IDE.

The Results

The testing went pretty well so here is a quick video of the system in action….

Advertisements

3 thoughts on “Adding LCD to Web Page Controlled LED (Arduino + ESP8266)

  1. Pingback: Cheap $4.59 LCD with Arduino | PetesTechProjects

  2. Pingback: AppInventor2 Web Interface Trial | PetesTechProjects

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s