reading sensor data in a webpage

206 views
Skip to first unread message

Chintan Pathak

unread,
Mar 10, 2014, 4:01:03 AM3/10/14
to proces...@googlegroups.com
I want to create a web-app that reads data of various sensors over TCP/IP. I want this data to be accessible in the web-page's HTML. 

Any examples or js libraries doing that ?

Once this data is available, I think processing.js can be used to create visualizations or trigger events based on this data. 


Erich Buri

unread,
Mar 10, 2014, 11:30:58 AM3/10/14
to proces...@googlegroups.com
Short Answer: You can't open a TCP/IP connection in JS from the browser where your ProcessingJS Sketch is running. You'd need to get the data on server-side and make it available to your sketch (with an Ajax-Call or simply through a file loaded when the page is loaded. But you probably want real-time-data, so you need to implement an interface on server).


--
You received this message because you are subscribed to the Google Groups "Processing.js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to processingjs...@googlegroups.com.
To post to this group, send email to proces...@googlegroups.com.
Visit this group at http://groups.google.com/group/processingjs.
For more options, visit https://groups.google.com/d/optout.



--
erich buri
neuengasse 3
3011 Bern

Erich Buri

unread,
Mar 10, 2014, 11:35:31 AM3/10/14
to proces...@googlegroups.com
Here's an example with PHP:

You'd need to change the data.php to actually contact your sensors and get the data from there. You might also want to pull the data from a DB and have background job that polls your sensors and puts the latest values in the DB. Or even better, have you sensors push the data into the DB, when they have new data available. 



On Mon, Mar 10, 2014 at 3:01 PM, Chintan Pathak <chintan...@gmail.com> wrote:

--
You received this message because you are subscribed to the Google Groups "Processing.js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to processingjs...@googlegroups.com.
To post to this group, send email to proces...@googlegroups.com.
Visit this group at http://groups.google.com/group/processingjs.
For more options, visit https://groups.google.com/d/optout.

Mike Niemi

unread,
Mar 10, 2014, 2:31:34 PM3/10/14
to proces...@googlegroups.com
Here's a simple example using Javascript and Flot on the client side and a simple CGI on the server side to collect and plot stuff like CPU usage, board temperature, etc:

    http://svbreakaway.info/tp-raspi-mon.php

The readings are plotted as timeseries plots but they could just as easily be dials, bar charts, etc.  It was developed on Linux (Debian on Raspberry Pi) and uses SNMP to access most of the counters (but any sensors that could be accessed from a CGI would work).  It's a simple-as-sin, pull model - no DB, no history.

Mike
Message has been deleted

Chintan Pathak

unread,
Mar 12, 2014, 4:02:03 AM3/12/14
to proces...@googlegroups.com

Chintan Pathak

unread,
Mar 13, 2014, 5:35:41 AM3/13/14
to proces...@googlegroups.com
I was able to get this to work. Pls find the updated file.  

It uses socket.io to send data from server to html client and "net" module of nodejs to get data from sensors over TCP. Next I want to get this done with lisp but thats for later. ;)

Now my browser shows: 

Tempature 31.0 celsius Tempature_AV 31.0 celsius Humidity 30.2 % Humidity_AV 30.2 % Atm Pressure -13690.3 Bar Temp Internal 32.9 Wind Direction 136.1 degree Wind Speed 714.4 Rain 0.0 Solar Radiation -1.2 w/m2
 
Some values like Atm Pressure need to be recalibrated, but this is how weather in text looks like and its not very interesting, so I want to prepare visualizations like dials etc. that update in real-time to reflect the current data. 

Is processing.js the best tool for the job ?

Thanks





On Monday, March 10, 2014 1:31:03 PM UTC+5:30, Chintan Pathak wrote:
tcp_listener1.js
index.html

Chema Diez del Corral

unread,
Mar 13, 2014, 7:20:04 AM3/13/14
to proces...@googlegroups.com
2014-03-13 10:35 GMT+01:00 Chintan Pathak <chintan...@gmail.com>:
ed to be recalibrated, but this is how weather in text loo

Interesting project!!!
 

If I have to do this work I will send the data like vars in node to the html file or using a JSON file that is practically the same. After that you can read the data from processing easly or use one of the great amount of js libraries that allow make visualizations.

If you have a node server working, have you had consider a nosql data base to storage all collected data? something like mongo or couchdb, would be great!
The advantage of that is you can provide an api to acess to all the stored, recent and past, and take from there the data directly from the visualization app.

Cheers!


--


Chema Diez del Corral

john zuh

unread,
Mar 13, 2014, 12:35:41 PM3/13/14
to proces...@googlegroups.com
Chintan check out node.js for server side of things. 


--
You received this message because you are subscribed to the Google Groups "Processing.js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to processingjs...@googlegroups.com.
To post to this group, send email to proces...@googlegroups.com.
Visit this group at http://groups.google.com/group/processingjs.
For more options, visit https://groups.google.com/d/optout.



--
John Fifi Zuh
Senior Web Applications Developer / Consultant
Software Quality Assurance / IT / Software Project Management
Email: joh...@gmail.com
joh...@gmx.de
Website: http://www.johnzuh.com
Cell: +233243529709

 

Chintan Pathak

unread,
Mar 14, 2014, 12:10:35 AM3/14/14
to proces...@googlegroups.com
@didelco : I plan to store the data in a db anyways. 

Why do you suggest nosql like mongodb over postgres/mysql ? 

And is it better to send the data first to db then to html or directly from node server to html using socket.io?

I am looking to create 3D visualization for the browser like a 3D thermometer that shows temperature and like so. 



On Monday, March 10, 2014 1:31:03 PM UTC+5:30, Chintan Pathak wrote:

Chema Diez del Corral

unread,
Mar 14, 2014, 8:00:16 AM3/14/14
to proces...@googlegroups.com

2014-03-14 5:10 GMT+01:00 Chintan Pathak <chintan...@gmail.com>:
to db then to html or directly from node server to html

I am not a system architecture, and I don't know exactly what is your final goal, but I am going to tell you what is my idea.

- Node.js works with js (obviously) a js data base look like has sense.
- IoT data bases are commonly scalable, so a relational data base can be dificult to make it grrow.
- Access to a determined data (yesterday's temperatures) can be done directly from a noSQL file based data base in json format.
- Provide an API for users with couchDB is direct, and allways is a WIN WIN (but depends of your goals)
- socket.io is great! but is great for real time data. If you want to have the data from the last 24 hours is better use a db. Optimal solution is both, db for past data and socket.io for real time data updates.

I hope to be usefull, I would like more of your work when will be done
Reply all
Reply to author
Forward
0 new messages