How to read serial port data from JavaScript

Question

I connected an Arduino to my laptop using USB, and I can read the serial data using Processing.

Is there any way to get this data in real time into a local webbrowser? For example, a text field that shows the value from the serial port? It does not have to be connected to the internet.

The JavaScript version of Processing does not support the following code, which would have been the ideal solution.

The Processing code is:

myPort = new Serial(this, Serial.list()[0], 9600);
// read a byte from the serial port
int inByte = myPort.read();
// print it
println(inByte);
// now send this value somewhere...?
// ehm...

Solution 1

There is no way to directly access the local machine from the web browser. For security reasons browsers have very limited access to the machines resources.

To do this one option would be to write an extension for the browser of your choosing. Even though extensions also have a variety of limitations.

Option two would be to use local server to provide the functionality you need. Personally I recommend using node.js (it's light weight, fast and easy to implement). You can read/write serial data using https://github.com/rwaldron/johnny-five (as @kmas suggested) or https://github.com/voodootikigod/node-serialport and than you can use http://socket.io/ to create a simple service and connect to it though the browser. Socket.io uses WebSockets in modern browsers and works excepionally well for real-time connections.

Solution 2

I had a similar problem to solve. My Data acquisition system (DAQ) (like your arduino) relays data in HTTP, TCP, FTP, as well as serial. I had to capture it on the server and then send it to my webpage in real-time.

The hack I wrote uses nodejs at the server, and connects DAQ to the server using TCP sockets using the "net" module of nodejs and connects the server to the HTML page using socket.io.

The code and context can be found in "How to get sensor data over TCP/IP in nodejs?".

I use TCP as I wanted to transmit data over a long distance. You need to modify the socket protocol to serial.

For serial-to-TCP redirection, you may use bloom from sensorMonkey for Windows or their processing sketch for *nix/Mac OS.

Comments

[Kokodoko]

Thanks! I already tried using a browser extension (Seriality) but it only works in Safari on OS X. It seems I can no longer avoid looking into Node.js!

[Kokodoko]

...Although the requirements somewhat baffle me. XCode? Commandline tools? Python? (but not the latest?)... it seems quite a lot to figure out, for such a simple question.

[Tsanyo Tsanev]

There are other options than node.js. I just think node.js would be most useful, since the socket.io module does most of heavy lifting in the browser for you. If you decide to go with a Python, PHP, Ruby, etc, you'll have to install and configure a webserver and write your own WebSocket implementation and you won't have fallbacks.

[Kokodoko]

I recently discovered that locally running Google Chrome Apps (basically extensions) CAN access local peripherals! developer.chrome.com/apps/serial

[Tsanyo Tsanev]

Yes, using a local extension you can. You can also write your own shared library and include it using the a browser extension. You can also do the same as a firefox add-on for example. But this works only if the user has the specific extension installed in the browser and it could be really useful, depending on your specific situation.

[Kokodoko]

I looked at that but it involves a lot of steps, and relies heavily on external services being online. Using a Chrome extension I can basically be offline and still access the serial port.

[Kokodoko]

Adding to that, it seems that "Node-Webkit" is a webkit browser which also has access to local files. This is by far the best solution since it doesn't require signing in to Chrome or even an internet connection.