foosball_learner/TensorflowSampleCode.html at main · JayTeeSF/foosball_learner · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="Permissions-Policy" content="interest-cohort=()">
  <title>TensorFlow.js Ball Detection</title>
  <link rel="shortcut icon" type="image/png" href="img/favicon.png">
  <script src="./js/tf.min.js"></script>
  <script src="./js/posenet.min.js"></script>
</head>
<body>
  <img id='image' src='IMG_0468_1.jpeg' height=300px width=300px/>
  <canvas id='output'></canvas>

  <script>
    const imageScaleFactor = 0.5;
    const outputStride = 16;
    const flipHorizontal = false;

    const imageElement = document.getElementById('image');
    /*
    const canvas = document.getElementById('output');
    const ctx = canvas.getContext('2d');
*/
    posenet.load().then(function(net) {
      return net.estimateSinglePose(imageElement, imageScaleFactor, flipHorizontal, outputStride)
    }).then(function(pose) {
      console.log(pose);
      // Get the position of the ball
      const ballPosition = pose.keypoints[0].position;
      console.log(ballPosition);

      let element = document.createElement("div");
      element.innerHTML = `<p>${JSON.stringify(ballPosition)}</p>`;
      let b = document.getElementsByTagName("Body")[0];
      b.append(element)


      // Draw the pose keypoints onto the canvas
      // posenet.drawKeypoints(pose.keypoints, outputCanvas);
    });
  </script>
</body>
</html>