Skip to content
A fast(?) fullscreen image-sequence player
JavaScript
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
examples
sequencer
.gitignore
LICENSE
README
package.json
rollup.config.js

README

Sequencer
A fast(?) fullscreen image-sequence player

--------------------------------------------------------------------------------
Demo:
    https://ertdfgcvb.xyz/p2/sm/play.html#2

--------------------------------------------------------------------------------
How to use:
    The minimum paramters are two filenames of an image sequence.
    The parser tries to figure out if there are leading zeroes:

    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',
    })

    All options:

    const opts = {
        canvas           : null,        // a valid canvas element
                                        // (will be created if null)
        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 laoding <- 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
    - 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
You can’t perform that action at this time.