mediagoblin/templates/mediagoblin/media_displays/stl.html

   1 {#
   2 # GNU MediaGoblin -- federated, autonomous media hosting
   3 # Copyright (C) 2011, 2012 MediaGoblin contributors.  See AUTHORS.
   4 #
   5 # This program is free software: you can redistribute it and/or modify
   6 # it under the terms of the GNU Affero General Public License as published by
   7 # the Free Software Foundation, either version 3 of the License, or
   8 # (at your option) any later version.
   9 #
  10 # This program is distributed in the hope that it will be useful,
  11 # but WITHOUT ANY WARRANTY; without even the implied warranty of
  12 # MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  13 # GNU Affero General Public License for more details.
  14 #
  15 # You should have received a copy of the GNU Affero General Public License
  16 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
  17 #}
  18
  19 {% extends 'mediagoblin/user_pages/media.html' %}
  20
  21
  22 {% block mediagoblin_media %}
  23
  24
  25 {% set model_download = request.app.public_store.file_url(
  26    media.get_display_media(media.media_files)) %}
  27 {% set perspective_view = request.app.public_store.file_url(
  28    media.media_files['perspective']) %}
  29 {% set top_view = request.app.public_store.file_url(
  30    media.media_files['top']) %}
  31 {% set side_view = request.app.public_store.file_url(
  32    media.media_files['side']) %}
  33 {% set front_view = request.app.public_store.file_url(
  34    media.media_files['front']) %}
  35
  36 <style type="text/css">
  37 #top_view, #side_view, #front_view, #thingy_view {
  38     display: none;
  39 }
  40 </style>
  41
  42 <script src="{{ request.staticdirect('/js/thingiview.js/Three.js') }}"></script>
  43 <script src="{{ request.staticdirect('/js/thingiview.js/plane.js') }}"></script>
  44 <script src="{{ request.staticdirect('/js/thingiview.js/thingiview.js') }}"></script>
  45
  46
  47 <script type="text/javascript">
  48
  49 window.show = function (view_id) {
  50     ids = [
  51         "perspective",
  52         "top_view",
  53         "side_view",
  54         "front_view",
  55         "thingy_view",
  56     ];
  57     for (var i=0; i<ids.length; i+=1) {
  58         id = ids[i];
  59         var view = document.getElementById(id);
  60         view.style.display = id===view_id ? "block" : "none";
  61     }
  62 };
  63
  64 window.show_things = function () {
  65     document.getElementById("webgl_button").onclick = function () {
  66         show('thingy_view');
  67     };
  68     window.show("thingy_view");
  69     thingiurlbase = "{{ request.staticdirect('/js/thingiview.js') }}";
  70     thingiview = new Thingiview("thingy_view");
  71     thingiview.setObjectColor('#821543');
  72     thingiview.initScene();
  73     thingiview.loadSTL("{{ model_download }}");
  74     thingiview.setRotation(false);
  75 };
  76 </script>
  77
  78 <img
  79    id="perspective"
  80    class="media_image"
  81    src="{{ perspective_view }}"
  82    alt="{% trans media_title=media.title -%}
  83         Image for {{ media_title }}{% endtrans %}" />
  84 <img
  85    id="top_view"
  86    class="media_image"
  87    src="{{ top_view }}"
  88    alt="{% trans media_title=media.title -%}
  89         Image for {{ media_title }}{% endtrans %}" />
  90 <img
  91    id="side_view"
  92    class="media_image"
  93    src="{{ side_view }}"
  94    alt="{% trans media_title=media.title -%}
  95         Image for {{ media_title }}{% endtrans %}" />
  96 <img
  97    id="front_view"
  98    class="media_image"
  99    src="{{ front_view }}"
 100    alt="{% trans media_title=media.title -%}
 101         Image for {{ media_title }}{% endtrans %}" />
 102 <div id="thingy_view" style="width:640px;height:640px;"></div>
 103
 104
 105 <div style="padding: 4px;">
 106   <a class="button_action" onclick="show('perspective');"
 107      title="{%- trans %}Toggle Rotate{% endtrans -%}">
 108     {%- trans %}Perspective{% endtrans -%}
 109   </a>
 110   <a class="button_action" onclick="show('front_view');"
 111      title="{%- trans %}Front{% endtrans -%}">
 112     {%- trans %}Front{% endtrans -%}
 113   </a>
 114   <a class="button_action" onclick="show('top_view');"
 115      title="{%- trans %}Top{% endtrans -%}">
 116     {%- trans %}Top{% endtrans -%}
 117   </a>
 118   <a class="button_action" onclick="show('side_view');"
 119      title="{%- trans %}Side{% endtrans -%}">
 120     {%- trans %}Side{% endtrans -%}
 121   </a>
 122   <a id="webgl_button" class="button_action"
 123      onclick="show_things();"
 124      title="{%- trans %}WebGL{% endtrans -%}">
 125     {%- trans %}WebGL{% endtrans -%}
 126   </a>
 127
 128   <a class="button_action" href="{{ model_download }}"
 129      title="{%- trans %}Download{% endtrans -%}"
 130      style="float:right;">
 131     {%- trans %}Download model{% endtrans -%}
 132   </a>
 133 </div>
 134
 135
 136 {% endblock %}
 137
 138 {% block mediagoblin_sidebar %}
 139 <h3>debug info</h3>
 140 <ul>
 141  <li>width: {{media.media_data.width}} mm</li>
 142  <li>depth: {{media.media_data.depth}} mm</li>
 143  <li>height: {{media.media_data.height}} mm</li>
 144  <li>cx: {{media.media_data.center_x}} mm</li>
 145  <li>cy: {{media.media_data.center_y}} mm</li>
 146  <li>cz: {{media.media_data.center_z}} mm</li>
 147 </ul>
 148 {% endblock %}