Zoom features added

audino/frontend/package.json

@@ -24,13 +24,14 @@
     "popper.js": "^1.16.1",
     "prop-types": "^15.7.2",
     "react": "^16.13.1",
-    "react-bootstrap": "^1.0.1",
+    "react-bootstrap": "^1.6.3",
     "react-dom": "^16.13.1",
     "react-helmet": "^6.0.0",
     "react-redux": "^7.2.6",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.3.0",
     "react-scripts": "3.4.1",
+    "resize-image-data": "^0.3.0",
     "redux": "^4.1.2",
     "uuid": "^8.3.2",
     "wavesurfer.js": "^5.2.0"

audino/frontend/scripts/run-dev.sh

@@ -9,6 +9,7 @@ echo "npm install"
     cd "${app}" && npm install
     cd "${app}" && npm install jszip
     cd "${app}" && npm install file-saver
+    cd "${app}" && npm i resize-image-data
 } || {
     echo "package update broke install, deleting node_modules"
     cd "${app}" && rm -rf node_modules

audino/frontend/src/components/annotate/navbutton.js

@@ -34,7 +34,7 @@ const NavButton = props => {
     previous_pages[num_of_prev] = dataId;
     localStorage.setItem('previous_links', JSON.stringify(previous_pages));
     localStorage.setItem('count', JSON.stringify(next_page_num));
-
+    console.log("configed browser settings")
     if (noMore) {
       window.location.href = `${path}/projects/${projectId}/data`;
     } else {
@@ -69,6 +69,7 @@ const NavButton = props => {
     })
       .then(response => {
         const { data_id } = response.data;
+        console.log("successfully prepared next data point")
         loadNextPage(response.status === 202, data_id);
       })
       .catch(e => {

audino/frontend/src/components/annotate/sampleRateChanger.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import { Button } from '../button';
+
+const SampleRateChanger = props => {
+    const {annotate, state} =  props
+    const {wavesurfer, filename, spectrogram} = state
+    const [text, setText] = React.useState("")
+    const [hz, setHz] = React.useState(0)
+    const [hz2, setHz2] = React.useState(Number(wavesurfer.backend.offlineAc.sampleRate/1000))
+
+    const handleSubmit = () => {
+      const int = parseInt(text, 10)
+
+      const newState = annotate.initalState;
+      newState["sampleRate"] = int || 44100
+      wavesurfer.load(`/audios/${filename}`, null, null, null, int );
+    }
+
+    const inputText = e => {
+      setText(e.target.value)
+    }
+
+    const ChangeColorChange = e => {
+      setHz(e.target.value)
+      wavesurfer.empty()
+      wavesurfer.load(`/audios/${filename}`, null, null, null, e.target.value * 1000);
+    }
+
+    return (
+      <div className="sideMenuItem">
+       <input
+        type="range"
+        min="0"
+        max={`${Number(wavesurfer.backend.offlineAc.sampleRate/1000) - 1}`}
+        value={hz}
+        onChange={e => {
+          setHz(e.target.value)
+          spectrogram.scale(e.target.value, hz2, wavesurfer.backend.offlineAc.sampleRate/1000)
+        }} />
+       <input
+        type="range"
+        min="1"
+        max={`${Number(wavesurfer.backend.offlineAc.sampleRate/1000)}`}
+        value={hz2}
+        onChange={e => {
+          setHz2(e.target.value);
+          spectrogram.scale(0, e.target.value, Math.ceil(wavesurfer.backend.offlineAc.sampleRate/1000))
+          /*Object.values(wavesurfer.regions.list).forEach(segment => {
+            segment.scale(e.target.value * 1000)
+          })*/
+        }}
+      />
+      {hz/2 + " - " + hz2/2 + " khz"}
+      </div>
+    )
+};
+
+export default SampleRateChanger;

audino/frontend/src/components/annotate/zoom.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import StickySlider from '../stickySlider';
+const Zoom = props => {
+  const {annotate} = props
+  const {state} = annotate;
+  const {isRendering, wavesurfer, zoomOn} = state
+
+  /*wavesurfer.on('zoom', pxPerSec => {
+    wavesurfer.spectrogram._onUpdate(pxPerSec * wavesurfer.getDuration());
+  })*/
+
+  const handleZoom = value => {
+    console.log("hello", wavesurfer, state, annotate, props)
+    wavesurfer.zoom(value);
+    wavesurfer.spectrogram._onUpdate()
+  }
+
+  return (
+    <div>
+      {zoomOn ?  
+      <div
+        style={{ display: isRendering ? 'none' : '' }}
+      >
+      <StickySlider
+        min="1"
+        max="200"
+        finalChangeCallback={value => handleZoom(value)}
+        stickyPos={[0, 200]}
+        threshold={5}
+      />
+      </div>
+       : null}
+
+    </div>
+
+  );
+};
+
+export default Zoom;

audino/frontend/src/components/sideMenu.js

@@ -6,7 +6,8 @@ import { Button, IconButton } from './button';
 import SpectroChanger from './annotate/spectroChanger';
 import ChangePlayback from './annotate/extraFeatures/changePlayback';
 import PreviousAnnotationButton from './annotate/extraFeatures/previousAnnotationButton';
-
+import SampleRateChanger from './annotate/sampleRateChanger';
+import Zoom from './annotate/zoom';
 const SideMenuTab = props => {
   const { tab, icon, tabOpen, setTab } = props;
   const swapTabs = tab => {
@@ -100,6 +101,8 @@ const SideMenu = props => {
           <ChangePlayback annotate={annotate} />
           <PreviousAnnotationButton annotate={annotate} />
           {toUnsavedClipOn && annotate.UnsavedButton ? annotate.UnsavedButton.render() : null}
+          <SampleRateChanger state={state}  annotate={annotate}/>
+          <Zoom annotate={annotate} />
 
           <br />
           <Button

audino/frontend/src/components/stickySlider.js

@@ -9,7 +9,8 @@ const StickySlider = ({
   hasLabels = true,
   threshold = 10,
   stickyPos = [],
-  changeCallback = noop
+  changeCallback = noop,
+  finalChangeCallback = noop
 }) => {
   const [value, setValue] = React.useState(Math.floor((max - min) / 2));
 
@@ -25,6 +26,7 @@ const StickySlider = ({
       if (Math.abs(pos - finalValue) < threshold) finalValue = pos;
     });
     changeCallback(finalValue);
+    finalChangeCallback(finalValue)
     setValue(finalValue);
   };
 

audino/frontend/src/containers/forms/featureForm.js

@@ -21,7 +21,8 @@ class FeatureForm extends React.Component {
         '2D Labels': false,
         'to unsaved cliped': false,
         playbackOn: false,
-        'spectrogram demo': false
+        'spectrogram demo': false,
+        'zoom': true,
       }
     };
 

audino/frontend/src/css/index.css

@@ -29,6 +29,14 @@ body,
   float: left;
 }
 
+#wavegraph-fliped {
+  width: 200%;
+  top: 256px;
+  position: relative;
+  float: left;
+  transform: scaleY(-1);
+}
+
 #waveform-labels {
   width: 100%;
   position: relative;

audino/frontend/src/pages/annotate.js

@@ -83,7 +83,8 @@ class Annotate extends React.Component {
           toUnsavedClipOn: response.data.features_list['to unsaved cliped'],
           referenceWindowOn: response.data.features_list['reference window'],
           playbackOn: response.data.features_list.playbackOn,
-          spectrogramDemoOn: response.data.features_list['spectrogram demo']
+          spectrogramDemoOn: response.data.features_list['spectrogram demo'],
+          zoomOn: response.data.features_list['zoom']
         });
 
         const wavesurferMethods = new WavesurferMethods({
@@ -146,13 +147,19 @@ class Annotate extends React.Component {
   }
 
   loadFileMetadata(response, boundingBox, wavesurfer, wavesurferMethods) {
+    console.log("hello?????????????????????????")
     this.setState({
       isDataLoading: false,
-      labels: response[0].data
+      labels: response[0].data,
+      wavesurfer,
+      wavesurferMethods
     });
 
-    const { is_marked_for_review, segmentations, filename, original_filename } = response[1].data;
-
+    const { is_marked_for_review, segmentations, filename, original_filename, sampling_rate } = response[1].data;
+    let {sampleRate} = this.state
+    if (!sampleRate) {
+      sampleRate = sampling_rate
+    }
     const regions = segmentations.map(segmentation => {
       if (boundingBox) {
         return {
@@ -180,18 +187,20 @@ class Annotate extends React.Component {
         boundingBox
       };
     });
-
+    console.log("hello?????????????????????????", this.state.wavesurfer)
     this.setState({
       isDataLoading: false,
       isMarkedForReview: is_marked_for_review,
       original_filename
     });
+    console.log("hello?????????????????????????")
 
-    wavesurfer.load(`/audios/${filename}`);
+    console.log("start load", sampleRate)
+    wavesurfer.load(`/audios/${filename}`, null, null, null, sampleRate);
     const { zoom } = this.state;
     wavesurfer.zoom(zoom);
 
-    this.setState({ wavesurfer, wavesurferMethods });
+    this.setState({ wavesurfer, wavesurferMethods, filename });
     this.loadRegions(regions);
   }
 
@@ -203,8 +212,9 @@ class Annotate extends React.Component {
     newState.segmentationUrl = `/api/projects/${projectId}/data/${nextDataId}/segmentations`;
     newState.dataId = nextDataId;
     newState.wavesurfer = null;
-
+    console.log("configed new state")
     wavesurfer.destroy();
+    console.log("wavesurfer destroied")
     this.setState(newState, () => {
       this.componentDidMount();
     });

audino/frontend/src/pages/annotateHelpers/wavesurferMethods.js

@@ -164,13 +164,6 @@ class WavesurferMethods {
     wavesurfer.skipBackward(5);
   }
 
-  handleZoom(e) {
-    const { wavesurfer } = this.state;
-    const zoom = Number(e.target.value);
-    wavesurfer.zoom(zoom);
-    this.setState({ zoom });
-  }
-
   styleRegionColor(region, color) {
     region.style(region.element, {
       backgroundColor: color

audino/frontend/src/wavesurfer.js/src/plugin/regions/region.js

@@ -110,6 +110,17 @@ export default class Region {
     };
   }
 
+    async scale(newMaxFrequency) {
+
+        const freqRatio = newMaxFrequency / this.maxFrequency
+        console.log(this.maxFrequency, newMaxFrequency, freqRatio )
+        this.maxFrequency = newMaxFrequency
+        console.log(this.top, this.top / freqRatio )
+        this.top = this.top * freqRatio
+        this.bot = this.bot * freqRatio
+        this.update({})
+    }
+
   /* Update region params. */
   update(params) {
     if (params.start != null) {

audino/frontend/src/wavesurfer.js/src/plugin/spectrogram/index.js

@@ -283,6 +283,16 @@ export default class SpectrogramPlugin {
   }
 
   render(zoom = false) {
+    this.loadLabels(
+        'rgba(68,68,68,0.5)',
+        '12px',
+        '10px',
+        '',
+        '#fff',
+        '#f7f7f7',
+        'center',
+        '#specLabels'
+      );
     this.updateCanvasStyle(zoom);
 
     if (this.frequenciesDataUrl) {
@@ -334,7 +344,7 @@ export default class SpectrogramPlugin {
       }
       spectrCc.putImageData(imageData, 0, 0);
       try {
-        const test = new Spectrogram(my.wavesurfer, spectrCc, imageData, pixels, heightFactor);
+        const test = new Spectrogram(my.wavesurfer, spectrCc, imageData, pixels, heightFactor, my);
       } catch (e) {
         console.error(e);
       }
@@ -349,7 +359,9 @@ export default class SpectrogramPlugin {
     const { buffer } = this;
     const channelOne = buffer.getChannelData(0);
     // const bufferLength = buffer.length;
-    const { sampleRate } = buffer;
+    let { sampleRate } = buffer;
+    //sampleRate = 18000 * 2
+    console.log(sampleRate)
     const frequencies = [];
 
     if (!buffer) {
@@ -405,7 +417,9 @@ export default class SpectrogramPlugin {
     textColorFreq,
     textColorUnit,
     textAlign,
-    container
+    container,
+    sampleRateParam=null,
+    sampleRateMin=null
   ) {
     const frequenciesHeight = this.height;
     bgFill = bgFill || 'rgba(68,68,68,0)';
@@ -419,8 +433,21 @@ export default class SpectrogramPlugin {
     const bgWidth = 55;
     const getMaxY = frequenciesHeight || 512;
     const labelIndex = 5 * (getMaxY / 256);
-    const freqStart = 0;
-    const step = (this.wavesurfer.backend.ac.sampleRate / 2 - freqStart) / labelIndex;
+    const freqStart = sampleRateMin || 0;
+
+    let sampleRate = sampleRateParam
+    if (sampleRate === null) {
+        if (this.wavesurfer.backend.offlineAc.sampleRate) {
+            sampleRate = this.wavesurfer.backend.offlineAc.sampleRate
+        } else if (this.wavesurfer.backend.ac.sampleRate) {
+            sampleRate = this.wavesurfer.backend.ac.sampleRate
+        }
+    } else {
+        sampleRate = sampleRateParam
+    }
+
+
+    const step = (sampleRate / 2 - freqStart) / labelIndex;
 
     // prepare canvas element for labels
     const ctx = this.labelsEl.getContext('2d');