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

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

{% endif %}


{% block head %}

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

  <!-- Mine -->
  <script src="/static/colorbars.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="canvas-webgl" class="card-img-top"
              data-status="canvas-webgl"
              alt="canvas webgl">
      </canvas>

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

        <fieldset class="row">

          <div class="row mt-2">
            <div class="input-group col">
              <button data-control="get-fits-api" class="btn btn-primary w-100" type="button"
                      >Display http</button>
            </div>
          </div>

          <div class="row mt-2">
            <div class="input-group col">
              <button data-control="get-fits" class="btn btn-primary w-100" type="button"
                      >Display websocket</button>
            </div>
          </div>


          <label for="min_value">min</label>
          <input id="min_value" type="number" min="0" max="65535" value="0" step="1">
          <label for="max_value">max</label>
          <input id="max_value" type="number" min="0" max="65535" value="56635" step="1">
          <label for="scale_factor">scale</label>
          <input id="scale_factor" type="number" min="0" max="10" value="1" step="0.1">
          <label for="x_0">x0</label>
          <input id="x_0" type="number" min="0" value="0" step="1">
          <label for="y_0">y0</label>
          <input id="y_0" type="number" min="0" value="0" step="1">




        </fieldset>

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

      </figcaption>
    </figure>

  </div>

</div>

<script>


  var matrix;

  $(document).on("click",'[data-control="get-fits-api"]', function(e){
      const ref = new Date().getTime()/1000
      e.preventDefault();
      $(this).crud("GET", "/web/other/fits/", null, false).then(function(e){
          console.log("here")
      })
  });

  $(document).on("click",'[data-control="get-fits"]', function(e){
      const ref = new Date().getTime()/1000
      e.preventDefault();
       button = $(this)
       button.prop('disabled', true);
       socket.emit('send_fits');
  });

  socket.on('data_fits',function(data){
      matrix = data
      drawMatrixWithWebGL(matrix, "canvas-webgl", 1, 0, 0, false)
      $('[data-control="get-fits"]').prop('disabled', false);
      console.log(difftime(data.timestamp))
  })


  socket.on('data_bundle', function(data) {

      // Event listeners for min and max value inputs
      var minValue = parseFloat(document.getElementById("min_value").value);
      var maxValue = parseFloat(document.getElementById("max_value").value);
      var scaleFactor = parseFloat(document.getElementById("scale_factor").value);
      var x0 = parseFloat(document.getElementById("x_0").value);
      var y0 = parseFloat(document.getElementById("y_0").value);

      var binaryData = data.data
      var diff1 = difftime(data.timestamp)
      //var matrixData = reform(binaryData, data.shape[0], data.shape[1], data.dtype);
      var diff2 = difftime(data.timestamp)
      //drawMatrixWithWebGL(matrixData, "matrixBinary", scaleFactor, x0, y0)
      var diff3 = difftime(data.timestamp)
      matrix = data
      drawMatrixWithWebGL(matrix, "canvas-webgl", scaleFactor, x0, y0, false)
      var diff4 = difftime(data.timestamp)

      console.log("arrived, reformed, js canvas, webgl",
                  diff1,
                  (diff2-diff1).toFixed(3),
                  (diff3-diff2).toFixed(3),
                  (diff4-diff3).toFixed(3) )


  });

  $("#scale_factor").change(function(e){
      console.log("changed")
      const val = +$(this).val()
      drawMatrixWithWebGL(matrix, "canvas-webgl", val , 0, 0, false)
  });

</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>


{% endblock content %}


{% block footer %}
{% endblock footer %}
