MicroGUI

MicroGUI is an experimental GUI framework that aims to make development of micro:bit apps faster and more accessible.

A micro:bit app needs an interactive user interface, this is typically made using layered graphical primitives such as rectangles and lines. This can be become time consuming to iterate on and might requires a lot of code to be written for even simple interfaces.

MicroGUI is a nascent framework that provides common UI components that are easily extensible, allowing for rapid prototyping of user-interfaces.

Overview

MicroGUI fits into the existing Scene paradigm described at the start of the example app section. It defines a new parent class called GUIComponentScene and provides some generically useful Scenes like Keyboard as we will see later.

A GUIComponentScene can hold many hetrogenous components, such as TextBoxes, collections of radio buttons and graphs.

These components are designed to only need a few arguments to setup, but have many optional arguments to change their appearance and behaviour.

Example scene

In the example app the file exampleMicroGUIScene.ts demonstates how a simple scene can be created with MicroGUI.

namespace example_project {
  import AppInterface = user_interface_base.AppInterface
  import GUIComponentScene = microgui.GUIComponentScene
  import GUIComponentAbstract = microgui.GUIComponentAbstract
  import GUIComponentAlignment = microgui.GUIComponentAlignment
  import TextBox = microgui.TextBox

  export class ExampleMicroGUIScene extends GUIComponentScene {
    constructor(app: AppInterface) {
      super({ app, colour: 3 })

      const simpleTextComponent: GUIComponentAbstract = new TextBox({
        alignment: GUIComponentAlignment.TOP_LEFT,
        isActive: false,
        title: "Title Text :)", // optional arg
        text: ["Press micro:bit A btn"], // optional arg
        colour: 2, // optional arg
        xScaling: 1.7, // optional arg
      });

      this.components = [simpleTextComponent]
    }

    // For back button:
    activate() {
      control.onEvent(
        ControllerButtonEvent.Pressed,
        controller.B.id,
        () => {
          this.app.popScene()
        }
      )
    }

    draw() {
      super.draw()
    }
  }
}

Manipulating components

After a component is created you can manipulate it by casting the GUIComponentAbstract back to the original component type. In this example code we make the TextBox component update every time we press the micro:bit A button.

      // Cast the object to access TextBox-specific properties
      (simpleTextComponent as TextBox).title = "hi";

      // Manipulating a component after it's been created:
      let count = 0;
      input.onButtonPressed(1, function () {
        count++;
        (simpleTextComponent as TextBox).text = ["" + count];
      })

Keyboards

MicroGUI includes an on-screen keyboard scene which can be used to get user input.

  const kb = new microgui.Keyboard({
    app,
    layout: microgui.KeyboardLayouts.NUMERIC,        // try a different layout
    cb: (txt: string) => { basic.showString(txt) },  // what happens after you press ENTER
    foregroundColor: 2,                              // optional arg
    backgroundColor: 6,                              // optional arg
    defaultTxt: "0",                                 // optional arg
    maxTxtLength: 6,                                 // optional arg
    txtColor: 1,                                     // optional arg
    deleteFn: () => basic.showString("Bye"),         // optional arg
    backBtn: () => basic.showNumber(2)               // optional arg
  });

  app.popScene();
  app.pushScene(kb);