diff --git a/New client/chameleon-client/src/components/cv-range-slider.vue b/New client/chameleon-client/src/components/cv-range-slider.vue
index e5f088847..470c58ae4 100644
--- a/New client/chameleon-client/src/components/cv-range-slider.vue	
+++ b/New client/chameleon-client/src/components/cv-range-slider.vue	
@@ -11,7 +11,7 @@
                     </template>
 
                     <template v-slot:append>
-                    <v-text-field :value="localValue[1]" @input="handleChange" @focus="appendFocused = true" @blur="appendFocused = false" class="mt-0 pt-0" hide-details single-line type="number" style="width: 50px" :step="step"></v-text-field>
+                        <v-text-field :value="localValue[1]" @input="handleChange" @focus="appendFocused = true" @blur="appendFocused = false" class="mt-0 pt-0" hide-details single-line type="number" style="width: 50px" :step="step"></v-text-field>
                     </template>
                 </v-range-slider>
             </v-col>
diff --git a/New client/chameleon-client/src/store.js b/New client/chameleon-client/src/store.js
index 19db724d2..1b4c7e6a7 100644
--- a/New client/chameleon-client/src/store.js	
+++ b/New client/chameleon-client/src/store.js	
@@ -11,20 +11,21 @@ export default new Vuex.Store({
   state: {
     settings:{},
     pipeline:{
-      Exposure:0,
-      Brightness:0,
-      Orientation:0,
-      Hue:[0,15],
-      Saturation:[0,15],
-      Value:[0,25],
-      Erode:false,
-      Dilate:false,
-      Area:[0,12],
-      Ratio:[0,12],
-      Extent:[0,12],
-      TargetGrouping:0,
-      TargetIntersection:0,
-      SortMode:0
+      exposure:0,
+      brightness:0,
+      orientation:0,
+      hue:[0,15],
+      saturation:[0,15],
+      value:[0,25],
+      erode:false,
+      dilate:false,
+      area:[0,12],
+      ratio:[0,12],
+      extent:[0,12],
+      targetGrouping:0,
+      targetIntersection:0,
+      sortMode:0,
+      isBinary:0
     },
     cameraSettings:{},
     resolutionList:[],
diff --git a/New client/chameleon-client/src/views/Camera.vue b/New client/chameleon-client/src/views/Camera.vue
index 8a1f9e2a1..283fb3dfc 100644
--- a/New client/chameleon-client/src/views/Camera.vue	
+++ b/New client/chameleon-client/src/views/Camera.vue	
@@ -58,7 +58,7 @@
             </v-col>
             <v-col cols="6" class="colsClass">
                 <div>
-                    <v-tabs background-color="#212121" dark height="50" slider-color="#4baf62" centered style="padding-bottom:10px">
+                    <v-tabs background-color="#212121" dark height="50" slider-color="#4baf62" centered style="padding-bottom:10px" v-model="pipeline.isBinary" @change="handleInput('isBinary',pipeline.isBinary)">
                         <v-tab>Normal</v-tab>
                         <v-tab>Threshold</v-tab>
                     </v-tabs>
@@ -91,7 +91,7 @@ import CVicon from '../components/cv-icon'
             CVicon
         },
         methods:{
-                        test(value){
+            test(value){
                 console.log(value)
             }
         },
diff --git a/New client/chameleon-client/src/views/CameraViewes/ContoursTab.vue b/New client/chameleon-client/src/views/CameraViewes/ContoursTab.vue
index 4a30a3feb..f0b5fcc94 100644
--- a/New client/chameleon-client/src/views/CameraViewes/ContoursTab.vue	
+++ b/New client/chameleon-client/src/views/CameraViewes/ContoursTab.vue	
@@ -1,10 +1,10 @@
 <template>
     <div>
-        <CVrangeSlider v-model="value.Area" name="Area" :min="0" :max="100" :step="0.1" @input="handleInput('Area',value.Area)"></CVrangeSlider>
-        <CVrangeSlider v-model="value.Ratio" name="Ratio (W/H)" :min="0" :max="100" :step="0.1" @input="handleInput('ratio',value.Ratio)"></CVrangeSlider>
-        <CVrangeSlider v-model="value.Extent" name="Extent" :min="0" :max="100" @input="handleInput('Extent',value.Extent)"></CVrangeSlider>
-        <CVselect name="Target Group" :list="['Single','Dual','Triple','Quadruple','Quintuple']" v-model="value.TargetGrouping" @input="handleInput('TargetGrouping',value.TargetGrouping)"></CVselect>
-        <CVselect name="Target Intersection" :list="['None','Up','Down','Left','Right']" :disabled="isDisabled" v-model="value.TargetIntersection" @input="handleInput('TargetIntersection',value.TargetIntersection)"></CVselect>
+        <CVrangeSlider v-model="value.area" name="Area" :min="0" :max="100" :step="0.1" @input="handleInput('area',value.area)"></CVrangeSlider>
+        <CVrangeSlider v-model="value.ratio" name="Ratio (W/H)" :min="0" :max="100" :step="0.1" @input="handleInput('ratio',value.ratio)"></CVrangeSlider>
+        <CVrangeSlider v-model="value.extent" name="Extent" :min="0" :max="100" @input="handleInput('extent',value.extent)"></CVrangeSlider>
+        <CVselect name="Target Group" :list="['Single','Dual','Triple','Quadruple','Quintuple']" v-model="value.targetGrouping" @input="handleInput('targetGrouping',value.targetGrouping)"></CVselect>
+        <CVselect name="Target Intersection" :list="['None','Up','Down','Left','Right']" :disabled="isDisabled" v-model="value.targetIntersection" @input="handleInput('targetIntersection',value.targetIntersection)"></CVselect>
 
     </div>
 </template>
diff --git a/New client/chameleon-client/src/views/CameraViewes/InputTab.vue b/New client/chameleon-client/src/views/CameraViewes/InputTab.vue
index 3462ed31a..6346a2656 100644
--- a/New client/chameleon-client/src/views/CameraViewes/InputTab.vue	
+++ b/New client/chameleon-client/src/views/CameraViewes/InputTab.vue	
@@ -1,8 +1,8 @@
 <template>
     <div>
-        <CVslider name="Exposure" v-model="value.Exposure" @input="handleInput('exposure',value.Exposure)" :min="0" :max="100"></CVslider>
-        <CVslider name="Brightness" v-model="value.Brightness" :min="0" :max="100" @input="handleInput('Brightness',value.Brightness)"></CVslider>
-        <CVselect name="Orientation" v-model="value.Orientation" :list="['Normal','Inverted']" @input="handleInput('Orientation',value.Orientation)"></CVselect>
+        <CVslider name="Exposure" v-model="value.exposure" @input="handleInput('exposure',value.exposure)" :min="0" :max="100"></CVslider>
+        <CVslider name="Brightness" v-model="value.brightness" :min="0" :max="100" @input="handleInput('brightness',value.brightness)"></CVslider>
+        <CVselect name="Orientation" v-model="value.orientation" :list="['Normal','Inverted']" @input="handleInput('orientation',value.orientation)"></CVselect>
     </div>
 </template>
 
diff --git a/New client/chameleon-client/src/views/CameraViewes/OutputTab.vue b/New client/chameleon-client/src/views/CameraViewes/OutputTab.vue
index dcf9f7556..e1857dc9d 100644
--- a/New client/chameleon-client/src/views/CameraViewes/OutputTab.vue	
+++ b/New client/chameleon-client/src/views/CameraViewes/OutputTab.vue	
@@ -1,19 +1,23 @@
 <template>
     <div>
-        <CVselect name="SortMode" v-model="value.SortMode" :list="['Largest','Smallest','Highest','Lowest','Rightmost','Leftmost','Closest']" @input="handleInput('SortMode',value.SortMode)"></CVselect>
+        <CVselect name="SortMode" v-model="value.sortMode" :list="['Largest','Smallest','Highest','Lowest','Rightmost','Leftmost','Closest']" @input="handleInput('sortMode',value.sortMode)"></CVselect>
         <span>Calibrate:</span><v-divider dark color="white"></v-divider>
         <v-row align="center" justify="start">
             <v-col style="padding-right:0px" :cols="3"> 
-                <v-btn small color="#4baf62">Take Point A</v-btn>
+                <v-btn small color="#4baf62" @click="takePointA">Take Point A</v-btn>
             </v-col>
             <v-col style="margin-left:0px" :cols="3">
-                <v-btn small color="#4baf62">Take Point B</v-btn>
+                <v-btn small color="#4baf62" @click="takePointB">Take Point B</v-btn>
             </v-col>
             <v-col>
-                <v-btn small color="yellow darken-3">Clear All Points</v-btn>
+                <v-btn small @click="clearSlope" color="yellow darken-3">Clear All Points</v-btn>
             </v-col>
             
         </v-row>
+        <v-snackbar :timeout="3000" v-model="snackbar" top color="error">
+            <span style="color:#000">Points are too close</span>
+            <v-btn color="black" text @click="snackbar = false">Close</v-btn>
+        </v-snackbar>
     </div>
 </template>
 
@@ -25,9 +29,52 @@ import CVselect from '../../components/cv-select'
         components:{
             CVselect
         },
+        methods:{
+            takePointA(){
+                this.pointA = this.rawPoint;
+                this.calcSlope();
+            },
+            takePointB(){
+                this.pointB = this.rawPoint;
+                this.calcSlope();
+            },
+            calcSlope(){
+                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]);
+                    if(isNaN(m) === false && isNaN(b) === false){
+                        this.sendSlope(m,b,true);
+                    } else {
+                         this.snackbar = true;
+                    }
+                    this.pointA = undefined;
+                    this.pointB = undefined;
+                }
+            },
+            sendSlope(m,b,valid){
+                this.handleInput('m',m);
+                this.handleInput('b',b);
+                this.handleInput('isCalibrated',valid);
+            },
+            clearSlope(){
+                this.sendSlope(1,0,false);
+                this.pointA = undefined;
+                this.pointB = undefined;
+            }
+        },
+
         data() {
             return {
-                
+                snackbar: false,
+                pointA: undefined,
+                pointB: undefined 
+            }
+        },
+        computed:{
+            rawPoint:{
+                get(){
+                    return this.$store.state.point.raw;
+                }
             }
         }
     }
diff --git a/New client/chameleon-client/src/views/CameraViewes/ThresholdTab.vue b/New client/chameleon-client/src/views/CameraViewes/ThresholdTab.vue
index 4431a325a..856a17432 100644
--- a/New client/chameleon-client/src/views/CameraViewes/ThresholdTab.vue	
+++ b/New client/chameleon-client/src/views/CameraViewes/ThresholdTab.vue	
@@ -1,10 +1,10 @@
 <template>
     <div>
-        <CVrangeSlider v-model="value.Hue" name="Hue" :min="0" :max="180" @input="handleInput('hue',value.Hue)"></CVrangeSlider>
-        <CVrangeSlider v-model="value.Saturation" name="Saturation" :min="0" :max="255" @input="handleInput('Saturation',value.Saturation)"></CVrangeSlider>
-        <CVrangeSlider v-model="value.Value" name="Value" :min="0" :max="255" @input="handleInput('Value',value.Value)"></CVrangeSlider>
-        <CVswitch v-model="value.Erode" name="Erode" @input="handleInput('Erode',value.Erode)"></CVswitch>
-        <CVswitch v-model="value.Dilate" name="Dilate" @input="handleInput('Dilate',value.Dilate)"></CVswitch>
+        <CVrangeSlider v-model="value.hue" name="Hue" :min="0" :max="180" @input="handleInput('hue',value.hue)"></CVrangeSlider>
+        <CVrangeSlider v-model="value.saturation" name="Saturation" :min="0" :max="255" @input="handleInput('saturation',value.saturation)"></CVrangeSlider>
+        <CVrangeSlider v-model="value.value" name="Value" :min="0" :max="255" @input="handleInput('value',value.value)"></CVrangeSlider>
+        <CVswitch v-model="value.erode" name="Erode" @input="handleInput('erode',value.erode)"></CVswitch>
+        <CVswitch v-model="value.dilate" name="Dilate" @input="handleInput('dilate',value.dilate)"></CVswitch>
     </div>
 </template>