yaw_dial

app/views/AttitudeView.js

@@ -1,5 +1,5 @@
 /**
- * @author Serge Babayan
+ * @author Serge Babayan & Rosa
  * @module views/AttitudeView
  * @requires models/Commands
  * @requires util/Validator
@@ -40,19 +40,28 @@ module.exports = function (Marionette) {
       heading_setpoint: '.heading-dial .auto-pilot-setpoint',
       roll_input: '.roll-dial form input',
       pitch_input: '.pitch-dial form input',
-      heading_input: '.heading-dial form input'
+      heading_input: '.heading-dial form input',
+      //yaw
+      yaw_dial: '.yaw-dial .dial-picture .image-overlay',
+      yaw_text:  '.yaw-dial .current-value',
+      yaw_setpoint: '.yaw-dial .auto-pilot-setpoint',
+      yaw_input: 'yaw-dial form input'
     },
 
     events: {
       'submit .roll-dial form': 'sendSetRoll',
       'submit .pitch-dial form': 'sendSetPitch',
-      'submit .heading-dial form': 'sendSetHeading'
+      'submit .heading-dial form': 'sendSetHeading',
+      //yaw
+      'submit .yaw-dial form': 'sendSetYaw'
     },
 
     initialize: function () {
       this.current_pitch = null;
       this.current_roll = null;
       this.current_heading = null;
+      //yaw
+      this.current_yaw = null;
 
       this.telemetry_callback = null;
     },
@@ -72,11 +81,15 @@ module.exports = function (Marionette) {
       this.setPitch(data.pitch);
       this.setRoll(data.roll);
       this.setHeading(data.heading);
+      //yaw
+      this.setYaw(data.yaw);
     },
     telemetrySetpointsCallback: function(data){
       this.setPitchSetpoint(data.pitch_setpoint);
       this.setRollSetpoint(data.roll_setpoint);
       this.setHeadingSetpoint(data.heading_setpoint);
+      //yaw
+      this.setYawSetpoint(data.int_yaw_setpoint);
     },
     setCanvasDimensions: function () {
       var canvas_dimensions = Math.min(this.ui.attitude_dials.parent().width() - 12, this.ui.attitude_dials.parent().height() - 105);
@@ -109,6 +122,13 @@ module.exports = function (Marionette) {
         this.ui.heading_dial.css('transform', 'rotate(' + heading + 'deg)');
       }
     },
+    //yaw
+    setYaw: function (yaw) {
+      if (yaw !== null) {
+        this.ui.yaw_text.text(yaw.toFixed(1));
+        this.ui.yaw_dial.css('transform', 'rotate(' + yaw + 'deg)');
+      }
+    },
     setRollSetpoint: function (roll) {
       if (roll !== null) {
         this.ui.roll_setpoint.text(Number(roll).toFixed(2));
@@ -124,6 +144,12 @@ module.exports = function (Marionette) {
         this.ui.heading_setpoint.text(Number(heading).toFixed(2));
       }
     },
+    //yaw
+    setYawSetpoint: function (yaw) {
+      if (yaw !== null) {
+        this.ui.yaw_setpoint.text(Number(yaw).toFixed(2));
+      }
+    },
     sendSetPitch: function (e) {
       e.preventDefault();
       Commands.sendPitch(this.ui.pitch_input.val());
@@ -138,6 +164,12 @@ module.exports = function (Marionette) {
       e.preventDefault();
       Commands.sendHeading(this.ui.heading_input.val());
       this.ui.heading_input.val('');
+    },
+    //yaw
+    sendSetYaw: function (e) {
+      e.preventDefalt();
+      Commands.sendYaw(this.ui.yaw_input.val());
+      this.ui.yaw_input.val('');
     }
   });
-};
+};

styles/views/altitude-view.css

@@ -12,6 +12,11 @@
   text-align: center;
 }
 
+.altitudeView .bottom-region{
+  position: relative;
+  left: 80px;
+  top: -5px;
+}
 .altitudeView .altitude-dial>p{
   font-size: 18px;
   color: lightgrey;
@@ -43,7 +48,7 @@
   border-top-left-radius: 100%;
   border-bottom-left-radius: 5px;
   border-bottom-right-radius: 5px;
-} 
+}
 
 .altitudeView .dial-picture >p{
   position: absolute;
@@ -84,7 +89,7 @@
   margin: 0;
   padding: 0;
   position: relative;
-} 
+}
 .altitudeView .labels .tick{
   background: transparent;
   border-radius: 0;
@@ -110,54 +115,54 @@
 }
 .altitudeView .labels .tick:nth-child(2){
   transform: rotate(22.5deg);
-} 
+}
 .altitudeView .labels .tick:nth-child(3){
   transform: rotate(45deg);
 }
 .altitudeView .labels .tick:nth-child(4){
   transform: rotate(67.5deg);
-} 
+}
 .altitudeView .labels .tick:nth-child(5){
   transform: rotate(90deg);
-} 
+}
 .altitudeView .labels .tick:nth-child(6){
   transform: rotate(112.5deg);
-} 
+}
 .altitudeView .labels .tick:nth-child(7){
   transform: rotate(135deg);
-} 
+}
 .altitudeView .labels .tick:nth-child(8){
   transform: rotate(157.5deg);
-} 
+}
 .altitudeView .labels .tick:nth-child(9){
   transform: rotate(180deg);
 }
 .altitudeView .labels .tick:nth-child(10){
   transform: rotate(202.5deg);
-} 
+}
 .altitudeView .labels .tick:nth-child(11){
   transform: rotate(225deg);
 }
 .altitudeView .labels .tick:nth-child(12){
   transform: rotate(247.5deg);
-} 
+}
 .altitudeView .labels .tick:nth-child(13){
   transform: rotate(270deg);
-} 
+}
 .altitudeView .labels .tick:nth-child(14){
   transform: rotate(292.5deg);
-} 
+}
 .altitudeView .labels .tick:nth-child(15){
   transform: rotate(315deg);
-} 
+}
 .altitudeView .labels .tick:nth-child(16){
   transform: rotate(337.5deg);
-} 
+}
 .altitudeView .labels .tick:nth-child(5) div{
   transform: rotate(-90deg);
   top: 15px;
   position: absolute;
-}  
+}
 .altitudeView .labels .tick:nth-child(9) div{
   transform: rotate(180deg);
   position: absolute;
@@ -166,4 +171,4 @@
 }
 .altitudeView .labels .tick:nth-child(13) div{
   transform: rotate(90deg);
-}
+}

styles/views/attitude-view.css

@@ -2,11 +2,17 @@
   height: 100%;
   font-size: 16px;
 }
+.attitudeView .middle-region{
+  font-size: 16px;
+  height: 100%;
+}
 .attitudeView .right-region{
   font-size: 16px;
   height: 100%;
+  position: relative;
+  left: 330px;
+  top: -220px;
 }
-
 .attitudeView .attitude-dial{
   height: 50%;
   min-height: 210px;
@@ -33,7 +39,7 @@
   display: block;
   overflow: hidden;
   position: relative;
-}  
+}
 .attitudeView .attitude-dial .dial-picture .overlay{
   margin: 0;
   z-index: 10;
@@ -71,6 +77,12 @@
   width: 75% !important;
   transform-origin: 50% 50% !important;
 }
+.attitudeView .yaw-dial .image-overlay{
+  left: 0 !important;
+  top: 12% !important;
+  width: 75% !important;
+  transform-origin: 50% 50% !important;
+}
 .attitudeView .attitude-dial .dial-picture .overlay li{
   text-align: center;
 }
@@ -83,7 +95,7 @@
   bottom: 0;
   transform-origin: 50% 0%;
   transform: scale(2);
-}  
+}
 .attitudeView .attitude-dial form{
   margin: 0;
   margin-top: 12px;
@@ -93,12 +105,12 @@
   font-size: 14px;
 }
 .attitudeView .attitude-dial form input{
-  width: calc(100% - 58px);
+  width: calc(100% - 30px);
   height: 100%;
   text-align: left;
   max-width: 80px;
 }
 .attitudeView .attitude-dial form button{
   height: 100%;
   padding: 0 8px 0 8px;
-}
+}

styles/views/cockpit-layout-view.css

@@ -17,5 +17,5 @@
 .cockpitLayoutView .throttle-region{
   height: 20%;
   min-height: 126px;
-  width: 100%;
+  width: 150%;
 }

styles/views/main-layout-view.css

@@ -25,4 +25,4 @@
   height: 100%;
   width: 100%;
   background: linear-gradient(to bottom, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(71,71,71,1) 39%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(17,17,17,1) 99%,rgba(44,44,44,1) 100%,rgba(0,0,0,1) 100%,rgba(19,19,19,1) 100%,rgba(44,44,44,1) 101%);
-}
+}

styles/views/throttle-view.css

@@ -34,4 +34,4 @@
   display: flex;
   flex-direction: column;
   justify-content: space-around;
-}
+}

templates/views/AltitudeView.html

@@ -60,6 +60,7 @@
   </form>
 </div>
 
+<div class="bottom-region">
 <div style="text-align: center" class="center-wrapper">
 <div style="margin-top: 5px" class="altitude-dial air-speed-dial">
   <p>Air Speed</p>
@@ -91,4 +92,5 @@
     &nbsp;
   </form>
 </div>
-</div>
+</div>
+</div>

templates/views/AttitudeView.html

@@ -30,7 +30,7 @@
   </div>
 </div>
 
-<div class="right-region pure-u-1-2">
+<div class="middle-region pure-u-1-2">
   <div class="attitude-dial heading-dial">
     <p>Heading</p>
     <div class="dial-picture">
@@ -62,4 +62,19 @@
       <div class="fluid"></div>
     </div>
   </div>
-</div>
+</div>
+
+<div class = "right-region pure-u-1-2">
+  <div class="attitude-dial yaw-dial">
+    <p>Yaw</p>
+    <div class="dial-picture">
+      <img src="../../assets/images/heading.png" alt="" class="image-overlay">
+      <p><span class="current-value">--</span>&deg;</p>
+    </div>
+     <p>Set: <span class="auto-pilot-setpoint">--</span>&deg;</p>
+    <form class="pure-form">
+      <input type="number">
+      <button class="pure-button button-success">Send</button>
+    </form>
+  </div>
+</div>