Project Description

This tutorial shows how to set up an Arduino and Ethernet shield as a web server that hosts an HTML web page on the SD card. The web page allows text to be entered into two text inputs. When the button on the web page is clicked, the text is sent to the LCD that is connected to the Arduino.

An Arduino Uno, Ethernet shield and 2 × 16 LCD display are needed for this tutorial, or similar compatible hardware.

Setting up the Hardware

The following parts are needed for the project:

  • Arduino Uno or similar Arduino, e.g. MEGA
  • Arduino Ethernet shield
  • Micro SD card, e.g. 2GB micro SD card
  • 2 line by 16 character LCD
  • 10k trim. pot (for LCD contrast)
  • Breadboard and wires
  • 39Ω to 47Ω resistor for LCD backlight (optional)
  • Standard USB cable
  • Ethernet patch cable

An Arduino board such as the Arduino Ethernet board can be used in place of a separate Arduino Uno and Ethernet shield.

A card reader or adapter for a micro SD card is needed to copy the HTML file from a PC to the micro SD card.

 

Connecting the LCD to the Arduino

The default pins used in the Arduino LCD example sketches (i.e. found in the Arduino IDE under File → Examples → LiquidCrystal) for connecting the LCD to the Arduino can not be used when an Ethernet shield is plugged into the Arduino. The pins used for the LCD must be changed so that they are not used by both the Ethernet shield and the Arduino.

In the sketch for this project, the following data pins are connected to the LCD:

  • DB7 → 5
  • DB6 → 6
  • DB5 → 7
  • DB4 → 8
  • E → 2
  • RS → 3

 

 

Code

 

HTML and JavaScript index.htm File

The HTML and JavaScript code below must be copied to a file called index.htm on the micro SD card.

Sending Text from the Web Page to the LCD

With the Arduino and Ethernet shield connected to the network, open up a web browser and surf to the IP address set in the Arduino sketch.

If everything is set up correctly, the web page hosted by the Arduino will appear in the web browser. Enter the text in the text fields to send to line 1 and line 2 of the LCD and click the button on the web page.

How the Web to LCD Sketch Works

The sketch is based on the code from the Arduino web server tutorial part 16 that uses Ajax for sending and receiving data between the Arduino web server and web page.

See the above link and also the Arduino web server tutorial for an explanation of the basics of the web server and related technology.

Getting the Text from the Web Page

The GetLcdText() function in the sketch gets the two lines of text for the LCD from the incoming HTTP GET request which is sent from the web browser when the user clicks the button on the web page.

In the GetLcdText() function, the code first looks for line 1 of the LCD text by searching for &L1= which precedes the actual text. The line of the text ends with & which is also the start of the second line of text.

All spaces in the text that are sent are converted to %20 by the browser before sending. While the code is getting the lines of text, it converts the encoded spaces to actual space characters for display on the LCD.

After the first line of text is copied from the HTTP GET request, the code loops to get the second line of text.

The video below shows the final project being tested. Text is entered into the two text inputs – each text input corresponds to one line of the LCD.

For more detail about this tutorial and all source code, visit below link.

http://startingelectronics.org/tutorials/arduino/web-page-to-LCD/