61 lines
1.5 KiB
HTML
61 lines
1.5 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")
|
|
]
|
|
}
|
|
|
|
var last_position = [0, 0];
|
|
var new_position = false;
|
|
|
|
function move_robot() {
|
|
if (new_position === true) {
|
|
d3.json("/control", {
|
|
method:"POST",
|
|
body: JSON.stringify(last_position),
|
|
headers: {
|
|
"Content-type": "application/json; charset=UTF-8"
|
|
}
|
|
}).finally(function() {
|
|
setTimeout(move_robot, 10) // continue the lop 50 ms after a response, even a non-positive one.
|
|
});
|
|
new_position = false;
|
|
}
|
|
else {
|
|
setTimeout(move_robot, 10); // continue the loop if there's nothing to send
|
|
}
|
|
}
|
|
|
|
function stop() {
|
|
last_position = [0, 0];
|
|
new_position = true;
|
|
}
|
|
|
|
setTimeout(move_robot, 50); // start the control loop
|
|
|
|
circle.on("pointermove", function() {
|
|
if(d3.event.buttons == 1) {
|
|
last_position = circle_to_relative(d3.mouse(this));
|
|
new_position = true;
|
|
}
|
|
})
|
|
.on("mouseup", stop)
|
|
.on("mouseout", stop);
|
|
|
|
</script> |