Send Text from a Web Page to Arduino LCD

details

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

/*--------------------------------------------------------------
  Program:      web2lcd

  Description:  Arduino web server gets text from HTML text
                inputs on the hosted web page and displays the
                text on a 2 line by 16 character LCD.
                The web page is stored on the micro SD card.
  
  Date:         24 June 2015
 
  Author:       W.A. Smith, http://startingelectronics.org
--------------------------------------------------------------*/

#include <SPI.h>
#include <Ethernet.h>
#include <SD.h>
#include <LiquidCrystal.h>
// size of buffer used to capture HTTP requests
#define REQ_BUF_SZ   90
// size of buffer that stores a line of text for the LCD + null terminator
#define LCD_BUF_SZ   17

// MAC address from Ethernet shield sticker under board
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
IPAddress ip(192, 168, 0, 20);   // IP address, may need to change depending on network
EthernetServer server(80);       // create a server at port 80
File webFile;                    // the web page file on the SD card
char HTTP_req[REQ_BUF_SZ] = {0}; // buffered HTTP request stored as null terminated string
char req_index = 0;              // index into HTTP_req buffer
char lcd_buf_1[LCD_BUF_SZ] = {0};// buffer to save LCD line 1 text to
char lcd_buf_2[LCD_BUF_SZ] = {0};// buffer to save LCD line 2 text to
LiquidCrystal lcd(3, 2, 8, 7, 6, 5);

void setup()
{
    // disable Ethernet chip
    pinMode(10, OUTPUT);
    digitalWrite(10, HIGH);
    
    Serial.begin(115200);       // for debugging

    lcd.begin(16, 2);
    // Message on LCD
    lcd.print(F("Initializing"));
    
    // initialize SD card
    Serial.println("Initializing SD card...");
    if (!SD.begin(4)) {
        Serial.println("ERROR - SD card initialization failed!");
        lcd.print(F("SD init failed"));
        return;    // init failed
    }
    Serial.println("SUCCESS - SD card initialized.");
    // check for index.htm file
    if (!SD.exists("index.htm")) {
        Serial.println("ERROR - Can't find index.htm file!");
        return;  // can't find index file
    }
    Serial.println("SUCCESS - Found index.htm file.");

    Ethernet.begin(mac, ip);  // initialize Ethernet device
    server.begin();           // start to listen for clients

    // End of initialization message on LCD + print IP address
    lcd.clear();
    lcd.setCursor(0, 0);
    lcd.print(F("Done."));
    lcd.setCursor(0, 1);
    lcd.print(ip);
}

void loop()
{
    EthernetClient client = server.available();  // try to get client

    if (client) {  // got client?
        boolean currentLineIsBlank = true;
        while (client.connected()) {
            if (client.available()) {   // client data available to read
                char c = client.read(); // read 1 byte (character) from client
                // limit the size of the stored received HTTP request
                // buffer first part of HTTP request in HTTP_req array (string)
                // leave last element in array as 0 to null terminate string (REQ_BUF_SZ - 1)
                if (req_index < (REQ_BUF_SZ - 1)) {
                    HTTP_req[req_index] = c;          // save HTTP request character
                    req_index++;
                }
                // last line of client request is blank and ends with \n
                // respond to client only after last line received
                if (c == '\n' && currentLineIsBlank) {
                    // send a standard http response header
                    client.println("HTTP/1.1 200 OK");
                    // remainder of header follows below, depending on if
                    // web page or XML page is requested
                    // Ajax request - send XML file
                    if (StrContains(HTTP_req, "ajax_inputs")) {
                        // send rest of HTTP header
                        client.println("Content-Type: text/xml");
                        client.println("Connection: keep-alive");
                        client.println();

                        // print the received text to the LCD if found
                        if (GetLcdText(lcd_buf_1, lcd_buf_2, LCD_BUF_SZ)) {
                          // lcd_buf_1 and lcd_buf_2 now contain the text from
                          // the web page
                          // write the received text to the LCD
                          lcd.clear();
                          lcd.setCursor(0, 0);
                          lcd.print(lcd_buf_1);
                          lcd.setCursor(0, 1);
                          lcd.print(lcd_buf_2);
                        }
                    }
                    else {  // web page request
                        // send rest of HTTP header
                        client.println("Content-Type: text/html");
                        client.println("Connection: keep-alive");
                        client.println();
                        // send web page
                        webFile = SD.open("index.htm");        // open web page file
                        if (webFile) {
                            while(webFile.available()) {
                                client.write(webFile.read()); // send web page to client
                            }
                            webFile.close();
                        }
                    }
                    // reset buffer index and all buffer elements to 0
                    req_index = 0;
                    StrClear(HTTP_req, REQ_BUF_SZ);
                    break;
                }
                // every line of text received from the client ends with \r\n
                if (c == '\n') {
                    // last character on line of received text
                    // starting new line with next character read
                    currentLineIsBlank = true;
                } 
                else if (c != '\r') {
                    // a text character was received from client
                    currentLineIsBlank = false;
                }
            } // end if (client.available())
        } // end while (client.connected())
        delay(1);      // give the web browser time to receive the data
        client.stop(); // close the connection
    } // end if (client)
}

// get the two strings for the LCD from the incoming HTTP GET request
boolean GetLcdText(char *line1, char *line2, int len)
{
  boolean got_text = false;    // text received flag
  char *str_begin;             // pointer to start of text
  char *str_end;               // pointer to end of text
  int str_len = 0;
  int txt_index = 0;
  char *current_line;

  current_line = line1;

  // get pointer to the beginning of the text
  str_begin = strstr(HTTP_req, "&L1=");

  for (int j = 0; j < 2; j++) { // do for 2 lines of text
    if (str_begin != NULL) {
      str_begin = strstr(str_begin, "=");  // skip to the =
      str_begin += 1;                      // skip over the =
      str_end = strstr(str_begin, "&");

      if (str_end != NULL) {
        str_end[0] = 0;  // terminate the string
        str_len = strlen(str_begin);

        // copy the string to the buffer and replace %20 with space ' '
        for (int i = 0; i < str_len; i++) {
          if (str_begin[i] != '%') {
            if (str_begin[i] == 0) {
              // end of string
              break;
            }
            else {
              current_line[txt_index++] = str_begin[i];
              if (txt_index >= (len - 1)) {
                // keep the output string within bounds
                break;
              }
            }
          }
          else {
            // replace %20 with a space
            if ((str_begin[i + 1] == '2') && (str_begin[i + 2] == '0')) {
              current_line[txt_index++] = ' ';
              i += 2;
              if (txt_index >= (len - 1)) {
                // keep the output string within bounds
                break;
              }
            }
          }
        } // end for i loop
        // terminate the string
        current_line[txt_index] = 0;
        if (j == 0) {
          // got first line of text, now get second line
          str_begin = strstr(&str_end[1], "L2=");
          current_line = line2;
          txt_index = 0;
        }
        got_text = true;
      }
    }
  } // end for j loop

  return got_text;
}

// sets every element of str to 0 (clears array)
void StrClear(char *str, char length)
{
    for (int i = 0; i < length; i++) {
        str[i] = 0;
    }
}

// searches for the string sfind in the string str
// returns 1 if string found
// returns 0 if string not found
char StrContains(char *str, char *sfind)
{
    char found = 0;
    char index = 0;
    char len;

    len = strlen(str);
    
    if (strlen(sfind) > len) {
        return 0;
    }
    while (index < len) {
        if (str[index] == sfind[found]) {
            found++;
            if (strlen(sfind) == found) {
                return 1;
            }
        }
        else {
            found = 0;
        }
        index++;
    }

    return 0;
}

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.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Arduino Web Page Text to LCD - web2lcd</title>
        <script>

        strLine1 = "";
        strLine2 = "";
        
        function SendText()
        {
            nocache = "&nocache=" + Math.random() * 1000000;
            var request = new XMLHttpRequest();
            
            strLine1 = "&L1=" + document.getElementById("txt_form").line1LCD.value;
            strLine2 = "&L2=" + document.getElementById("txt_form").line2LCD.value;
            
            request.open("GET", "ajax_inputs" + strLine1 + strLine2 + nocache, true);
            request.send(null);
        }
        </script>
    </head>

    <body onload="GetArduinoIO()">
        <p><b>Enter text to send to Arduino LCD:</b></p>
        <form id="txt_form" name="frmText">
            <label>Line 1: <input type="text" name="line1LCD" size="16" maxlength="16" /></label><br /><br />
            <label>Line 2: <input type="text" name="line2LCD" size="16" maxlength="16" /></label>
        </form>
        <br />
        <input type="submit" value="Send Text" onclick="SendText()" />
    </body>

</html>

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/