This is very much a work in progress. Expect changes and bugs :)
Prerequisites
The MicroBit monitor allows to display information and interact with a MicroBit connected via Bluetooth LE. Please note, that not all browsers and devices have web Bluetooth capabilities. The easiest way to get started is to work from one of this MicroBit template. Also check out the examples page.
Communication
The MicroBit communicates with the web browser via BLE UART commands. The commands are strings in general formed as command:parameter:.. Note that the maximum string length is 20 characters requiring short commands. The value of command can either be any string matching the id od any HTML tag on the monitor page or one of the special command related to charts displayed on the web page.
Configuring the page
The monitor web page can be configured using the Edit button. The monitor screen is divided into three rows that span the page width. The HTML code for each row can be modified on the editor page. A number of row tempates can be selected using the drop down menu. In order to update any values, the id used in the HTML tags much match the command sent by the MicroBit. For example, this HTML code for a value display
<h4 id='lab'>Value</h4> <h4 class='display-4'id='val'>0</h4>would allow the MicroBit to change the title by sending the command lab:new title and update the value using val:123. If the same id is used in multiple locations, all values will be updates.
Updating and saving
Once you click Update the current HTML and CSS codes from the edtor will be used to render the monitor page. This information is stored in your browser and will be valid for the same browser on the same computer. The Save button on the monitor page will download a local version of the current page. While these pages cannot be edited online, the HTML code can be modified directly in any text editor as desired.
Buttons
Buttons on the webpage can be used to send commands to the MicroBit. The button must have the class btn-microbit. Buttons are automatically disabled while no MicroBit is connected. If active, pressing the button will send the value of the button to the MicroBit. The Reset for example will send the string Reset.
Joystick input
To add a virtual joystick as input, either use the joysick template or add the following code:
<div id="joystick_div"></div>If the joystick position is moved, the following strings are sent to the MicroBit: joyC if the joystick is in the middle and joyN, joyNE, joyE, joySE, joyS, joySW, joyW and joyNW if the joystick points in the corresponsing direction. In the current implementation only one joystick per page is supported.
Machine Learning input
You can train a neutron network using Google's Teachable Machine and use the trained classifications to send to the MicroBit based on Webcam input on the webpage. You will need to train the network and upload the network (Click export on their page). Take a note of the link - you will need the code at the end of the link to setup the panel. Here is the HTML to add on the edit page:
<div id='TeachableMachine_div'> <input type='hidden' id='tmCode' value='MODEL-ID-HERE'> </div>The part MODEL-ID-HERE needs top be the end of the link to the uploaded network. If the classification based on the webcam image changes, the following string is sent to the MicroBit: tmCLASSNAME where CLASSNAME is the label of the class you entered when training the netwoek with the Teachable Machine. It is recommended to not use spaces or special characters in the class names.
Timer
One can add and control a timer to the web page. Either use the stop watch template or add the following code:
<div id="timer_div">-</div>The div tag will contain the timer value. The following commands can be sent from the MicroBit to control the stop watch. In the current implementation only one timer per page is supported.
| Command | Description |
|---|---|
| Timer commands | |
| tStart | This will start the timer. |
| tStop | This will stop the timer. |
| tReset | This will reset the timer. |
Charts
The currently supported chart types are listed below. To use a chart use the corresponding tempate from the drop down menu or insert the <div id="chartBar_div"></div>tags for the specific chart type. The chart specific commands are summarized in the table below.
| Command | Description |
|---|---|
| Chart types | |
| Gauge | This will create a gauge for each value and updating the values as they are received. |
| Bar chart | This will create a vertical bar chart updating the values as they are received. |
| Line chart | This will create a line chart. Values will be added to the line as they are received. Once the maximum number of values for the chart is received, the chart will scroll horizontally. |
| Scatter chart | This will create a scatter plot of values. Here cL gives the x and y axis labels and cV the x and y value for the point. |
| Chart commands | |
| cL:l1:l2:.. | This will set the labels for the data columns to l1, l2, .. and so on. It also determined the number of values the monitor page will expect for plotting. |
| cV:v1:v2:.. | This will add or update the data values given by v1, v2, ... Note that the number of values needs to match the number of labels set with the cL command. |
| cMin:min | Sets the minimum value of the chart range to min. |
| cMax:max | Sets the maximum value of the chart range to max. |
| cO:key:value | Sets the option key to value. For example cO:height:high will set the chart height to high pixels. Refer to the Google charts documentation for available options. |
Styles
The appearance of the various elements such as charts, timer and joystick can be modified using the style field on the editor page. Below are the defaults used for the different elements. By adding the corresponding class name and CSS fields in the editor, the look of each element can be customized.
#chartLine_div {
height: 400px;
}
#timer_div {
font-family: monospace;
font-size: 48px;
}
#joystick_div {
height: 300px;
}
#joystick {
background-color: #eeeeee;
border-style: solid;
border-color: #cccccc;
border-width: 1px;
}
#joystickButton {
height: 100px;
color: #ff0000;
border-color: #000000;
border-width: 3px;
}