adds associated image viewer

app.py

@@ -64,6 +64,24 @@ def list_dir(dir_path):
                     current_dir=dir_path.rstrip('/'),
                     content=content)
 
+
+@route('/img/<filename:path>')
+def send_image(filename):
+    return static_file(filename, root=OBJECT_DIR)
+
+@route('/image/<file_path:path>')
+def image(file_path):
+    file_path = file_path.replace('/img/', '')
+    parts = file_path.split('/')
+    file_name = parts.pop()
+    return template('image',
+                    current_dir=file_path.replace(file_name, ""),
+                    name=file_name,
+                    object={'type': 'image',
+                            'url': f"/img{file_path}"
+                            }
+                )
+
 @route('/render/<file_path:path>')
 def render(file_path):
     file_path = file_path.replace('/render/', '')

utils/utils.py

@@ -19,6 +19,7 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
 import os
 from pathlib import Path
+import mimetypes
 
 BASE_DIR = os.path.abspath(
                         os.path.join(
@@ -29,18 +30,26 @@ OBJECT_DIR = os.path.join(BASE_DIR, 'objects')
 OBJECT_TYPES = ['gltf', 'glb', 'obj', 'fbx', 'stl', 'dae', 'json', 'ply']
 
 def get_directory_content(dir_path):
+    mimetypes.init()
     content = []
     for p in Path(dir_path).iterdir():
-        file = Path(p)
-        if file.name.startswith("."):
+        file_path = Path(p)
+        file_name = Path(file_path.name)
+        if file_path.name.startswith("."):
             continue
-        model_type = (Path(file.name).suffix).lstrip('.').lower()
-        is_object_file = True if model_type in OBJECT_TYPES else False
+        file_extension = (Path(file_path.name).suffix).lstrip('.').lower()
+        is_object_file = True if file_extension in OBJECT_TYPES else False
+        is_dir = True if p.is_dir() else False
+        is_image = False
+        if not is_dir:
+            mimetype, _ = mimetypes.guess_type(str(Path(p)))
+            is_image = True if mimetype and 'image' in mimetype else False
         item = {
                 'name': os.path.basename(p),
                 'size': human_readable_bytes(os.path.getsize(p)),
-                'is_dir': True if p.is_dir() else False,
-                'is_object_file': is_object_file
+                'is_dir': is_dir,
+                'is_object_file': is_object_file,
+                'is_image': is_image
         }
         content.append(item)
     return content

views/_nav.tpl

@@ -0,0 +1,10 @@
+<h3>
+  <i class="fa fa-folder-o" aria-hidden="true"></i>
+  <a href="/list/{{ current_dir.rstrip('/') }}">objects/{{current_dir}}</a>
+</h3>
+<h4>
+  <span style="text-transform: uppercase">
+    {{ object['type'] }}:
+  </span>
+  {{name}}
+</h4>

views/google.tpl

@@ -1,5 +1,7 @@
 % rebase('base.tpl')
 
+% include('_nav.tpl', current_dir=current_dir, object=object)
+
 <script src="/static/jquery-3.6.0.min.js"></script>
 
 <style>
@@ -46,17 +48,6 @@ model-viewer {
 </style>
 %end
 
-<h3>
-  <i class="fa fa-folder-o" aria-hidden="true"></i>
-  <a href="/list/{{ current_dir.rstrip('/') }}">objects/{{current_dir}}</a>
-</h3>
-<h4>
-  <span style="text-transform: uppercase">
-    {{ object['type'] }}:
-  </span>
-  {{name}}
-</h4>
-
 <div class="model-wrap" style="display:none">
   <div id="model" style="display:absolute">
     <model-viewer id="3d-model"

views/image.tpl

@@ -0,0 +1,8 @@
+% rebase('base.tpl')
+
+% include('_nav.tpl', current_dir=current_dir, object=object)
+
+
+<div id="image_display">
+  <img src="{{ object['url'] }}" />
+</div>

views/list-dir.tpl

@@ -27,12 +27,18 @@ td .fa {
             {{item['name']}}
           </a>
           %else:
-            <i class="fa fa-file-o" aria-hidden="true"></i>
             %if item['is_object_file'] == True:
-            <a href="/render/{{current_dir}}/{{item['name']}}">
+              <a href="/render/{{current_dir}}/{{item['name']}}">
+                <i class="fa fa-file" aria-hidden="true"></i></a>
+              <a href="/render/{{current_dir}}/{{item['name']}}">
+                {{item['name']}}
+              </a>
+            %elif item['is_image']:
+              <a href="/image/{{current_dir}}/{{item['name']}}">
+                <i class="fa fa-file-image-o" aria-hidden="true"></i></a>
               {{item['name']}}
-            </a>
             %else:
+              <i class="fa fa-file-o" aria-hidden="true"></i>
               {{item['name']}}
             %end
           %end

views/vue-3d.tpl

@@ -1,19 +1,10 @@
 % rebase('base.tpl')
 
+% include('_nav.tpl', current_dir=current_dir, object=object)
+
 <script src="/static/vendor/vue/vue.js"></script>
 <script src="/static/vendor/vue-3d-model/vue-3d-model.umd.js"></script>
 
-<h3>
-  <i class="fa fa-folder-o" aria-hidden="true"></i>
-  <a href="/list/{{ current_dir.rstrip('/') }}">objects/{{current_dir}}</a>
-</h3>
-<h4>
-  <span style="text-transform: uppercase">
-    {{ object['type'] }}:
-  </span>
-  {{name}}
-</h4>
-
 <div class="model-wrap">
   <div id="object">
     %if object['type'] == "gltf":