uccser/cs-field-guide

{% extends interactive_mode_template %}

{% load i18n %}
{% load static %}

{% block interactive_html %}
<div class="container p-3">
  <div class="row left-align" id="images">
    <div class="col-sm-12 col-md-12 col-lg-4" id="big-image">
      <h6>{% trans "Drag the square around the image:" %}</h6>
      <canvas id="before-image-canvas" width="360" height="240" crossorigin="anonymous"></canvas>
      <canvas style="display:none" id="placeholder-canvas" width="8" height="8" crossorigin="anonymous"></canvas>
      <div class="draggable" id="little-drag-square"></div>
    </div>
    <div class="col-sm-12 col-md-12 col-lg-4" id="puzzle-stuff">
      <h5>{% trans "Instructions" %}</h5>
      <p>{% trans "Adjust the numbers below the basis functions to make the image on the right." %}</p>
      <p>{% trans "The error value below shows how different the two images are. The goal is to make it equal zero." %}</p>
      <p>{% trans 'Error: <span id="mse">0</span>' %}</p>
      <p id="level-specific">{% trans "Level 1 - the image can be made using just 1 basis function." %}</p>
      <p>{% trans "Press the help button to have 1 basis function set to the correct value for you." %}</p>
      <button class="btn jpeg-btn btn-success" id="helpButton">{% trans "Help Me" %}</button>
    </div>
    <div class="col-sm-6 col-md-4 col-lg-3" id="before">
      <h6>{% trans "Original Image Pixels" %}</h6>
      <canvas id="before-8-by-8" width="240" height="240" crossorigin="anonymous"></canvas>
      <table id="before-labels-8-by-8" width="240" height="240"></table>
      <div class="switch" id="toggleNumberBefore">
        <label>{% trans "Display numbers:" %}
          <input id="toggleNumberBeforeCheckbox" type="checkbox" checked><span class="lever"></span></label>
      </div>
    </div>
    <div class="col-sm-6 col-md-4 col-lg-3" id="after">
      <h6>{% trans "Processed Image Pixels" %}</h6>
      <canvas id="after-8-by-8" width="240" height="240" crossorigin="anonymous"></canvas>
      <table id="after-labels-8-by-8" width="240" height="240"></table>
      <div class="switch" id="toggleDifference">
        <label>{% trans "Difference Values:" %}
          <input id="toggleDifferenceCheckbox" type="checkbox"><span class="lever"></span></label>
      </div>
    </div>
    <div class="col-sm-12 col-md-12 col-lg-12" id="help">
      <div id="puzzle-next-level">
        <h5>{% trans "That's correct!" %}</h5>
        <button class="btn jpeg-btn btn-primary" id="nextLevelButton">{% trans "Next Level" %}</button>
      </div>
    </div>
    <div class="col-sm-12 col-md-12 col-lg-12" id="right-of-dct">
      <button class="btn jpeg-btn btn-primary" id="quantisationButton">{% trans "Apply Quantisation" %}</button>
      <button class="btn jpeg-btn btn-primary" id="zeroButton">{% trans "Zero All" %}</button>
      <button class="btn jpeg-btn btn-primary" id="resetButton">{% trans "Reset to Original" %}</button>
    </div>
    <div class="col-sm-12">
      <div id="jpeg-compression">
        <h5>{% trans "Basis functions" %}</h5>
        <table id="dct-table">
        </table>
      </div>
    </div>
  </div>
</div>
{% endblock interactive_html %}

{% block interactive_css %}
  <link rel="stylesheet" href="{% static 'interactives/jpeg-compression/css/jpeg-compression.css' %}">
{% endblock interactive_css %}

{% block interactive_js %}
  <script type="text/javascript">
    var base_path = "{{ STATIC_URL }}";
  </script>
  <script type="text/javascript" src="{% static 'interactives/jpeg-compression/js/jpeg-compression.js' %}"></script>
{% endblock interactive_js %}