stefek99/app.js

## readme.md

      
    Raw
  

              readme.md
            
          
    What is does?


Connect Makey Makey to Raspberry Pi
Run node.js on a computer with speakers
Open website connecting to serving that will receive sound via websocket

Thank you Code Club
http://codeclub-pi-hack.eventbrite.com/

  
## app.js
var app = require('express').createServer(), io = require('socket.io').listen(app);
var url = require("url");
globalsocket = "XXX";


io.set('log level', 1); // reduce logging
app.listen(3000);

app.get('/', function (req, res) {
  res.sendfile(__dirname + '/index.html');
});

app.get('/send', function (req, res) {
  res.sendfile(__dirname + '/index-send.html');
});

app.get('/cool', function (req, res) {
  res.sendfile(__dirname + '/index-get.html');
});

app.get("/sound", function(req, res) {
	console.log("GET /sound - what is my globalsocket - " + globalsocket.id);

	var url_parts = url.parse(req.url, true);
	var query = url_parts.query;

	if (globalsocket != "XXX") {
		console.log("GET /sound wysylam: " + query.name);
		io.sockets.emit('chat', { name: query.name });
	} else {
		console.log("NIE MA GLOBAL SOCKETU :(((");
	}

	res.end('Sound deployed\n');
});

io.sockets.on('connection', function (socket) {
	globalsocket = socket;

	console.log("[server] onConnection globalsocket.id: " + globalsocket.id)

	socket.emit('init', { message: '[initialized X]'});
	socket.on('chat', function (data) {
		console.log("[server] onChat")
		console.log(data);
		socket.broadcast.emit('chat', { name: data.name, text : data.text });
	});
});

## index-local.html
<html>
	<head>
		<title>index.html</title>
		<meta charset="utf-8">

		<style>
			#console > textarea {
				background: black;
				color: white;
				font-family: "Courier";
				width: 300px;
				height: 300px;
				float:left;
				outline: none;
				border: 5px dotted green;
			}
		</style>

		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>

		<script src="socket.io.js"></script>
		<script>
		  socket = io.connect('10.55.0.86:3000');

		  socket.on('init', function (data) {
		    log(data.message);
		  });

		  socket.on('chat', function (data) {
		    log("RECEIVED (LOCAL SOUND) => " + data.name);

		    var audio = new Audio('wavs/' + data.name + '.wav');
            audio.play();
		  });
		</script>


<script>
 	$(document).ready(function(){
 		$console = $("#console > textarea");
	});

	function log(text){
		$console.val($console.val() + text + "\n");
	}
</script>
	</head>

	<body>

		<div id="console">
			<textarea rows="5" cols="80"></textarea>
		</div>

	</body>
	</html>

## makey.html
<!DOCTYPE html>
    <head>
        <meta charset="utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
        <title>PiPlay</title>
        <meta name="description" content=""/>
        <meta name="viewport" content="width=device-width"/>
        <link rel="stylesheet" href="styles/main.css"/>
        <script src="scripts/vendor/modernizr.min.js"></script>
        <script src="scripts/vendor/jquery.min.js"></script>
        <script src="scripts/vendor/jquery-ui.js"></script>
        <script src="scripts/vendor/socket.io.js"></script>

        <script>
            var keys={space:32, left: 37, up: 38, right: 39, down: 40};

            history = new Array();
            previous = new Date().getTime();
            state = 1; // first player


            function sound(wav) {
                 $.ajax({
                  url: "http://10.55.0.86:3000/sound",
                  data: { name: wav },
                  success: function(x) {
                    console.log("SUCCESS " + x);
                  }
                });
            }


            $(function() {
                $(document).on("keydown", function(event) {

                    if (event.keyCode == keys.left) {
                        sound("wav1"); $("#zone3").toggleClass("green").toggleClass("green", 400); history.push(1);
                    } else if (event.keyCode == keys.right) {
                        sound("wav2"); $("#zone4").toggleClass("orange").toggleClass("orange", 400); history.push(2);
                    } else if (event.keyCode == keys.up) {
                        sound("wav3"); $("#zone1").toggleClass("pink").toggleClass("pink", 400); history.push(3);
                    } else if (event.keyCode == keys.down) {
                        sound("wav4"); $("#zone2").toggleClass("yellow").toggleClass("yellow", 400); history.push(4);
                    } else if (event.keyCode == keys.space) {
                        sound("next");
                        historySave = history;
                        history = new Array();
                        state = (state == 1) ? 2 : 1;
                    }


                    $("#zone1").click(function() {sound("wav3"); $("#zone1").toggleClass("pink").toggleClass("pink", 400); });
                    $("#zone2").click(function() {sound("wav4"); $("#zone2").toggleClass("yellow").toggleClass("yellow", 400); });
                    $("#zone3").click(function() {sound("wav1"); $("#zone3").toggleClass("green").toggleClass("green", 400); });
                    $("#zone4").click(function() {sound("wav2"); $("#zone4").toggleClass("orange").toggleClass("orange", 400); });


                })


            });

        </script>


    </head>
    <body>

<a class="zone" id="zone1"></a>
<a class="zone" id="zone2"></a>

<div class="cleaner"></div>

<a class="zone" id="zone3"></a>
<a class="zone" id="zone4"></a>

    </body>
</html>
	var app = require('express').createServer(), io = require('socket.io').listen(app);
	var url = require("url");
	globalsocket = "XXX";


	io.set('log level', 1); // reduce logging
	app.listen(3000);

	app.get('/', function (req, res) {
	res.sendfile(__dirname + '/index.html');
	});

	app.get('/send', function (req, res) {
	res.sendfile(__dirname + '/index-send.html');
	});

	app.get('/cool', function (req, res) {
	res.sendfile(__dirname + '/index-get.html');
	});

	app.get("/sound", function(req, res) {
	console.log("GET /sound - what is my globalsocket - " + globalsocket.id);

	var url_parts = url.parse(req.url, true);
	var query = url_parts.query;

	if (globalsocket != "XXX") {
	console.log("GET /sound wysylam: " + query.name);
	io.sockets.emit('chat', { name: query.name });
	} else {
	console.log("NIE MA GLOBAL SOCKETU :(((");
	}

	res.end('Sound deployed\n');
	});

	io.sockets.on('connection', function (socket) {
	globalsocket = socket;

	console.log("[server] onConnection globalsocket.id: " + globalsocket.id)

	socket.emit('init', { message: '[initialized X]'});
	socket.on('chat', function (data) {
	console.log("[server] onChat")
	console.log(data);
	socket.broadcast.emit('chat', { name: data.name, text : data.text });
	});
	});
	<html>
	<head>
	<title>index.html</title>
	<meta charset="utf-8">

	<style>
	#console > textarea {
	background: black;
	color: white;
	font-family: "Courier";
	width: 300px;
	height: 300px;
	float:left;
	outline: none;
	border: 5px dotted green;
	}
	</style>

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>

	<script src="socket.io.js"></script>
	<script>
	socket = io.connect('10.55.0.86:3000');

	socket.on('init', function (data) {
	log(data.message);
	});

	socket.on('chat', function (data) {
	log("RECEIVED (LOCAL SOUND) => " + data.name);

	var audio = new Audio('wavs/' + data.name + '.wav');
	audio.play();
	});
	</script>



	<script>
	$(document).ready(function(){
	$console = $("#console > textarea");
	});

	function log(text){
	$console.val($console.val() + text + "\n");
	}
	</script>
	</head>

	<body>

	<div id="console">
	<textarea rows="5" cols="80"></textarea>
	</div>

	</body>
	</html>
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
	<title>PiPlay</title>
	<meta name="description" content=""/>
	<meta name="viewport" content="width=device-width"/>
	<link rel="stylesheet" href="styles/main.css"/>
	<script src="scripts/vendor/modernizr.min.js"></script>
	<script src="scripts/vendor/jquery.min.js"></script>
	<script src="scripts/vendor/jquery-ui.js"></script>
	<script src="scripts/vendor/socket.io.js"></script>

	<script>
	var keys={space:32, left: 37, up: 38, right: 39, down: 40};

	history = new Array();
	previous = new Date().getTime();
	state = 1; // first player


	function sound(wav) {
	$.ajax({
	url: "http://10.55.0.86:3000/sound",
	data: { name: wav },
	success: function(x) {
	console.log("SUCCESS " + x);
	}
	});
	}



	$(function() {
	$(document).on("keydown", function(event) {

	if (event.keyCode == keys.left) {
	sound("wav1"); $("#zone3").toggleClass("green").toggleClass("green", 400); history.push(1);
	} else if (event.keyCode == keys.right) {
	sound("wav2"); $("#zone4").toggleClass("orange").toggleClass("orange", 400); history.push(2);
	} else if (event.keyCode == keys.up) {
	sound("wav3"); $("#zone1").toggleClass("pink").toggleClass("pink", 400); history.push(3);
	} else if (event.keyCode == keys.down) {
	sound("wav4"); $("#zone2").toggleClass("yellow").toggleClass("yellow", 400); history.push(4);
	} else if (event.keyCode == keys.space) {
	sound("next");
	historySave = history;
	history = new Array();
	state = (state == 1) ? 2 : 1;
	}


	$("#zone1").click(function() {sound("wav3"); $("#zone1").toggleClass("pink").toggleClass("pink", 400); });
	$("#zone2").click(function() {sound("wav4"); $("#zone2").toggleClass("yellow").toggleClass("yellow", 400); });
	$("#zone3").click(function() {sound("wav1"); $("#zone3").toggleClass("green").toggleClass("green", 400); });
	$("#zone4").click(function() {sound("wav2"); $("#zone4").toggleClass("orange").toggleClass("orange", 400); });



	})



	});

	</script>


	</head>
	<body>

	<a class="zone" id="zone1"></a>
	<a class="zone" id="zone2"></a>

	<div class="cleaner"></div>

	<a class="zone" id="zone3"></a>
	<a class="zone" id="zone4"></a>

	</body>
	</html>