actually make flashlight work and make switch look decent

diff --git a/index.html b/index.html
index 16ee42cb28fb51d07812a2bb824bc861c21dc890..f8cb2933876bdd3eb7415825f2160c320018e63f 100644 (file)
--- a/index.html
+++ b/index.html
@@ -125,8 +125,8 @@ a better device.
 </table>
 <div id="envFlashAvail" style="display:none">
 Flashlight:
-<button id="envFlashOn" class="envButton">On</button>
-<button id="envFlashOff" class="envButton">Off</button>
+<button id="envFlashOn" class="envButton">On</button><button
+        id="envFlashOff" class="envButton" disabled="true">Off</button>
 </div>
 <div id="envFlashUnavail">
 <!-- No camera with flash available -->

diff --git a/js/tricorder.js b/js/tricorder.js
index 3887a533936ad8b028c5d329f47490dd5b4fb66c..f8bc28f18a108b8f680a7aba921a02fbb11ac04d 100644 (file)
--- a/js/tricorder.js
+++ b/js/tricorder.js
@@ -323,18 +323,16 @@ var gModEnv = {
       }
     }, 5000);
     try {
-      for (var cameraId of window.navigator.mozCameras.getListOfCameras()) {
-        window.navigator.mozCameras.getCamera({camera: cameraId}, function(aCamera) {
+      var cameras = navigator.mozCameras.getListOfCameras();
+      for (i = 0; i < cameras.length; i++) {
+        var promise = navigator.mozCameras.getCamera(cameras[i], {},
+          function(aCamera) {
             if (aCamera.capabilities.flashModes.indexOf('torch') !== -1) {
-              this.flashCamera = aCamera;
+              gModEnv.foundFlashCamera(aCamera);
             }
-        });
-      }
-      if (this.flashCamera) {
-        document.getElementById("envFlashOn").onclick = gModEnv.switchFlashlight(true);
-        document.getElementById("envFlashOff").onclick = gModEnv.switchFlashlight(false);
-        document.getElementById("envFlashUnavail").style.display = "none";
-        document.getElementById("envFlashAvail").style.display = "block";
+          },
+          function(aError) { console.log("camera error: " + aError); }
+        );
       }
     } catch (e) {
       // camera api not supported
@@ -342,6 +340,13 @@ var gModEnv = {
       document.getElementById("envFlashAvail").style.display = "none";
     }
   },
+  foundFlashCamera(aCamera) {
+    this.flashCamera = aCamera;
+    document.getElementById("envFlashOn").onclick = function() { console.log("on"); gModEnv.switchFlashlight(true); };
+    document.getElementById("envFlashOff").onclick = function() { console.log("off"); gModEnv.switchFlashlight(false); };
+    document.getElementById("envFlashUnavail").style.display = "none";
+    document.getElementById("envFlashAvail").style.display = "block";
+  },
   deactivate: function() {
     gSounds.scan.pause();
     window.removeEventListener("devicelight", this.lightEvent, true);
@@ -371,6 +376,8 @@ var gModEnv = {
   switchFlashlight: function(aEnabled) {
     if (this.flashCamera) {
       this.flashCamera.flashMode = aEnabled ? 'torch' : 'off';
+      document.getElementById("envFlashOn").disabled == aEnabled;
+      document.getElementById("envFlashOff").disabled == !aEnabled;
     }
   }
 }

diff --git a/style/tricorder.css b/style/tricorder.css
index 99696f6f34a9b88d88942ac322832086c5cc9bfd..cc79adee420a936bb60e25ae4fc79f2fa45762ac 100644 (file)
--- a/style/tricorder.css
+++ b/style/tricorder.css
@@ -242,6 +242,19 @@ section > p:first-child {
   padding-top: 1em;
 }
 
+button {
+  font: inherit;
+  border: none;
+  color: #000000;
+  background-color: #C09070;
+  border-radius: 3000px;
+  margin: 0 .25em;
+}
+
+button.disabled {
+  background-color: #402858;
+}
+
 .posVal, .gravVal {
   text-align: right;
 }
@@ -262,6 +275,22 @@ section > p:first-child {
   height: 100%;
 }
 
+#envFlashAvail {
+  padding: 1em 3px 0;
+}
+
+#envFlashOn {
+  margin-right: 0;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+#envFlashOff {
+  margin-left: 0;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
 @media screen and (min-width: 500px) {
   body {
     font-size: 24px;