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;
}
}