L’articolo illustra come configurare un client che si colleghi a Cantaloupe. Una volta configurato Cantaloupe occorre realizzare un client per poter usare i servizi esposti e mostrare le derivate richieste. Per poter usare i servizi andrebbe realizzato un rest client, ma il mercato già offre dei client in javascript che permettono di vedere l’immagine con comodo funzioni di zoom,
La prima scelta è leaflet che implementa la gestione di una mappa interattiva. Per poterla usare è sufficiente realizzare una pagina html che chiami la pagina la pagina info.json dell’immagine desiderata, come illustrato sotto
|
1 2 3 4 5 6 7 8 9 10 11 |
<body> <div id="map"></div> <script> var map = L.map('map', { center: [0, 0], crs: L.CRS.Simple, zoom: 0, }) L.tileLayer.iiif('http://localhost:8182/iiif/2/0001_2.jpg/info.json').addTo(map); </script> </body> |
se avete operato bene chiamando la pagina html vedremo la nostra immagine con le funzioni di zoom attive.
Un altro client utilizzabile è Openseadragon , che aumenta il numero di funzioni a disposizione e presenta opzioni per gestire tutti i casi d’uso comuni. Se la banda non è un problema è possibile integrare l’immagine completa e demandare al client la gestione dello zoom
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<body> <div id="openseadragon1"></div> <ul class="pgwSlideshow"> </ul> <script src="openseadragon.min.js"></script> <script type="text/javascript"> OpenSeadragon({ id: "openseadragon1", prefixUrl: "images/", immediateRender: true, showNavigator: true, preserveViewport: true, timeout: 60000, tileSources: { type: 'image', url: 'http://localhost:8182/iiif/2/0001_2.jpg/full/full/0/default.jpg' } }); </script> </body> |
In questo modo scarichiamo il carico computazionale sul client e Cantaloupe non effettua elaborazioni, mentre se vogliamo sfruttare la potenza di Cantaloupe il codice da usare è il seguente
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<body> <div id="openseadragon1"></div> <ul class="pgwSlideshow"> </ul> <script src="openseadragon.min.js"></script> <script type="text/javascript"> OpenSeadragon({ id: "openseadragon1", prefixUrl: "images/", immediateRender: true, showNavigator: true, preserveViewport: true, timeout: 60000, tileSources: 'http://localhost:8182/iiif/2/0001_5.jpg/info.json' }); </script> </body> |