Sequencer
A fast(?) fullscreen image-sequence player
--------------------------------------------------------------------------------
Demo:
https://sequencer.ertdfgcvb.xyz/#2
--------------------------------------------------------------------------------
How to use:
The minimum parameters are two filenames of an image sequence
or an array of filenames.
In the first case the parser tries to figure out the filename pattern:
const s1 = Sequencer.make({
from : 'pics/pig/DSC04701.JPG',
to : 'pics/pig/DSC04775.JPG',
})
...or just a plain numerical sequence:
const s2 = Sequencer.make({
from : 'pics/dog/1.png',
to : 'pics/dog/100.png',
})
...or with a provided list of filenames:
const s2 = Sequencer.make({
list : [
'1a.png',
'1b.png',
'2.png',
'3.PNG',
'4.jpg',
'img7.png',
'final.jpg'
]
})
All options:
const opts = {
canvas : null, // A valid canvas element
// (will be created if null)
list : [] // An array of paths
// to the images to load;
// as an alternative the three options
// 'from', 'to' and 'step' below
// can be used to fill the array
// programmatically
from : '1.jpg', // First file of the sequence
to : '10.jpg', // Last file of the sequence
step : 1, // Increment: to load only even images
// use 2, etc.
scaleMode : 'cover', // Can be: auto, cover, contain
// as in CSS3,
direction : 'x', // Can be: x, -x, y, -y
// and determines the pointer direction,
// applies only if playMode
// is drag or hover
playMode : 'drag', // Can be: none, drag, hover, auto
loop : 'loop', // Can be: loop, pong, none
interval : 10, // Interval in milliseconds
// between each frame,
// applies only if playMode is auto,
// if set to zero tries to update
// at every frame event
autoLoad : 'all', // Can be: all, first, none,
// if first or none is used the loading
// needs to be triggered manually
// with load().
fitFirstImage : false, // Resizes the canvas to the size of
// the first loaded image
// in the sequence
showLoadedImages : false, // Show images while loading
// the sequence, may be jumpy because
// of async loading <- not a typo
dragAmount : 10, // Distance (in pixels)
// to trigger nextImage(),
// can be < 1, but must be > 0
hiDPI : true, // Use hiDPI if present
imageLoad : function // Callback for each image load
queueComplete : function // Callback for queue complete
};
--------------------------------------------------------------------------------
Changelog:
3.0.1
- fix bug (last image not loaded)
- add makefile
3.0
- better parser
- remove utils.js
- use rollup.js for compression
- minified version is a module
2.1
- update to ECMAScript 2015 (aka ES6)
- script is now an ES6 module (may need transpiling for legacy support)
and loaded as such in the examples
2.0
- multiple instances
- better parser (automatic leading zeroes detection)
- canvas only (2d)
- incremental drag
- removed default loader (a custom one can be implemented via callback)
- cover frame
--------------------------------------------------------------------------------
Todo:
- remove 'loop' option (merge with playMode)
- area hovering
- accept an image array as parameter
- accept a spritesheet as parameter
- WebGL support
- better touch support
--------------------------------------------------------------------------------
Author:
Andreas Gysin
ertdfgcvb.xyz
