From a7119749fcd8bf55d2429f3854a2673887f9749e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Stefan=20K=C3=B6gl?= Date: Mon, 18 Feb 2013 06:46:15 +0100 Subject: [PATCH] added display code --- app.js | 36 +++++++++++++++--- cosm.js | 13 ++++--- public/stylesheets/style.css | 9 +++-- views/index.jade | 71 ++++++++++++++++++++++++++++-------- 4 files changed, 99 insertions(+), 30 deletions(-) diff --git a/app.js b/app.js index 6e63822..b7fefaa 100644 --- a/app.js +++ b/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) diff --git a/cosm.js b/cosm.js index a45f9cc..8bfedfb 100644 --- a/cosm.js +++ b/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); } - - self.emit('updatevalue', object); + else + 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, diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css index b9cdcd2..c9a9bed 100644 --- a/public/stylesheets/style.css +++ b/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 { diff --git a/views/index.jade b/views/index.jade index 36a89c8..be1d97c 100644 --- a/views/index.jade +++ b/views/index.jade @@ -9,37 +9,52 @@ block content div.row for nr in streams div.cell - div.kasten - h3 Freakduino + Netrad SBM-20 + div(id=nr, class="kasten") + 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}") - - //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") + div.mapbox(id="map#{nr}") -- 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) { - console.log("changedvalue: " + data); - }); + function add_data(data) { + console.log("changedvalue"); + console.dir(data); + var row = $('tr#' + data.feed).html(); + if (row === undefined) { + var tmp = '' + data.displayname + "" + data.value + ""; + 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 = "" + data.displayname + "" + data.value + ""; + console.log("existing tmp: " + tmp); + $(t).html(tmp); + } + }; + + socket.on('changedvalue', add_data); + + socket.on('updatevalue', add_data);