FR: thumbnail strip with labels for pb-facsimile

[tuurma]

extend pb-facsimile reference strip feature with a way to specify a label for each of the thumbnails, like it is done in e.g. Ginzberg edition

[line-o]

Notes from our discusssion

• Vanilla JS example: https://www.ginzberg.ethz.ch/05_Vol_03_folder_01_001r.xml
• OSD plugin example: https://rrss.manuscripta.zrc-sazu.si/rrss_ms_002

Strip shows all facsimiles given to it

List of thumbnails

Communicates with OSD

Must allow to pass in additional metadata

Must be placeable at a different locations on the page

• Outside the actual facsimile view
• Below, over, left-of, right-of the view

The new custom-element <pb-facsimile-strip [base-uri=“{base}”]>

• communicates with <pb-facsimile base-uri=“{base}”>
• receives a list of <pb-facs-link> elements
• this can be through <pb-view> or other means (event-name TBD)
• emits and event when a thumbnail is clicked
• reads additional label information from the label slot in <pb-facs-link facs=“...”>some inline content<span slot=“label”></span></pb-facs-link>

We were looking at two use cases:

• A: 1:1 relationship page:facs - text changes each time a different thumbnail
• B: 1:n relationship page:facs - text changes only when clicked thumbnail is not part of current context

[tuurma]

Use cases:

Source of facsimiles and their labels

facs-strip as an overview: all facsimiles available in the current transcription fragment

• pb-view or pb-load with pb-facs-link elements serve as a source for facsimiles list for pb-facsimile and pb-facs-strip

• selecting a thumbnail from the strip emits an event to display the chosen image in the pb-facsimile; other views are not affected

• Each document in an edition may consist of one or more pages. Transcription presents the full text but user can switch between image pages via the thumbnail strip.*

facs-strip as edition navigation

• list of facsimiles comes from an api endpoint or an arbitrary pb-view/pb-load and may include links to facsimiles not referenced in the currently presented portion of the text
• selecting an image behaves like pb-link: refreshes the views without reloading the entire page

Let's imagine an edition organized in lengthy chapters (like Bible). The document view is organized with facing transcription/facsimile panels and page by page navigation. Nevertheless, to assist navigation, thumbnails strip with opening pages for each chapter is available at all times at the bottom.

Organization of the strip

• layout of the image tiles: horizontal vs vertical
• positioning of the label relative to the image: top, bottom (perhaps also right and left?)
• text-direction for the label: ltr, rtl (unless this can be styled from the outside)

css properties:

• label styles: font, color, size, horizontal and vertical alignment
• img: width and height

linking/events sent from the thumbnail

• pb-link like: do not reload the page but refresh the views
• only cause the pb-facsimile to update
• just an arbitrary link

other concerns

• avoid presenting duplicate thumbnails, even if there are multiple pb-facs-links for the same page (perhaps via a selector property on pb-facs-strip)
• some sort of limitation to prevent accidentally handling huge image sets?
• ideally removing the limitation that images can only come from a pb-view, perhaps do it via a selector:
  • source="api/thumbnails"
  • selector=".view .thumbs" (perhaps tricky as it would have to retrieve links from pb-view/pb-load's shadow dom

[JoernT]

may i suggest to name the component 'pb-facs-thumbs'? '-strip' is a bit underspecified IMO

[JoernT]

further i suggest to create some usage examples (along with possible attributes)- how will the element used on the page? This avoids confusion during development.

e.g.

<pb-facs>
    <pb-facs-strip slot="top"></pb-facs-strip>
</pb-facs>

or

<pb-facs id="my-facs">

</pb-facs>
 <pb-facs-strip viewer="my-facs"></pb-facs-strip>

i guess containment (first example) is more sensible and eases the positioning. However the positioning would be rather an enhancement to <pb-facs> providing appropriate slots (left, right, top, bottom) that a part of <pb-facs-strip.

Hope that makes sense

[line-o]

name the component 'pb-facs-thumbs'

Naming thing is hard, so we should think about a good name. I think your suggestion does make sense but I also think that strip as in comic-strip is well understood as a series of images.

I would think that thumbs is better if we want to add a grid view.

[line-o]

<pb-facs>
    <pb-facs-strip slot="top"></pb-facs-strip>
</pb-facs>

Very interesting suggestion @JoernT - I like it for easy placement. I believe the goal is to also be able to put the thumbnails view anywhere on the page. Definitely the pb-facs-strip can exist on a page of its own without a pb-facs-viewer as a means of navigating a text. @tuurma @wolfgangmm did I get that right?

[JoernT]

Even if contained in a slot it could be positioned anywhere with position=fixed.

And i agree that the components should at least be thought of as being independent of pb-facs

[tuurma]

Typical markup when the list of thumbnails is retrieved from the pb-view, so the same as the list that pb-facsimile gets

         <main>
            <pb-view id="view1" src="document1" 
               subscribe="transcription" emit="transcription" 
               wait-for="#facsimile #thumbnails"/>
            <pb-facsimile id="facsimile" base-uri="https://apps.existsolutions.com/cantaloupe/iiif/2/" 
               subscribe="transcription"/>
            <pb-image-strip id="thumbnails" base-uri="https://apps.existsolutions.com/cantaloupe/iiif/2/" 
               subscribe="transcription" emit="transcription"
               layout="horizontal" label-position="top"/>

         </main>

[tuurma]

Markup example when the list of thumbnails comes from an API endpoint and there's no facsimile viewer as such, thumbnails act as a navigation control

         <main>
            <pb-view id="view1" src="document1" 
               subscribe="transcription" emit="transcription" 
               wait-for="#facsimile"/>
            <pb-load id="references" source="api/thumbnails/{doc}" 
               auto="auto"
               load-once="load-once"
               emit="transcription"
               wait-for="#thumbnails"/>
            <pb-image-strip id="thumbnails"  
               base-uri="https://apps.existsolutions.com/cantaloupe/iiif/2/"
               emit="transcription"
               layout="horizontal" label-position="top"/>
         </main>

[tuurma]

Re naming @joern @juri, pb-facsimile already calls it reference-strip, following OpenSeaDragon's convention, so I'd perhaps keep it. It's more neutral than facsimile or thumbs.

[wolfgangmm]

pb-facs-strip reacts to the same events as pb-facsimile. Both components are independent, i.e. they can appear alone on a page and manage their own lists of facsimiles.

The existing code which causes pb-facsimile to scan for images upon pb-update event is removed!

Event handling

• pb-show-annotation: as before, is emitted by either pb-facs-link (on mouseover) or pb-facs-strip to select/display a specific facsimile
• pb-start-update: as before, emitted by pb-view and pb-load. When received by pb-facsimile or pb-facs-strip this should clear the current list of facsimiles. For example, this way we'll know when the user moves to another page.
• pb-load-facsimile: new event emitted by pb-facs-link. Causes pb-facsimile and pb-facs-strip to add the referenced image to their lists.

Backwards compatibility

Should not be an issue as we plug into existing events. Users should not notice the change. Just updating pb-components will switch them to the new event flow.

[juri]

Re naming @joern @juri, pb-facsimile already calls it reference-strip, following OpenSeaDragon's convention, so I'd perhaps keep it. It's more neutral than facsimile or thumbs.

Wrong Juri. Hi again, @line-o!

[line-o]

Moi @juri

[wolfgangmm]

Specify label on pb-facs-link, simple case:

<pb-facs-link facs="my-image.tif" label="Green Elephant">Page 14</pb-facs-link>

Complex case: use template to allow block-level content:

<pb-facs-link facs="my-image.tif">
    Page 14
    <template class="label">
        <h3><pb-link path="other-doc.xml">Green Elephant</pb-link></h3>
        <p>An image of a green elephant</p>
    </template>
</pb-facs-link>

[line-o]

@wolfgangmm I would assume that the image strip component also listens on pb-show-annotation events by others (say: click on a pb-facs-link) emitted on the channel its subscribed to in order to highlight the currently shown facsimile.

[line-o]

@wolfgangmm Very good schematic BTW. That makes it easier to reason about. We also haven't finished the discussion on how the image strip component is notified of the list of pb-facsimile-links that are present in a pb-view.

[line-o]

or is that with pb-load-facsimile?

[wolfgangmm]

@line-o yes, pb-facs-link emits pb-load-facsimile upon initialization to inform the pb-facsimile and/or pb-facs-strip about the existance of this image.

And also yes, pb-facs-strip could react to pb-show-annotation to highlight the current thumb.