From 9e9627ad4617863f3803e41813a6049b29ecc563 Mon Sep 17 00:00:00 2001
From: De Wet van Niekerk <dewert at google's webmail domain>
Date: Fri, 3 Oct 2014 12:19:21 -0700
Subject: [PATCH] Added feature counts for 3 WebSocket streams

---
 www/css/index.css          | 13 +++++++++++++
 www/index.html             |  8 +++++++-
 www/js/spatialDashboard.js | 13 ++++++++++++-
 3 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/www/css/index.css b/www/css/index.css
index 92a57e2..38532c2 100644
--- a/www/css/index.css
+++ b/www/css/index.css
@@ -113,4 +113,17 @@ body {
 
 #map_canvas{
   height:100%;
+}
+
+#count-badges {
+  font-size: 75%;
+  position: absolute;
+  bottom: 25px;
+  right: 10px;
+  background-color: rgba(255,255,255,0.75);
+  padding: 5px 10px;
+}
+
+#count-badges .badge {
+  font-size: 75%;
 }
\ No newline at end of file
diff --git a/www/index.html b/www/index.html
index c41ac89..7a00629 100644
--- a/www/index.html
+++ b/www/index.html
@@ -58,7 +58,13 @@
 	</div>
 
 	<div class="container">
-	<div id="map_canvas"></div>
+    <div id="map_canvas"></div>
+    <div id="count-badges">
+      <p><b>Messages received</b></p>
+      <p><span id="shipcount" class="badge">0</span> Ships</p>
+      <p><span id="buscount" class="badge">0</span> Buses</p>
+      <p><span id="planecount" class="badge">0</span> Planes</p>
+    </div>
 	</div>
 </body>
 </html>
\ No newline at end of file
diff --git a/www/js/spatialDashboard.js b/www/js/spatialDashboard.js
index 4f495c5..041d6f2 100644
--- a/www/js/spatialDashboard.js
+++ b/www/js/spatialDashboard.js
@@ -4,6 +4,10 @@ function initialize() {
 		token : "b442e0b8ea9f85c1860ee85d8c6709d36ab40bb4"
 	});
 
+  var shipcount = document.getElementById('shipcount');
+  var buscount = document.getElementById('buscount');
+  var planecount = document.getElementById('planecount');
+  
 	var myLatlng = new google.maps.LatLng(37.7850,-122.4183);
 
 	var myOptions = {
@@ -59,6 +63,9 @@ function initialize() {
 			}
 			*/
 
+      
+      shipcount.textContent = parseInt(shipcount.textContent) + 1;
+      
 			var data = evt.data;
 			dataObj = eval('(' + eval('(' + data + ')').ws_publisher_content + ')');
 			// document.getElementById('container').innerHTML = dataObj['latitude'];
@@ -123,7 +130,9 @@ function initialize() {
 			"speed": "0.0"
 			}
 			*/
-
+      
+      buscount.textContent = parseInt(buscount.textContent) + 1;
+      
 			var data = evt.data;
 			dataObj = eval('(' + eval('(' + data + ')').ws_publisher_content + ')');
 
@@ -172,6 +181,8 @@ function initialize() {
 			}
 			*/
 
+      planecount.textContent = parseInt(planecount.textContent) + 1;
+      
 			var data = evt.data;
 			dataObj = eval('(' + eval('(' + data + ')').ws_publisher_content + ')');