Skip to content

Instantly share code, notes, and snippets.

@jblanche

jblanche/Youtube Video

Created July 19, 2012 17:22
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jblanche/3145461 to your computer and use it in GitHub Desktop.
Save jblanche/3145461 to your computer and use it in GitHub Desktop.
Download ZIP
Arduino + WebSockets + CSS
Raw
button.js
var five = require("johnny-five"),
bumper, led,
board = new five.Board(),
io = require('socket.io').listen(8080);
io.sockets.on('connection', function (socket) {
board.on('on', function(){
socket.emit('on');
});
board.on('off', function(){
socket.emit('off');
});
});
board.on("ready", function() {
bumper = new five.Button(2);
led = new five.Led(8);
bumper.on("down", function() {
board.emit('on');
led.on();
}).on("up", function() {
board.emit('off');
led.off();
});
});
Raw
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test Arduino</title>
<style media="screen">
body{
background-color: black;
-webkit-transition: background-color, 0.4s ;
-moz-transition: background-color, 0.4s ;
-o-transition: background-color, 0.4s ;
transition: background-color, 0.4s ;
}
.on{
background-color: white;
}
</style>
<script src="http://localhost:8080/socket.io/socket.io.js"></script>
<script>
(function(){
var socket = io.connect('http://localhost', {port: 8080});
var on = function(){
document.querySelector('body').classList.add('on');
}
var off = function(){
document.querySelector('body').classList.remove('on');
}
socket.on('on', on);
socket.on('off', off);
})()
</script>
</head>
<body class='off'>
</body>
</html>
Raw
Youtube Video
http://www.youtube.com/watch?v=aYFOOr1amSg&feature=plcp
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment