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…

#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(){

 //*** 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 ..


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…

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….

Cheap $4.59 LCD with Arduino

The Plan

Now that I have the ESP8266 reasonably stable and serving up a web page that can take inputs from a user to control 3 LED’s, I am going to move on and add more peripherals to learn more of the Arduino capabilities. The first peripheral is going to be an LCD.

Because I am really cheap, I decided to dive right in and buy the cheapest one I could find for $4.59 (shipping included) here:

I knew it was a risk since there is nearly no documentation for it and is not one of the compatible LCD’s listed at the web site.  I did make sure that the vendors page did at least have a link to some code examples at… although the wording on the page of “Normally, the chip is Samsung S6D02A1″ didn’t really give me a lot of confidence.  Since I was only shelling out $4.59 I figured it was worth the risk.

The Zip File

I went to and was able to download a zip file.  Inside the zip file were a few .pdf files with some specifications.  One note was that the logic level was 2.8V which is a problem since the Arduino is 5V logic levels.  There was a comment on the product page…. “Using with Arduino, every IO port should be connected with resistance range 500 ~ 2KΩ.”.  I am assuming this is a cheap way to address the voltage difference.

The Wiring

First was to wire up LCD module.  The module has connection holes on 2 edges.  One came populated with a standard pin header and the other side just had the holes where a header could be installed.  There is a SD Card slot which has traces going to the holes that don’t have pins installed but NOT to the pre-populated header.  Looks like will need to solder if I want to use the SD Card slot.  Here is a picture….


Since I was mostly interested in just the LCD for now, I just plugged the pre-populated header into my bread board.  The pins were labeled…

1 – RST
2 – CS
3 – D/C
4 – DIN
5 – CLK
6 – VCC
7 – BL
8 – GND

There was a directory in the zip file, “1.8SPI Test Code for ArduinoUNO”.  I found an example Arduino sketch inside, QDtech_Demo_160x128_Serial_S6D02A1.ino.  At the start of the sketch, there was a section that listed what LCD pins should be connected to which Arduino digital IO….

//for QD_TFT180X SPI LCD Modle
//Param1:Value Can be:QD_TFT180A/QD_TFT180B/QD_TFT180C
//Param2 instructions:Connect to LCD_Pin SDA/SDI/MOSI(it means LCD_Model Pin_SDA/SDI/MOSI Connect to Arduino_UNO Pin11)
//Param3 instructions:Connect to LCD_Pin SCL/CLK/SCLK(it means LCD_Model Pin_SCL/CLK/SCLK Connect to Arduino_UNO Pin10)
//Param4 instructions:Connect to LCD_Pin CS/CE(it means LCD_Model Pin_CS/CE Connect to Arduino_UNO Pin9)
//Param5 instructions:Connect to LCD_Pin RST/RESET(it means LCD_Model Pin_RST/RESET Connect to Arduino_UNO Pin12)
//Param6 instructions:Connect to LCD_Pin RS/DC(it means LCD_Model Pin_RS/DC Connect to Arduino_UNO Pin8)
UTFT myGLCD(QD_TFT180C,11,10,9,12,8); // Remember to change the model parameter to suit your display module!

Most pins were easy to figure out.  The only questionable ones were DIN and BL.  I assumed that DIN meant Data In which would seems to match up with MOSI (Master Out Slave In) meaning.  I took a chance and just wired that up.  One of the included data sheets had VCC listed at typical 4.5V so I also took a chance and just directly hooked it up to the Arduino +5V output.  BL I assumed was for Back Light control.  Since I really don’t care about back light level, I just tied it to the +5V for full brightness.

The Software

I loaded up the “QDtech_Demo_160x128_Serial_S6D02A1.ino” into the Arduino IDE.  I couldn’t get it to compile at first then realized that I needed to import the UTFT library.  Luckily I found it in the same directory.  In the Arduino IDE go to Sketch -> Import Library -> Add Library… Browse to the UTFT directory which is in the same directory as the example sketch.  Once I did that, the code compiled.

The First Attempt

I loaded the example sketch to the Arduino with the LCD hooked up as described above … held my breath… and….. got a blank white screen.  😦

The Debug

After checking all my wiring, I remembered the “Using with Arduino, every IO port should be connected with resistance range 500 ~ 2KΩ.” comment on vendors product description page.  I thought that was “optional” to make it more stable if the screen was jittery or refreshed looked bad or something intermittent.  Since I didn’t have any other ideas, I went ahead and added a 1K resistor in series to every one of the control pins (not VCC or BL or GND).  I restarted the Arduino sketch and…. VOILA!  The LCD started to draw things and animate things.  Here is a video of what the example sketch did with the LCD….

Note: I tried on both the Arduino Uno and the Arduino Mega.  Both worked the same.

The Next

The example Arduino sketch in the zip file is pretty well document.  Going to start playing around with it to better understand the functions, capabilities and limitations.  After that, I want to add the LCD to my other project that remotely controls LED’s (posted here: LED’s Control Through ESP8266 + Arduino Web Page).  I can display some key server stats like the IP address, number of LED changes, up time, etc.   Maybe even something like a heartbeat animation for fun.

Update…. See my later post of how I added some basic text updates to my project “