<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Hello World!</title>
    <style>
    </style>

    <script src="static/delaunator.js"></script>
    <script src="static/socket.io.js"></script>
    
    <script src="static/colorbars.js"></script>
    <script src="static/triangles.js"></script>
    <script src="static/draw-webgl.js"></script>
        
  </head>
  
  <body>

    <label for="scale_factor">scale</label>
    <input id="scale_factor" type="number" min="0" value="1" step="1">

    <canvas id="dm-canvas" width="1000" height="800">      
    </canvas>
    

      
    <script type="module">

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

      
      const socket = io({ transports: ['websocket'] })

      var scale_factor = parseFloat(document.getElementById("scale_factor").value);
      
      document.getElementById("scale_factor").addEventListener("change", function(){
          scale_factor = +this.value

      })      
      
      socket.on('connect', function() {
          console.log('Connected to server');
      });
      
      socket.on('disconnect', function() {
          console.log('Disconnected from server');
      });
      
      socket.on('dm_bundle', function(data) {
          
          var diff1 = difftime(data.timestamp)
          var values = typeArray(data.data, data.dtype)
          console.log(values)
          deformable.render_dm(values.map(x => x * scale_factor))
          //render_dm(data.data)
          
          var diff2 = difftime(data.timestamp)
          console.log((diff2-diff1).toFixed(3))
          
      });
      
      
    </script>

  </body>
</html>
