pid tuning improvements

css/style.css

@@ -239,4 +239,30 @@ table.pid_tuning {
     table.pid_tuning a.update:hover {
         text-decoration: none;
         background-color: #13b723;
+    }
+    .tab-pid_tuning .update {
+        display: block;
+        float: right;
+        
+        width: 120px;
+        height: 60px;
+        line-height: 60px;
+        
+        font-size: 14px;
+        color: white;
+        text-align: center;
+        
+        border: 1px solid silver;
+        
+        background-color: #6f1515;
+    }
+    .tab-pid_tuning .update:hover {
+        cursor: default;
+    }
+    .tab-pid_tuning .update.active {
+        background-color: #0fab16;
+    }
+    .tab-pid_tuning .update.active:hover {
+        cursor: pointer;
+        background-color: #13d81d;
     }

tabs/initial_setup.html

@@ -2,14 +2,14 @@
     <div class="section">
         <a class="calibrateAccel" href="#">Calibrate Accelerometer</a>
         <p>
-            Place frame on a level surface, proceed with calibration, ensure it is not moving during this period.
+            Place frame on a <strong style="color: green;">level</strong> surface, proceed with calibration, ensure it is <strong style="color: red;">not</strong> moving during this period.
         </p>
     </div>
     <div class="section">
         <a class="calibrateMag" href="#">Calibrate Magnetometer</a>
         <p>
-            Click the button, move multirotor atleast 360 degrees on all axis of rotation. <br />
-            You have 30 seconds to perform this task.
+            Click the button, move multirotor atleast <strong>360</strong> degrees on all axis of rotation. <br />
+            You have <strong style="color: red;">30 seconds</strong> to perform this task.
         </p>
     </div>
 </div>

tabs/pid_tuning.html

@@ -59,4 +59,5 @@
             <td><input type="text" name="p" value="" /></td>
         </tr>        
     </table>
+    <a class="update" href="#">Update</a>
 </div>

tabs/pid_tuning.js

@@ -1,4 +1,5 @@
 function tab_initialize_pid_tuning() {
+    // Fill in the data from PIDs array
     var needle = 0;
 
     var i = 0;
@@ -53,6 +54,50 @@ function tab_initialize_pid_tuning() {
     $('.pid_tuning .MAG input').each(function() {
         $(this).val(PIDs[needle][i++].toFixed(2));       
     });
-    needle++;    
+    needle++;  
+
+    // UI Hooks
+    
+    $('.pid_tuning input').change(function() {
+        // if any of the fields changed, unlock update button
+        $('a.update').addClass('active');
+    });
+    
+    $('a.update').click(function() {
+        if ($(this).hasClass('active')) {
+            // Catch all the changes and stuff the inside PIDs array
+            var needle_main = 0;
+            var needle_secondary = 0;
+            
+            $('.pid_tuning input').each(function() {
+                PIDs[needle_main][needle_secondary] = parseFloat($(this).val());
+                needle_secondary++;
+                
+                // exceptions (required for the "shorter" PID arrays, 2 fields, 1 field, etc)
+                if (needle_main == 4) {
+                    if (needle_secondary >= 2) {
+                        needle_main++;
+                        needle_secondary = 0;
+                    }
+                } else if (needle_main == 8) {
+                    if (needle_secondary >= 1) {
+                        needle_main++;
+                        needle_secondary = 0;
+                    }
+                } else {
+                    if (needle_secondary >= 3) {
+                        needle_main++;
+                        needle_secondary = 0;
+                    }
+                }
+            });
+            
+            // Send over the changes
+            
+            
+            // remove the active status
+            $(this).removeClass('active');
+        }
+    });
     
 }