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:
- How to install a working extension to use the BBC micro:bit v2.x with the Waveshare 1.8inch 160x128 TFT Colour Display for the BBC micro:bit
You will need:
- A micro:bit v2.x
- A Waveshare 1.8inch 160x128 TFT Colour Display board for the BBC micro:bit
- A microUSB cable (also known as USB-B)
- A computer that has been set up to program the micro:bit
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
Extensionsand search for the following repository:
- Once the extension is added, you’ll see it in the menu
Step 1: Print Some Text on the Display
- Drag the blocks across into the
on Startblock. Note that the
Show Full Screenblock writes the information to the display; without this, our text would not display.
- 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)
- 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
countand set it to 0 on start.
Inputmenu, drag across the
On button Ablock then add blocks to erase the previous number by drawing a small rectangle, and then drawing the updated number.
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.
Congratulations! 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.