Mirador

Background Mirador is an IIIF-compatible image viewer that allows side-by-side comparison of multiple IIIF manifests. When displaying manifests published by multiple institutions in a single view, each window title shows the manifest’s label as-is. However, there are cases where you want to display a custom name as the window title for your own project. For example, when the manifest’s label is a long string containing individual volume information, but you want to display a short name indicating the collection. ...

This article explains how to use the Mirador viewer for displaying IIIF images. Reference Implementation The embedding approach is based on Stanford University Libraries’ Stanford Digital Repository. The viewer is embedded above bibliographic information, allowing metadata and images to be viewed on the same page. File Structure a ├ │ ├ │ └ p ─ ─ ─ p ─ ─ ─ s / p └ s └ . w u ─ r ─ e e b ─ c ─ n b l / v / i i c M . c n o i l / d m r o m e p a c i x o d a r . n o l a h e r d t n V o m t i r l s e / / w i e t r e . m t / s x # # # M E E i m n r b v a e i d d r o d o r i n n m v g e i n e c t w o e m v r p a o r n i e a n b t l e s e t t i n g s URL Parameters /mirador/index.html accepts the following URL parameters: ...

Introduction I developed a rotation plugin called “mirador-rotation” for the latest version of the IIIF viewer Mirador (Mirador 4) and published it on npm. This article explains the process from plugin development to publication, and the integration methods for actual use. Background With the major update from Mirador 3 to Mirador 4, the following changes were made: React 16 → React 18 Material-UI v4 → MUI v7 Many other dependency updates As a result, existing Mirador 3 plugins no longer work as-is. ...

Background mirador-annotations is a plugin that adds annotation functionality to the IIIF viewer Mirador. The previous project had the following configuration: Build tool: nwb (Create React App based) UI library: Material-UI v4 Mirador: 3.x React: 17.x However, the following problems were occurring: nwb maintenance stopped - nwb has not been updated for a long time, causing frequent dependency conflicts npm install failures - Old dependencies made setup in new environments difficult Security vulnerabilities - Numerous vulnerability warnings in old packages To resolve these issues, we decided to migrate to: ...

Overview The following features have been added to mirador-rotation-plugin: 90-degree rotation buttons Manifest and rotation angle specification via URL parameters UI improvements (reset button icon change) Help feature (dialog explaining how to use) New Feature Details 1. 90-Degree Rotation Buttons Previously only a 1-degree increment slider was available, but buttons for quick 90-degree rotation have been added. Implementation Details The following changes were made to src/plugins/MiradorRotation.js: i i c } m m o ; p p n c u o o 9 s o p r r 0 t n d t t 度 s a 回 h t t R R 転 a e o o の n n V t t ハ d e i a a ン l w e t t ド e R w e e ラ R o p L R ー o t o e i t a r f g a t t t h t i ( I t e o w c I 9 n i o c 0 n n o = d n = o f r w r f ( o I o r d t d m o i a , m r t ' e i { @ ' c o m @ t n r u m i o i u o + t / i n a i / ) ( t c i d i o c = i o n o > r n s n e : - s { c m - t n a m i e t a o w e t n R r e o i r t a i a l a 9 t / l 0 i R ) o R ; n t o a t } t a ) e t ; L e e R f i t g ' h ; t ' ; Two buttons were added to the UI: ...

Introduction The IIIF viewer Mirador has a search feature that can highlight search results for manifests that support the IIIF Search API. However, there are cases where you want to highlight arbitrary regions even for manifests that do not support the Search API. This article introduces a method for achieving highlight display based on annotation information from external data sources, using Mirador’s internal API. Demo Highlight Generator Form - Generate highlights from a form Use Cases Highlighting text regions extracted by a custom OCR system Displaying regions of objects detected by machine learning Visualizing annotations stored in an external database Displaying search results for IIIF servers that do not support the Search API Implementation Basic Mechanism Mirador uses Redux internally, and search results can be registered through the receiveSearch action. By passing JSON in IIIF Search API format to this action, you can display highlights from arbitrary data sources. ...

Introduction I implemented functionality in Mirador, a widely used IIIF (International Image Interoperability Framework) viewer, to meet the following requirements: Display the canvas (page) specified by URL parameters on initial load Highlight search terms within the specified canvas This article shares the approach and implementation method for achieving these requirements. Exploring Approaches defaultSearchQuery Option In Mirador 4, you can automatically execute a search at initialization by specifying the defaultSearchQuery option in the window settings: ...

Overview This article explains the implementation for dynamically specifying the viewingDirection of the Mirador viewer via URL parameters. This feature allows the same manifest to be displayed left-to-right or right-to-left. Implementation 1. Retrieving URL Parameters Retrieve the viewingDirection parameter from the URL and set a default value: c c o o n n G s s e t t t u v v r i i l e e P w w a i i r n n a g g m D s i d r i = e r c e n t c e i t w o i n o U n R = L f S u r e r o a l m r P c a U h r R P a L a m r s p a . a m g r s e a ( t m w ( e i ' t n v e d i r o e s w w . i l n o g c D a i t r i e o c n t . i s o e n a ' r ) c h ; ' r i g h t - t o - l e f t ' ; In this implementation, when no parameter is specified, 'right-to-left' is used as the default. ...

Overview I built a tool for adding polygon annotations to IIIF images. https://next-fb-anno.vercel.app/ This article explains this tool. Usage Below is the top page. Enter the URL of a IIIF manifest file. You can also try it using the “Use sample input” option. It uses “Hyakki Yako-zu” (Night Parade of One Hundred Demons) from the University of Tokyo General Library collection. The following annotation registration screen is displayed. ...

Overview I enabled initial angle settings in the Mirador 4 plugin for rotating images at arbitrary angles. The repository is here. https://github.com/nakamura196/mirador-rotation-plugin The demo page is here. You can rotate images with initial settings for angle and bounding box. https://nakamura196.github.io/mirador-rotation-plugin/ Background The following article explains this plugin. However, there was an issue where initial angle values could not be provided. As introduced in the following article, it appeared that Mirador 4’s standard functionality allows providing initial angle values. ...

Overview I introduce how to rotate images and specify regions on initial load in Mirador 4. Background As of March 2025, development of Mirador 4 is underway. The alpha version can be checked at the following link. https://github.com/ProjectMirador/mirador/releases This is probably a feature from Mirador 4, and the following FAQ describes the initial configuration method. https://github.com/ProjectMirador/mirador/wiki/Frequently-Asked-Questions#q-how-do-i-change-the-view-of-an-image-to-zoom-to-a-certain-area Specifically, as shown below, initial configuration was achieved by using initialViewerConfig. https://github.com/ProjectMirador/mirador/blob/main/__tests__/integration/mirador/mirador-configs/initial-viewer-config.js e } x ; p i w } o d i ] r : n c i } m , t d a n , a ' o n i t x y z n d m w v t h : : o i e i s a i u o f f r : s a m 9 7 y m e a a I l b 3 8 o : s u d [ d V n 4 2 u t l o { : i a , , 0 I t r e i n . d ' ' w l e 0 : { , h e N e 0 t r a d 0 ' t C v 7 h p o i t , t s n g o t : f a p / i t s s / g i p : i : o e / i n c / i { P i i f o f i . s y i h i f a t z . r i o h v o o a a n m r r : v d f a a ' o r r f r d t a a m r t r u - h t s b i m e o s u u t s m t t e s o o u . m m o ' l s r , o . g o o / k r m g a g / n o m i o a f d n e i s f t e s s / t o s b / j o e b c j t e / c 2 t 9 / 9 2 8 9 4 9 3 8 / 4 c 3 a ' n , v a s / c a n v a s - 4 7 1 7 4 8 9 2 ' , Application Building on the above, I tried the following initial configuration. ...

Overview I created a sample app that loads TEI/XML files, displays images with Mirador, and displays text with CETEIcean. You can try it from the following URL. Demo Site https://nakamura196.github.io/ceteicean-mirador/ Background I have previously developed applications that provide similar functionality. Implementation example using Next.js Implementation example using XSLT This time, I introduce an approach using only HTML and plain JavaScript. Target Data The target is the following Koui Genji Monogatari Text DB. ...

Overview I have been developing a Firebase-linked annotations plugin for Mirador 3. Previously, only Google account login functionality was provided, but I have now added email-based login functionality. Feature Introduction Below is the screen after pressing the login button. With email-based login, new account creation is possible. After login, user information is now displayed. Clicking the icon displays a logout button. Summary I hope this serves as a helpful reference for creating and sharing annotations using IIIF. ...

Overview This is a memo on the configuration for downloading annotations created with the mirador-annotations plugin in Mirador 3. https://mirador-annotations.vercel.app/ Background In the following article, I introduced how to register annotations with Google’s Firestore. To download the annotations registered there, the mirador-annotations plugin provides a download option, so I introduce that method here. Method The following is the source code of the demo page. By setting the exportLocalStorageAnnotations option to true, a download icon is displayed. ...

Overview I developed a Firestore adapter for the Mirador 3 mirador-annotations plugin, so this is a personal note. You can try it at the following link. https://mirador-annotations.vercel.app/ Background The Mirador 3 mirador-annotations plugin stores annotations in local storage by default. However, as introduced in the following article, you can save annotations to a different location by changing the adapter. So this time, I developed an adapter to save annotations to Google’s Firestore. ...

Overview I had the opportunity to implement parallel display of IIIF and TEI using XSLT, so this is a memo of the process. The results can be viewed at the following link. It uses the “Koui Genji Monogatari Text DB.” https://kouigenjimonogatari.github.io/xml/xsl/01.xml Background For visualizing TEI/XML, I had previously often used CETEICean, a JavaScript library for converting TEI XML to HTML and displaying it in browsers. These efforts enabled flexible development when combined with JavaScript frameworks. ...

Overview I had an opportunity to describe annotations using SVG in IIIF Presentation API v3, so here are my notes. Method By writing the following, I was able to display annotations using SVG: { } " " " " } " " } " ] @ i t l , r r , i c d y a " ] i e " } " } t { } o " p b n g q l , v e n : e e o " h u a " ] a " ] m " " " " " } " ] " ] " ] t " l n き t i b n l n s i t w h l , t , a , i e " : " e り s r e o " u o " " d y i e a " ] h { } n { } t { } x h : " つ " e l n A e n P : " p d i b n u n e t t " : ぼ : d " e t " e r : e t g e o " m " " " o " " " ] m " " " ] " t M { " S : " t : " o [ " h h l n [ b f i t t i t i s i t i : p a [ " t : r : v " : " t " e 1 n o d y a d y t { } " d y t { } : n h a { i { i h : " : " ] a r " p t " p e : " p e " / i t t [ b [ d t " : : " i m : e i : e m " " " " } " } : e m " " " " } " h / f t e u e t C 6 { l a " o " s i t m b , t [ " s i t m b , t t 1 e p m t d p a 6 4 [ " t " : n " : " d y o o " " a " " " } " : " d y o o " " " " ] " " a t 2 s : e i : n 4 9 : " h s h : " p t d t v r s t s h : " p t d i t f s , w h r p 7 t / n o b / 2 9 : t " " t " : e i y y a g o y e " " t " : e i y d y o e { } i e g : . " / t n y / a , 0 [ t I : t A [ " v " p l e u p l t v t A [ " v " " p r r d i e 0 , c " " 1 s , " p m p n " : a : e u t r e e y a p n " : a : : e m v " " " t g t / . r : E 2 " i s a [ : n h t " e " c " c p l : n h t " a i i t p h h " i 0 e x 7 , m : g / t " i { : " : e : t e u / t " i { " : t c d y r " t : i . a { a . a / e t t A o : " o " e t t A o h " e " p o : " i 1 t m 0 g / " 1 a p n n " { : " r : " 1 a p n n t " : " : e f : " f : i p . e i 2 t : n " T " S " : 2 t : n " t I : " i 6 h . 6 v l 0 / i 7 i / : e < " p : " 7 i / : p m " " : l 6 4 t i 2 e e . j i . o t x p h e S " . o t : a i [ h e 4 9 t o 8 c 1 p f 0 n 1 a " t > t c { v < 0 n 1 a " / g m t " " 2 9 p / 1 o O : e . . P 2 t c u 校 t i g s . P 2 t p / e a t I : , 0 : a 6 m r 6 g d 0 a 7 i o a 異 p f S v 0 a 7 i a 1 " g p m / p / m g 2 " l . g . o m l 源 : i e g . g . o i 2 , e s a " / i a o a 8 , . 1 e 0 n m B 氏 / c l 1 e 0 n n 7 / : g l 1 / p n n 1 i : " . " e o 物 / R e x : " . " t . j / e e 2 p i s i 6 t 6 , 0 , n d 語 1 e c m 6 , 0 , i 0 p / S v 7 r / . z / c 2 . t y 2 s t l 2 . n . e i e e . e i o a a . 8 1 i " p 7 o o n 8 1 g 0 g i r l 0 s i r t p u 1 : n , . . u r s 1 : " . " i v 2 . e i g i i - 6 6 g 2 0 r " = 6 6 , 1 , f i " 0 n f / o / t / 2 " 1 . c , ' / 2 : . c . t / l n i o a 8 , 0 e h a 8 6 d e 1 a 3 i " i k p 1 開 . " t p 1 2 l 2 : t / c i y i 6 始 1 , t i 6 8 . " 6 i 1 e f o / / 位 : p / / 1 i , 2 o 1 n / . i a 置 6 : i a 6 t 8 n s 3 a i p < 2 / i p / c 1 m e / c i i / 8 / i i a . 6 3 a s 1 . f / p 1 w f / p u / / n / 1 j / i > 6 w / i i - a c i b / p 3 i < / w 3 i / t p o f y c / / i p a . / i i o i n e / a i 1 f > p w 1 f i k / t s 4 n i 1 / < i 3 1 / i y i e t . v i / 3 a / . / 3 f o i x " 0 a f c / i o c / / . i t , / s / a 1 h i r a 1 3 a f . " / g n 1 r i g n 1 / c / j , p e v / e f / v / 1 . 3 s 1 n a c f / 2 a c 1 j / o " j s a = 3 0 s a / p 1 n , i / n \ / 0 / n i / 1 " / p v " 1 0 p v m i / , T 1 a h 1 / 1 a a i c I / s t / s / s g i a F a / t c v p / e f n F n p p a g a p " / v / n 1 : n ' g 1 , g a A o / / v > e / e s 0 s a / a < " p n / 0 " n d s p , a j p _ , n l / a g i 1 6 o . p t e / " 5 s n 1 h / T 8 / d " i I 7 1 l , x m F / " . m a F 0 , g l g / 1 o n e A / . s a 0 0 j = n 0 1 p \ n _ _ / " o 6 0 i h " 5 0 n t , 8 2 f t 7 3 o p / . : : 0 t n / 1 i d / / f l w 0 / j w 1 f p w _ u / . 0 l p w 0 l i 3 2 / d . 3 2 / o . 0 3 r t 0 4 g i , 3 / f / 7 2 " 0 6 0 , / 8 0 d 6 0 e / / f 3 s a 0 v u \ g l " \ t > " . 国 j 立 d p 国 = g 会 \ " 図 " , 書 M 館 2 デ 7 ジ 9 タ 8 ル , コ 1 レ 3 ク 0 シ 9 ョ c ン 0 < , / - a 3 > 4 で み 1 る 7 < , / - p 6 > 8 " 5 1 , - 1 0 2 c 0 , - 3 4 - 1 7 , - 5 1 - 5 1 , - 5 1 c - 3 4 , 0 - 5 1 , 1 7 - 5 1 , 5 1 c 3 4 , 3 4 5 1 , 6 8 5 1 , 1 0 2 z \ " i d = \ " p i n _ a b c \ " f i l l - o p a c i t y = \ " 0 . 5 \ " f i l l = \ " # F 3 A A 0 0 \ " s t r o k e = \ " # f 3 8 2 0 0 \ " / > < / s v g > " The display result is shown below: ...

Overview I have updated the Mirador repository with the Text Overlay plugin that supports vertical text. https://github.com/nakamura196/mirador-integration-textoverlay References The original Text Overlay plugin repository is below. https://github.com/dbmdz/mirador-textoverlay Demo You can check the behavior on the following page. https://nakamura196.github.io/mirador-integration-textoverlay/ Press the “Text visible” button in the upper right to display the text. If it remains in a loading state, try reloading the page. References The Text Overlay plugin was added to Mirador 3 using the method introduced in the following article. ...

Overview I prepared a demo page where you can try the Mirador 3 annotations plugin with an IIIF manifest specified via URL parameters. https://mirador-annotations.vercel.app/ By using the iiif-content or manifest parameter, you can target a specified IIIF manifest. https://mirador-annotations.vercel.app/?iiif-content=https://dl.ndl.go.jp/api/iiif/1301543/manifest.json This article is a memo about creating this demo page. Background There is an annotation plugin for Mirador 3 called mirador-annotations. https://github.com/ProjectMirador/mirador-annotations I introduced usage examples in the following article. A demo page is already available at the following link, but it does not provide the ability to specify an IIIF manifest file via URL parameters. ...

Overview These are notes on how to use Scroll View in Mirador 3. The following example uses “Kagoshima Seitoki no Uchi: The Battle at Takase River Crossing - Nozu’s Brigade Recaptures the Regimental Flag” (held by the National Diet Library). This IIIF manifest consists of three canvases (images), and in the default display mode (Single), images are shown one at a time. Our goal is to display all three connected together. ...