From: equilet <jml@dabkitsch.com>
Date: Sun, 1 Mar 2026 09:23:47 +0000 (-0800)
Subject: added new region lane, updated size of wsr audio lane, added helper function to gener... 
X-Git-Url: https://git.dabkitsch.com/?a=commitdiff_plain;h=refs%2Fheads%2Fmaster;p=m29-web-sfp.git

added new region lane, updated size of wsr audio lane, added helper function to generate regions on lane 1 when loading json, updated function of r key
---

diff --git a/app.js b/app.js
index f1a74f4..08fb931 100644
--- a/app.js
+++ b/app.js
@@ -14,8 +14,9 @@ let cue_value = 0;
 //index 0: wavesurfer instances
 //index 1: ws regions
 //index 2: region count per lane
-let wsr_lanes = Array.from({ length: 3 }, () => Array(3).fill(0)); //multi-dim array for extra region lanes
+let wsr_lanes = Array.from({ length: 4 }, () => Array(4).fill(0)); //multi-dim array for extra region lanes
 const numlanes = wsr_lanes[0].length;
+const micro_to_lane_region = new Map();
 
 //initialization---------------------------------------------------------------------
 //
@@ -91,6 +92,21 @@ function linear_map(phase, imn, imx, omn, omx) {
     return (phase - imn) * (omx - omn) / (imx - imn) + omn;
 }
 
+function region_add_specified_lane(lane_id, tstart, tend, ttext, id, color) {
+	
+	wf_nregions++;
+	wsr_lanes[1][lane_id].addRegion({
+		channelIdx: id, 
+		content: ttext, 
+		id: 'region', 
+		start: tstart, 
+		end: tend, 
+		loop: false, 
+		color: tcolor
+	});
+
+}
+
 function region_add_specified(tstart, tend, ttext, id, tcolor) {
 
     wf_nregions++;
@@ -111,7 +127,7 @@ function region_add_specified(tstart, tend, ttext, id, tcolor) {
 //this was updated to the new system
 function region_add_1(lane_id) {
 
-    if(lane_id > 2 | lane_id < 0){
+    if(lane_id > 3 | lane_id < 0){
         console.error("lane id is out of bounds.  Aborting...");
         return;
     }
@@ -305,7 +321,7 @@ function json_load(json) {
         tcolor = json[key].color;
 
         //tstart, tend, text, id, tcolor
-        region_add_specified(tregion[0], tregion[1], ttext, tid, tcolor);
+        region_add_specified_lane(0, tregion[0], tregion[1], ttext, tid, tcolor);
         //console.log("key: ", key, 'value: ', global_dict[key]);
     }
 }
@@ -406,6 +422,7 @@ function audio_load(a_path) {
 
     ws = WaveSurfer.create({
         container: '#wsurfer',
+	height: 60,
         progressColor: 'rgb(150,150,150)',
         waveColor: 'rgb(200,200,200)',
         url: a_path
@@ -575,35 +592,37 @@ function initialize() {
 
     //keyboard events -----------------------------------------------------------
     
-    //add test regions in every lane using the 'r' key
-    window.addEventListener("keydown", (e) => {
-        if(e.target.nodeName == "TEXTAREA") {
-            //do nothing; accept input as normal
-        } else {
-            //marker
-            if(!e.repeat) {
-                const time = ws.getCurrentTime();
-                switch(e.key) {
-
-                    case '1':
-                        //region_add_in_lane(0, time);
-                        //region_add_at_time(time); // <-- this is the first lane; should be changed
-                        region_add_in_lane(0, time);
-                        break;
-                    case '2':
-                        region_add_in_lane(1, time);
-                        break;
-                    case '3':
-                        region_add_in_lane(2, time);
-                        break;
-                } 
-            }
+	//add test regions in every lane using the 'r' key
+	window.addEventListener("keydown", (e) => {
+		if(e.target.nodeName == "TEXTAREA") {
+		    //do nothing; accept input as normal
+		} else {
+		    //marker
+			if(!e.repeat) {
+				const time = ws.getCurrentTime();
+				switch(e.key) {
+
+					case '1':
+						region_add_in_lane(0, time);
+						break;
+					case '2':
+						region_add_in_lane(1, time);
+						break;
+					case '3':
+						region_add_in_lane(2, time);
+						break;
+					case '4':
+						region_add_in_lane(3, time);
+						break;
+
+				} 
+			}
 
             //marker
             if(!e.repeat && e.key == 'r') {
 
                 const time = ws.getCurrentTime();
-                region_add_at_time(time);
+                //region_add_at_time(time);
 
                 for(let i = 0; i < wsr_lanes[0].length; i++){
                     region_add_in_lane(i, time);
diff --git a/index.html b/index.html
index d30fb70..e19ce6a 100644
--- a/index.html
+++ b/index.html
@@ -32,6 +32,7 @@
         <div id="lane-1"></div>
         <div id="lane-2"></div>
         <div id="lane-3"></div>
+	<div id="lane-4"></div>
 
         <div id="marker_edit">
             <h2>Edit Marker</h2>
diff --git a/style/style.css b/style/style.css
index bb4b50d..6b04b80 100644
--- a/style/style.css
+++ b/style/style.css
@@ -3,7 +3,8 @@ html, body {
 
 body {
     background-color: #f0f0f0;
-    overflow: hidden; /* this is for chrome to hide scrollbars */
+    overflow-y: auto; /* this is for chrome to hide scrollbars */
+    overflow-x: hidden;
     position: absolute;
     /* margin-left: -5px; */
 }
@@ -18,14 +19,20 @@ body {
 
 /* wavesurfer */
 
-#wsurfer, #lane-1, #lane-2, #lane-3 {
+#lane-1, #lane-2, #lane-3, #lane-4 {
     /* padding: 25px; */
     margin: 10px;
     height: 120px;
     background-color: rgba(115,115,115,0.05);
 }
 
-#wsurfer:hover, #lane-1:hover, #lane-2:hover, #lane-3:hover {
+#wsurfer { 
+	height: 60px;
+    	margin: 10px;
+    	background-color: rgba(115,115,115,0.05);
+}
+
+#wsurfer:hover, #lane-1:hover, #lane-2:hover, #lane-3:hover, #lane-4:hover {
     background-color: rgba(0,0,115,0.05);
 }
 
@@ -33,22 +40,13 @@ body {
     overflow-wrap: break-word;
 }
 
-#wsurfer, #lane-1, #lane-2, #lane-3 ::part(region) {
+#wsurfer, #lane-1, #lane-2, #lane-3, #lane-4 ::part(region) {
     font-family: "Roboto Condensed", sans-serif;
     font-weight: 400;
     font-style: normal;
     /* height: 100%; */
 }
 
-/*
-#lane-1, #lane-2, #lane-3 ::part(region) {
-    font-family: "Roboto Condensed", sans-serif;
-    font-weight: 400;
-    font-style: normal;
-    height: 100%; 
-}
-*/
-
 h1, h2, h3, p {
     font-family: "Roboto Condensed", sans-serif;
     font-weight: 400;