added a test page

ml5js · Jun 29, 2023 · 882280d · 882280d
1 parent e06da5c
commit 882280d
Show file tree

Hide file tree

Showing 10 changed files with 1,670 additions and 130 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/_css/style.css b/_css/style.css
diff --git a/_iframes/.DS_Store b/_iframes/.DS_Store
diff --git a/_iframes/testPage/index.html b/_iframes/testPage/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>p5.js iframe</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+  <h1>Model</h1>
+  <p>Description</p>
+  <button>
+    <a href="main.html">Demo</a>
+  </button>
+</body>
+
+</html>
diff --git a/_iframes/testPage/main.html b/_iframes/testPage/main.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <script src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js"></script>
+  <link rel="stylesheet" type="text/css" href="style.css">
+  <meta charset="utf-8" />
+
+</head>
+
+<body>
+  <main>
+  </main>
+  <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/_iframes/testPage/script.js b/_iframes/testPage/script.js
@@ -0,0 +1,50 @@
+console.log('ml5 version:', ml5.version);
+
+let cam;
+let poseNet;
+let poses = [];
+
+function setup() {
+  createCanvas(640, 480);
+  background(0);
+  // webcam
+  cam = createCapture(VIDEO);
+  cam.size(640, 480);
+  cam.hide();
+  //poseNet
+  poseNet = ml5.poseNet(cam, modelReady);
+  poseNet.on("pose", gotResults);
+}
+
+function draw() {
+  background(0);
+  image(cam, 0, 0);
+
+  noStroke();
+  for (let i = 0; i < poses.length; i++) {
+    for (let k = 0; k < poses[i].pose.keypoints.length; k++) {
+      // console.log(poses[i].pose.keypoints[k]);
+      let point = poses[i].pose.keypoints[k];
+
+      let x = point.position.x;
+      let y = point.position.y;
+      let score = point.score;
+      let partName = point.part;
+
+      fill(0, 255, 0);
+      ellipse(x, y, 5, 5);
+
+      text(partName, x + 15, y + 5);
+      text(score.toFixed(2), x + 15, y + 20);
+      //https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed
+    }
+  }
+}
+
+function modelReady() {
+  console.log("Model Loaded: PoseNet");
+}
+
+function gotResults(newPoses) {
+  poses = newPoses;
+}
diff --git a/_iframes/testPage/style.css b/_iframes/testPage/style.css
@@ -0,0 +1,10 @@
+html,
+body {
+  margin: 0;
+  padding: 0;
+  background-color: #EEEEEE;
+}
+
+canvas {
+  display: block;
+}
diff --git a/_sidebar.md b/_sidebar.md
@@ -14,6 +14,7 @@
 
   * [Getting Started](/)
   * [FAQ](/faq.md)
+  * [Test Page](/test.md)
 
 
 

diff --git a/index.html b/index.html
@@ -1,144 +1,141 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <title>ml5 - A friendly machine learning library for the web.</title>
-    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
-    <meta name="description" content="A friendly machine learning library for the web." />
-    <meta
-      name="viewport"
-      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
-    />
-    <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css" />
-    <!-- Edit on Github -->
-    <script src="//unpkg.com/docsify-edit-on-github/index.js"></script>
-    <!-- custom styles -->
-    <style>
-      .github-corner {
-        display: none;
-      }
-      .Menu__Top {
-        background: #ffffff;
-        color: black;
-        position: fixed;
-        top: 0px;
-        width: 100%;
-        height: 60px;
-        margin: 0px !important;
-        display: -webkit-box;
-        display: -moz-box;
-        display: -ms-flexbox;
-        display: -webkit-flex;
-        display: flex;
-        padding: 0rem 2rem;
-        align-items: center;
-        justify-content: space-between;
-      }
-      .Menu__Top__LogoContainer {
-        display: flex;
-      }
-      .Menu__Top__LogoContainer_Logo {
-        height: 28px;
-      }
 
-      .sidebar {
-        margin: 80px 0 0 0;
+<head>
+  <meta charset="UTF-8" />
+  <title>ml5 - A friendly machine learning library for the web.</title>
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+  <meta name="description" content="A friendly machine learning library for the web." />
+  <meta name="viewport"
+    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
+  <!-- <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css" /> -->
+  <link rel="stylesheet" href="_css/style.css" />
+  <!-- Edit on Github -->
+  <script src="//unpkg.com/docsify-edit-on-github/index.js"></script>
+  <!-- custom styles -->
+  <style>
+    .github-corner {
+      display: none;
+    }
+
+    .Menu__Top {
+      background: #ffffff;
+      color: black;
+      position: fixed;
+      top: 0px;
+      width: 100%;
+      height: 60px;
+      margin: 0px !important;
+      display: -webkit-box;
+      display: -moz-box;
+      display: -ms-flexbox;
+      display: -webkit-flex;
+      display: flex;
+      padding: 0rem 2rem;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    .Menu__Top__LogoContainer {
+      display: flex;
+    }
+
+    .Menu__Top__LogoContainer_Logo {
+      height: 28px;
+    }
+
+    .sidebar {
+      margin: 80px 0 0 0;
+    }
+
+    .Menu__Top__Menu {
+      display: flex;
+      align-items: center;
+    }
+
+    .Menu__Top__Menu__Item:not(:last-child) {
+      margin-right: 2rem;
+    }
+
+    @media screen and (max-width: 600px) {
+      .Menu__Top__LogoContainer {
+        width: 300px !important;
+        flex: 3;
       }
 
       .Menu__Top__Menu {
-        display: flex;
-        align-items: center;
+        flex: 1;
       }
 
-      .Menu__Top__Menu__Item:not(:last-child) {
-        margin-right: 2rem;
+      .Menu__Top__Menu__Item {
+        display: none !important;
       }
+    }
 
-      @media screen and (max-width: 600px) {
-        .Menu__Top__LogoContainer {
-          width: 300px !important;
-          flex: 3;
-        }
-        .Menu__Top__Menu {
-          flex: 1;
-        }
-        .Menu__Top__Menu__Item {
-          display: none !important;
-        }
-      }
-      @media screen and (min-width: 600px) {
-        .Menu__Top {
-          padding: 0 0.5em;
-        }
+    @media screen and (min-width: 600px) {
+      .Menu__Top {
+        padding: 0 0.5em;
       }
-    </style>
-  </head>
-  <body>
-    <nav class="Menu__Top">
-      <a href="https://ml5js.org" class="Menu__Top__LogoContainer">
-        <img
-          class="Menu__Top__LogoContainer_Logo"
-          src="https://ml5js.org/static/ml5_logo_purple-88e082b8dc81d8729f95bcc092db90c5.png"
-          alt="ml5 Logo"
-        />
+    }
+  </style>
+</head>
+
+<body>
+  <nav class="Menu__Top">
+    <a href="https://ml5js.org" class="Menu__Top__LogoContainer">
+      <img class="Menu__Top__LogoContainer_Logo"
+        src="https://ml5js.org/static/ml5_logo_purple-88e082b8dc81d8729f95bcc092db90c5.png" alt="ml5 Logo" />
+    </a>
+
+    <div class="Menu__Top__Menu">
+      <a class="Menu__Top__Menu__Item" href="https://learn.ml5js.org/#/">Getting Started</a>
+      <a class="Menu__Top__Menu__Item" href="https://learn.ml5js.org/#/reference/index">Reference</a>
+      <a class="Menu__Top__Menu__Item" href="https://ml5js.org/community/">Community</a>
+      <a class="Menu__Top__Menu__Item" href="https://ml5js.org/about/">About</a>
+      <a class="Menu__Top__Menu__Item" href="https://github.com/ml5js/ml5-library">
+        <img class="Menu__Top__LogoContainer_Logo" src="_media/GitHub-Mark-120px-plus.png" alt="github Logo" />
       </a>
+    </div>
+  </nav>
 
-      <div class="Menu__Top__Menu">
-          <a class="Menu__Top__Menu__Item" href="https://learn.ml5js.org/#/"
-          >Getting Started</a
-        >
-        <a class="Menu__Top__Menu__Item" href="https://learn.ml5js.org/#/reference/index"
-          >Reference</a
-        >
-        <a class="Menu__Top__Menu__Item" href="https://ml5js.org/community/">Community</a>
-        <a class="Menu__Top__Menu__Item" href="https://ml5js.org/about/">About</a>
-        <a class="Menu__Top__Menu__Item" href="https://github.com/ml5js/ml5-library">
-          <img
-            class="Menu__Top__LogoContainer_Logo"
-            src="_media/GitHub-Mark-120px-plus.png"
-            alt="github Logo"
-          />
-        </a>
-      </div>
-    </nav>
+  <div id="app">loading...</div>
+  <script>
+    const config = {
+      editOnGithub: {
+        docBase: 'https://github.com/ml5js/ml5-library/tree/main/docs/',
+        docEditBase: 'https://learn.ml5js.org/',
+        title: 'Edit document',
+      },
+    };
+    window.$docsify = {
+      name: 'ml5',
+      repo: 'https://github.com/ml5js/ml5-library',
+      loadSidebar: '_sidebar.md',
+      alias: {
+        '/.*/sidebar.md': '/./sidebar.md',
+      },
+      subMaxLevel: 2,
+      relativePath: true,
+      maxLevel: 2,
+      mergeNavbar: true,
+      auto2top: true,
+      plugins: [
+        EditOnGithubPlugin.create(config.editOnGithub.docBase, null, config.editOnGithub.title),
+      ],
+    };
+  </script>
+  <script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
+  <!-- Plugins -->
+  <!-- Search -->
+  <script src="//unpkg.com/docsify/lib/plugins/search.min.js"></script>
+  <!-- Emoji plugin -->
+  <script src="//unpkg.com/docsify/lib/plugins/emoji.min.js"></script>
+  <!-- External JS -->
+  <script src="//unpkg.com/docsify/lib/plugins/external-script.min.js"></script>
+  <!-- Copy to clipboard -->
+  <script src="//unpkg.com/docsify-copy-code"></script>
+  <!-- Pagination -->
+  <script src="//unpkg.com/docsify-pagination/dist/docsify-pagination.min.js"></script>
+</body>
 
-    <div id="app">loading...</div>
-    <script>
-      const config = {
-        editOnGithub: {
-          docBase: 'https://github.com/ml5js/ml5-library/tree/main/docs/',
-          docEditBase: 'https://learn.ml5js.org/',
-          title: 'Edit document',
-        },
-      };
-      window.$docsify = {
-        name: 'ml5',
-        repo: 'https://github.com/ml5js/ml5-library',
-        loadSidebar: '_sidebar.md',
-        alias: {
-          '/.*/sidebar.md': '/./sidebar.md',
-        },
-        subMaxLevel: 2,
-        relativePath: true,
-        maxLevel: 2,
-        mergeNavbar: true,
-        auto2top: true,
-        plugins: [
-          EditOnGithubPlugin.create(config.editOnGithub.docBase, null, config.editOnGithub.title),
-        ],
-      };
-    </script>
-    <script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
-    <!-- Plugins -->
-    <!-- Search -->
-    <script src="//unpkg.com/docsify/lib/plugins/search.min.js"></script>
-    <!-- Emoji plugin -->
-    <script src="//unpkg.com/docsify/lib/plugins/emoji.min.js"></script>
-    <!-- External JS -->
-    <script src="//unpkg.com/docsify/lib/plugins/external-script.min.js"></script>
-    <!-- Copy to clipboard -->
-    <script src="//unpkg.com/docsify-copy-code"></script>
-    <!-- Pagination -->
-    <script src="//unpkg.com/docsify-pagination/dist/docsify-pagination.min.js"></script>
-  </body>
-</html>
+</html>