the most easy to use tft lcd for arduino quotation
In this Arduino touch screen tutorial we will learn how to use TFT LCD Touch Screen with Arduino. You can watch the following video or read the written tutorial below.
For this tutorial I composed three examples. The first example is distance measurement using ultrasonic sensor. The output from the sensor, or the distance is printed on the screen and using the touch screen we can select the units, either centimeters or inches.
The next example is controlling an RGB LED using these three RGB sliders. For example if we start to slide the blue slider, the LED will light up in blue and increase the light as we would go to the maximum value. So the sliders can move from 0 to 255 and with their combination we can set any color to the RGB LED, but just keep in mind that the LED cannot represent the colors that much accurate.
The third example is a game. Actually it’s a replica of the popular Flappy Bird game for smartphones. We can play the game using the push button or even using the touch screen itself.
As an example I am using a 3.2” TFT Touch Screen in a combination with a TFT LCD Arduino Mega Shield. We need a shield because the TFT Touch screen works at 3.3V and the Arduino Mega outputs are 5 V. For the first example I have the HC-SR04 ultrasonic sensor, then for the second example an RGB LED with three resistors and a push button for the game example. Also I had to make a custom made pin header like this, by soldering pin headers and bend on of them so I could insert them in between the Arduino Board and the TFT Shield.
Here’s the circuit schematic. We will use the GND pin, the digital pins from 8 to 13, as well as the pin number 14. As the 5V pins are already used by the TFT Screen I will use the pin number 13 as VCC, by setting it right away high in the setup section of code.
As the code is a bit longer and for better understanding I will post the source code of the program in sections with description for each section. And at the end of this article I will post the complete source code.
I will use the UTFT and URTouch libraries made by Henning Karlsen. Here I would like to say thanks to him for the incredible work he has done. The libraries enable really easy use of the TFT Screens, and they work with many different TFT screens sizes, shields and controllers. You can download these libraries from his website, RinkyDinkElectronics.com and also find a lot of demo examples and detailed documentation of how to use them.
After we include the libraries we need to create UTFT and URTouch objects. The parameters of these objects depends on the model of the TFT Screen and Shield and these details can be also found in the documentation of the libraries.
Next we need to define the fonts that are coming with the libraries and also define some variables needed for the program. In the setup section we need to initiate the screen and the touch, define the pin modes for the connected sensor, the led and the button, and initially call the drawHomeSreen() custom function, which will draw the home screen of the program.
So now I will explain how we can make the home screen of the program. With the setBackColor() function we need to set the background color of the text, black one in our case. Then we need to set the color to white, set the big font and using the print() function, we will print the string “Arduino TFT Tutorial” at the center of the screen and 10 pixels down the Y – Axis of the screen. Next we will set the color to red and draw the red line below the text. After that we need to set the color back to white, and print the two other strings, “by HowToMechatronics.com” using the small font and “Select Example” using the big font.
Next is the distance sensor button. First we need to set the color and then using the fillRoundRect() function we will draw the rounded rectangle. Then we will set the color back to white and using the drawRoundRect() function we will draw another rounded rectangle on top of the previous one, but this one will be without a fill so the overall appearance of the button looks like it has a frame. On top of the button we will print the text using the big font and the same background color as the fill of the button. The same procedure goes for the two other buttons.
Now we need to make the buttons functional so that when we press them they would send us to the appropriate example. In the setup section we set the character ‘0’ to the currentPage variable, which will indicate that we are at the home screen. So if that’s true, and if we press on the screen this if statement would become true and using these lines here we will get the X and Y coordinates where the screen has been pressed. If that’s the area that covers the first button we will call the drawDistanceSensor() custom function which will activate the distance sensor example. Also we will set the character ‘1’ to the variable currentPage which will indicate that we are at the first example. The drawFrame() custom function is used for highlighting the button when it’s pressed. The same procedure goes for the two other buttons.
drawDistanceSensor(); // It is called only once, because in the next iteration of the loop, this above if statement will be false so this funtion won"t be called. This function will draw the graphics of the first example.
getDistance(); // Gets distance from the sensor and this function is repeatedly called while we are at the first example in order to print the lasest results from the distance sensor
So the drawDistanceSensor() custom function needs to be called only once when the button is pressed in order to draw all the graphics of this example in similar way as we described for the home screen. However, the getDistance() custom function needs to be called repeatedly in order to print the latest results of the distance measured by the sensor.
Here’s that function which uses the ultrasonic sensor to calculate the distance and print the values with SevenSegNum font in green color, either in centimeters or inches. If you need more details how the ultrasonic sensor works you can check my particular tutorialfor that. Back in the loop section we can see what happens when we press the select unit buttons as well as the back button.
Ok next is the RGB LED Control example. If we press the second button, the drawLedControl() custom function will be called only once for drawing the graphic of that example and the setLedColor() custom function will be repeatedly called. In this function we use the touch screen to set the values of the 3 sliders from 0 to 255. With the if statements we confine the area of each slider and get the X value of the slider. So the values of the X coordinate of each slider are from 38 to 310 pixels and we need to map these values into values from 0 to 255 which will be used as a PWM signal for lighting up the LED. If you need more details how the RGB LED works you can check my particular tutorialfor that. The rest of the code in this custom function is for drawing the sliders. Back in the loop section we only have the back button which also turns off the LED when pressed.
In order the code to work and compile you will have to include an addition “.c” file in the same directory with the Arduino sketch. This file is for the third game example and it’s a bitmap of the bird. For more details how this part of the code work you can check my particular tutorial. Here you can download that file:
drawDistanceSensor(); // It is called only once, because in the next iteration of the loop, this above if statement will be false so this funtion won"t be called. This function will draw the graphics of the first example.
getDistance(); // Gets distance from the sensor and this function is repeatedly called while we are at the first example in order to print the lasest results from the distance sensor
This website is using a security service to protect itself from online attacks. The action you just performed triggered the security solution. There are several actions that could trigger this block including submitting a certain word or phrase, a SQL command or malformed data.
were missing for my display (hailege, 2,8 tft, spi, il9431, https://www.amazon.de/-/en/gp/product/B07YTWRZGR/ref=ppx_yo_dt_b_asin_title_o04_s00?ie=UTF8&psc=1). so it might just be that the led backlight isnt being turned on. but of course the tip might not help with the st7796s.
1st Arduino project, beyond the very basic intros, and no coding experience before this endeavor, so I"m sure I"m just not searching the right things/way to figure this out.
The project - replacing gauges in my truck with Arduino+TFT display. As a starter, I"m working strictly on single fuel gauge functionality, and eventually including dual fuel gauges (2 separate fuel tanks in truck), voltage gauge, coolant temp gauge, and GPS driven speedometer. Yeah...I"m already realizing I"m in for a bit of a steep learning curve here, lol.
The setup - Genuine Arduino Mega 2560, Seeed Studio 2.8" touchscreen sheild V1.0, aftermarket universal style fuel sender. Sender is connected to Analog pin 9 through a voltage divider circuit running roughly 1.5VDC-4.95VDC, and I get appropriate numbers from the serial monitor when cycling the sender. I"m not currently utilizing the touch features of the screen, though I may in the future. RIght now it"s strictly a display device. I did find out how to modify the TFT.h file to get the display to function on the Mega board, and am writing static text to it currently.
The problem - how the heck do I get the value read from the Analog pin to display on the screen? I"ve spent the last couple of days searching the forums here and on Adafruit, as well as various other sites found on Google. I"ve spent hours looking at other"s code to try and figure this out, but not being a coder before this, I"m finding it difficult to determine which parts of the code are relevant to what I"m attempting to do, and I think I may be confusing myself/WAY overthinking it, lol. It seems like it should be a simple thing...
This is my current code. I started with the Draw Text example sketch, and modified it for my use. dTankPin is the variable I set for the driver"s side fuel tank, with dLevel being the variable set to store the reading I get from the sender. I set static text lines for Tank - D, Tank - P (driver and passenger side fuel tanks), Volts, and C/T (coolant temp), then MPH for the future GPS speedometer. The commented out lines in there are just static values I added to initially set font size to fit the screen, but that I want to replace with the dynamic values i get from reading the various sensors.
That part I"m good with, but I can"t figure out how to get a value read from the analog pins to display as numbers on the screen. I"m not looking to be spoon fed the answers, but if I could maybe get some guidance on what functions I"m missing, or what I should be searching for to figure this out?
Displays are one of the best ways to provide feedback to users of a particular device or project and often the bigger the display, the better. For today’s tutorial, we will look on how to use the relatively big, low cost, ILI9481 based, 3.5″ Color TFT display with Arduino.
This 3.5″ color TFT display as mentioned above, is based on the ILI9481 TFT display driver. The module offers a resolution of 480×320 pixels and comes with an SD card slot through which an SD card loaded with graphics and UI can be attached to the display. The module is also pre-soldered with pins for easy mount (like a shield) on either of the Arduino Mega and Uno, which is nice since there are not many big TFT displays that work with the Arduino Uno.
The module is compatible with either of the Arduino Uno or the Arduino Mega, so feel free to choose between them or test with both. As usual, these components can be bought via the links attached to them.
One of the good things about this module is the ease with which it can be connected to either of the Arduino Mega or Uno. For this tutorial, we will use the Arduino Uno, since the module comes as a shield with pins soldered to match the Uno’s pinout. All we need to do is snap it onto the top of the Arduino Uno as shown in the image below, thus no wiring required.
This ease of using the module mentioned above is, however, one of the few downsides of the display. If we do not use the attached SD card slot, we will be left with 6 digital and one analog pin as the module use the majority of the Arduino pins. When we use the SD card part of the display, we will be left with just 2 digital and one analog pin which at times limits the kind of project in which we can use this display. This is one of the reasons while the compatibility of this display with the Arduino Mega is such a good news, as the “Mega” offers more digital and analog pins to work with, so when you need extra pins, and size is not an issue, use the Mega.
To easily write code to use this display, we will use the GFX and TFT LCD libraries from “Adafruit” which can be downloaded here. With the library installed we can easily navigate through the examples that come with it and upload them to our setup to see the display in action. By studying these examples, one could easily learn how to use this display. However, I have compiled some of the most important functions for the display of text and graphics into an Arduino sketch for the sake of this tutorial. The complete sketch is attached in a zip file under the download section of this tutorial.
As usual, we will do a quick run through of the code and we start by including the libraries which we will use for the project, in this case, the Adafruit GFX and TFT LCD libraries.
With this done, the Void Setup() function is next. We start the function by issuing atft.reset() command to reset the LCD to default configurations. Next, we specify the type of the LCD we are using via the LCD.begin function and set the rotation of the TFT as desired. We proceed to fill the screen with different colors and display different kind of text using diverse color (via the tft.SetTextColor() function) and font size (via the tft.setTextSize() function).
Next is the void loop() function. Here we basically create a UI to display the youtube subscribe button, using some of the same functions we used under the void setup() function.
The Adafruit library helps reduce the amount of work one needs to do while developing the code for this display, leaving the quality of the user interface to the limitations of the creativity and imagination of the person writing the code.
That’s it for this tutorial guys, thanks for reading. If you made some cool projects based on this or you just want to ask questions about this tutorial, feel free to reach out via the comment section below.
While in theory an Arduino can run any LCD, we believe that some LCDs are particularly suited to being an Arduino LCD display. We"ve currated this list of LCD displays that will make any Arduino-based project shine.
First is the interface. All of these displays support SPI. Builders often ask themselves (or us) "which interface uses the fewest GPIO pins? AND is that interface fast enough to update the screen at an acceptable rate for my application?" When using the relatively small procesor of the Arduino, SPI is usually the best interface because it takes few wires (either 3 or 4) however it does limit the overall size (number of pixels) that can be quickly controlled. I2C is another choice of interface to leave GPIOs open. We tend to recommend SPI over I2C for Arduino displays because SPI is quicker and better at handling more complex data transfer, like pulling image data from an SD card.
Which brings us to the second factor in choosing an Arduino display: the number of pixels. We typically recommend a display with a resolution of 320x240 or less for use with Arduino. Take for example a 320x240 24-bit display. Such a display takes 230,400 bytes *(8 + 2) = 2,304,000 bits for a single frame. Divide that by 8,000,000 (Arduino SPI speed of 8MHZ) = 0.288 seconds per frame or 3.5 frames per second. 3.5 fps is fast enough for many applications, but is not particularly quick. Using fewer bits-per-pixel or a display with fewer pixels will result in higher frame rates. Use the calculator below to calculate the frame rate for a display using SPI with an Arduino.
Third, we want to recommend displays that are easy to connect to an Arduino. Each of these displays has a ZIF tail or easily solderable throughholes, so no fine pitch soldering is needed. These displays can either be brought up on the CFA10102 generic breakout board, or with a custom CFA breakout board.
Most character displays can be run via Parallel connection to an Arduino. You"ll want to make sure you can supply enough current to operate the backlight.
The first part of this three-part series discussed common touchscreen technologies and their typical use-cases. Then, the second part investigated a few readily available and affordable touch display options for makers and hobbyists. This article documents how to get started with one of the recommended Arduino-compatible 2.8” resistive touchscreens from part two.
The TFT display I use contains a resistive overlay, which allows users to control an Arduino-based project with touch inputs. The display controller that comes with the touchscreen supports a few different communication methods. However, I’ll only outline two of them as I find these to be the most useful. The first method uses eight parallel communication lines to transmit pixel data from the Arduino to the display. I recommend using this method in multimedia applications where the Arduino needs to transfer a lot of pixel data.
The second method involves using SPI to communicate with the display controller. Doing so saves a few digital I/O lines with the tradeoff of being slower than the parallel communication method. To enable the display’s SPI mode, you have to close these three solder pad jumpers on the bottom side of the board:
Note that I used the SPI method to send data from the Arduino to the display. Either way, in addition to the pixel data lines, you’ll further need to employ two additional digital I/O lines and two more analog pins of the Arduino if you want to add resistive touch detection to your project. In addition, this touchscreen module comes with a built-in micro SD card reader I won’t discuss further in this article.
You have to install two libraries before you can send image data to the TFT display. First, use the Arduino IDE’s built-in library manager to download the Adafruit ILI9341 library. This package handles low-level communication between the Arduino and the display controller IC. Then, download the Adafruit_GFX library. The second library contains helpful code for drawing graphics primitives such as simple shapes and text. I recommend you read this article if you don’t know how to use the library manager in the Arduino IDE.
This short test program first initializes the TFT display in the setup()-function. Then, I defined a few helper methods. The resetAndClearScreen()-method resets the display’s rotation and erases all previously drawn pixels. The next function is drawIntroText(). It prints a short status message in the top left corner of the display. Lastly, drawTouchButton() creates a rectangle at the specified position with the given width and height. Then, the method places a string at the center of the previously drawn rectangle. As the name suggests, I’ll later use these rectangles to detect user inputs. The loop()-method refreshes the screen twice a second. But because there’s no interactivity built into the program yet, users can’t change what the screen displays at this point.
To use the resistive touch capabilities of this display, download the Adafruit_TouchScreen library using the Arduino IDE’s built-in library manager. The example code from above prints a few lines of text and then draws two touch buttons. Next, we’ll have to detect when a user presses one of the buttons. If that happens, the Arduino should refresh the screen and draw all the components using different colors. Therefore, I added the following method to detect whether a user touched one of the buttons:
The touchedWithin()-function is easy to understand. The first parameter represents the coordinates of the detected input. Then, the helper method checks whether these x and y coordinates are within the button’s dimensions.
Before making the previously discussed calls to the various draw-functions, the loop() method also checks whether the user touched the resistive screen. The TSPoint class contains a z-value we can use to determine how hard a user pressed down on the screen. This z-value is also perfect for preventing the Arduino from detecting unwanted inputs. If the z-value is greater than a fixed threshold value, the Arduino detects a touch input. The code then calls the touchedWithin()-function to determine whether the user pressed one of the buttons.
Arduino-compatible touchscreens allow you to quickly add a touchscreen to your existing or new DIY projects. Simple-to-use libraries let you get the display up and running in practically no time. The screen I used offers a few ways for devices to send pixel data to it. A parallel interface allows you to achieve higher screen refresh rates, which might be essential in multimedia applications. The parallel interface is also perfect for MCUs with a large number of I/O pins. The SPI method, on the other hand, is a bit slower compared to parallel communication. It, however, allows you to cut down on the number of required I/O pins, which is the preferred option in most Arduino projects.
※Controller IC Replacement NoticeDue to the global shortage of IC, the controller RA8876 used in this module has been difficult to purchase. In order not to affect the delivery, we will use the controller LT7683 as replacement which is fully compatible with the same stable performance when the RA8876 is out of stock. (Oct-28-2021)
Spice up your Arduino project with a beautiful large display shield with built in microSD card connection. This TFT display is big (10.1" diagonal) bright (24 white-LED backlight) and colorful (18-bit 262,000 different shades)! 1024x600 pixels with individual pixel control,optional 10.1 inch capacitive touch panel.
The shield is fully assembled, tested and ready to go. No wiring, no soldering! Simply plug it in and load up our library - you"ll have it running in under 10 minutes! Works best with any Arduino Due board.
This display shield has a controller built into it with RAM buffering, so that almost no work is done by the microcontroller. You can connect more sensors, buttons and LEDs.
Of course, we wouldn"t just leave you with a datasheet and a "good luck!" - we"ve written a full open source graphics library at the bottom of this page that can draw pixels, lines, rectangles, circles and text. The code is written for Arduino but can be easily ported to your favorite microcontroller!
If you"ve had a lot of Arduino DUEs go through your hands (or if you are just unlucky), chances are you’ve come across at least one that does not start-up properly.The symptom is simple: you power up the Arduino but it doesn’t appear to “boot”. Your code simply doesn"t start running.You might have noticed that resetting the board (by pressing the reset button) causes the board to start-up normally.The fix is simple,here is the solution.
The shield is fully assembled, tested, and ready to go. No wiring, no soldering! Simply plug it in and load up the library - you"ll have it running in under 10 minutes!
This website is using a security service to protect itself from online attacks. The action you just performed triggered the security solution. There are several actions that could trigger this block including submitting a certain word or phrase, a SQL command or malformed data.
Over the years, we’ve had the opportunity to review and experiment with many gadgets in the Arduino ecosystem. The Wio Terminal from Seeed Studio is another one of these gadgets, however, it proves to be an entirely different beast.
Rather than be an individual module or control system, the Wio Terminal is a cleverly thought-out device that can operate either as a standalone IoT powerhouse or in conjunction with the hundreds of Grove and Raspberry Pi compatible modules.
What we find interesting about the Wio Terminal is, like the original Arduino ecosystem itself, caters to a very wide userbase. Those who are very new to the DIY electronics space will get just as much use out of the Wio Terminal as those who are looking to use it for advanced projects.
First, we use the Wio Terminal standalone as a Quote Generator. This uses the inbuilt LCD screen and WiFi module to get text data of famous quotes. We display programming-related quotes, however, you can modify the project to suit your requirements.
Our second project is a game we have called Whack-A-LED. This uses the Wio’s inbuilt accelerometer, GPIO and LCD screen. Our program is a take of the carnival game Whack-A-Mole, except we’re trying to whack LEDs instead, of course.
Finally, we build a multi-channel data logger that can be switched between various data sources to log them to an SD card for future analysis. It also displays a time graph on the Wio Terminal’s screen. In our example, we use a DHT11 weather sensor and a four-channel gas sensor.
The terminal itself is packaged in a neat plastic enclosure with no extruding connectors or delicate electronics. Along the top side is three digital pushbuttons which, like the directional D-pad underneath the screen, can be accessed through software to assign custom functionality to each.
The left side features a power slider that doubles as a reset switch. By sliding from the top position to the middle position, the Wio Terminal is turned on. However, by sliding it down further will quickly cut and reconnect power to the unit, resetting it. Sitting below this is a microSD card slot for datalogging and large files.
A very welcome addition to the Terminal is the use of the USB Type-C connector on the bottom, acting as both a power and data interface. There is a quickly diminishing list of reasons that manufacturers should be still using the outdated Micro and Mini USB connectors, so a fully reversible, durable and now largely universal port is a huge bonus.
Flipping the Terminal over, there is a 40-pin GPIO array compatible with the Raspberry Pi ecosystem. It can be slotted into most boards within the Raspberry Pi line-up, or external hardware can also be plugged in here.
But, as cheesy 1990s movies teach us, it’s what’s inside that counts. The Wio Terminal is rocking an ARM Cortex core running at 120Mhz, which is leaps and bounds ahead of the Arduino Uno, a hardy staple of the maker electronics world.
Sitting shotgun with the main microprocessor is the Realtek RTL8720DN WiFi / Bluetooth chip. This makes it effortless to integrate quick IoT functionality into your projects. This would be perfect for mini informational displays with little fussing about with wires or external modules.
While the technology described here isn’t new, this is the first time we’ve seen such a small and slick unit containing all of these features in one package. We think it’s a good way of experimenting with both basic and advanced coding depending on your skill level, while also not messing with wiring in modules as is typical with Arduino-based systems.
To program it using the Arduino IDE, as we’ll be doing, you’ll need to head into your Arduino IDE and open the preferences window from the menu bar. From there, just pop the below URL into the ‘Additional Board Manager URLs’ box:
After that, head into the Tools > Boards > Board Manager menu and search for Wio Terminal. After installing the latest version, be sure to change the board selection from the Tools > Board menu and choose the correct COM port from the Tools > Port menu.
If you’ve used Arduino boards before, this shouldn’t be anything new, but if you are still getting the hang of programming, you may need to experiment with which COM port to use.
Depending on what sensors you’re using, you will need to install the appropriate libraries. Typically, you can find the information available on the Seeed wiki along with some handy examples to test the code with.
For our first project, we’re using both the inbuilt LCD screen and WiFi module to get text data of famous quotes. Since we’re all nerds at DIYODE, we’ve of course chosen to choose famous programming quotes. The centre button of the Wio Terminal will be used to load a new quote and display it on the screen.
WiFi is involved here because we’re using a simple Web API to gather data and display it live. Since it’s connecting to WiFi, we could connect it with virtually any other web interface and make it work.
If you’re new to programming, this code may appear daunting, but it’s really just our Wio Terminal pretending to be a computer sending a web request and reading the response. An API is just an ‘application programming interface’ and is a fancy way of saying it’ll be the source of our data.
After installing the required WiFi libraries, we can open a new Arduino sketch and pop in the following initialization code. Unless your WiFi network so happens to be named “YOUR_WIFI_NAME” and has the password “YOUR_WIFI_PASSWORD”, you’ll want to change them to your home network details!
There isn’t a ton of libraries we need to import here. We’re using the Arduino JSON, rpcWiFi and HTTPClient libraries to handle the internet connection and data, and the TFT_eSPI library to handle the screen on the Wio Terminal.
The ‘wasPressed’ variable will be used during the main loop to ensure we only display one new quote when the button is pressed, and not to continue looking for quotes when the button is held. This is typically referred to as state detection, and we’ll talk about this shortly.
Our setup code is verbose but should be fairly self-explanatory as we read through it. We’re starting the TFT screen and setting its rotation, background settings and a placeholder text while we wait for a connection to the WiFi.
To make the WiFi and networking features work, you’ll need to reflash the WiFi firmware on the Wio Terminal. The official Seeed guide can be found here: https://wiki.seeedstudio.com/Wio-Terminal-Wi-Fi/ Note that if you haven’t already, you’ll need to also install Git.
It’s not as difficult as it sounds, and it only took us 10 minutes. If you’re wondering why the WiFi isn’t working on your Wio Terminal, there’s a good chance that this will fix the problem.
Also notice that there is a considerable number of calls to the Serial command, which essentially allows us to debug and inspect the functionality of the Wio Terminal by opening the Serial Monitor (Shortcut – Ctrl+Shift+M).
This is where the real heavy lifting happens! In our loop function, we’re using that ‘wasPressed’ variable mentioned before to respond only when the button is pressed, and not continuously held.
The getQuoteResponse() function is where the request actually happens, which consists of opening our URL (feel free to visit the URL shown, it will show a random programming quote in your browser), and loading it from a JSON format. We won’t go into JSON formats and the specifics of it in this project, but essentially its a field and value-based system where attributes are given names. Our response usually comes in this format:
Finally, we can actually draw the quote text on the Wio Terminal’s screen! This isn’t that tricky, except for that weird for loop with the numbers in it. The purpose of this is to provide some basic text wrapping.
Text wrapping is the process of bringing text fields down to the next line on the screen if it’s too long – which is often the case with quotes. The LCD library does have this function built-in, but it wasn’t cooperating for us, so we wrote it ourselves!
Essentially, we’re taking ‘chunks’ out of the text with the substring function and writing each to one line of the Wio Terminal’s LCD screen. The ‘len’ variable describes the number of characters on each line. If the function is confusing, just change some values and observe the effects!
We’re all done! Now just hit the upload button, ensuring that the Wio Terminal is switched on. After a couple of seconds of letting it connect to our WiFi…
…and boom! It’s all working. Inspiring programming quotes at the press of a button. Obviously, this isn’t the most practical program ever – but it’s a good starting program to experiment with the Wio Terminal and to demonstrate its capabilities with precisely zero external wiring required.
Programming quotes, as exciting as they are, get a little boring after a while. Let’s make a minigame with the Wio’s inbuilt accelerometer, GPIO and LCD screen.
Our program will be like the classic carnival game Whack-A-Mole, except here we’re trying to whack LEDs instead, of course. 9 ‘Holes’ fit comfortably on the Wio Terminal’s screen, so we can simply use the inbuilt accelerometer to determine which square the Wio is currently tilted towards.
To demonstrate that GPIO control is easy to accomplish with the Wio Terminal, we’re also going to be adding a simple green and red LED to show if a player was successful or not after pressing the centre button of the directional pad to signify a ‘whack’.
Like our first program, this code includes quite a bit of setup code to make everything talk together nicely. The LIS3DHTR library (and its associated calls to ‘lis’) is the inbuilt accelerometer, which can be used to calculate the current orientation and angular velocity (i.e. how fast the Wio Terminal is turning). We’re using that in the following section to find the current ‘tilt’ of the device. As usual, we’re starting up the screen and setting up the GPIO to handle the external LEDs on D0 and D1. We’ll check that out at the end!
Note that you can make the game easier or harder by changing the ‘LEDwaitTime’ variable to reflect how long each LED should wait before it disappears.
Much of this code will look familiar to those who have dabbled with Arduinos, as we are mostly dealing with game timing and logic here. It’s mostly a bunch of IF statements that check that delays are respected during game play. Notice, however, the calls to ‘lis.getAccelerationX()’ – this is the Wio Terminal’s inbuilt accelerometer.
Besides the initialization required in the setup function, there isn’t any fancy code required to get an accurate reading of the Wio’s physical movement! Handy!
This chunk of code is responsible for drawing an LED with primitive shapes. While it may look like a mess of coordinates and numbers, it simply draws shapes to make up an LED – including the top plastic dome, the legs and the white reflection on the LED body.
While we haven’t looked into using it, there is also functionality within the eSPI_TFT library to draw sprites. This means that small images can be loaded onto the Wio which can then be displayed through code.
Before we can play our Whack-a-LED game though, we need to build a simple circuit for two LEDs – one green LED for a ‘hit’ and one red LED for a ‘miss’. We used a small breadboard and a grove to four-pin header adapter. This can also be made yourself if you have a soldering iron and heatshrink handy!
The anode of each LED also needs to be connected to Ground (the blue line) and each cathode to the two data pins of the Grove connector. This means that by turning on pins D0 and D1, we can turn on the two status LEDs.
Finally, make sure that the Grove connector is plugged into the right port – the left port is for I2C accessories as we’ll be using in the next section.
And we’re done! Once the code is uploaded, enjoy our brand-new game Whack-a-LED! It’s actually pretty fun and the cartoon-style sprites look pretty good on the TFT display. Every time we miss a hole (or don’t hit it in time), the red LED lights up. If we’re successful, the green LED lights up. Awesome!
For our final project, we’re building a multi-channel data logger that can be switched between various data sources to log them to an SD card for future analysis. This could be imported into an application like Microsoft Excel later for graphing.
It’ll also display a time graph on the Wio Terminal. We’re sprinkling in some juicy data to analyse by using a DHT11 weather sensor and a four-channel gas sensor!
You may notice in our photos and experimentation that the gas concentrations sourced from the sensor unit have very high readings. The Carbon Monoxide readings, for example, were frequently reading above 200ppm – CO alarms are typically required to activate at around 70ppm. Unless there is something seriously wrong with our workshop, the gas readings are incorrect.
From our understanding, this is due to the fact that the gas sensor must preheat for some time before reasonably accurate measurements can be sourced. If the module has been in storage for some time, a preheat time of 72 hours is required according to the Seeed Wiki. Regardless, this sensor (and any other low-cost electronic module) should never be used as the sole detector device where there is concern about critical safety.
While the Wio Terminal doesn’t include any inbuilt graphics libraries for graphing or data displays, there are a number of libraries available for this purpose. We’re using the Seeed Line Chart library for display of data.
To switch between each data display, we’re putting the directional pad on the Wio Terminal to allow the user to switch between data channels. Pressing right increments the current data view to the next sensor, while pressing left decrements. Recording the data to the SD card (discussed shortly) can also be started by pressing in the button, and saved by pressing it again.
The Wio Terminal’s inbuilt microSD card slot is a great way to get data logging functionality into any project. Since we have direct access to the data being written to the SD card, any file format can be written provided we know its structure.
Recording data to the microSD card slot on the Wio Terminal is easier than you may expect. We’re going to be creating a CSV (Comma Separated Value) data format, which is a very simple system for writing and storing data readable by many spreadsheet software.
There are three modes that can be used to interact with the microSD card – READ, WRITE and APPEND. READ simply puts the file into a read-only mode – perfect for reading images without modifying the content. WRITE allows the Wio Terminal to completely overwrite the file, while APPEND automatically continues writing to the file without overwriting old content. We’re using READ and WRITE in our code to automatically fill out the header and insert new data content.
Above we’ve imported all the libraries required for this project. There isn’t a required order for this, but it’s still important that they are added otherwise the code won’t upload. You may also need to head to the Library Manager in the Arduino IDE to download these libraries if you haven’t got them installed.
The above code is a bit of a big chunk, but all it does is declare and initialize the variables we’ll be using for our data logger. In the first half, we’re initializing the variables we need to run the sensors, and in the second half, some variables are created to help track the state of the data logger. Note that if you have more sensors to use, simply change the max_graphs variable to suit the number of data points you have. In our case, we have the four gas levels from the gas sensor, temperature and humidity – so six total.
Nearly there! This is our setup function that, as usual, starts up the LCD screen. It also initializes the left, right and press (i.e. push in) assignments for the directional pad on the Wio Terminal. These can be used like standard GPIO the same way as the Whack-A-LED project.
Note that we’re skipping over some code for the ‘loop’ section below. There is quite a bit of code that controls the SD card reading and writing, if you’re interested in the specifics or just want to upload it directly to the Wio Terminal, you can find it in the project files section.
And voila, we’re done! There is obviously a number of changes that could be made to this program depending on your requirements, but we feel this is a good start for a basic data logger with visual feedback in the form of a graph. You’ll need to plug the Multichannel Gas sensor into the left Grove port on the Wio Terminal, and the DHT11 weather sensor into the right port.
Once it’s uploaded, data should immediately appear to scroll across the display. To start or stop recording, just hit the centre button. If a different data stream is desired, move the directional pad left or right to switch data channels.
After you’ve stopped recording, just pop out the SD card in your computer and open the ‘data.csv’ file in any spreadsheet program. Graphs and analysis can be immediately done on the data!
With the time we’ve had experimenting with the Wio Terminal and its many compatible sensors, we’re confident that a vast variety of DIY projects can be accomplished with minimal effort. There isn’t a lot of hardware to configure, since the Wio Terminal may already have the module inbuilt, or a compatible grove module can be used with a single cable connection. It’s one of the first polished all-in-one development packages we’ve seen, convenient for both beginners and the experienced alike.
There are several inbuilt sensors and features within the Wio Terminal we didn’t get the time to try, including the inbuilt Infrared LED (to act as a TV remote), the buzzer, light sensor and the microphone.
We hope the projects we’ve shown here inspire you to make something cool with the Wio Terminal! It’s a little powerhouse that can be used with the vast majority of existing Arduino modules, so you’ll have no trouble mixing with electronics you already have. Show us your creations at @diyodemag!
Let"s get started with this creative Arduino project, where you"ll learn about the TFT LCD touch screen and how to use it to create your own colourful calculator. For a basic understanding of touch screen & LCD, a cheap TFT 2.4" Arduino shield is used to create this project. For creating a similar project, one should follow the steps and edit the code for better understanding.
Touch-screen devices using resistive technology, a two-dimensional membrane potentiometer provides x and y coordinates. The top layer is thin glass spaced close to a neighboring inner layer. The underside of the top layer has a transparent conductive coating; the surface of the layer beneath it has a transparent resistive coating. A finger or stylus deforms the glass to contact the underlying layer. Edges of the resistive layer have conductive contacts. Locating the contact point is done by applying a voltage to opposite edges, leaving the other two edges temporarily unconnected. The voltage of the top layer provides one coordinate. Disconnecting those two edges, and applying a voltage to the other two, formerly unconnected, provides the other coordinate. Alternating rapidly between pairs of edges provides frequent position updates. An analog to digital converter provides output data.
The shield connects ILI9341"s data pins 0-7 to Arduino"s digital pins 2-8 (allowing parallel communication, not SPI. ILI9341"s RESET goes to Arduino analog pin A4. CS (chip select) to A3. RS (CD command/data) to A2. WR and RD to A1 and A0.
ILI9341 is integrated inside the display. It drives the display and has nothing to do with the touchscreen (Although the shield connects some pins of ILI9341 together with pins of the touchscreen).
first, you have to send a command to ILI9341 and then write or read data/parameters. CS pin has to be LOW during the communication, WR rising from LOW to HIGH tells ILI9341 to read byte on data pins.ILI9341 interprets input byte as a command (if RS=0) or as data/parameter (RS=1).
To read a byte from ILI9341 after sending a read command (e.g. 09h - Read Display Status) set RD from HIGH to LOW, so ILI9341 outputs data until RD returns HIGH.
To install this library, you can simply click on the link above which will take you to a Github page. There click on clone or download and select “Download ZIP”. A zip file will be downloaded.
Now, open Arduino IDE and select Sketch -> Include Library -> Add .ZIP library. A browser window will open navigate to the ZIP file and click “OK”. You should notice “Library added to your Libraries” on the bottom-left corner of Arduino, if successful.
The touchscreen I tested sometimes wrongly detects a touch, outside of the touched point. To prevent this I added some delays and the X and Y analog value is read repeatedly and touch is approved only if values do not differ a lot.
You can also find an SD card slot at the bottom of the module shown above, which can be used to load an SD card with BMP image files, and these images can be displayed on our TFT LCD screen using the Arduino Program.
The 2.4” TFT LCD screen is a perfect Arduino Shield. You can directly push the LCD screen on top of the Arduino Uno and it will perfectly match with the pins and slid in through. However, as matters of safety cover the programming terminal of your Arduino UNO with some insulator, just in case if the terminal comes in contact with your TFT LCD screen.
The calculator here is based on the simple logic that, you have to divide the screen according to touch coordinates values and write a program accordingly. Every digit or symbol visible on-screen have a defined area.
In this tutorial, I’ll explain how to set up an LCD on an Arduino and show you all the different ways you can program it. I’ll show you how to print text, scroll text, make custom characters, blink text, and position text. They’re great for any project that outputs data, and they can make your project a lot more interesting and interactive.
The display I’m using is a 16×2 LCD display that I bought for about $5. You may be wondering why it’s called a 16×2 LCD. The part 16×2 means that the LCD has 2 lines, and can display 16 characters per line. Therefore, a 16×2 LCD screen can display up to 32 characters at once. It is possible to display more than 32 characters with scrolling though.
The code in this article is written for LCD’s that use the standard Hitachi HD44780 driver. If your LCD has 16 pins, then it probably has the Hitachi HD44780 driver. These displays can be wired in either 4 bit mode or 8 bit mode. Wiring the LCD in 4 bit mode is usually preferred since it uses four less wires than 8 bit mode. In practice, there isn’t a noticeable difference in performance between the two modes. In this tutorial, I’ll connect the LCD in 4 bit mode.
BONUS: I made a quick start guide for this tutorial that you can download and go back to later if you can’t set this up right now. It covers all of the steps, diagrams, and code you need to get started.
The 3-in-1 Smart Car and IOT Learning Kit from SunFounder has everything you need to learn how to master the Arduino. It includes all of the parts, wiring diagrams, code, and step-by-step instructions for 58 different robotics and internet of things projects that are super fun to build!
Here’s a diagram of the pins on the LCD I’m using. The connections from each pin to the Arduino will be the same, but your pins might be arranged differently on the LCD. Be sure to check the datasheet or look for labels on your particular LCD:
Also, you might need to solder a 16 pin header to your LCD before connecting it to a breadboard. Follow the diagram below to wire the LCD to your Arduino:
The resistor in the diagram above sets the backlight brightness. A typical value is 220 Ohms, but other values will work too. Smaller resistors will make the backlight brighter.
All of the code below uses the LiquidCrystal library that comes pre-installed with the Arduino IDE. A library is a set of functions that can be easily added to a program in an abbreviated format.
In order to use a library, it needs be included in the program. Line 1 in the code below does this with the command #include
Now we’re ready to get into the programming! I’ll go over more interesting things you can do in a moment, but for now lets just run a simple test program. This program will print “hello, world!” to the screen. Enter this code into the Arduino IDE and upload it to the board:
There are 19 different functions in the LiquidCrystal library available for us to use. These functions do things like change the position of the text, move text across the screen, or make the display turn on or off. What follows is a short description of each function, and how to use it in a program.
TheLiquidCrystal() function sets the pins the Arduino uses to connect to the LCD. You can use any of the Arduino’s digital pins to control the LCD. Just put the Arduino pin numbers inside the parentheses in this order:
This function sets the dimensions of the LCD. It needs to be placed before any other LiquidCrystal function in the void setup() section of the program. The number of rows and columns are specified as lcd.begin(columns, rows). For a 16×2 LCD, you would use lcd.begin(16, 2), and for a 20×4 LCD you would use lcd.begin(20, 4).
This function clears any text or data already displayed on the LCD. If you use lcd.clear() with lcd.print() and the delay() function in the void loop() section, you can make a simple blinking text program:
This function places the cursor in the upper left hand corner of the screen, and prints any subsequent text from that position. For example, this code replaces the first three letters of “hello world!” with X’s:
Similar, but more useful than lcd.home() is lcd.setCursor(). This function places the cursor (and any printed text) at any position on the screen. It can be used in the void setup() or void loop() section of your program.
The cursor position is defined with lcd.setCursor(column, row). The column and row coordinates start from zero (0-15 and 0-1 respectively). For example, using lcd.setCursor(2, 1) in the void setup() section of the “hello, world!” program above prints “hello, world!” to the lower line and shifts it to the right two spaces:
You can use this function to write different types of data to the LCD, for example the reading from a temperature sensor, or the coordinates from a GPS module. You can also use it to print custom characters that you create yourself (more on this below). Use lcd.write() in the void setup() or void loop() section of your program.
The function lcd.noCursor() turns the cursor off. lcd.cursor() and lcd.noCursor() can be used together in the void loop() section to make a blinking cursor similar to what you see in many text input fields:
Cursors can be placed anywhere on the screen with the lcd.setCursor() function. This code places a blinking cursor directly below the exclamation point in “hello, world!”:
This function creates a block style cursor that blinks on and off at approximately 500 milliseconds per cycle. Use it in the void loop() section. The function lcd.noBlink() disables the blinking block cursor.
This function turns on any text or cursors that have been printed to the LCD screen. The function lcd.noDisplay() turns off any text or cursors printed to the LCD, without clearing it from the LCD’s memory.
These two functions can be used together in the void loop() section to create a blinking text effect. This code will make the “hello, world!” text blink on and off:
This function takes anything printed to the LCD and moves it to the left. It should be used in the void loop() section with a delay command following it. The function will move the text 40 spaces to the left before it loops back to the first character. This code moves the “hello, world!” text to the left, at a rate of one second per character:
This function takes a string of text and scrolls it from right to left in increments of the character count of the string. For example, if you have a string of text that is 3 characters long, it will shift the text 3 spaces to the left with each step:
Like the lcd.scrollDisplay() functions, the text can be up to 40 characters in length before repeating. At first glance, this function seems less useful than the lcd.scrollDisplay() functions, but it can be very useful for creating animations with custom characters.
lcd.noAutoscroll() turns the lcd.autoscroll() function off. Use this function before or after lcd.autoscroll() in the void loop() section to create sequences of scrolling text or animations.
This function sets the direction that text is printed to the screen. The default mode is from left to right using the command lcd.leftToRight(), but you may find some cases where it’s useful to output text in the reverse direction:
This code prints the “hello, world!” text as “!dlrow ,olleh”. Unless you specify the placement of the cursor with lcd.setCursor(), the text will print from the (0, 1) position and only the first character of the string will be visible.
This command allows you to create your own custom characters. Each character of a 16×2 LCD has a 5 pixel width and an 8 pixel height. Up to 8 different custom characters can be defined in a single program. To design your own characters, you’ll need to make a binary matrix of your custom character from an LCD character generator or map it yourself. This code creates a degree symbol (°):
If you found this article useful, subscribe via email to get notified when we publish of new posts! And as always, if you are having trouble with anything, just leave a comment and I’ll try to help you out.
Im new to Arduino myself but i do have the same screen which works perfect,your problem is probably that the TFT shield is shorting off the top off the arduino usb put something non conductive there and reset. if your still having trouble, try removing the shield and watch each pin as you insert it to make sure they are all inserted in the correct pins, LCD_02 should be in Dig pin 2.
adafruit has a resistive touch screen which is 2.8" and works on most boards. Its 30 dollars and works well. It has instructions and all and libraries which you can use. Plug it into a breadboard, connect the jumpers and you"re all set.
on the other hand, Elegoo has made a very similar product, which can also be used on most boards if you plug it into a breadboard, but it is specially designed for the UNO. You can plug it straight into the UNO board, without the need of breadboards. This comes with a instructional DVD and is only 12 dollars on Amazon. It is also a resistive screen and basically the same product.
The main component of Me TFT LCD Screen module is a LCD display communicating with Makeblock Orion through serial port to show characters and graphics of different size and colors. The module is integrated with MCU and memory chip, and the Chinese characters, letters, and figures stored in the memory chip can be invoked easily through the serial port. Its blue/gray ID means that it has a double-digital signal port and needs to be connected to the port with blue or gray ID on Makeblock Orion.
Since the port of Me TFT LCD Screen has blue/gray ID, you need to connect the port with blue or gray ID on Makeblock Orion when using RJ25 port. Taking Makeblock Orion as example, you can connect to ports No. 5 as follows:
When the Dupont wire is used to connect the module to the Arduino UNO Baseboard, its TX and RX pins should be connected to TX and RX ports respectively as follows:
If you use Arduino to write a program, the library Makeblock-Library-master should be invoked to control the Me TFT LCD Screen. This program serves to display different graphics and characters through Arduino programming.
This module (Me TFT LCD Screen – 2.2 Inch) contains a voltage converter, an STM32 chip, and a serial flash memory of 2M. In contrast with other displays, it needs only serial port for communication, so it is easy to operate and connect.
A special serial port assistant is provided to help you set the baud rate of transmission, and store the processed pictures you want to display into the flash memory so as to implement the display or switch of boot pictures in your own project. To download pictures, you need other serial port for conversion. In addition, it also supports superposition of background pictures and the letters, and GUI display. Its applications include the calendar, voltage meter, ampere meter, etc.
Ms.Josey 
Ms.Josey