add scalable, scrollable example

mrkev · Apr 15, 2024 · 47d2621 · 47d2621
1 parent 9f17880
commit 47d2621
Show file tree

Hide file tree

Showing 11 changed files with 419 additions and 273 deletions.
diff --git a/docs/assets/index-BXBGKmvD.css b/docs/assets/index-BXBGKmvD.css
diff --git a/docs/assets/index-CEAGp2kb.css b/docs/assets/index-CEAGp2kb.css
diff --git a/docs/assets/index-D6Wr2L7K.js b/docs/assets/index-D6Wr2L7K.js
diff --git a/docs/assets/index-DdBohDTO.js b/docs/assets/index-DdBohDTO.js
diff --git a/docs/index.html b/docs/index.html
@@ -13,9 +13,9 @@
   <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tufte-css/1.8.0/tufte.min.css"> -->
   <!-- <link rel="stylesheet" href="https://www.w3.org/StyleSheets/Core/Modernist" type="text/css"> -->
 
-  <title>Simple Vite + React + TS Library Template</title>
-  <script type="module" crossorigin src="./assets/index-D6Wr2L7K.js"></script>
-  <link rel="stylesheet" crossorigin href="./assets/index-CEAGp2kb.css">
+  <title>webgpu-waveform</title>
+  <script type="module" crossorigin src="./assets/index-DdBohDTO.js"></script>
+  <link rel="stylesheet" crossorigin href="./assets/index-BXBGKmvD.css">
 </head>
 
 <body>

diff --git a/src/index.html b/src/index.html
@@ -13,7 +13,7 @@
   <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tufte-css/1.8.0/tufte.min.css"> -->
   <!-- <link rel="stylesheet" href="https://www.w3.org/StyleSheets/Core/Modernist" type="text/css"> -->
 
-  <title>Simple Vite + React + TS Library Template</title>
+  <title>webgpu-waveform</title>
 </head>
 
 <body>

diff --git a/src/site/App.css b/src/site/App.css
@@ -49,3 +49,12 @@ footer a:link {
 footer a:visited {
   color: #888;
 }
+
+details > pre {
+  margin: 0;
+  padding: 0;
+}
+
+details > summary {
+  padding: 0px 1ch;
+}
diff --git a/src/site/Examples.tsx b/src/site/Examples.tsx
@@ -1,8 +1,9 @@
-import { useEffect, useRef } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { GPUWaveform } from "../lib/GPUWaveform";
 import { audioContext, loadSound, usePromise } from "./utils";
 import { useWaveformRenderer } from "../lib/useWaveformRenderer";
 import { GPUWaveformRenderer } from "../lib/GPUWaveformRenderer";
+import { nullthrows } from "../lib/useWebGPU";
 
 export function Example({
   render,
@@ -21,12 +22,62 @@ export function Example({
   }
 }
 
+export function Main({ audioBuffer }: { audioBuffer: AudioBuffer }) {
+  const [offsetFr, setOffsetFr] = useState(0);
+  const [frPerPx, setFrPerPx] = useState(441);
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        border: "4px solid black",
+        padding: "1ch",
+      }}
+    >
+      <div style={{ display: "flex", flexDirection: "row" }}>
+        Offset:{" "}
+        <input
+          type="range"
+          min={0}
+          max={audioBuffer.length}
+          value={offsetFr}
+          onChange={(v) => {
+            const value = parseInt(v.target.value);
+            setOffsetFr(value);
+          }}
+        ></input>{" "}
+        {offsetFr} frames
+      </div>
+      <div style={{ display: "flex", flexDirection: "row" }}>
+        Scale:{" "}
+        <input
+          type="range"
+          min={1}
+          max={1764}
+          value={frPerPx}
+          onChange={(v) => {
+            const value = parseInt(v.target.value);
+            setFrPerPx(value);
+          }}
+        ></input>{" "}
+        {frPerPx} frames / pixel
+      </div>
+
+      <GPUWaveform
+        audioBuffer={audioBuffer}
+        scale={frPerPx}
+        offset={offsetFr}
+        height={100}
+      />
+    </div>
+  );
+}
+
 async function example1(canvas: HTMLCanvasElement, audioBuffer: AudioBuffer) {
   const channelData = audioBuffer.getChannelData(0);
   const renderer = await GPUWaveformRenderer.create(canvas, channelData);
 
-  console.log("result", renderer);
-
   renderer?.render(800, 0, canvas.width, canvas.height);
 }
 

diff --git a/src/site/Readme.mdx b/src/site/Readme.mdx
@@ -1,6 +1,6 @@
 import { GPUWaveform, useWaveformRenderer } from "../index";
 import { audioContext, loadSound, usePromise } from "./utils";
-import { Example, Example1, Example2, Example3 } from "./Examples"
+import { Example, Main, Example1, Example2, Example3 } from "./Examples"
 import { useRef, useEffect } from 'react'
 import GitHubButton from 'react-github-btn'
 
@@ -17,7 +17,7 @@ export function H3ID({ id, children }) {
 Render waveforms to `<canvas />` using [WebGPU](https://developer.mozilla.org/en-US/docs/Web/API/WebGPU_API)
 
 <p>
-  <a href="#"><i className="ri-github-fill" ></i> View on github</a>
+  <a href="https://github.com/mrkev/webgpu-waveform"><i className="ri-github-fill" ></i> View on github</a>
 </p>
 
 
@@ -30,6 +30,60 @@ There's three ways to use this library:
 
 _Note: Examples here use a waveform that looks like a cow. Source: [Japhy Riddle](https://www.youtube.com/watch?v=qeUAHHPt-LY)_
 
+<Example render={audioBuffer => <Main audioBuffer={audioBuffer} />} />
+
+<p>
+<details>
+  <summary style={{background: 'black'}}>Source</summary>
+```tsx
+export function Main({ audioBuffer }: { audioBuffer: AudioBuffer }) {
+  const [offsetFr, setOffsetFr] = useState(0);
+  const [frPerPx, setFrPerPx] = useState(441);
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column" }}>
+      <div style={{ display: "flex", flexDirection: "row" }}>
+        Offset:{" "}
+        <input
+          type="range"
+          min={0}
+          max={audioBuffer.length}
+          value={offsetFr}
+          onChange={(v) => {
+            const value = parseInt(v.target.value);
+            setOffsetFr(value);
+          }}
+        ></input>{" "}
+        {offsetFr} frames
+      </div>
+      <div style={{ display: "flex", flexDirection: "row" }}>
+        Scale:{" "}
+        <input
+          type="range"
+          min={1}
+          max={1764}
+          value={frPerPx}
+          onChange={(v) => {
+            const value = parseInt(v.target.value);
+            setFrPerPx(value);
+          }}
+        ></input>{" "}
+        {frPerPx} frames / pixel
+      </div>
+
+      <GPUWaveform
+        audioBuffer={audioBuffer}
+        scale={frPerPx}
+        offset={offsetFr}
+        height={50}
+      />
+    </div>
+  );
+}
+```
+</details>
+</p>
+
 <br />
 
 <H3ID id={'GPUWaveformRenderer'}>Using the `GPUWaveformRenderer` class</H3ID>
@@ -149,9 +203,6 @@ Result:
 <Example render={audioBuffer => <Example3 audioBuffer={audioBuffer} />} />
 
 
-
-
-
 <footer>
     Built by Kevin Chavez · <a href="https://twitter.com/aykev"><i className="ri-twitter-fill"></i></a> <a href="https://github.com/mrkev"><i className="ri-github-fill" ></i></a>
 </footer>
diff --git a/src/site/index.css b/src/site/index.css
@@ -37,11 +37,10 @@ h1 {
   line-height: 1.1;
   margin: 0;
 }
-
 button {
-  border-radius: 8px;
+  /* border-radius: 8px; */
   border: 1px solid transparent;
-  padding: 0.4em 1.2em;
+  padding: 2px 12px;
   font-size: 1em;
   font-weight: 500;
   font-family: inherit;

diff --git a/vite.config.ts b/vite.config.ts
@@ -9,17 +9,7 @@ import rehypeSlug from "rehype-slug";
 // Builds the site
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [
-    react(),
-    mdx({ rehypePlugins: [highlight, rehypeSlug] }),
-    // externalizeDeps({
-    //   deps: false,
-    //   devDeps: false,
-    //   except: [],
-    //   optionalDeps: true,
-    //   peerDeps: true,
-    // }),
-  ],
+  plugins: [react(), mdx({ rehypePlugins: [highlight, rehypeSlug] })],
   root: "src",
   build: {
     outDir: "../docs",