mirror
/
OpenDroneMap-WebODM
kopia lustrzana https://github.com/OpenDroneMap/WebODM
1
0
Forkuj 0
Kod Zgłoszenia Projekty Wydania Wiki Aktywność

Add placeholder on view loads

pull/1585/head
Piero Toffanin 2025-01-13 14:48:39 -05:00
rodzic 517912d84c
commit 11bc03bebf
13 zmienionych plików z 164 dodań i 94 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

5
app/templates/app/3d_model_css.html 100644
Wyświetl plik

@ -0,0 +1,5 @@
<link rel="stylesheet" type="text/css" href="/static/app/js/vendor/potree/build/potree/potree.css">
<link rel="stylesheet" type="text/css" href="/static/app/js/vendor/potree/libs/jquery-ui/jquery-ui.min.css">
<link rel="stylesheet" type="text/css" href="/static/app/js/vendor/potree/libs/openlayers3/ol.css">
<link rel="stylesheet" type="text/css" href="/static/app/js/vendor/potree/libs/spectrum/spectrum.css">
<link rel="stylesheet" type="text/css" href="/static/app/js/vendor/potree/libs/jstree/themes/mixed/style.css">

31
app/templates/app/3d_model_display.html
Wyświetl plik

@ -1,31 +1,10 @@
{% extends "app/logged_in_base.html" %}
{% load i18n %}
{% block headers-before-bundle %}
<link rel="stylesheet" type="text/css" href="/static/app/js/vendor/potree/build/potree/potree.css">
<link rel="stylesheet" type="text/css" href="/static/app/js/vendor/potree/libs/jquery-ui/jquery-ui.min.css">
<link rel="stylesheet" type="text/css" href="/static/app/js/vendor/potree/libs/openlayers3/ol.css">
<link rel="stylesheet" type="text/css" href="/static/app/js/vendor/potree/libs/spectrum/spectrum.css">
<link rel="stylesheet" type="text/css" href="/static/app/js/vendor/potree/libs/jstree/themes/mixed/style.css">
<script src="/static/app/js/vendor/potree/libs/spectrum/spectrum.js"></script>
<script src="/static/app/js/vendor/potree/libs/jquery-ui/jquery-ui.min.js"></script>
<script src="/static/app/js/vendor/potree/libs/three.js/build/three.min.js"></script>
<script src="/static/app/js/vendor/potree/libs/three.js/extra/lines.js"></script>
<script src="/static/app/js/vendor/potree/libs/other/BinaryHeap.js"></script>
<script src="/static/app/js/vendor/potree/libs/tween/tween.min.js"></script>
<script src="/static/app/js/vendor/potree/libs/d3/d3.js"></script>
<script src="/static/app/js/vendor/potree/libs/proj4/proj4.js"></script>
<script src="/static/app/js/vendor/potree/libs/openlayers3/ol.js"></script>
<script src="/static/app/js/vendor/potree/libs/i18next/i18next.js"></script>
<script src="/static/app/js/vendor/potree/libs/jstree/jstree.js"></script>
<script src="/static/app/js/vendor/potree/build/potree/potree.js"></script>
<script src="/static/app/js/vendor/potree/libs/plasio/js/laslaz.js"></script>
{% include "3d_model_css.html" %}
{% endblock %}
{% block content %}
{% load render_bundle from webpack_loader %}
{% render_bundle 'ModelView' attrs='async' %}
<h3 class="model-title" title="{{title}}"><i class="fa fa-cube"></i> {{title}}</h3>
@ -33,6 +12,12 @@
{% for key, value in params %}
data-{{key}}="{{value}}"
{% endfor %}
></div>
>
{% include "3d_model_placeholder.html" %}
</div>
{% include "3d_model_js.html" %}
{% load render_bundle from webpack_loader %}
{% render_bundle 'ModelView' attrs='async' %}
{% endblock %}

13
app/templates/app/3d_model_js.html 100644
Wyświetl plik

@ -0,0 +1,13 @@
<script src="/static/app/js/vendor/potree/libs/spectrum/spectrum.js"></script>
<script src="/static/app/js/vendor/potree/libs/jquery-ui/jquery-ui.min.js"></script>
<script src="/static/app/js/vendor/potree/libs/three.js/build/three.min.js"></script>
<script src="/static/app/js/vendor/potree/libs/three.js/extra/lines.js"></script>
<script src="/static/app/js/vendor/potree/libs/other/BinaryHeap.js"></script>
<script src="/static/app/js/vendor/potree/libs/tween/tween.min.js"></script>
<script src="/static/app/js/vendor/potree/libs/d3/d3.js"></script>
<script src="/static/app/js/vendor/potree/libs/proj4/proj4.js"></script>
<script src="/static/app/js/vendor/potree/libs/openlayers3/ol.js"></script>
<script src="/static/app/js/vendor/potree/libs/i18next/i18next.js"></script>
<script src="/static/app/js/vendor/potree/libs/jstree/jstree.js"></script>
<script src="/static/app/js/vendor/potree/build/potree/potree.js"></script>
<script src="/static/app/js/vendor/potree/libs/plasio/js/laslaz.js"></script>

3
app/templates/app/3d_model_placeholder.html 100644
Wyświetl plik

@ -0,0 +1,3 @@
<div class="placeholder-item pulse" id="td-model-placeholder" style="margin-top: 16px; display: flex; height: calc(100% - 32px); width: 100%; justify-content: center; align-items: center">
<i class="fa fa-cube"></i>
</div>

25
app/templates/app/dashboard.html
Wyświetl plik

@ -3,9 +3,6 @@
{% load settings %}
{% block content %}
{% load render_bundle from webpack_loader %}
{% render_bundle 'Dashboard' attrs='async' %}
<!--[if lte IE 8]>
<div class="alert alert-warning alert-dismissible">
WebODM cannot be used with this version of Internet Explorer. Could you please upgrade <a href="https://www.microsoft.com/en-us/download/internet-explorer.aspx">Internet Explorer</a> to the latest version or use <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>?
@ -47,7 +44,25 @@
{% for key, value in params %}
data-{{key}}="{{value}}"
{% endfor %}
></div>
>
<div id="dashboard-placeholder" style="height: 100%">
<div style="display: flex; margin-top: 4px">
<div style="width: 90%"></div>
<div class="placeholder-item border shimmer" style="width: 10%; height: 34px; margin-right: 4px;"></div>
</div>
<div style="display: flex; margin-top: 4px">
<div style="width: 95%"></div>
<div class="placeholder-item border shimmer" style="width: 5%; height: 28px; margin-right: 4px;"></div>
</div>
<div class="placeholder-item pulse border shimmer" style="height: 100px; margin-top: 16px; width: 100%;"></div>
<div class="placeholder-item pulse border shimmer" style="height: 100px; margin-top: 16px; width: 100%;"></div>
<div class="placeholder-item pulse border shimmer" style="height: 100px; margin-top: 16px; width: 100%;"></div>
</div>
</div>
{% endif %}
{% load render_bundle from webpack_loader %}
{% render_bundle 'Dashboard' attrs='async' %}
{% endblock %}

12
app/templates/app/map.html
Wyświetl plik

@ -1,14 +1,14 @@
{% extends "app/logged_in_base.html" %}
{% load i18n %}
{% block content %}
{% load render_bundle from webpack_loader %}
{% render_bundle 'MapView' attrs='async' %}
<div data-mapview
<div data-mapview
{% for key, value in params %}
data-{{key}}="{{value}}"
{% endfor %}
></div>
>
{% include "map_placeholder.html" %}
</div>
{% load render_bundle from webpack_loader %}
{% render_bundle 'MapView' attrs='async' %}
{% endblock %}

13
app/templates/app/map_placeholder.html 100644
Wyświetl plik

@ -0,0 +1,13 @@
<div id="map-placeholder" style="height: 100%">
<div style="display: flex; margin-top: 4px" id="map-placeholder-header">
<div class="placeholder-item border" style="width: 34px; height: 34px; border-radius: 100%; margin-right: 8px;"></div>
<div class="placeholder-item shimmer" style="width: 33%; height: 34px;"></div>
<div style="width: 45%"></div>
<div class="placeholder-item border shimmer" style="width: 10%; height: 34px; margin-right: 4px;"></div>
<div class="placeholder-item border shimmer" style="width: 10%; height: 34px;"></div>
</div>
<div class="placeholder-item pulse" id="map-placeholder-map" style="margin-top: 16px; display: flex; height: calc(100% - 32px); width: 100%; justify-content: center; align-items: center">
<i class="fa fa-globe"></i>
</div>
</div>

35
app/templates/app/public/3d_model_display.html
Wyświetl plik

@ -1,36 +1,23 @@
{% extends "app/public/base.html" %}
{% block headers-before-bundle %}
<link rel="stylesheet" type="text/css" href="/static/app/js/vendor/potree/build/potree/potree.css">
<link rel="stylesheet" type="text/css" href="/static/app/js/vendor/potree/libs/jquery-ui/jquery-ui.min.css">
<link rel="stylesheet" type="text/css" href="/static/app/js/vendor/potree/libs/openlayers3/ol.css">
<link rel="stylesheet" type="text/css" href="/static/app/js/vendor/potree/libs/spectrum/spectrum.css">
<link rel="stylesheet" type="text/css" href="/static/app/js/vendor/potree/libs/jstree/themes/mixed/style.css">
<script src="/static/app/js/vendor/potree/libs/spectrum/spectrum.js"></script>
<script src="/static/app/js/vendor/potree/libs/jquery-ui/jquery-ui.min.js"></script>
<script src="/static/app/js/vendor/potree/libs/three.js/build/three.min.js"></script>
<script src="/static/app/js/vendor/potree/libs/three.js/extra/lines.js"></script>
<script src="/static/app/js/vendor/potree/libs/other/BinaryHeap.js"></script>
<script src="/static/app/js/vendor/potree/libs/tween/tween.min.js"></script>
<script src="/static/app/js/vendor/potree/libs/d3/d3.js"></script>
<script src="/static/app/js/vendor/potree/libs/proj4/proj4.js"></script>
<script src="/static/app/js/vendor/potree/libs/openlayers3/ol.js"></script>
<script src="/static/app/js/vendor/potree/libs/i18next/i18next.js"></script>
<script src="/static/app/js/vendor/potree/libs/jstree/jstree.js"></script>
<script src="/static/app/js/vendor/potree/build/potree/potree.js"></script>
<script src="/static/app/js/vendor/potree/libs/plasio/js/laslaz.js"></script>
{% include "3d_model_css.html" %}
{% endblock %}
{% block content %}
{% load render_bundle from webpack_loader %}
{% render_bundle 'ModelView' attrs='async' %}
<h3 class="model-title" title="{{title}}"><i class="fa fa-cube"></i> {{title}}</h3>
<div data-modelview class="full-height"
{% for key, value in params %}
<div data-modelview class="full-height"
{% for key, value in params %}
data-{{key}}="{{value}}"
{% endfor %}
></div>
>
{% include "3d_model_placeholder.html" %}
</div>
{% include "3d_model_js.html" %}
{% load render_bundle from webpack_loader %}
{% render_bundle 'ModelView' attrs='async' %}
{% endblock %}

45
app/templates/app/public/3d_model_display_iframe.html
Wyświetl plik

@ -1,34 +1,27 @@
{% extends "app/public/iframe_base.html" %}
{% block headers-before-bundle %}
<link rel="stylesheet" type="text/css" href="/static/app/js/vendor/potree/build/potree/potree.css">
<link rel="stylesheet" type="text/css" href="/static/app/js/vendor/potree/libs/jquery-ui/jquery-ui.min.css">
<link rel="stylesheet" type="text/css" href="/static/app/js/vendor/potree/libs/openlayers3/ol.css">
<link rel="stylesheet" type="text/css" href="/static/app/js/vendor/potree/libs/spectrum/spectrum.css">
<link rel="stylesheet" type="text/css" href="/static/app/js/vendor/potree/libs/jstree/themes/mixed/style.css">
<script src="/static/app/js/vendor/potree/libs/spectrum/spectrum.js"></script>
<script src="/static/app/js/vendor/potree/libs/jquery-ui/jquery-ui.min.js"></script>
<script src="/static/app/js/vendor/potree/libs/three.js/build/three.min.js"></script>
<script src="/static/app/js/vendor/potree/libs/three.js/extra/lines.js"></script>
<script src="/static/app/js/vendor/potree/libs/other/BinaryHeap.js"></script>
<script src="/static/app/js/vendor/potree/libs/tween/tween.min.js"></script>
<script src="/static/app/js/vendor/potree/libs/d3/d3.js"></script>
<script src="/static/app/js/vendor/potree/libs/proj4/proj4.js"></script>
<script src="/static/app/js/vendor/potree/libs/openlayers3/ol.js"></script>
<script src="/static/app/js/vendor/potree/libs/i18next/i18next.js"></script>
<script src="/static/app/js/vendor/potree/libs/jstree/jstree.js"></script>
<script src="/static/app/js/vendor/potree/build/potree/potree.js"></script>
<script src="/static/app/js/vendor/potree/libs/plasio/js/laslaz.js"></script>
{% include "3d_model_css.html" %}
{% endblock %}
{% block content %}
{% load render_bundle from webpack_loader %}
{% render_bundle 'ModelView' attrs='async' %}
<style type="text/css">
#td-model-placeholder{
position: absolute !important; top: 0; bottom: 0; left: 0; right: 0;
margin-top: 0px !important;
height: 100% !important;
}
</style>
<div data-modelview class="full-height"
{% for key, value in params %}
data-{{key}}="{{value}}"
{% endfor %}
></div>
<div data-modelview class="full-height"
{% for key, value in params %}
data-{{key}}="{{value}}"
{% endfor %}
>
{% include "3d_model_placeholder.html" %}
</div>
{% include "3d_model_js.html" %}
{% load render_bundle from webpack_loader %}
{% render_bundle 'ModelView' attrs='async' %}
{% endblock %}

1
app/templates/app/public/iframe_base.html
Wyświetl plik

@ -2,6 +2,7 @@
{% block body %}
<div id="iframe">
<style type="text/css">body{height: 100%;}</style>
{% block content %}{% endblock %}
</div>
{% endblock %}

12
app/templates/app/public/map.html
Wyświetl plik

@ -1,12 +1,16 @@
{% extends "app/public/base.html" %}
{% block content %}
{% load render_bundle from webpack_loader %}
{% render_bundle 'MapView' attrs='async' %}
<style type="text/css">#map-placeholder-header{margin-top: 20px !important}</style>
<div data-mapview
<div data-mapview
{% for key, value in params %}
data-{{key}}="{{value}}"
{% endfor %}
></div>
>
{% include "map_placeholder.html" %}
</div>
{% load render_bundle from webpack_loader %}
{% render_bundle 'MapView' attrs='async' %}
{% endblock %}

23
app/templates/app/public/map_iframe.html
Wyświetl plik

@ -1,11 +1,24 @@
{% extends "app/public/iframe_base.html" %}
{% block content %}
<style type="text/css">
#map-placeholder-header{
display: none !important;
}
#map-placeholder-map{
position: absolute; top: 0; bottom: 0; left: 0; right:0;
margin-top: 0 !important;
height: 100% !important;
}
</style>
<div data-mapview
{% for key, value in params %}
data-{{key}}="{{value}}"
{% endfor %}
>
{% include "map_placeholder.html" %}
</div>
{% load render_bundle from webpack_loader %}
{% render_bundle 'MapView' attrs='async' %}
<div data-mapview
{% for key, value in params %}
data-{{key}}="{{value}}"
{% endfor %}
></div>
{% endblock %}

40
app/templates/app/theme.css
Wyświetl plik

@ -316,4 +316,42 @@ pre.prettyprint:focus,
.tag-badge a, .tag-badge a:hover{
color: {{ theme_secondary }};
}
}
@keyframes placeHolderShimmer {
0%{ background-position: 100% 0; }
100%{ background-position: -100% 0; }
}
@keyframes placeHolderPulse {
0%{ opacity: 0.2; }
50%{ opacity: 0.4; }
100%{ opacity: 0.2; }
}
.placeholder-item{
border-radius: 4px;
background: {{ theme_highlight }};
}
.placeholder-item.shimmer{
animation-duration: 1.5s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-name: placeHolderShimmer;
background: {{ theme_highlight }};
background: linear-gradient(to right, {% scalebyiv theme_highlight 1.1 %} 8%, {% scalebyiv theme_highlight 0.9 %} 18%, {% scalebyiv theme_highlight 1.1 %} 33%);
background-size: 200% 100%;
}
.placeholder-item.border{
border: 1px solid {{ theme_border }};
}
.placeholder-item i{
color: {% scalebyiv theme_highlight 0.7 %};
font-size: 800%;
opacity: 0.2;
animation-duration: 0.75s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-name: placeHolderPulse;
}