receiver tab with interactive curves

special thanks to englishman for the math magic involved

css/style.css

@@ -599,18 +599,6 @@ a:hover {
         border: 1px solid silver;
         text-align: right;
     } 
-    .tab-receiver .info {
-        display: block;
-        float: right;
-        
-        width: 220px;
-        
-        margin-bottom: 20px;
-        
-        padding: 5px;
-        
-        border: 1px dotted silver;
-    }
     .tab-receiver .update {
         display: block;
         float: right;
@@ -644,6 +632,28 @@ a:hover {
         width: 880px; 
         height: 250px;
     }
+    .tab-receiver .throttle_curve {
+        float: right;
+        
+        margin-bottom: 20px;
+        margin-right: 10px;
+        
+        width: 220px;
+        height: 58px;
+        
+        border: 1px solid silver;
+    }
+    .tab-receiver .pitch_roll_curve {
+        float: right;
+        
+        margin-right: 10px;
+        
+        width: 220px;
+        height: 58px;
+        
+        border: 1px solid silver;
+    }
+    
 .tab-auxiliary_configuration {
 
 }

js/main.js

@@ -80,5 +80,4 @@ $(document).ready(function() {
     });
     
     // temporary
-    //$('#content').load("./tabs/sensors.html", tab_initialize_sensors);
 });

tabs/receiver.html

@@ -48,8 +48,8 @@
                 <th>Throttle EXPO</th>
             </tr>
             <tr>
-                <td><input type="number" step="0.01" name="mid" value="" /></td>
-                <td><input type="number" step="0.01" name="expo" value="" /></td>
+                <td><input type="number" step="0.01" name="mid" value="" min="0" max="1" /></td>
+                <td><input type="number" step="0.01" name="expo" value="" min="0" max="1" /></td>
             </tr>
         </table>
         <table class="rate">
@@ -58,18 +58,18 @@
                 <th>Pitch &amp; Roll Expo</th>
             </tr>
             <tr>
-                <td><input type="number" step="0.01" name="rate" value="" /></td>
-                <td><input type="number" step="0.01" name="expo" value="" /></td>
+                <td><input type="number" step="0.01" name="rate" value="" min="0" max="1" /></td>
+                <td><input type="number" step="0.01" name="expo" value="" min="0" max="1" /></td>
             </tr>
         </table>
         <a class="update" href="#">Save</a>
     </div>
-    <p class="info">
-        some info text goes here
-    </p>
-    <p class="info">
-        some info text goes here
-    </p>
+    <div class="throttle_curve">
+        <canvas id="throttle_curve_c" width="220" height="58"></canvas>
+    </div>
+    <div class="pitch_roll_curve">
+        <canvas id="pitch_roll_curve_c" width="220" height="58"></canvas>
+    </div>
     <div class="clear-both"></div>
     <div id="RX_plot">
     </div>

tabs/receiver.js

@@ -56,6 +56,53 @@ function tab_initialize_receiver() {
         $('a.update').addClass('active');
     });
     
+    // curves    
+    $('.tunings .throttle input').change(function() {
+        var mid = parseFloat($('.tunings .throttle input[name="mid"]').val());
+        var expo = parseFloat($('.tunings .throttle input[name="expo"]').val());
+        
+        var throttle_curve = document.getElementById("throttle_curve_c");
+        var context = throttle_curve.getContext("2d");
+        context.clearRect(0, 0, 220, 58);
+        
+        // math magic by englishman
+        var midx = 220 * mid;
+        var midxl = midx * .5;
+        var midxr = (((220 - midx) * .5) + midx);
+        var midy = 58 - (midx * (58 / 220));
+        var midyl = 58 - ((58 - midy) * .5 *(expo + 1));
+        var midyr = (midy / 2) * (expo + 1);        
+        
+        context.beginPath();
+        context.moveTo(0, 58);
+        context.quadraticCurveTo(midxl, midyl, midx, midy);
+        context.moveTo(midx, midy);
+        context.quadraticCurveTo(midxr, midyr, 220, 0);     
+        
+        context.lineWidth = 2;
+        context.stroke();
+    });
+    $('.tunings .throttle input').trigger('change'); // initial software trigger
+    
+    $('.tunings .rate input').change(function() {
+        var rate = parseFloat($('.tunings .rate input[name="rate"]').val());
+        var expo = parseFloat($('.tunings .rate input[name="expo"]').val());  
+        
+        var pitch_roll_curve = document.getElementById("pitch_roll_curve_c");
+        var context = pitch_roll_curve.getContext("2d");
+        context.clearRect(0, 0, 220, 58);
+        
+        // math magic by englishman
+        var ratey = 58 * rate;
+        
+        context.beginPath();
+        context.moveTo(0, 58);
+        context.quadraticCurveTo(110, 58 - ((ratey / 2) * (1 - expo)), 220, 58 - ratey);
+        context.lineWidth = 2;
+        context.stroke();
+    });
+    $('.tunings .rate input').trigger('change'); // initial software trigger
+    
     $('a.update').click(function() {
         if ($(this).hasClass('active')) {
             // catch RC_tuning changes