{% if not included %}
{% extends 'index.html' %}

{% block title %}
Output
{% endblock title %}

{% endif %}


{% block head %}

  <!-- Externals -->
  <script src="/static/js/webgl-utils.js"></script>
  <script src="/static/js/delaunator.js"></script>

  <!-- Mine -->

  <script src="/static/colorbars.js"></script>
  <script src="/static/triangles.js"></script>
  <script src="/static/draw-webgl.js"></script>

{% endblock head %}

{% set included = True %}

{% block content %}

<div id="webgl" class="form mt-2 row">

  <div class="col">
    <figure class="card">

      <canvas id="cred-canvas" class="card-img-top"
              data-status="canvas-webgl" width="400" height="400">
      </canvas>

      <figcaption class="card-body">
        <h5 class="card-title">CRED</h5>

        <fieldset class="row mt-2">

          <div class="col-3 col-form-label">
            <span>Color</span>
            <label for="min-cred">min</label>
            <span>,</span>
            <label for="max-cred">max</label>
          </div>
          <div class="col">
            <div class="input-group">
              <input id="min-cred" type="number" class="form-control" value="3500">
              <input id="max-cred" type="number" class="form-control" value="4500">
            </div>
          </div>

        </fieldset>

        <fieldset class="row mt-2">

          <div class="col-3 col-form-label">
            <label for="scale-cred">scale</label>
            <span>,</span>
            <label for="min-cred">x0</label>
            <span>,</span>
            <label for="max-cred">y0</label>
          </div>
          <div class="col">
            <div class="input-group">
              <input id="scale-cred" type="number" class="form-control" value="6">
              <input id="x0-cred" type="number" class="form-control" value="0">
              <input id="y0-cred" type="number" class="form-control" value="0">
            </div>
          </div>

        </fieldset>

        <aside class="row mt-2">
        </aside>

      </figcaption>
    </figure>

  </div>

<!-- **************************************************** -->

  <div class="col">
    <figure class="card">

      <canvas id="dm-canvas" class="card-img-top"
              data-status="canvas-webgl"  width="400" height="400">
      </canvas>

      <figcaption class="card-body">
        <h5 class="card-title">DM</h5>

        <fieldset class="row mt-2">

          <div class="col-3 col-form-label">
            <span>Color</span>
            <label for="min-dm">min</label>
            <span>,</span>
            <label for="max-dm">max</label>
          </div>
          <div class="col">
            <div class="input-group">
              <input id="min-dm" type="number" class="form-control" value="-0.4">
              <input id="max-dm" type="number" class="form-control" value="0.4">
            </div>
          </div>

        </fieldset>

        <fieldset class="row mt-2">

          <div class="col-3 col-form-label">
            <label for="scale-dm">scale</label>
            <!-- <span>,</span> -->
            <!-- <label for="min-dm">x0</label> -->
            <!-- <span>,</span> -->
            <!-- <label for="max-dm">y0</label> -->
          </div>
          <div class="col">
            <div class="input-group">
              <input id="scale-dm" type="number" class="form-control" value="30">
          <!--     <input id="x0-dm" type="number" class="form-control" value="0"> -->
          <!--     <input id="y0-dm" type="number" class="form-control" value="0"> -->
          <!--   </div> -->
          </div>

        </fieldset>

        <aside class="row mt-2">
        </aside>

      </figcaption>
    </figure>

  </div>


</div>

<script>

  ////////////////////
  // CRED
  ///////////////////

  socket.on('data-cred', function(data) {

      //// Event listeners for min and max value inputs
      var min_cred = +$("#min-cred").val();
      var max_cred = +$("#max-cred").val();
      var scale_cred = +$("#scale-cred").val();
      var x0 =  +$("#x0-cred").val();
      var y0 =  +$("#y0-cred").val();

      var diff1 = difftime(data.timestamp)
      drawMatrixWithWebGL("#cred-canvas", data, scale_cred, x0, y0, min_cred, max_cred)
      var diff2 = difftime(data.timestamp)

      // console.log("arrived, drawed",
      //             diff1,
      //             (diff2-diff1).toFixed(3),
      //             )

  });

</script>

<script id="vertex-shader-2d" type="x-shader/x-vertex">
  attribute vec2 a_position;
  attribute vec2 a_texCoord;
  uniform vec2 u_resolution;
  varying vec2 v_texCoord;

  void main() {
      // Convert the rectangle from pixels to 0.0 to 1.0
      vec2 zeroToOne = a_position / u_resolution;
      // Convert from 0->1 to 0->2
      vec2 zeroToTwo = zeroToOne * 2.0;
      // Convert from 0->2 to -1->+1 (clipspace)
      vec2 clipSpace = zeroToTwo - 1.0;
      gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);
      // Pass the texCoord to the fragment shader
      // The GPU will interpolate this value between points.
      v_texCoord = a_texCoord;
  }
</script>

<script id="fragment-shader-2d" type="x-shader/x-fragment">
  // Precision
  precision mediump float;
  // Our texture
  uniform sampler2D u_image;
  // The texCoords passed in from the vertex shader.
  varying vec2 v_texCoord;

  void main() {
      gl_FragColor = texture2D(u_image, v_texCoord);
  }
</script>


<script type="module">

  ////////////////////
  // DM
  ///////////////////

  import * as deformable from "/static/smooth3.js";

  socket.on('data-dm', function(data) {

      var scale_dm = +$("#scale-dm").val();

      var diff1 = difftime(data.timestamp)
      var values = typeArray(data.data, data.dtype)
      //console.log(values)

      // console.log(values)
      deformable.render_dm(values.map(x => x * scale_dm))
      // //render_dm(data.data)

      var diff2 = difftime(data.timestamp)
      //console.log((diff2-diff1).toFixed(3))

 });




</script>

{% endblock content %}

{% block footer %}

{% endblock footer %}
