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# 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.
The following three pieces of information are needed to display highlights:
Canvas URI - The URI of the page where the highlight will be displayedCoordinates (xywh) - The position and size of the highlight region (x, y, width, height)Text - The text associated with the highlight (displayed in the search panel)Sample Code# The following is a sample that highlights the opening passage “いつれの御時にか…” from The Tale of Genji in the National Diet Library Digital Collections.
< < < < ! h h / b / / D t e < < < < h o < < < b h O m a m m t s / e d d s s / o t C l d e e i t b # s a y i c c c } c } f } l c } s d m T > t t t y o m t d > v r r o ; o ) u e o ) c y l Y l a a l l d i y > i i n m c h ] n i s l w } w } w } ; n c } c } v c c ) i } t n i c c c i } ; r > > P a e e y r l i p p 設 s a a i , M s d e a i ] i , o , ハ c o ; o ) i o o ; f マ s f o o o f i E n c n > > a e d t t 定 t n n g { } i t : l n n i m c t , n a a a s r e イ t n ' ' ' w } r } n c p ; e n n i c ) v ニ h t n n n h u a p g h a M { d > = > パ i v h , r e g d d a a h d l l l i k n ラ i I s @ @ @ i , e ) 検 s o o w c s s d ( o ; i フ i ( s s s マ ( i n d t h = a m i o " s ラ c f a l x t a m ' c u o : n n u o l l l d s a イ o I t c i t t ' t s ' ' m r } o ) 索 t n s e o t t s n ' s c s e ェ g u h t t t ニ m g s d > t " r e r m r m r メ o e s i y e d i m t a w i v m w o o o e p b ト n I o d y h @ o o @ @ o e , n , パ t i r m = e 検 s w e a e w ス h n i フ a h u H m j s = a a - i c ー n s I g w x o r i e g s ' f a b : w w w B a l を F s n ' p i t t u i t t s ' c : ネ a e t . p s s > a 索 t i a n a e ト l s g s m m ェ n l b i l a e " d r v r = タ f t d h h t r a r d e : w e s n F C M a c e 追 a e t : e n y a r d y i o @ h ル d n i s a t e r 結 n r v r r の i u h t a a ス i i s g > " t v o g i a " i U : t : : を d a T : i s I a { u l a r e d 加 d S a e ' : p l c ' p v u t a c を d t o t n a a s c 果 s d c a c . 読 g b l a n n ト f g c h > = i r i e d h g r s 初 o d h [ n t d i l o x O C : す d e r x c : e : e : e a r y r a 右 A : n o i t r t h を e o h s h s み h s i t i i が e h r l " e n w o t l ' : ' ' 期 r o e ' { d I : l l s i p o る H a c t a { ' s ' t c p s n 側 c : r o e c a C 登 a w C I R t 込 t c g e f f 読 s t i i U w C : e r t = : h 3 い 化 V r m j o d N s e m e n f 関 i r h ' n ' : h : c : i e e : v に t ' e n h t o 録 r - o d e o み A r h e e み t A b g T p u r - p t [ 0 つ i - e a w : c a c : i n t a 数 g c R : v s i a o : ' a 追 i s ' . W = C e m c 1 m s r 完 d i t = s s 込 d e h F o s 0 v s { ' t 9 れ e v : ' - o v r z : r l h h e a c ' g h n n : h s 加 o e r d i o . p h ' p + p e 了 d b A t t み & d ( t - r t ; { i : h p 5 の w i , 1 c n i e f e o s l s ' s : s h i v o : { i I n a i i n v m c a A , a o . を e e d m s 完 & e ) s 8 t o e / t s , 御 e e ' ' o f g e a : t l e i A p h I A c l g a a ' g d r g s d i p o n c n n d 監 d d i = 了 d ; ( " " m p w w / t : 6 時 r w l , n i a n l r P , g P o t d n : i h s : ' c h = c h p o e a m i t i s i 視 = e r = し ! m > a i e u p / 9 に e i f g t : s f u a h I n t n L g l I A s n l + h t a w w n p o i s e s し = d a m た m = i c H d d r n s / 4 か = r g i . i e a e n t 形 s p + o a h i d n c t i M ' ' t I e i a n o n e p て m ) d s a ら a r o i d t " p : d , 女 ' h g c o t , l , e s 式 e : t y t g n : : g ' i , , c d r o n W n W a a ハ f i o t n ハ n t a n g i h > k / l 9 御 M , t . a n r s l ( の / a e s h + o p C h # r h を . n i i i r t イ a r r r a i イ i r d t h n : < g / . 7 更 i ' m n P u e : v レ = / t r . t t a o t x a ( 取 s W o n = n c c ラ l a e V t f ラ f u o e l g / . d n , 衣 r , a v o e , i ス i s i ' l s a i n . y d a 得 t i n d d h h イ s d t i e e イ e e r n i : 1 d c l d 2 あ a n a s , { e ポ { i e o , e . / t n t t w o d o n W o M o ' ( ト e o u e . s ト s ; V t g 0 i o . l 0 ま d i s i w ン i a n n m h i t e e h r d r d i w i w , s を ; r r w m t を t i = h 0 0 v m n . 5 た o f I t e ス f r L g a i o i n x = . A e o n I r I e 追 V n e a s 追 . e " t ; % > / d g 1 さ r e d i r を . c i t p g n n t t ' a c . w d d a d a 加 i ; r n [ 加 i w w ; m l o ' ふ . s , o , 構 i h s h ( h ' g A , d t g I o ) d , r e . i c s e i S } i . . , ら v t n 築 o ' t , ( l , ' s + d i e d w o c w s f o F r d a h r g j ひ i U : c , ' h i , T C o t s { r h e t e n e , t m e a o p 給 e r a a , i g e h o n S = [ . A r o s f t h p i d . / け w l ' n p g h x i m ) t i r c . r t i c c = l g o j a る e , f v i h t t g p ; a O d e t s e s g h o d e h r p p な r a a / l ' h a t b ] c i t . . i n e < t @ / i か ( r s s i , l n e j . e o o g m n f v / : 4 a / に { - I e g i i ( e c i n r e a g i i t . p i い r d a h + g o ) c o v ) e t n g c i 1 0 i i と i , r t h n ; t n e ; . S { i & . e t 0 . / i や g c , i t W . t S s t } f & c - l 0 0 i f む h h h n . i k e e u a ; e a w e v - i / こ t i / i d x n e n a b t s m n i > h a i 3 と ' g 1 n e y d y t r s e t a v d ; l f 4 な , h / d x w o s c c ( U n a t p / 3 き l c e , h w ( = h r ) r i s h } h 3 7 ゝ i o x , ( s = ( i ; l f I , a 4 6 は g n ) ' t = b ] e d . 3 8 ' h t w a e ; s , i 1 7 6 , t e = i t ' ( t n 5 6 / s x > n e s ( . c i / 8 c ) t d . e ) j o t d 6 a . ( o c a s n i i / n { j { w o r = o f a s m v s - m c > n i l t a a o 1 p h ) g - / n s n ' a ' { . s m i / ' , n { h c i f 2 , i i a r e 2 { o g l a s ' n h e d t , W l = o . i i 1 r j n g . . s d h 0 m o o t " i n w s > n ' s ) . , ) ; j . s f " i > n < d / ( s c r i p t > Code Explanation# 1. Configuration Parameters# c } o ; n m c h ] s a a i , t n n g { } i v h , c f a l x t o e s i y e n s I g w x f t d h h t i U : t : : g r s l ' : ' ' = : h 3 い t [ 0 つ { ' t 9 れ h p 5 の t s , 御 t : 6 時 p / 9 に s / 4 か : d , . / l 9 . / . 7 . d n , ' l d 2 , . l 0 n . 5 d g 1 l o ' . . , g j o p . / j a p p / i a / p i i i / i i f i / i 3 f 4 / 3 3 7 4 6 3 8 7 6 6 / 8 c 6 a / n m v a a n s i / f 2 e 2 s ' t , . j s o n ' ,
manifestUrl: The URL of the IIIF manifestcanvasId: The URI of the canvas where highlights will be displayedhighlights: An array of highlight information. Multiple highlights can be addedc } o ; n ' ' r } s @ @ e ) t c t s ' m r } o ) o y o @ o e , n , s n p u t t s ' c : e t e r y i o @ h a e ' c p v u t a c r x : e e a r y r a c t s ' t c p s n h ' ' : : i e e : v R : s o : ' a e c h n : h s s ' : i o : { i I p h A g a ' g d o t n h : ' c h n t n l A s n l + s p o i n c t i e : t g n : : g ' / a h o p C h # = / t t t a o t x i i s a i n . y { i o . t n t t w i n m i t e e h f L a o i n x = . i p n n t t ' i s ( ' g A , o t ( , ' s + / ' h , T a , i e h p g x i i h t g / l ' h s i , l e g i a h g r t h c , t h . / i x 1 n y / d w c e h o x , n ) t e = x > t . ( j { s o n ' ,
The key point is the on property, which specifies the highlight region in the format canvasURI#xywh=x,y,width,height.
3. Detecting Manifest Load Completion# l c } e o ) t n i c c c i } ; s f o o o f h t n n n h u a i ( s s s マ ( i n d g u h t t t ニ m g s d h n i フ a h u H l s g s m m ェ n l b i i u h t a a ス i i s g g b l a n n ト f g c h h s i t i i が e h r l t c g e f f 読 s t i i A r h e e み t A b g d i t = s s 込 d e h d b A t t み & d ( t e e d m s 完 & e ) s d d i = 了 d ; ( = e r = し ! m = d a m た m = i m ) d s a ら a r f i o t n ハ n t a a r r r a i イ i r d l a e V t f ラ f u o s d t i e e イ e e r e o u e . s ト s ; V ; r r w m t を t i V n e a s 追 . e i ; r n [ 加 i w e . i c s e w s f o F r e t e n e , r o s f t . r t i c c s e s g h o t . . i n o g m n f r e a g i e t n g . S { i & . s t } f & c u a ; e a b t s m n s e t a v c ( U n a r ) r i s i ; l f I b ] e d e ; s , ( t ( . c ) j o s n = o f > n i ) g { . { h i g h l i g h t s ) ; Since Mirador uses Redux, you can monitor state changes with store.subscribe(). Highlights are added when the manifest’s isFetching becomes false and json is present.
This ensures that highlights are added after the manifest has loaded, which is more reliable than using setTimeout.
4. Registering with Mirador# c } v c ) v o ) i o ; i n c p ; e n ' s c s e 検 s o o w 検 s w e a e w 索 t n s e 索 t i a n a e パ t i r 結 n r v r r ネ a e t . 果 s d c a c . ル d n i s を e o h s h s を d t o t 登 a w C I R t 追 A : n o 録 r - o d e o 加 c : r c 1 m s r t ' e h ' p + p e i s ' . A , a o . o e r d c n n d n a i i t i s i r g s i s e s = c h p o n e p h t a n W a a M ' ' t i r t i , , c = n c c r h d h h a ( M o ' ( d a i w , s o d r I e r d a d a . A d , r a c o c d t r h d i . A C o r c o n e t m ) c i p ; e o a i n n v ) i e ; o S n e W a i r n c d h o ( w ( ' w i n d o w - 1 ' , { The receiveSearch action is used to register the constructed response with Mirador.
Application Examples# Multiple Highlights# h ] i g { { { h l x x x i y y y g w w w h h h h t : : : s : ' ' ' 1 5 8 [ 0 0 0 0 0 0 , , , 2 6 9 0 0 0 0 0 0 , , , 3 2 1 0 0 5 0 0 0 , , , 4 3 2 0 0 5 0 0 0 ' ' ' , , , t t t e e e x x x t t t : : : ' ' ' 領 領 領 域 域 域 1 2 3 ' ' ' } } } , , ,
Fetching Data from an API# a } c a s o d y c c r } n d n o o e ) 使 s H c n n t x t ) 用 t i s s u y e ; 例 g f t t r w x h h u n h t i l n r d : : g i c e a d h g t s t a a a l h i p a t n n i t o o a n n g s n n = . o o h ( s a . . t m l e a n c t s i o w n o e r a = a o o x = a d i t r t d H a t a d , a o i w t i w r g a r i n a V h i e o a i i l t s n t t e i p s e w g f o . s l e h e n m , o r t t s a a , s c e p d F h . ( H c r ( j a i o o ` s n g n m / o n h f A a n o l i P p ( i g I i ) = g . ( / ; > h c c a t a a n ( s n n n { F v v o r a a t o s s a m I I t A d d i P , ) o I n ( h { s c i ? o g c n h a f l n i i v g g a . h s c t = a s $ n ) { v ; e a n s c I o d d ) e ; U R I C o m p o n e n t ( c a n v a s I d ) } ` ) ; Dynamic Generation from URL Parameters# The viewer.html in this repository receives highlight information from URL parameters and dynamically generates the viewer.
c c c c c o o o o o n n n n n s s s s s t t t t t p m c x t a a a y e r n n w x a i v h t m f a s e s = = s I = t d p p U a a n r = r r e l a a w p m m = a s s U r . . R p a g g L a m e e S r s t t e a . ( ( a m g ' ' r s e x t c . t y e h g ( w x P e ' h t a t c ' ' r ( a ) ) a ' n ; m m v s a a ( n s w i ' ' i f ) H n e ; i d s g o t h w ' l . ) i l ; g o h c t a ' t ; i o n . s e a r c h ) ; How to Obtain Coordinates# To obtain the coordinates (xywh) for highlight regions, the following methods are available:
IIIF Image API Region Specification - Measure coordinates with image editing softwareOCR Engine Output - Coordinate information included in OCR results from Tesseract, etc.Annotation Tools - Use IIIF-compatible annotation creation toolsMachine Learning Model Output - Bounding boxes from object detection modelsSummary# By utilizing Mirador’s receiveSearch action, arbitrary regions can be highlighted even for manifests that do not support the IIIF Search API. This method:
Is data source independent - Can use data obtained from APIs, files, databases, etc.Uses the same UI as Search API - Leverages Mirador’s standard search result display functionalitySupports multiple highlights - Multiple regions can be registered at once via arraysProvides reliable timing control - Detects manifest load completion via store.subscribe()File Structure# m ├ ├ ├ ├ └ i ─ ─ ─ ─ ─ r ─ ─ ─ ─ ─ a d R L C m d ├ └ o E I O i o ─ ─ r A C N r c ─ ─ - D E T a s h M N R d i v i E S I n i g . E B r d e h m U - e w l d T c x e i I u . r g N s h . h G t t h t . o m t / m m l m d - l h i g h l i g h t . m d # # # # # # # プ M コ こ G ハ M ロ I ン の i イ i ジ T ト ド t ラ r ェ ラ リ キ H イ a ク イ ビ ュ u ト d ト セ ュ メ b 生 o 説 ン ー ン 成 r 明 ス シ ト P フ ビ ョ a ォ ュ ン g ー ー ガ e ム ア イ s ド 用 Reference Links#