Download 'index.html' to your smartphone and open it,
or access URL https://secile.github.io/micropad/

You can see screen below.

• Press '🚩' button to connect your micro:bit or ESP32.
• Press '🛑' button to disconnect.

If you can not connect to your micro:bit, please see Connection Trouble section below.

[Android, Windows] works fine.
[iOS] Safari do not works correctly, because Safari do not support Web Bluetooth API. please use Bluefy instead.

There are 4 kinds of controls.

1. Analog Stick

2. Button

button has two mode, normal mode and toggle mode.
in normal mode, press to turn on and release to turn off. in toggle mode, switch on and off on every click.

3. Slider

4. Label

Show text message. Use this to show your product name, or instruction to control.
Or use this to show information received from micro:bit.

On control updated, micropad send message to micro:bit via BLE. Message format is csv with 3 params 'ControlID, Value1, Value2'.
ControlID is unique ID every control has it own. Value1 and Value2 is up to control kind.

• Analog Stick
  • ControlID: 'a1'(left stick) or 'a2'(right stick)
  • Value1: radian angle clockwise from the X axis. (rounded in 8 directions)
  • Value2: power. distance from origin. range 0.0-1.0. (rounded in 3 levels, 0.0 or 0.5 or 1.0.)
  • e.g. 'a1, 3.14, 0.5'
• Button
  • ControlID: 'b1'(X Button) or 'b2'(Y Button)
  • Value1: '1'(on) or '0'(off).
  • Value2: '0'(reserved).
  • e.g. 'b2, 1, 0'
• Slider
  • ControlID: 's1'
  • Value1: ratio with 0.0-1.0. (0.1 step)
  • Value2: '0'(reserved).
  • e.g. 's1, 0.7, 0'

angle is radian angle clockwise from the X axis. power is distance from the origin.

you can deriver x and y from angle and power.

const x = Math.cos(angle) * power;
const y = Math.sin(angle) * power;

You have to upload the program that supports micropad to your ESP32. Please see this repository.

After create new project, you have to add 'bluetooth' extention to your project.

and select 'No Pariring Required' from 'Project Settings'.

• on start
  • add 'bluetooth uart service' to 'on start'

• bluetooth on data received
  • receive message from micropad, parse it to 3 params, ControlID, Value1, Value2.
  • then call 'received' function which you make.

• received function
  • this is function that does you want.
  • branch by ControlID, interact actions by using Value1 and Value2.
  • here is a sample. Hero moves by Analog Stick, LED shows 'X' or 'Y' by pressing Button, and LED brightness can be changed by Slider. don't forget to add 'create sprite' in 'on start'.

See my micro:bit MakeCode sample project.
https://makecode.microbit.org/S93757-34929-39231-95436

modify initControl function.

for example, in case you add 3rd button 'Z', follow the instruction below.

• const button3 = new Button(...), and result.push(button3).
• onChange, asign unique Control ID. rename 'b2' to 'b3'.
• on response to 'resize' event, you have to layout it to appropriate position.

// Button 3.
const button3 = new Button(canvas, context);
button3.text = "Z";
button3.onChange = (flag) => {
    const cmd = `b3,${flag? 1: 0},0`;
    sendCmd(cmd)
};
result.push(button3);
window.addEventListener('resize', () => {
    button3.setPosition(canvas.width * 0.5, canvas.height / 2 + stick2.height * 0.75);
});

• you can modify control style.

button3.backFillStyle = "LightGreen";
button3.backStrokeStyle = "DarkGreen";

to send information from micro:bit to micropad, use 'bluetooth uart write value' block.

in micropad, call recvBLE function.
1st argument is control ID. this must be matched with variable name of 'bluetooth uart write value'.
2nd argument is callback when you receive message from micro:bit. change label.text property.

When you press '🚩' button, it is listed your micro:bit in pairing dialog.
But in case when it is not listed your micro:bit and displayed 'No compatible device found.' instead.

This trouble happens when you have already paired your micro:bit in the past.
Please check the list of already paired Bluetooth devices. and if you found alread paired micro:bit, remove it.

It is because that during the bluetooth pairing process, keys are exchanged between the micro:bit and the parent device.
When you make new program and download to the micro:bit, key is updated, but parent device preserved old key,
therefore, keys are mismatched.