Creating custom function block for Micro:bit programming

I’m sure you would have heard of Micro:bit and even used them in your STEM class for teaching hands-on electronics and programming. Did you ever run out of functional blocks that you would require to do a specific task or computation using Micro:bit? Have you ever dreamt of having your custom function readily available as a block? Relax! this tutorial is, then, especially meant for you.

In this tutorial we will learn how to create a custom block using JavaScript programming. A function can be written using JavaScript programming inside a file known as “custom.ts”. The block associated with this “custom.ts” file will appear below the BASIC library of blocks.

Step # 1: Open the block editor

Go to graphical (block) programming environment for Micro:bit at https://makecode.microbit.org/. Click on “{} JavaScript”

Step # 2: Open JavaScript programming

The JavaScript code is shown instead of blocks. Now click on “Explorer  >”

Step # 3: Add a custom .ts file

The “Explorer” menu expands down to show additional items. There is a “+” button next to “Explorer” now which is meant for adding custom blocks. Click the “+” button.

Step # 4: Confirm the addition of blocks

A confirmation window pops-up. Click on “Go ahead!” to add custom blocks.

Step # 5: Explore the custom JavaScript file

A new JavaScript file named “custom.ts” will be added and shown to you in the code/block area. You will also notice “CUSTOM” library is added below BASIC libraries.

Step # 6: Understanding the custom functions

A closer look at the newly added JavaScript file will indicate that the “custom.ts” file has code for two default functional blocks  – foo and fib.

This is clear, if you go to Block view instead of JavaScript view. Function “foo” has 3 input parameters while “fib” has just one.

Step # 7: Create your own function

Either you can develop your own code for a custom function or copy-paste the following piece of code to create a new block that plots any number between 0 – 25 using LEDs (i.e., 1 led per number).

Here is a video demonstration of a custom function that plots a graph on 5×5 LED Matrix for any number between 0-25.

—- COPY below this line —  and PASTE in your CUSTOM.ts file —–

/**

* Use this file to define custom functions and blocks.

* Read more at https://makecode.microbit.org/blocks/custom

*/

/**

* Custom blocks

*/

//% weight=100 color=#0fbc11 icon=””

namespace custom {

/**

* TODO: describe your function here

* @param value describe parameter here, eg: 5

*/

//% block

export function plot25PointGraph(value: number): void {

// Add code here

basic.clearScreen()

if (value > 0) {

let y = value / 5

// plot all the LEDs for “y” rows

for (let i = 0; i < y; i++) {

for (let j = 0; j < 5; j++) {

led.plot(j, 4 – i);

}

}

let x = value % 5

// now plot the last row corresponding to ‘x’ values

for (let j = 0; j < x; j++) {

led.plot(j, 4 – y);

}

}

}

/**

* TODO: describe your function here

* @param value describe value here, eg: 5

*/

//% block

export function showPakronics(): void {

basic.showString(“Pakronics”)

}

/**

* TODO: describe your function here

* @param value describe value here, eg: 5

*/

//% block

export function myCustomFunction(value: number): number {

return value;

}

}

Leave a Reply

Your email address will not be published. Required fields are marked *