Electronic kits and parts - build, code, and learn!
Cart 0
Cart 0

Getting Started with the Waveshare TFT Screen for micro:bit (MakeCode)

• display • micro:bit accessories • microbit • microbit accessories • tft • waveshare

The Waveshare colour display for the BBC micro:bit adds a 160x128 pixel display by inserting the micro:bit into the edge connector. You can then start programming straight away without needing to double-check fiddly alligator clips or wires. You can still use the on-board buttons, bluetooth, and LED matrix on the micro:bit since these are independent of the TFT colour display.

Note that this tutorial uses an alternative MakeCode extension that adds partial screen writes and fixes the previous "file too large" error on the micro:bit v2.x.

In this project, you will learn:

You will need:

Step 1: Install the Extension

  • In your web browser, visit the micro:bit MakeCode editor (if you have a Microsoft account, you can log in to save your work or just remember to save your project to a location you can access later)
  • Click on Extensions and search for the following repository: https://github.com/pitchcat/PXT-WSLCD1in8

    Add extension from github repository
  • Once the extension is added, you’ll see it in the menu
    MakeCode menu updated after extension install

Step 1: Print Some Text on the Display

  • Drag the blocks across into the on Start block. Note that the Show Full Screen block writes the information to the display; without this, our text would not display.
    MakeCode added to on start block to clear screen and display "It works!"
  • Download your code onto the micro:bit and you should see the text, “It works!” displayed in the top left corner of the display (0 pixels across and 0 pixels down)
    Text displayed on TFT screen connected to microbit
  • If you look carefully at our code, you’ll see that we cleared the screen cache, if we don’t do that the background will show garbage from random data left in the screen’s cache memory.

Step 2: Update A Small Section of the Screen

    • Now we’ll create a new variable, called count and set it to 0 on start.
      Create count variable in MakeCode for microbit

      Initialise count variable to 0 when our code starts

    • From the Input menu, drag across the On button A block then add blocks to erase the previous number by drawing a small rectangle, and then drawing the updated number.
      A input block to increment count, erase a rectangle, and update count on the display

    • Send your code to the micro:bit - you should see the number redraw and
      increase each time you press the A button on your micro:bit.

      Writing our count variable value to the display when button A is pressedCongratulations! You have successfully programmed the display using partial writes to update specific sections of the screen. You can look at a listing of the project here.

Challenge: Move Something on the Screen

In this project, we drew a small rectangle to the screen to "erase" that area before writing our updated value to the screen. If we had simply written that value directly to the screen, the previous value would still be visible with the new value written over it. You can use this method to erase a dot and write a new one in another position, giving the illusion of movement.

Try changing the x and y coordinates of your number each time and experiment with the size of the rectangle used to "erase" the previous value, to get the most efficient animation. It's also possible to use the tilt sensor in the micro:bit to steer a dot on the screen.

← Older Post Newer Post →