48 lines
1.0 KiB
HTML
48 lines
1.0 KiB
HTML
<!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> |