some initial PID tuning UI hooks

css/style.css

@@ -203,3 +203,40 @@ a:hover {
     
     border: 1px dotted silver;
 }
+table.pid_tuning {
+    width: 100%;
+    border-collapse:collapse;    
+}
+    table.pid_tuning, table.pid_tuning th, table.pid_tuning td {
+        padding: 5px;
+        border: 1px solid #8b8b8b;
+    }
+    table.pid_tuning tr:nth-child(odd) {
+        background-color: #ececec;
+    }    
+    table.pid_tuning input {
+        width: 130px;
+        height: 18px;
+        line-height: 18px;
+        
+        padding: 0 5px 0 5px;
+        border: 1px solid silver;
+        text-align: right;
+    }
+    table.pid_tuning a.update {
+        display: block;
+        
+        width: 60px;
+        height: 18px;
+        line-height: 18px;
+        
+        color: white;
+        text-align: center;
+        
+        border: 1px solid silver;
+        background-color: #078814;
+    }
+    table.pid_tuning a.update:hover {
+        text-decoration: none;
+        background-color: #13b723;
+    }

tabs/initial_setup.html

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

tabs/pid_tuning.html

@@ -1,2 +1,62 @@
 <div class="tab-pid_tuning">
+    <table class="pid_tuning">
+        <tr>
+            <th class="name" style="width: 50%">Name</th>
+            <th class="proportional" style="width: 16%">Proportional</th>
+            <th class="integral" style="width: 16%">Integral</th>
+            <th class="derivative" style="width: 16%">Derivative</th>
+        </tr>
+        <tr class="ROLL">
+            <td>ROLL</td>
+            <td><input type="text" name="p" value="" /></td>
+            <td><input type="text" name="i" value="" /></td>
+            <td><input type="text" name="d" value="" /></td>
+        </tr>
+        
+        <tr class="PITCH">
+            <td>PITCH</td>
+            <td><input type="text" name="p" value="" /></td>
+            <td><input type="text" name="i" value="" /></td>
+            <td><input type="text" name="d" value="" /></td>
+        </tr>
+        <tr class="YAW">
+            <td>YAW</td>
+            <td><input type="text" name="p" value="" /></td>
+            <td><input type="text" name="i" value="" /></td>
+            <td><input type="text" name="d" value="" /></td>
+        </tr>
+        <tr class="ALT">
+            <td>ALT</td>
+            <td><input type="text" name="p" value="" /></td>
+            <td><input type="text" name="i" value="" /></td>
+            <td><input type="text" name="d" value="" /></td>
+        </tr>
+        <tr class="Pos">
+            <td>Pos</td>
+            <td><input type="text" name="p" value="" /></td>
+            <td><input type="text" name="i" value="" /></td>
+        </tr>
+        <tr class="PosR">
+            <td>PosR</td>
+            <td><input type="text" name="p" value="" /></td>
+            <td><input type="text" name="i" value="" /></td>
+            <td><input type="text" name="d" value="" /></td>
+        </tr>
+        <tr class="NavR">
+            <td>NavR</td>
+            <td><input type="text" name="p" value="" /></td>
+            <td><input type="text" name="i" value="" /></td>
+            <td><input type="text" name="d" value="" /></td>
+        </tr>
+        <tr class="LEVEL">
+            <td>LEVEL</td>
+            <td><input type="text" name="p" value="" /></td>
+            <td><input type="text" name="i" value="" /></td>
+            <td><input type="text" name="d" value="" /></td>
+        </tr>
+        <tr class="MAG">
+            <td>MAG</td>
+            <td><input type="text" name="p" value="" /></td>
+        </tr>        
+    </table>
 </div>

tabs/pid_tuning.js

@@ -1,2 +1,58 @@
 function tab_initialize_pid_tuning() {
+    var needle = 0;
+
+    var i = 0;
+    $('.pid_tuning .ROLL input').each(function() {
+        $(this).val(PIDs[needle][i++].toFixed(3));       
+    });
+    needle++;
+    
+    i = 0;
+    $('.pid_tuning .PITCH input').each(function() {
+        $(this).val(PIDs[needle][i++].toFixed(3));       
+    });
+    needle++;
+    
+    i = 0;
+    $('.pid_tuning .YAW input').each(function() {
+        $(this).val(PIDs[needle][i++].toFixed(3));       
+    });
+    needle++;
+
+    i = 0;
+    $('.pid_tuning .ALT input').each(function() {
+        $(this).val(PIDs[needle][i++].toFixed(3));       
+    });
+    needle++;
+
+    i = 0;
+    $('.pid_tuning .Pos input').each(function() {
+        $(this).val(PIDs[needle][i++].toFixed(3));       
+    });
+    needle++;
+    
+    i = 0;
+    $('.pid_tuning .PosR input').each(function() {
+        $(this).val(PIDs[needle][i++].toFixed(3));       
+    });
+    needle++;  
+
+    i = 0;
+    $('.pid_tuning .NavR input').each(function() {
+        $(this).val(PIDs[needle][i++].toFixed(2));       
+    });
+    needle++; 
+
+    i = 0;
+    $('.pid_tuning .LEVEL input').each(function() {
+        $(this).val(PIDs[needle][i++].toFixed(2));       
+    });
+    needle++; 
+
+    i = 0;
+    $('.pid_tuning .MAG input').each(function() {
+        $(this).val(PIDs[needle][i++].toFixed(2));       
+    });
+    needle++;    
+    
 }