Send messages on TFT display


Description

In this tutorial is shown how to send messages via a Smartphone/PC on a TFT 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 

For more details visit our Store.

Circuit

Use the breadboard to place the TFT display and execute these connections:
TFT Boards
5V 5V
MISO D12
SCK D13
MOSI D11
LCD CS D10
SD CS D4
D/C D9
RESET D8
BL 5V
GND GND

TFTcircuit
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 TFT connected to the SPI of 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-tft-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 <TFT.h> // Arduino TFT library
#include <SPI.h>

// pin definition for the Uno WiFi
#define cs 10
#define dc 9
#define rst 8

// create an instance of the library
TFT TFTscreen = TFT(cs, dc, rst);

/*SET UP*/
void setup() {
Wifi.begin();
Wifi.println("WebServer Server is up");
// Put this line at the beginning of every sketch that uses the GLCD:
TFTscreen.begin();

// clear the screen with a black background
TFTscreen.background(0, 0, 0);

// write the static text to the screen
// set the font color to white
TFTscreen.stroke(255, 255, 255);
// set the font size
TFTscreen.setTextSize(2);
// write the text to the top left corner of the screen
TFTscreen.text("WiFi Tutorial\n", 0, 0);
}


/*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('/');
if (command == "webserver") {
WebServer(client);// call WebServer() function
}
if (command == "custom") {
customCommand(client);//call customCommand() function
}
}

/*WebServer()*/
void WebServer(WifiData client) {
client.println(F("<html><head><style>"));
client.println(F("textarea{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("input[type=button]{font-size:62px;color:#FFF;width:50%;margin:5% 0 0 25%;background: #007481;}"));
client.println(F("</style><script>"));

client.println(F("function customCommand(){"));
//Retrive the value from the object that creates the event
client.println(F("var value=document.getElementById('text').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}"));
client.println(F("xmlhttp.open('GET',url,true)"));
client.println(F("xmlhttp.send()}"));
client.println(F("</script></head><body>"));

//Create the text area object
client.println(F("<textarea id='text' cols='26' rows='10' placeholder='Insert your text here and press the button'></textarea>"));
//Create the send button object
client.println(F("<input type='button' onclick='customCommand()' value='Send' />"));
client.println(F("</body></html>"));
client.print(DELIMITER); //end communication
client.flush();
}

/*customCommand() function*/
void customCommand(WifiData client) {
String message = client.readString();
message = message.substring(0, message.length()-1); //Remove last char
//Replace special characters
message.replace("%20", " ");
message.replace("%C3%A8", "e'");
message.replace("%C3%A9", "e'");
message.replace("%C3%AC", "i'");
message.replace("%C3%A0", "a'");
message.replace("%C3%B2", "o'");
message.replace("%C3%B9", "u'");

// clear the screen with a black background
TFTscreen.background(0, 0, 0);
// set the font color
TFTscreen.stroke(255, 255, 255);
// set the font size
TFTscreen.setTextSize(2);
// write the text to the top left corner of the screen
TFTscreen.text("WiFi Tutorial\n", 0, 0);
// set the font size very large for the loop
TFTscreen.setTextSize(1);

char msgarray[message.length()+1];

// print the sensor value

//if message length is less than 26 character
if(message.length()<26){
message.toCharArray(msgarray, message.length()+1);
TFTscreen.text(msgarray, 0, 20);
}
//if message is long (multi line)
else{
for(int i=20, a=0; i<message.length() || i<120; i+=12, a+=26){
(message.substring(a, a+26)).toCharArray(msgarray, 27);
TFTscreen.text(msgarray, 0, i);
}
}
// 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

send a message

tft tutorial
Write your message and press Send button:

helloworld

The message will be shown in the TFT display:


Hello world message

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