mirador
v4.0.0-alpha.2
Published
An open-source, web-based 'multi-up' viewer that supports zoom-pan-rotate functionality, ability to display/compare simple images, and images with annotations.
Downloads
11,546
Maintainers
Keywords
Readme
⚠️ This project is for Mirador 3, the latest version of Mirador. For Mirador 2, please see ProjectMirador/mirador2 or legacy documentation on the Mirador 2 wiki. Please note that the community's focus is on Mirador 3, and are unlikely to accept pull requests or provide support for Mirador 2.
Mirador
For Mirador Users
You can quickly use and configure Mirador by remixing the mirador-start Glitch.
We recommend installing Mirador using a JavaScript package manager like npm or yarn.
$ npm install mirador
# or
$ yarn add mirador
If you are interested in integrating Mirador with plugins into your project, we recommend using webpack or parcel to integrate the es version of the packages. Examples are here:
https://github.com/ProjectMirador/mirador-integration
If you want to simply embed Mirador in an HTML page without further customization, include the Mirador UMD build:
<script src="https://unpkg.com/mirador@latest/dist/mirador.min.js"></script>
More examples of embedding Mirador can be found at https://github.com/ProjectMirador/mirador/wiki/M3-Embedding-in-Another-Environment#in-an-html-document-with-javascript.
Adding translations to Mirador
For help with adding a translation, see src/locales/README.md
Running Mirador locally for development
Mirador local development requires nodejs to be installed.
- Run
npm install
to install the dependencies.
Starting the project
$ npm start
Then navigate to http://127.0.0.1:4444/
Instantiating Mirador
var miradorInstance = Mirador.viewer({
id: 'mirador' // id selector where Mirador should be instantiated
});
> miradorInstance
{ actions, store }
Example Action
Add a window:
store.dispatch(actions.addWindow());
To focus a window run:
store.dispatch(actions.focusWindow('window-1'))
Check current state
store.getState()
Running the tests
$ npm test # For headless CI=true npm test
or to continually watch the source files
$ npm run test:watch
Linting the project
$ npm run lint
Debugging
Local instance
The following browser extensions are useful for debugging a local development instance of Mirador:
Test suite
To debug the test suite, run:
$ npm run test:debug
then spin up a nodejs inspector client and set some breakpoints. See here for a guide to debugging with Chrome DevTools.