#IIIF Image Viewer

[musicEnfanthen]

Not being an real issue at the moment, but just to keep it in mind, and maybe as starting point for collecting ideas for the front end image viewer!

At Music Encoding Conference 2017 @ahankinson presented web-based #IIIF Image Viewer diva.js. Repo can be found here: http://ddmal.github.io/diva.js/

[mrivoal]

It looks nice. I especially like the book views. http://ddmal.github.io/diva.js/try/iiif-highlight-pages/# It also displays annotations but I wonder how it would handle several layers of it. Apparently, it doesn't combine overlapping annotations yet.

I think this is probably something Salsah 2.0 should provide.

[kilchenmann]

This could be useful in the text or book module which will be made by the NIE-INE team? What do you think @janCstoffregen or @sacha-alex?

[janCstoffregen]

This looks very nice, I will dive into it and see how we can integrate it, thank you for the hint!

[tobiasschweizer]

I have actually already added some logic to browse through the pages of a book, including reloading more data from the server:

src/app/view/modules/object/resource-object/resource-object.component.ts:

    /**
     * Gets the next or previous set of StillImageRepresentations from the server.
     *
     * @param {RequestStillImageRepresentations} request message sent from the child component requiring the loading of more incoming StillImageRepresentations.
     */
    changeOffsetForStillImageRepresentations(request: RequestStillImageRepresentations) {

        // TODO: implement negative offset change

        if (request.offsetChange === 1) {
            // get StillImageRepresentations for next page by increasing current offset
            this.getIncomingStillImageRepresentations(this.incomingStillImageRepresentationCurrentOffset + 1, request.whenLoadedCB);

        } else {
            console.log(`Illegal argument for changeOffsetForStillImageRepresentations, must either be -1 or 1, but ${request.offsetChange} given.`)
        }
    };

src/app/view/properties/still-image-osdviewer/still-image-osdviewer.component.ts

/**
     * Get the more images from the server by requesting the previous page of results for the current resource (decrease offset).
     */
    private gotoLeft() {

        // TODO: move left on this.images
        // TODO: if necessary, request more images from the server

        if (this.imageRangeStart - this.imageChangeInterval >= 0) {
            // this.images has more images to display
            this.imageRangeStart -= this.imageChangeInterval;
            this.imageRangeEnd -= this.imageChangeInterval;

            this.openImages();
            this.renderRegions();
        } else if (this.imageRangeStart > 0) {
            // fewer remaining images than interval, show remaining images
            this.imageRangeEnd -= this.imageRangeStart;
            this.imageRangeStart = 0;

            this.openImages();
            this.renderRegions();
        }
        {
            // this.images cannot display more images of length interval
            // request more images from the server using a negative offset

            // TODO: implement getting previous offset (also in parent component)
        }

    }

    /**
     * Get the more images from the server by requesting the next page of results for the current resource (increase offset).
     */
    private gotoRight() {

        if (this.imageRangeEnd < this.images.length - 1) {
            // this.images has more images to display

            if (this.imageRangeEnd + this.imageChangeInterval < this.images.length) {
                // the whole next interval can be displayed
                console.log(`display next interval`);

                this.imageRangeStart += this.imageChangeInterval;
                this.imageRangeEnd += this.imageChangeInterval;
            } else {
                console.log(`display remaining images`);
                // less than the interval can be displayed just display remaining images
                let remainingDiff = this.images.length - this.imageRangeEnd + 1;

                this.imageRangeStart += remainingDiff;
                this.imageRangeEnd += remainingDiff;

                // TODO: deactivate next button

            }

            this.openImages();
            this.renderRegions();

        } else if (this.images.length % environment.pagingLimit == 0) { // paging always returned full result lists, so there could be more data to fetch
            console.log(`request more images`);
            // this.images cannot display more images of length interval
            // request more images from the server using a positive offset

            // function called when parent component loaded new images
            let callback = (numberOfImages: number) => {

                if (numberOfImages >= this.imageChangeInterval) {
                    // more images were loaded than are actually to be displayed

                    this.imageRangeStart += this.imageChangeInterval;
                    this.imageRangeEnd += this.imageChangeInterval;

                    this.openImages();
                    this.renderRegions();
                } else if (numberOfImages > 0) {
                    // the amount of new images in less than the interval, show everything that can be shown

                    this.imageRangeStart += numberOfImages;
                    this.imageRangeEnd += numberOfImages;

                    this.openImages();
                    this.renderRegions();
                } else {
                    // no new images could be returned, display remaining images (there are fewer than this.imageChangeInterval)
                    let remainingImages: number = this.images.length - 1 - this.imageRangeEnd;

                    this.imageRangeStart += remainingImages;
                    this.imageRangeEnd += remainingImages;

                    // TODO: no new images can be loaded -> deactivate control in GUI (note that perhaps sufficient permissions were missing, so we actually cannot be sure that higher offsets still deliver images)

                    this.openImages();
                    this.renderRegions();

                }

            };

            let msg = new RequestStillImageRepresentations(1, callback);

            this.getImages.emit(msg);

        } else {
            // no more data to fetch
            // TODO: deactivate next button

        }
    }

[janCstoffregen]

This is also interesting for Reto, would you mind adding him to the dhlab in a way, @rfbaumgartner, he is working on a module for image representation.

[janCstoffregen]

Thank you for the code, I will try it out!

[tobiasschweizer]

what kind of membership is needed? I never know where to do that on github ...

[janCstoffregen]

That's a good question, I just wanted to mention him in this conversation, he did not show up as a suggestion, I'll see if he gets a notification from this chat, that was my concern. I don't really know which options there are either..