
  // import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7.7.0/+esm";
  // //import * as d3 from "https://cdn.skypack.dev/d3@7";

  function update_color_scale(image, imgMin, imgMax, totFlux, id, mask){

      var min = $("#min-"+id).val()
      var max = $("#max-"+id).val()

      if (min=="")
          min = imgMin
      if (max=="")
          max = imgMax

      if (!mask){ // cred
          $("#image-min-"+id).text(imgMin)
          $("#image-max-"+id).text(imgMax)
          $("#image-tot_flux-"+id).text(totFlux)
      }

      if (image.image_shape) {
          if($("#image-wx-"+id)){ // cloud
              $("#image-wx-"+id).text(image.wx / 2 * image.image_shape[0] )
              $("#image-wy-"+id).text(image.wy / 2 * image.image_shape[1] )
              
              $("#image-RMS_X-"+id).text(image.RMS_X / 2 * image.image_shape[0] )
              $("#image-RMS_Y-"+id).text(image.RMS_Y / 2 * image.image_shape[1] )
              //          $("#image-cloud_samples"+id).text(image.RMS_X / 2 * image.image_shape[0] )
              //console.log("AAAAA "+id)
              //console.log(image.samples)
          }
          
      }

      return [min, max]

  }

  /////////////////////////////
  /// DRAWINGS
  /////////////////////////////

  function draw_circle(image, id, stroke="red", radius=5, fill="transparent", strokeWidth=2) {
      var canvas = document.getElementById(id);

      if (!canvas){
          return
      }
      
      //var size = canvas.width/64 *radius // radius
      var size = canvas.width/image.data.length/3 * radius // radius
      var ctx = canvas.getContext("2d");

      var cx = (- image.cx + 1) / 2.0 * canvas.width - strokeWidth
      var cy = (+ image.cy + 1) / 2.0 * canvas.height - strokeWidth

      ctx.beginPath()
      ctx.arc((cx+1), (cy+1), size, 0, 2 * Math.PI, false)
      if (fill) {
          ctx.fillStyle = fill
          ctx.fill()
      }
      if (stroke) {
          ctx.lineWidth = strokeWidth
          ctx.strokeStyle = stroke
          ctx.stroke()
      }
  }

  function draw_centroid(image, id, color, ps=5){
      var canvas = document.getElementById(id);

      if (!canvas){
          return
      }
      
      //var data = image.data
      // var size = canvas.width / 64.0 //data.length

      var ctx = canvas.getContext("2d");
      //ctx.clearRect(0, 0, canvas.width, canvas.height);

      var cx = (- image.cx + 1) / 2.0 * canvas.width
      var cy = (+ image.cy + 1) / 2.0 * canvas.height
      ctx.fillStyle = color

      ctx.fillRect((cx)-(ps/2), (cy)-(ps/2), ps, ps)

  }

  function draw_image(image, id, mask=null){

      var canvas = document.getElementById(id);

      if (!canvas){
          return
      }

      var data = image.data
      var dark = image.dark

      // var darkedData = data - dark

      var imgMax = image.max
      var imgMin = image.min
      var totFlux = image.tot_flux

      if(!mask && id!="cloud" ){
          if( $("#subtract-dark").prop("checked")){

              imgMin = image.minDark
              imgMax = image.maxDark
              totFlux = image.tot_flux_darked

          }
      }

      var minmax = update_color_scale(image, imgMin, imgMax, totFlux, id, mask)

      var size_x = canvas.width/data.length
      var size_y = canvas.width/data.length // rectangular

      var ctx = canvas.getContext("2d");

      ctx.imageSmoothingEnabled= false

      /// teccam image
      if (! mask){
          ctx.clearRect(0, 0, canvas.width, canvas.height);
          var myColor = d3.scaleSequential().domain(minmax)
              .interpolator(d3.interpolateViridis);
      } else { /// Gain mask
          if (image.min == image.max){
              var myColor = d3.scaleSequential().domain([image.min, image.max])
                  .range(["rgba(255,255,255,0.0)", "rgba(255,255,255,0.0)"]);

          } else {
              var myColor = d3.scaleSequential().domain([image.min, image.max])
                  .range(["rgba(255,255,255,0.3)", "rgba(255,255,255,0.0)"]);
          }
      }

      for (var x=0; x<data.length; x++) {
          for (var y=0; y<data[0].length; y++) {

              if (!mask && id!="cloud" ){
                  if ($("#subtract-dark").prop("checked")){
                      data[x][y] = data[x][y] - dark[x][y]
                  }
              }

              var value = data[x][y]
              ctx.fillStyle = myColor(value)

              ctx.fillRect((x)*size_x, (y)*size_y, size_x, size_y);
          }
      }

  }

function draw_dm(dm, id, flat=false){
    
      var canvas = document.getElementById(id);

      if (!canvas){
          return
      }

      var dm_min = dm.min
      var dm_max = dm.max
      if (flat){
          dm_min = dm.min_no_flat
          dm_max = dm.max_no_flat
      }
      
      var minmax = update_color_scale(dm, dm_min, dm_max, null, id)
      

      
      var size = Math.round(canvas.width / 11)-2 // max actuators in a row: 11. -2 is for separation between squares.

      var ctx = canvas.getContext("2d");
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      /// dm shape

      var myColor = d3.scaleSequential().domain(minmax)
          .interpolator(d3.interpolateBrBG);

      dm.actuators.forEach(function(actuator, i){
          var value = dm.shape[i]
          if (flat)
              value -= dm.flat[i]

          var ay = ((actuator[0]*0.9+0.05) * canvas.width) - (size/2)
          var ax = ((actuator[1]*0.9+0.05) * canvas.height) - (size/2)
          //var ay = (actuator[0] * canvas.width) - (size/2)
          //var ax = (actuator[1] * canvas.height) - (size/2)

          ctx.fillStyle = myColor(value)
          ctx.fillRect(ax, ay, size, size);
          if( $("#show-act-info").prop("checked")){
              ctx.fillStyle = "black"
              ctx.fillText(value.toFixed(2), ax+size/2-size/8, ay+size/2)
              ctx.fillText(i+1, ax+size/2, ay+size/2-size/4)
          }
      })

  }
