Can't get MiradorImageTools Plugin to work

Question

I'm trying to get the MiradorImageTools plugin to work with mirador image viewer.

I'm using a very basic html page to test:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mirador-Test</title>
</head>

<body>
  <h1>Title</h1>
  <div>
    <p>blah</p>
    <div id="my-mirador" />

    <script src="https://unpkg.com/mirador@latest/dist/mirador.min.js"></script>
    <script src="https://unpkg.com/mirador-image-tools@0.10.0/umd/mirador-image-tools.min.js"></script>

    <script type="text/javascript">
      const config = {
        "id": "my-mirador",
        "manifests": {
          "https://iiif.lib.harvard.edu/manifests/drs:48309543": {
            "provider": "Harvard University"
          }
        },
        "windows": [
          {
            "imageToolsEnabled": "true",
            "manifestId": "https://iiif.lib.harvard.edu/manifests/drs:48309543",
          }
        ]
      };

      // var mirador = Mirador.viewer(config);
      var mirador = Mirador.viewer(config, [MiradorImageTools]);  // <-- Error!

    </script>
  </div>
</body>

</html>

This gives me the following error:

Uncaught ReferenceError: MiradorImageTools is not defined
    <anonymous> ./test3.html:36
test3.html:36:45

If I leave the plugin out, replacing the problematic line with the commented-out line above it, the whole thing works and I get mirador showing as it should.

So clearly I'm referencing the plugin wrong. But what would be the right way to do it?

score 0 · Accepted Answer · answered Feb 02 '21 at 20:33

To use MiradorImageTools, and any other Mirador plugin (as of v3.0.0), you will need to import the packages and create a build of the project using a tool like Webpack or parcel.

An example of this type of setup can be seen here: https://github.com/projectmirador/mirador-integration that includes examples using both Webpack and parcel.

./src/index.js
import Mirador from 'mirador/dist/es/src/index';
import { miradorImageToolsPlugin } from 'mirador-image-tools';

const config = {
  id: 'demo',
  windows: [{
    imageToolsEnabled: true,
    imageToolsOpen: true,
    manifestId: 'https://purl.stanford.edu/sn904cj3429/iiif/manifest',
  }],
  theme: {
    palette: {
      primary: {
        main: '#1967d2',
      },
    },
  },
};

Mirador.viewer(config, [
  ...miradorImageToolsPlugin,
]);

See the README there for more information about how to build for the specific tools.

I see, thank you. I was hoping to be able to work with `unpkg.com` and plain HTML only, as this all is created dynamically within a python script, so having to use a build tool will make things a bit more complicated. And since that that works with mirador itself, I hoped that would be the case for the plugin too. But in that csase I guess it's not... — Balduin, Feb 05 '21 at 09:29
Sorry, yes I wish it was too. Hopefully future work can improve this but because of how the dependencies work in plugins we unfortunately have to do this. :( — Jack, Feb 05 '21 at 22:17

Can't get MiradorImageTools Plugin to work

1 Answers1