adds associated image viewer

This commit is contained in:
buttle 2021-06-20 19:32:46 +02:00
parent caf3e3d389
commit ee6a483d40
7 changed files with 64 additions and 31 deletions

18
app.py
View File

@ -64,6 +64,24 @@ def list_dir(dir_path):
current_dir=dir_path.rstrip('/'), current_dir=dir_path.rstrip('/'),
content=content) 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>') @route('/render/<file_path:path>')
def render(file_path): def render(file_path):
file_path = file_path.replace('/render/', '') file_path = file_path.replace('/render/', '')

View File

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

10
views/_nav.tpl Normal file
View File

@ -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>

View File

@ -1,5 +1,7 @@
% rebase('base.tpl') % rebase('base.tpl')
% include('_nav.tpl', current_dir=current_dir, object=object)
<script src="/static/jquery-3.6.0.min.js"></script> <script src="/static/jquery-3.6.0.min.js"></script>
<style> <style>
@ -46,17 +48,6 @@ model-viewer {
</style> </style>
%end %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 class="model-wrap" style="display:none">
<div id="model" style="display:absolute"> <div id="model" style="display:absolute">
<model-viewer id="3d-model" <model-viewer id="3d-model"

8
views/image.tpl Normal file
View File

@ -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>

View File

@ -27,12 +27,18 @@ td .fa {
{{item['name']}} {{item['name']}}
</a> </a>
%else: %else:
<i class="fa fa-file-o" aria-hidden="true"></i>
%if item['is_object_file'] == True: %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']}} {{item['name']}}
</a>
%else: %else:
<i class="fa fa-file-o" aria-hidden="true"></i>
{{item['name']}} {{item['name']}}
%end %end
%end %end

View File

@ -1,19 +1,10 @@
% rebase('base.tpl') % 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/vue.js"></script>
<script src="/static/vendor/vue-3d-model/vue-3d-model.umd.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 class="model-wrap">
<div id="object"> <div id="object">
%if object['type'] == "gltf": %if object['type'] == "gltf":