Instructions for the example

nacmartin · Mar 12, 2023 · 0ac6965 · 0ac6965
1 parent 2dfe3b4
commit 0ac6965
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 27 deletions.
diff --git a/examples/ui-react/src/App.tsx b/examples/ui-react/src/App.tsx
@@ -5,6 +5,7 @@ import { useSprings, animated, to } from "@react-spring/web";
 import styles from "./styles.module.css";
 import { contains, inScreen } from "./geometry";
 import confetti from "canvas-confetti";
+import { Instructions } from "./Instructions";
 
 const AREA_WIDTH = 1200;
 const AREA_HEIGHT = 960;
@@ -223,35 +224,39 @@ function App() {
   }, []);
 
   return (
-    <div className={styles.center}>
-      <video
-        id="webcam"
-        autoPlay
-        playsInline
-        //        style={{ position: "absolute", filter: "sepia(100%)" }}
-        className={styles.cam}
-      />
-      <div
-        className={styles.container}
-        style={{ width: `${AREA_WIDTH}px`, height: `${AREA_HEIGHT}px` }}
-      >
-        <div className={styles.deck}>
-          {aniprops.map((style, idx) => (
-            <animated.div
-              key={idx}
-              ref={(el) => (cardsRef.current[idx] = el)}
-              style={{
-                x: style.x,
-                y: style.y,
-                transform: to([style.rot, style.scale, style.zoom], trans),
-              }}
-            >
-              <video src={cards[idx]} playsInline loop />
-            </animated.div>
-          ))}
+    <>
+      <h1>Manitas React Example</h1>
+      <div className={styles.center}>
+        <video
+          id="webcam"
+          autoPlay
+          playsInline
+          //        style={{ position: "absolute", filter: "sepia(100%)" }}
+          className={styles.cam}
+        />
+        <div
+          className={styles.container}
+          style={{ width: `${AREA_WIDTH}px`, height: `${AREA_HEIGHT}px` }}
+        >
+          <div className={styles.deck}>
+            {aniprops.map((style, idx) => (
+              <animated.div
+                key={idx}
+                ref={(el) => (cardsRef.current[idx] = el)}
+                style={{
+                  x: style.x,
+                  y: style.y,
+                  transform: to([style.rot, style.scale, style.zoom], trans),
+                }}
+              >
+                <video src={cards[idx]} playsInline loop />
+              </animated.div>
+            ))}
+          </div>
         </div>
       </div>
-    </div>
+      <Instructions />
+    </>
   );
 }
 

diff --git a/examples/ui-react/src/Instructions.tsx b/examples/ui-react/src/Instructions.tsx
@@ -0,0 +1,43 @@
+export function Instructions() {
+  return (
+    <div>
+      <h2>Usage</h2>
+      <h3>Selecting/Moving</h3>
+      <p>
+        We can use AI (
+        <a href="https://developers.google.com/mediapipe/solutions/vision/gesture_recognizer">
+          Google's Mediapipe
+        </a>
+        ) to recognize the position of our hands, but ¿what is the equivalent of
+        "click" in this context?
+      </p>
+      <p>
+        You can select videos by advancing your index relative to your wrist.
+        So, in the following image, the left one is an event, and the right one
+        is not.
+      </p>
+      <p>
+        <center>
+          <img
+            src="https://user-images.githubusercontent.com/154258/224560435-988c4649-9ec6-46f2-90a9-57ba58871595.png"
+            alt="hands"
+            width={600}
+          />
+        </center>
+      </p>
+      <h3>Gestures</h3>
+      <p>You can use some gestures:</p>
+      <ul>
+        <li>🤟: To play/stop last selected video.</li>
+        <li>✋: To zoom in/out.</li>
+        <li>👍: Throw last selected video far away above the window.</li>
+        <li>👎: Throw last selected video far away below the window.</li>
+        <li>👎: Throw last selected video far away below the window.</li>
+        <li>✌️: Confetti!</li>
+      </ul>
+      <h2>Code</h2>
+      This is an example of usage of manitas.
+      <a href="https://github.com/nacmartin/manitas">See the code</a>
+    </div>
+  );
+}