Send messages on LCD display


Description

In this tutorial is shown how to send messages via a Smartphone/PC on a LCD display using an Arduino UNO WiFi.


Warning:
Please, it's important to upgrade to the latest ESP firmware, using the Arduino UNO firmware updater tool, before to continue this tutorial.

 

Hardware 

You can also use the component of the  WorkShop kit or you can use a Tinkerkit LCD.
For more details visit our Store.

Circuit

Use the breadboard to place the LCD display and realize the circuit shown in the below image:

LCDcircuit

Pay attention to connect correctly the LCD.
Execute these connections:
LCD  Board
Vss GND
Vcc 5V
V0 Potentiometer
RS D12
R/W GND
E D11
D0 -
D1 -
D2 -
D3 -
D4 D5
D5 D4
D6 D3
D7 D2
LED+ 5V
LED- GND
LCD

Code

Now connect the board to PC, via USB cable, and upload the code below, using the Arduino IDE (click here to download the sketch):

Warning:
If you are using the Arduino IDE 1.7.x then continue to use the ArduinoWiFi.h library.
Instead if you are using the Arduino IDE 1.8.x then download the UNOWiFiDev.Edition library from Library Manager and modify the code, replacing #include <ArduinoWiFi.h> with #include <UnoWiFiDevEd.h>

/*
Send a message to an LCD connected to the UnoWiFi via web browser
Upload the code and open your borwser on http://<IP>/arduino/webserver/ or http://<hostname>.local/arduino/webserver/
for more information:
http://www.arduino.org/learning/tutorials/boards-tutorials/send-messages-on-lcd-display

created in November 2016
by a.ferrante[at]arduino[dot]org & sebba[at]arduino[dot]org
*/

/*Import libraries*/
#include <Wire.h>
#include <ArduinoWiFi.h>// if you are using the Arduino IDE 1.8.x then: //#include <UnoWiFiDevEd.h>
// include the library code for the LCD
#include <LiquidCrystal.h>

// initialize the library with the numbers of the interface pins
LiquidCrystal lcd(12, 11, 5, 4, 3, 2);

/*SET UP*/
void setup() {
Wifi.begin();
Wifi.println("WebServer Server is up");
// set up the LCD's number of columns and rows:
lcd.begin(16, 2);
// Print a message to the LCD.
lcd.print("WiFi Tutorial");
}


/*LOOP*/
void loop() {
while (Wifi.available()) {
process(Wifi);//call process() function
}
delay(50);
}

/*functions*/
/*process()
There are special messages availables that allow you to
control the 328p from the ESP8266:
'arduino/webserver': to create your own personalized web server
'arduino/digital': to control digital pins
'arduino/analog': to control analog pins
'arduino/servo': to control servos
'arduino/custom': to create your personalized command
*/
void process(WifiData client) {
// read the command
String command = client.readStringUntil('/');
//Manage the command to the proper funcion

if (command == "webserver") {
// call WebServer() function when you type the URL
//http://<IP>/arduino/webserver/<br< a=""> /> WebServer(client);
}
if (command == "custom") {
//call customCommand() function when the JavaScritp
//create an AJAX request to the Uno WiFi to the URL
//http://<IP>/arduino/custom/value<br< a=""> /> //where "value" is your message
customCommand(client);
}
}

/*WebServer()*/
void WebServer(WifiData client) {
client.println(F("<html><head><style>"));
client.println(F("input[type=text]{font-size:40px;color:#FFF;width:50%;margin:10% 0 0 25%;background:#00979C;}"));
client.println(F("p{margin:10% 25% 0 25%;text-align:center;font-size: xx-large;}"));
client.println(F("</style><script>"));

client.println(F("function customCommand(elm){"));
//Retrive the value from the object that creates the event
client.println(F("var value=document.getElementById(elm.id).value"));
//Send an ajax request to the Uno Wifi
client.println(F("ajax(0,value,'custom')}"));
client.println(F("function ajax(pin,value,command) {"));
//Manage the command received for the Uno WiFi
client.println(F("var arduinoURL_array=document.URL.split('/');"));
client.println(F("var arduinoURL=arduinoURL_array[0]+'//'+arduinoURL_array[2];"));
client.println(F("url=arduinoURL+'/arduino/'+command+'/'+pin+'/'+value"));
client.println(F("if(command=='custom')"));
client.println(F("url=arduinoURL+'/arduino/'+command+'/'+value"));
//Create the HTTP Request
client.println(F("xmlhttp=new XMLHttpRequest()"));
client.println(F("xmlhttp.onreadystatechange=function(){"));
client.println(F("if(xmlhttp.readyState==4 && xmlhttp.status==200)"));
client.println(F("var resp = xmlhttp.responseText"));
//Do not consider undefined responses
client.println(F("if(typeof resp==='undefined')return}"));
//Return a proper message for each command
client.println(F("xmlhttp.open('GET',url,true)"));
client.println(F("xmlhttp.send()}"));

client.println(F("</script></head><body>"));

client.println(F("<p>Write your message (max 32 char) and press <b>Enter</b><br>or unfocus text field</p>"));
//Create the button object
client.print(F("<input id=button type='text' class='off' maxlength='32' onchange='customCommand(this);' value='Your message'/>"));

client.println(F("</body></html>"));
client.print(DELIMITER); //end communication
client.flush();
}

/*customCommand() function
It manage what happens when you press enter after you write a message
*/
void customCommand(WifiData client) {
String message = client.readString();
//Clear the screen
lcd.clear();
message = message.substring(0, message.length()-1); //Remove last char
message.replace("%20", " "); //Remove special character

if(message.length()>16){
lcd.setCursor(0, 0);
lcd.print(message.substring(0, 16));
lcd.setCursor(0, 1);
lcd.print(message.substring(16, message.length()));
}

lcd.setCursor(0, 0);
lcd.print(message); //Print the message on the LCD
// Send feedback to client
client.println("Status: 200 OK\n");
client.print(F("VAL: "));
client.print(message);
client.print(EOL); //char terminator
}


Warning:

If you want to use an external webserver, for example Apache, then use this other code.


Output


LCD

WiFi tutorial
Write your message and press Enter :

LCD message
 
The message will be shown in the LCD display:

hello message

Note: 
If you haven't configured your board then click here.