ui and readme improvements for abstractions

bolandrm · Aug 18, 2016 · a4ef46b · a4ef46b
1 parent a3b11a6
commit a4ef46b
Show file tree

Hide file tree

Showing 6 changed files with 149 additions and 25 deletions.
diff --git a/README.md b/README.md
@@ -4,13 +4,23 @@ This is my WIP custom arduino quadcopter firmware.
 
 ### Media:
 
-- [First Successful Test Flight](https://www.youtube.com/watch?v=e4rH2S3EOmw&feature=youtu.be)
-- [Talk Describing Code](https://www.youtube.com/watch?v=CHSYgLfhwUo&t=1947)
+- [Flight Clips](https://www.youtube.com/watch?v=sWmG4tUAae0&feature=youtu.be)
+- [(OLD) First Successful Test Flight](https://www.youtube.com/watch?v=e4rH2S3EOmw&feature=youtu.be)
+
+### Talks:
+
+- [Talk Describing Code @ Pittsburgh Code & Supply Meetup](https://www.youtube.com/watch?v=CHSYgLfhwUo&t=1947)
+- [Slides from talk @ Abstractions conference](http://www.slideshare.net/ryanboland18/abstractions-quadpdf-65109511)
 
 ### Blog posts:
 
 - [Reading Remote Control Receiver Values with Arduino](https://ryanboland.com/blog/reading-rc-receiver-values/)
 
+### Similar projects:
+
+- [Phoenix Flight Controller](https://github.com/cTn-dev/Phoenix-FlightController)
+- [BlueCopter](https://github.com/baselsw/BlueCopter)
+
 ## Hardware
 
 - Teensy 3.2

diff --git a/src/serial_commands.cpp b/src/serial_commands.cpp
@@ -40,18 +40,18 @@ static uint16_t data_received_length;
 static uint8_t data_buffer[200];
 
 int generic_serial_available() {
-  //return usb_serial_available();
-  return serial_available();
+  return usb_serial_available();
+  //return serial_available();
 }
 
 int generic_serial_getchar() {
-  //return usb_serial_getchar();
-  return serial_getchar();
+  return usb_serial_getchar();
+  //return serial_getchar();
 }
 
 void generic_serial_putchar(uint32_t c) {
-  //usb_serial_putchar(c);
-  serial_putchar(c);
+  usb_serial_putchar(c);
+  //serial_putchar(c);
 }
 
 void serial_commands_process() {

diff --git a/ui/app/components/TuningTab.jsx b/ui/app/components/TuningTab.jsx
@@ -11,6 +11,7 @@ class TuningTab extends React.Component {
     this.intervalIDs = [
       setInterval(() => {
         serial.send(tuningTabStore.graph1.requestCode(), null, tuningTabStore.graph1.addSample)
+        serial.send(serial.codes.REQUEST_GYRO_ACC, null, tuningTabStore.updateOrientation)
         serial.send(serial.codes.REQUEST_MOTORS, null, tuningTabStore.addMotorChartSample)
       }, 50),
 
@@ -25,26 +26,54 @@ class TuningTab extends React.Component {
   }
 
   render() {
+    let flightData = tuningTabStore.flightData
+
+    let orientation = tuningTabStore.orientation
+    let orientationStyle = { transform: `rotateX(${orientation.x}deg) rotateY(${orientation.y}deg) rotateZ(${orientation.z}deg)` }
+
     return (
-      <div>
-        <LineGraph graph={tuningTabStore.graph1} />
-        <MotorChart data={tuningTabStore.motorChartValues} />
-        <div>
-          Mode: {tuningTabStore.flightData.mode}
-          <br />
-          {tuningTabStore.flightData.armed}
-          <br />
-          Battery: {tuningTabStore.flightData.batteryVoltage.toFixed(2)}v
-          <br />
-          Loop Time: {tuningTabStore.flightData.loopTime}μs
+      <div className="tuning-tab">
+        <div className="top-segment">
+          <div className="fc-data">
+            <div className={`flight-stat armed-status ${flightData.armed}`}>
+              Arm status:
+              <div className="callout-text uppercase">{flightData.armed}</div>
+            </div>
+            <div className="flight-stat">
+              Mode:
+              <div className="callout-text uppercase">{flightData.mode}</div>
+            </div>
+            <div className="flight-stat">
+              Battery:
+              <div className="callout-text">{flightData.batteryVoltage.toFixed(2)}v</div>
+            </div>
+            <div className="flight-stat">
+              Loop Time:
+              <div className="callout-text">
+                {flightData.loopTime}μs
+              </div>
+            </div>
+          </div>
+
+          <div className="teapot" style={orientationStyle} >
+            <div className="side front"></div>
+            <div className="side back"></div>
+            <div className="side left"></div>
+            <div className="side right"></div>
+            <div className="side top"></div>
+            <div className="side bottom"></div>
+          </div>
+          <MotorChart data={tuningTabStore.motorChartValues} />
         </div>
-        orientation,
-        calibration,
-        reboot,
-        test ping
+        <LineGraph graph={tuningTabStore.graph1} />
       </div>
     )
   }
 }
 
+// orientation,
+// calibration,
+// reboot,
+// test ping
+
 export default TuningTab
diff --git a/ui/app/stores/LineGraphStore.js b/ui/app/stores/LineGraphStore.js
@@ -36,7 +36,7 @@ export const graphTypes = {
 
 export class LineGraphStore {
   @observable data = []
-  @observable type = 'ratePidOutput'
+  @observable type = 'angleXFusion'
   @observable paused = false
   sampleCount = 200
 

diff --git a/ui/app/stores/TuningTabStore.js b/ui/app/stores/TuningTabStore.js
@@ -4,11 +4,12 @@ import { LineGraphStore } from './LineGraphStore'
 
 export default class TuningTabStore {
   @observable motorChartValues = { m1: 0, m2: 0, m3: 0, m4: 0 }
+  @observable orientation = { x: 0, y: 0, z: 0 }
   @observable flightData = {}
 
   constructor() {
     this.graph1 = new LineGraphStore()
-    this.flightData = { batteryVoltage: 0.0 }
+    this.flightData = { batteryVoltage: 0.0, armed: "unknown" }
   }
 
   addMotorChartSample = (sample) => {
@@ -25,6 +26,12 @@ export default class TuningTabStore {
     })
   }
 
+  updateOrientation = (data) => {
+    this.orientation.x = data.angles.y
+    this.orientation.y = 0
+    this.orientation.z = data.angles.x
+  }
+
   updateFlightControllerData = (data) => {
     this.flightData = data
   }

diff --git a/ui/app/styles/app.scss b/ui/app/styles/app.scss
@@ -232,3 +232,81 @@ button:focus {
     stroke-opacity: 0.75;
   }
 }
+
+.tuning-tab {
+  .motor-chart-2d {
+    margin-left: 75px;
+  }
+
+  .top-segment {
+    margin-bottom: 50px;
+    display: flex;
+    align-items: center;
+  }
+
+  .fc-data {
+    flex: 1;
+  }
+
+  .flight-stat {
+    float: left;
+    text-align: center;
+    width: 25%;
+
+    & > .callout-text {
+      font-size: 34px;
+      font-weight: bold;
+      &.uppercase { text-transform: uppercase; }
+    }
+
+    &.armed > .callout-text { color: red; }
+    &.unarmed > .callout-text { color: green; }
+  }
+
+  $size: 150px;
+
+  .teapot {
+    margin-top: 50px;
+    margin-bottom: 50px;
+    margin-left: 50px;
+    height: $size;
+    width: $size;
+    transform-style: preserve-3d;
+
+    .side {
+      height: inherit;
+      width: inherit;
+      position: absolute;
+    }
+
+    .front {
+      background-color: gray;
+      transform: translate3d(0, 0, $size/2);
+    }
+
+    .back {
+      background-color: gray;
+      transform: rotateY(180deg) translate3d(0, 0, $size/2);
+    }
+
+    .left {
+      background-color: blue;
+      transform: rotateY(-90deg) translate3d(0, 0, $size/2);
+    }
+
+    .right {
+      background-color: blue;
+      transform: rotateY(90deg) translate3d(0, 0, $size/2);
+    }
+
+    .top {
+      background-color: darken(red, 10%);
+      transform: rotateX(90deg) translate3d(0, 0, $size/2);
+    }
+
+    .bottom {
+      background-color: darken(red, 10%);
+      transform: rotateX(-90deg) translate3d(0, 0, $size/2);
+    }
+  }
+}