Overview

The following features have been added to mirador-rotation-plugin:

  1. 90-degree rotation buttons
  2. Manifest and rotation angle specification via URL parameters
  3. UI improvements (reset button icon change)
  4. 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:

iic}mmo;ppncuoo9soprr0tndttsahttRRaeoonnVttdeiaalwetteRweeRopLRotoeitarfgattthti(IteowcI9nioc0nno=dn=ofrwrf(oIordtdmoia,mrt'ei{@'com@tnrumioiuo+t/inai/)(tcidioc=iono>rnsne:-s{cm-tnamietaowetnRreoirtaiala9t/l0iR)oR;ntoat}ta)et;LeeRfitg'h;t';

Two buttons were added to the UI:

  • Left rotation button: Rotate 90 degrees counter-clockwise
  • Right rotation button: Rotate 90 degrees clockwise

Translation Support

English and Japanese translations were added to src/translations.js:

{}e}j}n,a,:rr:rroooo{tt{ttaaaatttteeeeLRLReieifgfgthth:t:t::''R''oRto9at09ta0ete9'09,'°0,°lerfitg'h,t',

2. URL Parameter Support

The demo page now supports specifying manifests and rotation angles via URL parameters.

Supported Parameters

ParameterDescriptionSeparator
manifestIIIF manifest URL; (semicolon)
rotationInitial rotation angle (degrees); (semicolon)

Demo Page URL

https://nakamura196.github.io/mirador-rotation-plugin/

Usage Examples

#h#h#httttttpppsss::://////nnnaaakkkaaammmuuurrraaa111999666...gggiiittthhhuuubbb...iiiooo///mmmiiirrraaadddooorrr---rrroootttaaatttiiiooonnn---pppllluuugggiiinnn///???mmmaaannniiifffeeesssttt===huutrrtllp11s;;:uu/rr/lle22x&&arrmoopttlaaett.iicooonnm==/99m00a;n1i8f0est.json&rotation=180

Implementation Details

Key changes in demo/src/index.js:

ccccc}ooooo;nnnnni}sssssftttttcr}(oe)pmrrcmntmrri})aaoorasuaoon,;rnttentrnttiraiaaainiaatomftttfmfttitseiieeameiiaasooWsnasoolt=tnnitintnnVi.PPsnPfiIEOio.naadaefdnpen.err=orse:aew:waawatsbnemmrsmUtul:rrUo)rUreCoR==t=lrldtotLa{sl,:rnaSpptsufteaai=.teiiarromr,goraan=mau:ncmmP>apeshssan(,{[P..r{i(iaggafunreemerdattslem((?t,xs''P](mrraiwaoorn?inttad?niaamedftt.xroeiis)owsoopt.tnnl=al''Pi>to))at0ic;;r((oaa'{ntm;si.'[os)0np;].lsi?et?a(r'0c;,h'));.map(Number):[];

3. Reset Button Icon Change

To distinguish it from the rotation buttons, the reset button icon was changed.

BeforeAfter
ReplaySharpIconRestartAltIcon

ReplaySharpIcon had a design that evoked rotation, so it was changed to RestartAltIcon, which more clearly indicates “reset.”

4. Help Feature

A “?” button was added within the plugin, which displays a dialog explaining how to use it when clicked.

Implementation Details

MUI’s Dialog component is used to display descriptions of each control in a table format.

iiiic<mmmmoM/ppppniao<MoooosrrnHirrrrtaiCerttttdalla[o-ipdHDDDhrlcOoeiiieMakurlaaaleb=tMplllpne{leOoooOul(inugggpB=)nutTCeu{eBlfiontt=Iuirtn,t(>ctnolto'otemeesnhsnoIneeenc'fttlt>o@rHpHnmofe'eumrl)lfiop}pr'mOOm@ppmam'eetu@nn'eim](@r/utmimi=ruaa/uiltmue//eas)iDrte}ciieSoaartnlliaso/at-gDlem'i/(a;aDftliaeoalrglsiToeaig)ltC;/loHene'tl;epnOtu't;line';

Dialog Content

IconDescription
RotateLeftIconRotate 90 degrees counter-clockwise
RotateRightIconRotate 90 degrees clockwise
LinearScaleIconFine-tune rotation angle (-180 to 180 degrees)
RestartAltIconReset rotation to 0 degrees

Translation Support

{}e}j}n,a,:hhhhhh:hhhhhheeeeeeeeeeee{llllll{llllllpppppppppppp:TRRSR:TRRSRiooleioole'tttis'tttisHlaadelaadeeettetettetl:eer::eer:pLR:'LR:''ei','ei',Rfg'Rfg'othFetht:tis:ta:ne:0t'et'°iR'-'ooRtrntouo調atnt'Ctaea,oett-'neri991,t9oo008r09tn0o°0a°l°ttscio''1'oco,,8,uln00no°°tca'ekn,'rwg,-ilcseleo'c,-k1w8i0s°e't,o180°)',

Controls List

The current plugin provides the following controls:

ControlIconFunction
Rotate 90 degrees leftRotateLeftIconRotate 90 degrees counter-clockwise
Rotate 90 degrees rightRotateRightIconRotate 90 degrees clockwise
Angle sliderLinearScaleIconAdjustment in 1-degree increments from -180 to 180 degrees
ResetRestartAltIconReset rotation to 0 degrees
HelpHelpOutlineIconDisplay usage dialog

Configuration Options

OptionTypeDefaultDescription
rotationEnabledbooleanfalseEnable plugin display
rotationOpenbooleanfalseOpen rotation controls by default
initialViewerConfig.rotationnumber0Initial rotation angle

Summary

These feature enhancements have improved the usability of mirador-rotation-plugin:

  • 90-degree rotation buttons: Quickly correct the orientation of books and documents
  • URL parameters: Easy external invocation and sharing
  • UI improvements: Changed to more intuitive icons
  • Help feature: First-time users can immediately understand how to use it

These features enable more efficient rotation operations on IIIF images.