Configuration de Mirador

Contexte

Ici nous allons chercher à configurer Mirador 2 et 3 après l’installation.

Manifest au chargement et collection de manifest

Pour Mirador 2

Dans un premier temps on va chercher à afficher un certain manifest soit via la collection de manifest déjà présente dans la visionneuse, soit directement au chargement de Mirador. Pour ce faire, il va falloir éditer ce fichier, qui se trouve à la racine :

index.html

Ensuite, dans la partie “data” de la fonction, c’est là ou nous allons trouver la collection de manifest mis à disposition de la visionneuse avec les paramètres suivants :

1. “manifestUri” : le lien vers le manifest, généralement au format json
2. “location” : qui n’est pas obligatoir et ou on y indique la provenance du manifest

Plus bas ensuite, si on souhaite charger un manifest dès le lancement de la visionneuse, on trouvera au même titre que “data”, une partie “windowObjects” qui peut contenir :

1. "loadedManifest" : comme pour “data”, le lien vers le manifest
2. "viewType" : qui sera le type d’affichage qui est par défault sur “ImageView"
3. “canvasID” : le lien de la page du manifest que l’on souhaite afficher qui est par défaut sur la première

Infos : A savoir que le chargement d'un manifest de "https://pandor.u-bourgogne.fr" a été impossible, le retour n'affiche même aucune message alors que pour un manifest de "https://archives.lamayenne.fr" il n'affiche toujours pas le manifest mais au moins retourne un message d'erreur.

Pour Mirador 3

Il faut tout d'abord savoir qu'avec Mirador 3, si on souhaite changer les manifest à disposition, il faut forcément l'intégrer à une autre page html ou javascript et ce en lui ajoutant le script :

<script src="https://unpkg.com/mirador@latest/dist/mirador.min.js"></script>

et ensuite il est possible de lui fournir une certaine configuration comme ci-dessous :

<script type="text/javascript">
var mirador = Mirador.viewer({
  "id": "my-mirador",
  "manifests": {
    "https://iiif.lib.harvard.edu/manifests/drs:48309543": {
      "provider": "Harvard University"
    },
     "https://pandor.u-bourgogne.fr/archives-en-ligne/iiif/ark:/62246/r22057zlv55psk/manifest.json": {
      "provider": "Bourgogne"
    }

  },
  "windows": [
    {
      "loadedManifest": "https://pandor.u-bourgogne.fr/archives-en-ligne/iiif/ark:/62246/r22057zlv55psk/manifest.json",
      "canvasIndex": 1,
      "thumbnailNavigationPosition": 'far-bottom'
    }
  ]
});
</script>

On retrouve donc après les mêmes choses que pour la version à ceci prêt quelques changement au niveau de la syntaxe :

1. “data”, la collection devient "manifests" et on peut directement spécifier l'url après
2. “location”, la provenance du manifest devient "provider"
3. “windowObjects”, ce qu'il y a à charger au lancement devient "windows"
4. “canvasID”, le canva du manifest à afficher en premier devient "canvasIndex"

Infos : Avec cette version, le chargement d'un manifest de "https://pandor.u-bourgogne.fr" ne pose pas de problème.

Apparence et fonctionnalités

Ensuite pour tout ce qui est de la configuration visuel, cela va se faire dans un autre fichier.

• Pour Mirador 2 :

Pour Mirador 2, on va pouvoir modifier les fonctionnalités disponibles dans le même fichier que pour les manifest, en les mettant ensuite soit à "true" si on veut les activer soit à "false" si on ne le veut pas. Voici voici un exemple avec quelques fonctionnalités :

     "tocTabAvailable": true,
     "layersTabAvailable": true,
     "searchTabAvailable": true,
     "annotations" : true

• Pour Mirador 3 :

Ensuite pour tout ce qui est de la configuration visuel de Mirador 3, cela va se faire dans un autre fichier :

src/config/settings.js

Il y aura tout ce qui correspond au thème, aux couleurs des texte, au tailles, etc, comme le montre un extrait ci-dessous :

themes: {
    dark: {
      palette: {
        type: 'dark',
        primary: {
          main: '#4db6ac',
        },
        secondary: {
          main: '#4db6ac',
        },
        shades: {
          dark: '#000000',
          main: '#424242',
          light: '#616161',
        }
      }
    },
    light: {
      palette: {
        type: 'light',
      }
    }
  },

Puis enfin plus bas, on retrouve tout ce qui est en rapport avec l'activation ou non de certaines fonctionnalités liées à la visionneuse, comme montré ci-dessous :

    allowClose: true, // Configure if windows can be closed or not
    allowFullscreen: false, // Configure to show a "fullscreen" button in the WindowTopBar
    allowMaximize: true, // Configure if windows can be maximized or not
    allowTopMenuButton: true, // Configure if window view and thumbnail display menu are visible or not
    allowWindowSideBar: true, // Configure if side bar menu is visible or not
    authNewWindowCenter: 'parent', // Configure how to center a new window created by the authentication flow. Options: parent, screen
    sideBarPanel: 'info', // Configure which sidebar is selected by default. Options: info, attribution, canvas, annotations, search
    defaultSidebarPanelHeight: 201,  // Configure default sidebar height in pixels
    defaultSidebarPanelWidth: 235, // Configure default sidebar width in pixels
    defaultView: 'single',  // Configure which viewing mode (e.g. single, book, gallery) for windows to be opened in
    forceDrawAnnotations: true,

Note : A savoir qu'il est possible de modifier ces valeurs dans le même fichier que là ou on change les manifest si Mirador 3 est intégré dans un autre fichier.

Références

• cf. https://github.com/ProjectMirador/mirador-2-wiki/wiki/Configuration-Guides (Doc officielle de la configuration de Mirador 2)
• cf. https://github.com/ProjectMirador/mirador/wiki/M3-Configuration-Recipes (Doc officielle de la configuration de Mirador 3)
• cf. https://mirador-2-demo.netlify.app (Démo permanente de Mirador 2)
• cf. https://mirador-dev.netlify.app/__tests__/integration/mirador/ (Démo permanente de Mirador 3)