Browse files

Basic functionality done

  • Loading branch information...
1 parent d4aab8f commit d16e787f1bf503f142d5234f531a089a31538b94 @rogchap committed Aug 22, 2011
View
73 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');
+});
View
73 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);
+ });
+ });
+
+});
+
View
21 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;
+}
View
46 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;
+}
View
69 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>
View
2 NodeDrawing/views/index.jade
@@ -1,2 +0,0 @@
-h1= title
-p Welcome to #{title}
View
6 NodeDrawing/views/layout.jade
@@ -1,6 +0,0 @@
-!!!
-html
- head
- title= title
- link(rel='stylesheet', href='/stylesheets/style.css')
- body!= body
View
68 NodeDrawing/views/mobile.html
@@ -0,0 +1,68 @@
+<!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" />
+ <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;"/>
+ <meta name="apple-mobile-web-app-capable" content="yes"/>
+ <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/mobile.css" type="text/css" media="screen" />
+ <script>
+ $(function(){
+
+ var codeInput = $('#codeInput');
+ var enterCode = $('#enterCode');
+ var codeNumber = $('#codenumber');
+
+ var socket = io.connect(location.host + "/mobile");
+
+ enterCode.click(function() {
+
+ var submitCode = codeInput.val();
+ if(submitCode != ''){
+
+ socket.emit('set code', submitCode, function(){
+
+ var sendTouchEvent = function(e) {
+
+ data = {
+ type:e.type,
+ coors:{
+ x: event.targetTouches[0].pageX/2,
+ y: event.targetTouches[0].pageY/2
+ }
+ };
+ socket.emit('touchEvent', data);
+ e.preventDefault();
+ };
+
+ $('.container').html('<h2>Connected<\/h2>');
+
+ document.addEventListener('touchstart', sendTouchEvent );
+ document.addEventListener('touchmove', sendTouchEvent );
+ document.addEventListener('touchend', sendTouchEvent );
+ });
+
+ }
+
+ });
+
+
+
+
+
+ socket.on('code', function(data){
+ codeNumber.text(data);
+ });
+
+ });
+ </script>
+</head>
+<body>
+ <div class="container">
+ <input id="codeInput" type="number" /><input type="button" id="enterCode" value="Enter" />
+ </div>
+</body>
+</html>

0 comments on commit d16e787

Please sign in to comment.