Adding zoomin, openseadragon js, other

Smithsonian · May 13, 2024 · f94f3be · f94f3be
1 parent 67ac562
commit f94f3be
Show file tree

Hide file tree

Showing 50 changed files with 1,342 additions and 1,274 deletions.
diff --git a/web_app/app.py b/web_app/app.py
diff --git a/web_app/osprey_api.py b/web_app/osprey_api.py
diff --git a/web_app/osprey_common.py b/web_app/osprey_common.py
@@ -0,0 +1,8 @@
+# Common variables shared between modules
+
+import settings
+
+site_ver = "2.7.5"
+site_env = settings.env
+site_net = settings.site_net
+
diff --git a/web_app/static/images/button_grouphover.png b/web_app/static/images/button_grouphover.png
diff --git a/web_app/static/images/button_hover.png b/web_app/static/images/button_hover.png
diff --git a/web_app/static/images/button_pressed.png b/web_app/static/images/button_pressed.png
diff --git a/web_app/static/images/button_rest.png b/web_app/static/images/button_rest.png
diff --git a/web_app/static/images/flip_grouphover.png b/web_app/static/images/flip_grouphover.png
diff --git a/web_app/static/images/flip_hover.png b/web_app/static/images/flip_hover.png
diff --git a/web_app/static/images/flip_pressed.png b/web_app/static/images/flip_pressed.png
diff --git a/web_app/static/images/flip_rest.png b/web_app/static/images/flip_rest.png
diff --git a/web_app/static/images/fullpage_grouphover.png b/web_app/static/images/fullpage_grouphover.png
diff --git a/web_app/static/images/fullpage_hover.png b/web_app/static/images/fullpage_hover.png
diff --git a/web_app/static/images/fullpage_pressed.png b/web_app/static/images/fullpage_pressed.png
diff --git a/web_app/static/images/fullpage_rest.png b/web_app/static/images/fullpage_rest.png
diff --git a/web_app/static/images/home_grouphover.png b/web_app/static/images/home_grouphover.png
diff --git a/web_app/static/images/home_hover.png b/web_app/static/images/home_hover.png
diff --git a/web_app/static/images/home_pressed.png b/web_app/static/images/home_pressed.png
diff --git a/web_app/static/images/home_rest.png b/web_app/static/images/home_rest.png
diff --git a/web_app/static/images/next_grouphover.png b/web_app/static/images/next_grouphover.png
diff --git a/web_app/static/images/next_hover.png b/web_app/static/images/next_hover.png
diff --git a/web_app/static/images/next_pressed.png b/web_app/static/images/next_pressed.png
diff --git a/web_app/static/images/next_rest.png b/web_app/static/images/next_rest.png
diff --git a/web_app/static/images/previous_grouphover.png b/web_app/static/images/previous_grouphover.png
diff --git a/web_app/static/images/previous_hover.png b/web_app/static/images/previous_hover.png
diff --git a/web_app/static/images/previous_pressed.png b/web_app/static/images/previous_pressed.png
diff --git a/web_app/static/images/previous_rest.png b/web_app/static/images/previous_rest.png
diff --git a/web_app/static/images/rotateleft_grouphover.png b/web_app/static/images/rotateleft_grouphover.png
diff --git a/web_app/static/images/rotateleft_hover.png b/web_app/static/images/rotateleft_hover.png
diff --git a/web_app/static/images/rotateleft_pressed.png b/web_app/static/images/rotateleft_pressed.png
diff --git a/web_app/static/images/rotateleft_rest.png b/web_app/static/images/rotateleft_rest.png
diff --git a/web_app/static/images/rotateright_grouphover.png b/web_app/static/images/rotateright_grouphover.png
diff --git a/web_app/static/images/rotateright_hover.png b/web_app/static/images/rotateright_hover.png
diff --git a/web_app/static/images/rotateright_pressed.png b/web_app/static/images/rotateright_pressed.png
diff --git a/web_app/static/images/rotateright_rest.png b/web_app/static/images/rotateright_rest.png
diff --git a/web_app/static/images/zoomin_grouphover.png b/web_app/static/images/zoomin_grouphover.png
diff --git a/web_app/static/images/zoomin_hover.png b/web_app/static/images/zoomin_hover.png
diff --git a/web_app/static/images/zoomin_pressed.png b/web_app/static/images/zoomin_pressed.png
diff --git a/web_app/static/images/zoomin_rest.png b/web_app/static/images/zoomin_rest.png
diff --git a/web_app/static/images/zoomout_grouphover.png b/web_app/static/images/zoomout_grouphover.png
diff --git a/web_app/static/images/zoomout_hover.png b/web_app/static/images/zoomout_hover.png
diff --git a/web_app/static/images/zoomout_pressed.png b/web_app/static/images/zoomout_pressed.png
diff --git a/web_app/static/images/zoomout_rest.png b/web_app/static/images/zoomout_rest.png
diff --git a/web_app/static/js/openseadragon.min.js b/web_app/static/js/openseadragon.min.js
diff --git a/web_app/static/js/tify.js b/web_app/static/js/tify.js
diff --git a/web_app/templates/base.html b/web_app/templates/base.html
@@ -107,8 +107,7 @@
     <link rel="icon" type="image/png" sizes="16x16" href="{{ url_for('static', filename='favicon-16x16.png') }}">
     <link rel="manifest" href="{{ url_for('static', filename='site.webmanifest') }}">
 
-    <title class="pagetitle">{% block title %}
-    {% endblock %}</title>
+    <title class="pagetitle">{% block title %}{% endblock %}</title>
 
 </head>
 <body>
@@ -262,9 +261,10 @@ <h1 class="modal-title" id="loginModalLabel">Log In to the System</h1>
     {% block javascripts %}
     {% endblock %}
 
-
-    <!-- Analytics block -->
-    {{ analytics_code | safe }}
-
+    {% if site_env == "prod" %}
+        <!-- Analytics block -->
+        {{ analytics_code | safe }}
+    {% endif %}
+
 </body>
 </html>
diff --git a/web_app/templates/file.html b/web_app/templates/file.html
@@ -35,11 +35,17 @@ <h1 class="navbar-brand navtitle">Details of {{ file_details.file_name }}</h1>
     </div>
 
     <div class="row">
-        <div class="col-4">
+        {% if zoom == 1 %}
+            <div class="col-12">
+        {% else %}
+            <div class="col-6">
+        {% endif %}
+
             <h2>Image Preview:</h2>
 
                     {% if is_admin %}
                         <div style="text-align: left;"><a class="btn btn-primary btn-sm" href="{{ url_for('update_image', file_id=file_details.file_id) }}" role="button">Set Image as Sensitive</a></div>
+                        <br>
                     {% endif %}
 
 
@@ -53,15 +59,23 @@ <h2>Image Preview:</h2>
 
                     {% else %}
 
-                        {% if file_details.preview_image_ext == None %}
-                            <a href="{{ file_details.preview_image }}" rel="noopener noreferrer" title="Preview image of {{ file_details.file_name }}">
-                                <img src="{{ url_for('get_preview', file_id=file_details.file_id, max=600) }}" alt="Preview image of {{ file_details.file_name }}" class="img-fluid card-img-top">
-                            </a>
+                        {% if zoom == 1 %}
+
+                            <div id="openseadragon" style="width: 100%; height: 900px;" alt="Preview image of {{ file_details.file_name }}"></div>
 
                         {% else %}
 
-                            <img src="{{ file_details.preview_image_ext }}&max=600" alt="Preview image of {{ file_details.file_name }}" class="img-fluid card-img-top">
+                            {% if file_details.preview_image_ext == None %}
+                                <a href="{{ file_details.preview_image }}" rel="noopener noreferrer" title="Preview image of {{ file_details.file_name }}">
+                                    <img src="{{ url_for('get_preview', file_id=file_details.file_id, max=600) }}" alt="Preview image of {{ file_details.file_name }}" class="img-fluid card-img-top">
+                                </a>
+
+                            {% else %}
 
+                                <img src="{{ file_details.preview_image_ext }}&max=600" alt="Preview image of {{ file_details.file_name }}" class="img-fluid card-img-top">
+
+                            {% endif %}
+
                         {% endif %}
 
                         <p style="font-size: large;">Filename: {{ file_details.file_name }}</p>
@@ -90,74 +104,13 @@ <h1 class="modal-title" id="checkmodalLabel">Check Details</h1>
                     </div>
 
         </div>
-        <div class="col">
-
-            <div class="row">
-                <div class="col">
-
-                    <div class="card">
-                        <h2 class="card-header text-white bg-primary">File Technical Checks</h2>
-                        <div class="card-body">
-                            <table class="table compact table-striped" style="width:100%">
-                            <thead>
-                                <tr>
-                                    <th>Check</th>
-                                    <th>Result</th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                {% for check in file_checks %}
-                                    <tr>
-                                        <td style="font-size: small;">
-                                            <strong>{{ check.file_check }}</strong><br>
-                                                {% if check.file_check == 'tif_compression' %}
-                                                    TIF file is compressed using the lossless compression LZW.
-                                                {% elif check.file_check == 'tifpages' %}
-                                                    Check that there are no more than 1 page in the TIF, usually a thumbnail.
-                                                {% elif check.file_check == 'magick' %}
-                                                    File is valid according to ImageMagick.
-                                                {% elif check.file_check == 'jhove' %}
-                                                    File is valid according to <abbr title="JSTOR/Harvard Object Validation Environment">JHOVE</abbr>.
-                                                {% elif check.file_check == 'unique_file' %}
-                                                    Filename is unique in the project.
-                                                {% elif check.file_check == 'raw_pair' %}
-                                                    Raw file was found for the image.
-                                                {% elif check.file_check == 'valid_name' %}
-                                                    Filename is in the list of allowed names.
-                                                {% elif check.file_check == 'old_name' %}
-                                                    Filename was not found in list outside the project.
-                                                {% elif check.file_check == 'derivative' %}
-                                                    Derivative file is present.
-                                                {% elif check.file_check == 'prefix' %}
-                                                    Filename has the correct prefix.
-                                                {% elif check.file_check == 'sequence' %}
-                                                    File sequence is correct.
-                                                {% else %}
-                                                    Checks for {{ check.file_check }}.
-                                                {% endif %}
-                                        </td>
-                                        <td style="font-size: small;">
-                                            {% if check.check_results == 0 %}
-                                                <button type="button" class="btn btn-success btn-sm w-100" data-bs-toggle="modal" data-bs-target="#checkmodal" data-bs-info="{{ check.check_info }}">OK</button>
-                                            {% elif check.check_results == 1 %}
-                                                <button type="button" class="btn btn-danger btn-sm w-100" data-bs-toggle="modal" data-bs-target="#checkmodal" data-bs-info="{{ check.check_info }}">Failed</button>
-                                            {% elif check.check_results == 9 %}
-                                                <button type="button" class="btn btn-secondary btn-sm w-100" data-bs-toggle="modal" data-bs-target="#checkmodal" data-bs-info="{{ check.check_info }}">Pending</button>
-                                            {% endif %}
-                                        </td>
-                                    </tr>
-                                {% endfor %}
-                                </tbody>
-
-                            </table>
-                        </div>
-                    </div>
+    </div>
 
+    <div class="row">
+        <div class="col-4">
 
-                </div>
-                <div class="col">
-                    {% if file_links|length > 0 %}
-                    <!-- File Links -->
+            <!-- Image-related links and records-->
+                {% if file_links|length > 0 %}
                         <div class="card">
                             <p class="fs-3 card-header text-white bg-primary">Links related to this image</p>
                             <div class="card-body">
@@ -169,13 +122,69 @@ <h2 class="card-header text-white bg-primary">File Technical Checks</h2>
 
                                 </div>
                             </div>
-                        <!-- End card -->
                         </div>
                     {% endif %}
+
+            <div class="card">
+                <h2 class="card-header text-white bg-primary">File Technical Checks</h2>
+                <div class="card-body">
+                    <table class="table compact table-striped" style="width:100%">
+                    <thead>
+                        <tr>
+                            <th>Check</th>
+                            <th>Result</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {% for check in file_checks %}
+                            <tr>
+                                <td style="font-size: small;">
+                                    <strong>{{ check.file_check }}</strong><br>
+                                        {% if check.file_check == 'tif_compression' %}
+                                            TIF file is compressed using the lossless compression LZW.
+                                        {% elif check.file_check == 'tifpages' %}
+                                            Check that there are no more than 1 page in the TIF, usually a thumbnail.
+                                        {% elif check.file_check == 'magick' %}
+                                            File is valid according to ImageMagick.
+                                        {% elif check.file_check == 'jhove' %}
+                                            File is valid according to <abbr title="JSTOR/Harvard Object Validation Environment">JHOVE</abbr>.
+                                        {% elif check.file_check == 'unique_file' %}
+                                            Filename is unique in the project.
+                                        {% elif check.file_check == 'raw_pair' %}
+                                            Raw file was found for the image.
+                                        {% elif check.file_check == 'valid_name' %}
+                                            Filename is in the list of allowed names.
+                                        {% elif check.file_check == 'old_name' %}
+                                            Filename was not found in list outside the project.
+                                        {% elif check.file_check == 'derivative' %}
+                                            Derivative file is present.
+                                        {% elif check.file_check == 'prefix' %}
+                                            Filename has the correct prefix.
+                                        {% elif check.file_check == 'sequence' %}
+                                            File sequence is correct.
+                                        {% else %}
+                                            Checks for {{ check.file_check }}.
+                                        {% endif %}
+                                </td>
+                                <td style="font-size: small;">
+                                    {% if check.check_results == 0 %}
+                                        <button type="button" class="btn btn-success btn-sm w-100" data-bs-toggle="modal" data-bs-target="#checkmodal" data-bs-info="{{ check.check_info }}">OK</button>
+                                    {% elif check.check_results == 1 %}
+                                        <button type="button" class="btn btn-danger btn-sm w-100" data-bs-toggle="modal" data-bs-target="#checkmodal" data-bs-info="{{ check.check_info }}">Failed</button>
+                                    {% elif check.check_results == 9 %}
+                                        <button type="button" class="btn btn-secondary btn-sm w-100" data-bs-toggle="modal" data-bs-target="#checkmodal" data-bs-info="{{ check.check_info }}">Pending</button>
+                                    {% endif %}
+                                </td>
+                            </tr>
+                        {% endfor %}
+                        </tbody>
+
+                    </table>
                 </div>
             </div>
-
-            <hr>
+
+        </div>
+        <div class="col-8">
 
             <!--Embedded Metadata: -->
             <div style="font-size: small;">
@@ -190,6 +199,7 @@ <h2 class="card-header text-white bg-primary">File Technical Checks</h2>
         </div>
     </div>
 
+
 <br>
 
 {% endblock %}
@@ -241,4 +251,25 @@ <h2 class="card-header text-white bg-primary">File Technical Checks</h2>
         });
     </script>
 
+
+    {% if zoom == 1 %}
+        <!-- openseadragon -->
+        <script src="{{ url_for('static', filename='js/openseadragon.min.js') }}"></script>
+            <script type="text/javascript">
+                var viewer = OpenSeadragon({
+                    id: "openseadragon",
+                    prefixUrl: "{{ url_for('static', filename='images/') }}",
+                    tileSources: "{{ zoom_filename }}",
+                    timeout: 60000,
+                    tileRetryMax: 2,
+                    defaultZoomLevel: 0,
+                    preload: true,
+                    placeholderFillStyle: "#9e9d99",
+                    constrainDuringPan: true            
+                });
+        </script>
+
+    {% endif %}
+
+
 {% endblock %}
diff --git a/web_app/templates/file_iiif.html → web_app/templates/file_zoom.html b/web_app/templates/file_iiif.html → web_app/templates/file_zoom.html
@@ -8,11 +8,6 @@ <h1 class="navbar-brand navtitle">Details of {{ file_details.file_name }}</h1>
 
 {% block head_blocks %}
 
-
-
-<link rel="stylesheet" href="{{ url_for('static', filename='css/tify.css') }}">
-
-
 {% endblock %}
 
 
@@ -54,21 +49,18 @@ <h2>Image Preview:</h2>
 
                     {% if kiosk  %}
 
-                        <!-- <img src="{% if file_details.preview_image_ext == None %}{{ url_for('get_preview', file_id=file_details.file_id, max=600) }}{% else %}{{ file_details.preview_image_ext }}&max=600{% endif %}" alt="Preview image of {{ file_details.file_name }}" class="img-fluid card-img-top"> -->
-                        <div id="tify" style="width: 600px"></div>
+                        <img src="{% if file_details.preview_image_ext == None %}{{ url_for('get_preview', file_id=file_details.file_id, max=600) }}{% else %}{{ file_details.preview_image_ext }}&max=600{% endif %}" alt="Preview image of {{ file_details.file_name }}" class="img-fluid card-img-top">
 
                     {% else %}
 
                         {% if file_details.preview_image_ext == None %}
-                            <!-- <a href="{{ file_details.preview_image }}" rel="noopener noreferrer" title="Preview image of {{ file_details.file_name }}">
+                            <a href="{{ file_details.preview_image }}" rel="noopener noreferrer" title="Preview image of {{ file_details.file_name }}">
                                 <img src="{{ url_for('get_preview', file_id=file_details.file_id, max=600) }}" alt="Preview image of {{ file_details.file_name }}" class="img-fluid card-img-top">
-                            </a> -->
-                            <div id="tify" style="width: 600px"></div>
+                            </a>
 
                         {% else %}
 
-                            <!-- <img src="{{ file_details.preview_image_ext }}&max=600" alt="Preview image of {{ file_details.file_name }}" class="img-fluid card-img-top">  -->
-                            <div id="tify" style="width: 600px"></div>
+                            <img src="{{ file_details.preview_image_ext }}&max=600" alt="Preview image of {{ file_details.file_name }}" class="img-fluid card-img-top">
 
                         {% endif %}
 
@@ -249,15 +241,4 @@ <h2 class="card-header text-white bg-primary">File Technical Checks</h2>
         });
     </script>
 
-
-    <script src="{{ url_for('static', filename='js/tify.js') }}"></script>
-
-    <script>
-        new Tify({
-          container: '#tify',
-          manifestUrl: "{{ url_for('get_preview_iiif', file_id=file_details.file_id) }}"
-        })
-        </script>
-
-
 {% endblock %}