micro:bit Block Editor – A graphical programming tool powered by Microsoft

Back to Blog
micro:bit Block Editor - A graphical programming tool powered by Microsoft - micro:bit Block Editor - A graphical programming tool powered by Microsoft - micro:bit Block Editor - A graphical programming tool powered by Microsoft - micro:bit Block Editor - A graphical programming tool powered by Microsoft

micro:bit Block Editor – A graphical programming tool powered by Microsoft

Microbit can be programmed using a different type of programming languages. The block editor is easy to program and recommended for beginners. There is no installation needed on your computer. You can simply open the Microbit Make Code website in the web browser and start coding right there. So, let’s discuss this in detail.
The first thing, you need to do is open the microbit MakeCode website.

 

1-block-editor

 

Now you can see the block editor on the browser window. It has the following important parts.

  • Simulator
  • Toolbox
  • Workspace
  • Download

 

Live Simulator: This shows the live simulation of code that you write on the workspace. If you write a code that displays a dot when you press button A, the simulator shows it in real-time instead of uploading it into the microbit.

There are few other useful things you can do with the simulator. They are explained below

Stop the simulator:

This feature allows you to stop live simulation happening on the screen. Sometimes, it will be distracting while you are coding. This feature helps to avoid distractions also in performance too (In case your PC is slow).

 

2-block-editor-stop-simulator

 

Restart the simulator:

This feature will restart the code and starts executing from the beginning. Same as pressing the reset button on your microbit.

 

3-block-editor-restart-simulator

Slow-Mo feature:

This feature allows you to see the code execution in slow motion. Once you press this button the simulator runs in slow motion as well as it shows the current coding sequence in the workspace too. You can stop this by clicking again the same icon.

4-block-editor-slow-mo

 

Mute Audio:

If are programming a music code in the microbit it will be making sound while you play it in the simulator. You can mute or unmute it here.

 

5-block-editor-mute-audio

Full-screen mode:

This mode will open the simulator in full screen. You can set back to normal by clicking the exit full-screen icon.

 

6-block-editor-full-screen-mode

Exit full screen:

Pressing this icon will exit the full screen.

 

7-block-editor-exit-full-screen

 

Toolbox: This has all the blocks needed to code. These blocks are categorized as Basic, Input, Music, Radio, Math, Variables, Loops, Logics and more.

 

8-block-editor-toolbox

 

Workspace: This is where you create the program. You have to drag and drop the blocks from the toolbox according to your requirement. We have seen how to program in block editor in this blog.

 

9-block-editor-workspace

 

Download: This feature allows you to download the program that you created. It converts the Block/JavaScript code into a HEX file that the microbit understands. The HEX file contains binary iformation in ASCII text form. If you try to open it in notepad, each text line contains hexadecimal characters that encode multiple binary numbers. It is also called as Machine Understandable code and humans can’t understand it easily.

 

10-block-editor-HEX-Code

 

Other features:

The block editor has few other features like

  • Projects
  • Share the project
  • Settings
  • Help
  • File re-name
  • Undo-Redo
  • Zoom in and zoom out

 

Projects:

Once you click on it you can see my stuff – where you can access the saved projects. You can also create a new project and import files from your computer. This block editor uses cookies so it will store the files temporarily on your computer. This will make the program work flawlessly.

 

11-block-editor-projects-tab

 

Share the project:

This option allows you to share the project with someone. It will generate a unique link for the block code to share with someone.
Settings:

Using this you can add packages for devices like Bluetooth Services, NeoPixel and changing the theme, Languages,etc,.

File Re-name:

You can name your file here and hit save. This will download the HEX file with the filename you provided.

 

12block-editor-file-rename

 

Undo and Re-do:

Undo will go one step backward of the code you build and Re-do will go one step forward. This helps you correct your program if you made a mistake. You can access it in the bottom right side of the editor with bent arrow icons.
Zoom in and Zoom Out:

This will increase the size of the blocks in the workspace according to you. It is available in the bottom right side of the editor marked with ‘+’ and ‘-’ sign.
These are the basic overview of MakeCode Block editor. You can explore more by yourself for better understanding the editor.

Share this post

Leave a Reply

Back to Blog