From e1c1522da5f94e3e56125e01bedf1ba7baee2802 Mon Sep 17 00:00:00 2001 From: cTn Date: Thu, 11 Apr 2013 20:03:44 +0200 Subject: [PATCH] css3 compass O.o --- css/style.css | 90 +++++++++++++++++++++++++++++++++++++++++ js/main.js | 1 - tabs/initial_setup.html | 13 ++++++ tabs/initial_setup.js | 4 ++ tabs/receiver.js | 3 +- 5 files changed, 109 insertions(+), 2 deletions(-) diff --git a/css/style.css b/css/style.css index 534b796a..54b0d0b0 100644 --- a/css/style.css +++ b/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; diff --git a/js/main.js b/js/main.js index d854c18c..e34995fd 100644 --- a/js/main.js +++ b/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); }); diff --git a/tabs/initial_setup.html b/tabs/initial_setup.html index 4f70a407..f53c2643 100644 --- a/tabs/initial_setup.html +++ b/tabs/initial_setup.html @@ -64,4 +64,17 @@ +
+
+ N + E + S + W +
+ + +
+
+
+
\ No newline at end of file diff --git a/tabs/initial_setup.js b/tabs/initial_setup.js index a2e034fc..7c96a24a 100644 --- a/tabs/initial_setup.js +++ b/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); diff --git a/tabs/receiver.js b/tabs/receiver.js index 83d857ab..cc1d2cd6 100644 --- a/tabs/receiver.js +++ b/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