Arduino + microStudio? YES!

Hello everyone I want to share with you my experiment, which was crowned with success. Now your projects can get additional features thanks to my library, which adds Web Serial support.

The library itself: https://microstudio.dev/i/Romero/serialport/

Video with a demonstration: https://youtu.be/yJVV-omELXs?si=CUTLzsYGUxFMgO_6

Library Functions:

1. Connecting to the device: connect()
2. Disconnecting from the device: disconnect()
3. Changing the port speed (you can also change it while the program is running): setBaudRate()
4. Data transfer: write()
5. Receiving data: read()
6. Using the received data: getRawReceivedData()

Update

1. remove the getRawReceivedData() function
2. added the getBinaryData() function
3. added the getString Data() function
4. added a parser - parseReadLine()

Not relevant!(At the moment there is only getRawReceivedData(), it returns the raw data, then I will rename it to getReceivedData() or leave it and add it — I have problems implementing buffering with processing “\n” “\r”, I do not know, I cannot do it so that, what comes in is adequately displayed in DrawText, and I want to make it as universal as possible.)

If you have any tips and/or suggestions on how to do this, I will be glad to hear them!

Limitations:

1. Doesn't work with microScript: Unfortunately, I couldn't get the library to work with microScript. - Not relevant! I made a separate version for microScript: https://microstudio.dev/i/Romero/serialportapiformicroscript/

2. Not all browsers support Web Serial: This is a limitation that cannot be circumvented. For more information, see the compatibility table: https://developer.mozilla.org/en-US/docs/Web/API/Web_Serial_API#browser_compatibility or https://caniuse.com/web-serial

3. No support on mobile devices and tablets: It is not possible to connect to the browser application via USB on mobile devices and tablets. This limitation is due to the lack of Web Serial support on mobile browsers. (I haven't tried Bluetooth yet, but judging by the fact that you can connect to the espruino web ide via Bluetooth from Android, there is a high probability that it will work here too.)

4. Work only in a separate tab: This only works in a separate browser tab (because the window that you see while writing the code works in “protected mode” or something like that)

5. Working in an exported project: If you exported your project to HTML5, it will work, but again, see which browser you are using. If you exported your project to something else, then it won't work at all, at least for now it does.

If @gilles is interested in this and he can implement it technically, then the situation may change. After all, there are applications on PC and Android that support this (I can't say about macOS and iOS — I don't have them). I think that if desired, something could be implemented here.

A simple arduino code for demonstration:

uint8_t ledPin = 13;

uint8_t btnPinpl = 4;
uint8_t btnPin = 5;

void setup() {
  Serial.begin(9600);
  pinMode(ledPin, OUTPUT);

  pinMode(btnPinpl, INPUT);
  pinMode(btnPin, INPUT);
}

void loop() {
  char ledData = Serial.read();
    if(ledData == '1'){
      digitalWrite(ledPin, HIGH);
    }
    if(ledData == '0'){
      digitalWrite(ledPin, LOW);
    }  

  bool btnStatepl = digitalRead(btnPinpl);
  if(btnStatepl){
    Serial.println("Hello microStudio!");
  }
  
  bool btnState = digitalRead(btnPin);
  if(btnState){
    Serial.print("!Hello microStudio!");
  }
}

To add your javascript code to the MicroScript code you can do it in several ways.

• Create a new project for the library, let's say called SPMS (serial port MicroScript).

• Add one source file to the project - and copy the current version of your SerialPort library to it.

• A few modifications - and you will be able to use your library with MicroScript.

1. Create a class on the global branch example

// javascript
global.SerialPort = class{ ..... }

It will work fine if the class you are adding does not refer to other classes that you have also created.

1. You can also try this

Now when you type the word global in the console it will also display the SerialPort class.

// javascript 
this.SerialPort = (function(){
   let SerialPortClass = class{
//.................. all body class
  }
  return SerialPortClass
})();

simply adding "// javascript" didn't help me much last time, there was an error "there is no class named SerialPort", but I'll try the second option

I have added "// javascript" right now and this is the error the console gives

microScript 2.0
Syntax Error, in file "source" at line 4, column 18
Warning: testPort.setBaudRate(9600) is not a function, in file "main" at line 3, column 28
Warning: test.read() is not a function, in file "main" at line 7, column 13
Warning: testPort.connectionState() is not a function, in file "main" at line 14, column 44

I transferred the code that works on js to mS

init = function()
  testPort = new SerialPort()
  testPort.setBaudRate(9600)
end

update = function()
  test.read()
end

draw = function()
  screen.clear()
  if(button(-64,24,48,16,8,"connect") == true) then testPort.connect() end
  if(button(-64,0,48,16,8,"disconnect") == true) then testPort.disconnect() end
  screen.drawText(testPort.connectionState(),0,0,16,"#fff")
  
end

button = function(x,y,w,h,textSize,text)
  if((mouse.press or touch.touching) and Math.abs(mouse.x-x)<w/2 and Math.abs(mouse.y-y)<h/2) then
    screen.fillRoundRect(x,y,w,h,2,"#4DB6AC")
    screen.drawText(text,x,y,textSize,"#E0E0E0")
    return true
  else
    screen.fillRoundRect(x,y,w,h,2,"#009688")
    screen.drawText(text,x,y,textSize,"#E0E0E0")
    return false
  end
end

the second option didn't help much either, it seems to me that it's because of "async"

edited: yes, that's it, just try to make a function

// javascript
async funcName(){
  console.log("Hello");
}

And try to summon her

init = function()
  funcName()
end

microScript 2.0
Warning: funcName() is not a function, in file "main" at line 2, column 12

You clone this project and look i browser console and MicroStudio console.

https://microstudio.io/i/Loginus/async/

this.funcName = async function(){   // or global.funcName = async function(){
  global.print("Hello >> print ");
  console.log(" Hello >> console ");
} 

main file

init = function()
  a = funcName().then( function( result ) print(" funcName ") end )
end

https://microstudio.dev/community/help/how-do-we-interact-with-async-functions/875/

Hmm, very interesting. I'll try to do it! actually, this is my first experience using asynchrony, but if anything, I know who to contact if you don't mind. 😅

Not relevant!(At the moment there is only getRawReceivedData(), it returns the raw data, then I will rename it to getReceivedData() or leave it and add it — I have problems implementing buffering with processing “\n” “\r”, I do not know, I cannot do it so that, what comes in is adequately displayed in DrawText, and I want to make it as universal as possible.)

Doesn't work with microScript: Unfortunately, I couldn't get the library to work with microScript. - Not relevant! I made a separate version for microScript: https://microstudio.dev/i/Romero/serialportapiformicroscript/