microsoft/microcode

Coding "on the go" with the micro:bit (V2)

Microsoft MicroCode https://aka.ms/microcode

Microsoft MicroCode is an icon-based programming language and editor for young learners to code with the BBC micro:bit V2. MicroCode allows you to program the micro:bit V2 with only an Arcade shield accessory - no other computer is required! If you prefer the web browser, there's also a MicroCode web app that connects to your micro:bit V2 over WebUSB.

Here's the classic micro:bit Happy-A-button/Sad-B-button program in MicroCode:

Getting started

• Read the MicroCode user guide
• try it now!

Arcade shields for micro:bit V2

There are various Arcade shields available on the market today, as shown below.

Robot

MicroCode can also be used to program and control a 2 wheeled rover robot.

{:class="sample"}

Development

To contribute to MicroCode, please read about MicroCode development.

Contributing

This project welcomes contributions and suggestions. Most contributions require you to agree to a Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us the rights to use your contribution. For details, visit https://cla.opensource.microsoft.com.

When you submit a pull request, a CLA bot will automatically determine whether you need to provide a CLA and decorate the PR appropriately (e.g., status check, comment). Simply follow the instructions provided by the bot. You will only need to do this once across all repos using our CLA.

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact [email protected] with any additional questions or comments.

Trademarks

This project may contain trademarks or logos for projects, products, or services. Authorized use of Microsoft trademarks or logos is subject to and must follow Microsoft's Trademark & Brand Guidelines. Use of Microsoft trademarks or logos in modified versions of this project must not cause confusion or imply Microsoft sponsorship. Any use of third-party trademarks or logos are subject to those third-party's policies.

microcode's Issues

accelerometer values

• X
• Y
• Z

support plotLED

UI/UX - Save programmed game in a hex file

User should be able to save programmed game as a file to be able to share it with other users or load in the controller/emulator later.

web-site: Currently the emulator has capability to store programmed game in some format to localstorage, so the task should be to access the file from localstorage and download it as a file.

emulator: we also should add a UI to the edit to trigger the save operation or allow user to enable some sort of auto-save (the later should be more brainstormed).

compile Program to JD bytecode

artwork for sound emojis

Micro:bit can play 10 sound emoji. We need graphics for the 10 emoji (see assets.ts), which currently just point to existing images:

            this.reg[TID_MODIFIER_EMOJI_GIGGLE] = icondb.tile_page_1
            this.reg[TID_MODIFIER_EMOJI_HAPPY] = icondb.tile_page_2
            this.reg[TID_MODIFIER_EMOJI_HELLO] = icondb.tile_page_3
            this.reg[TID_MODIFIER_EMOJI_MYSTERIOUS] = icondb.tile_page_4
            this.reg[TID_MODIFIER_EMOJI_SAD] = icondb.tile_page_5
            this.reg[TID_MODIFIER_EMOJI_SLIDE] = icondb.tile_value_1
            this.reg[TID_MODIFIER_EMOJI_SOARING] = icondb.tile_value_2
            this.reg[TID_MODIFIER_EMOJI_SPRING] = icondb.tile_value_3
            this.reg[TID_MODIFIER_EMOJI_TWINKLE] = icondb.tile_value_4
            this.reg[TID_MODIFIER_EMOJI_YAWN] = icondb.tile_value_5

transfer program from web app to micro:bit

For those who have a micro:bit V2 but not Arcade Shield, this would provide a way to test their MicroCode program on hardware.

turn edge transitions into filters.

cursor is getting stuck sometimes

Sometimes when navigating, the cursor jumps off tiles (it is not centered on any tile) and then gets stuck.

I can't get a repro, seems to be happening non-deterministically!!!

But I only started seeing this behavior recently. I'll have a read over the quadtree and cursor stuff.

overview of MicroCode implementation

update hackathon site with new pictures

• new Splash screen...
• Arcade Shield with happy/sad program

some more advanced/serious programs

• https://makecode.microbit.org/projects/reaction-time/code
• https://makecode.microbit.org/projects/soil-moisture/code
• https://makecode.microbit.org/projects/stopwatch
• https://makecode.microbit.org/projects/level

accessibility for web app

Is there a nice way to make the web app accessible??? What did Kodu do?

• when cursor changes, read the tile
• menus
• short cuts?

sequencing

The only way to do state-based sequence is across a page evaluation (whether or not it's the same page or different pages). How would we do:

Which sequences three things: shake event -> pick random -> show number

play pitch in music editor

When user changes a note, the new note should sound.

web site micro:bit simulator

• can we have a big micro:bit instead of the set of Jacdac simulators?

web site at https://microsoft.github.io/microcode-docs/

We need more than just the MicroCode app at https://microsoft.github.io/microcode/

We need to have:

• tutorial (how to create programs)
• sample programs, that could be loaded into the MicroCode app

For an example, see https://microsoft.github.io/tilecode/

Additionally, the MicroCode app has hooks for accessibility, which would be great to make use of.

proper deleting of filter/modifier tiles

When changing a sensor or actuator, the editor does not get rid of incompatible tiles.

laundry list

• move to game---light to reduce flash space
• top ten micro:bit programs
• language extensibility model (how to bring in new jacdac sensor, micro:bit feature)
• graphing (extend the plotting)
• programming for micro:bot (by itself): throw-duck, rock-paper-scissors, core reactive programs.
• save slots
• programming, sharing, playing (in pairs)

quiet microphone event

quiet event is not useful in practice -- at least in a noisy classroom you will have a lot of transitions from "some noise" -> "no noise", so it triggers all the time.

If we keep quiet, we need to least require something like 2 seconds with low noise threshold.

MicroCode live-tutorial

User should be able to hover mouse over an element in the editor and get instant tip on how to proceed further.

The tip may include:

• Information about the current element
• Further reasonable actions

Accessibility: the tip should support screen reader

The editor and game containers on the emulator (see [pxt]) are rendered on html canvas, so we cannot really get a metadata about hovered elements. We need to explore a way to customize pxt emulator and propagate metadata about the elements to html elements or any other way (localstorage, uri), so we can read that in the web-app and represent as a tip.

rendering of program

for documentation, sharing.

random number generator

An example of a parameterized sensor is a random number generation that gives a number between 1 and N, for N \in {3,4,5,6}.

For example, in rock-paper-scissors, we need to get a random number in {1,2,3}

A related issue is that we need to branch on that random number in three separate rules.

How can we do this in the current editor scheme?

adding a new tile (steps)

Here are the steps for adding a new language tile:

In tiles.ts:

• add a unique TID value
• add tile to tilesDB

In assets.ts:

• add an icon to LANGUAGE_TILE section in assets.ts, namespace icondb
• add an entry from new TID value to icon image to map this.reg in the init() function of icons class

In jacs_topwriter.ts

• add code generation

seperate language-dependent assets from independent ones

• assets.ts
• language.ts

accelerometer events

Add tile for accelerometer and filter for the following events:

• shake
• face up
• face down
• tilt left
• tilt right
• tilt up
• tilt down

artwork for LOUD/quiet filters on microphone

See assets.ts for current "artwork".

sequence of images and sounds

want to allow a sequence of images or sounds in a single rule (list of modifiers)

use micro:bit touch logo (as button)

consider alternative to cursor pointer

The cursor overlays the tile it is pointing to, obscuring content. Consider alternatives.

artwork for accelerometer events...

Here is what micro:bit has... I will add plumbing to code (we won't do the 3g, 6g, 8g for now):

show selected tile in program

When a picker menu is displayed (by clicking on a tile in the underlying program), the UI does not show which underlying tile was clicked on. Makes screen snapshot harder to decipher. In the example below, the + to the right of the "press" tile was clicked:

save the program on every edit

never ever lose code (not just on page transitions)

play nice sound clips on micro:bit speaker

The Jacdac speaker service is very low-level (play note). It would be nice to have a set of pre-loaded clips to play. Can you think about this?

popular micro:bit programs and needed tiles

Simple programs

• flashing heart: https://makecode.microbit.org/projects/flashing-heart
• smiley buttons: https://makecode.microbit.org/projects/smiley-buttons
• dice: https://makecode.microbit.org/projects/dice
• clap lights: https://makecode.microbit.org/projects/v2-clap-lights
• rock, paper, scissors: https://makecode.microbit.org/projects/rock-paper-scissors
• teleport duck: https://www.microbit.org/projects/make-it-code-it/teleporting-duck/

For more programs. see the carousels at https://makecode.microbit.org/. Feel free to add to the list!

Needed tiles

• pipe: #72
• show number
• shake: #57
• random number generation (1..N): #13
• action: pause

Done:

• button
• show icon
• radio send
• radio receive
• timer
• microphone (soft, loud, ???)
• speaker

Other concepts

• variable slots (boolean, number)???

microphone event should turn on microphone

If a page uses a microphone event, the microphone should automatically be turned on while on this page. It can be turned off if the page does not use the microphone.

This should not be a responsability of the user/programmer.

radio set group

any ideas for the icon for this actuator? How to distinguish from radio send and radio receive

Comparison tiles

Consider Filter tiles for the following

• greater than
• less than
• equal to
• changedBy(delta), for firing when a sensor's value has changed by delta

Make 1-5 the basic way to set a filter/modifer

• radio group
• radio send
• radio receive

special screenshot command (simple sharing)

• go through every (not empty) page of program and create screenshots (and export)
• web browser only

redesign the Home Screen

I am going to add plumbing for the following

• 5 sample programs to choose from
• 5 slots for editing programs

Each sample program has

• an icon
• a name
• underlying code

When you choose a sample program, you are asked which slot to copy it to. The slot then takes on the icon of sample program, but now can be edited.

don't show + icon if you can't add a tile

title says it all...

remove X nagivation buttons

Common paradigm used by gamers on xbox is to use B to go back. Kids will figure it out.

editor bug: recomputing quadtree too eagerly

even when picker is active

one way to draw (create your own icon)

auto-compile and auto-run

The code should always be up-to-date and running.

Also We should save regularly:

• each program change?

finish 5x5 icon editor

• layout problem
• issue with replacing editor's
• icon library (fixed, copyable?)
• adding new icons?
• persisting icons
• compiling icon for JacScript

creating sounds for MicroCode

We have the ability to play sounds over the micro:bit V2's speaker. There are various possibilities in addition to the sound emojis and note editor

• have a sound creation editor
• sample and playback

use B button for "back" instead of X (close) icon

• get rid of check and x in upper right-corner of editor
• we should use B button everywhere to exit menu, back out of editor to home screen

add up/down/hold event modifier for press action

Kit A tiles

• slider
• rotary encoder
• buttons
• LED ring
• light sensor
• magnet sensor