From 570cef4b70aa168455f9986b97103e94e5418a84 Mon Sep 17 00:00:00 2001 From: David Bankier Date: Sun, 18 Mar 2012 20:42:30 +1100 Subject: [PATCH] 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 | 9 +++ app/Resources/socket.js | 4 + app/Resources/ui/StartScreen.js | 117 ++++++++++++++------------- server/app.js | 7 ++ server/public/javascript/main.js | 6 ++ server/public/stylesheets/custom.css | 11 ++- server/views/index.jade | 4 + 7 files changed, 101 insertions(+), 57 deletions(-) create mode 100644 app/Resources/api/Log.js diff --git a/app/Resources/api/Log.js b/app/Resources/api/Log.js new file mode 100644 index 00000000..634c7b3c --- /dev/null +++ b/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 + }); + } +}); + diff --git a/app/Resources/socket.js b/app/Resources/socket.js index db8b5af6..e1b8e0dd 100644 --- a/app/Resources/socket.js +++ b/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(); }); diff --git a/app/Resources/ui/StartScreen.js b/app/Resources/ui/StartScreen.js index 575e6e4b..472d1d52 100644 --- a/app/Resources/ui/StartScreen.js +++ b/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; }; diff --git a/server/app.js b/server/app.js index 96b499bf..88c2bf32 100644 --- a/server/app.js +++ b/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) { diff --git a/server/public/javascript/main.js b/server/public/javascript/main.js index 7ff40866..86a499f7 100644 --- a/server/public/javascript/main.js +++ b/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","
"); + var style = e.level === "ERROR" ? " error" : e.level === "WARN" ? "" : " success" + $(".console").prepend("
" + log + "
"); + }); TiShadow.socket = socket; }; diff --git a/server/public/stylesheets/custom.css b/server/public/stylesheets/custom.css index 81cf7ab5..dd0559e8 100644 --- a/server/public/stylesheets/custom.css +++ b/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 +} diff --git a/server/views/index.jade b/server/views/index.jade index 4b357705..d0f10aaf 100644 --- a/server/views/index.jade +++ b/server/views/index.jade @@ -12,4 +12,8 @@ .span3 h3 Devices ul.device_list + .row + .span12 + h3 Console + .console