How to Manipulate evive’s TFT Display

evive TFT Display
About This Tutorial
This tutorial discuss evive’s TFT Display, the blocks under evive TFT Display extension, and certain example programs to show the usage of different blocks in Scratch mode.
Tutorial Info

Components Required

ImageComponentQuantityAvailable in Kit
evive1
USB A-B Cable1

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:

BlockFunction
fill screen color blockThe block is used to change the color of the entire TFT screen of evive. You can select the color from the color picker.
set cursor blockThe 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.
set text color background and size blockThe 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.
write blockThe block is used to write text on evive’s TFT display.
draw line blockThe 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.
rectangle blockThe 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.
round rectangle blockThe 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.
circle blockThe 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.
elipse blockThe 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.
triangle blockThe 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

evive Notes Icon
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. Pictoblox Board Selection
  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.Connect-Disconnect Icon
  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.Change background color_1
  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:

Display 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.Set count to 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.set cursor at block
  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.write + join 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:

display count

evive Notes Icon
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.draw rectangle block
  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:

Drawing shapes

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.write + join + potentiometer reading block
evive Notes Icon
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:

Display potentiometer reading

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! 🙂

This helped
This didn't help
Share this Tutorial
Share on facebook
Facebook
Share on twitter
Twitter
Share on google
Google+
Share on pinterest
Pinterest
Share on reddit
Reddit
Share on print
Print
Related Projects & Tutorials
TFT Graphics
How to Draw Shapes on TFT Display
This tutorial discusses about the functions in the evive TFT screen library in Arduino IDE that help in drawing different shapes on the display with the help of a simple Arduino Sketch.
All articles loaded
No more articles to load
Featured Projects
Robotic-Arm-Bartender
DIY Robotic Arm Bartender

This project will show you how to make your own robotic arm bartender that will make you a star host!

All articles loaded
No more articles to load
Close Menu
×

Cart