volume-visualization/templates/volumes/show.html

{% extends "layout.html" %}

{% block content %}

<h2>Information</h2>

<table>
  <tr>
    <td><label>Name</label></td>
    <td>{{ volume.name }}</td>
  </tr>
  <tr>
    <td><label>Path</label></td>
    <td>{{ volume.path }}</td>
  </tr>
  <tr>
    <td><label>Sequence</label></td>
    <td>{% if volume.imageSequence %}<i class="fa fa-check"></i>{% else %}<i class="fa fa-times"></i>{% endif %}</td>
  </tr>
  <tr>
    <td><label>Raw data</label></td>
    <td>{% if volume.rawData %}<i class="fa fa-check"></i>{% else %}<i class="fa fa-times"></i>{% endif %}</td>
  </tr>
  <tr class="rawDataDependend">
    <td><label>Width</label></td>
    <td>{% if volume.width %}{{ volume.width }}{% endif %}</td>
  </tr>
  <tr class="rawDataDependend">
    <td><label>Height</label></td>
    <td>{% if volume.height %}{{ volume.width }}{% endif %}</td>
  </tr>
  <tr class="rawDataDependend">
    <td><label>Little Endian</label></td>
    <td>{% if volume.littleEndian %}<i class="fa fa-check"></i>{% else %}<i class="fa fa-times"></i>{% endif %}</td>
  </tr>
  <tr>
    <td><label>Slices</label></td>
    <td>{{ volume.slices }}</td>
  </tr>
  <tr>
    <td><label>Slice from</label></td>
    <td>{{ volume.sliceFrom }}</td>
  </tr>
  <tr>
    <td><label>Slice to</label></td>
    <td>{{ volume.sliceTo }}</td>
  </tr>
  <tr>
    <td><label>Status</label></td>
    <td>
      <div class="float-left">
        <span id="generateSlicesStatus">{{ volume.generateSlicesStatus }}</span>
      </div>
      <div class="waiting hidden"></div>
    </td>
  </tr>
</table>


{% if volume.rendering_possible %}
<h3>Textures</h3>

<table>
  <tr>
    <th>Name</th>
    <th>Size</th>
    <th></th>
  </tr>
  {% for texture in volume.textures %}
  <tr>
    <td><label>texture_{{ forloop.counter0 }}</label></td>
    <td>{{ texture.size }}</td>
    <td><a href="{% url 'volumes:delete-texture' volume.id texture.size %}"><i class="fa fa-trash-o"></i></a></td>
  </tr>
  {% endfor %}
</table>
{% endif %}

<input type="button" class="styled margin-top" id="show-generate" value="Slice generation"/>

<div id="generate-form" class="hidden">
  <form id="generate-slice" action="{% url 'volumes:processing:gen-slice' volume.id %}" method="post">
    {% csrf_token %}
    <table class="form-table">
      <tr>
        <td><label for="sliceFrom">Slice from</label></td>
        <td><input name="sliceFrom" value="{% if volume.sliceFrom %}{{volume.sliceFrom}}{% endif %}"/></td>
      </tr>
      <tr>
        <td><label for="sliceTo">Slice to </label></td>
        <td><input name="sliceTo" value="{% if volume.sliceTo %}{{volume.sliceTo}}{% endif %}"/></td>
      </tr>
      <tr>
        <td><label for="destSize">Dest size </label></td>
        <td><input name="destSize" value=""/></td>
      </tr>
      <tr>
        <td><label for="imgFormat">Format</label></td>
        <td><input type="text" name="imgFormat" value=""/> (png, webp, jpeg)</td>
      </tr>
      <tr>
        <td><label for="fileChanged">File changed?</label></td>
        <td><input type="checkbox" name="fileChanged" value="fileChanged"/></td>
      </tr>
    </table>
    <input type="submit" value="Generate"/> <br/>
  </form>
</div>

<ul class="vspace button-box">
  <li><a href="{% url 'volumes:home' %}"><i class="fa fa-arrow-circle-left"></i> back</a></li>
  {% if volume.rendering_possible %}<li><a title="Render" href="{% url 'volumes:render-res' volume.id 4096 %}"><i class="fa fa-play-circle-o"><span>render</span></i></a></li>{% endif %}
  <li><a title="Edit" href="{% url 'volumes:edit' volume.id %}"><i class="fa fa-pencil-square-o"><span>edit</span></i></a></li>
  <li><a title="Delete" href="{% url 'volumes:delete' volume.id %}"><i class="fa fa-trash-o"><span>delete</span></i></a></li>
</ul>

<script type="text/javascript">
    IPE.page = function() {
        var showGenerateButton = $('#show-generate');
        showGenerateButton.click(function () {
            $('#generate-form').toggle('show');
        });

        var generateSlicesStatus = '{{ volume.generateSlicesStatus }}';
        if(generateSlicesStatus.indexOf('running') !== -1) {
            showGenerateButton.addClass('hidden');

            $('div.waiting').removeClass('hidden');
            var timeout = 5000;
            var getNewStatus = function() {
                $.ajax({
                    url: IPE.util.buildUrl('volumes/{{ volume.id }}/show-status/'),
                    success: function(data) {
                        if(data.generateSlicesStatus.indexOf('running') !== -1) {
                            setTimeout(getNewStatus, timeout);
                            return;
                        }

                        $('div.waiting').addClass('hidden');

                        $('span#generateSlicesStatus').text(data.generateSlicesStatus);
                        location.reload();
                    }
                });
            }

            setTimeout(getNewStatus, timeout);
        } else {
            var texturesLength = parseInt('{{ volume.textures|length }}');

            if(texturesLength == 0 || generateSlicesStatus.indexOf('failed') !== -1){
                showGenerateButton.trigger('click');
            }
        }
    };
</script>


{% endblock %}