Remove spectrogram from web ui

srwi · Jun 28, 2022 · 5403754 · 5403754
1 parent 8c579e0
commit 5403754
Show file tree

Hide file tree

Showing 5 changed files with 0 additions and 128 deletions.
diff --git a/data/index.css b/data/index.css
@@ -26,13 +26,6 @@ h6 {
 	font-size: 1.25rem;
 	margin: -0.188rem 0rem;
 }
-#spectrumDisplay {
-	height: 100px;
-}
-#spectrumDisplay div {
-	flex: 1;
-	background-color: white;
-}
 #colorPickersWrapper {
 	margin: 10px 8px;
 }

diff --git a/data/index.htm b/data/index.htm
@@ -17,9 +17,6 @@
     <nav class="navbar fixed-top navbar-dark">
       <div class="container-fluid px-4" id="navbarContent">
         <a class="navbar-brand me-auto" id="navbarTitle">Connecting...</a>
-        <button class="navbar-toggler border-0 p-1 shadow-none d-none px-3" type="button" id="spectrumButton" onclick="spectrogram.toggle();">
-          <i class="bi bi-music-note-beamed"></i>
-        </button>
         <button class="navbar-toggler border-0 p-1 shadow-none d-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#settingsOffcanvas" id="settingsButton">
           <i class="bi bi-gear"></i>
         </button>
@@ -111,11 +108,6 @@ <h6>Startup animation</h6>
           <label for="startupAnimation" class="form-label">Animation</label>
           <select class="form-select" id="startupAnimation"></select>
         </div>
-
-        <h6>Spectrogram</h6>
-        <label for="extraSpectrogramDevices" class="form-label">Additional devices</span></label>
-        <input type="text" class="form-control" id="extraSpectrogramDevices" name="extraSpectrogramDevices" placeholder="IP addresses (comma-separated)">
-        <div id="spectrumDisplay" class="d-flex justify-content-between align-items-end"></div>
       </div>
 
     </div>

diff --git a/data/index.js b/data/index.js
@@ -3,7 +3,6 @@
 let connection;
 let queue;
 let cooldownTimer;
-let spectrogram; // eslint-disable-line no-unused-vars
 
 function openWebsocket(uri) {
   const ws = new WebSocket(uri, ["arduino"]);
@@ -74,7 +73,6 @@ function setupSpinners() {
 function displayConnectedState(connected) {
   document.getElementById("navbarTitle").innerHTML = connected ? "FastLEDHub" : "Disconnected...";
   document.getElementById("refreshButton").classList.toggle("d-none", connected);
-  document.getElementById("spectrumButton").classList.toggle("d-none", !connected);
   document.getElementById("stopButton").classList.toggle("d-none", !connected);
   document.getElementById("settingsButton").classList.toggle("d-none", !connected);
 }
@@ -180,8 +178,6 @@ function handleJsonData(data) {
     document.getElementById("longitude").value = data.longitude;
   if (Object.prototype.hasOwnProperty.call(data, "latitude"))
     document.getElementById("latitude").value = data.latitude;
-  if (Object.prototype.hasOwnProperty.call(data, "extraSpectrogramDevices"))
-    document.getElementById("extraSpectrogramDevices").value = data.extraSpectrogramDevices;
   if (Object.prototype.hasOwnProperty.call(data, "alarmDuration"))
     document.getElementById("alarmDuration").value = data.alarmDuration;
   if (
@@ -232,7 +228,6 @@ function sendConfig() {
       summerTime: document.getElementById("summerTime").checked,
       longitude: document.getElementById("longitude").value,
       latitude: document.getElementById("latitude").value,
-      extraSpectrogramDevices: document.getElementById("extraSpectrogramDevices").value,
       sunsetEnabled: document.getElementById("sunsetEnabled").checked,
       sunsetDuration: document.getElementById("sunsetDuration").value,
       sunsetOffset: document.getElementById("sunsetOffset").value,
@@ -279,113 +274,9 @@ function sendText(text) {
   console.log("Sent text: " + text);
 }
 
-class Spectrogram {
-  openConnections() {
-    this.connections = [connection];
-    const extraDevices = document.getElementById("extraSpectrogramDevices").value.split(",");
-    extraDevices.forEach((uri) => {
-      uri = uri.trim();
-      if (uri !== "") this.connections.push(openWebsocket(`ws://${uri}:81/`));
-    });
-  }
-
-  begin() {
-    this.bins = 16;
-    this.fftRangeBit = 10;
-    this.fftRange = 1024;
-    this.connections = [];
-    this.audioCtx = new (window.AudioContext || window.webkitAudioContext)();
-    this.analyser = this.audioCtx.createAnalyser();
-    this.analyser.fftSize = 2048;
-    this.analyser.minDecibels = -90;
-    this.analyser.maxDecibels = -10;
-    this.analyser.smoothingTimeConstant = 0.7;
-
-    this.openConnections();
-
-    if (navigator.mediaDevices.getUserMedia) {
-      const constraints = { audio: true };
-      navigator.mediaDevices
-        .getUserMedia(constraints)
-        .then((stream) => {
-          this.microphoneStream = stream;
-          this.source = this.audioCtx.createMediaStreamSource(stream);
-          this.source.connect(this.analyser);
-          this.sendTimer = setInterval(this.tick.bind(this), 5);
-          spectrumButton.classList.add("text-white");
-        })
-        .catch((e) => {
-          console.log("The following error occured in getUserMedia: " + e);
-        });
-    } else {
-      console.log("GetUserMedia not supported.");
-    }
-  }
-
-  end() {
-    clearInterval(this.sendTimer);
-    this.audioCtx.close();
-    this.microphoneStream.getAudioTracks().forEach((track) => {
-      track.stop();
-    });
-    spectrumButton.classList.remove("text-white");
-  }
-
-  tick() {
-    const fft = new Uint8Array(this.analyser.frequencyBinCount);
-    this.analyser.getByteFrequencyData(fft);
-
-    const spectrumData = new Array(this.bins);
-    let left = 0;
-    for (let line = 0; line < this.bins; line++) {
-      const right = Math.round(
-        (Math.pow(2, (this.fftRangeBit * line) / (this.bins - 1)) /
-          this.fftRange) *
-          (this.fftRange - 1)
-      );
-      let peak = 0;
-      for (; left < right; left++) {
-        if (fft[left + 1] / 255 > peak) {
-          peak = fft[left + 1] / 255;
-        }
-      }
-      let intensity = Math.pow(peak, 1.2);
-      intensity = Math.min(Math.max(intensity, 0), 1);
-      spectrumData[line] = intensity * 255;
-    }
-
-    this.transmit(spectrumData);
-    this.visualize(spectrumData);
-  }
-
-  transmit(data) {
-    this.connections.forEach((c) => {
-      if (c.readyState === 1) c.send(Uint8Array.from([30].concat(data)).buffer);
-    });
-  }
-
-  visualize(data) {
-    const spectrumDisplay = document.getElementById("spectrumDisplay")
-    while (spectrumDisplay.children.length < this.bins)
-      spectrumDisplay.appendChild(document.createElement("div"));
-    data.forEach((d, idx) => {
-      spectrumDisplay.children.item(idx).style.height = (d / 255) * 100 + "px";
-    });
-  }
-
-  toggle() {
-    if (this.audioCtx?.state === "running") {
-      this.end();
-    } else {
-      this.begin();
-    }
-  }
-}
-
 window.onload = () => {
   openMainWebsocket();
   setupSpinners();
-  spectrogram = new Spectrogram();
   document.getElementById("settingsOffcanvas").addEventListener("hidden.bs.offcanvas", function () {
     sendConfig();
   });

diff --git a/src/Config.cpp b/src/Config.cpp
@@ -87,8 +87,6 @@ bool ConfigClass::parseJson(const char *input)
     sunsetAnimation = doc["sunsetAnimation"].as<String>();
   if (doc.containsKey("startupAnimation"))
     startupAnimation = doc["startupAnimation"].as<String>();
-  if (doc.containsKey("extraSpectrogramDevices"))
-    extraSpectrogramDevices = doc["extraSpectrogramDevices"].as<String>();
   if (doc.containsKey("sliderValues"))
   {
     sliderValues.clear();
@@ -130,7 +128,6 @@ void ConfigClass::getUserConfigJson(JsonDocument &doc)
   doc["sunsetOffset"] = sunsetOffset;
   doc["sunsetAnimation"] = sunsetAnimation;
   doc["startupAnimation"] = startupAnimation;
-  doc["extraSpectrogramDevices"] = extraSpectrogramDevices;
   JsonArray sliderValueArray = doc.createNestedArray("sliderValues");
   for (uint16_t i = 0; i < sliderValues.size(); i++)
   {

diff --git a/src/Config.h b/src/Config.h
@@ -26,7 +26,6 @@ class ConfigClass
   int16_t sunsetOffset = 0;
   String sunsetAnimation = "";
   String startupAnimation = "";
-  String extraSpectrogramDevices = "";
   LinkedList<int16_t> sliderValues;
   LinkedList<CRGB> colorPickerValues;