Everythign is workinggit statusgit status (i think)

app.py

@@ -22,6 +22,10 @@ def index():
 def getImg(filename):
     return app.send_static_file('images/' + filename)
 
+@app.route('/data/facebank/<filename>/')
+def getData(filename):
+    return app.send_static_file('data/facebank/' + filename)
+
 @app.route('/dashboard/', methods=['GET'])
 def dashboard():
     if "command" in request.args:

static/css/mystyle.css

@@ -85,6 +85,9 @@ footer {
 
 #video{
 	background-color: blue;
+	background-image: url("../images/mitlogo.png");
+	background-repeat: no-repeat;
+	background-size: cover;
 	height: 100%;
 	width: 100%;
 	margin-left: 0px;

static/js/notificationEvents.js

@@ -1,53 +1,75 @@
-var recList = [{name:"Toscis", location:new google.maps.LatLng(42.363424, -71.099379)},
-                 {name:"Ben and Jerys", location:new google.maps.LatLng(42.348133, -71.084497)},
-                 {name:"JP Licks", location:new google.maps.LatLng(42.346997, -71.088657)}];
+var recList = [ {
+	name : "Toscis",
+	location : new google.maps.LatLng(42.363424, -71.099379)
+}, {
+	name : "Ben and Jerys",
+	location : new google.maps.LatLng(42.348133, -71.084497)
+}, {
+	name : "JP Licks",
+	location : new google.maps.LatLng(42.346997, -71.088657)
+} ];
 var count = 0;
-var recMarkerList= [];
+var recMarkerList = [];
 var currentNotification;
 var faceBank = {};
 
-function handleNotification(message){
+function handleNotification(message) {
 	activateDog()
 	if (message == "center") {
-    	moveMap("home");
-    } else if (message == "danger") {
+		moveMap("home");
+	} else if (message == "danger") {
 		// Alert to Danger!
-    	notif = createNotif("Warning", "You are nearing a high crime area!", "../images/warning64.png")
-    	activateNotif("notificationarea", notif)
-    } else if (message == "dropLocation") {
-    	index = count
-    	recMarkerList.push(apiDropMarker(recList[index]))
-
-    	if (count == recList.length - 1){
-    		count = 0; 
-    	} else{
-    		count = count + 1;	
-    	}
-    } else if (message == "removeMarkers") {
-    	setMapOnAll(null);
-    	recMarkerList= []
-    } else {// is a facedata from message!
-    	jsonstuff = JSON.parse(message); 
-    	addToFacebank(jsonstuff["data"][0], "", jsonstuff["data"][1])
+		notif = createNotification("Warning",
+				"You are nearing a high crime area!", "../images/warning64.png")
+		activateNotif("notificationarea", notif)
+	} else if (message == "dropLocation") {
+		index = count
+		recMarkerList.push(apiDropMarker(recList[index]))
+		notif = createNotification("Try this!",
+				"Mom thought you might be interested in some ice-cream!",
+				"../images/ice-cream.png")
+		activateNotif("notificationarea", notif)
+		if (count == recList.length - 1) {
+			count = 0;
+		} else {
+			count = count + 1;
+		}
+	} else if (message == "weather") {
+		index = count
+		notif = createNotification("Weather Alert!",
+				"Looking a little Rainy today!", "../images/cloud.png")
+		activateNotif("notificationarea", notif)
+	} else if (message == "removeMarkers") {
+		setMapOnAll(null);
+		recMarkerList = []
+	} else if (message == "removeFacebank") {
+		wipeFacebank();
+	} else {// is a facedata from message!
+		jsonstuff = JSON.parse(message);
+		addToFacebank(jsonstuff["data"][0], "", jsonstuff["data"][1])
+		displayFacebank()
 	}
 }
 
-function activateDog(){
-	document.getElementById("dog").src="../images/dogmoving.gif";
+function activateDog() {
+	document.getElementById("dog").src = "../images/dogmoving.gif";
 	window.setTimeout(deactivateDog, 5000);
 }
 
-function deactivateDog(){
-	document.getElementById("dog").src="../images/dogstatic.png";
+function deactivateDog() {
+	document.getElementById("dog").src = "../images/dogstatic.png";
 }
 
-function activateNotif(id, notifModel){
-	document.getElementById(id).appendChild(viewNotif(notifModel));
-	window.setTimeout(function(){deactivateNotif(id)}, 5000);
+function activateNotif(id, notifModel) {
+	console.log(id);
+	document.getElementById(id).innerHTML = viewNotif(notifModel);
+	window.setTimeout(function() {
+		deactivateNotif(id)
+	}, 10000);
 }
 
-function deactivateNotif(id){
-	document.getElementById(id).appendChild(emptyNotif);
+function deactivateNotif(id) {
+	document.getElementById(id).innerHTML = "";
 }
 
 /* 
@@ -62,51 +84,77 @@ function deactivateNotif(id){
 /*
  * Adds/updates a person to the faceBank
  */
-function addToFacebank(name, descripion, url){
-	switch(name) {
-    case "Andrew":
-    	descripion = "Northeastern Student"
-        break;
-    case "Mark":
-    	descripion = "Northeastern Student"
-        break;
-    case "Paul":
-    	descripion = "Northeastern Student"
-        break;
-    case "Nick":
-    	descripion = "Northeastern Student"
-        break;
-    case "Meg":
-    	descripion = "MIT Design student and Mentor"
-        break;
-    case "Federico":
-    	descripion = "Director of MIT Media Labs"
-        break;
-    default:
-    	descripion = "New Challenger!"
+function addToFacebank(name, descripion, url) {
+	switch (name) {
+	case "Andrew":
+		descripion = "Northeastern Student"
+		break;
+	case "Mark":
+		descripion = "Northeastern Student"
+		break;
+	case "Paul":
+		descripion = "Northeastern Student"
+		break;
+	case "Nick":
+		descripion = "Northeastern Student"
+		break;
+	case "Meg":
+		descripion = "MIT Design student and Mentor"
+		break;
+	case "Federico":
+		descripion = "Director of MIT Media Labs"
+		break;
+	default:
+		descripion = "New Challenger!"
 	}
 	faceBank[name] = createNotification(name, description, url);
 }
 
 /*
  * Creates and returns a notification object
  */
-function createNotification(title, description, url){
-	obj = {"title":title, 
-			"description": description,
-			"url": url}
-
+function createNotification(title, description, url) {
+	obj = {
+		"title" : title,
+		"description" : description,
+		"url" : url
+	}
+
 	return obj
 }
 
-function displayFacebank(){
-	faceBank.forEach(function(value, index, array){displayFace(value)})
+function displayFacebank() {
+	var fullString = "";
+	for ( var key in faceBank) {
+		fullString += viewNotif(faceBank[key])
+		document.getElementById("facebankContainer").innerHTML = fullString;
+	}
+}
+
+function wipeFacebank() {
+	faceBank = {};
+	document.getElementById("facebankContainer").innerHTML = "";
 }
 
 //TODO: Finish this function
-function viewNotif(notifModel)
-{
-	notifModel["title"],
-	notifModel["description"],
-	notifModel["url"]
+function viewNotif(notifModel) {
+	var notifView = "<div class=\"row notification\">\
+	<div class=\"col-md-3\">\
+		<div class=\"picture\">\
+			<img src="
+			+ notifModel["url"]
+			+ "></src>\
+		</div>\
+	</div>\
+	<div class=\"col-md-9 text_notifaction\">\
+		<strong>"
+			+ notifModel["title"]
+			+ "</strong><br> <span>"
+			+ notifModel["description"] + "</span>\
+	</div>\
+	</div>"
+
+	console.log(notifView)
+	return notifView
+
 }

templates/index.html

@@ -57,7 +57,7 @@
 		<!-- Uncomment to allow background video to be set -->
 		<img id="stream"
 			 src="http://192.168.1.9:88/cgi-bin/CGIStream.cgi?cmd=GetMJStream&usr=nuvision&pwd=nuvision"></img>
-		<img width="100%" src="{{ url_for('static', filename='images/mitlogo.png') }}">
+		<!-- <img width="100%" src="{{ url_for('static', filename='images/mitlogo.png') }}"> -->
 	</div>
 
 	<div class="container no-margin content full-height">
@@ -75,7 +75,7 @@
 				</div>
 
 				<div id="notificationarea">
-					<div class="row notification">
+					<!-- <div class="row notification">
 						<div class="col-md-3">
 							<div class="picture">
 								<div id="thepic">
@@ -86,7 +86,7 @@ <h3>Pic</h3>
 						<div class="col-md-9 text_notifaction">
 							<strong>User Name</strong><br> <span>info</span>
 						</div>
-					</div>
+					</div> -->
 				</div>
 				<div id="facebankContainer">