Chapter 9

2022-03-04 23:37:15 +00:00
parent 92e3829085
commit 878b50fb65
16 changed files with 645 additions and 0 deletions
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+
+<meta charset="utf-8">
+
+<svg id="graph" height="200" width="450"></svg>
+
+<script src="https://d3js.org/d3.v5.js"></script>
+<script>
+  var svg = d3.select("svg#graph").append("circle")
+      .attr("id", "button")
+      .attr("cx", 100)
+      .attr("cy", 100)
+      .attr("r", 50)
+      .attr("fill", "green");
+  var circle = d3.select("#button");
+
+  function circle_to_relative(point) {
+    return [
+      (point[0] - circle.attr("cx")) / circle.attr("r"),
+      (point[1] - circle.attr("cy")) / circle.attr("r")
+    ]
+  }
+
+  function move_robot(point) {
+    d3.json("/control", {
+      method:"POST",
+      body: JSON.stringify({
+        "move": point
+      }),
+      headers: {
+          "Content-type": "application/json; charset=UTF-8"
+      }
+    });
+  }
+
+  function stop() {
+    move_robot([0, 0]);
+  }
+
+  circle.on("pointermove", function() {
+      if(d3.event.buttons == 1) {
+        move_robot(circle_to_relative(d3.mouse(this)));
+      }
+    })
+    .on("mouseup", stop)
+    .on("mouseout", stop);
+
+</script>