There’s a construction project going on behind my building. I’ve been amazed by how much progress they make every day. I always thought it would be interesting to do a time-lapse or set up a camera and take 2 pictures 24 hours apart and fade between them to show the progress they make in a day. For this assignment, I set up a USB camera pointed at the project connected to a web server. A cron job runs a shell script every minute to rename the last image taken with the timestamp and take a new picture named current.jpg. That way, you can always compare a 24-hour window by looking at current.jpg and hhmm.jpg (i.e. 0830.jpg at 8:30am). To make the comparison easy, I set up the web server with PHP to put the right image URL in the HTML and I used Javascript with jQuery to fade between the two images when the user moves the mouse up or down within the browser window.
Here’s the bash script to save the last picture as the time stamp and take a new one:
#!/bin/bash
# putImage uses imagesnap to pull image from iSight, no console output, waiting 5 seconds for
# camera, names the file withe the time and puts it in my user web root in the images folder.
cp /Users/matt/Sites/images/current.jpg /Users/matt/Sites/images/`date +%H%M`.jpg
/Users/matt/dev/imagesnap -d iSight -q -w 5 /Users/matt/Sites/images/current.jpg
To run that every minute I added this to my crontab:
*/1 * * * * /Users/matt/dev/putImage
This PHP code sets the image source to be in the format hhmm.jpg (The $newtime variable is set at the beginning of the page so that I can enhance the code down the line. Also, using indirection is a good practice anyway.):
<img src="images/<?php echo date(H, $newTime) . date(i, $newTime); ?>.jpg" alt="">
This jQuery Javascript code fades from the current image to the image from 24 hours ago:
jQuery(document).ready(function(){
$(document).mousemove(function(e){
$('#bg2').css({ opacity: (e.pageY/document.documentElement.scrollHeight)})
$('#caption2').css({ opacity: (e.pageY/document.documentElement.scrollHeight)})
$('#caption').css({ opacity: 1-(e.pageY/document.documentElement.scrollHeight)})
});
})
I started to work on making it work in a way so that you can “rewind” anywhere from 5 minutes to 24 hours and I also tried to set up the server to save a photo every hour that would not get overwritten so that someone could rewind n days (to the nearest hour). But I think there’s either a problem with the camera or the capture command I’m using so I need to work on that more. Also, the camera is really old and low quality. I would love to make the picture clearer. I also need to get it working in Firefox.
Link to project – Note: It works in Chrome or Safari only. There are also some intermittent focus/exposure problems with the camera. If you get a white or out-of-focus image, try refreshing in a minute and it’s usually fixed.