Use Arduino through serial to update live data on website

How can I get the arduino, throught a serial connection to a web server, to update a constant stream of data?
I would like to do a sort of weather station, available from the Internet.
I am thinking I will use Ajax to update the webpage, but have no idea how to get the arduino serial data to the website.


Why not install/add an Ethernet shield and get the Arduino to update the webserver directly?

I've published a couple examples of how to serve live serial data on the web, up on Github:

Bitlash Commander lets you design and serve web control panels for your arduino: GitHub - billroy/bitlash-commander: Web-based dashboard builder for Arduino. -- it includes several data display controls (chart, meter, scope).

A simpler live charting example: GitHub - billroy/arduino-livechart: Generates a D3 chart of data logged from a USB-connected Arduino

These use node.js, specifically the Express web server framework and the node-serialport module to talk to the Arduino.


Why not install/add an Ethernet shield and get the Arduino to update the webserver directly?

  1. I believe I can do without it
  2. I am cheap as and really want to spend on the essentials
  3. If I use the arduino as an autopilot/remote weather station, I can't have an ethernet cable, I have to use an xbee or some other form of telemetry and do it over serial

This was not really clear in the initial post, but thanks.

Thanks Billroy, the live charting example is exactly the type of thing I was looking for.
Will be good to have numerical displays, showing current data as well

Hello, newbie here.
I'd like to use bitlash commander to show me status of inputs.
All the examples I find are for output ( eg: slider to analog output),
and all the widgets are inputs afaict ( a slider or button is a user input ).

I'd like to use a simple arduino input, say d2 and have bitlash commander display its current value.
like widget.state=d2 ( pseudo code )

I tried to use a button as an 'led' and had not luck.
Please, something simple,
I know theres tricks to make it auto update etc, but to 'just work' would be a great start for me.

my tries include...
(this does not work)
Panel.addButton({x:96, y: 24,
onload:'value=d2; print d2', // this has no effect
autorun: true

and it is not allowed to use a real data source as the input to a scope
var scope = Panel.addScope({
id:'scopd2', text:'wheelswxscope',
x:900, y:100,
min: 0,
max: 1,
source:'d2' // this is illegal, must be the id of a widget

what can i use as a boolean output widget ( like an led )?
how can a real input pin make the 'led' illuminate?

regards tjtr33

in case it helps show what i’m trying to do, heres the whole html ( with .btl noted inside comments )
this is bitlash 2.0, run in firefox 20.0 on ubuntu 10.04, openjre 6.0. monitored with gtkterm

<!-- i use some commands in a btl file that i can upload thru gtkterm into the arduino memory
heres output of gtkterm showing the functions in arduino memory, i simply run ‘startup’

function showme1 { a=pulseIn(2,1,5000000);print a;};
function update {printf("{“id”:"%s",“value”:"%d"}\n",arg(1),arg(2));};
function pd2 {update(“d2led”,d2);d13=d2;};
function startup {pinmode(2,0);pinmode(13,1);run pd2,1000;};

the above can be snipped and saved to a .btl file for ease of installing the vocabulary
info on the functions:
showme1 not used now, for later
update this is copied from bitlash
pd2 this is passed the id of the widget and the data to show
and for sanity, makes builtin led respond to input
( which works fine, the gui doesnt respond )
startup this inits data dir & begins bg loop of plot

Test Hdwr Input to Gui Widget
--- thanks , tjtr33