synthing

commit 0803ef251edff24cbce994cbd61f0fd0569399c2
parent 26bb9c6ab28b699b2a107c0e757bb351a13912fc
Author: Massimo Siboldi <mdsiboldi@gmail.com>
Date:   Tue, 20 Mar 2018 13:31:07 -0700

add total wave view

Diffstat:
M
src/App/index.js
 | 
11
++++++++---
M
src/index.css
 | 
15
+++++++++++++++

2 files changed, 23 insertions(+), 3 deletions(-)
diff --git a/src/App/index.js b/src/App/index.js
@@ -62,7 +62,7 @@ class App extends Component {
         const runningAverage = (curVal, valToAdd, iteration) =>
             (((curVal * iteration) + valToAdd) / (iteration + 1));
         const firstTone = tones.shift();
-        return tones.reduce(
+        const w = tones.reduce(
             (totalWaveform, currTone, i) => (
                 totalWaveform.map(
                     (val, j) => (
@@ -77,6 +77,7 @@ class App extends Component {
             ),
             helpers.scale(firstTone.waveform, firstTone.mix)
         );
+        return helpers.scale(w, 1 / w.reduce((l, r) => Math.max(Math.abs(l), Math.abs(r))));
     }
 
     keyHandler(e) {
@@ -129,8 +130,12 @@ class App extends Component {
                 onKeyDown={this.keyHandler}
             >
                 <div>
-                    <h1>synthing
-                    </h1>
+                    <h1 id="synthing-title"> synthing </h1>
+                    <div class="total-wave">
+                       <WaveTable width={100} height={50} waveform={this.totalWaveform()} />
+                       <WaveTable width={100} height={50} waveform={this.totalWaveform()} />
+                       <WaveTable width={100} height={50} waveform={this.totalWaveform()} />
+                    </div>
                 </div>
                 <WaveEditor
                     mouseData={this.state.mouseData}
diff --git a/src/index.css b/src/index.css
@@ -87,6 +87,21 @@ h1 {
     align-self: right;
 }
 
+.total-wave {
+    position: absolute;
+    top: 15px;
+    right: 50px
+}
+
+@keyframes wiggle {
+    from {
+        margin-left: -200px;
+    }
+    to {
+        margin-left: -100px;
+    }
+}
+
 @media screen and (max-width: 882px) {
     .global-controls > div {
         align-items: center;