Published the Mirador 4 Version of mirador-sync-windows Repository

Overview In the following article, I introduced creating the Mirador 4(3) version of mirador-sync-windows. This time, I published the repository for this plugin, so this is a personal note. Repository It is available at the following link. https://github.com/nakamura196/mirador-sync-windows Demo Page You can try it at the following link. https://nakamura196.github.io/mirador-sync-windows/ The settings configured for publishing on GitHub Pages are as follows. webpack The following file was partially modified. https://github.com/nakamura196/mirador-sync-windows/blob/main/webpack.config.js Specifically, for publicPath, I set it to a relative path in the case of development. This addressed the issue caused by basePath. ...

June 27, 2024 · 3 min · Nakamura

Mirador 4 Plugin Development: Rotating Images at Arbitrary Angles

Overview I created a plugin for Mirador 4 that allows rotating images at arbitrary angles. https://github.com/nakamura196/mirador-rotation-plugin You can check the behavior at the following URL. https://nakamura196.github.io/mirador-rotation-plugin/ Background I had been developing this plugin for Mirador 3, but Mirador 4 was pre-released on 2024/3/15. https://github.com/ProjectMirador/mirador/releases/tag/v4.0.0.alpha-1 The latest version of Mirador 3, v3.3.0, was released in 2021, so the libraries it used had become outdated. With this update, development has become easier. ...

June 27, 2024 · 2 min · Nakamura

Publishing a Customized Mirador 4 as an npm Package

Overview I had the opportunity to publish a customized Mirador 4 as an npm package, so this is a memo of the process. Fork Fork the repository from the following official site. https://github.com/projectmirador/mirador The result looks like this: Create a Branch Clone and create a branch. g c g i d i t t m c i c l r h o a e n d c e o k r o h u t t t p - s b : / f / e g a i t t u h r u e b - . a c d o d m - / i n m a m k e a d m i u a r t a e 1 l 9 y 6 - / p m r i o r p a e d r o t r y The following output appears: ...

June 27, 2024 · 5 min · Nakamura

Examining Zoom, Scale, and Rotation Behavior in Mirador 4

Overview I needed to change the zoom, scale, and rotation behavior of Mirador 4, so this is a memo on how to make those changes. Setup Start Mirador 4 locally with the following commands. g c p p i d n n t p p m m m c i l r i s o a t n d a e o r r t h t t p s : / / g i t h u b . c o m / p r o j e c t m i r a d o r / m i r a d o r It starts on port 4444. ...

June 26, 2024 · 11 min · Nakamura

Verifying the Behavior of Mirador 2 Plugins

Overview I created a repository for verifying the behavior of Mirador 2 plugins. https://github.com/nakamura196/mirador2-plugins-demo You can try it from the following URL. https://nakamura196.github.io/mirador2-plugins-demo/ A working example with sample data is as follows. https://nakamura196.github.io/mirador2-plugins-demo/?manifest=https://nakamura196.github.io/mirador2-sync-windows/data/examples/org.json;https://nakamura196.github.io/mirador2-sync-windows/data/examples/inf.json The purpose of creating this repository was to verify the behavior of plugins developed for Mirador 2 in order to port them to Mirador 3. Plugins mirador-sync-windows The mirador-sync-windows plugin introduced in the following article is enabled. ...

June 25, 2024 · 1 min · Nakamura

Developing a Zoom Disable Plugin for Mirador 3 (4)

Overview I created a plugin for Mirador 3 (actually Mirador 4) that disables zoom operations. https://github.com/nakamura196/mirador-disable-zoom/ Here is a demo video. https://youtu.be/RN2V4b7IYoI You can try it at the following URL. https://nakamura196.github.io/mirador-disable-zoom/ This plugin is based on the following plugin created by UCLA Library for Mirador 2. https://github.com/UCLALibrary/mirador-disable-zoom This time, I will note some findings from developing this plugin. Specifying the Target The target property allows you to specify where to place the plugin button. In this case, by specifying WindowTopBarPluginArea, I was able to display the icon directly on the per-window bar. ...

June 23, 2024 · 6 min · Nakamura

Created an M3 Version of mirador-sync-windows

Overview In the following article, I introduced mirador-sync-windows, a plugin for Mirador 2. This time, I updated the above functionality for Mirador 3 (actually Mirador 4). The behavior is still somewhat unstable, but you can try it at the following link. https://mirador-sync-windows.vercel.app/ Deploying to Vercel Development was based on the Mirador 4-compatible branch of the mirador-image-tools plugin. https://github.com/ProjectMirador/mirador-image-tools/tree/mirador4-compat-clean The above project provides the following commands: { " } s c } r , i " " " " " " " " " " " " p b b b b b c l p s t t t t u u u u u l i r t e e e s i i i i i e n e a s s s " l l l l l a t p r t t t : d d d d d n " u t " : : " : : : : " : b " : c w { : d u e c : l : o a e m s j " i " v t " m d " s " e s " n e c n o " : " r s h N p r h p " : : m l O O m a " m : " i n D g : " m " - n l E r e r " N k m r t y _ u " " u N O d k f " E n : j n O D i d : N e D E r i V l " s b E _ r s " = i j t u _ E - u r n d n e i E N p - m c p e t s l N V p d m v t - d V = e e & w : = p s l & r l & a u d r i & u o - t m e o & b _ n p j c c d v d & r t m e o h " e u & m e c e s v " , l c c & s l n t e o t p - t e t " r p i c r s a , a m o - p f _ n w g e n r _ e e n - " & b " t w s r / , & p , e r e a w b c s s n c e p / r p k b a * c & m p c / & s a k e * r e c s r u r k l m n v - & i e m & b - b - o r u m d N & f i o e O & l o d = D d p e p E N / : e = r _ O l e n d o E D i s " e d N E b , v u V _ & e c = E & & l t p N & o i r V n p o o = r p m n d p m m e " u r n , c o - r t t d r u " i u f n , o c n t b i u M d i O n e l D m d U M o : L O / c E D d j _ U i s F L s O E t & R _ " & M F , A O n T R p = M m e A s T r = u n c n p j x s b u b n i a p l b x d e " l b , a e b s e l - d l i e b s " - , d l i b " , Based on the above commands, I modified the Vercel deployment settings as follows: ...

June 21, 2024 · 4 min · Nakamura

Trying Out mirador-sync-windows

Overview mirador-sync-windows is described as follows. https://github.com/UCLALibrary/mirador-sync-windows When comparing multiple nearly identical images, such as different spectral images of the same object, it is helpful to apply actions simultaneously across multiple windows. Here is a usage demo: https://youtu.be/Ls2zvJpSRlc Note that this is a plugin for Mirador 2, and the repository has been archived. This time, I created a repository for trying out mirador-sync-windows, so I will introduce it. Repository https://github.com/nakamura196/mirador2-sync-windows/ ...

June 19, 2024 · 1 min · Nakamura

Trying Mirador 2's Physical Document Ruler

Overview IIIF’s Linking to External Services includes Physical Dimensions. https://iiif.io/api/annex/services/#physical-dimensions It is described as follows. For digitized objects, it is often useful to know the physical dimensions of the object. When available, they allow a client to present a ruler, or other rendition of physical scale, to the user. For Mirador ver.2 and ver.3, the following plugins exist respectively. ver.2 https://github.com/dbmdz/mirador-plugins#physical-document-ruler ver.3 https://github.com/ubleipzig/mirador-ruler-plugin Unfortunately, I was unable to successfully introduce the ver.3 plugin. Therefore, I will explain how to use the Physical Document Ruler with Mirador 2. ...

August 29, 2023 · 5 min · Nakamura

Mirador 3 Plugin Development: Adding Vertical Text Support to the Text Overlay Plugin

Overview Text Overlay plugin for Mirador 3 is a Mirador 3 plugin that displays selectable text overlays based on OCR or transcription. https://github.com/dbmdz/mirador-textoverlay A demo page is available at the following link. https://mirador-textoverlay.netlify.app/ However, when trying to display vertical text such as Japanese, it didn’t display correctly, as shown below. So I forked the above repository and made it possible to display vertical text as well. The source code is published in the following repository. (I hope to consider a pull request in the future.) ...

August 22, 2023 · 9 min · Nakamura

Trying the mirador-annotations Plugin and SimpleAnnotationServer with Mirador 3

Overview mirador-annotations is a Mirador 3 plugin that adds annotation creation tools. https://github.com/ProjectMirador/mirador-annotations This time, I tried combining it with the following SimpleAnnotationServer, and this is a memorandum of the process. https://github.com/glenrobson/SimpleAnnotationServer Preparing SimpleAnnotationServer Follow the Getting Started guide below. https://github.com/glenrobson/SimpleAnnotationServer#getting-started When you access http://localhost:8888/index.html, the following screen is displayed. The endpoint appears to be http://localhost:8888/annotation/, which displays a list of registered annotations (initially empty). This endpoint will be used from Mirador 3. ...

August 18, 2023 · 15 min · Nakamura

Mirador 3 Plugin Development: Creating a Layer Slideshow

Overview I developed a Mirador 3 plugin that performs layer slideshows. https://youtu.be/r1ShHGqCs24 As described in the following article, I previously achieved this through customization of Mirador 2. The article below attempts a IIIF implementation of “Okiezu” (illustrated maps). https://nakamura196.hatenablog.com/entry/2020/08/14/073700 This time, I attempted to develop it as a Mirador 3 plugin. Repository https://github.com/nakamura196/mirador-layer-slideshow-plugin Demo Site https://nakamura196.github.io/mirador-layer-slideshow-plugin/ Summary There is much room for improvement, but I hope this serves as a useful reference. ...

August 3, 2023 · 1 min · Nakamura

Mirador 3 Plugin Development: Copying a Window

Overview I created a plugin for Mirador 3 that copies a window. Note that this functionality is already provided by the following plugin. https://github.com/ProjectMirador/mirador-plugin-demos Therefore, this plugin was created to learn the plugin development process. I hope this plugin serves as a useful reference from that perspective. Here is a screenshot. The source code is available here. https://github.com/nakamura196/mirador-copy-window-plugin The demo site is available here. https://nakamura196.github.io/mirador-copy-window-plugin/ Development Notes For developing this plugin, I first cloned the following repository and made modifications to it. ...

July 19, 2023 · 7 min · Nakamura

Zooming to Meet Viewport Constraints in Mirador 3

Overview To zoom to a specific area in Mirador 3, you can use the method described below. https://github.com/ProjectMirador/mirador/wiki/M3---Mirador-3-Frequently-Asked-Questions#q-how-do-i-change-the-view-of-an-image-to-zoom-to-a-certain-area Specifically, it looks like this. c } c } v } m o ; o ; a ) i n x y w h n x y r x y z ; r B s : : i e s : : : : o a o t d i t a o d x 1 1 t g b b c z z m o b 4 8 h h z o o t o o : r t o 2 3 : t o x x i o o I o x 0 1 : o T T o m m 1 n T , , 8 m o o n C C s z o 0 1 C Z Z e e / t o Z 0 1 e o o = n n a o o , 9 n o o t t b n m o 5 t m m M e e o c m e . . i r r x e t r x y r . . T . o = a x y o s = + + d , , Z t { o o o { b b r o r o o . m e x x a . . T T c w d o o t i i Z Z i d s o o o t p o o n h a m m s t . . . c w h u h i e p ( d i d a t g a c h h t t t e i / V o / i n 2 e ) , 2 w ; p o r t ( w i n d o w I d , { Internally, it appears that OpenSeadragon’s panTo and zoomTo are used. ...

July 11, 2023 · 10 min · Nakamura

Guide to the IIIF Mirador 2 Annotation Interface

Overview This article explains (part of) how to use the annotation interface in IIIF Mirador 2. Creating Rectangle Annotations https://www.youtube.com/watch?v=jny09nLZvLU Creating Path (Polygon) Annotations To finish an annotation, double-click. https://www.youtube.com/watch?v=4cM-6-rXL9M Editing Existing Annotations https://www.youtube.com/watch?v=HlE36inbgq4 Deleting Existing Annotations https://www.youtube.com/watch?v=STk2vjLc_-k Summary I hope this is helpful when creating annotations using IIIF Mirador 2.

June 21, 2023 · 1 min · Nakamura

Created an Image Comparison Tool Using Mirador 3

I created an image comparison tool using Mirador 3. The URL is as follows. https://ldas-jp.github.io/viewer/input/ The GitHub repository URL is as follows. https://github.com/ldas-jp/viewer Below is the input form. You specify the URLs of the IIIF manifest files and the Canvas URIs for the images you want to compare. You can check input examples by clicking the buttons under “Examples.” Clicking the “Open” button launches Mirador 3 as shown below. You can compare images based on the input information. ...

July 8, 2022 · 1 min · Nakamura

How to Add the mirador-image-tools Plugin to Mirador 3 and Bundle It into a Single JS File for Distribution

Overview As the title suggests, this article describes how to add plugins such as mirador-image-tools to Mirador 3 and bundle them into a single JS file for distribution. Due to my limited knowledge of JavaScript, there may be some inaccuracies. I would appreciate it if you could point out any mistakes. Goal The goal is to create an application like the one at the following URL by writing an HTML file as shown below. It uses Mirador 3 with the mirador-image-tools plugin enabled. ...

June 8, 2022 · 5 min · Nakamura

Fixing the GitHub Repository Demonstrating Mirador 3 Usage with Nuxt 2

I have been demonstrating an example of using Mirador 3 with Nuxt 2 in the following GitHub repository. https://github.com/nakamura196/nuxt-mirador However, I found that the above repository had an issue in the production environment. Specifically, Mirador’s display would break after page navigation. An issue was submitted: https://github.com/nakamura196/nuxt-mirador/issues/1 A pull request fixing the bug was also submitted for this issue. https://github.com/nakamura196/nuxt-mirador/pull/2 Specifically, as shown below, it was necessary to unmount in beforeDestroy. ...

May 1, 2022 · 1 min · Nakamura

How to Use the Omeka S Mirador Module

概要 Omeka SにMiradorビューアを追加するモジュールについて紹介します。 GitHubリポジトリは以下です。 github.com Mirador2と3の両方が利用可能です。また、各種プラグインを設定画面から追加することができます。この記事では、画像の回転や左右反転を可能にする「Imgae tools」プラグインを追加する方法を紹介します。 本モジュールを利用するには、Omeka SにIIIFサーバ機能を持たせるか、外部のマニフェストファイルを参照する必要があります。前者の導入方法については、別の記事で紹介予定です。 インストール 特に注意点はありません。 使用方法 モジュールのインストール後、以下に示す各サイトの設定画面において、Miradorの設定を行うことができます。 特に、「Mirador plugins for v3」において、プラグインの追加を行うことができます。画像の回転やフリップなどを可能にする「Image tools」プラグイン等を導入可能です。 導入後、以下のように当該プラグインが表示されます。 Omeka SでMirador 3を使用する際の参考になれば幸いです。

March 1, 2022 · 1 min · Nakamura

How to Enable Mirador 3 Image Tools (Image Rotation, etc.) by Default

概要 今回はMirador 3のimage tools(画像の回転など)を初期表示で有効にする方法について説明します。 デフォルトのMirador 3では、Mirador 2ではデフォルトの機能として提供されていた、画像の回転や明度・コントラスト・彩度の調整機能は提供されていません。 これを実現するためには、以下のimage toolsというプラグインを追加する必要があります。 github.com 以下、プラグインの導入方法と、設定方法について説明します。 導入方法 image toolsプラグインの導入方法としては、上記のページの他、以下のリポジトリが参考になります。 モダンなフロントエンドビルドシステム github.com vueでの導入方法 github.com Nuxt.jsでの導入方法 github.com 設定方法 各ウインドウに対して、以下の設定が利用できます。 設定値 タイプ 初期値 説明 imageToolsEnabled boolean false プラグインの表示を有効にする imageToolsOpen boolean false デフォルトでimage toolsを開く 例えば以下のページで、image toolsを初期表示で有効にした例をご確認いただけます。 https://github.com/nakamura196/mirador-integration-vue/blob/master/src/App.vue まとめ Mirador 3の導入の参考になりましたら幸いです。

September 16, 2021 · 1 min · Nakamura