Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

FR: thumbnail strip with labels for pb-facsimile #85

Open
tuurma opened this issue Apr 6, 2022 · 18 comments
Open

FR: thumbnail strip with labels for pb-facsimile #85

tuurma opened this issue Apr 6, 2022 · 18 comments
Labels
enhancement New feature or request

Comments

@tuurma
Copy link
Member

tuurma commented Apr 6, 2022

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

image

@line-o
Copy link
Member

line-o commented Jan 12, 2023

Notes from our discusssion

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

@line-o line-o added the enhancement New feature or request label Jan 12, 2023
@tuurma
Copy link
Member Author

tuurma commented Jan 12, 2023

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
Copy link
Contributor

JoernT commented Jan 12, 2023

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

@JoernT
Copy link
Contributor

JoernT commented Jan 12, 2023

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
Copy link
Member

line-o commented Jan 12, 2023

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
Copy link
Member

line-o commented Jan 12, 2023

<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
Copy link
Contributor

JoernT commented Jan 12, 2023

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
Copy link
Member Author

tuurma commented Jan 16, 2023

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
Copy link
Member Author

tuurma commented Jan 16, 2023

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
Copy link
Member Author

tuurma commented Jan 17, 2023

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
Copy link
Member

wolfgangmm commented Jan 17, 2023

image

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

juri commented Jan 17, 2023

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
Copy link
Member

line-o commented Jan 17, 2023

Moi @juri

@wolfgangmm
Copy link
Member

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
Copy link
Member

line-o commented Jan 17, 2023

@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
Copy link
Member

line-o commented Jan 17, 2023

@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
Copy link
Member

line-o commented Jan 17, 2023

or is that with pb-load-facsimile?

@wolfgangmm
Copy link
Member

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

line-o added a commit that referenced this issue Jan 18, 2023
refs #85

- pb-image-strip can be slotted into pb-facsimile
- pb-facs-link emits 'pb-load-facsimile'
- both pb-facsimile and pb-image-strip listen on 'pb-load-facsimile'
- clicking on an image emits 'pb-show-annotation'
- add standalone demo
- add demo with pb-view
line-o added a commit that referenced this issue Jan 18, 2023
refs #85

- pb-image-strip can be slotted into pb-facsimile
- pb-facs-link emits 'pb-load-facsimile'
- both pb-facsimile and pb-image-strip listen on 'pb-load-facsimile'
- clicking on an image emits 'pb-show-annotation'
- add standalone demo
- add demo with pb-view
github-actions bot pushed a commit that referenced this issue Mar 16, 2023
# [2.1.0](v2.0.0...v2.1.0) (2023-03-16)

### Bug Fixes

* **pb-facs-link:** wait for pb-facsimile or pb-image-strip to be ready ([93da282](93da282))

### Features

* **pb-facsimile:** respect facs-link order ([8754768](8754768))
* **pb-image-strip:** reverse default order ([ea12409](ea12409))
* pb-facs-link, pb-image-strip ([f667176](f667176))
* ** pb-image-strip:** sort items by order ([d0baa51](d0baa51))
* **pb-image-strip:** add new component ([9143856](9143856)), closes [#85](#85)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

5 participants