Project

General

Profile

task #5083

Alternative image viewer for dataportal

Added by Andreas Kohlbecker over 4 years ago. Updated 15 days ago.

Status:
Closed
Priority:
Highest
Category:
cdm-dataportal
Target version:
Start date:
07/13/2015
Due date:
% Done:

100%

Severity:
normal
Tags:

Description

The default image gallery and viewer which is currently implemented in the dataportal is quite basic, limited in capabilities.

The new viewer should cover all functionality which is currently provided by the fsi viewer.

Requirements:

  • suitable for mobile devices (touch)
  • display of IPTC/EXIM metadata (provided by the cdm serber) and metadata offered by the erez server (see email conversation with dominik)

  • Overview on all images in 'gallery'

These are alternatives:

photobox

scheint mir auf den ersten Blick alles zu erfüllen was für die Dataportals benötigt wird.

und ist auch Mobiles geeignet.

In der Demo läuft sie als Overlay, lässt sich mit Sicherheit auch anders verwenden.

Metadaten lassen sich anzeigen, ...

OpenSeadragon

Excellent viewer which reminds very much by to the FSI viewer (http://openseadragon.github.io/examples/ui-reference-strip/, ). The MfN is using this viewer for ZooSphere

Universal Viewer

The https://github.com/UniversalViewer/universalviewer provides an extension (uv-seadragon-extension) by which it can use OpenSeadragon as centerPanel (seadragonCenterPanel"). This viewer is dedicated to enable cultural heritage institutions to present their digital artifacts in a "IIIF-compliant and highly customisable user interface, therefore it has a nice integration of metadata: http://universalviewer.io/examples/

Currently it is required to use an IIIF compliant Image server (http://iiif.io/apps-demos/):

  • There is a IIIF adaptor for FSI server!
  • Loris
  • IIPImage Server
  • Djakota
  • ...

universalviewer

Once the universalviewer issue 78 is solved, it will become possible to use the viewer with plain image servers like apache. This feature is planned to be included in v2.0 of the viewer. universalviewer issue 78 is fixed now for version 3.0!

A test manifest for this use case is a available at http://cybertaxonomy.eu/download/tmp/iiif-test/manifest (the iiif-test folder is also attached to this ticket as iiif-test.tar.gz

setting up universalviewer dev environment:

  • 1. install npm:
# nodejs and npm
# (see https://github.com/nodesource/distributions/blob/master/README.md#debinstall)
curl -sL https://deb.nodesource.com/setup_13.x | sudo -E bash -
sudo apt-get install -y nodejs
  • 2. install grunt
npm install -g grunt-cli
  • 3. set the required node version

At current universalviewer is not compatible with node 10, it is being developed using node 8.x.x (https://github.com/UniversalViewer/universalviewer/issues/690). Therefor it is recommended to install node 8.16.1 using this recipe:

sudo npm cache clean -f
sudo npm install -g n
sudo n 8.16.1
  • 4. clone the universalviewer github repo

now we basically follow https://github.com/UniversalViewer/universalviewer/blob/master/CONTRIBUTING.md#fork-repository

git clone https://github.com/UniversalViewer/universalviewer.git --recursive
cd universalviewer
  • 5. run npm install

As this requires also installation of peer dependencies, it requires some addtional steps (https://stackoverflow.com/questions/46053414/npm-warn-requires-a-peer-of-but-none-is-installed-you-must-install-peer#49188160)[]

npm install

now check the output for lines starting with npm WARN ... requires a peer of ... and install all missing peers, at current these are:

npm install --save-dev ajv@^6.0.0
npm install --save-dev grunt@~0.4.0   
npm install --save-dev webpack@^4.0.0
  • 6. Build with grunt
grunt build

or

grunt build --dist

Grunt should complete without errors

The distribution files are found in ./dist

copy the dist/ folder as uv/ into cdm-dataportal/modules/cdm_dataportal/js/universalviewer/

integrating the uv in the dataportal module:

(Note: universal viewer uses a recent version of jQuery (3.3.1) which could conflict with the version of Drupal 7. Solutions: https://www.drupal.org/node/1058168)

IIIF:


Open problems

  • the universalviewer gallery does not work with druapl clean urls (ui-config.json is not found) DONE
  • manifest url still hard coded for testing, refactor and reuse function _load_media_for_taxon($taxon) DONE

related tickets:

  • #4582 (may become obsolte)
  • #5106 specimen table images

iiif-test.tar.gz (1.32 KB) Andreas Kohlbecker, 06/24/2016 01:52 PM


Related issues

Related to Edit - bug #6282: FSI image viewer not working with https New 12/15/2016
Related to Edit - feature request #8028: DISCUSS better representation of web app media in the image gallery New 01/28/2019
Related to Edit - feature request #8867: media list services as iiif manifest service Closed 02/28/2020
Related to Edit - feature request #8888: responsive width for universal viewer New 03/09/2020

Associated revisions

Revision a1f7edc0 (diff)
Added by Andreas Kohlbecker about 1 month ago

ref #5083 integrating universalviewer as jQuery plugin

Revision a6f91032 (diff)
Added by Andreas Kohlbecker about 1 month ago

ref #5083 universalviewer modules setup and layout

Revision 4a462641 (diff)
Added by Andreas Kohlbecker 22 days ago

ref #5083 using iif taxon manifest service in dataportal

Revision dde81daa (diff)
Added by Andreas Kohlbecker 22 days ago

ref #5083 adding developer utility script

Revision 172bb491 (diff)
Added by Andreas Kohlbecker 22 days ago

ref #5083 using includeTaxonomicChildren iiif taxon media service mode

Revision b45a8503 (diff)
Added by Andreas Kohlbecker 22 days ago

ref #5083 fixing jq-universalviewer.js for clean urls

History

#1 Updated by Andreas Kohlbecker over 4 years ago

Collection of responses on photobox

Schick ! (a.mueller)

Hallo Andreas,

find ich optisch sehr ansprechend und erlaubt sogar Zoomen.

Frage mich nur, ob sich auch in IPTC gespeicherte Bildmetadaten darstellen lassen

Schöne Grüße,

Norbert

#2 Updated by Andreas Kohlbecker over 4 years ago

To all

please test both viewers with mobile devices. Are both suitable for touch displays?

Andreas

#3 Updated by Norbert Kilian over 4 years ago

Do not have a mobile device.

Noticed that MfN uses OpenSeadragon in its project Zoosphere: http://www.zoosphere.net/. I find this convincing.

Norbert

#4 Updated by Andreas Kohlbecker almost 4 years ago

  • Target version changed from Reviewed Next Major Release to Release 4.2

#5 Updated by Andreas Kohlbecker almost 4 years ago

Replying to a.kohlbecker:

To all

please test both viewers with mobile devices. Are both suitable for touch displays?

Andreas

I now tested them:

Universal Viewer and OpenSeadragon can both be used on mobile devices.

The user interaction in each of them is a bit fiddly but it works.

Andreas

#6 Updated by Andreas Müller over 3 years ago

  • Target version changed from Release 4.2 to Release 4.3

#7 Updated by Andreas Müller over 3 years ago

  • Target version changed from Release 4.3 to Release 4.4

#9 Updated by Andreas Kohlbecker over 3 years ago

  • Description updated (diff)
  • Category deleted (cdm-dataportal)
  • Private changed from Yes to No

#10 Updated by Andreas Kohlbecker over 3 years ago

  • Category set to Import

#11 Updated by Andreas Kohlbecker over 3 years ago

Ralf Hand wrote:

Hallo Andreas,

danke für den Link. Wir als sehr fotoorientiertes Projekt sind nicht uneingeschränkt begeistert von dem neuen Viewer. Ich muss nochmals mit der Fullscreen-Problematik nerven. Schau Dir einfach mal ein paar Bilder im heutigen und im geplanten Viewer an.

Keine Ahnung, ob man beispielsweise dieses „düstere Umfeld“ im neuen Viewer anpassen kann (also die eher dunklen Hintergründe im Vergleich zum heutigen Viewer). Die Thumbnails zum weiteren Angebot lassen sich auch nicht so schön klein halten wie heute, sondern nur komplett anzeigen oder komplett einblenden.

Manche Elemente hingegen sind intuitiver als bisher.

Viele Grüße
Ralf


Hallo Andreas,

wenn sich die Farbgebung des Hintergrundes anpassen lässt, die Größe der Seitenleiste konfigurierbar ist und die Thumbnail-Größe anpassbar ist, dann passt das schon. Man kann nicht alles haben, und mir ist auch wichtig, dass die Portale auf diesen ganzen mobilen Dingern endlich richtig laufen.

Ich finde es beim Vorhandensein sehr vieler Bilder pro Taxon schon recht komfortabel, dass man bisher sehr kleine Thumbnails in größerer Anzahl anzeigen lassen kann. Man kann dann sehr rasch beispielsweise Blüten- oder Samenfotos rauspicken, ohne dass man scrollen muss (siehe Beispiel) wie in dem neuen Modell.

Du hast geschickterweise ein Hochkantfoto als Gegenargument genommen. Ich präsentiere unten mal ein schönes Querformat, wie es sich bisher ohne Zoomen gleich öffnet. Unterschiede gibt es schon ...

Viele Grüße

Ralf

#12 Updated by Andreas Kohlbecker over 3 years ago

The Universalviewer has now commonly accepted, even if there are concerns, but it is so far the best solution we have.

We are currently a bit blocked by the fact that Universalviewer is not supporting plain image sources.
The according universalviewer issue 78 (see issue description) has been removed from the milestone for the next release, so we should not hope that this is going to be fixed soon. We are thus left with the following options:

  1. Wait
  2. Fix issue 78 by ourself
  3. Avoid plain image sources by delivering all our images through a IIIF compliant server
  4. Use the Universalviewer only for images from compliant sources and use OpenSeadeargon direclty for plain image sources

#13 Updated by Andreas Müller over 3 years ago

  • Target version changed from Release 4.4 to Release 4.5

#14 Updated by Andreas Müller about 3 years ago

  • Target version changed from Release 4.5 to Release 4.6

#15 Updated by Andreas Müller about 3 years ago

  • Target version changed from Release 4.6 to Release 4.7

#16 Updated by Andreas Müller almost 3 years ago

  • Target version changed from Release 4.7 to Release 4.8

#17 Updated by Andreas Müller over 2 years ago

  • Target version changed from Release 4.8 to Release 4.9

#18 Updated by Andreas Müller over 2 years ago

  • Target version changed from Release 4.9 to Release 4.10

#19 Updated by Andreas Müller over 2 years ago

  • Target version changed from Release 4.10 to Release 4.12

#20 Updated by Andreas Kohlbecker over 2 years ago

  • Description updated (diff)
  • Priority changed from Priority13 to Priority14

The issue 78 in Universal viewer has been fixed now! This fix ins included in version 3.0, so we can start now to use the UniversalViewer also for plain image sources.

#21 Updated by Andreas Müller over 2 years ago

  • Target version changed from Release 4.12 to Release 4.13

#22 Updated by Andreas Müller about 2 years ago

  • Target version changed from Release 4.13 to Release 4.14

#23 Updated by Andreas Müller about 2 years ago

  • Target version changed from Release 4.14 to Release 5.0

#24 Updated by Andreas Kohlbecker almost 2 years ago

  • Target version changed from Release 5.0 to Release 5.1

#25 Updated by Andreas Müller almost 2 years ago

  • Target version changed from Release 5.1 to Release 5.2

#26 Updated by Andreas Kohlbecker almost 2 years ago

  • Blocks bug #6282: FSI image viewer not working with https added

#27 Updated by Andreas Kohlbecker almost 2 years ago

  • Blocks deleted (bug #6282: FSI image viewer not working with https)

#29 Updated by Andreas Kohlbecker over 1 year ago

  • Target version changed from Release 5.2 to Release 5.3

#30 Updated by Andreas Kohlbecker over 1 year ago

  • Target version changed from Release 5.3 to Release 5.4

#31 Updated by Andreas Kohlbecker over 1 year ago

  • Target version changed from Release 5.4 to Release 5.5

#32 Updated by Andreas Kohlbecker about 1 year ago

  • Target version changed from Release 5.5 to Release 5.6

#33 Updated by Andreas Kohlbecker about 1 year ago

  • Target version changed from Release 5.6 to Reviewed Next Major Release

#34 Updated by Andreas Kohlbecker 4 months ago

  • Related to bug #6282: FSI image viewer not working with https added

#35 Updated by Andreas Kohlbecker 4 months ago

  • Related to feature request #8028: DISCUSS better representation of web app media in the image gallery added

#36 Updated by Andreas Kohlbecker 2 months ago

  • Priority changed from Priority14 to Highest
  • Target version changed from Reviewed Next Major Release to Release 5.13

#37 Updated by Andreas Kohlbecker 2 months ago

  • Subject changed from Alternative image viewer for dataportal [DISUSS] to Alternative image viewer for dataportal

#38 Updated by Andreas Kohlbecker about 1 month ago

  • Description updated (diff)

#39 Updated by Andreas Kohlbecker about 1 month ago

  • Description updated (diff)

#40 Updated by Andreas Kohlbecker about 1 month ago

  • Status changed from New to In Progress

#41 Updated by Andreas Kohlbecker about 1 month ago

  • Description updated (diff)

#42 Updated by Andreas Kohlbecker about 1 month ago

  • Description updated (diff)

#43 Updated by Andreas Kohlbecker about 1 month ago

  • Description updated (diff)

#44 Updated by Andreas Kohlbecker about 1 month ago

  • Description updated (diff)

#45 Updated by Andreas Kohlbecker about 1 month ago

  • Description updated (diff)

#46 Updated by Andreas Kohlbecker about 1 month ago

#47 Updated by Andreas Kohlbecker about 1 month ago

  • Description updated (diff)

#48 Updated by Andreas Kohlbecker 22 days ago

  • % Done changed from 0 to 40

last remaining problem:

  • the universalviewer gallery does not work with drupal clean urls (ui-config.json is not found)

#49 Updated by Andreas Kohlbecker 22 days ago

  • Status changed from In Progress to Resolved
  • % Done changed from 40 to 50

clean urls problem solved, the universalviewer is now ready to be used in the data portal

#50 Updated by Andreas Kohlbecker 22 days ago

#51 Updated by Andreas Kohlbecker 15 days ago

  • Description updated (diff)
  • Status changed from Resolved to Closed
  • % Done changed from 50 to 100

All remaning open issues solved.

Furhter tasks related to the UV will be handled in a separate ticket.

Also available in: Atom PDF

Add picture from clipboard (Maximum size: 40 MB)