threshold slider's max value now depends on the resolution

diff --git a/static/js/main.js b/static/js/main.js
index 628c4c2f059f51a843c85f53019e43f21e97790c..ff5248f6ea9e457a86b973703887846ce81b61a5 100644 (file)
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -2,6 +2,7 @@
 var pushConfigs = {};
 var refreshDisabled = 0;
 var fullScreenCameraId = null;
+var thresholdSlider = null;
 
 
     /* utils */
@@ -174,7 +175,8 @@ function initUI() {
     makeSlider($('#streamingQualitySlider'), 0, 100, 0, null, 5, 0, '%');
     makeSlider($('#imageQualitySlider'), 0, 100, 0, null, 5, 0, '%');
     makeSlider($('#movieQualitySlider'), 0, 100, 0, null, 5, 0, '%');
-    makeSlider($('#frameChangeThresholdSlider'), 0, 20000, 0, null, 3, 0, 'px');
+    thresholdSlider = makeSlider($('#frameChangeThresholdSlider'), 0, 20000, 0, null, 3, 0, 'px');
+    
     makeSlider($('#noiseLevelSlider'), 0, 100, 0, null, 5, 0, '%');
     
     /* text validators */
@@ -220,6 +222,7 @@ function initUI() {
     $('#showAdvancedSwitch').change(updateConfigUi);
     $('#storageDeviceSelect').change(updateConfigUi);
     $('#autoBrightnessSwitch').change(updateConfigUi);
+    $('#resolutionSelect').change(updateConfigUi);
     $('#leftTextSelect').change(updateConfigUi);
     $('#rightTextSelect').change(updateConfigUi);
     $('#captureModeSelect').change(updateConfigUi);
@@ -440,6 +443,18 @@ function updateConfigUi() {
             this.selectedIndex = 0;
         }
     });
+    
+    /* update change threshold max limit */
+    var resolution = $('#resolutionSelect').val();
+    if (resolution) {
+        resolution = resolution.split('x');
+        
+        var width = parseInt(resolution[0]);
+        var height = parseInt(resolution[1]);
+        var valStr = '' + (width * height * 0.5); /* up to 50% */
+        var maxVal = parseInt(valStr[0] + new Array(valStr.length).join('0'));
+        thresholdSlider.setMaxVal(maxVal);
+    }
 }
 
 function configUiValid() {

diff --git a/static/js/ui.js b/static/js/ui.js
index 68b64097695432c26eeb65177f736257e49c84c2..686e0e254671a4c36f426f66565721870c6baa61 100644 (file)
--- a/static/js/ui.js
+++ b/static/js/ui.js
@@ -120,7 +120,7 @@ function makeSlider($input, minVal, maxVal, snapMode, ticks, ticksNumber, decima
         return minVal + pos * (maxVal - minVal) / 100;
     }
     
-    function sliderChange(val, percent) {
+    function sliderChange(val) {
         $input.val(val.toFixed(decimals));
         slider.attr('title', '' + val.toFixed(decimals) + unit);
     }
@@ -134,7 +134,7 @@ function makeSlider($input, minVal, maxVal, snapMode, ticks, ticksNumber, decima
             var val = posToVal(pos);
             
             cursor.css('left', pos + '%');
-            sliderChange(val, pos / 100);
+            sliderChange(val);
         }
     }
     
@@ -164,12 +164,16 @@ function makeSlider($input, minVal, maxVal, snapMode, ticks, ticksNumber, decima
     });
     
     /* ticks */
-    var i;
-    if (ticks == null) {
+    var autoTicks = (ticks == null);
+    
+    function makeTicks() {
         if (ticksNumber == null) {
             ticksNumber = 11; 
         }
-        ticks = [];
+
+        labels.html('');
+        
+        var i, ticks = [];
         for (i = 0; i < ticksNumber; i++) {
             var val = minVal + i * (maxVal - minVal) / (ticksNumber - 1);
             var valStr;
@@ -181,17 +185,23 @@ function makeSlider($input, minVal, maxVal, snapMode, ticks, ticksNumber, decima
             }
             ticks.push({value: val, label: valStr + unit});
         }
-    }
-    
-    for (i = 0; i < ticks.length; i++) {
-        var tick = ticks[i];
-        var pos = valToPos(tick.value);
-        var span = $('<span class="slider-label" style="left: -9999px;">' + tick.label + '</span>');
         
-        labels.append(span);
-        span.css('left', (pos - 10) + '%');
+        for (i = 0; i < ticks.length; i++) {
+            var tick = ticks[i];
+            var pos = valToPos(tick.value);
+            var span = $('<span class="slider-label" style="left: -9999px;">' + tick.label + '</span>');
+            
+            labels.append(span);
+            span.css('left', (pos - 10) + '%');
+        }
+        
+        return ticks;
     }
     
+    if (autoTicks) {
+        ticks = makeTicks();
+    }
+
     function input2slider() {
         var value = parseFloat($input.val());
         if (isNaN(value)) {
@@ -261,6 +271,24 @@ function makeSlider($input, minVal, maxVal, snapMode, ticks, ticksNumber, decima
     
     $input[0].update = input2slider;
     
+    slider.setMinVal = function (mv) {
+        minVal = mv;
+
+        if (autoTicks) {
+            ticks = makeTicks();
+        }
+    };
+    
+    slider.setMaxVal = function (mv) {
+        maxVal = mv;
+
+        if (autoTicks) {
+            ticks = makeTicks();
+        }
+        
+        input2slider();
+    };
+    
     return slider;
 }
 

diff --git a/templates/main.html b/templates/main.html
index 45b4f68a8556a013fc9f70dbc1ac9efbc90e46c2..58c1f9dfcc5b0d9e335bdd3cf3d35e8f4e721066 100644 (file)
--- a/templates/main.html
+++ b/templates/main.html
@@ -134,7 +134,7 @@
                     <tr class="settings-item advanced-setting">
                         <td class="settings-item-label"><span class="settings-item-label">Video Rotation</span></td>
                         <td class="settings-item-value">
-                            <select class="video-resolution styled device" id="rotationSelect">
+                            <select class="rotation styled device" id="rotationSelect">
                                 <option value="0">0&deg;</option>
                                 <option value="90">90&deg;</option>
                                 <option value="180">180&deg;</option>