resize canvas when app/window is being resized; add permission for audio capture...

diff --git a/js/tricorder.js b/js/tricorder.js
index 50b0625c6fefe96db91c9df7ff9effbea79d5cb4..de33ae3a630e2c2eed70a95e946c314aea24b8fd 100644 (file)
--- a/js/tricorder.js
+++ b/js/tricorder.js
@@ -33,6 +33,12 @@ window.onload = function() {
   }, false);
 }
 
+window.onresize = function() {
+  if (document.getElementById("sectSound").classList.contains("active")) {
+    gModSound.resize();
+  }
+}
+
 function updateStardate() {
   if (!gStardate)
     gStardate = document.getElementById("stardate");
@@ -221,7 +227,7 @@ var gModGrav = {
 var gModSound = {
   activate: function() {
     //gSounds.scan.play();
-    if (navigator.getUserMedia) {
+    if (navigator.getUserMedia && (window.AudioContext || window.webkitAudioContext)) {
       document.getElementById("soundunavail").style.display = "none";
       document.getElementById("soundavail").style.display = "block";
       navigator.getUserMedia({ audio: true },
@@ -232,20 +238,7 @@ var gModSound = {
            // Could put a filter in between like in http://webaudioapi.com/samples/microphone/
            gModSound.mDisplay.canvas = document.getElementById("soundcanvas");
            gModSound.mDisplay.context = gModSound.mDisplay.canvas.getContext("2d");
-           gModSound.mDisplay.canvas.height = document.getElementById("soundavail").clientHeight - 2;
-           gModSound.mDisplay.canvas.width = document.getElementById("soundavail").clientWidth;
-           gModSound.mAudio.frequencySlices = (gModSound.mDisplay.canvas.width > 512) ?
-                                              512 :
-                                              Math.pow(2, Math.floor(Math.log(gModSound.mDisplay.canvas.width) / Math.LN2));
-           console.log("slices: " + gModSound.mAudio.frequencySlices);
-           gModSound.mAudio.analyzer = gModSound.mAudio.context.createAnalyser();
-           // Make the FFT four times as large as needed as the upper three quarters turn out to be useless.
-           gModSound.mAudio.analyzer.fftSize = gModSound.mAudio.frequencySlices * 4;
-           console.log("FFT: " + gModSound.mAudio.analyzer.fftSize);
-           gModSound.mAudio.input.connect(gModSound.mAudio.analyzer);
-           gModSound.mDisplay.context.setTransform(1, 0, 0, -(gModSound.mDisplay.canvas.height/256), 0, gModSound.mDisplay.canvas.height);
-           gModSound.mDisplay.active = true;
-           window.requestAnimationFrame(gModSound.paintAnalyzerFrame);
+           gModSound.rebuildCanvas();
          },
          function(err) {
            document.getElementById("soundunavail").style.display = "block";
@@ -259,6 +252,26 @@ var gModSound = {
       document.getElementById("soundavail").style.display = "none";
     }
   },
+  rebuildCanvas: function() {
+    if (gModSound.mDisplay.AFRequestID) {
+      window.cancelAnimationFrame(gModSound.mDisplay.AFRequestID);
+      gModSound.mDisplay.AFRequestID = 0;
+    }
+    gModSound.mDisplay.canvas.height = document.getElementById("soundavail").clientHeight - 4;
+    gModSound.mDisplay.canvas.width = document.getElementById("soundavail").clientWidth;
+    gModSound.mAudio.frequencySlices = (gModSound.mDisplay.canvas.width > 512) ?
+                                      512 :
+                                      Math.pow(2, Math.floor(Math.log(gModSound.mDisplay.canvas.width) / Math.LN2));
+    //console.log("slices: " + gModSound.mAudio.frequencySlices);
+    gModSound.mAudio.analyzer = gModSound.mAudio.context.createAnalyser();
+    // Make the FFT four times as large as needed as the upper three quarters turn out to be useless.
+    gModSound.mAudio.analyzer.fftSize = gModSound.mAudio.frequencySlices * 4;
+    //console.log("FFT: " + gModSound.mAudio.analyzer.fftSize);
+    gModSound.mAudio.input.connect(gModSound.mAudio.analyzer);
+    gModSound.mDisplay.context.setTransform(1, 0, 0, -(gModSound.mDisplay.canvas.height/256), 0, gModSound.mDisplay.canvas.height);
+    gModSound.mDisplay.active = true;
+    gModSound.mDisplay.AFRequestID = window.requestAnimationFrame(gModSound.paintAnalyzerFrame);
+  },
   mAudio: {
     frequencySlices: 32, // Must be a multiple of 2 (see AnalyserNode.fftSize)
   },
@@ -278,7 +291,10 @@ var gModSound = {
       gModSound.mDisplay.context.fillRect(i*wid, 0, wid, data[i]);
     }
     if (gModSound.mDisplay.active)
-      window.requestAnimationFrame(gModSound.paintAnalyzerFrame);
+      gModSound.mDisplay.AFRequestID = window.requestAnimationFrame(gModSound.paintAnalyzerFrame);
+  },
+  resize: function() {
+    gModSound.rebuildCanvas();
   },
   deactivate: function() {
     if (gModSound.mDisplay.active) {

diff --git a/manifest.webapp b/manifest.webapp
index a0100f77207f76de02cc5bd5589c71781c18ff09..ad2c18093e11261409846f4f1e8a638b062aa2d7 100644 (file)
--- a/manifest.webapp
+++ b/manifest.webapp
@@ -7,6 +7,9 @@
     "geolocation": {
       "description": "Determine the global position to display in the tricorder."
     }
+    "audio-capture": {
+      "description": "Capture microphone audio for the sound module."
+    }
   },
   "developer": {
     "name": "Robert Kaiser",

diff --git a/style/tricorder.css b/style/tricorder.css
index b6d1b76542f0819b5f497578bd7cecc43b181a2d..99696f6f34a9b88d88942ac322832086c5cc9bfd 100644 (file)
--- a/style/tricorder.css
+++ b/style/tricorder.css
@@ -237,6 +237,11 @@ section.active {
   display: block;
 }
 
+section > p:first-child {
+  margin-top: 0;
+  padding-top: 1em;
+}
+
 .posVal, .gravVal {
   text-align: right;
 }