From: equilet <2237372+equilet@users.noreply.github.com>
Date: Fri, 22 Mar 2024 04:21:58 +0000 (-0500)
Subject: cleaned up regionprop and editmarker sections, added time display, user can now updat... 
X-Git-Tag: v1.0~6
X-Git-Url: https://git.dabkitsch.com/?a=commitdiff_plain;h=794bde8f4580ff62f3173d203ba7a60c284489f9;p=m29-web-sfp.git

cleaned up regionprop and editmarker sections, added time display, user can now update previously existing marker content
---

diff --git a/app.js b/app.js
index d70b4de..74c101a 100644
--- a/app.js
+++ b/app.js
@@ -1,11 +1,10 @@
 const num_slots = 16;
 let num_regions = 0;
-let phase;
-let curr_region = -1;
-//let filepath = "media/basic-break.wav";
+//let curr_region = null;
 let filepath = "media/Berio-criesoflondon.wav";
 let global_dict = new Object();
-let text_input, text_butt;
+let activeregion = null;
+let text_input, text_butt, timedisp;
 let btn_r = [];
 let btn_tp = [];
 let btn_misc = [];
@@ -40,6 +39,33 @@ document.addEventListener('DOMContentLoaded', function(){
 //
 
 
+
+//function file_to_server() {
+    //let dictstr = JSON.stringify(global_dict);
+    //fs = new File("media/test.json", dictstr);
+    //fs.writeFile();
+//}
+
+function get_time_string(running_sec) {
+
+    const hrs = Math.floor(running_sec / 3600);
+    const mns  = Math.floor((running_sec % 3600) / 60);
+    const scs = Math.floor((running_sec % 3600) % 60);
+    
+    /*
+    let hdisp = hrs > 0 ? hrs + (hrs == 1 ? " hour, " : " hours, ") : "";
+    let mdisp = mns > 0 ? mns + (mns == 1 ? " minute, " : " minutes, ") : "";
+    let sdisp = scs > 0 ? scs + (scs == 1 ? " second, " : " seconds, ") : "";
+
+    return hdisp + mdisp + sdisp;
+    */
+    return hrs + ":" + mns + ":" + scs;
+}
+
+function linear_map(phase, imn, imx, omn, omx){
+    return (phase - imn) * (omx - omn) / (imx - imn) + omn;
+}
+
 function add_one_region() {
 
     const dur = ws.getDuration();
@@ -48,6 +74,7 @@ function add_one_region() {
     //let randstart = (Math.random() * dur) - pad;
     //let randend = randstart + 3;
     num_regions++;
+    //console.log("adding a region with id", num_regions);
 
     wsr.addRegion({
         channelIdx: num_regions, 
@@ -55,7 +82,7 @@ function add_one_region() {
         //id: "cue " + i, 
         id: 'region',
         start: currtime, 
-        end: currtime + pad, 
+        end: currtime + 2., 
         loop: false, 
         color: 'hsla(184, 32%, 72%, 0.1)'
     });
@@ -85,15 +112,21 @@ function add_3_regions() {
     }
 }
 
+function clear_regions() {
+    wsr.clearRegions();
+    num_regions = 0;
+}
+
 function buttons_reset() {
         btn_tp_reset();
         btn_r_reset();
         btn_m_reset();
-        marker_view_reset();
+        //marker_view_reset();
 }
 
 function marker_view_reset(){
-    curr_region = -1;
+    //curr_region = null;
+    activeregion = null;
     text_input.value = "no marker selected";
 }
 
@@ -113,7 +146,7 @@ function localstorage_write(data) {
 
 function initialize(){
     
-    let activeregion = null;
+    activeregion = null;
 
     ws = WaveSurfer.create({
         container: '#waveform',
@@ -145,25 +178,43 @@ function initialize(){
         ws.play();
         buttons_reset();
     });
+    ws.on('timeupdate', (currentTime) => {
+        //let timestring = get_time_string(ws.getCurrentTime());
+        let timestring = get_time_string(currentTime);
+        //console.log("time string:", timestring);
+        timedisp.innerHTML = timestring;
+    });
 
+    /*
     wsr.on('region-updated', (region) => {
-        console.log("a region with id", region.channelIdx, "was updated.");
-        console.log("the new start:", region.start);
-        console.log("the new end:", region.end);
+        //console.log("a region with id", region.channelIdx, "was updated.");
+        //console.log("the new start:", region.start);
+        //console.log("the new end:", region.end);
         //do something here to update json or re-popuplate all marker data
     });
+    */
 
     wsr.on('region-clicked', (region, e) => {
         e.stopPropagation();
         activeregion = region;
+        let valid;
+        if(activeregion != null){
+            valid = true;
+        } else {
+            valid = false;
+        }
+        console.log("setting active region to:", activeregion);
+        console.log("is active region valid?:", valid);
+
         region.play();
         buttons_reset();
-
         text_input.value = region.content.innerHTML;
-        curr_region = region.channelIdx; //zero-based
+        //curr_region = region.channelIdx; //zero-based
+
 
+        console.log("----------------------------------------------------------");
         console.log("a region with id", region.channelIdx, "was clicked.");
-        console.log("this region's start time is", region.start);
+        console.log("region range:", region.start, region.end);
         //console.log("this region's text:", region.content.innerHTML);
     });
 
@@ -188,19 +239,6 @@ function initialize(){
         "m3" : [14.9, 3., "m4 label"]
     };
 
-    text_input = document.getElementById("textinput");
-    text_butt = document.getElementById("textsubmit");
-
-    //marker text
-    text_butt.addEventListener('click', () => {
-        console.log("the text entered was", text_input.value);
-
-        if(curr_region){
-            //wsr[curr_region].content.innerHTML = text_input.value;
-            //do stuff here to display region text
-        }
-
-    });
     //interface data--------------------------------------------------------------
     //
     
@@ -212,7 +250,7 @@ function initialize(){
             clicked: false, 
             call_action: function(){
                 btn_r_reset();
-                console.log('recall button', i, 'clicked');
+                //console.log('recall button', i, 'clicked');
             },
         };
         btn_r.push(temp);
@@ -220,7 +258,7 @@ function initialize(){
 
     btn_tp = [
         {
-            id: "button1",
+            id: "play",
             text: "play/resume",
             clicked: false,
             call_action: function () {
@@ -228,7 +266,7 @@ function initialize(){
             },
         },
         {
-            id: "button2",
+            id: "pause",
             text: "pause",
             clicked: false,
             call_action: function () {
@@ -236,7 +274,7 @@ function initialize(){
             },
         },
         {
-            id: "button3",
+            id: "stop",
             text: "stop [+ cue]",
             clicked: false,
             call_action: function () {
@@ -246,14 +284,24 @@ function initialize(){
     ];
 
     btn_misc = [
+        {
+            id: "remove",
+            text: "remove selected",
+            clicked: false,
+            call_action: function () {
+                activeregion.remove();
+                activeregion = null;
+                num_regions--;
+                console.log('num_regions is now:', num_regions);
+            },
+        }, 
+
         {
             id: "generate",
             text: "generate markers",
             clicked: false,
             call_action: function () {
-                console.log("generate button clicked");
-                wsr.clearRegions();
-                num_regions = 0;
+                clear_regions();
                 add_3_regions();
             },
         }, 
@@ -262,23 +310,14 @@ function initialize(){
             text: "clear markers", 
             clicked: false, 
             call_action: function () {
-                wsr.clearRegions();
-                num_regions = 0;
+                clear_regions();
             },
         }
     ];
 }
 
-function linear_map(phase, imn, imx, omn, omx){
-    return (phase - imn) * (omx - omn) / (imx - imn) + omn;
-}
-
-function file_to_server() {
-    //let dictstr = JSON.stringify(global_dict);
-    //fs = new File("media/test.json", dictstr);
-    //fs.writeFile();
-}
-
+//button functions ---------------------------------------------------
+//
 //try to abstract this to be one function
 function btn_tp_reset() {
 
@@ -310,7 +349,7 @@ function btn_r_reset() {
 }
 
 function btn_m_reset() {
-    console.log('btn_m_reset() called');
+    //console.log('btn_m_reset() called');
 
     btn_misc.forEach((button, index) => {
         btn_misc[index].clicked = false;
@@ -350,6 +389,14 @@ function buttons_make() {
 
         cont_tp.appendChild(button_elem);
     });
+    
+    timedisp = document.createElement("div");
+    timedisp.id = "timedisp";
+    timedisp.clicked = false;
+    timedisp.classList.add("buttons");
+    timedisp.innerHTML = '<h2>00:00:00</h2>';
+    cont_tp.appendChild(timedisp);
+
 
     //cue marker area -----------------------------------------------------
     btn_r.forEach((button) => {
@@ -401,4 +448,36 @@ function buttons_make() {
         cont_misc.appendChild(button_elem);
     });
 
+    //region properties
+    const check = document.getElementById("loop");
+
+    //marker interactions
+    text_input = document.getElementById("textinput");
+    text_butt = document.getElementById("textsubmit");
+
+    //marker text
+    text_butt.addEventListener('mousedown', () => {
+        console.log("the text entered was", text_input.value);
+
+/*
+        let valid;
+        if(activeregion != null){
+            valid = true;
+        } else {
+            valid = false;
+        }
+        console.log("is active region valid?:", valid);
+        */
+        
+        if(activeregion != null){
+            console.log("found active region; populating...");
+            activeregion.content.innerHTML = text_input.value;
+        }
+        
+        text_butt.classList.add('clicked');
+    });
+    text_butt.addEventListener('mouseup', () => {
+        text_butt.classList.remove('clicked');    
+    });
+
 }
diff --git a/index.html b/index.html
index 4882157..ecc24a2 100644
--- a/index.html
+++ b/index.html
@@ -27,6 +27,8 @@
 
         <div id="waveform">
         </div>
+        <div id="droparea">
+        </div>
 
         <div id="transport">
             <h2>Transport</h2>
@@ -45,17 +47,21 @@
             <div id="container_misc" class="container_horiz"></div>
         </div>
 
-        <div id="loop" class="container_vert">
-            <h2>Loop Playback of Region</h2>
-            <div class="container_horiz" id="loop_check">
-                <input type="checkbox" checked="${loop}" />
+        <div id="regionprops" class="container_vert">
+            <h2>Region Properties</h2>
+            <div class="container_hstart">
+                <h3>Looping</h3>
+                <input type="checkbox" id="loop"/>
             </div>
         </div>
 
         <div id="marker_edit">
             <h2>Edit Marker</h2>
-            <input id="textinput" value="default text"></input>
-            <button id="textsubmit"></button>
+            <div class="container_hstart">
+                <input id="textinput" value="default text"></input>
+                <div id="textsubmit" class="buttons"></div>
+            </div>
+            <!-- <button id="textsubmit"></button> -->
         </div>
 
 
diff --git a/style/style.css b/style/style.css
index 8ea02a3..0bff5ef 100644
--- a/style/style.css
+++ b/style/style.css
@@ -29,7 +29,7 @@ html, body {
         */
 }
 
-h1, h2, p {
+h1, h2, h3, p {
     font-family: "Roboto Condensed", sans-serif;
     font-weight: 400;
     font-style: normal;
@@ -39,14 +39,20 @@ h1 {
     font-size: 24px;
 }
 
-h2, em {
+h2  {
     width: 100%;
     font-size: 15px;
 }
 
+h3 {
+    font-size: 12px;
+}
+
 /* all button sections */
 .container {
 }
+
+/* this can be cleaned up so that the namded ID exceptions can have differing justify-content */
 .container_vert {
     display: flex;
     flex-direction: column;
@@ -59,7 +65,12 @@ h2, em {
     flex-basis: auto;
     justify-content: space-between;
 }
-
+.container_hstart {
+    display: flex;
+    flex-direction: row;
+    flex-basis: auto;
+    justify-content: start;
+}
 /*
 #container_tp {
     width: 30%;
@@ -70,10 +81,9 @@ h2, em {
 }
 */
 
-#textsubmit {
-    background: #000000; 
-    width: 100px;
-    height: 20px;
+#textinput {
+    /* width: 500px; */
+    width: 100%;
 }
 
 .buttons {