From ac000a77684239fe3142f6c9e7f9669b1f9fd0be Mon Sep 17 00:00:00 2001
From: Patrick Forringer <patrick@forringer.com>
Date: Sat, 19 Sep 2015 14:53:54 -0500
Subject: [PATCH] make rate charts taller so curve is easier to see

---
 tabs/receiver.css  |  6 +++---
 tabs/receiver.html |  4 ++--
 tabs/receiver.js   | 27 ++++++++++++++++-----------
 3 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/tabs/receiver.css b/tabs/receiver.css
index 91d2b7b9..08eea235 100644
--- a/tabs/receiver.css
+++ b/tabs/receiver.css
@@ -218,7 +218,7 @@
     margin: 0 10px 10px 0;
 
     width: 220px;
-    height: 58px;
+    height: 120px;
 
     border: 1px solid silver;
 }
@@ -226,7 +226,7 @@
     margin: 0 10px 0 0;
 
     width: 220px;
-    height: 58px;
+    height: 120px;
 
     border: 1px solid silver;
 }
@@ -334,4 +334,4 @@
     fill: none;
     stroke: #000;
     shape-rendering: crispEdges;
-}
\ No newline at end of file
+}
diff --git a/tabs/receiver.html b/tabs/receiver.html
index 196f4c04..405ef32d 100644
--- a/tabs/receiver.html
+++ b/tabs/receiver.html
@@ -53,10 +53,10 @@
     </div>
     <div class="curves">
         <div class="throttle_curve">
-            <canvas width="220" height="58"></canvas>
+            <canvas width="220" height="120"></canvas>
         </div>
         <div class="pitch_roll_curve">
-            <canvas width="220" height="58"></canvas>
+            <canvas width="220" height="120"></canvas>
         </div>
     </div>
     <div class="clear-both"></div>
diff --git a/tabs/receiver.js b/tabs/receiver.js
index 0efb5f18..fbb0cd42 100644
--- a/tabs/receiver.js
+++ b/tabs/receiver.js
@@ -1,6 +1,9 @@
 'use strict';
 
-TABS.receiver = {};
+TABS.receiver = {
+  rateChartHeight: 120
+};
+
 TABS.receiver.initialize = function (callback) {
     var self = this;
 
@@ -38,11 +41,11 @@ TABS.receiver.initialize = function (callback) {
         $('.tunings .rate input[name="rate"]').val(RC_tuning.RC_RATE.toFixed(2));
         $('.tunings .rate input[name="expo"]').val(RC_tuning.RC_EXPO.toFixed(2));
 		    $('.tunings .yaw_rate input[name="yaw_expo"]').val(RC_tuning.RC_YAW_EXPO.toFixed(2));
-        
+
 		    if (semver.lt(CONFIG.apiVersion, "1.10.0")) {
             $('.tunings .yaw_rate input[name="yaw_expo"]').hide();
         }
-		
+
         chrome.storage.local.get('rx_refresh_rate', function (result) {
             if (result.rx_refresh_rate) {
                 $('select[name="rx_refresh_rate"]').val(result.rx_refresh_rate).change();
@@ -176,6 +179,8 @@ TABS.receiver.initialize = function (callback) {
 
         $('select[name="rssi_channel"]').val(MISC.rssi_channel);
 
+        var rateHeight = TABS.receiver.rateChartHeight;
+
         // UI Hooks
         // curves
         $('.tunings .throttle input').on('input change', function () {
@@ -201,14 +206,14 @@ TABS.receiver.initialize = function (callback) {
                 var midx = 220 * mid,
                     midxl = midx * 0.5,
                     midxr = (((220 - midx) * 0.5) + midx),
-                    midy = 58 - (midx * (58 / 220)),
-                    midyl = 58 - ((58 - midy) * 0.5 *(expo + 1)),
+                    midy = rateHeight - (midx * (rateHeight / 220)),
+                    midyl = rateHeight - ((rateHeight - midy) * 0.5 *(expo + 1)),
                     midyr = (midy / 2) * (expo + 1);
 
                 // draw
-                context.clearRect(0, 0, 220, 58);
+                context.clearRect(0, 0, 220, rateHeight);
                 context.beginPath();
-                context.moveTo(0, 58);
+                context.moveTo(0, rateHeight);
                 context.quadraticCurveTo(midxl, midyl, midx, midy);
                 context.moveTo(midx, midy);
                 context.quadraticCurveTo(midxr, midyr, 220, 0);
@@ -237,13 +242,13 @@ TABS.receiver.initialize = function (callback) {
                 }
 
                 // math magic by englishman
-                var ratey = 58 * rate;
+                var ratey = rateHeight * rate;
 
                 // draw
-                context.clearRect(0, 0, 220, 58);
+                context.clearRect(0, 0, 220, rateHeight);
                 context.beginPath();
-                context.moveTo(0, 58);
-                context.quadraticCurveTo(110, 58 - ((ratey / 2) * (1 - expo)), 220, 58 - ratey);
+                context.moveTo(0, rateHeight);
+                context.quadraticCurveTo(110, rateHeight - ((ratey / 2) * (1 - expo)), 220, rateHeight - ratey);
                 context.lineWidth = 2;
                 context.stroke();
             }, 0);