performant-software / digital-fauvel Goto Github PK

Options

• Annotations in mirador are displayed using the QTip jquery plugin
• Mirador now has several annotation strategies; SVG might be the right one for transcriptions.

Steps

• Storage: Manifest points to AnnotationList files
• AnnotationLists contain all annotations for a given folio page/canvas
• Annotations (per line): toggle between fragmentSelector and SVG selector
• SVG: get content from annotation resource, insert SVG into after , or
• When to update SVG: convert time, load time or render time?
• Render all annotations on load; with no qtip viewer

As seen in screenshots from the original version of the edition, the transcriptions/translations of the text from the facsimiles should be lineated and positioned so as to correspond to the lineation and position of the original Old French text visible on the page.

• All annotations shown by default on load
• No hover-triggered viewer
• No editor
• No borders on text, probably none on annotation, but yes on text region
• Text centered within the selector target
• Background color, opacity variable
• Lines long enough to show all of text
• Type optimized for legibility at middle sizes
• Resize with rectangle container
• Can be turned off globally, on globally
• Several sets, user can switch between

Time box for this: maximum of 4 hours (for research). I would not take this on until all other stories in the Edition Interface epic (#16) and the Search epic (#21) are complete.

We know this is not currently handled natively by Mirador, so it would likely be a plugin. Let me know when you're ready to start on this, and I can make contact, or help you make contact with some people who may be able to offer some guidance.

Note: No PRs for this first set up setup issues

How to test

1. Go to http://iip.textlab.org/?IIIF=fauvel/8.tiff/full/1000,/0/default.jpg. You should see the first image in the volume.
2. Then for the following filenames, substituted into the URL, you should see the other 94 or so images.

11.tiff
12.tiff
13.tiff
14.tiff
15.tiff
16.tiff
17.tiff
18.tiff
19.tiff
20.tiff
21.tiff
22.tiff
23.tiff
24.tiff
25.tiff
26.tiff
27.tiff
28.tiff
29.tiff
30.tiff
31.tiff
32.tiff
33.tiff
34.tiff
35.tiff
36.tiff
37.tiff
38.tiff
39.tiff
40.tiff
41.tiff
42.tiff
43.tiff
44.tiff
45.tiff
46.tiff
47.tiff
48.tiff
49.tiff
50.tiff
51.tiff
52.tiff
53.tiff
54.tiff
55.tiff
56.tiff
57.tiff
58.tiff
59.tiff
60.tiff
61.tiff
62.tiff
63.tiff
64.tiff
65.tiff
66.tiff
67.tiff
68.tiff
69.tiff
70.tiff
71.tiff
72.tiff
73.tiff
74.tiff
75.tiff
76.tiff
77.tiff
78.tiff
79.tiff
80.tiff
81.tiff
82.tiff
83.tiff
84.tiff
85.tiff
86.tiff
87.tiff
88.tiff
89.tiff
90.tiff
91.tiff
92.tiff
93.tiff
94.tiff
95.tiff
96.tiff
97.tiff
98.tiff
99.tiff
100.tiff
101.tiff
102.tiff
103.tiff
104.tiff
105.tiff

To be investigated.

It would be better if the reader could see more of the folio upon arriving at the search result page.

Initial drop cap from the first line of the text, in the default format for annotations in mirador:

[
    {
        "@context": "http://iiif.io/api/presentation/2/context.json",
        "@type": "oa:Annotation",
        "motivation": [
            "oa:commenting"
        ],
        "resource": [
            {
                "@type": "dctypes:Text",
                "format": "text/html",
                "chars": "<p>D</p>"
            }
        ],
        "on": [
            {
                "@type": "oa:SpecificResource",
                "full": "http://63f88934-ca67-4ed8-adc6-e0a3594c1d7a",
                "selector": {
                    "@type": "oa:Choice",
                    "default": {
                        "@type": "oa:FragmentSelector",
                        "value": "xywh=1694,1834,377,423"
                    },
                    "item": {
                        "@type": "oa:SvgSelector",
                        "value": "<svg xmlns='http://www.w3.org/2000/svg'><path xmlns=\"http://www.w3.org/2000/svg\" d=\"M2071.27072,1834.2779h-188.55749v0h-188.55749v211.61943v211.61943h188.55749h188.55749v-211.61943z\" data-paper-data=\"{&quot;strokeWidth&quot;:1,&quot;rotation&quot;:0,&quot;deleteIcon&quot;:null,&quot;rotationIcon&quot;:null,&quot;group&quot;:null,&quot;editable&quot;:true,&quot;annotation&quot;:null}\" id=\"rectangle_9b700062-5783-4d33-bc07-62bf967ddf5a\" fill-opacity=\"0\" fill=\"#00bfff\" fill-rule=\"nonzero\" stroke=\"#00bfff\" stroke-width=\"1\" stroke-linecap=\"butt\" stroke-linejoin=\"miter\" stroke-miterlimit=\"10\" stroke-dasharray=\"\" stroke-dashoffset=\"0\" font-family=\"none\" font-weight=\"none\" font-size=\"none\" text-anchor=\"none\" style=\"mix-blend-mode: normal\"/></svg>"
                    }
                },
                "within": {
                    "@id": "http://c7c6afc6-e63f-4df4-8b62-88e9c4bce58e",
                    "@type": "sc:Manifest"
                }
            }
        ],
        "@id": "35a34c1b-4e29-44c5-b7bc-b28d66c8df7e"
    }
]

Layout XML:

      <zone id="Te_0001-0034">
        <box id="Te_0001-0034" ulx="1690" uly="1827" lrx="2814" lry="5134">
        </box>
        <l n="1" pn="1" ulx="1690" uly="1827" lrx="2814" lry="1924"/>
        <l n="2" pn="2" ulx="1690" uly="1924" lrx="2814" lry="2021"/>
        <l n="3" pn="3" ulx="1690" uly="2021" lrx="2814" lry="2118"/>
        <l n="4" pn="4" ulx="1690" uly="2118" lrx="2814" lry="2215"/>
        <l n="5" pn="5" ulx="1690" uly="2215" lrx="2814" lry="2312"/>
        <l n="6" pn="6" ulx="1690" uly="2312" lrx="2814" lry="2409"/>
        <l n="7" pn="7" ulx="1690" uly="2409" lrx="2814" lry="2506"/>
        <l n="8" pn="8" ulx="1690" uly="2506" lrx="2814" lry="2603"/>
        <l n="9" pn="9" ulx="1690" uly="2603" lrx="2814" lry="2700"/>
        <l n="10" pn="10" ulx="1690" uly="2700" lrx="2814" lry="2797"/>
        <l n="11" pn="11" ulx="1690" uly="2797" lrx="2814" lry="2894"/>
        <l n="12" pn="12" ulx="1690" uly="2894" lrx="2814" lry="2991"/>
        <l n="13" pn="13" ulx="1690" uly="2991" lrx="2814" lry="3088"/>
        <l n="14" pn="14" ulx="1690" uly="3088" lrx="2814" lry="3185"/>
        <l n="15" pn="15" ulx="1690" uly="3185" lrx="2814" lry="3282"/>
        <l n="16" pn="16" ulx="1690" uly="3282" lrx="2814" lry="3379"/>
        <l n="17" pn="17" ulx="1690" uly="3379" lrx="2814" lry="3476"/>
        <l n="18" pn="18" ulx="1690" uly="3476" lrx="2814" lry="3573"/>
        <l n="19" pn="19" ulx="1690" uly="3573" lrx="2814" lry="3670"/>
        <l n="20" pn="20" ulx="1690" uly="3670" lrx="2814" lry="3767"/>
        <l n="21" pn="21" ulx="1690" uly="3767" lrx="2814" lry="3864"/>
        <l n="22" pn="22" ulx="1690" uly="3864" lrx="2814" lry="3961"/>
        <l n="23" pn="23" ulx="1690" uly="3961" lrx="2814" lry="4058"/>
        <l n="24" pn="24" ulx="1690" uly="4058" lrx="2814" lry="4155"/>
        <l n="25" pn="25" ulx="1690" uly="4155" lrx="2814" lry="4252"/>
        <l n="26" pn="26" ulx="1690" uly="4252" lrx="2814" lry="4349"/>
        <l n="27" pn="27" ulx="1690" uly="4349" lrx="2814" lry="4446"/>
        <l n="28" pn="28" ulx="1690" uly="4446" lrx="2814" lry="4543"/>
        <l n="29" pn="29" ulx="1690" uly="4543" lrx="2814" lry="4640"/>
        <l n="30" pn="30" ulx="1690" uly="4640" lrx="2814" lry="4737"/>
        <l n="31" pn="31" ulx="1690" uly="4737" lrx="2814" lry="4834"/>
        <l n="32" pn="32" ulx="1690" uly="4834" lrx="2814" lry="4931"/>
        <l n="33" pn="33" ulx="1690" uly="4931" lrx="2814" lry="5028"/>
        <l n="34" pn="34" ulx="1690" uly="5028" lrx="2814" lry="5125"/>
      </zone>

And original transcription for those lines:

      <lg id="Te_0001-0034">
        <l n="1" pn="1">
          <dc>D</dc>De Fauvel que tant voi torcher
        </l>
        <l n="2" pn="2">Doucement, sanz lui escorcher, </l>
        <l n="3" pn="3">Sui entrez en merencolie,</l>
        <l n="4" pn="4">Pour ce qu'est beste si polie. </l>
        <l n="5" pn="5">Souvent le voient en pointure </l>
        <l n="6" pn="6">Tex qui ne sevent sa figure : </l>
        <l n="7" pn="7">Moquerie, sens ou folie ?</l>
        <l n="8" pn="8">Et pour ce, sanz amphibolie, </l>
        <l n="9" pn="9">Clerement dirai de tel beste</l>
        <l n="10" pn="10">Ce qu'il m'en puet cheoir en teste.</l>
        <l n="11" pn="11">
          <dc>F</dc>Fauvel ne gist mes en l'estable,
        </l>
        <l n="12" pn="12">Il a meson plus honorable : </l>
        <l n="13" pn="13">Haute mengoere demande, </l>
        <l n="14" pn="14">Rastelier bel et assez vïande.</l>
        <l n="15" pn="15">Il s'est herbergiez en la sale, </l>
        <l n="16" pn="16">Pour miex demoustrer sa regale ; </l>
        <l n="17" pn="17">Et nonpourquant par sa scïence</l>
        <l n="18" pn="18">Es chambres a grant reverence, </l>
        <l n="19" pn="19">Et es gardes robes souvent</l>
        <l n="20" pn="20">Fait toust assembler son couvent, </l>
        <l n="21" pn="21">Qui si soingneusement le frote </l>
        <l n="22" pn="22">Qu'en lui ne peut remanoir crote. </l>
        <l n="23" pn="23">Fortune, contraire a Raison,</l>
        <l n="24" pn="24">L'a fet seigneur de sa meson :</l>
        <l n="25" pn="25">En lui essaucer met grant peine, </l>
        <l n="26" pn="26">Car ou palais roialle mainne ;</l>
        <l n="27" pn="27">De lui fere honorer ne cesse. </l>
        <l n="28" pn="28">Entour Fauvel a si grant presse</l>
        <l n="29" pn="29">De gens de toutes nacïons,</l>
        <l n="30" pn="30">Et de toutes condicïons</l>
        <l n="31" pn="31">Que c'est une trop grant meryeille : </l>
        <l n="32" pn="32">N'i a nul qui ne s'apareille</l>
        <l n="33" pn="33">De torcher Fauvel doucement ;</l>
        <l n="34" pn="34">Trop i a grant assemblement !</l>
      </lg>

How to test

1. Go to: http://projectmirador.org/demo/
2. Click the button at top left of the left hand image which appears like a 2x2 grid, as pictured here

3. Click "Replace Object"
4. Into the "Add new object from URL" field, at top right, paste: http://fauvel.archivengine.com/manifest.json
5. You should see: "Roman de Fauvel" appear at top of the list of manifests. Click any image to view it.
6. If that works, and you see 90-some odd images at bottom as thumbnails, all of which work too, this should be accepted.

Questions for Anna and/or Rebecca

Regarding manifest metadata:

• What should the "label" field contain?
• What should the "description" field contain be?
• What should the "attribution" field contain? Anna mentioned Gallica.
• What license should we use? This is the one the Bodleian Manifest Editor slots in by default: cc by. There are others, like cc by-nc-sa

Regarding per-image metadata:

• What should the "label" field contain? "Page 50" for 50.tiff, for example?
• Do we know of any other metadata fields we're going to want for sure on every image?
• Do we have that data in hand?

NB: These values can be left blank for now, and/or changed easily at a later date.

Transcriptions, translations, and layout metadata exist for the current edition.

1. LayoutXML.xml describes the regions on the canvases, via:

• A facsimile (whole MS)
• surfaces (per leaf, eg <surface id="1r">)
• zones per region on the canvas, (eg <zone id="Te_0001-0034">), which can include any number of:
  • Pages (eg <zone id="1r_p" ulx="0" uly="0" lrx="5250" lry="7350"> <graphic url="13.jpg"/> </zone>) containing the whole page
  • Motets (eg <zone id="1rMo1"> <box ulx="388" uly="798" lrx="1711" lry="6027"> </box> </zone>) each containing a motet, or musical phrase
  • Images (eg <zone id="1rIm1"> <box ulx="1659" uly="325" lrx="2971" lry="1816"> </box> </zone>), each containing a graphical representation
  • Text blocks (eg <zone id="Te_0001-0034">), each containing a set of lines of verse
• boxes (eg <box id="Te_0001-0034" ulx="1690" uly="1827" lrx="2814" lry="5134"> </box>) describing locations and dimensions of a box in a zone
• Lines (eg <l n="1" pn="1" ulx="1690" uly="1827" lrx="2814" lry="1924"/>), containing a line of verse.

2. OriginalTextXML.xml, EnglishXML.xml, and ModernFrenchXML.xml contain the transcription and translation content. Those contain, for example:

<pb facs="#1r" /> <!-- facsimile reference -->
1. <p xml:id="1rMo1_t">Motet : Favellandi vicium (PM 1) <!-- reference to a motet -->
2. <figure xml:id="1rIm1"> <!-- reference to an image -->
3. <lg xml:id="Te_0001-0034"> <!-- reference to a block of verses -->
4. <figure xml:id="1rIm2"> <!-- reference to an image -->
5. <p xml:id="1rMo2_t">Motet : Mundus a mundicia (PM 2) <!-- reference to a motet -->
6. <p xml:id="1rMo3_t">Motet : Quare fremuerunt (PM 3) <!-- reference to a motet -->

The task for this feature is to:

1. Determine how the mirador viewer can render this information in the desired way (product: more features for a future sprint)
2. Determine the destination schema for transforming all of this XML to a data format which that eventual mirador configuration can consume and render (product: sample schema)
3. Write a script to convert the XML into annotations in that format (product: code)
4. Convert the XML and add the output into the repo, so it can be used once Mirador is configured. (product: annotations, as JSON-LD, in flat files, in the repo).

We will implement a IIIF-compatible image server, to serve all existing facsimiles.

How to test

1. Go to http://fauvel.archivengine.com/
2. Peruse the facsimiles, of which there should be 96.
3. They should be laid out in a two-up book view, and be zoomable, pannable

In other words, viewing the book should be analgous to a real book in the sense that I see two facing pages at a time, and when I "turn the page", I see the next two pages at a time.

95 images total (11.psd through 105.psd inclusive).

How to test

• Wait for the Mirador instance to be set up, and an URL to be added here.
• Confirm that the list of images in #2 is visible in that mirador instance, and that it can be zoomed, panned, etc, as IIIF images can be in Mirador.
• Open Chrome Developer Tools (Command-Option-J in Chrome), choose Network tab, and open JS console below, and watch network traffic as you zoom, pan, etc, and confirm there are no JS errors, or Network errors as you do.

We will convert the LayoutXML and the Transcription and Translation XML contents into Web Annotation, compatible with the IIIF Presentation API.

The purpose of this will be to make it so that those transcriptions can be viewed on top of the IIIF canvases per-page, column, fragment, segment, leveraging the position and lineation data in those XML files.

There are several possible approaches to this, as detailed in some of the WA and IIIF Presentation API docs. Attaching transcriptions to images or Canvases is clearly supported, whereas rendering transcriptions on top of images, and controlling line height, is not, as far as I can tell.

This suggests that it might make sense to implement position/lineation functionality as a plugin.

Regardless, we will map all metadata fields and values, including page numbers, box positions, transcription bodies (note: multiple, per language), box target, line number, line position, to WA standard JSON-LD.

Transcriptions, translations, and layout metadata exist for the current edition.

1. LayoutXML.xml describes the regions on the canvases, via:

• A facsimile (whole MS)
• surfaces (per leaf, eg <surface id="1r">)
• zones per region on the canvas, (eg <zone id="Te_0001-0034">), which can include any number of:
  • Pages (eg <zone id="1r_p" ulx="0" uly="0" lrx="5250" lry="7350"> <graphic url="13.jpg"/> </zone>) containing the whole page
  • Motets (eg <zone id="1rMo1"> <box ulx="388" uly="798" lrx="1711" lry="6027"> </box> </zone>) each containing a motet, or musical phrase
  • Images (eg <zone id="1rIm1"> <box ulx="1659" uly="325" lrx="2971" lry="1816"> </box> </zone>), each containing a graphical representation
  • Text blocks (eg <zone id="Te_0001-0034">), each containing a set of lines of verse
• boxes (eg <box id="Te_0001-0034" ulx="1690" uly="1827" lrx="2814" lry="5134"> </box>) describing locations and dimensions of a box in a zone
• Lines (eg <l n="1" pn="1" ulx="1690" uly="1827" lrx="2814" lry="1924"/>), containing a line of verse.

2. OriginalTextXML.xml, EnglishXML.xml, and ModernFrenchXML.xml contain the transcription and translation content. Those contain, for example:

<pb facs="#1r" /> <!-- facsimile reference -->
1. <p xml:id="1rMo1_t">Motet : Favellandi vicium (PM 1) <!-- reference to a motet -->
2. <figure xml:id="1rIm1"> <!-- reference to an image -->
3. <lg xml:id="Te_0001-0034"> <!-- reference to a block of verses -->
4. <figure xml:id="1rIm2"> <!-- reference to an image -->
5. <p xml:id="1rMo2_t">Motet : Mundus a mundicia (PM 2) <!-- reference to a motet -->
6. <p xml:id="1rMo3_t">Motet : Quare fremuerunt (PM 3) <!-- reference to a motet -->

The task for this feature is to:

1. Determine how the mirador viewer can render this information in the desired way (product: more features for a future sprint)
2. Determine the destination schema for transforming all of this XML to a data format which that eventual mirador configuration can consume and render (product: sample schema)
3. Write a script to convert the XML into annotations in that format (product: code)
4. Convert the XML and add the output into the repo, so it can be used once Mirador is configured. (product: annotations, as JSON-LD, in flat files, in the repo).

Some resources on the IIIF APIs:

• http://iiif.io/api/image/2.1/#region
• http://iiif.io/api/presentation/2.1/#layer
• http://iiif.io/api/presentation/2.1/#segments
• http://iiif.io/api/presentation/2.1/#embedded-content
• https://groups.google.com/forum/#!topic/iiif-discuss/Qz2bt0WRwwI
• http://resources.digirati.com/iiif/an-introduction-to-iiif/

And some others:

• https://github.com/ProjectMirador/mirador/blob/develop/js/src/widgets/layersTab.js
• https://www.w3.org/TR/annotation-model/

Confirmed that this holds true:

• With different manifests within mirador installed on Fauvel staging site from our IIIF server
• With our manifest using the Project Mirador website demo install of the viewer
• With other manifests, from other servers, on both our install of the client, and other clients.

Other information

• There are at least three loading modes available (progressive, fade in, and tile); we should investigate to see which is preferable, and whether perceived performance is different.

TBD

• To what extent network speed, proximity are issues
• Whether server resources are issues
• Whether our conversion process for pyramidal images is an issue
• How mirador performs if/when images are bundled and/or served locally

• Will be forthcoming -- need to be integrated.
• Maybe new annotations -- can those be added via the mirador UI?

• Should be no black space between leaves
• Should be space above leaves and below nav
• Thumbnail list should not block leaves by default
• Image loading performance? [addressed in #31]
• UI control naming conventions
  • Remove "Scroll view"; "Image View"
• Keep "Gallery View", "Book View"
• Look into more full-fledged "Fauvel Locale"
• Label at top of viewer is too generic, ie "Roman de Fauvel", no matter what's in the viewer.

Create a two-up book opening interface to simulate perusal of the actual Roman de Fauvel. Facsimiles will be displayed using the Mirador viewer.

As a viewer, I want lines that extend past the annotation's rectangle object to either have their backdrop rectangle extend along with the text or to be truncated to fit within the line length; in the latter case, truncated text would show an ellipsis and expand (along with backdrop) upon hover.

Let's try: #dadad0

Full text search functionality will allow users to search all transcriptions and translations of the text. Results will include context and links to allow navigation to the originating page. Image metadata search is not included, but it will be possible to add that feature in a subsequent effort, within the same interface.

There is a IIIF Search API, but given that we are just using static JSON files, I think it might make sense to use lunr.js

Some examples/resources:

• http://ronallo.com/iiif-workshop/search/mirador-search.html
• http://ronallo.com/blog/closing-in-on-client-side-iiif-content-search/