GPS Location Display With GPS And TFT Display Shields

Recently the great people from Makerfabs sent me an Arduino GPS Shield to support the Visuino development and allow me to make more Tutorials. I also wanted to make more tutorials with my ILI9341 TFT Touchscreen Display Shield, and I decided to make a Tutorial using the 2 shields together.

In this Tutorial, I will show you how easy it is, to connect the Shields to Arduino, and program it with Visuino to display GPS Location information on the Display.

Step 1: Components

• One Arduino UNO compatible board (It may work with Mega too, but I have not tested the shield with it yet)

• One Makerfabs Arduino GPS Shield (Back side shown on Picture 2)

• One ILI9341 2.4" TFT Touchscreen Shield for Arduino

After I posted this Tutorial, the great people form Makerfabs made a Special Combo containing all the components for this project!

Step 2: Start Visuino, Add, and Configure TFT Display Shield

Since the Arduino UNO has only one Serial port, and it is needed to program the Arduino, you will need to program the Arduino UNO before the GPS is connected.

To start programming the Arduino, you will need to have the Arduino IDE installed from here: http://www.arduino.cc/.

Make sure that you install 1.6.7 or higher, otherwise this tutorial will not work!

The Visuino: https://www.visuino.com also needs to be installed.

• Start Visuino as shown in the first picture

• Click on the "Arrow Down" button of the Arduino component to open the Drop Down Menu (Picture 1)

• From the Menu select "Add Shields..." (Picture 1)

• In the "Shields" dialog expand the "Displays" category, and select the "TFT Color Touch Screen Display ILI9341 Shield", then click on the "" button to add it (Picture 2)

• In the Object Inspector expand the "Text" property (Picture 3)

• In the Object Inspector set the value of the "Size" sub-property of the "Text" property to "2" (Picture 3) - This will make bigger the default text size when drawing text on the display

Step 3: In Visuino: Add Text Field Elements for the GPS Location Information

Next we need to add Graphics elements to display the Latitude, Longitude, and Altitude from the GPS:

• In the Object Inspector, click on the "..." button next to the value of the "Elements" property of the "TFT Display" Element (Picture 1)

• In the Elements editor select “Text Field”, and then click 3 Times on the "" button (Picture 2) to add 3 of them (Picture 2)

• Select the 3 "Text Field" Elements (Picture 3)

• In the Object Inspector set the value of the "Auto Size" property of the 3 elements to "False" (Picture 3)

• In the Object Inspector set the value of the "Width" property of the 3 elements to "10" (Picture 3)

• In the Object Inspector set the value of the "X" property of the 3 elements to "10" (Picture 3)

Step 4: In Visuino: Set the rest of the properties of the Text Field elements

• Select the "Text Field1" Element (Picture 1)

• In the Object Inspector set the value of the "Initial Value" property of the element to "Update" (Picture 1) - this will display Update until the first value arrives from the GPS

• In the Object Inspector set the value of the "Y" property of the element to "20" (Picture 2)

• Select the "Text Field2" Element (Picture 3)

• In the Object Inspector set the value of the "Y" property of the element to "40" (Picture 3)

• Select the "Text Field3" Element (Picture 4)

• In the Object Inspector set the value of the "Y" property of the element to "60" (Picture 4)

Step 5: In Visuino: Add and connect Serial GPS Component

To decode the GPS information from the GPS Shield, we need to add and connect a GPS component in Visuino:

• Type "GPS" in the Filter box of the Component Toolbox then select the "Serial GPS" component (Picture 1), and drop it in the design area

• Connect the "Latitude" output pin of the "Location" box of the GPS1 component to the "In" pin of the "Shields.TFT DisplayElements.Text Field1" element of the Arduino component (Picture 2)

• Connect the "Longitude" output pin of the "Location" box of the GPS1 component to the "In" pin of the "Shields.TFT DisplayElements.Text Field2" element of the Arduino component (Picture 3)

• Connect the "Altitude" output pin of the "Location" box of the GPS1 component to the "In" pin of the "Shields.TFT DisplayElements.Text Field3" element of the Arduino component (Picture 4)

• Connect the "Out" pin of the GPS1 component (Picture 5) to the to the "In" pin of the "Serial[ 0 ]" of the Arduino component (Picture 6)

Step 6: Generate, Compile, and Upload the Arduino code

• In Visuino, Press F9 or click on the button shown on Picture 1 to generate the Arduino code, and open the Arduino IDE

• In the Arduino IDE, click on the Upload button, to compile and upload the code (Picture 2)

Step 7: Configure and Connect the GPS Shield to Arduino

Now that the Arduino UNO is programmed, we can install the shields.

The Maketfabs GPS Shield has jumpers that allow you to configure the pins used for serial communication with the GPS Chip (Picture 1). We will configure them to use the Hardware Serial on pins 0, and 1 of the Arduino UNO:

• Configure the TX jumper to connect the TX to Pin 0 (Picture 1)

• Configure the RX jumper to connect the RX to Pin 1 (Picture 1)

• Plug the TFT Shield on top of the Arduino Uno as shown on Pictures 2, 3, 4 and 5

Step 8: Connect the ILI9341 TFT Touchscreen Display Shield to Arduino

Plug the TFT Shield on top of the Arduino Uno as shown on the pictures.

Step 9: And play...

Congratulations! You have completed the project.

Pictures 2, 3, 4 and 5 and the Video show the connected and powered up project.

• Power up the Arduino UNO

• Initially you will see "Update" displayed on the TFT Display Shield (Picture 1)

• If you look from the side (Picture 2), after awhile you will see that the Blue LED on the Makerfabs GPS Shield will start flashing indicating that the shield has found GPS satellites (Picture 3)

• Shortly after this the GPS location will be displayed on the TFT Display Shield (Picture 4)

Depending on the location, it can take up to few minutes to show the location data. If after few minutes the data is still not shown, power down the project wait about a minute and power it again to reset the GPS.

On Picture 1 you can see the complete Visuino diagram. You can download and open it in Visuino: https://www.visuino.com

If you don't have the necessary components, the great people form Makerfabs made a Special Combo containing all the components for this project!