A javascript cycling through a list of images.
I use it to preview the last ~30-60 photos from my timelapse cam (without the need to build a video every minute).
Last active
October 25, 2015 14:16
-
-
Save gorbiz/6be308cc2818dc6eed86 to your computer and use it in GitHub Desktop.
Image cycler (part of time-lapse project)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| * * * * * ls -tr1 snaps/*.png | tail -n100 > recent-snaps.list |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title>image cycler</title> | |
| <style type="text/css"> | |
| body { margin: 0; } | |
| #snap { height: 100%; } | |
| </style> | |
| </head> | |
| <body> | |
| <img id="snap" alt="loading..." /> | |
| <script> | |
| getImages('recent-snaps.list', function(urls) { | |
| urls = urls.slice(0, 100); | |
| console.debug('gotImages'); | |
| preload(urls, function(imgs) { | |
| var i = 0; | |
| setInterval(function() { | |
| console.log(i); | |
| document.getElementById('snap').src = urls[i++]; | |
| if (i >= urls.length-1) i = 0; | |
| }, 50); | |
| }); | |
| }); | |
| function getImages(listUrl, next) { | |
| var r = new XMLHttpRequest(); | |
| r.open("GET", listUrl, true); | |
| r.onreadystatechange = function() { | |
| if (r.readyState != 4 || r.status != 200) return; | |
| next(r.responseText.split('\n')); | |
| } | |
| r.send(); | |
| } | |
| function preload(urls, next) { | |
| var n = urls.length - 1; | |
| var imgs = urls.map(function(url) { | |
| var img = new Image(); | |
| img.onload = function(x) { | |
| console.debug('loading... ' + n); | |
| if (--n == 0) return next(imgs); | |
| }; | |
| img.src = url; | |
| return img; | |
| }); | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment