Go Down

Topic: Use Arduino through serial to update live data on website (Read 5694 times) previous topic - next topic


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: https://github.com/billroy/bitlash-commander -- it includes several data display controls (chart, meter, scope).

A simpler live charting example: https://github.com/billroy/arduino-livechart

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
<!DOCTYPE html>
<!-- Copyright 2012-2013 by Bill Roy - MIT license - See LICENSE file -->
<!-- tjp 16jul2013  alll day and last nite, still cant get a screen widget to reflect current status of digital input pin -->
<!-- the gtkterm monitor shows the variables do reflect the pin -->
{"id":"d2led","value":"1"}   <-- as i switch the button , the terminal shows the data changing, but the gui does not

<!-- 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 README.md
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

<!-- i expect the button 'd2led' to lightup when d2 is true because author says 
    "Buttons display the value returned by Bitlash in their label"
     which i take to mean the button's label changes to the new value returned
     and from the examples, i guess the widget knows the new value
     from the  continual 'printf id:blah value:bleh'
     not being a wise ass, its just how it looks to me
     i spent a good day and a half and got the terminal to respond to the input changes but never the gui
     the supplied demos never use input tied to a widget, only outputs and thats just half of i/o :(

   <title>Test Hdwr Input to Gui Widget</title>
   <script type='text/javascript' src='/js/jquery-1.8.2.min.js'></script>
   <script type='text/javascript' src='/js/fastclick.js'></script>
   <script type='text/javascript' src='/js/raphael.js'></script>
   <script type='text/javascript' src='/js/d3.v2.min.js'></script>
   <script type='text/javascript' src='/js/mustache.js'></script>
   <script type='text/javascript' src='/socket.io/socket.io.js'></script>
   <script type='text/javascript' src='/js/handsontable/jquery.handsontable.full.js'></script>
   <script type='text/javascript' src='/js/jQuery-contextMenu/jquery.contextMenu.js'></script>
   <script type='text/javascript' src='/js/jQuery-contextMenu/jquery.ui.position.js'></script>

   <script type='text/javascript' src='/js/svg-controls.js'></script>

   <link rel='stylesheet' media='screen' href='/js/handsontable/jquery.handsontable.full.css'>
   <link rel='stylesheet' media='screen' href='/js/jQuery-contextMenu/jquery.contextMenu.css'>
</head><body style='background:gray'>

<script type='text/javascript' charset='utf8'>

$(document).ready(function() {

   // instance panel & set pin2 as input, pin13 as output
   var Panel = new ControlPanel({stroke:'turquoise', id:'push', onload:'pinmode(2,0);pinmode(13,1);'});

   // i try to use btn as a display, it doesnt react to 'update(id,value) call
   Panel.addButton({x:196, y: 24,
      text:'', // the name is useless, but making it null doesnt save any real estate , i get a recycle symbol anyway
      id: 'd2led',
      autorun: true,
      noreadout:0,  // maybe i get to see the value printed below like docs say, no good
      script:'update("d2led", d2);print d2;d13=d2;', // update id "d2led" with value d2   no good
      onload: 'print d2;', // this is only for 1st run thru loop, makes no diff thos
      repeat:125  // this gets me auto-updating of the var AND (should but doesnt )the screen printout of same

   Panel.onload();      // fire the onload handlers, makes no diff, would only affect 1st run anyways
});    // document.ready
<div id='editor'>
   <div id='dataTable'></div>
   <input type='button' value='cancel' id='editcancel'></input>
   <input type='button' value='+' id='editadd'></input>
   <input type='button' value='-' id='editdelete'></input>
   <input type='button' value='save' id='editsave'></input>
<div id='contextmenu'></div>
<div id='editmenu'></div>
<div id='player'></div>
thanks , tjtr33

Go Up