Updated the template for viewing stl models.

1 files changed, 102 insertions, 28 deletions

diff --git a/mediagoblin/templates/mediagoblin/media_displays/stl.html b/mediagoblin/templates/mediagoblin/media_displays/stl.html
index 6fd2b04d..2fcca62d 100644
--- a/mediagoblin/templates/mediagoblin/media_displays/stl.html
+++ b/mediagoblin/templates/mediagoblin/media_displays/stl.html
@@ -22,53 +22,127 @@
 {% block mediagoblin_media %}
 
 
-test...
-{% set display_media = request.app.public_store.file_url(
+{% set model_download = request.app.public_store.file_url(
    media.get_display_media(media.media_files)) %}
+{% set perspective_view = request.app.public_store.file_url(
+   media.media_files['perspective']) %}
+{% set top_view = request.app.public_store.file_url(
+   media.media_files['top']) %}
+{% set side_view = request.app.public_store.file_url(
+   media.media_files['side']) %}
+{% set front_view = request.app.public_store.file_url(
+   media.media_files['front']) %}
+
+<style type="text/css">
+#top_view, #side_view, #front_view, #thingy_view {
+    display: none;
+}
+</style>
 
 <script src="{{ request.staticdirect('/js/thingiview.js/Three.js') }}"></script>
 <script src="{{ request.staticdirect('/js/thingiview.js/plane.js') }}"></script>
 <script src="{{ request.staticdirect('/js/thingiview.js/thingiview.js') }}"></script>
 
 
-<script>
-  window.onload = function() {
+<script type="text/javascript">
+
+window.show = function (view_id) {
+    ids = [
+        "perspective",
+        "top_view",
+        "side_view",
+        "front_view",
+        "thingy_view",
+    ];
+    for (var i=0; i<ids.length; i+=1) {
+        id = ids[i];
+        var view = document.getElementById(id);
+        view.style.display = id===view_id ? "block" : "none";
+    }
+};
+
+window.show_things = function () {
+    document.getElementById("webgl_button").onclick = function () {
+        show('thingy_view');
+    };
+    window.show("thingy_view");
     thingiurlbase = "{{ request.staticdirect('/js/thingiview.js') }}";
-    thingiview = new Thingiview("viewer");
+    thingiview = new Thingiview("thingy_view");
     thingiview.setObjectColor('#821543');
     thingiview.initScene();
-    thingiview.loadSTL("{{ display_media }}");
+    thingiview.loadSTL("{{ model_download }}");
     thingiview.setRotation(false);
-  }
-  window.rotate = false;
-  window.toggle_rotate = function () {
-    rotate = ! rotate;
-    thingiview.setRotation(rotate);
-  };
+};
 </script>
 
-<div id="viewer" style="width:640px;height:480px;padding-bottom:4px;"></div
-<p>
-  <a class="button_action" onclick="toggle_rotate()"
+<img 
+   id="perspective"
+   class="media_image"
+   src="{{ perspective_view }}"
+   alt="{% trans media_title=media.title -%}
+        Image for {{ media_title }}{% endtrans %}" />
+<img 
+   id="top_view"
+   class="media_image"
+   src="{{ top_view }}"
+   alt="{% trans media_title=media.title -%}
+        Image for {{ media_title }}{% endtrans %}" />
+<img 
+   id="side_view"
+   class="media_image"
+   src="{{ side_view }}"
+   alt="{% trans media_title=media.title -%}
+        Image for {{ media_title }}{% endtrans %}" />
+<img 
+   id="front_view"
+   class="media_image"
+   src="{{ front_view }}"
+   alt="{% trans media_title=media.title -%}
+        Image for {{ media_title }}{% endtrans %}" />
+<div id="thingy_view" style="width:640px;height:640px;"></div>
+
+
+<div style="padding: 4px;">
+  <a class="button_action" onclick="show('perspective');"
      title="{%- trans %}Toggle Rotate{% endtrans -%}">
-    {%- trans %}Toggle Rotate{% endtrans -%}
+    {%- trans %}Perspective{% endtrans -%}
+  </a>
+  <a class="button_action" onclick="show('front_view');"
+     title="{%- trans %}Front{% endtrans -%}">
+    {%- trans %}Front{% endtrans -%}
   </a>
-  <a class="button_action" href="{{ display_media }}"
-     title="{%- trans %}Download{% endtrans -%}">
-    {%- trans %}Download{% endtrans -%}
+  <a class="button_action" onclick="show('top_view');"
+     title="{%- trans %}Top{% endtrans -%}">
+    {%- trans %}Top{% endtrans -%}
+  </a>
+  <a class="button_action" onclick="show('side_view');"
+     title="{%- trans %}Side{% endtrans -%}">
+    {%- trans %}Side{% endtrans -%}
+  </a>
+  <a id="webgl_button" class="button_action"
+     onclick="show_things();"
+     title="{%- trans %}WebGL{% endtrans -%}">
+    {%- trans %}WebGL{% endtrans -%}
   </a>
-</p>
+
+  <a class="button_action" href="{{ model_download }}"
+     title="{%- trans %}Download{% endtrans -%}"
+     style="float:right;">
+    {%- trans %}Download model{% endtrans -%}
+  </a>
+</div>
 
 
 {% endblock %}
 
 {% block mediagoblin_sidebar %}
-{#
- #
- #<ul>
- # <li>{% trans %}width:{% endtrans %} {{media.media_data.width}} mm</li>
- # <li>{% trans %}depth:{% endtrans %} {{media.media_data.depth}} mm</li>
- # <li>{% trans %}height:{% endtrans %} {{media.media_data.height}} mm</li>
- #</ul>
- #}
+<h3>debug info</h3>
+<ul>
+ <li>width: {{media.media_data.width}} mm</li>
+ <li>depth: {{media.media_data.depth}} mm</li>
+ <li>height: {{media.media_data.height}} mm</li>
+ <li>cx: {{media.media_data.center_x}} mm</li>
+ <li>cy: {{media.media_data.center_y}} mm</li>
+ <li>cz: {{media.media_data.center_z}} mm</li>
+</ul>
 {% endblock %}