speaker-calibration 1.0.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 EasyEyes
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,72 @@
+# Speaker-Calibration
+
+[![Netlify Status](https://api.netlify.com/api/v1/badges/4662ab8c-dd4f-43ce-8e2d-add7a406300a/deploy-status)](https://app.netlify.com/sites/focused-hodgkin-0a6531/deploys)
+
+# Contribution Guidelines
+
+_As of 03/01/2022_
+
+## Initial Setup
+
+1. `git clone https://github.com/EasyEyes/speaker-calibration.git`
+2. `cd speaker-calibration`
+3. `npm i`
+
+## Local Development
+
+All outputs from the scripts/recipies below should be automatically placed in the `/dist` directory.
+This is what will be served once the library is published.
+
+### Example
+
+In `/dist/example` you will find a small example app that uses the `speaker-calibration` library.
+
+### Javascript
+
+In `package.json` you will see some key scripts:
+
+1.  `build:wasm` cleans and rebuilds the wasm files
+2.  `build:dev` tells webpack to build the `speaker-calibration` library in development watch mode,
+    outputing to `/dist`
+3.  `serve:dev` spins up an `express.js` server on port `3000` using `nodemon`. It serves the
+    `/dist` & `/dist/example` folders.
+4.  `lint` runs `eslint` on all js files in the project
+5.  `lint:fix` lints and automatically fixes all js files in the project.
+6.  `build:doc` builds the documentation using `jsdoc`. Outputs to `/doc`
+
+Run `(1)` & `(2)` in seperate shell windows, with this setup you will be able to modify both the
+library and front end examples with hot reload built in. `(3)` provides a simple abstraction on the
+`makefile` recipies below. Run `(5)` precommit to keep you code standardized.
+
+TODO Make `(5)` a precommit hook
+
+### CPP/WASM
+
+We are using [Emscripten](https://emscripten.org/) to compile the C++ code into a wasm file. Usage
+requires the installation of the Emscriten compiler. Instructions can be found on their website. In
+`makefile` you will see a few recipies:
+
+- `mlsGen_bind` compiles the cpp files to wasm, generating a modularized javascript "glue" file,
+  using embind. This is the current build target
+- `mlsGen_module` compiles the cpp files to wasm, generating a modularized javascript "glue" file.
+- `mlsGen_wasm` compiles the cpp file to a stand-alone wasm without a javascript "clue" file.
+- `clean` cleans up and generated code
+- `rebuild` cleans and rebuilds the output. Run this after making changes to the cpp files.
+
+### Documentation
+
+We use [jsdoc](https://jsdoc.app/) standards to document our library.
+
+### Listing
+
+We use [ESLint](https://eslint.org/) to lint our code and enforce best practices. We are currently
+using [AirBnB's JavaScript Style Guide](https://airbnb.io/javascript/)
+
+### Styling
+
+We use [Prettier](https://prettier.io/) to format our code.
+
+## Deployment
+
+Changes publshed to `main` will automatically trigger a deploy on the `netlify` project TODO: Fix
+netlify deploy not serving the /dist & /example folders

package/dist/example/index.html

@@ -0,0 +1,47 @@
+<!doctype html>
+<html class="no-js" lang="">
+
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <title>Sound Check</title>
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png">
+    <!--CSS-->
+    <link href="../example/styles.css" rel="stylesheet" typ="text/css">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
+
+</head>
+
+<body>
+    <!--[if lt IE 8]>
+            <p class="browserupgrade">
+            You are using an <strong>outdated</strong> browser. Please
+            <a href="http://browsehappy.com/">upgrade your browser</a> to improve
+            your experience.
+            </p>
+        <![endif]-->
+    <div class="container">
+        <h1>Check out /speaker</h1>
+        <p class="lead">
+            Go to <a id="speakerLink">/speaker</a> to simulate calibrating as part
+            of an experiment running on a participant's computer.
+
+            The page will instruct the user on how to use their mobile device as a
+            calibration microphone.
+        </p>
+    </div>
+    <script type="text/javascript">
+        const speakerLink = "/speaker";
+        const baseURL = location.href.substring(0, location.href.lastIndexOf('/'));
+        document.getElementById("speakerLink").setAttribute("href", baseURL + speakerLink);
+    </script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
+        integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
+        crossorigin="anonymous"></script>
+</body>
+
+</html>

package/dist/example/listener.html

@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html class="no-js" lang="">
+
+<head>
+  <meta charset="utf-8" />
+  <meta http-equiv="x-ua-compatible" content="ie=edge" />
+  <title>Listener</title>
+  <meta name="description" content="" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+  <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
+
+  <!-- CSS -->
+  <link href="../example/styles.css" rel="stylesheet" typ="text/css">
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
+    integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
+
+
+  <!--<script src="https://www.unpkg.com/sound-check">  </script>-->
+  <script src="../main.js"></script>
+</head>
+
+<body>
+  <!--[if lt IE 8]>
+      <p class="browserupgrade">
+        You are using an <strong>outdated</strong> browser. Please
+        <a href="http://browsehappy.com/">upgrade your browser</a> to improve
+        your experience.
+      </p>
+    <![endif]-->
+  <div class="container">
+    <h1>Listener Page</h1>
+    <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia maxime sapiente repudiandae est,
+      magnam ex sint iure quo porro ullam debitis inventore at temporibus quod ducimus nesciunt dolorem laboriosam.
+      Eius!</p>
+    <div class="row">
+      <div class="col-6">
+        <button id="calibrationBeginButton" type="button" class="btn btn-primary">Calibrate Speakers</button>
+      </div>
+      <div class="col-6">
+        <div id="display"></div>
+      </div>
+    </div>
+  </div>
+  <script type="text/javascript">
+    const listenerParameters = {
+      targetElementId: "display"
+    };
+    document.getElementById("calibrationBeginButton").onclick = () => {
+      window.listener = new speakerCalibrator.Listener(listenerParameters);
+      console.log(window.listener)
+    };
+  </script>
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
+    integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
+    crossorigin="anonymous"></script>
+</body>
+
+</html>

package/dist/example/server.js

@@ -0,0 +1,50 @@
+
+// eslint-disable-next-line import/no-extraneous-dependencies
+const express = require('express');
+const path = require('path');
+
+const app = express();
+const port = 3000;
+
+app.use('/', express.static(path.join(__dirname, '/../'))); // serve the distribution folder
+
+// Middleware to check we have all the params we need
+const checkParams = (req, res, next) => {
+  if (!Object.prototype.hasOwnProperty.call(req.query, 'speakerPeerId')) {
+    console.log('No peerID given.');
+    throw new Error('No peerID given -- unable to connect to peer.');
+  }
+  next();
+};
+
+// Simple Routing
+app.get('/', (req, res) => {
+  res.sendFile(path.join(__dirname, 'index.html'));
+});
+
+app.get('/speaker', (req, res) => {
+  res.sendFile(path.join(__dirname, 'speaker.html'));
+});
+
+app.get('/listener', checkParams, (req, res) => {
+  res.sendFile(path.join(__dirname, 'listener.html'));
+});
+
+app.use((err, req, res) => {
+  res.status(err.status || 500);
+  res.send({
+    error: err.message,
+  });
+});
+
+app.use((req, res) => {
+  res.status(404);
+  res.send({
+    error: '404 not found',
+  });
+});
+
+if (!module.parent) {
+  app.listen(port);
+  console.log(`Express started on port ${port}`);
+}

package/dist/example/speaker.html

@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html class="no-js" lang="">
+
+<head>
+  <meta charset="utf-8" />
+  <meta http-equiv="x-ua-compatible" content="ie=edge" />
+  <title>Speaker</title>
+  <meta name="description" content="" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <!--CSS-->
+  <link href="../example/styles.css" rel="stylesheet" typ="text/css">
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
+    integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
+  <script src="../main.js"></script>
+  <link rel="icon"
+    href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🔈</text></svg>" />
+  <!--<script src="https://www.unpkg.com/sound-check"></script>-->
+  <!-- <script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.1/dist/chart.min.js"
+    integrity="sha256-ErZ09KkZnzjpqcane4SCyyHsKAXMvID9/xwbl/Aq1pc=" crossorigin="anonymous"></script> -->
+</head>
+
+<body>
+  <div class="container">
+    <h1>Speaker Page</h1>
+    <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia maxime sapiente repudiandae est,
+      magnam ex sint iure quo porro ullam debitis inventore at temporibus quod ducimus nesciunt dolorem laboriosam.
+      Eius!</p>
+    <div class="row">
+      <div class="col-4">
+        <button id="calibrationBeginButton" type="button" class="btn btn-primary">Calibrate Speakers</button>
+      </div>
+      <div class="col-4">
+        <div id="display"></div>
+      </div>
+      <div class="col-4">
+        <div class="d-flex align-items-center d-none" id="spinner">
+          <strong>Calibrating Volume...</strong>
+          <div class="spinner-border ml-auto" role="status" aria-hidden="true"></div>
+        </div>
+        <h4 id="volumeCalibrationResult" class="d-none"></h4>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col" id="d3-select">
+        <div id="generated-signal-chart"></div>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col">
+        <div id="captured-signal-chart""></div>
+      </div>
+    </div>
+    <div class=" row">
+          <div class="col">
+            <div id="ir-chart"></div>
+          </div>
+        </div>
+      </div>
+      <script>
+        document.getElementById("calibrationBeginButton").onclick = async () => {
+          const spinner = document.getElementById("spinner");
+          const volumeCalibrationResult = document.getElementById("volumeCalibrationResult");
+          const speakerParameters = {
+            siteUrl: window.location.href.substring(
+              0,
+              location.href.lastIndexOf("/")
+            ),
+            targetElementId: "display",
+          };
+          const { Speaker, VolumeCalibration } = speakerCalibrator;
+          const dbSPL = await Speaker.startCalibration(speakerParameters, VolumeCalibration);
+          volumeCalibrationResult.innerText = `Sound Gain ${dbSPL.toFixed(3)} dB SPL`;
+          volumeCalibrationResult.classList.remove("d-none");
+        }
+      </script>
+      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
+        integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
+        crossorigin="anonymous"></script>
+</body>
+
+</html>

package/dist/example/styles.css

@@ -0,0 +1,23 @@
+body {
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+  }
+
+  .row {
+    margin-bottom: 1rem;
+  }
+  .row .row {
+    margin-top: 1rem;
+    margin-bottom: 0;
+  }
+  [class*="col"] {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+    /* background-color: rgba(86, 61, 124, .15); */
+    border: 1px solid rgba(86, 61, 124, .2);
+  }
+  
+  hr {
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+  }