FTUE: Make latency gauge functional

app/assets/javascripts/fakeJamClient.js

@@ -115,8 +115,8 @@
         }
         function FTUEStartLatency() {
             function cb() {
-                // Change 10 to modify latency MS results
-                eval(latencyCallback + "(10)");
+                // Change 4192 to modify latency MS results (in microseconds)
+                eval(latencyCallback + "(4192)");
             }
             context.setTimeout(cb, 1000);
         }

app/assets/javascripts/ftue.js

@@ -90,11 +90,6 @@
         function updateGauge() {
             var latencyMS = context.JK.FtueWizard.latencyMS;
             logger.debug("Latency Value: " + latencyMS);
-            // TODO - update the gauge visually, and the message according to
-            // returned value.
-            // IF gauge is in green (<= 10ms), hide the help/run test again buttons
-            // IF gauge is in yellow (> 10ms, <= 20ms), keep help/run test again.
-            // IF gauge is in red (>20ms, switch to fail text)
             if (latencyMS > 20) {
                 $('#ftue-latency-congrats').hide();
                 $('#ftue-latency-fail').show();
@@ -106,10 +101,66 @@
                     $('[layout-wizard-step="6"] .btnHelp').hide();
                     $('[layout-wizard-step="6"] .btnRepeat').hide();
                 }
-                // TODO - update the gauge
+                setNeedleValue(latencyMS);
             }
         }
 
+        // Function to calculate an absolute value and an absolute value range into
+        // a number of degrees on a circualar "speedometer" gauge. The 0 degrees value
+        // points straight up to the middle of the real-world value range.
+        // Arguments:
+        //   value: The real-world value (e.g. 20 milliseconds)
+        //   minValue: The real-world minimum value (e.g. 0 milliseconds)
+        //   maxValue: The real-world maximum value (e.g. 40 milliseconds)
+        //   degreesUsed: The number of degrees used to represent the full real-world
+        //                range. 360 would be the entire circle. 270 would be 3/4ths
+        //                of the circle. The unused gap will be at the bottom of the
+        //                gauge.
+        //               (e.g. 300)
+        function degreesFromRange(value, minValue, maxValue, degreesUsed) {
+            if (value > maxValue) { value = maxValue; }
+            if (value < minValue) { value = minValue; }
+            var range = maxValue-minValue;
+            var floatVal = value/range;
+            var degrees = Math.round(floatVal * degreesUsed);
+            degrees -= Math.round(degreesUsed/2);
+            if (degrees < 0) {
+                degrees += 360;
+            }
+            return degrees;
+        }
+
+        // Given a number of MS, and assuming the gauge has a range from
+        // 0 to 40 ms. Update the gauge to the proper value.
+        function setNeedleValue(ms) {
+            var deg = degreesFromRange(ms, 0, 40, 300);
+
+            // Supporting Firefix, Chrome, Safari, Opera and IE9+.
+            // Should we need to support < IE9, this will need more work
+            // to compute the matrix transformations in those browsers -
+            // and I don't believe they support transparent PNG graphic
+            // rotation, so we'll have to change the needle itself.
+            var css = {
+                //"behavior":"url(-ms-transform.htc)",
+                /* Firefox */
+                "-moz-transform":"rotate(" + deg + "deg)",
+                /* Safari and Chrome */
+                "-webkit-transform":"rotate(" + deg + "deg)",
+                /* Opera */
+                "-o-transform":"rotate(" + deg + "deg)",
+                /* IE9 */
+                "-ms-transform":"rotate(" + deg + "deg)"
+                /* IE6,IE7 */
+                //"filter": "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)",
+                /* IE8 */
+                //"-ms-filter": '"progid:DXImageTransform.Microsoft.Matrix(SizingMethod=\'auto expand\', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"'
+            };
+
+            $('#ftue-latency-numerical').html(ms);
+            $('#ftue-latency-needle').css(css);
+
+        }
+
         function testLatency() {
             // we'll just register for call back right here and unregister in the callback.
             context.JK.FtueWizard.latencyTimeout = true;
@@ -285,9 +336,14 @@
         // Expose publics
         this.initialize = initialize;
 
+        // Expose degreesFromRange outside for testing
+        this._degreesFromRange = degreesFromRange;
+
         return this;
     };
 
+
+
     // Common VU updater taking a dbValue (-80 to 20) and a CSS selector for the VU.
     context.JK.ftueVUCallback = function(dbValue, selector) {
         // Convert DB into a value from 0.0 - 1.0

app/assets/stylesheets/client/ftue.css.scss

@@ -4,6 +4,38 @@
 @charset "UTF-8";
 
 /* Jonathon's FTUE overrides */
+#ftue-latency-needle {
+    position:absolute;
+    width: 6px;
+    height: 220px;
+    top:50%;
+    left:50%;
+    overflow:visible;
+    margin: -106px -3px 0px 0px;
+    padding: 0px 0px 0px 0px;
+}
+#ftue-latency-numerical {
+    position:absolute;
+    width: 150px;
+    height: 32px;
+    top: 228px;
+    left: 50%;
+    margin: -73px;
+    text-align:center;
+    font-size: 1.8em;
+    font-weight: bold;
+}
+#ftue-latency-label {
+    position:absolute;
+    width: 150px;
+    height: 32px;
+    top: 250px;
+    left: 50%;
+    margin: -73px;
+    text-align:center;
+    font-size: 0.9em;
+}
+
 div.dialog.ftue {
     min-width: 800px;
     max-width: 800px;

app/views/clients/_ftue.html.erb

@@ -213,15 +213,21 @@
 
         <!-- Test Succeeded Step -->
         <div layout-wizard-step="6" dialog-title="latency test results" style="display:none;">
-            <div class="left mr30">
-                <%= image_tag "content/latency_gauge.png", 
+            <div class="left mr30" style="position:relative";>
+                <%= image_tag "content/latency_gauge_back.png", 
                     {:width => 247, :height => 242, :class => "left"} %>
+                    <div id="ftue-latency-needle">
+                        <%= image_tag "content/latency_gauge_needle.png", 
+                            {:width => 6, :height => 220 } %>
+                    </div>
+                    <div id="ftue-latency-numerical">10</div>
+                    <div id="ftue-latency-label">milliseconds</div>
             </div>
             <p>
                 <br/><br/><br/><br/>
                 <div id="ftue-latency-congrats">
                 Congratulations! Your local end-to-end audio gear latency is <span id="ftue-latency-ms"></span>
-                millisections, which is good. You may now create and join sessions
+                milliseconds, which is good. You may now create and join sessions
                 to play with other musicians using JamKazam. 
                 </div>
                 <div id="ftue-latency-fail" style="display:none;">

spec/javascripts/ftue.spec.js

@@ -0,0 +1,99 @@
+// Unit tests for things related to FTUE
+
+(function(g,$) {
+
+    describe("ftue tests", function() {
+
+        var ftue = null;
+
+        var appFake = {
+            clientId: '12345',
+            bindScreen: function(){},
+            notify: function(){},
+            ajaxError: function() { console.debug("ajaxError"); }
+        };
+
+        beforeEach(function() {
+            g.jamClient = new JK.FakeJamClient();
+            ftue = JK.FtueWizard(appFake);
+        });
+
+        describe("degreesFromRange", function() {
+
+            describe("20, 0, 40, 360", function() {
+                it("should return 0", function() {
+                    var deg = ftue._degreesFromRange(20,0,40,360);
+                    expect(deg).toEqual(0);
+                });
+            });
+
+            describe("0, 0, 40, 360", function() {
+                it("should return 180", function() {
+                    var deg = ftue._degreesFromRange(0,0,40,360);
+                    expect(deg).toEqual(180);
+                });
+            });
+
+
+            describe("10, 0, 40, 360", function() {
+                it("should return 270", function() {
+                    var deg = ftue._degreesFromRange(10,0,40,360);
+                    expect(deg).toEqual(270);
+                });
+            });
+
+            describe("30, 0, 40, 360", function() {
+                it("should return 90", function() {
+                    var deg = ftue._degreesFromRange(30,0,40,360);
+                    expect(deg).toEqual(90);
+                });
+            });
+
+            // Test value outside of range
+            describe("100, 0, 40, 360", function() {
+                it("should return 180", function() {
+                    var deg = ftue._degreesFromRange(100,0,40,360);
+                    expect(deg).toEqual(180);
+                });
+            });
+            describe("-120, 0, 40, 360", function() {
+                it("should return 180", function() {
+                    var deg = ftue._degreesFromRange(-120,0,40,360);
+                    expect(deg).toEqual(180);
+                });
+            });
+
+            // Limit degrees to 300
+            describe("20, 0, 40, 300", function() {
+                it("should return 0", function() {
+                    var deg = ftue._degreesFromRange(20,0,40,300);
+                    expect(deg).toEqual(0);
+                });
+            });
+
+            describe("0, 0, 40, 300", function() {
+                it("should return 210", function() {
+                    var deg = ftue._degreesFromRange(0,0,40,300);
+                    expect(deg).toEqual(210);
+                });
+            });
+
+            describe("10, 0, 40, 300", function() {
+                it("should return 285", function() {
+                    var deg = ftue._degreesFromRange(10,0,40,300);
+                    expect(deg).toEqual(285);
+                });
+            });
+
+            describe("30, 0, 40, 300", function() {
+                it("should return 75", function() {
+                    var deg = ftue._degreesFromRange(30,0,40,300);
+                    expect(deg).toEqual(75);
+                });
+            });
+
+        });
+
+    });
+
+})(window, jQuery);

spec/javascripts/karma.conf.js

@@ -15,7 +15,7 @@ files = [
   'spec/javascripts/helpers/test_responses.js',
   'spec/javascripts/helpers/testutil.js',
   'app/assets/javascripts/**/*.js',
-  //'spec/javascripts/faderHelpers.spec.js',   // single test file
+  //'spec/javascripts/ftue.spec.js',   // single test file
   'spec/javascripts/*.spec.js',
   {
       pattern:'app/views/clients/*.html.erb',