0xflotus / sequencer Goto Github PK

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
    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 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