finished calibration module

chameleon-client/src/components/CameraTab.vue

@@ -23,8 +23,7 @@
         </Row>
         
         <Button type="primary" size="small" class="buttonClass spacing" v-on:click="socketSendAll">Save settings to current camera</Button>
-          
-          <h4 class="spacing">Please Restart the computer Manually after saving all cameras</h4>
+        <h4 class="spacing">Please Restart the computer Manually after saving all cameras</h4>
         
     </div>
 </template>

chameleon-client/src/components/Vision.vue

@@ -17,10 +17,11 @@
                     </Col>
                     <Col span="12">
                     <Tabs :animated="false"  v-model="isBinary" @on-click="handleImage">
-                    <TabPane label="Normal"></TabPane>    
-                    <TabPane label="Threshold"></TabPane>
+                        <TabPane label="Normal"></TabPane>    
+                        <TabPane label="Threshold"></TabPane>
                     </Tabs>
                     <img class="imageSize" :src="steamAdress" style="">
+                    <h4 class="pointText">{{point}}</h4>
                     </Col>
                 </Col>
             </row>
@@ -69,6 +70,12 @@
                 set: function(value){
                     this.$store.commit('is_binary',value)
                 }
+            },
+            point:{
+                get:function(){
+                    let p = this.$store.state.point;
+                    return ("Pitch: " + parseFloat(p['pitch']).toFixed(2) + " Yaw: " + parseFloat(p['yaw']).toFixed(2) + " FPS: " + parseFloat(p['fps']).toFixed(2))
+                }
             }
         },
     }
@@ -81,4 +88,7 @@
     width: 75%;
     height: 75%;
 }
+.pointText{
+    text-align: center;
+}
 </style>

chameleon-client/src/components/outputTab.vue

@@ -2,7 +2,19 @@
     <div id="OutputTab">
         <chselect class="spacing" title="Sort Mode" Xkey="sort_mode" 
         :list="['Largest','Smallest','Highest','Lowest','Rightmost','Leftmost','Closest']"></chselect>
-        <h6>calibrate crosshair</h6>
+        <Row type="flex" justify="start" align="middle" class="spacing" :gutter="10">
+            <col>
+                <Button type="primary" size="small" v-on:click="takePointA">Take Point A</Button>
+            </col>
+            <col style="margin-left:10px">
+                <Button type="primary" size="small" v-on:click="takePointB">Take Point B</Button>
+            </col>
+        </Row>
+        <Row type="flex" align="middle" class="spacing" :gutter="10">
+            <col>
+                <Button type="warning" size="small" v-on:click="clearPoints">Clear All Points</Button>
+            </col>
+        </Row>
      </div>
 </template>
 
@@ -19,11 +31,40 @@ import chrange from './ch-range.vue'
             chrange
         },
         methods:{
-
+            takePointA:function(){
+                this.pointA = this.raw_point;
+                this.calcSlope();
+            },
+            takePointB:function(){
+                this.pointB = this.raw_point;
+                this.calcSlope();
+            },
+            calcSlope:function(){
+                if(this.pointA !== undefined && this.pointB !== undefined){
+                    let m = (this.pointB[1] - this.pointA[1]) / (this.pointB[0] - this.pointA[0]);
+                    let b = this.pointA[1] - (m * this.pointA[0]);
+                    this.sendSlope(m,b);
+                }
+            },
+            clearPoints:function(){
+                this.sendSlope(1,0);
+            },
+            sendSlope(m,b){
+                this.$socket.sendObj({'M':m});
+                this.$socket.sendObj({'B':b});
+            }
+        },
+        computed: {
+            raw_point:{
+                get:function(){
+                    return this.$store.state.raw_point;
+                }
+            }
         },
         data() {
             return {
-                
+                pointA:undefined,
+                pointB:undefined
             }
         }
     }