Update auf OpenSeadragon 2.3.0, dateiabhängige Metadatenabfrage

dla-marbach · Sep 19, 2017 · 4323715 · 4323715
1 parent c0c40b8
commit 4323715
Show file tree

Hide file tree

Showing 52 changed files with 904 additions and 1 deletion.
diff --git a/.gitignore b/.gitignore
@@ -57,3 +57,5 @@ typings/
 # dotenv environment variables file
 .env
 
+# MacOS
+.DS_Store
diff --git a/Kacheltechnik_Allgemein.md b/Kacheltechnik_Allgemein.md
@@ -0,0 +1,142 @@
+# Einbindung OpenSeadragon auf beliebiger Webseite
+
+## OpenSeadragon
+[http://openseadragon.github.io](http://openseadragon.github.io)
+OpenSeadragon von Homepage laden und entpacken.
+Bei Bedarf andere Icons installieren, z. B. [https://github.com/peterthomet/openseadragon-flat-toolbar-icons](https://github.com/peterthomet/openseadragon-flat-toolbar-icons) (ggfls. Höhe der Toolbar anpassen).
+
+## HTML
+
+Diese Elemente an einer beliebigen Stelle einfügen:
+```
+<div id="dla_kachelviewer_viewport">
+  <div id="dla_kachelviewer_toolbar">
+    <span id="dla_kachelviewer_seitenanzeige">
+      Seite&nbsp;
+      <input id="dla_kachelviewer_seite" type="text" value="1" maxlength="4" size="4">
+      &nbsp;von&nbsp;
+      <span id="dla_kachelviewer_seiten"></span>
+    </span>
+  </div>
+  <div id="dla_kachelviewer_content"></div>
+</div>
+```
+
+## CSS
+
+Werte an Seite anpassen! CSS in einer Datei speichern.
+
+```
+#dla_kachelviewer_viewport {
+  width: 777px; /* DLA homepage (default 800px) */
+  height: 600px;	
+}
+#dla_kachelviewer_toolbar {
+  width: 100%;
+  height: 2.3125rem;	/* DLA input element (default 30px) */
+}
+}
+#dla_kachelviewer_seitenanzeige {
+  display: table; 
+  margin: auto; 
+  padding-left: 1em; /* ggfls. anpassen */
+  padding-right: 1em; /* ggfls. anpassen */
+  background-color: white; /* ggfls. anpassen */
+}
+#dla_kachelviewer_seite {
+  display: inline; /* nur auf DLA Homepage nötig */
+  width: 3em; /* nur auf DLA Homepage nötig */
+}
+#dla_kachelviewer_content {
+  width: 100%;
+  height: 100%;
+  background-color: black; /* ggfls. anpassen */
+}
+```
+Datei im Header der Seite einbinden:
+```
+<head>
+  …
+  <link rel="stylesheet" type="text/css" href="'Pfad/zu/dla_kachelviewer.css'"></link>
+  …
+</head>
+```
+
+## JavaScript
+
+Pfade und tileSources anpassen. Javascript in Datei speichern.
+Für IIIF siehe hier: [http://openseadragon.github.io/examples/tilesource-iiif/](http://openseadragon.github.io/examples/tilesource-iiif/)
+
+```
+/**
+ * Skript zur Anzeige von Kacheln
+ */
+ 
+/**
+ * Konfiguration
+ */
+var dlaKachelviewerConfig = {
+    id: 'dla_kachelviewer_content'
+  , toolbar: 'dla_kachelviewer_toolbar'
+  , prefixUrl: 'Pfad/zu/openseadragon/images/'
+  , tileSources: ['Pfad/zu/kachel1.dzi', 'Pfad/zu/kachel2.dzi']
+  , sequenceMode: true
+  , showReferenceStrip: true
+}
+
+/**
+ * Setup OpenSeadragon Kachelviewer
+ */
+var dlaKachelviewer
+var setupDlaKachelviewer = function () {
+
+  // Bestehende Instanz von dlaKachelviewer löschen
+  if (dlaKachelviewer) dlaKachelviewer.destroy()
+  
+  // Seitennummern setzen
+  var totalPages = dlaKachelviewerConfig['tileSources'].length
+  document.getElementById("dla_kachelviewer_seite").value = 1
+  document.getElementById("dla_kachelviewer_seite").size = String(totalPages).length
+  document.getElementById("dla_kachelviewer_seite").maxLength = String(totalPages).length
+  document.getElementById("dla_kachelviewer_seiten").innerHTML = String(totalPages)
+
+  // Viewer einrichten
+  dlaKachelviewer = OpenSeadragon(dlaKachelviewerConfig)
+
+  /**
+   * Event handler definieren
+   */
+
+  // Seitenzahlen
+  dlaKachelviewer.addHandler("page", function (data) {
+    document.getElementById("dla_kachelviewer_seite").value = data.page + 1
+  })
+  var pageInput = document.getElementById("dla_kachelviewer_seite")
+  pageInput.oninput = function (e) {
+    var p = pageInput.value
+    if (p) {
+      if (pageInput.value > totalPages) p = totalPages
+      else if (pageInput.value < 1) p = 1
+      dlaKachelviewer.goToPage(p - 1)
+    }
+  }
+  pageInput.onpropertychange = pageInput.oninput
+}
+
+/**
+ * Ausführen
+ */
+setupDlaKachelviewer()
+```
+
+Javascript zusammen mit OpenSeadragon am Ende(!) der Seite einfügen. Reihenfolge beachten.
+
+```
+  …
+  <script src="Pfad/zu/openseadragon/openseadragon.min.js"></script>
+  <script src="Pfad/zu/dla_kachelviewer.js"></script>
+</body>
+```
+
+___
+*6.11.2016, Alexander Harm*
diff --git a/LICENSE b/LICENSE
@@ -186,7 +186,7 @@
       same "printed page" as the copyright notice for easier
       identification within third-party archives.
 
-   Copyright {yyyy} {name of copyright owner}
+   Copyright 2017 Deutsches Literaturarchiv Marbach
 
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.

diff --git a/README.md b/README.md
@@ -1,2 +1,48 @@
 # dla_kachelviewer
 A Typo3-Extension to view DeepZoomImages using OpenSeadragon
+
+### Installation
+
+Dieses Repositorium klonen und das Unterverzeichnis `dla_kachelviewer` in den Pfad der Typo3-Erweiterungen kopieren (`.../typo3conf/ext/`).
+
+### Einbindung auf einer Typo3-Seite
+
+Auf der gewünschten Seite ein neues `Inhaltselement` Typ `Allgemeines Plug-In` hinzufügen.
+Unter `Plug-In` nun den `DLA Kachelviewer` auswählen und speichern.
+
+
+### Konfiguration
+
+Es gibt folgende Konfigurationsmöglichkeiten im Typo3-Backend:
+
+* Speicherpfad: Pfad unter dem die Digitalisate/Kacheln in Unterordnern gespeichert sind. Normalerweise ist dies der Typo3-Ordner `fileadmin`.
+
+* Objekt ID: Der Verzeichnisname (nicht als vollständiger Pfad!).
+
+* Metadaten anzeigen: Zeigt Metadaten aus dem Kallias-OPAC an.
+
+* Metadaten ID: Falls sich der Verzeichnisname nicht mit der Mediennummer deckt, kann hier eine Alternative angegeben werden. Zusätzlich ist es möglich eine Regular Expression anzugeben. In diesem Fall werden die Metadaten aus den einzelnen Dateinamen generiert. Die Regular Expression muss mit `re:` beginnen und genau eine Match-Group enthalten, z. B. `re:^.*\/(.+)_[0-9]{4}.dzi$` (entfernt die laufende Nummer). Achtung: OpenSeadragon gibt den vollständigen Pfad zurück.
+
+* Startseite: Bei Bedarf kann eine Startseite definiert werden.
+
+* Suchmaske: Bei Bedarf kann eine Suchmaske eingeblendet werden über die direkt Objekte angegeben werden können.
+
+* Speicherstruktur: Es gibt prinzipiell zwei Strukturen in denen die Dateien abgelegt sind:
+
+    * 1. Object/Quality/File: z. B. `.../HS_12345678/tiles/...`
+    * 2. Quality/Object/File: z. B. `.../tiles/HS_12345678/...`
+
+    Normalerweise wird immer in Struktur 1 abgelegt.
+
+### Paramterübergabe per URL
+
+Manche Parameter können auch direkt über die URL im SearchString übergeben werden:
+
+* id: Wird von Typo3 vergeben
+* object: Die Objekt ID
+* metadata: Die Metadata ID (keine Regular Expression)
+* physpage: Die Startseite
+
+Beispiel:
+
+`https://www.dla-marbach.de/index.php?id=1017&object=HS_12345678&metadata=HS_87654321&physpage=10`
diff --git a/dla_kachelviewer/Classes/Controller/KachelviewerController.php b/dla_kachelviewer/Classes/Controller/KachelviewerController.php
@@ -0,0 +1,22 @@
+<?php
+
+  use \TYPO3\CMS\Extbase\Mvc\Controller\ActionController;
+  use \TYPO3\CMS\Core\Utility\GeneralUtility;
+
+  class Tx_DlaKachelviewer_Controller_KachelviewerController extends ActionController {
+
+      public function deepzoomAction() {
+        	// Load CSS
+		    $this->response->addAdditionalHeaderData('<link rel="stylesheet" type="text/css" href="' . \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::siteRelPath($this->request->getControllerExtensionKey()) . 'Resources/Public/CSS/dla_kachelviewer.css"></link>');
+          // Pass variables to JavaScript
+        $this->response->addAdditionalHeaderData('<script type="text/javascript">var dlaKachelviewerStoragePath = "' . $this->settings['storagePath'] . '"</script>');
+        $this->response->addAdditionalHeaderData('<script type="text/javascript">var dlaKachelviewerStoragePattern = "' . $this->settings['storagePattern'] . '"</script>');
+        $this->response->addAdditionalHeaderData('<script type="text/javascript">var dlaKachelviewerShowSearchField = "' . $this->settings['showSearchField'] . '"</script>');
+        $this->response->addAdditionalHeaderData('<script type="text/javascript">var dlaKachelviewerObjectID = "' . $this->settings['objectID'] . '"</script>');
+        $this->response->addAdditionalHeaderData('<script type="text/javascript">var dlaKachelviewerShowMetadata = "' . $this->settings['metadataShow'] . '"</script>');
+        $this->response->addAdditionalHeaderData('<script type="text/javascript">var dlaKachelviewerMetadataID = "' . $this->settings['metadataId'] . '"</script>');
+        $this->response->addAdditionalHeaderData('<script type="text/javascript">var dlaKachelviewerPhysPage = "' . $this->settings['physPage'] . '"</script>');
+      }
+  }
+
+?>
diff --git a/dla_kachelviewer/Configuration/FlexForms/DlaKachelviewer.xml b/dla_kachelviewer/Configuration/FlexForms/DlaKachelviewer.xml
@@ -0,0 +1,118 @@
+<T3DataStructure>
+	<meta>
+		<langDisable>1</langDisable>
+	</meta>
+	<sheets>
+		<sGeneralSettings>
+			<ROOT>
+				<TCEforms>
+					<sheetTitle>General Settings</sheetTitle>
+				</TCEforms>
+				<type>array</type>
+				<el>
+					<settings.storagePath>
+						<TCEforms>
+							<label>Speicherpfad</label>
+							<config>
+								<type>input</type>
+								<size>75</size>
+								<default>/fileadmin/data/repo/dido</default>
+								<eval>trim</eval>
+							</config>
+						</TCEforms>
+					</settings.storagePath>
+					<settings.objectID>
+						<TCEforms>
+							<label>Objekt ID</label>
+							<config>
+								<type>input</type>
+								<size>30</size>
+								<default>re:^.*\/(.+)_[0-9]{4}.dzi$</default>
+								<eval>trim</eval>
+							</config>
+						</TCEforms>
+					</settings.objectID>
+					<settings.metadataShow>
+						<TCEforms>
+							<label>Metadaten anzeigen</label>
+							<config>
+								<type>select</type>
+								<size>1</size>
+								<items type="array">
+									<numIndex index="0" type="array">
+										<numIndex index="0">True</numIndex>
+										<numIndex index="1">True</numIndex>
+									</numIndex>
+									<numIndex index="1" type="array">
+										<numIndex index="0">False</numIndex>
+										<numIndex index="1">False</numIndex>
+									</numIndex>
+								</items>
+							</config>
+						</TCEforms>
+					</settings.metadataShow>
+					<settings.metadataId>
+						<TCEforms>
+							<label>Metadaten ID</label>
+							<config>
+								<type>input</type>
+								<size>30</size>
+								<default>re:^.*\/(.+)_[0-9]{4}.dzi$</default>
+								<eval>trim</eval>
+							</config>
+						</TCEforms>
+					</settings.metadataId>
+					<settings.physPage>
+						<TCEforms>
+							<label>Startseite</label>
+							<config>
+								<type>input</type>
+								<size>5</size>
+								<default>1</default>
+								<eval>trim</eval>
+							</config>
+						</TCEforms>
+					</settings.physPage>
+					<settings.showSearchField>
+						<TCEforms>
+							<label>Suchmaske</label>
+							<config>
+								<type>select</type>
+								<size>1</size>
+								<items type="array">
+									<numIndex index="0" type="array">
+										<numIndex index="0">False</numIndex>
+										<numIndex index="1">False</numIndex>
+									</numIndex>
+									<numIndex index="1" type="array">
+										<numIndex index="0">True</numIndex>
+										<numIndex index="1">True</numIndex>
+									</numIndex>
+								</items>
+							</config>
+						</TCEforms>
+					</settings.showSearchField>
+					<settings.storagePattern>
+						<TCEforms>
+							<label>Speicherstruktur</label>
+							<config>
+								<type>select</type>
+								<size>1</size>
+								<items type="array">
+									<numIndex index="0" type="array">
+										<numIndex index="0">1: Object/Quality/File</numIndex>
+										<numIndex index="1">1</numIndex>
+									</numIndex>
+									<numIndex index="1" type="array">
+										<numIndex index="0">2: Quality/Object/File</numIndex>
+										<numIndex index="1">2</numIndex>
+									</numIndex>
+								</items>
+							</config>
+						</TCEforms>
+					</settings.storagePattern>
+				</el>
+			</ROOT>
+		</sGeneralSettings>
+	</sheets>
+</T3DataStructure>
diff --git a/dla_kachelviewer/Resources/Private/Templates/Kachelviewer/Deepzoom.html b/dla_kachelviewer/Resources/Private/Templates/Kachelviewer/Deepzoom.html
@@ -0,0 +1,19 @@
+<div id="dla_kachelviewer_error">Objekt wurde nicht gefunden!</div>
+<div  id="dla_kachelviewer_input">
+  <input id="dla_kachelviewer_input_text" type="text" maxlength="11" size="11">
+  <input id="dla_kachelviewer_input_submit" type="button" value="Anzeigen">
+</div>
+<div id="dla_kachelviewer_viewport">
+  <div id="dla_kachelviewer_toolbar">
+    <span id="dla_kachelviewer_seitenanzeige">
+      Seite&nbsp;
+      <input id="dla_kachelviewer_seite" type="text" value="1" maxlength="4" size="4">
+      &nbsp;von&nbsp;
+      <span id="dla_kachelviewer_seiten"></span>
+    </span>
+  </div>
+  <div id="dla_kachelviewer_content"></div>
+  <div id="dla_kachelviewer_metadaten"></div>
+</div>
+<script src="{f:uri.resource(path: 'openseadragon/openseadragon.min.js')}"></script>
+<script src="{f:uri.resource(path: 'JavaScript/dla_kachelviewer.js')}"></script>
-Original file line number
+Diff line change
@@ Expand Up / @@ -57,3 +57,5 @@ typings/ @@
     # dotenv environment variables file
     .env
+    # MacOS
+    .DS_Store