mardi 3 avril 2018

Reflecting svg path movements to te chart

I've been trying to build small telemetry script for my project.Below you can find 2 things. Screenshot and code regarding the player icon movement on the map. So the part I'm having issues is, when I want to move the player icon on the map, I want the chart to highlight me the data regarding driver position.Have not implement the data yet but as you may guess it will be value - time-related.

Can you help me with this matter?

screenshot of dashboard

<script>
var DEG = 180 / Math.PI;

var drag = document.querySelector("#drag");
var path = document.querySelector("#path");


var pathLength = path.getTotalLength() || 0;
var startPoint = path.getPointAtLength(0);
var startAngle = getRotation(startPoint, path.getPointAtLength(0.1));

TweenLite.set(drag, {
  transformOrigin: "center",
  rotation: startAngle + "_rad",
  xPercent: 0,
  yPercent: 0,
  x: startPoint.x,
  y: startPoint.y
});

var draggable = new Draggable(drag, {
  liveSnap: {
    points: pointModifier
  }
});

TweenLite.set(".container", {
  autoAlpha: 1
});

function pointModifier(point) {

  var p = closestPoint(path, pathLength, point);

  TweenLite.set(drag, {
    rotation: p.rotation
  });

  return p.point;
}

function closestPoint(pathNode, pathLength, point) {

  var precision = 8,
      best,
      bestLength,
      bestDistance = Infinity;

  // linear scan for coarse approximation
  for (var scan, scanLength = 0, scanDistance; scanLength <= pathLength; scanLength += precision) {if (window.CP.shouldStopExecution(1)){break;}
    if ((scanDistance = distance2(scan = pathNode.getPointAtLength(scanLength))) < bestDistance) {
      best = scan, bestLength = scanLength, bestDistance = scanDistance;
    }
  }
window.CP.exitedLoop(1);


  // binary search for precise estimate
  precision /= 2;
  while (precision > 0.5) {if (window.CP.shouldStopExecution(2)){break;}
    var before,
        after,
        beforeLength,
        afterLength,
        beforeDistance,
        afterDistance;
    if ((beforeLength = bestLength - precision) >= 0 && (beforeDistance = distance2(before = pathNode.getPointAtLength(beforeLength))) < bestDistance) {
      best = before, bestLength = beforeLength, bestDistance = beforeDistance;
    } else if ((afterLength = bestLength + precision) <= pathLength && (afterDistance = distance2(after = pathNode.getPointAtLength(afterLength))) < bestDistance) {
      best = after, bestLength = afterLength, bestDistance = afterDistance;
    } else {
      precision /= 2;
    }
  }
window.CP.exitedLoop(2);


  var len2 = bestLength + (bestLength === pathLength ? -0.1 : 0.1);
  var rotation = getRotation(best, pathNode.getPointAtLength(len2));

  return {
    point: best,
    rotation: rotation * DEG,
    // distance: Math.sqrt(bestDistance),
  };

  function distance2(p) {
    var dx = p.x - point.x,
        dy = p.y - point.y;
    return dx * dx + dy * dy;
  }
}

function getRotation(p1, p2) {
  var dx = p2.x - p1.x;
  var dy = p2.y - p1.y;
  return Math.atan2(dy, dx);
}



</script>





Aucun commentaire:

Enregistrer un commentaire