18

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...
the Tin Man
  • 158,662
  • 42
  • 215
  • 303
Kokodoko
  • 26,167
  • 33
  • 120
  • 197
  • 1
    You should look at this : https://github.com/rwaldron/johnny-five . Maybe it can help you. – kmas Dec 12 '13 at 16:48

4 Answers4

14

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.

Tsanyo Tsanev
  • 1,269
  • 10
  • 11
  • 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 Dec 13 '13 at 13:37
  • ...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. – Kokodoko Dec 13 '13 at 13:42
  • 1
    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. – Tsanyo Tsanev Dec 13 '13 at 18:13
  • 1
    I recently discovered that locally running Google Chrome Apps (basically extensions) CAN access local peripherals! https://developer.chrome.com/apps/serial – Kokodoko Mar 12 '14 at 14:57
  • 1
    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. – Tsanyo Tsanev Mar 12 '14 at 15:59
  • 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. – Kokodoko Jun 06 '14 at 11:46
2

In 2023, you can use the Web Serial API which launched in Chrome 89.

Link: https://developer.chrome.com/articles/serial/

James Lam
  • 145
  • 2
  • 8
1

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.

Community
  • 1
  • 1
Chintan Pathak
  • 302
  • 2
  • 5
  • 20
  • 1
    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 Mar 13 '14 at 13:12
0

if you want to send or receive serial data from Arduino to JavaScript in Processing code editor just go to Sketch -> Import Library -> Serial or just write import processing.serial.*;

Vedant Gupta
  • 1
  • this question was asked in 2013 :) these days we can use WebUSB to read data from a device into a web browser! – Kokodoko Nov 08 '22 at 18:26