• Stars
    star
    552
  • Rank 80,595 (Top 2 %)
  • Language
    JavaScript
  • License
    Apache License 2.0
  • Created over 10 years ago
  • Updated about 2 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

An open-source, web-based 'multi-up' viewer that supports zoom-pan-rotate functionality, ability to display/compare simple images, and images with annotations.

⚠️ 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

Node.js CI codecov

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.

  1. 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.

More Repositories

1

mirador-awesome

An awesome list for Mirador's projects and plugins.
41
star
2

m1

An open-source, web-based 'multi-up' viewer that supports zoom-pan-rotate functionality, ability to display/compare simple images, and images with annotations. This repository is no longer maintained, for further project details, see the latest version at http://github.com/IIIF/mirador.
JavaScript
40
star
3

mirador-annotations

a Mirador 3 plugin that adds annotation creation tools to the user interface
JavaScript
38
star
4

mirador-desktop

A desktop wrapper for Mirador and its environment, allowing use of local images.
JavaScript
14
star
5

mirador-image-tools

a Mirador 3 plugin that adds image manipulation tools to the user interface
JavaScript
11
star
6

research-and-demos

Proofs of concept for Mirador 3
JavaScript
10
star
7

mirador-design

A place for design artifacts, stories, and feedback pertaining to Mirador ecosystem tools (especially Mirador 3).
10
star
8

mirador-integration

Examples of integrating Mirador 3 with modern frontend build systems
JavaScript
8
star
9

mirador-dl-plugin

a Mirador 3 plugin that adds manifest-provided download links to the window options menu
JavaScript
6
star
10

mirador-plugin-demos

Mirador 3 Plugin Demos
JavaScript
4
star
11

mirador-annotot-endpoint-plugin

JavaScript
4
star
12

mirador-share-plugin

a Mirador 3 plugin for adding share links, embedded iframes, drag-and-drop icon
JavaScript
4
star
13

mirador-2-wiki

Legacy documentation for Mirador 2
1
star
14

mirador-workshop

Mirador customization workshop - IIIF Fall Working Meeting 2020
JavaScript
1
star