psp

yishengjiang99 · Mar 22, 2023 · c1fa3bb · c1fa3bb
1 parent 2b18adf
commit c1fa3bb
Show file tree

Hide file tree

Showing 9 changed files with 149 additions and 74 deletions.
diff --git a/e2e.html b/e2e.html
@@ -5,7 +5,14 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
-    <link rel="stylesheet" href="style.css">
+    <style>
+        .main {
+            display: flex;
+            flex-direction: row;
+            place-items: space-between;
+        }
+
+    </style>
 </head>
 <body>
     <script src="./e2e.js" type="module"></script>

diff --git a/e2e.js b/e2e.js
@@ -1,7 +1,7 @@
 import { mkcanvas, chart } from "https://unpkg.com/[email protected]/chart.js";
 import { mkdiv } from "https://unpkg.com/[email protected]/mkdiv.js";
 import { SpinNode } from "./spin/spin.js";
-import mkpath from "./src/path.js";
+import { mkpath } from "./src/path.js";
 import SF2Service from "./sf2-service/index.js";
 const sf2url = "file.sf2";
 
@@ -12,26 +12,6 @@ let program, spinner, zref, presetId;
 
 renderMain();
 window.addEventListener("hashchange", renderMain);
-
-window.addEventListener("click", start, { once: true });
-
-async function start() {
-  const ctx = new AudioContext();
-  if (ctx.state == "suspended") {
-    await ctx.resume();
-  }
-  spinner = (await mkpath(ctx)).spinner;
-  spinner.shipProgram(program, presetId);
-  const zones = p.filterKV(key, vel).filter((z) => z.SampleId !== 0);
-  let i = 0;
-  while (zones.length) {
-    spinner.keyOn(0, zones.shift(), i + 50, i + 30);
-    spinner.KeyOff(9, i + 50, i + 70);
-    console.log(zones.length);
-    i++;
-  }
-}
-
 async function renderMain() {
   await loadWait;
   document.body.innerHTML = "";
@@ -64,17 +44,18 @@ async function renderMain() {
     mkdiv("div", { class: "col note-viewer" }),
   ];
   const main = mkdiv("div", { class: "main" }, [leftNav, rightPanel]);
-  document.location.hash.substring(1).split("|");
+  const presetId = document.location.hash.substring(1).split("|");
   const intpre = parseInt(presetId);
   const pid = intpre;
   const bid = 0;
   program = sf2file.loadProgram(pid, bid);
-  if (!zref) zref = program.filterKV(55, 55)[0].zref;
+  console.log(program.zMap);
+  if (!zref) zref = program.filterKV(55, 55)[0]?.zref;
 
   const kRangeList = program.zMap.map(
     (z) =>
       `<option value=${z.ref} ${z.ref + "" == zref ? "selected" : ""}>${
-        z.SampleId
+        z.Unused1 + "|" + z.Unused2
       } ${
         "key " +
         [z.KeyRange.lo, z.KeyRange.hi].join("-") +
@@ -100,27 +81,28 @@ async function renderMain() {
       style:
         "display:flex flex-direction:row; max-height:50vh; overflow-y:scroll; gap:0 20px 20px",
     }),
-  ]);
+  ]).attachTo(main);
   const mainRight = mkdiv("div", { class: "note" }, [
     mkdiv("div", { class: "note-title" }, [sf2file.programNames[presetId]]),
     articleHeader,
-    articleMain,
+    ,
   ]).attachTo(rightPanel);
   document.body.append(main);
+  const canvas = mkcanvas({ container: articleHeader });
 
   renderZ(zref);
   async function renderZ(zref) {
     let zoneSelect = zref
       ? program.zMap.find((z) => z.ref + "" == zref)
       : program.zMap[0];
+    articleMain.innerHTML = 0;
 
     if (zoneSelect) {
       const zattrs = Object.entries(zoneSelect).filter(
-        ([attr, val], idx) => val && idx < 60
+        ([attr, val], idx) => idx < 60
       );
 
       const pcm = await zoneSelect.shdr.data();
-      const canvas = mkcanvas({ container: articleHeader });
       chart(canvas, pcm);
 
       const zoneinfo = mkdiv("div", [
@@ -137,25 +119,35 @@ async function renderMain() {
           "<br>",
           "loop: ",
           zoneSelect.shdr.loops.join("-"),
+          "<br>",
 
           JSON.stringify(zoneSelect.KeyRange),
+          "<br>",
+          JSON.stringify(zoneSelect.VolRange),
         ]),
-        ..."Addr,KeyRange,Attenuation,VolEnv,Filter,LFO"
-          .split(",")
-          .map((keyword) =>
-            mkdiv(
-              "div",
-              { style: "padding:10px;color:gray;" },
-              zattrs
-                .filter(([k]) => k.includes(keyword))
-                .map(([k, v]) => k + ": " + v)
-                .join("<br>")
-            )
-          ),
+        ..."Sustain,Attenuation,VolEnv,Filter,LFO".split(",").map((keyword) =>
+          mkdiv(
+            "div",
+            { style: "padding:10px;color:gray;" },
+            zattrs
+              .filter(([k]) => k.includes(keyword))
+              .map(([k, v]) => k + ": " + v)
+              .join("<br>")
+          )
+        ),
       ]);
-      zoneinfo.attachTo(mainRight);
+      zoneinfo.attachTo(articleMain);
     }
   }
-
-  console.log(program);
+}
+const button = mkdiv("button", "start");
+button.attachTo(document.body);
+button.addEventListener("click", start, { once: true });
+async function start() {
+  const ctx = new AudioContext();
+  if (ctx.state == "suspended") {
+    await ctx.resume();
+  }
+  spinner = (await mkpath(ctx)).spinner;
+  spinner.shipProgram(program, presetId);
 }
diff --git a/index.html b/index.html
@@ -11,6 +11,8 @@
   <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
   <link rel="stylesheet" href="src/keyboard/keyboard.css">
   <script type="text/babel" src="./src/keyboard/like.jsx">  </script>
+  <link rel="stylesheet" href="style.css">
+
 
 
 </head>
@@ -44,11 +46,18 @@ <h3>Performant WASM MIDI Playe</h3>
     </div>
   </header>
   <main class="main">
-    <div id="channelContainer"></div>
-    <div id="stdout"></div>
-    <div id="bigcan"><canvas id="c1"></canvas></div>
+    <aside></aside>
+    <div>
+      <div id="col3"></div>
+      <div id="col2"></div>
+    </div>
+    <div>
+      <div id="col4"></div>
+      <div id="col5"></div>
+    </div>
   </main>
-  <aside></aside>
+  <div id="stdout"></div>
+
   <footer>
   </footer>
 

diff --git a/sf2-service b/sf2-service
diff --git a/src/createChannel.js b/src/createChannel.js
@@ -1,3 +1,5 @@
+import { midi_ch_cmds } from "./constants.js";
+
 export function createChannel(uiController, channelId, sf2, spinner) {
   let _sf2 = sf2;
   let program;
@@ -18,10 +20,18 @@ export function createChannel(uiController, channelId, sf2, spinner) {
       uiController.CC = { key, value: vel };
     },
     keyOn(key, vel) {
+      console.log("ch chan ", channelId);
       const zones = program.filterKV(key, vel);
-      zones.slice(2).map((zone, i) => {
-        key_on_map[key] = channelId * +i;
-        spinner.keyOn(channelId * 2 + i, zone, key, vel);
+      zones.slice(0, 2).map((zone, i) => {
+        console.log("zone", i);
+        key_on_map[key] = channelId * 2 + i;
+        spinner.port.postMessage([
+          midi_ch_cmds.note_on,
+          channelId * 2 + i,
+          zone.ref,
+          zone.calcPitchRatio(key, spinner.context.sampleRate),
+          vel,
+        ]);
       });
 
       // zones[0].shdr.data().then((pcm) => {
@@ -49,8 +59,10 @@ export function createChannel(uiController, channelId, sf2, spinner) {
         uiController.midi = key;
         //  uiController.zone = zones[0];
       });
+      return zones[0];
     },
     keyOff(key, vel) {
+      if (!key_on_map[key]) return;
       while (key_on_map[key].length) {
         spinner.keyOff(key_on_map[key].shift(), key, vel);
       }
+1 −1		Dockerfile
+1 −1		Makefile
+117 −108		add_generator_vals.c
+2 −1		build.sh
+0 −843		gs_piano.yml
+1 −1		index.js
+3 −33		package-lock.json
+3 −6		package.json
+114 −129		pdta.c
+1 −1		pdta.js
+7 −7		pdta.spec.c
+0 −12,545		piano.yml
+0 −842		sfp.sf2
+4 −49		testing/e2e.js