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.media_files['original']) %}
  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 .media_image {
  41     cursor: inherit!important;
  42 }
  43
  44 </style>
  45
  46 {% if media.media_data.file_type == "stl" %}
  47   <script src="{{ request.staticdirect('/js/extlib/thingiview.js/Three.js') }}"></script>
  48   <script src="{{ request.staticdirect('/js/extlib/thingiview.js/plane.js') }}"></script>
  49   <script src="{{ request.staticdirect('/js/extlib/thingiview.js/thingiview.js') }}"></script>
  50 {% endif %}
  51
  52
  53 <script type="text/javascript">
  54 window.show = function (view_id) {
  55     ids = [
  56         "perspective",
  57         "top_view",
  58         "side_view",
  59         "front_view",
  60         "thingy_view",
  61     ];
  62     for (var i=0; i<ids.length; i+=1) {
  63         id = ids[i];
  64         var view = document.getElementById(id);
  65         view.style.display = id===view_id ? "block" : "none";
  66     }
  67 };
  68
  69 window.show_things = function () {
  70     document.getElementById("webgl_button").onclick = function () {
  71         show('thingy_view');
  72     };
  73     window.show("thingy_view");
  74     thingiurlbase = "{{ request.staticdirect('/js/extlib/thingiview.js') }}";
  75     thingiview = new Thingiview("thingy_view");
  76     thingiview.setObjectColor('#821543');
  77     thingiview.initScene();
  78     thingiview.loadSTL("{{ model_download }}");
  79     thingiview.setRotation(false);
  80 };
  81 </script>
  82
  83 <div class="media_pane eleven columns">
  84 <div class="media_image_container">
  85
  86 <img
  87    id="perspective"
  88    class="media_image"
  89    src="{{ perspective_view }}"
  90    alt="{% trans media_title=media.title -%}
  91         Image for {{ media_title }}{% endtrans %}" />
  92 <img
  93    id="top_view"
  94    class="media_image"
  95    src="{{ top_view }}"
  96    alt="{% trans media_title=media.title -%}
  97         Image for {{ media_title }}{% endtrans %}" />
  98 <img
  99    id="side_view"
 100    class="media_image"
 101    src="{{ side_view }}"
 102    alt="{% trans media_title=media.title -%}
 103         Image for {{ media_title }}{% endtrans %}" />
 104 <img
 105    id="front_view"
 106    class="media_image"
 107    src="{{ front_view }}"
 108    alt="{% trans media_title=media.title -%}
 109         Image for {{ media_title }}{% endtrans %}" />
 110 <!--<div id="thingy_view" style="width:640px;height:640px;"></div>-->
 111 <div id="thingy_view"></div>
 112
 113 </div>
 114
 115 <div style="padding: 4px;">
 116   <a class="button_action" onclick="show('perspective');">
 117     {%- trans %}Perspective{% endtrans -%}
 118   </a>
 119   <a class="button_action" onclick="show('front_view');">
 120     {%- trans %}Front{% endtrans -%}
 121   </a>
 122   <a class="button_action" onclick="show('top_view');">
 123     {%- trans %}Top{% endtrans -%}
 124   </a>
 125   <a class="button_action" onclick="show('side_view');">
 126     {%- trans %}Side{% endtrans -%}
 127   </a>
 128 {% if media.media_data.file_type == "stl" %}
 129   <a id="webgl_button" class="button_action"
 130      onclick="show_things();">
 131     {%- trans %}WebGL{% endtrans -%}
 132   </a>
 133 {% endif %}
 134
 135   <a class="button_action" href="{{ model_download }}"
 136      style="float:right;">
 137     {%- trans %}Download model{% endtrans -%}
 138   </a>
 139 </div>
 140
 141 </div>
 142
 143 {% endblock %}
 144
 145 {% block mediagoblin_sidebar %}
 146 <h3>{% trans %}File Format{% endtrans %}</h3>
 147 <p>{{ media.media_data.file_type }}</p>
 148 <h3>{% trans %}Object Height{% endtrans %}</h3>
 149 <p>~{{ media.media_data.height|int }} mm</p>
 150 {% template_hook("stl_sideinfo") %}
 151 {% endblock %}