Basic functionality done

NodeApi/app.js

@@ -1,38 +1,63 @@
-
-/**
- * Module dependencies.
- */
+// Module dependencies
 
 var express = require('express');
+var fs = require('fs');
+
+// Local variables
 
-var app = module.exports = express.createServer();
+var app;
 
-// Configuration
+// Boot functions
 
-app.configure(function(){
-  app.set('views', __dirname + '/views');
+function bootModels(app, next) {
+  fs.readdir(__dirname + '/models', function(err, files){
+    if(err) throw err;
+    files.forEach(function(file){
+      var name = file.replace('.js', '');
+      var model = __dirname + '/models' + name;
+      require(model)(app);
+      next();
+    });
+  });
+}
+
+function bootControllers(app, next) {
+  fs.readdir(app.path + '/controllers', function(err, files){
+    if(err) throw err;
+    files.forEach(function(file){
+      var name = file.replace('js', '');
+      var controller = __dirname + '/controllers' + name;
+    });
+  });
+}
+
+function bootApplication(app, next) {
+  app.set('views', app.path + '/views');
   app.set('view engine', 'jade');
   app.use(express.bodyParser());
   app.use(express.methodOverride());
   app.use(app.router);
-  app.use(express.static(__dirname + '/public'));
-});
-
-app.configure('development', function(){
-  app.use(express.errorHandler({ dumpExceptions: true, showStack: true })); 
-});
+  app.use(express.static(app.path + '/public'));
+  
+  bootModels(app, function() {
+    bootControllers(app, next);
+  });
+}
 
-app.configure('production', function(){
-  app.use(express.errorHandler()); 
-});
+// Initialize bootstrapping
 
-// Routes
+exports.boot = function(next){
+  app = express.createServer();
+  app.path = __dirname;
 
-app.get('/', function(req, res){
-  res.render('index', {
-    title: 'Express'
+  bootApplication(app, function() {
+    next(app);
   });
-});
+};
+
+// Start application
 
-app.listen(3000);
-console.log("Express server listening on port %d in %s mode", app.address().port, app.settings.env);
+exports.boot(function(app){
+  app.listen(3000);
+  console.log("Express server listening on port %d in %s mode", app.address().port, global.process.env.NODE_ENV || 'development');
+});

NodeDrawing/app.js

@@ -3,19 +3,28 @@
  * Module dependencies.
  */
 
-var express = require('express');
+var express = require('express'),
+	socketio = require('socket.io');
 
 var app = module.exports = express.createServer();
 
 // Configuration
 
 app.configure(function(){
   app.set('views', __dirname + '/views');
-  app.set('view engine', 'jade');
+  app.set('view options', {layout:false});
   app.use(express.bodyParser());
   app.use(express.methodOverride());
   app.use(app.router);
   app.use(express.static(__dirname + '/public'));
+
+  app.register('.html', {
+  	compile:function(str, options){
+  		return function(local){
+  			return str;
+  		};
+  	}
+  });
 });
 
 app.configure('development', function(){
@@ -29,10 +38,62 @@ app.configure('production', function(){
 // Routes
 
 app.get('/', function(req, res){
-  res.render('index', {
-    title: 'Express'
-  });
+
+	var ua = req.header('user-agent');
+	if(/mobile/i.test(ua)) {
+		res.render('mobile.html');
+	} else {
+		res.render('desktop.html');
+	}
 });
 
 app.listen(3000);
-console.log("Express server listening on port %d in %s mode", app.address().port, app.settings.env);
+console.log("Server listening on port %d in %s mode", app.address().port, app.settings.env);
+
+// private methods
+
+randomCodeNumber = function() {
+	return Math.round(Math.random() * 9000) + 1000;
+};
+
+// Sockets 
+
+var io = socketio.listen(app);
+
+var users = {};
+
+var desktop = io.of('/desktop');
+var mobile = io.of('/mobile');
+
+desktop.on('connection', function(client){
+
+	var code = randomCodeNumber();
+	users[code] = {'desktop':client, 'mobile':null};
+	client.emit('code', code);
+});
+
+mobile.on('connection', function(client){
+
+	client.on('set code', function(code, fn){
+
+		if (users[code]) {
+			console.log(code);
+			client.set('code', code, function(){
+				users[code].mobile = client;
+				users[code].desktop.emit('mobile connected');
+				if(fn) fn();
+			});
+
+		} else {
+
+		};
+	});
+
+	client.on('touchEvent', function(data){
+		client.get('code', function(err, code){
+			users[code].desktop.emit('touchEvent', data);
+		});
+	});
+
+});
+

NodeDrawing/public/stylesheets/mobile.css

@@ -0,0 +1,21 @@
+body{
+	margin: 0;
+  	font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
+  	background-color:#111122;
+  	color: white;
+}
+
+.container {
+	text-align: center;
+}
+
+input {
+	width: 280px;
+	margin-left:auto;
+	margin-right:auto;
+	height: 30px ;
+	font-size: 14pt;
+	display: block;
+	text-align: center;
+	margin-top: 10px;
+}

NodeDrawing/public/stylesheets/style.css

@@ -1,8 +1,46 @@
+html {
+	height: 100%;
+}
+
 body {
-  padding: 50px;
+  height: 100%;
+  margin: 0;
   font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
+  background-color:#111122;
+  color: white;
+}
+
+h2 {
+	margin-top: 0;
+}
+
+.container{
+	height: 100%;
+	width: 100%;
+	text-align: center;
 }
 
-a {
-  color: #00B7FF;
-}
+.canvaswrapper {
+		padding: 20px;
+}
+
+canvas {
+	width:600px;
+	height: 600px;
+	border: 1px solid black;
+	display: block;
+	margin-left: auto;
+	margin-right: auto;
+	margin-top: 20px;
+	background-color: #AEBDCC;
+}
+
+#codenumber {
+	font-size: 20pt;
+	font-weight: bold;
+	padding: 10px;
+	display: block;
+}
+#infoText {
+	height: 50px;
+}

NodeDrawing/views/desktop.html

@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en-gb">
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+	<title>Node Drawing</title>
+	<meta name="author" content="Roger Chapman" />
+	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js "></script>
+	<script src="/socket.io/socket.io.js"></script>
+	<link rel="stylesheet" href="/stylesheets/style.css" type="text/css" media="screen" />
+	<script type="text/javascript">
+		$(function(){
+			var socket = io.connect(location.host + "/desktop");
+			var codeNumber = $('#codenumber');
+			var infoText = $('#infoText');
+
+			var canvas = document.getElementById('sketchpad');
+			var context = canvas.getContext('2d');
+
+			var drawer = {
+			   isDrawing: false,
+			   touchstart: function(coors){
+			      context.beginPath();
+			      context.moveTo(coors.x, coors.y);
+			      this.isDrawing = true;
+			   },
+			   touchmove: function(coors){
+			      if (this.isDrawing) {
+			         context.lineTo(coors.x, coors.y);
+			         context.stroke();
+			      }
+			   },
+			   touchend: function(coors){
+			      if (this.isDrawing) {
+			         this.touchmove(coors);
+			         this.isDrawing = false;
+			      }
+			   }
+			};
+
+			socket.on('code', function(data){
+				codeNumber.text(data);
+			});
+
+			socket.on('mobile connected', function(){
+				infoText.html('<h3>Mobile connected<\/h3>Use your mobile\'s touch screen to draw in the space below:')
+			});
+
+			socket.on('touchEvent', function(data){
+				drawer[data.type](data.coors);
+			});
+
+		});
+	</script>
+</head>
+<body>
+	<div class="container">
+		<div class="canvaswrapper">
+			<div class="innerwrapper">
+				<h2>Welcome to Node Drawing</h2>
+				<div id="infoText">
+					Visit this site on your mobile (iPhone &amp; Android) and enter code:
+					<span id="codenumber">0000</span>
+				</div>
+				<canvas id="sketchpad"></canvas>
+			</div>
+		</div>
+	</div>
+</body>
+</html>