Noodles, Poodles and More!

    openseadragonimagefilters

    1.0.0 • Public • Published

    OpenSeadragonImageFilters

    Adds a control to OpenSeadragon that enables the user to change the image via sliders based on provided filters. Default are; brightness, contrast, saturation and hue.

    Demo

    http://picturae.github.io/openseadragonselection/

    Usage:

    Include dist/openseadragonimagefilter.js after openseadragon add images for button in your open seadragon images folder or provide in options (not tested)

    Then init controls like so (where viewer is your OpenSeadragon Instance):

    viewer.imagefilters(options);

    options:

        showControl: true, //show button or not
        startOpen: false, //start viewer with ImageFilterTools open
        prefixUrl: null, //alternative location of images
        toolsLeft: null, //int for absolute positioning
        toolsTop: null, //int for absolute positioning
        toolsWidth: 180, //int width in pixels
        toolsHeight: 150, //int height in pixels
        class: null, //override standard styling, NB. you need to style everything
        navImages: { //images to use
            imagetools: {
                REST: 'imagetools_rest.png',
                GROUP: 'imagetools_grouphover.png',
                HOVER: 'imagetools_hover.png',
                DOWN: 'imagetools_pressed.png'
            }
        },
        filters: { //add filters here
            brightness: {
                min: -255,
                max: 255,
                callback: null,
                processor: function () {
                    var setTo = getElementValueAsFloat('osd-filter-brightness');
                    if (this.callback !== null) {
                        this.callback(setTo);
                    }
                    return OpenSeadragon.Filters.BRIGHTNESS(setTo);
                }
            },
            contrast: {
                min: 0,
                max: 5,
                value: 1,
                default_value: 1,
                step: 0.1,
                callback: null,
                processor: function () {
                    var setTo = getElementValueAsFloat('osd-filter-contrast');
                    if (this.callback !== null) {
                        this.callback(setTo);
                    }
                    return OpenSeadragon.Filters.CONTRAST(setTo);
                }
            }
        }

    Depends on:

    • openseadragon-filtering.js (https://github.com/usnistgov/OpenSeadragonFiltering)
    • openseadragon.js (http://openseadragon.github.io/)

    Development notes:

    • Checkout this project
    • Install bower dependencies via bower install (currently dependencies on caman and lodash)
    • Install npm dev dependencies via npm install
    • Edit code in /src
    • Use gulp watch to watch for changes and compile js in /dist
    • All depenencies except Openseadragon are compiled into one file dist/openseadragonimagefilter.js using gulp

    Install

    npm i openseadragonimagefilters

    DownloadsWeekly Downloads

    0

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    1.13 MB

    Total Files

    14

    Last publish

    Collaborators

    • cdekok