added new region lane, updated size of wsr audio lane, added helper function to gener...

diff --git a/app.js b/app.js
index f1a74f450269a81d9466d1f1e7a83ef850e4f54d..08fb931e0072c7ed716957bd11e048dcc2b82801 100644 (file)
--- 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 d30fb702446795b148c3bc10c1f2b3051414d964..e19ce6a4396b60452a92856974439c6a4127c3c4 100644 (file)
--- 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 bb4b50d542c73ebc90b310b57e7acf46296228c4..6b04b8056439c9bb8320ad5b19e18ba32e6be4a1 100644 (file)
--- 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;