From f300f3e61b4e041a2c05a608c4e72255c972f4a5 Mon Sep 17 00:00:00 2001
From: Brandon Thomas <echelon@gmail.com>
Date: Wed, 17 Jun 2020 03:16:55 -0400
Subject: [PATCH] flip spectrogram

---
 tts_frontend/src/App.css                                    | 4 ++++
 .../SpeakerSpectrogramAudioForm.tsx                         | 6 +++---
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/tts_frontend/src/App.css b/tts_frontend/src/App.css
index c7bbf60f5b..4eac13adc6 100644
--- a/tts_frontend/src/App.css
+++ b/tts_frontend/src/App.css
@@ -20,4 +20,8 @@
 
 .track_text {
   margin-left: 0.5em;
+}
+
+canvas#spectrogram {
+  transform: scaleY(-1); /* Spectrograms are flipped */
 }
\ No newline at end of file
diff --git a/tts_frontend/src/components/modes/speaker_spectrogram_mode/SpeakerSpectrogramAudioForm.tsx b/tts_frontend/src/components/modes/speaker_spectrogram_mode/SpeakerSpectrogramAudioForm.tsx
index 13e0501aa6..e48a8a468f 100644
--- a/tts_frontend/src/components/modes/speaker_spectrogram_mode/SpeakerSpectrogramAudioForm.tsx
+++ b/tts_frontend/src/components/modes/speaker_spectrogram_mode/SpeakerSpectrogramAudioForm.tsx
@@ -128,9 +128,9 @@ class SpeakerSpectrogramAudioForm extends React.Component<Props, State> {
 
       var image = new ImageData(this.state.spectrogram!.pixels, width, height);
 
-      createImageBitmap(image).then(renderer => 
+      createImageBitmap(image).then(renderer => {
         ctx.drawImage(renderer, 0, 0, width * 3, height * 3)
-      );
+      });
     }
   }
 
@@ -143,7 +143,7 @@ class SpeakerSpectrogramAudioForm extends React.Component<Props, State> {
       height = this.state.spectrogram.height * 3;
     }
 
-    let canvas = <canvas ref="canvas" width={width} height={height}/>
+    let canvas = <canvas ref="canvas" width={width} height={height} id="spectrogram" />
 
     return (
       <div>