This chapter mainly focuses on how to show images on a micro:bit display. MakeCode provides a set of built-in images and image editing blocks to create your own images, limited up to two frames. You can play with images by scrolling and offsetting them in different ways.
5-1. Displaying Built-in Images
Problem
You want to display a built-in image on the micro:bit LED matrix.
Solution
In the Toolbox, click on Advanced to expand the category list, and then click on the Images category.
Click and drag the show image block over and place it inside of the on start block.
In the Toolbox, click on the Images category, and then click on the icon image block.
- Click and drag the icon image block over and place it inside of the show image block (Figure 5-1 ).
Figure 5-1.Placing the icon image block
- Click on the myImage variable block and from the menu, choose Delete the “myImage” variable (Figure 5-2 ).
Figure 5-2.Deleting the myImage variable block
- Click on the icon image and from the drop-down menu, choose the happy icon. Keep the offset as 0 (Figure 5-3 ).
Figure 5-3.Choosing the happy icon
- Once finished, your code should look something like this (Figure 5-4 ).
Figure 5-4.Full code listing
How It Works
MakeCode comes with 40 built-in images to show on the micro:bit display. The full list of images can be found in Chapter 2 , Recipe 2-1. MakeCode uses the terms “icon” and “image” interchangeably. In the show image block, the offset parameter determines the start position (or end position) of the image to be displayed on the LED matrix.
5-2. Image Offsetting
Problem
You want to shift an image horizontally across the display with offset.
Solution
In the Toolbox, click on Advanced to expand the category list, and then click on the Images category.
Click and drag the show image block over, and place it inside of the on start block.
In the Toolbox, click on the Images category, and then click on the icon image block.
- Click and drag the icon image block over, and place it inside of the show image block (Figure 5-5 ).
Figure 5-5.The show image block
Click on the myImage variable block and from the menu, choose Delete the “myImage” variable.
- Click on the icon image and from the drop-down menu, choose the happy icon. Change the offset to 2 (Figure 5-6 ).
Figure 5-6.Offsetting an image
How It Works
0 - no offset
Any positive number - offsets from left
Any negative number - offsets from right
The LED screen fits in a single frame. A frame is a part of the image. It is a square with five LEDs on a side. An image can span multiple frames. If you use the value 5 or -5 for the offset, you can completely hide the image inside the micro:bit display.
5-3. Scrolling Images
Problem
You want to scroll an image on the micro:bit display with different speeds.
Solution
In the Toolbox, click on Advanced to expand the category list, and then click on the Images category.
Click and drag the scroll image block over, and place it inside of the on start block.
In the Toolbox, click on the Images category, and then click on the icon image block.
- Click and drag the icon image block over, and place it inside of the scroll image block (Figure 5-8 ).
Figure 5-8.The scoll image block
Click on the myImage variable block and from the menu, choose Delete the “myImage” variable .
Type 2000 for interval (ms).
- Once finished, your code should look something like this (Figure 5-9 ).
Figure 5-9.Code listing
How It Works
The scroll image block allows you to scroll an image on the micro:bit display from right to left or left to right. The offset parameter specifies the number of LEDs from the left or right of the image that the micro:bit should start and continue with the animation. The offset value 0 and 1 does the same effect. The offset 0 and any positive number makes the image scroll from right to left. Any negative number makes the image scroll from left to right. The speed of the scrolling effect can be changed by the interval parameter. It accepts the time in milliseconds.
If you want to repeat the scrolling effect over and over again, place the scroll image block inside the forever block.
5-4. Creating Your Own Images
Problem
You want to create an image to fit with the micro:bit display.
Solution
In the Toolbox, click on Advanced to expand the category list, and then click on the Images category.
Click and drag the show image block over, and place it inside of the on start block.
In the Toolbox, click on the Images category, and then click on the create image block.
- Click and drag the create image block over, and place it inside of the show image block (Figure 5-10 ).
Figure 5-10.The create image block
- Click on the myImage variable block and from the menu, choose Delete the “myImage” variable (Figure 5-11 ).
Figure 5-11.Deleting the myImage variable block
- In the create image block , click on the LEDs to create the image that you want (e.g., robot) as shown in Figure 5-12 .
Figure 5-12.Creating an image with the create image block
How It Works
The create image block represents the micro:bit’s physical LED screen. The 5 X 5 image block is known as a single frame image.
5-5. Creating a Double-Sized Image
Problem
You want to create a large image with two frames.
Solution
In the Toolbox, click on Advanced to expand the category list, and then click on the Images category.
Click and drag the show image block over, and place it inside of the on start block.
In the Toolbox, click on the Images category, and then click on the create big image block.
- Click and drag the create big image block over, and place it inside of the show image block (Figure 5-13 ).
Figure 5-13.The create big image block
- Click on the myImage variable block and from the drop-down list, choose Delete the “myImage” variable (Figure 5-14 ).
Figure 5-14.Deleting myImage variable
- In the create big image block , draw two images (giraffes) by clicking on the squares (Figure 5-15 ).
Figure 5-15.Image frames
- When you run the code on micro:bit, you can only see the Giraffe 1 (left) in Frame 1 on the micro:bit display (Figure 5-16 ).
Figure 5-16.Output on the LED screen
How It Works
MakeCode allows you to create images with two frames. Each frame consists of 5 rows and five columns of LEDs. When you run the code on the micro:bit, the micro:bit display will show the first frame of the image. If you want to see the second frame, you should use offset or scroll methods.
Using the show image block
Using the scroll image block
5-6. Displaying Arrows
Problem
You want to display an arrow pointing to the south west direction.
Solution
In the Toolbox, click Advanced followed by Images. Then click and drag the show image block over and place it inside of the on start block.
- In the Toolbox, click Images again. Then click and drag the arrow image block over, and place it inside of the show image block (Figure 5-19 ).
Figure 5-19.Placing the arrow image block
Click on the myImage variable and from the drop-down list, choose Delete the “myImage” variable.
- In the arrow image block, click on the drop-down list and choose the South West option (Figure 5-20 ).
Figure 5-20.Choosing the South West option
- Once finished, your code should look something like this (Figure 5-21 ).
Figure 5-21.Full code listing
- Figure 5-22 shows the output.
Figure 5-22.Output on the LED screen
How It Works
North
North East
East
South East
South
South West
West
North West
5-7. Using Variable to Hold an Image
Problem
You want to use a variable to hold an image.
Solution
- In the Toolbox, click on the Variables category, and then click on Make a Variable… (Figure 5-23 ).
Figure 5-23.Creating a variable
- In the New variable name modal box (window), type in the variable name (e.g., heart). Then click on the Ok button (Figure 5-24 ).
Figure 5-24.Providing a name for the variable
- Now your Variables Toolbox should look something like this (Figure 5-25 ). It contains the variable and two blocks to set and change the variable.
Figure 5-25.Variable toolbox
Now click and drag the set heart to block over and place it inside of the on start block.
- In the Toolbox, click Advanced followed by Images. Then click and drag the icon image block over, and place it inside of the set heart to block (Figure 5-26 ).
Figure 5-26.Assigning an icon image to a variable
In the Toolbox, click Images. Then click and drag the show image block over and place it inside of the forever block.
- In the show image block, click on the myImage and from the drop-down list, choose the variable, heart (Figure 5-27 ).
Figure 5-27.Choosing the variable, heart
How It Works
Variables can hold built-in images and custom images. Once assigned an image to a variable, you can use the variable name to display the image at any point in your code.