Good day, and thank you for having me here for my first programming tutorial in this tutorial. However, you are free to use any other esp32 board and any TFT display in place of our ttgo display board. I'll walk you through using the TFT ESPI library, how to make these nice interfaces, and give you more information on how to handle font colors. Naturally, we will also make use of some fundamentals of programming, such as conditional loops, data regions, and so on.

We will be using the ide for Arduino. Installing the TFT HPI library is the first step that needs to be taken by the user. My video will show you how to configure the ttgo ide link in the Arduino if you have a ttgo t display, and you can view it here. OK, let's start here. I'm going to start by deleting these obnoxious comments. Next, I will add the required library DFT underline as B I point h and clued SPI point h. We do not require them.

It is necessary to choose the board. It is imperative that we go with the ttgo Lora OLED V1 board. It is necessary for us to choose the port. I'll save it. The only thing we can do now is wait.

We can see that nothing has happened after compiling and uploading the code, so let's get started by learning our first function. The small tft fill screen is the function that is the most basic. This straightforward function will paint specific colors across the entirety of the screen. For instance, I could use DFT to emphasize the color red.

After the compilation and the upload, we can see that the color of the screen has changed to red. The TFT ASPI Library includes 24 colors that are already predefined for use. We are able to examine them; therefore, we must locate the Library folder, which should not be difficult. There is a folder titled "Arduino" located in the Documents folder on my computer. You'll find the folder library in this location. The small tft display ASPI library can be found in the following. The tftspi can be found in this location. We are able to open this file, and you can give me some time to locate it here.

The following is a list of default color definitions that you are free to use in whatever project you choose. These 24 colors are sufficient for the vast majority of projects, but occasionally you'll need your own special custom colours. I will explain the process to you now. This website allows me to modify the colors that are displayed. Let me enlarge it a little bit while you wait while I go ahead and publish links in the description of this website. Simply clicking this link will do it for me.

I'm going to have to pick some colors that I'm not familiar with. For instance, I don't mind this color very much. Now it's time to copy down this number in hexadecimal format. Because the color is represented by this hexadecimal number in RGB 565 format, all I need to do is copy the hexadecimal number.

I'll go ahead and copy the code from there and paste it here. Now that we have the ability to customize this color, I will use this function to clear out everything that is currently displayed on the screen. Because the majority of my products feature a black background, I will use black. Okay, at this point we should know how to use color. Let's draw some text.

There are a few different approaches to drawing text on the screen, but in my opinion, this particular  is the simplest one. Apologies for the confusion, but the first parameter of the string is the string itself or the text that you want to draw. Of course, hello world! The second parameter is the X coordinate, and since I have a choice, I will go with 10. The Y coordinate, for example 120, is the next parameter to be specified. Due to the fact that the display has a resolution of 135 x 240, the text "Hello World" will be displayed somewhere in the middle of the screen. The text will be aligned 10 pixels to the left of the screen. Given that this is the x-axis and that it is 120 pixels from the top, the location will be approximately in the middle.

Now that we have the first string, which simply says "hello world," the problem is not very significant. How to make the text larger in the font that has been predefined in this library,We are able to check them out. I'm going to go to the folder labeled Library. These files can be opened in the dot h file that has been set by the user, which also means that Notepad can be used, but I prefer to use atom. We are able to locate them. Let me see. Oh, here they are; those are the fonts.

We can use them in their default form or create our own custom fonts, but in the next video, we'll cover how to use them. In the meantime, the "hello world" line reads "Well, the awful default font is 8 pixels high."We are able to use font 2 which has a height of 16 pixels. We can use 1-4, which results in a height of 26 pixels. Remember that the 6, 7, and 8 are larger mobile phones, but that they are only used for numbers. Because of this, small tft display we can only use these three for regular text, so let's give it a try. For instance, I'm going to type "Hello, world" at the very top of the screen because I think that's appropriate. According to S1010, I would like another line with a larger font. This is font 2.

I only need to add one more parameter in order to change the font and assign it to this line, so I will put two parameters in this location. To be honest, I have no idea. I am also able to test out font number four. You can see how simple it is to switch between the different predefined fonts by using the font four example. Okay, so this is the second line of the default font's teeny-tiny "Hello, world," and we can see it here. Both the font and the phone have been scaled up by two points.

I'm able to bring it down, and please let me come back here. Font 7 is my go-to choice when I need to draw numbers because it has the appearance of seven separate paragraphs. This is the font, which is only utilized for displaying numerical information, so let's give drawstrings a shot. I don't know if I can draw number 5, um, about 30, I don't know 100, I want a font size of seven and a display that lasts seven seconds; here are the numbers zero, one, two, four, and seven for the phone. We'll make a counter so that it's more challenging and interesting. I'm going to insert this line.

To draw a string, these functions are equivalent to this function. I need to convert the integers we have into strings so that we can use them. It's very simple. I'll check it out after I finish uploading it.

A short counter is available for your use. Okay, but adjusting the color of the text is a very straightforward process. I would like, for instance, for this line to be colored red, this line to be colored green, and this line to be colored blue. I can't say for sure whether or not there is one in this line.

Because I want this line to have yellow text on a blue background, you have to read the first line before you read the first line. I will either draw an underline in red using  Android, or I will add this line to the TFT to set the sun color of the text. Oh, my goodness, I pray that I will be able to learn English well one day, and in the meantime, I will just copy this. I'm going to put some green here before this line. There should be blue in the very last line. In this particular line, I would like the color of the text to be yellow, and the color of the background to be blue. This serves the same purpose as before.

There are only two settings to adjust. The first thing to take into consideration is the foreground color, which is indicated by the small tft screen. Oh, my goodness, I have no idea how to write the color yellow. Where exactly is the yellow? DFT yellow will be used for the foreground color, and TFT blue will be used for the background. Okay, so I made a mistake with the color that I selected, but as you can see, the first line is red, the second line is green and blue, and the third line is yellow and blue.