added display code

app.js

@@ -6,11 +6,29 @@ var express = require('express')
     , cosm = require('./cosm.js')
     , osc = require('./osc.js');
 
-var cosmStreams = [ 70632 ];
+var cosmStreams = [97325, 84896, 84388, 70632 ];
 
 var cosmClient = new cosm(cosmStreams, 'orKBBdLAKuKJU-RxqmZpZB6q0baSAKxBTVhKdjhUNkdyVT0g');
 var oscClient = new osc('localhost', 8000);
 
+function logErrors(err, req, res, next) {
+  console.error(err.stack);
+  next(err);
+}
+
+function clientErrorHandler(err, req, res, next) {
+  if (req.xhr) {
+    res.send(500, { error: 'Something blew up!' });
+  } else {
+    next(err);
+  }
+}
+
+function errorHandler(err, req, res, next) {
+  res.status(500);
+  res.render('error', { error: err });
+}
+
 
 app.configure(function () {
     app.set('port', process.env.PORT || 3000);
@@ -20,6 +38,9 @@ app.configure(function () {
     app.use(express.bodyParser());
     app.use(express.methodOverride());
     app.use(app.router);
+    app.use(logErrors);
+    app.use(clientErrorHandler);
+    app.use(errorHandler);
     app.use(express.static(path.join(__dirname, 'public')));
 });
 
@@ -33,20 +54,23 @@ app.get("/", function(req, res) {
 });
 
 io.sockets.on('connection', function (socket) {
-    socket.emit('news', { hello: 'world' });
-    socket.on('my other event', function (data) {
-        console.log("bla" + data);
-    });
-
     cosmClient.getStreams(cosmStreams, function(object) {
         socket.emit('gotstream', object);
     });
 });
 
+
+
 server.listen(app.get('port'), function () {
     console.log("Express server listening on port " + app.get('port'));
 });
 
+// this event is send by cosm client when new data arrives (just when values changes)
+cosmClient.on('updatevalue', function(object) {
+    console.log("updatevalue: " + JSON.stringify(object));
+    oscClient.send('/cosm/' + object.stream + "/" + object.displayname, object.value);
+    io.sockets.emit('updatevalue', object);
+});
 
 
 // this event is send by cosm client when new data arrives (just when values changes)

cosm.js

@@ -49,13 +49,14 @@ function Cosm(streams, key) {
                         'value': currentValue
                     };
 
-                    var address = streams[i] + ":" + dataStream.id;
+                    var address = obj.id + ":" + dataStream.id;
 
-                    if(true || recentvalues[address] != currentValue) {
+                    console.log(recentvalues);
+                    if(recentvalues[address] != currentValue) {
                         self.emit('changedvalue', object);
                     }
-
+                    else
-                    self.emit('updatevalue', object);
+                        self.emit('updatevalue', object);
 
 
                     recentvalues[address] = currentValue;
@@ -78,9 +79,9 @@ Cosm.prototype.getStreams = function(streams, callback) {
                 console.error("error getting stream: " + err)
                 return;
             }
-
+//             console.dir(obj);
             var object = {
-                id: streams[i],
+                id: obj.id,
                 description: obj.description,
                 lat: typeof obj.location === 'undefined' ? 'undefined' : obj.location.lat,
                 lon: typeof obj.location === 'undefined' ? 'undefined' : obj.location.lon,

public/stylesheets/style.css

@@ -34,7 +34,7 @@ a {
 
 .kasten {
     padding: 10px;
-    margin: 24px;
+    margin: 10px;
     height: 90%;
     background-color: #444;
     border: 1px solid #7b7b7b;
@@ -44,9 +44,12 @@ a {
 }
 
 div.mapbox {
-    width: 270px;
     height: 150px;
-    margin-top: 20px;
+    width:270px;
+    margin-left: auto;
+    margin-right: auto;
+    position:absolute;
+    bottom:10%;
 }
 
 .kasten img {

views/index.jade

@@ -9,37 +9,52 @@ block content
         div.row
             for nr in streams
                 div.cell
-                    div.kasten
+                    div(id=nr, class="kasten")
-                        h3 Freakduino + Netrad SBM-20
+                        h3 --
+                        h4 --
                         table
                             tr
                                 td Location:
-                                td --
+                                td(class="location") --
                             tr
                                 td Elevation:
-                                td --
+                                td(class="elevation") --
                             tr
                                 td Latitude:
-                                td --
+                                td(class="latitude") --
                             tr
                                 td Longitude:
-                                td --
+                                td(class="longitude") --
                             tr
                                 td Update:
-                                td --
+                                td(class="update") --
 
-                        div.mapbox(id="map#{nr}")
+                        div.mapbox(id="map#{nr}") --
-
-                        //img(src="https://api.cosm.com/v2/feeds/64590/datastreams/microsievertsperhour.png?width=200&height=100&colour=%23f15a24&duration=5minutes&show_axis_labels=true&detailed_grid=true&scale=auto&timezone=Berlin")
 
 
 
     script(type="text/javascript",src="http://maps.googleapis.com/maps/api/js?sensor=false&key=AIzaSyDZ5gUZumNEZOHyRLs4HWJEJ-mDeEkWInU")
 
     script(type="text/javascript")
+        //var streams;
+        //var stream;
+
+        var print = function(o){
+            var str='';
+
+            for(var p in o){
+                if(typeof o[p] == 'string'){
+                    str+= p + ': ' + o[p]+'; ';
+                }else{
+                    str+= p + ': {' + print(o[p]) + '}';
+                }
+            }
+
+            return str;
+        }
 
         function loadMap(container, lat, long) {
-            var latlong = new google.maps.LatLng(-34.397, 150.644);
+            var latlong = new google.maps.LatLng(lat, long);
             var map = new google.maps.Map(container, { center: latlong,
                                                        zoom: 8,
                                                        disableDefaultUI: true,
@@ -54,10 +69,36 @@ block content
         var socket = io.connect('http://localhost');
 
         socket.on('gotstream', function(data) {
-            console.log("got stream: " + data);
+            console.log("gotstream " + data.id);
+            $("div#" + data.id + " h3").text(data.title);
+            $("div#" + data.id + " h4").text(data.description);
+            $("div#" + data.id + " td.location").text(data.location);
+            $("div#" + data.id + " td.elevation").text(data.elevation);
+            $("div#" + data.id + " td.latitude").text(data.lat);
+            $("div#" + data.id + " td.longitude").text(data.lon);
+            var now = new Date();
+            $("div#" + data.id + " td.update").text(now);
+            loadMap($('div#map' + data.id)[0], data.lat, data.lon);
         });
 
-        socket.on('changedvalue', function(data) {
+        function add_data(data) {
-            console.log("changedvalue: " + data);
+            console.log("changedvalue");
-        });
+            console.dir(data);
+            var row = $('tr#' + data.feed).html();
+            if (row === undefined) {
+                var tmp = '<tr id="' + data.feed + '"><td>' + data.displayname + "</td><td>" + data.value + "</td></tr>";
+                console.log("new tmp: " + tmp);
+                $("div#" + data.stream + " table > tbody").append(tmp);
+            }
+            else {
+                var t = 'div#' + data.stream + ' table > tbody tr#' + data.feed;
+                var tmp = "<td>" + data.displayname + "</td><td>" + data.value + "</td>";
+                console.log("existing tmp: " + tmp);
+                $(t).html(tmp);
+            }
+        };
+
+        socket.on('changedvalue', add_data);
+
+        socket.on('updatevalue', add_data);