P5.js serial port and Microbit connection

[loretod]

I am working on getting the serial communication to work between a Microbit and p5.js. I’m pretty sure the Microbit side of the project is working since I am able to see the serial write in my terminal.

On the p5.js side, I’ve been following the available documentation and believe the library, variables, and functions are set up correctly however it’s not working.

Here is the Microbit side of things:

https://makecode.microbit.org/_UmseYmUumFmf

Here is the p5.js side of things:

I’m running things on a Mac (10.14.2)

Any help is most appreciated!

[dector]

Can you please specify what wrong result you’ve got? Just in case. Do you see “server is connected” and “Serial port is open” in console?

[loretod]

Yes, I see the server is connected and serial port is open messages. The serial message I’m sending from the Microbit do not show up in the inData variable (I get “undefined”). Printing the inData in the console log also gets me undefined. Using the if(serial.available()>0) - executes none of the text. I also tried to run it using the web editor and in multiple browsers.

I do not see any of the serial data sent from the Microbit on p5.serialcontrol app. I can, however, see the data that is sent when using screen from the Terminal. Any ideas why it would work in Terminal and not elsewhere?

[dector]

Microbit do not show up in the inData variable (I get “undefined”). Printing the inData in the console log also gets me undefined.

According to the snippet you’ve share it will be undefined because of this:

// Line 8
serial.on('data', serialEvent);

// Later, in line 15
serial.on('data', gotData);

So you are setting gotData as your callback function. And in draw() function you are calling it manually on each frame.

Try to comment line 15 and change serialEvent() function (line 22) to this:

var inByte = serial.read();
console.log((inByte & 0xff).toString(16));

Also you can check this basic example

[dector]

Also about serial.readStringUntil('\r\n'). \r\n is line break symbol. But I think that write number function will not add it. Probably you should convert it to string first and then send as a string. (If you want to receive data with line breaks only).

[loretod]

Thanks @dector for the tips and help. I tried the above with still no serial data coming through (nothing in text or console log). Also tried to re download and run the basic examples provided from local files without luck. I’m starting to think it might be related to WebUSB and permissions (https://developers.google.com/web/updates/2016/03/access-usb-devices-on-the-web)? Although it’s not working in Safari or Firefox either. I’ll go down this rabbit hole a little and perhaps try and find a PC and Arduino to see if that makes a difference.

[dector]

But on p5 side you are connecting to port (if I’ve got it right) and just reading from not (not writing)?

Try some serial terminal that is running in browser (e.g. this) and exchange data with microbit.

[loretod]

It works! I think the main culprit may have been the firmware version I was running. The older firmware doesn’t have WebUSB. Updating to 250 helped. The Microbit also runs at a115200 baudrate so specifying that rate may have helped also:

serial.open(portName, {baudrate: 115200},gotOpen);

Phew…

[totovr76]

Late but I could read serial data with Chrome:

The code is available here

[loretod]

Nice @geert ! I’ll try it out this weekend. The bluetooth version would be sweet!

[geert]

If you want ‘normal’ serial you can check out this one: Let Arduino Control Your Browser - Arduino Project Hub