Introduced a log console to the webpage.

Now errors are displayed directly on the webpage
avoiding the alerts on every device that 
subsequently would need clearing.

The following functions are also now available for
custom logging to the webpage:
 * log.info()
 * log.error()
 * log.warn();
 * log.trace();
 * log.debug();

app/Resources/api/Log.js

@@ -0,0 +1,9 @@
+['info','error','debug','trace','warn'].forEach(function(level){
+  exports[level] = function(message) {
+    Ti.App.fireEvent("socket:log", {
+      level: level.toUpperCase(),
+      message: message
+    });
+  }
+});
+

app/Resources/socket.js

@@ -40,6 +40,10 @@ $(document).ready(function() {
 		});
 	});
 
+  Ti.App.addEventListener("socket:log", function(e) {
+    socket.emit("log", e);
+  });
+
 	Ti.App.addEventListener('socket:disconnect', function() {
 		io.disconnect();
 	});

app/Resources/ui/StartScreen.js

@@ -1,69 +1,74 @@
 /*globals, exports, require*/
 var LoginView = require('/ui/LoginView').LoginView;
 var Activity = require('/ui/Activity').Activity;
+var log = require('/api/Log');
 
 exports.StartScreen = function() {
-	var win = Ti.UI.createWindow({
-		backgroundColor : 'white',
-		exitOnClose : true
-	});
+  var win = Ti.UI.createWindow({
+    backgroundColor : 'white',
+    exitOnClose : true
+  });
 
-	var activity = new Activity("Connecting...");
+  var activity = new Activity("Connecting...");
 
-	var webview = Ti.UI.createWebView({
-		url : '/webview.html',
-		top : 0,
-		left : 0,
-		width : 1,
-		height : 1
-	});
-	win.add(webview);
+  var webview = Ti.UI.createWebView({
+    url : '/webview.html',
+    top : 0,
+    left : 0,
+    width : 1,
+    height : 1
+  });
+  win.add(webview);
 
-	var login = new LoginView();
-
-	login.addEventListener("connect", function(o) {
-		activity.show();
-		Ti.App.fireEvent('socket:connect', {
-			address : Ti.App.Properties.getString("address"),
-			name : Ti.Platform.osname + ", " + Ti.Platform.version + ", " + Ti.Platform.address
-		});
-	});
-	win.add(login);
+  var login = new LoginView();
 
-	var current;
-	Ti.App.addEventListener("message", function(message) {
-		try {
-			if(current && current.close !== undefined) {
-				current.close();
-			}
-			current = eval(message.code);
-			if(current && current.open !== undefined) {
-				current.open();
-			}
-		} catch (e) {
-			if(Ti.Platform.osname === 'android') {
-				alert(e.toString());
-			} else { //iOS Error
-				alert("Line: " + e.line + "\n" + e.message);
-			}
-		}
-	});
+  login.addEventListener("connect", function(o) {
+    activity.show();
+    Ti.App.fireEvent('socket:connect', {
+      address : Ti.App.Properties.getString("address"),
+      name : Ti.Platform.osname + ", " + Ti.Platform.version + ", " + Ti.Platform.address
+    });
+  });
+  win.add(login);
 
-	Ti.App.addEventListener("connected", function(o) {
-		activity.hide();
-		alert("Connected");
-		win.remove(login);
-	});
+  var current;
+  Ti.App.addEventListener("message", function(message) {
+    try {
+      if(current && current.close !== undefined) {
+        current.close();
+      }
+      current = eval(message.code);
+      if(current && current.open !== undefined) {
+        current.open();
+      }
+      log.info("Deployed");
+    } catch (e) {
+      var error_message;
+      if(Ti.Platform.osname === 'android') {
+        error_message = e.toString();
+      } else { //iOS Error
+        error_message = "Line " + e.line + ": " + e.message;
+      }
+      log.error(error_message);
+    }
+  });
 
-	Ti.App.addEventListener("connectfailed", function(o) {
-		activity.hide();
-		alert("Connect Failed");
-		win.add(login);
-	});
+  Ti.App.addEventListener("connected", function(o) {
+    activity.hide();
+    alert("Connected");
+    win.remove(login);
+  });
 
-	Ti.App.addEventListener("disconnected", function(o) {
-		alert("Disconnected");
-		win.add(login);
-	});
-	return win;
+  Ti.App.addEventListener("connectfailed", function(o) {
+    activity.hide();
+    alert("Connect Failed");
+    win.add(login);
+  });
+
+  Ti.App.addEventListener("disconnected", function(o) {
+    alert("Disconnected");
+    win.add(login);
+  });
+
+    return win;
 };

server/app.js

@@ -62,6 +62,13 @@ sio.sockets.on('connection', function(socket) {
       }
     });
   });
+
+  socket.on('log', function(data) {
+    socket.get("name", function(err, name) {
+      data.name = name;
+      sio.sockets.emit("device_log", data);
+    });
+  })
   // Disconnect
   socket.on('disconnect',function(data) {
     socket.get("host",function(err,host) {

server/public/javascript/main.js

@@ -10,6 +10,12 @@ TiShadow.init = function (session, guest){
   socket.on('device_disconnect', function(e){
     $("li#" + e.id).remove();
   });
+  socket.on('device_log', function(e) {
+    var now = new Date();
+    var log = now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds() + " [" + e.level + "] [" + e.name + "]    " + e.message.replace("\n","<br/>");
+    var style = e.level === "ERROR" ? " error" : e.level === "WARN" ? "" : " success"
+    $(".console").prepend("<div class='alert-message" + style + "'>" + log + "</div>");
+  });
   TiShadow.socket = socket;
 };
 

server/public/stylesheets/custom.css

@@ -36,7 +36,16 @@ li {
   font-size: 12px;
 }
 #editor {
-        position: absolute;
+        position: relative;
         width: 520px;
         height: 400px;
 }
+.console {
+  height: 150px;
+  overflow: auto;
+  background-color: #000;
+}
+
+.alert-message {
+  margin-bottom: 0px
+}

server/views/index.jade

@@ -12,4 +12,8 @@
     .span3
       h3 Devices 
         ul.device_list
+  .row
+    .span12
+      h3 Console
+      .console