css3 compass O.o

css/style.css

@@ -350,6 +350,96 @@ a:hover {
             padding: 5px;
             line-height: 18px;
         }
+    .tab-initial_setup .compass-wrapper {
+        float: left;
+        
+        margin-top: 100px;
+        margin-left: 80px;
+
+        border: 1px solid silver;
+        
+        border-radius: 50%;
+    }    
+    .tab-initial_setup #compass {
+        position: relative;
+        
+        width: 150px;
+        height: 150px;
+        
+        border: 6px dashed silver;
+        border-radius: 50%;
+    }
+        .tab-initial_setup #compass span {
+            position: absolute;
+            font-weight: bold;
+        }
+        .tab-initial_setup #compass span:nth-child(1) {
+            left: 70px; 
+            top: 5px;
+        } 
+        .tab-initial_setup #compass span:nth-child(2) {
+            right: 5px; 
+            top: 70px;
+        }  
+        .tab-initial_setup #compass span:nth-child(3) {
+            left: 70px; 
+            bottom: 5px;
+        }  
+        .tab-initial_setup #compass span:nth-child(4) {
+            left: 5px; 
+            top: 70px;
+        }          
+        .tab-initial_setup #compass .pointer {
+            position: absolute;
+            
+            height: 150px;
+            width: 150px;
+            
+           -webkit-transform: rotate(0deg); 
+        }
+            .tab-initial_setup #compass .pointer .tip {
+                position: absolute;
+                
+                margin-top: 14px;
+                margin-left: -6px;
+                
+                width: 0; 
+                height: 0; 
+                
+                border-left: 10px solid transparent;
+                border-right: 10px solid transparent;
+                
+                border-bottom: 30px solid red;
+            }
+            .tab-initial_setup #compass .pointer .stick {
+                position: absolute;
+                display: block;
+                
+                margin-top: -22px;
+                margin-right: 69px;
+                
+                width: 4px;
+                height: 30px;
+                
+                background-color: black;
+            }
+            .tab-initial_setup #compass .value {
+                position: relative;
+                
+                top: 75px;
+                left: 53px;
+                
+                width: 40px;
+                height: 16px;    
+                line-height: 16px;
+                
+                text-align: center;
+                
+                background-color: #f2f2f2;
+                
+                border: 1px solid silver;
+            }
+        
 .tab-pid_tuning table {
     width: 100%;
     border-collapse: collapse;    

js/main.js

@@ -34,7 +34,6 @@ $(document).ready(function() {
     });
     
     // temporary
-    //$('#content').load("./tabs/sensors.html", tab_initialize_sensors);
     //$('#content').load("./tabs/initial_setup.html", tab_initialize_initial_setup);
 });
 

tabs/initial_setup.html

@@ -64,4 +64,17 @@
             </tr>            
         </table>
     </div>
+    <div class="compass-wrapper">
+        <div id="compass">
+            <span>N</span>
+            <span>E</span>
+            <span>S</span>
+            <span>W</span>
+            <div class="pointer">
+                <span class="tip"></span>
+                <span class="stick"></span>
+            </div>
+            <div class="value"></div>
+        </div>
+    </div>
 </div>

tabs/initial_setup.js

@@ -40,6 +40,10 @@ function data_poll() {
     $('td.sats').html(GPS_DATA.numSat);
     $('td.distToHome').html(GPS_DATA.distanceToHome);
 
+    // Update Compass
+    $('div#compass .pointer').css('-webkit-transform', 'rotate(' + (SENSOR_DATA.kinematicsZ) + 'deg)'); 
+    $('div#compass .value').html(SENSOR_DATA.kinematicsZ + '°');
+    
     // Request new data
     send_message(MSP_codes.MSP_ATTITUDE, MSP_codes.MSP_ATTITUDE); 
     send_message(MSP_codes.MSP_RAW_GPS, MSP_codes.MSP_RAW_GPS);

tabs/receiver.js

@@ -33,7 +33,8 @@ function tab_initialize_receiver() {
         shadowSize: 0,
         yaxis : {
             max: 2200,
-            min: 800
+            min: 800,
+            noTicks: 10
         },
         xaxis : {
             //noTicks = 0