How to Manipulate evive’s TFT Display

Introduction

evive has a TFT display for visual feedback. Visual feedback is very useful for electronics projects and prototyping. It helps you with

• debugging your code
• displaying data
• asking for user feedback
• giving an aesthetic appearance to your project

evive has a 1.8″ TFT Display with 128 x 160 color pixel. This TFT uses ST7735R TFT driver to display 18-bit color (262,144 shades). 

Controlling TFT Display in Scratch

You can do the following on evive’s TFT screen:

• write on the screen
• draw different shapes on the screen
• add colour in the shapes you draw
• change screen colour
• change text colour
• change text size

You can perform the above on the TFT screen with the help of the following blocks that are available under Display palette:

Block	Function
	The block is used to change the color of the entire TFT screen of evive. You can select the color from the color picker.
	The block sets the cursor at the specified coordinate in the TFT Display of evive. Origin (0,0) is at the top left corner of the screen. Positive X-direction is to right while positive Y-direction is downward. Once the cursor has moved to the specified coordinate, you can write text using that point as the reference.
	The block sets a text color (choose from the color selector), a particular background color (choose from the color selector) and the text size (value varying from 1 to 7) for the text.
	The block is used to write text on evive’s TFT display.
	The block allows you to enter the coordinates of two points on the TFT display and joins them using a straight line of the specified color which you can choose from the color picker.
	The block is used to draw or fill a rectangle on the evive TFT display. It takes the coordinates of a point as input alongside the required width, height, and color and draws/fill the rectangle.
	The block is used to draw the outline or a filled rectangle with rounded corners. It takes the following parameters as input: fill/draw, starting coordinates, width, height, the radius at corners and color. It draws a rectangle rounded at edges where the radius is input by the user.
	The block is used to draw an outline of the circle or a filled circle of a specified radius and center position on evive TFT display. It takes the center and the radius of the circle from the user and draws a circle.
	The block is used to draw an outline of the ellipse or a filled ellipse of a specified X length, Y length and center position on evive TFT display. It takes the color, center, X length and Y length of the ellipse from the user and draws an ellipse.
	The block is used to draw an outline of the triangle or a filled triangle of a points on evive TFT display. It takes the color and the 3 points for the corner of the triangle to draws a triangle.

Examples Showing How to Work with TFT Display

Activity 1: Displaying Text

When working with evive on PictoBlox for the very first time, or if you’ve previously uploaded another code to evive, you must upload the firmware in order to upload new code to it. You can find the procedure for the same HERE.

Follow the steps below to write the script:

1. Connect evive to your computer and open PictoBlox; if already open and working on a project, save that project. Then, click on New.
2. Go to the toolbar and click on the Board menu. Then select evive as your board. 
3. Next, click on the Connect menu and from the fly-out menu, select the Port to which evive is connected e.g. COMXX or ttyXX.Once you select the port, the icon beside the Connect tab will become connected.
4. Go to the Events palette and drag and drop the when flag clicked block.
5. Go to the Display palette and drag and drop the fill screen with () color block below the when flag clicked block. You can change the background color if you want to by clicking on the color and moving the sliders in the drop-down menu.
6. Then, go to the Display palette and drag and drop the write () block below the fill screen with () color block. Note that if you don’t write any text, then the default text, i.e. ‘Hello World’ will be displayed on the screen.

Below is the complete script with the text to be displayed as the default text:

Click on the green flag to run the script.

Click on the red octagon, next to the green flag to stop the script.

Activity 2: Displaying Count

Follow the steps below to write the script:

1. Go to the Events palette and drag and drop the when flag clicked block.
2. Go to the Display palette and drag and drop the fill screen with () color block below the when flag clicked block. You can change the background color if you want to by clicking on the color and moving the sliders in the drop-down menu.
3. Go to the Variables palette and create a variable Count. Then, drag and drop the set () to () block below the fill screen with () color block.
4. Then, go to the Control palette and drag and drop the forever block below the set () to () block.
5. Drag and drop the Set cursor at ()() block inside the forever block, and set the cursor at 20,20.
6. Then, drag and drop the write () block. Inside the space of this block, drag and drop the join ()() block from the Operators palette. In the first space of this block write ‘Count: ‘, and in the second space drag and drop the Count variable block.                            
7. Go to the Data&Block palette and drag and drop the change () by () block below the write () block.
8. Then, go to the Control palette and drag and drop the wait () secs block below the change () by () block.

Below is the complete script:

If you place the fill screen with () color inside the forever block, the display on the screen will blink. This happens because the screen refreshes every second because of the forever block and the wait () block.

 

Click on the green flag to run the script.

Click on the red octagon, next to the green flag to stop the script.

Activity 3:  Drawing Shapes

Follow the steps below to write the script:

1. Go to the Events palette and drag and drop the when flag clicked block.
2. Go to the Display palette and drag and drop the fill screen with () color block below the when flag clicked block. You can change the background color if you want to by clicking on the color and moving the sliders in the drop-down menu.
3. Then, drag and drop the () rectangle from ()() width () height () color () block below the fill screen with () color block and select Draw from its drop-down menu.
4. Next, drag and drop the same block again and let the function remain as Fill.  Set the coordinate as 15,15, the width as 130, and the height as 98. Select any color of your choice from the drop-down menu.

Below is the complete script:

Click on the green flag to run the script.

Click on the red octagon, next to the green flag to stop the script.

Activity 4: Displaying Potentiometer’s Reading

Follow the steps below to write the script:

1. Go to the Events palette and drag and drop the when flag clicked block.
2. Go to the Display palette and drag and drop the fill screen with () color block. Then, select any color of your choice from the drop-down menu.
3. Drag and drop the set text colour () with background () & size to () block below the fill screen with () color block.
4. Then, go to the Control palette and drag and drop the forever block.
5. Go to the Display palette and drag and drop the set cursor at () block inside the forever block; set the cursor at 20 , 20.
6. Now, drag and drop the write () block below the Set cursor at () block. Inside the space of the write () block drag and drop the join () () block from the Operators palette. Next, write Potentiometer Reading: in the first space of the join () () block. In its second space, drag and drop another join () () block. Inside the first space of the second join () () block, drag and drop the potentiometer () reading block and select 1; in the second space write ‘ Reading   ‘ with three spaces.

The reason for inserting three bank spaces after the word Reading in the second join ()() block is to overwrite the characters written previously on the screen. E.g. in an array that can hold 5 numbers, if we write numbers in all the five spaces during the first turn, and the next time we write 3 numbers only, only three spaces will have new numbers; the remaining two will remain as it is. Introducing blank spaces removes the characters from the spaces that are not being used.

Below is the complete script:

Click on the green flag to run the script.

Click on the red octagon, next to the green flag to stop the script.

Conclusion

It this tutorial, you learned how to manipulate evive’s TFT screen using PictoBlox.

Hope you had fun! 🙂