Skip to content

Instantly share code, notes, and snippets.

@jblanche

jblanche/Youtube Video

Created July 20, 2012 21:55
Show Gist options
  • Save jblanche/3153532 to your computer and use it in GitHub Desktop.
Save jblanche/3153532 to your computer and use it in GitHub Desktop.
Download ZIP
Arduino + Photoresistor + CSS backgrounds
Raw
_photoresistor.js
var five = require('johnny-five'),
io = require('socket.io').listen(8080),
board, photoresistor;
board = new five.Board();
board.on("ready", function() {
// Create a new `photoresistor` hardware instance.
photoresistor = new five.Sensor({
pin: "A0"
});
// "read" get the current reading from the photoresistor
photoresistor.on("read", function( err, value ) {
board.emit('value', value);
});
});
io.sockets.on('connection', function (socket) {
board.on('value', function(val){
socket.emit('value', {val: val});
});
});
Raw
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test Arduino</title>
<style media="screen">
html, body{
min-height: 100%;
}
.twilight{
background-image: -webkit-linear-gradient(top, #101926, #233368, #2a3e7d, #2b3f7e, #203579);
background-image: -moz-linear-gradient(top, #101926, #233368, #2a3e7d, #2b3f7e, #203579);
background-image: -o-linear-gradient(top, #101926, #233368, #2a3e7d, #2b3f7e, #203579);
background-image: linear-gradient(to bottom, #101926, #233368, #2a3e7d, #2b3f7e, #203579);
}
.sunrise{
background-image: -webkit-linear-gradient(top, #8ea8c7, #a3a8bc, #c8a9a7, #f59e82, #fd8c6a);
background-image: -moz-linear-gradient(top, #8ea8c7, #a3a8bc, #c8a9a7, #f59e82, #fd8c6a);
background-image: -o-linear-gradient(top, #8ea8c7, #a3a8bc, #c8a9a7, #f59e82, #fd8c6a);
background-image: linear-gradient(to bottom, #8ea8c7, #a3a8bc, #c8a9a7, #f59e82, #fd8c6a);
}
.morning{
background-image: -webkit-linear-gradient(top, #91abca, #b0c4dd, #fafbff, #fefece, #fefdba);
background-image: -moz-linear-gradient(top, #91abca, #b0c4dd, #fafbff, #fefece, #fefdba);
background-image: -o-linear-gradient(top, #91abca, #b0c4dd, #fafbff, #fefece, #fefdba);
background-image: linear-gradient(to bottom, #91abca, #b0c4dd, #fafbff, #fefece, #fefdba);
}
.noon{
background-image: -webkit-linear-gradient(top, #4e70df, #567fe1, #6190e0, #76a3e4, #90b5ec);
background-image: -moz-linear-gradient(top, #4e70df, #567fe1, #6190e0, #76a3e4, #90b5ec);
background-image: -o-linear-gradient(top, #4e70df, #567fe1, #6190e0, #76a3e4, #90b5ec);
background-image: linear-gradient(to bottom, #4e70df, #567fe1, #6190e0, #76a3e4, #90b5ec);
}
</style>
<script src="http://localhost:8080/socket.io/socket.io.js"></script>
<script type="text/javascript">
socket = io.connect('http://localhost', {port: 8080});
socket.on('value', function(e){
var value = e.val;
var $body = document.querySelector('body');
console.log(value);
if(value < 200){
$body.classList.remove('twilight');
$body.classList.remove('sunrise');
$body.classList.remove('morning');
$body.classList.add('noon');
}
else if(value < 270){
$body.classList.remove('twilight');
$body.classList.remove('sunrise');
$body.classList.add('morning');
$body.classList.remove('noon');
}
else if(value < 350){
$body.classList.remove('twilight');
$body.classList.add('sunrise');
$body.classList.remove('morning');
$body.classList.remove('noon');
}
else if(value < 420){
$body.classList.add('twilight');
$body.classList.remove('sunrise');
$body.classList.remove('morning');
$body.classList.remove('noon');
}
});
</script>
</head>
<body class='twilight'>
</body>
</html>
Raw
Youtube Video
http://www.youtube.com/watch?v=uzksnnDIaQo
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment