From 8e28ac8339b08a4947fdec55030f016fa39936ff Mon Sep 17 00:00:00 2001
From: Omer <zipory.omer@gmail.com>
Date: Mon, 25 Nov 2019 01:08:08 +0200
Subject: [PATCH 01/12] Toggle mode

---
 chameleon-client/src/store.js                 |  1 +
 .../src/views/CameraViewes/ThresholdTab.vue   | 32 ++++++++++++++++---
 2 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/chameleon-client/src/store.js b/chameleon-client/src/store.js
index 1a7a45987..a5d291e36 100644
--- a/chameleon-client/src/store.js
+++ b/chameleon-client/src/store.js
@@ -21,6 +21,7 @@ export default new Vuex.Store({
             exposure: 0,
             brightness: 0,
             orientation: 0,
+            isColorPick: false,
             hue: [0, 15],
             saturation: [0, 15],
             value: [0, 25],
diff --git a/chameleon-client/src/views/CameraViewes/ThresholdTab.vue b/chameleon-client/src/views/CameraViewes/ThresholdTab.vue
index 4067bb804..150081c46 100644
--- a/chameleon-client/src/views/CameraViewes/ThresholdTab.vue
+++ b/chameleon-client/src/views/CameraViewes/ThresholdTab.vue
@@ -1,9 +1,17 @@
 <template>
-    <div>
-        <CVrangeSlider v-model="value.hue" name="Hue" :min="0" :max="180" @input="handleData('hue')"/>
+    <div>        
+        <CVswitch v-model="value.isColorPick" name="Colorpick Calibration"/>
+        <v-divider color="white"/>
+        <CVrangeSlider v-model="value.hue" name="Hue" :min="0" :max="180" @input="handleData('hue')" :disabled="isAutomaticHSV"/>
         <CVrangeSlider v-model="value.saturation" name="Saturation" :min="0" :max="255"
                        @input="handleData('saturation')"/>
         <CVrangeSlider v-model="value.value" name="Value" :min="0" :max="255" @input="handleData('value')"/>
+        <v-divider color="white"/>
+        <v-btn style="margin: 20px;" tile color="#4baf62" :disabled="isManualHSV">
+                    <v-icon>C</v-icon>
+                    Colorpick Calibration
+                </v-btn>
+        <v-divider color="white"/>
         <CVswitch v-model="value.erode" name="Erode" @input="handleData('erode')"/>
         <CVswitch v-model="value.dilate" name="Dilate" @input="handleData('dilate')"/>
     </div>
@@ -23,9 +31,25 @@ import CVswitch from '../../components/cv-switch'
             return {
             }
         },
-        computed:{
+        computed: {            
+            isAutomaticHSV() {
+                if (typeof this.pipeline.isColorPick === "boolean") {
+                    return this.pipeline.isColorPick;
+                }
+            },
+            pipeline: {
+                get() {
+                    return this.$store.state.pipeline;
+                }
+            },
+            isManualHSV()
+            {
+                if (typeof this.pipeline.isColorPick === "boolean") {
+                    return !this.pipeline.isColorPick;
+                }
+            },
         },
-        methods:{
+        methods:{  
             handleData(val){
                 this.handleInput(val,this.value[val]);
                 this.$emit('update')

From b0135d12e8124d743bce52a0f1c05ccd597141f4 Mon Sep 17 00:00:00 2001
From: Omer <zipory.omer@gmail.com>
Date: Mon, 25 Nov 2019 01:31:29 +0200
Subject: [PATCH 02/12] RangeSlider able to be disabled

---
 chameleon-client/src/components/cv-range-slider.vue |  4 ++--
 .../src/views/CameraViewes/ThresholdTab.vue         | 13 ++++++-------
 2 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/chameleon-client/src/components/cv-range-slider.vue b/chameleon-client/src/components/cv-range-slider.vue
index 571fa086f..8755dc591 100644
--- a/chameleon-client/src/components/cv-range-slider.vue
+++ b/chameleon-client/src/components/cv-range-slider.vue
@@ -6,7 +6,7 @@
             </v-col>
             <v-col :cols="10">
                 <v-range-slider :value="localValue" @input="handleInput" :max="max" :min="min" hide-details
-                                class="align-center" dark color="#4baf62" :step="step">
+                                class="align-center" dark color="#4baf62" :step="step" :disabled="disabled">
                     <template v-slot:prepend>
                         <v-text-field :value="localValue[0]" :max="max" :min="min" @input="handleChange"
                                       @focus="prependFocused = true" @blur="prependFocused = false" class="mt-0 pt-0"
@@ -27,7 +27,7 @@
 <script>
     export default {
         name: 'RangeSlider',
-        props: ['name', 'min', 'max', 'value', 'step'],
+        props: ['name', 'min', 'max', 'value', 'step','disabled'],
         data() {
             return {
                 prependFocused: false,
diff --git a/chameleon-client/src/views/CameraViewes/ThresholdTab.vue b/chameleon-client/src/views/CameraViewes/ThresholdTab.vue
index 150081c46..9f4e2a69b 100644
--- a/chameleon-client/src/views/CameraViewes/ThresholdTab.vue
+++ b/chameleon-client/src/views/CameraViewes/ThresholdTab.vue
@@ -1,17 +1,16 @@
 <template>
     <div>        
         <CVswitch v-model="value.isColorPick" name="Colorpick Calibration"/>
-        <v-divider color="white"/>
+        <v-divider color="darkgray "/>
         <CVrangeSlider v-model="value.hue" name="Hue" :min="0" :max="180" @input="handleData('hue')" :disabled="isAutomaticHSV"/>
-        <CVrangeSlider v-model="value.saturation" name="Saturation" :min="0" :max="255"
-                       @input="handleData('saturation')"/>
-        <CVrangeSlider v-model="value.value" name="Value" :min="0" :max="255" @input="handleData('value')"/>
-        <v-divider color="white"/>
+        <CVrangeSlider v-model="value.saturation" name="Saturation" :min="0" :max="255" @input="handleData('saturation')" :disabled="isAutomaticHSV"/>
+        <CVrangeSlider v-model="value.value" name="Value" :min="0" :max="255" @input="handleData('value')" :disabled="isAutomaticHSV"/>
+        <v-divider color="darkgray "/>
         <v-btn style="margin: 20px;" tile color="#4baf62" :disabled="isManualHSV">
-                    <v-icon>C</v-icon>
+                    <v-icon>colorize</v-icon>
                     Colorpick Calibration
                 </v-btn>
-        <v-divider color="white"/>
+        <v-divider color="darkgray "/>
         <CVswitch v-model="value.erode" name="Erode" @input="handleData('erode')"/>
         <CVswitch v-model="value.dilate" name="Dilate" @input="handleData('dilate')"/>
     </div>

From fc0c83b323218e3cc527555cce2ce6d3287a3ded Mon Sep 17 00:00:00 2001
From: Omer <zipory.omer@gmail.com>
Date: Mon, 25 Nov 2019 02:00:05 +0200
Subject: [PATCH 03/12] Added another window from the press of the button

---
 chameleon-client/src/router.js                |  5 +++
 .../src/views/CameraViewes/ThresholdTab.vue   |  8 +++-
 chameleon-client/src/views/ColorPicker.vue    | 37 +++++++++++++++++++
 3 files changed, 49 insertions(+), 1 deletion(-)
 create mode 100644 chameleon-client/src/views/ColorPicker.vue

diff --git a/chameleon-client/src/router.js b/chameleon-client/src/router.js
index 6319584d0..4ee4809f5 100644
--- a/chameleon-client/src/router.js
+++ b/chameleon-client/src/router.js
@@ -22,6 +22,11 @@ export default new Router({
       path: '/settings',
       name: 'Settings',
       component: lazyLoad('Settings')
+    },
+    {
+      path: '/picker',
+      name: 'Picker',
+      component: lazyLoad('ColorPicker')
     }
   ]
 })
diff --git a/chameleon-client/src/views/CameraViewes/ThresholdTab.vue b/chameleon-client/src/views/CameraViewes/ThresholdTab.vue
index 9f4e2a69b..880851618 100644
--- a/chameleon-client/src/views/CameraViewes/ThresholdTab.vue
+++ b/chameleon-client/src/views/CameraViewes/ThresholdTab.vue
@@ -6,7 +6,7 @@
         <CVrangeSlider v-model="value.saturation" name="Saturation" :min="0" :max="255" @input="handleData('saturation')" :disabled="isAutomaticHSV"/>
         <CVrangeSlider v-model="value.value" name="Value" :min="0" :max="255" @input="handleData('value')" :disabled="isAutomaticHSV"/>
         <v-divider color="darkgray "/>
-        <v-btn style="margin: 20px;" tile color="#4baf62" :disabled="isManualHSV">
+        <v-btn style="margin: 20px;" tile color="#4baf62" :disabled="isManualHSV" @click="openPickerTab">
                     <v-icon>colorize</v-icon>
                     Colorpick Calibration
                 </v-btn>
@@ -19,6 +19,7 @@
 <script>
 import CVrangeSlider from '../../components/cv-range-slider'
 import CVswitch from '../../components/cv-switch'
+
     export default {
         name: 'Threshold',
         props:['value'],
@@ -49,6 +50,11 @@ import CVswitch from '../../components/cv-switch'
             },
         },
         methods:{  
+            openPickerTab()
+            {
+                console.log("opening picker tab");
+                this.$router.push("picker");
+            },
             handleData(val){
                 this.handleInput(val,this.value[val]);
                 this.$emit('update')
diff --git a/chameleon-client/src/views/ColorPicker.vue b/chameleon-client/src/views/ColorPicker.vue
new file mode 100644
index 000000000..bb46d2ac6
--- /dev/null
+++ b/chameleon-client/src/views/ColorPicker.vue
@@ -0,0 +1,37 @@
+<template>
+    <div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'ColorPicker',
+        components: {
+        },
+        methods: {
+        }
+    }
+</script>
+
+<style scoped>
+    .colsClass {
+        padding: 0 !important;
+
+    }
+
+    .videoClass {
+        text-align: center;
+    }
+
+    .videoClass img {
+        height: auto !important;
+        width: 70%;
+        vertical-align: middle;
+    }
+
+    #Point {
+        padding-top: 5px;
+        text-align: center;
+        color: #f4f4f4;
+    }
+</style>
\ No newline at end of file

From 4392ece68988b38cc538067e9f2484f401c9ddca Mon Sep 17 00:00:00 2001
From: Omer <zipory.omer@gmail.com>
Date: Tue, 26 Nov 2019 18:24:18 +0200
Subject: [PATCH 04/12] removed warning

---
 chameleon-client/src/views/CameraViewes/ThresholdTab.vue | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/chameleon-client/src/views/CameraViewes/ThresholdTab.vue b/chameleon-client/src/views/CameraViewes/ThresholdTab.vue
index 880851618..ba68cee40 100644
--- a/chameleon-client/src/views/CameraViewes/ThresholdTab.vue
+++ b/chameleon-client/src/views/CameraViewes/ThresholdTab.vue
@@ -33,9 +33,7 @@ import CVswitch from '../../components/cv-switch'
         },
         computed: {            
             isAutomaticHSV() {
-                if (typeof this.pipeline.isColorPick === "boolean") {
-                    return this.pipeline.isColorPick;
-                }
+                return this.pipeline.isColorPick;
             },
             pipeline: {
                 get() {
@@ -44,9 +42,7 @@ import CVswitch from '../../components/cv-switch'
             },
             isManualHSV()
             {
-                if (typeof this.pipeline.isColorPick === "boolean") {
-                    return !this.pipeline.isColorPick;
-                }
+                return !this.pipeline.isColorPick;
             },
         },
         methods:{  

From 7caafb8bdf067b4515f7917b18265a0ed4d8cc49 Mon Sep 17 00:00:00 2001
From: Omer <zipory.omer@gmail.com>
Date: Tue, 26 Nov 2019 18:24:45 +0200
Subject: [PATCH 05/12] Major changes to colorpicker page

---
 chameleon-client/src/views/ColorPicker.vue | 243 +++++++++++++++++++--
 1 file changed, 221 insertions(+), 22 deletions(-)

diff --git a/chameleon-client/src/views/ColorPicker.vue b/chameleon-client/src/views/ColorPicker.vue
index bb46d2ac6..097de55ca 100644
--- a/chameleon-client/src/views/ColorPicker.vue
+++ b/chameleon-client/src/views/ColorPicker.vue
@@ -1,37 +1,236 @@
 <template>
     <div>
+        <div>
+            <img id="sourceImg" ref="sourceImg" src="http://localhost:1181/stream.mjpg" style="display:none;image-rendering: pixelated;" crossorigin="Anonymous">
+            <canvas id="imageCanvas" ref="imageCanvas" style="border:1px solid #000000;"/>
+            <canvas id="zoomCanvas" ref="zoomCanvas" style="border:1px solid #000000;"/>
+            <v-btn v-on:click="fetchAndDraw" tile color="#4baf62">Fetch New Image</v-btn>
+            <v-btn v-on:click="removeSelected" tile color="#4baf62">Remove Selected</v-btn>
+            <v-btn v-on:click="createRanges" tile color="#4baf62">Create Ranges</v-btn>
+        </div>
+        <div>
+             <v-card 
+        class="mx-auto"
+        max-width="400"
+        dark
+      >
+        <v-list
+        >
+        Colors choosen:
+          <v-list-item-group
+            v-model="model"
+            :multiple="true"
+            color="indigo"
+          >
+            <v-list-item
+              v-for="i in colors.length-1"
+              :key="i"
+              :style="{'background': '#'+fullColorHex(colors[i])}"
+            >  
+              <v-list-item-content >
+                <v-list-item-title >A</v-list-item-title>
+              </v-list-item-content>             
+            </v-list-item>
+          </v-list-item-group>
+        </v-list>
+      </v-card>
+        </div>
     </div>
 </template>
-
 <script>
-    export default {
-        name: 'ColorPicker',
-        components: {
+export default {
+    name: 'ColorPicker',
+    data: function(){
+        return{
+        img:null,//the img tag, contains the mjpg stream, used to fetch the image
+        ctxI: null,//the imageCanvas's context
+        ctxZ: null,//The zoomCanvas's context
+        model: [],
+        colors: [[]],
+    };
+}
+    ,
+    components: {}
+    ,
+    methods: {
+        createRanges: function()
+        {
+            let hsv = [];
+            for(let i =1;i<this.colors.length;i++)//starting in 1 becase colors[0] is observer value or something
+                hsv.push(this.RGBtoHSV(this.colors[i]));
+            if(hsv.length>0)
+            console.log(this.createRange(hsv));
         },
-        methods: {
+
+        fetchAndDraw: function() {
+            console.log("fetching new image");
+            // make the pixel at index red  
+            //TODO set canvas width to a prestage from screen width and height
+            this.ctxI.canvas.width=this.img.width;
+            this.ctxI.canvas.height=this.img.height;            
+            this.ctxI.drawImage(this.img, 0, 0, this.img.width, this.img.height, 0, 0,this.img.width, this.img.height);
+            this.ctxZ.canvas.width=this.img.width;
+            this.ctxZ.canvas.height=this.img.height;            
+            this.ctxZ.imageSmoothingEnabled = false;//makes the zoomed in canvas pixelated and not blurry
+        },
+        //utilitie functions
+        getMousePos: function(canvas, evt) {
+            var rect = canvas.getBoundingClientRect();
+            return {
+                x: evt.clientX - rect.left,
+                y: evt.clientY - rect.top
+            };
+        },
+        
+        removeSelected: function()
+        {                    
+            for (var i = 0;i<this.model.length;i++) {
+                this.colors.splice(this.model[i]+1,1);//cuts one element off the array, this.model[i]+1 is because colors[0] is some other value observer or something
+            }
+            this.model=[];//clears out the to remove selection
+        },
+
+        //numbers is an array of 3 rgb values, returns array for 3 hsv values
+        RGBtoHSV: function(numbers) {
+            let r = numbers[0],
+                g = numbers[1],
+                b = numbers[2];
+            r = r / 255;
+            g = g / 255;
+            b = b / 255;
+            let minRGB = Math.min(r, Math.min(g, b));
+            let maxRGB = Math.max(r, Math.max(g, b));
+            let d = (r == minRGB) ? g - b : ((b == minRGB) ? r - g : b - r);
+            let h = (r == minRGB) ? 3 : ((b == minRGB) ? 1 : 5);
+            let H = 30 * (h - d / (maxRGB - minRGB));
+            let S = 255 * (maxRGB - minRGB) / maxRGB;
+            let V = 255 * maxRGB;
+            if(isNaN(H))
+                H=0;
+            if(isNaN(S))
+                S=0;
+            if(isNaN(V))
+                V=0;
+            return [Math.round(H), Math.round(S), Math.round(V)];
+        },
+
+        rgbToHex: function(rgb) {
+            var hex = Number(rgb).toString(16);
+            if (hex.length < 2) {
+                hex = "0" + hex;
+            }
+            return hex;
+        },
+
+        fullColorHex: function(color) {            
+            var red = this.rgbToHex(color[0]);
+            var green = this.rgbToHex(color[1]);
+            var blue = this.rgbToHex(color[2]);
+            return red + green + blue;
+        },
+
+        createRange: function(HSVColors)
+        {
+            let range = [];
+            for (var i = 0; i < 3; i++) {
+                range[i]=HSVColors[0][i];
+                range[i+3]=HSVColors[0][i];
+                for (var j = HSVColors.length - 1; j >= 0; j--) {
+                    range[i]=Math.min(HSVColors[j][i],range[i]);
+                    range[i+3]=Math.max(HSVColors[j][i],range[i+3]);
+                }
+                //Expanding the range by 10
+                range[i]=Math.max(0,range[i]-10);               
+                range[i+3]=Math.min(255,range[i+3]+10);
+            }
+            range[3]=Math.min(180,range[3]);//h is up to 180
+            return range;
+        },
+
+        arraysEqual: function(a,b) {
+        for(let i=0;i<a.length;i++)
+        {
+            if(!(a[i]==b[i]))
+                return false;
         }
+        return true;
+    },
     }
-</script>
+    ,
+    mounted: function() {
+        //Init function, runs once when the page loads
+        this.ctxI=this.$refs.imageCanvas.getContext("2d");
+        this.ctxZ=this.$refs.zoomCanvas.getContext("2d");
+        this.img=this.$refs.sourceImg;
 
-<style scoped>
-    .colsClass {
-        padding: 0 !important;
+        if (this.img.complete) {//calls fetchAndDraw when the image loads
+          this.fetchAndDraw();
+        } else {
+          this.img.addEventListener('load', this.fetchAndDraw);
+        }
+
+        let a = this;   //inside the event lambda there is no access to 'this',use a instead
+        //probably not very smart to do it this way
+
+        //Listener of mouse movment over imageCanvas
+        this.ctxI.canvas.addEventListener('mousemove', function(evt) {
+            let mousePos = a.getMousePos(a.ctxI.canvas, evt);//Gets mouse pos
+            a.ctxZ.clearRect(0, 0, a.ctxZ.canvas.width, a.ctxZ.canvas.height);//clears the canvas
+            var scale = 10;//How much to zoom in
+            a.ctxZ.drawImage(a.img, mousePos.x - a.img.width / (2 * scale), mousePos.y - a.img.height / (2 * scale), a.img.width / scale, a.img.height / scale, 0, 0, a.ctxZ.canvas.width, a.ctxZ.canvas.height);//draws the image from the imageCanvas
+            
+            //Cosshair
+            var x = a.ctxZ.canvas.width / 2;
+            var y = a.ctxZ.canvas.height / 2;
+
+            a.ctxZ.moveTo(x, y);
+            a.ctxZ.lineTo(x, y + scale);
+            a.ctxZ.lineTo(x + scale, y + scale);
+            a.ctxZ.lineTo(x + scale, y);
+            a.ctxZ.lineTo(x, y);
+            // Line color
+            a.ctxZ.strokeStyle = '#DB14C1';
+            a.ctxZ.stroke();
+        });
+        this.ctxI.canvas.addEventListener('click', function(e) {
+            let pos = a.getMousePos(a.ctxI.canvas, e);
+            let data = a.ctxI.getImageData(pos.x, pos.y, 1, 1).data;
+            console.log('%c HSV:' + a.RGBtoHSV(data), 'background: #' + a.fullColorHex(data) + ';');
+            // let hsv = a.RGBtoHSV(data)
+            let exists = false;
+            for (var i = 1; i < a.colors.length&&!exists; i++) {
+                if(a.arraysEqual(a.colors[i],data))
+                {
+                    exists=true;
+                }
+            }
+            if(!exists)
+                a.colors.push(data);
+            
+        });
 
     }
+    ,
+}
 
-    .videoClass {
-        text-align: center;
-    }
+</script> <style scoped> .colsClass {
+    padding: 0 !important;
+}
 
-    .videoClass img {
-        height: auto !important;
-        width: 70%;
-        vertical-align: middle;
-    }
+.videoClass {
+    text-align: center;
+}
+
+.videoClass img {
+    height: auto !important;
+    width: 70%;
+    vertical-align: middle;
+}
+
+#Point {
+    padding-top: 5px;
+    text-align: center;
+    color: #f4f4f4;
+}
 
-    #Point {
-        padding-top: 5px;
-        text-align: center;
-        color: #f4f4f4;
-    }
 </style>
\ No newline at end of file

From 2c4649a3be2ad683f886d507ce53f055561c22b2 Mon Sep 17 00:00:00 2001
From: Omer <zipory.omer@gmail.com>
Date: Wed, 27 Nov 2019 22:02:45 +0200
Subject: [PATCH 06/12] Major changes to threshold tab

---
 chameleon-client/src/store.js                 |   1 -
 chameleon-client/src/views/Camera.vue         |   2 +-
 .../src/views/CameraViewes/ThresholdTab.vue   | 227 ++++++++++++++++--
 3 files changed, 207 insertions(+), 23 deletions(-)

diff --git a/chameleon-client/src/store.js b/chameleon-client/src/store.js
index a5d291e36..1a7a45987 100644
--- a/chameleon-client/src/store.js
+++ b/chameleon-client/src/store.js
@@ -21,7 +21,6 @@ export default new Vuex.Store({
             exposure: 0,
             brightness: 0,
             orientation: 0,
-            isColorPick: false,
             hue: [0, 15],
             saturation: [0, 15],
             value: [0, 25],
diff --git a/chameleon-client/src/views/Camera.vue b/chameleon-client/src/views/Camera.vue
index 04011a568..6d58c1fb7 100644
--- a/chameleon-client/src/views/Camera.vue
+++ b/chameleon-client/src/views/Camera.vue
@@ -100,7 +100,7 @@
                     </v-tabs>
                     <!-- camera image stream -->
                     <div class="videoClass">
-                        <img v-if="cameraList.length > 0" :src="streamAddress">
+                        <img id="CameraStream" v-if="cameraList.length > 0" :src="streamAddress" crossorigin="Anonymous"/>
                         <span v-else>No Cameras Are connected</span>
                         <h5 id="Point">{{point}}</h5>
                     </div>
diff --git a/chameleon-client/src/views/CameraViewes/ThresholdTab.vue b/chameleon-client/src/views/CameraViewes/ThresholdTab.vue
index ba68cee40..275aca01d 100644
--- a/chameleon-client/src/views/CameraViewes/ThresholdTab.vue
+++ b/chameleon-client/src/views/CameraViewes/ThresholdTab.vue
@@ -1,18 +1,26 @@
 <template>
-    <div>        
-        <CVswitch v-model="value.isColorPick" name="Colorpick Calibration"/>
+    <div v-on:camera-loaded="init">  
+        <CVrangeSlider v-model="value.hue" name="Hue" :min="0" :max="180" @input="handleData('hue')"/>
+        <CVrangeSlider v-model="value.saturation" name="Saturation" :min="0" :max="255" @input="handleData('saturation')"/>
+        <CVrangeSlider v-model="value.value" name="Value" :min="0" :max="255" @input="handleData('value')"/>
         <v-divider color="darkgray "/>
-        <CVrangeSlider v-model="value.hue" name="Hue" :min="0" :max="180" @input="handleData('hue')" :disabled="isAutomaticHSV"/>
-        <CVrangeSlider v-model="value.saturation" name="Saturation" :min="0" :max="255" @input="handleData('saturation')" :disabled="isAutomaticHSV"/>
-        <CVrangeSlider v-model="value.value" name="Value" :min="0" :max="255" @input="handleData('value')" :disabled="isAutomaticHSV"/>
-        <v-divider color="darkgray "/>
-        <v-btn style="margin: 20px;" tile color="#4baf62" :disabled="isManualHSV" @click="openPickerTab">
+        <v-btn style="margin: 20px;" tile color="#4baf62" @click="setMode(1)">
                     <v-icon>colorize</v-icon>
-                    Colorpick Calibration
+                    Eye drop
                 </v-btn>
+        <v-btn style="margin: 20px;" tile color="#4baf62" @click="setMode(2)">
+                <v-icon>add</v-icon>
+                Expand Selection
+                </v-btn>
+        <v-btn style="margin: 20px;" tile color="#4baf62" @click="setMode(3)">
+            <v-icon>remove</v-icon>
+            Shrink Selection
+        </v-btn>
+        <!-- <CVswitch v-model="driverState.isDriver" name="Driver Mode" @input="sendDriverMode"/> -->
         <v-divider color="darkgray "/>
         <CVswitch v-model="value.erode" name="Erode" @input="handleData('erode')"/>
         <CVswitch v-model="value.dilate" name="Dilate" @input="handleData('dilate')"/>
+        <canvas id="canvas" style="display:none;" />
     </div>
 </template>
 
@@ -29,34 +37,211 @@ import CVswitch from '../../components/cv-switch'
         },
         data() {
             return {
+                mode:0,//0 none,1 eyedrop, 2 expand,3 shrink                
             }
         },
-        computed: {            
-            isAutomaticHSV() {
-                return this.pipeline.isColorPick;
-            },
+        computed: {  
             pipeline: {
                 get() {
                     return this.$store.state.pipeline;
                 }
-            },
-            isManualHSV()
-            {
-                return !this.pipeline.isColorPick;
-            },
+            },   
+            driverState: {
+                get() {
+                    return this.$store.state.driverMode;
+                },
+                set(val) {
+                    this.$store.commit("driverMode", val);
+                }
+            }    
         },
         methods:{  
-            openPickerTab()
+            init()
             {
-                console.log("opening picker tab");
-                this.$router.push("picker");
+                console.log("init");
+                let img = document.getElementById('CameraStream');
+                img.crossOrigin = 'Anonymous';
+                img.setAttribute('crossOrigin', '');
+                let x,y;
+                let ref = this;
+                img.addEventListener('click', function (evt) {
+                        let rect = img.getBoundingClientRect();
+                        x = Math.round(evt.clientX - rect.left);
+                        y = Math.round(evt.clientY - rect.top);
+                        let canvas = document.getElementById('canvas');
+                        canvas.width = img.width;
+                        canvas.height = img.height;
+                        canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);
+                        let pixelData = canvas.getContext('2d').getImageData(x, y, 1, 1).data;//Creating a canvas to get the pixel color, i wish there was a better way to do it
+                        switch (ref.mode)
+                        {
+                            case 1: ref.eyeDrop(pixelData);break;
+                            case 2: ref.expand(pixelData);break;
+                            case 3: ref.shrink(pixelData);break;
+                        }
+                    });
+            },                  
+            eyeDrop(pixel) {
+                console.log("eye droppping on "+pixel);
+                let hsv = this.RGBtoHSV(pixel);
+                let range = this.createRange([hsv]);  
+                range = this.widenRange(range);
+                this.setRange(range);
+                this.setMode(0);
+            },
+            expand(pixel) {
+                console.log("expanding on "+pixel);
+                let hsv = this.RGBtoHSV(pixel);
+                let widenHSV = this.widenRange([[].concat(hsv),hsv]);
+                let range = this.createRange(this.getRange().concat(widenHSV));
+                this.setRange(range);
+                this.setMode(0);
+            },
+            shrink(pixel) {
+                let hsv = this.RGBtoHSV(pixel);
+                let widenHSV = this.widenRange([[].concat(hsv),hsv]);
+                let range = this.getRange();
+                if(!this.shrinkRange(range,widenHSV[0]))
+                    this.shrinkRange(range,widenHSV[1]);
+                console.log(range);
+                this.setRange(range);
+                this.setMode(0);
+            },
+            //Sets driver mode on when m is not zero (aka while choosing a color)
+            setMode: function(m)
+            {
+                this.mode=m;
+                this.driverState.isDriver=(m!==0);
+                this.handleInput('driverMode', this.driverState);
+                this.$emit("update");
+            },
+
+            //----------------------------------------------
+            //Color utils
+            //numbers is an array of 3 rgb values, returns array for 3 hsv values
+            RGBtoHSV: function(numbers) {
+                let r = numbers[0],
+                    g = numbers[1],
+                    b = numbers[2];
+                r = r / 255;
+                g = g / 255;
+                b = b / 255;
+                let minRGB = Math.min(r, Math.min(g, b));
+                let maxRGB = Math.max(r, Math.max(g, b));
+                let d = (r == minRGB) ? g - b : ((b == minRGB) ? r - g : b - r);
+                let h = (r == minRGB) ? 3 : ((b == minRGB) ? 1 : 5);
+                let H = 30 * (h - d / (maxRGB - minRGB));
+                let S = 255 * (maxRGB - minRGB) / maxRGB;
+                let V = 255 * maxRGB;
+                if(isNaN(H))
+                    H=0;
+                if(isNaN(S))
+                    S=0;
+                if(isNaN(V))
+                    V=0;
+                return [Math.round(H), Math.round(S), Math.round(V)];
+            },
+
+            rgbToHex: function(rgb) {
+                var hex = Number(rgb).toString(16);
+                if (hex.length < 2) {
+                    hex = "0" + hex;
+                }
+                return hex;
+            },
+
+            fullColorHex: function(color) {            
+                var red = this.rgbToHex(color[0]);
+                var green = this.rgbToHex(color[1]);
+                var blue = this.rgbToHex(color[2]);
+                return red + green + blue;
+            },
+
+            //----------------------------------------------
+            //Range utils
+
+            createRange: function(HSVColors)
+            {
+                let range = [[],[]];
+                for (var i = 0; i < 3; i++) {
+                    range[0][i]=HSVColors[0][i];
+                    range[1][i]=HSVColors[0][i];
+                    for (var j = HSVColors.length - 1; j >= 0; j--) {
+                        range[0][i]=Math.min(HSVColors[j][i],range[0][i]);
+                        range[1][i]=Math.max(HSVColors[j][i],range[1][i]);
+                    }
+                }
+                return range;//[[Hmin,Smin,Vmin],[Hmax,Smax,Vmax]]
+            },
+
+            //This function adds 10 extra units to each side of the sliders, not to be confued with the expand selection button
+            widenRange(range)
+            {
+                let expanded = [[],[]]
+                for (var i = 0; i < 3; i++) {
+                    //Expanding the range by 10
+                    expanded[0][i]=Math.max(0, range[0][i]-10);               
+                    expanded[1][i]=Math.min(255, range[1][i]+10);
+                }
+                expanded[1][0]=Math.min(180,expanded[1][0]);//h is up to 180
+                return expanded;
+            },
+
+            //If color in range then take the closer range value to color and set it to color plus or minus 10
+            //For example if hmax is 200 hmin is 100 and color's h is 120 range will become [130,200]
+            shrinkRange(range,color)
+            {
+                let inside = true;
+                for(let i =0;i<color.length&&inside;i++)
+                {
+                    if(!(range[0][i]<=color[i]<=range[1][i]))
+                        inside=false;
+                }                
+                if(inside)
+                {
+                    for(let j =0;j<color.length;j++){
+                        if(color[j]-range[0][j]<range[1][j]-color[j])
+                            range[0][j]=Math.min(range[0][j]+10,range[1][j])//shrink from min side
+                        else
+                            range[1][j]=Math.max(range[1][j]-10,range[0][j])//shrink from max side
+                        
+                    }
+                }
+                console.log("range"+range);  
+                return inside;//returns if color is inside or not
+            },
+
+            //applies the range to store
+            setRange(range)
+            {
+                this.value.hue = [range[0][0],range[1][0]];
+                this.handleData('hue');
+                this.value.saturation = [range[0][1],range[1][1]];
+                this.handleData('saturation');
+                this.value.value = [range[0][2],range[1][2]];                
+                this.handleData('value');
+            },
+
+            //returns the current range in format [[Hmin,Smin,Vmin],[Hmax,Smax,Vmax]]
+            getRange(){
+                let a= this.value;
+                return [[a.hue[0],a.saturation[0],a.value[0]],[a.hue[1],a.saturation[1],a.value[1]]];
             },
             handleData(val){
                 this.handleInput(val,this.value[val]);
                 this.$emit('update')
-            }
+            },     
+        },
+        mounted: function()
+        {            
+            let a = this.init;
+            window.onload = function() {
+            if(document.getElementById('CameraStream'))
+              a();//this.init();
         }
     }
+}
+
 </script>
 
 <style lang="" scoped>

From fd71767b445f79f01c702c4d63176c5ce82edc52 Mon Sep 17 00:00:00 2001
From: Omer <zipory.omer@gmail.com>
Date: Wed, 27 Nov 2019 22:03:44 +0200
Subject: [PATCH 07/12] fix for BGR not RGB

---
 .../main/java/com/chameleonvision/vision/process/CVProcess.java | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Main/src/main/java/com/chameleonvision/vision/process/CVProcess.java b/Main/src/main/java/com/chameleonvision/vision/process/CVProcess.java
index 51256291a..13f3faf0c 100644
--- a/Main/src/main/java/com/chameleonvision/vision/process/CVProcess.java
+++ b/Main/src/main/java/com/chameleonvision/vision/process/CVProcess.java
@@ -35,7 +35,7 @@ public class CVProcess {
     }
 
     void hsvThreshold(Mat srcImage, Mat dst, @NotNull Scalar hsvLower, @NotNull Scalar hsvUpper, boolean shouldErode, boolean shouldDilate) {
-        Imgproc.cvtColor(srcImage, hsvImage, Imgproc.COLOR_RGB2HSV, 3);
+        Imgproc.cvtColor(srcImage, hsvImage, Imgproc.COLOR_BGR2HSV, 3);
         Imgproc.blur(hsvImage, hsvImage, blur);
         Core.inRange(hsvImage, hsvLower, hsvUpper, dst);
         if (shouldErode) {

From 92aed5696f72e30ad24a0a2feee416920bbcead3 Mon Sep 17 00:00:00 2001
From: Omer <zipory.omer@gmail.com>
Date: Wed, 27 Nov 2019 22:04:45 +0200
Subject: [PATCH 08/12] Reverted changes of colorpicker.vue

---
 chameleon-client/src/router.js             |   5 -
 chameleon-client/src/views/ColorPicker.vue | 236 ---------------------
 2 files changed, 241 deletions(-)
 delete mode 100644 chameleon-client/src/views/ColorPicker.vue

diff --git a/chameleon-client/src/router.js b/chameleon-client/src/router.js
index 4ee4809f5..5d2d5e633 100644
--- a/chameleon-client/src/router.js
+++ b/chameleon-client/src/router.js
@@ -23,10 +23,5 @@ export default new Router({
       name: 'Settings',
       component: lazyLoad('Settings')
     },
-    {
-      path: '/picker',
-      name: 'Picker',
-      component: lazyLoad('ColorPicker')
-    }
   ]
 })
diff --git a/chameleon-client/src/views/ColorPicker.vue b/chameleon-client/src/views/ColorPicker.vue
deleted file mode 100644
index 097de55ca..000000000
--- a/chameleon-client/src/views/ColorPicker.vue
+++ /dev/null
@@ -1,236 +0,0 @@
-<template>
-    <div>
-        <div>
-            <img id="sourceImg" ref="sourceImg" src="http://localhost:1181/stream.mjpg" style="display:none;image-rendering: pixelated;" crossorigin="Anonymous">
-            <canvas id="imageCanvas" ref="imageCanvas" style="border:1px solid #000000;"/>
-            <canvas id="zoomCanvas" ref="zoomCanvas" style="border:1px solid #000000;"/>
-            <v-btn v-on:click="fetchAndDraw" tile color="#4baf62">Fetch New Image</v-btn>
-            <v-btn v-on:click="removeSelected" tile color="#4baf62">Remove Selected</v-btn>
-            <v-btn v-on:click="createRanges" tile color="#4baf62">Create Ranges</v-btn>
-        </div>
-        <div>
-             <v-card 
-        class="mx-auto"
-        max-width="400"
-        dark
-      >
-        <v-list
-        >
-        Colors choosen:
-          <v-list-item-group
-            v-model="model"
-            :multiple="true"
-            color="indigo"
-          >
-            <v-list-item
-              v-for="i in colors.length-1"
-              :key="i"
-              :style="{'background': '#'+fullColorHex(colors[i])}"
-            >  
-              <v-list-item-content >
-                <v-list-item-title >A</v-list-item-title>
-              </v-list-item-content>             
-            </v-list-item>
-          </v-list-item-group>
-        </v-list>
-      </v-card>
-        </div>
-    </div>
-</template>
-<script>
-export default {
-    name: 'ColorPicker',
-    data: function(){
-        return{
-        img:null,//the img tag, contains the mjpg stream, used to fetch the image
-        ctxI: null,//the imageCanvas's context
-        ctxZ: null,//The zoomCanvas's context
-        model: [],
-        colors: [[]],
-    };
-}
-    ,
-    components: {}
-    ,
-    methods: {
-        createRanges: function()
-        {
-            let hsv = [];
-            for(let i =1;i<this.colors.length;i++)//starting in 1 becase colors[0] is observer value or something
-                hsv.push(this.RGBtoHSV(this.colors[i]));
-            if(hsv.length>0)
-            console.log(this.createRange(hsv));
-        },
-
-        fetchAndDraw: function() {
-            console.log("fetching new image");
-            // make the pixel at index red  
-            //TODO set canvas width to a prestage from screen width and height
-            this.ctxI.canvas.width=this.img.width;
-            this.ctxI.canvas.height=this.img.height;            
-            this.ctxI.drawImage(this.img, 0, 0, this.img.width, this.img.height, 0, 0,this.img.width, this.img.height);
-            this.ctxZ.canvas.width=this.img.width;
-            this.ctxZ.canvas.height=this.img.height;            
-            this.ctxZ.imageSmoothingEnabled = false;//makes the zoomed in canvas pixelated and not blurry
-        },
-        //utilitie functions
-        getMousePos: function(canvas, evt) {
-            var rect = canvas.getBoundingClientRect();
-            return {
-                x: evt.clientX - rect.left,
-                y: evt.clientY - rect.top
-            };
-        },
-        
-        removeSelected: function()
-        {                    
-            for (var i = 0;i<this.model.length;i++) {
-                this.colors.splice(this.model[i]+1,1);//cuts one element off the array, this.model[i]+1 is because colors[0] is some other value observer or something
-            }
-            this.model=[];//clears out the to remove selection
-        },
-
-        //numbers is an array of 3 rgb values, returns array for 3 hsv values
-        RGBtoHSV: function(numbers) {
-            let r = numbers[0],
-                g = numbers[1],
-                b = numbers[2];
-            r = r / 255;
-            g = g / 255;
-            b = b / 255;
-            let minRGB = Math.min(r, Math.min(g, b));
-            let maxRGB = Math.max(r, Math.max(g, b));
-            let d = (r == minRGB) ? g - b : ((b == minRGB) ? r - g : b - r);
-            let h = (r == minRGB) ? 3 : ((b == minRGB) ? 1 : 5);
-            let H = 30 * (h - d / (maxRGB - minRGB));
-            let S = 255 * (maxRGB - minRGB) / maxRGB;
-            let V = 255 * maxRGB;
-            if(isNaN(H))
-                H=0;
-            if(isNaN(S))
-                S=0;
-            if(isNaN(V))
-                V=0;
-            return [Math.round(H), Math.round(S), Math.round(V)];
-        },
-
-        rgbToHex: function(rgb) {
-            var hex = Number(rgb).toString(16);
-            if (hex.length < 2) {
-                hex = "0" + hex;
-            }
-            return hex;
-        },
-
-        fullColorHex: function(color) {            
-            var red = this.rgbToHex(color[0]);
-            var green = this.rgbToHex(color[1]);
-            var blue = this.rgbToHex(color[2]);
-            return red + green + blue;
-        },
-
-        createRange: function(HSVColors)
-        {
-            let range = [];
-            for (var i = 0; i < 3; i++) {
-                range[i]=HSVColors[0][i];
-                range[i+3]=HSVColors[0][i];
-                for (var j = HSVColors.length - 1; j >= 0; j--) {
-                    range[i]=Math.min(HSVColors[j][i],range[i]);
-                    range[i+3]=Math.max(HSVColors[j][i],range[i+3]);
-                }
-                //Expanding the range by 10
-                range[i]=Math.max(0,range[i]-10);               
-                range[i+3]=Math.min(255,range[i+3]+10);
-            }
-            range[3]=Math.min(180,range[3]);//h is up to 180
-            return range;
-        },
-
-        arraysEqual: function(a,b) {
-        for(let i=0;i<a.length;i++)
-        {
-            if(!(a[i]==b[i]))
-                return false;
-        }
-        return true;
-    },
-    }
-    ,
-    mounted: function() {
-        //Init function, runs once when the page loads
-        this.ctxI=this.$refs.imageCanvas.getContext("2d");
-        this.ctxZ=this.$refs.zoomCanvas.getContext("2d");
-        this.img=this.$refs.sourceImg;
-
-        if (this.img.complete) {//calls fetchAndDraw when the image loads
-          this.fetchAndDraw();
-        } else {
-          this.img.addEventListener('load', this.fetchAndDraw);
-        }
-
-        let a = this;   //inside the event lambda there is no access to 'this',use a instead
-        //probably not very smart to do it this way
-
-        //Listener of mouse movment over imageCanvas
-        this.ctxI.canvas.addEventListener('mousemove', function(evt) {
-            let mousePos = a.getMousePos(a.ctxI.canvas, evt);//Gets mouse pos
-            a.ctxZ.clearRect(0, 0, a.ctxZ.canvas.width, a.ctxZ.canvas.height);//clears the canvas
-            var scale = 10;//How much to zoom in
-            a.ctxZ.drawImage(a.img, mousePos.x - a.img.width / (2 * scale), mousePos.y - a.img.height / (2 * scale), a.img.width / scale, a.img.height / scale, 0, 0, a.ctxZ.canvas.width, a.ctxZ.canvas.height);//draws the image from the imageCanvas
-            
-            //Cosshair
-            var x = a.ctxZ.canvas.width / 2;
-            var y = a.ctxZ.canvas.height / 2;
-
-            a.ctxZ.moveTo(x, y);
-            a.ctxZ.lineTo(x, y + scale);
-            a.ctxZ.lineTo(x + scale, y + scale);
-            a.ctxZ.lineTo(x + scale, y);
-            a.ctxZ.lineTo(x, y);
-            // Line color
-            a.ctxZ.strokeStyle = '#DB14C1';
-            a.ctxZ.stroke();
-        });
-        this.ctxI.canvas.addEventListener('click', function(e) {
-            let pos = a.getMousePos(a.ctxI.canvas, e);
-            let data = a.ctxI.getImageData(pos.x, pos.y, 1, 1).data;
-            console.log('%c HSV:' + a.RGBtoHSV(data), 'background: #' + a.fullColorHex(data) + ';');
-            // let hsv = a.RGBtoHSV(data)
-            let exists = false;
-            for (var i = 1; i < a.colors.length&&!exists; i++) {
-                if(a.arraysEqual(a.colors[i],data))
-                {
-                    exists=true;
-                }
-            }
-            if(!exists)
-                a.colors.push(data);
-            
-        });
-
-    }
-    ,
-}
-
-</script> <style scoped> .colsClass {
-    padding: 0 !important;
-}
-
-.videoClass {
-    text-align: center;
-}
-
-.videoClass img {
-    height: auto !important;
-    width: 70%;
-    vertical-align: middle;
-}
-
-#Point {
-    padding-top: 5px;
-    text-align: center;
-    color: #f4f4f4;
-}
-
-</style>
\ No newline at end of file

From b4e4f7b57ce7f3efd8134d2178dbc7b1348be7a3 Mon Sep 17 00:00:00 2001
From: ori agranat <oriagranat9@gmail.com>
Date: Tue, 3 Dec 2019 00:28:36 +0200
Subject: [PATCH 09/12] finished color picker in the ui

---
 Main/chameleon-vision.iml                     |  65 -----
 chameleon-client/src/plugins/ColorPicker.js   | 113 ++++++++
 chameleon-client/src/views/Camera.vue         |   7 +-
 .../src/views/CameraViewes/ThresholdTab.vue   | 269 +++++-------------
 4 files changed, 186 insertions(+), 268 deletions(-)
 delete mode 100644 Main/chameleon-vision.iml
 create mode 100644 chameleon-client/src/plugins/ColorPicker.js

diff --git a/Main/chameleon-vision.iml b/Main/chameleon-vision.iml
deleted file mode 100644
index bb72d8934..000000000
--- a/Main/chameleon-vision.iml
+++ /dev/null
@@ -1,65 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<module org.jetbrains.idea.maven.project.MavenProjectsManager.isMavenModule="true" type="JAVA_MODULE" version="4">
-  <component name="NewModuleRootManager" LANGUAGE_LEVEL="JDK_12">
-    <output url="file://$MODULE_DIR$/target/classes" />
-    <output-test url="file://$MODULE_DIR$/target/test-classes" />
-    <content url="file://$MODULE_DIR$">
-      <sourceFolder url="file://$MODULE_DIR$/src/main/java" isTestSource="false" />
-      <sourceFolder url="file://$MODULE_DIR$/src/main/resources" type="java-resource" />
-      <excludeFolder url="file://$MODULE_DIR$/target" />
-    </content>
-    <orderEntry type="inheritedJdk" />
-    <orderEntry type="sourceFolder" forTests="false" />
-    <orderEntry type="library" name="Maven: io.javalin:javalin:3.4.1" level="project" />
-    <orderEntry type="library" name="Maven: org.jetbrains.kotlin:kotlin-stdlib-jdk8:1.3.31" level="project" />
-    <orderEntry type="library" name="Maven: org.jetbrains.kotlin:kotlin-stdlib:1.3.31" level="project" />
-    <orderEntry type="library" name="Maven: org.jetbrains.kotlin:kotlin-stdlib-common:1.3.31" level="project" />
-    <orderEntry type="library" name="Maven: org.jetbrains:annotations:13.0" level="project" />
-    <orderEntry type="library" name="Maven: org.jetbrains.kotlin:kotlin-stdlib-jdk7:1.3.31" level="project" />
-    <orderEntry type="library" name="Maven: org.slf4j:slf4j-api:1.7.26" level="project" />
-    <orderEntry type="library" name="Maven: org.eclipse.jetty:jetty-server:9.4.19.v20190610" level="project" />
-    <orderEntry type="library" name="Maven: javax.servlet:javax.servlet-api:3.1.0" level="project" />
-    <orderEntry type="library" name="Maven: org.eclipse.jetty:jetty-http:9.4.19.v20190610" level="project" />
-    <orderEntry type="library" name="Maven: org.eclipse.jetty:jetty-util:9.4.19.v20190610" level="project" />
-    <orderEntry type="library" name="Maven: org.eclipse.jetty:jetty-io:9.4.19.v20190610" level="project" />
-    <orderEntry type="library" name="Maven: org.eclipse.jetty:jetty-webapp:9.4.19.v20190610" level="project" />
-    <orderEntry type="library" name="Maven: org.eclipse.jetty:jetty-xml:9.4.19.v20190610" level="project" />
-    <orderEntry type="library" name="Maven: org.eclipse.jetty:jetty-servlet:9.4.19.v20190610" level="project" />
-    <orderEntry type="library" name="Maven: org.eclipse.jetty:jetty-security:9.4.19.v20190610" level="project" />
-    <orderEntry type="library" name="Maven: org.eclipse.jetty.websocket:websocket-server:9.4.19.v20190610" level="project" />
-    <orderEntry type="library" name="Maven: org.eclipse.jetty.websocket:websocket-common:9.4.19.v20190610" level="project" />
-    <orderEntry type="library" name="Maven: org.eclipse.jetty.websocket:websocket-api:9.4.19.v20190610" level="project" />
-    <orderEntry type="library" name="Maven: org.eclipse.jetty.websocket:websocket-client:9.4.19.v20190610" level="project" />
-    <orderEntry type="library" name="Maven: org.eclipse.jetty:jetty-client:9.4.19.v20190610" level="project" />
-    <orderEntry type="library" name="Maven: org.eclipse.jetty.websocket:websocket-servlet:9.4.19.v20190610" level="project" />
-    <orderEntry type="library" name="Maven: org.json:json:20190722" level="project" />
-    <orderEntry type="library" name="Maven: org.slf4j:slf4j-nop:1.7.26" level="project" />
-    <orderEntry type="library" name="Maven: org.apache.commons:commons-math3:3.6.1" level="project" />
-    <orderEntry type="library" name="Maven: com.google.code.gson:gson:2.8.5" level="project" />
-    <orderEntry type="library" name="Maven: org.msgpack:msgpack-core:0.8.18" level="project" />
-    <orderEntry type="library" name="Maven: org.msgpack:jackson-dataformat-msgpack:0.8.18" level="project" />
-    <orderEntry type="library" name="Maven: org.apache.commons:commons-lang3:3.9" level="project" />
-    <orderEntry type="library" name="Maven: com.fasterxml.jackson.core:jackson-databind:2.10.0.pr1" level="project" />
-    <orderEntry type="library" name="Maven: com.fasterxml.jackson.core:jackson-annotations:2.10.0.pr1" level="project" />
-    <orderEntry type="library" name="Maven: com.fasterxml.jackson.core:jackson-core:2.10.0.pr1" level="project" />
-    <orderEntry type="library" name="Maven: edu.wpi.first.cscore:cscore-java:2019.4.1-213-g56d782b" level="project" />
-    <orderEntry type="library" name="Maven: edu.wpi.first.cscore:cscore-jni:linuxaarch64bionic:2019.4.1-213-g56d782b" level="project" />
-    <orderEntry type="library" name="Maven: edu.wpi.first.cscore:cscore-jni:linuxraspbian:2019.4.1-213-g56d782b" level="project" />
-    <orderEntry type="library" name="Maven: edu.wpi.first.cscore:cscore-jni:linuxx86-64:2019.4.1-213-g56d782b" level="project" />
-    <orderEntry type="library" name="Maven: edu.wpi.first.cscore:cscore-jni:osxx86-64:2019.4.1-213-g56d782b" level="project" />
-    <orderEntry type="library" name="Maven: edu.wpi.first.cscore:cscore-jni:windowsx86-64:2019.4.1-213-g56d782b" level="project" />
-    <orderEntry type="library" name="Maven: edu.wpi.first.cameraserver:cameraserver-java:2019.4.1-213-g56d782b" level="project" />
-    <orderEntry type="library" name="Maven: edu.wpi.first.ntcore:ntcore-java:2019.4.1-213-g56d782b" level="project" />
-    <orderEntry type="library" name="Maven: edu.wpi.first.ntcore:ntcore-jni:osxx86-64:2019.4.1-213-g56d782b" level="project" />
-    <orderEntry type="library" name="Maven: edu.wpi.first.ntcore:ntcore-jni:linuxraspbian:2019.4.1-213-g56d782b" level="project" />
-    <orderEntry type="library" name="Maven: edu.wpi.first.ntcore:ntcore-jni:linuxx86-64:2019.4.1-213-g56d782b" level="project" />
-    <orderEntry type="library" name="Maven: edu.wpi.first.ntcore:ntcore-jni:windowsx86-64:2019.4.1-213-g56d782b" level="project" />
-    <orderEntry type="library" name="Maven: edu.wpi.first.wpiutil:wpiutil-java:2019.4.1-213-g56d782b" level="project" />
-    <orderEntry type="library" name="Maven: edu.wpi.first.thirdparty.frc2020.opencv:opencv-java:3.4.7-1" level="project" />
-    <orderEntry type="library" name="Maven: edu.wpi.first.thirdparty.frc2020.opencv:opencv-jni:linuxaarch64bionic:3.4.7-1" level="project" />
-    <orderEntry type="library" name="Maven: edu.wpi.first.thirdparty.frc2020.opencv:opencv-jni:linuxraspbian:3.4.7-1" level="project" />
-    <orderEntry type="library" name="Maven: edu.wpi.first.thirdparty.frc2020.opencv:opencv-jni:linuxx86-64:3.4.7-1" level="project" />
-    <orderEntry type="library" name="Maven: edu.wpi.first.thirdparty.frc2020.opencv:opencv-jni:osxx86-64:3.4.7-1" level="project" />
-    <orderEntry type="library" name="Maven: edu.wpi.first.thirdparty.frc2020.opencv:opencv-jni:windowsx86-64:3.4.7-1" level="project" />
-  </component>
-</module>
\ No newline at end of file
diff --git a/chameleon-client/src/plugins/ColorPicker.js b/chameleon-client/src/plugins/ColorPicker.js
new file mode 100644
index 000000000..061b2fb04
--- /dev/null
+++ b/chameleon-client/src/plugins/ColorPicker.js
@@ -0,0 +1,113 @@
+var canvas = undefined;
+var image = undefined;
+
+function initColorPicker() {
+    canvas = document.createElement('canvas');
+    image = document.getElementById('CameraStream');
+    canvas.width = image.width;
+    canvas.height = image.height;
+}
+
+function colorPickerClick(event, currentFunction, currentRange) {
+    let rect = image.getBoundingClientRect();
+    let x = Math.round(event.clientX - rect.left);
+    let y = Math.round(event.clientY - rect.top);
+    let context = canvas.getContext('2d');
+    context.drawImage(image, 0, 0, image.width, image.height);
+    let pixelData = context.getImageData(x, y, 1, 1).data;
+    if (currentFunction !== undefined) {
+        return currentFunction(pixelData, currentRange);
+    }
+}
+
+
+function eyeDrop(pixel) {
+    let hsv = RGBtoHSV(pixel);
+    let range = createRange([hsv]);
+    range = widenRange(range);
+    return range
+}
+
+function expand(pixel, currentRange) {
+
+    let hsv = RGBtoHSV(pixel);
+    let widenHSV = widenRange([[].concat(hsv), hsv]);
+    return createRange(currentRange.concat(widenHSV));
+}
+
+function shrink(pixel, currentRange) {
+    let hsv = RGBtoHSV(pixel);
+    let widenHSV = widenRange([[].concat(hsv), hsv]);
+
+    if (!shrinkRange(currentRange, widenHSV[0]))
+        shrinkRange(currentRange, widenHSV[1]);
+    return currentRange
+}
+
+function RGBtoHSV(numbers) {
+    let r = numbers[0],
+        g = numbers[1],
+        b = numbers[2];
+    r = r / 255;
+    g = g / 255;
+    b = b / 255;
+    let minRGB = Math.min(r, Math.min(g, b));
+    let maxRGB = Math.max(r, Math.max(g, b));
+    let d = (r === minRGB) ? g - b : ((b === minRGB) ? r - g : b - r);
+    let h = (r === minRGB) ? 3 : ((b === minRGB) ? 1 : 5);
+    let H = 30 * (h - d / (maxRGB - minRGB));
+    let S = 255 * (maxRGB - minRGB) / maxRGB;
+    let V = 255 * maxRGB;
+    if (isNaN(H))
+        H = 0;
+    if (isNaN(S))
+        S = 0;
+    if (isNaN(V))
+        V = 0;
+    return [Math.round(H), Math.round(S), Math.round(V)];
+}
+
+function createRange(HSVColors) {
+    let range = [[], []];
+    for (var i = 0; i < 3; i++) {
+        range[0][i] = HSVColors[0][i];
+        range[1][i] = HSVColors[0][i];
+        for (var j = HSVColors.length - 1; j >= 0; j--) {
+            range[0][i] = Math.min(HSVColors[j][i], range[0][i]);
+            range[1][i] = Math.max(HSVColors[j][i], range[1][i]);
+        }
+    }
+    return range;//[[Hmin,Smin,Vmin],[Hmax,Smax,Vmax]]
+}
+
+function widenRange(range) {
+    let expanded = [[], []];
+    for (let i = 0; i < 3; i++) {
+        //Expanding the range by 10
+        expanded[0][i] = Math.max(0, range[0][i] - 10);
+        expanded[1][i] = Math.min(255, range[1][i] + 10);
+    }
+    expanded[1][0] = Math.min(180, expanded[1][0]);//h is up to 180
+    return expanded;
+}
+
+function shrinkRange(range, color) {
+    let inside = true;
+    for (let i = 0; i < color.length && inside; i++) {
+        if (!(range[0][i] <= color[i] <= range[1][i]))
+            inside = false;
+    }
+    if (inside) {
+        for (let j = 0; j < color.length; j++) {
+            if (color[j] - range[0][j] < range[1][j] - color[j])
+                range[0][j] = Math.min(range[0][j] + 10, range[1][j]);//shrink from min side
+            else
+                range[1][j] = Math.max(range[1][j] - 10, range[0][j]);//shrink from max side
+
+        }
+    }
+    return inside;//returns if color is inside or not
+}
+
+
+export default {initColorPicker, colorPickerClick, eyeDrop, expand, shrink}
\ No newline at end of file
diff --git a/chameleon-client/src/views/Camera.vue b/chameleon-client/src/views/Camera.vue
index 6d58c1fb7..d818a3da5 100644
--- a/chameleon-client/src/views/Camera.vue
+++ b/chameleon-client/src/views/Camera.vue
@@ -85,7 +85,7 @@
                 <div style="padding-left:30px">
                     <keep-alive>
                         <!-- vision component -->
-                        <component v-model="pipeline" :is="selectedComponent" @update="$emit('save')"/>
+                        <component v-model="pipeline" :is="selectedComponent" ref="component" @update="$emit('save')"/>
                     </keep-alive>
                 </div>
             </v-col>
@@ -100,7 +100,7 @@
                     </v-tabs>
                     <!-- camera image stream -->
                     <div class="videoClass">
-                        <img id="CameraStream" v-if="cameraList.length > 0" :src="streamAddress" crossorigin="Anonymous"/>
+                        <img id="CameraStream" v-if="cameraList.length > 0" :src="streamAddress" @click="onImageClick" crossorigin="Anonymous"/>
                         <span v-else>No Cameras Are connected</span>
                         <h5 id="Point">{{point}}</h5>
                     </div>
@@ -155,6 +155,9 @@
             CVinput
         },
         methods: {
+            onImageClick(event){
+                this.$refs.component.onClick(event);
+            },
             toCameraNameChange() {
                 this.newCameraName = this.cameraList[this.currentCameraIndex];
                 this.isCameraNameEdit = true;
diff --git a/chameleon-client/src/views/CameraViewes/ThresholdTab.vue b/chameleon-client/src/views/CameraViewes/ThresholdTab.vue
index 275aca01d..9ecc534c8 100644
--- a/chameleon-client/src/views/CameraViewes/ThresholdTab.vue
+++ b/chameleon-client/src/views/CameraViewes/ThresholdTab.vue
@@ -1,51 +1,52 @@
 <template>
-    <div v-on:camera-loaded="init">  
+    <div>
         <CVrangeSlider v-model="value.hue" name="Hue" :min="0" :max="180" @input="handleData('hue')"/>
-        <CVrangeSlider v-model="value.saturation" name="Saturation" :min="0" :max="255" @input="handleData('saturation')"/>
+        <CVrangeSlider v-model="value.saturation" name="Saturation" :min="0" :max="255"
+                       @input="handleData('saturation')"/>
         <CVrangeSlider v-model="value.value" name="Value" :min="0" :max="255" @input="handleData('value')"/>
-        <v-divider color="darkgray "/>
-        <v-btn style="margin: 20px;" tile color="#4baf62" @click="setMode(1)">
-                    <v-icon>colorize</v-icon>
-                    Eye drop
-                </v-btn>
-        <v-btn style="margin: 20px;" tile color="#4baf62" @click="setMode(2)">
-                <v-icon>add</v-icon>
-                Expand Selection
-                </v-btn>
-        <v-btn style="margin: 20px;" tile color="#4baf62" @click="setMode(3)">
+        <v-divider color="darkgray " style="margin-top: 5px"/>
+        <v-btn style="margin: 20px;" tile color="#4baf62" @click="setFunction(1)" small>
+            <v-icon>colorize</v-icon>
+            Eye drop
+        </v-btn>
+        <v-btn style="margin: 20px;" tile color="#4baf62" @click="setFunction(2)" small>
+            <v-icon>add</v-icon>
+            Expand Selection
+        </v-btn>
+        <v-btn style="margin: 20px;" tile color="#4baf62" @click="setFunction(3)" small>
             <v-icon>remove</v-icon>
             Shrink Selection
         </v-btn>
-        <!-- <CVswitch v-model="driverState.isDriver" name="Driver Mode" @input="sendDriverMode"/> -->
         <v-divider color="darkgray "/>
         <CVswitch v-model="value.erode" name="Erode" @input="handleData('erode')"/>
         <CVswitch v-model="value.dilate" name="Dilate" @input="handleData('dilate')"/>
-        <canvas id="canvas" style="display:none;" />
     </div>
 </template>
 
 <script>
-import CVrangeSlider from '../../components/cv-range-slider'
-import CVswitch from '../../components/cv-switch'
+    import CVrangeSlider from '../../components/cv-range-slider'
+    import CVswitch from '../../components/cv-switch'
 
     export default {
         name: 'Threshold',
-        props:['value'],
-        components:{
+        props: ['value'],
+        components: {
             CVrangeSlider,
             CVswitch
         },
         data() {
             return {
-                mode:0,//0 none,1 eyedrop, 2 expand,3 shrink                
+                currentFunction: undefined,
+                colorPicker: undefined,
+                currentBinaryState: 0
             }
         },
-        computed: {  
+        computed: {
             pipeline: {
                 get() {
                     return this.$store.state.pipeline;
                 }
-            },   
+            },
             driverState: {
                 get() {
                     return this.$store.state.driverMode;
@@ -53,197 +54,63 @@ import CVswitch from '../../components/cv-switch'
                 set(val) {
                     this.$store.commit("driverMode", val);
                 }
-            }    
+            }
         },
-        methods:{  
-            init()
-            {
-                console.log("init");
-                let img = document.getElementById('CameraStream');
-                img.crossOrigin = 'Anonymous';
-                img.setAttribute('crossOrigin', '');
-                let x,y;
-                let ref = this;
-                img.addEventListener('click', function (evt) {
-                        let rect = img.getBoundingClientRect();
-                        x = Math.round(evt.clientX - rect.left);
-                        y = Math.round(evt.clientY - rect.top);
-                        let canvas = document.getElementById('canvas');
-                        canvas.width = img.width;
-                        canvas.height = img.height;
-                        canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);
-                        let pixelData = canvas.getContext('2d').getImageData(x, y, 1, 1).data;//Creating a canvas to get the pixel color, i wish there was a better way to do it
-                        switch (ref.mode)
-                        {
-                            case 1: ref.eyeDrop(pixelData);break;
-                            case 2: ref.expand(pixelData);break;
-                            case 3: ref.shrink(pixelData);break;
-                        }
-                    });
-            },                  
-            eyeDrop(pixel) {
-                console.log("eye droppping on "+pixel);
-                let hsv = this.RGBtoHSV(pixel);
-                let range = this.createRange([hsv]);  
-                range = this.widenRange(range);
-                this.setRange(range);
-                this.setMode(0);
+        methods: {
+            onClick(event) {
+                let hsvArray = this.colorPicker.colorPickerClick(event, this.currentFunction,
+                    [[this.value.hue[0], this.value.saturation[0], this.value.value[0]], [this.value.hue[1], this.value.saturation[1], this.value.value[1]]]);
+                this.currentFunction = undefined;
+                this.value.hue = [hsvArray[0][0], hsvArray[1][0]];
+                this.value.saturation = [hsvArray[0][1], hsvArray[1][1]];
+                this.value.value = [hsvArray[0][2], hsvArray[1][2]];
+                this.value.isBinary = this.currentBinaryState;
+                let msg = this.$msgPack.encode({
+                    'hue': this.value.hue,
+                    'saturation': this.value.saturation,
+                    'value': this.value.value,
+                    'isBinary': this.value.isBinary
+                });
+                this.$socket.send(msg);
+                this.$emit('update');
             },
-            expand(pixel) {
-                console.log("expanding on "+pixel);
-                let hsv = this.RGBtoHSV(pixel);
-                let widenHSV = this.widenRange([[].concat(hsv),hsv]);
-                let range = this.createRange(this.getRange().concat(widenHSV));
-                this.setRange(range);
-                this.setMode(0);
-            },
-            shrink(pixel) {
-                let hsv = this.RGBtoHSV(pixel);
-                let widenHSV = this.widenRange([[].concat(hsv),hsv]);
-                let range = this.getRange();
-                if(!this.shrinkRange(range,widenHSV[0]))
-                    this.shrinkRange(range,widenHSV[1]);
-                console.log(range);
-                this.setRange(range);
-                this.setMode(0);
-            },
-            //Sets driver mode on when m is not zero (aka while choosing a color)
-            setMode: function(m)
-            {
-                this.mode=m;
-                this.driverState.isDriver=(m!==0);
-                this.handleInput('driverMode', this.driverState);
-                this.$emit("update");
-            },
-
-            //----------------------------------------------
-            //Color utils
-            //numbers is an array of 3 rgb values, returns array for 3 hsv values
-            RGBtoHSV: function(numbers) {
-                let r = numbers[0],
-                    g = numbers[1],
-                    b = numbers[2];
-                r = r / 255;
-                g = g / 255;
-                b = b / 255;
-                let minRGB = Math.min(r, Math.min(g, b));
-                let maxRGB = Math.max(r, Math.max(g, b));
-                let d = (r == minRGB) ? g - b : ((b == minRGB) ? r - g : b - r);
-                let h = (r == minRGB) ? 3 : ((b == minRGB) ? 1 : 5);
-                let H = 30 * (h - d / (maxRGB - minRGB));
-                let S = 255 * (maxRGB - minRGB) / maxRGB;
-                let V = 255 * maxRGB;
-                if(isNaN(H))
-                    H=0;
-                if(isNaN(S))
-                    S=0;
-                if(isNaN(V))
-                    V=0;
-                return [Math.round(H), Math.round(S), Math.round(V)];
-            },
-
-            rgbToHex: function(rgb) {
-                var hex = Number(rgb).toString(16);
-                if (hex.length < 2) {
-                    hex = "0" + hex;
+            setFunction(index) {
+                this.currentBinaryState = this.value.isBinary;
+                if (this.currentBinaryState === true) {
+                    this.value.isBinary = false;
+                    this.handleData('isBinary')
                 }
-                return hex;
-            },
-
-            fullColorHex: function(color) {            
-                var red = this.rgbToHex(color[0]);
-                var green = this.rgbToHex(color[1]);
-                var blue = this.rgbToHex(color[2]);
-                return red + green + blue;
-            },
-
-            //----------------------------------------------
-            //Range utils
-
-            createRange: function(HSVColors)
-            {
-                let range = [[],[]];
-                for (var i = 0; i < 3; i++) {
-                    range[0][i]=HSVColors[0][i];
-                    range[1][i]=HSVColors[0][i];
-                    for (var j = HSVColors.length - 1; j >= 0; j--) {
-                        range[0][i]=Math.min(HSVColors[j][i],range[0][i]);
-                        range[1][i]=Math.max(HSVColors[j][i],range[1][i]);
-                    }
+                switch (index) {
+                    case 0:
+                        this.currentFunction = undefined;
+                        break;
+                    case 1:
+                        this.currentFunction = this.colorPicker.eyeDrop;
+                        break;
+                    case 2:
+                        this.currentFunction = this.colorPicker.expand;
+                        break;
+                    case 3:
+                        this.currentFunction = this.colorPicker.shrink;
+                        break;
                 }
-                return range;//[[Hmin,Smin,Vmin],[Hmax,Smax,Vmax]]
             },
-
-            //This function adds 10 extra units to each side of the sliders, not to be confued with the expand selection button
-            widenRange(range)
-            {
-                let expanded = [[],[]]
-                for (var i = 0; i < 3; i++) {
-                    //Expanding the range by 10
-                    expanded[0][i]=Math.max(0, range[0][i]-10);               
-                    expanded[1][i]=Math.min(255, range[1][i]+10);
-                }
-                expanded[1][0]=Math.min(180,expanded[1][0]);//h is up to 180
-                return expanded;
-            },
-
-            //If color in range then take the closer range value to color and set it to color plus or minus 10
-            //For example if hmax is 200 hmin is 100 and color's h is 120 range will become [130,200]
-            shrinkRange(range,color)
-            {
-                let inside = true;
-                for(let i =0;i<color.length&&inside;i++)
-                {
-                    if(!(range[0][i]<=color[i]<=range[1][i]))
-                        inside=false;
-                }                
-                if(inside)
-                {
-                    for(let j =0;j<color.length;j++){
-                        if(color[j]-range[0][j]<range[1][j]-color[j])
-                            range[0][j]=Math.min(range[0][j]+10,range[1][j])//shrink from min side
-                        else
-                            range[1][j]=Math.max(range[1][j]-10,range[0][j])//shrink from max side
-                        
-                    }
-                }
-                console.log("range"+range);  
-                return inside;//returns if color is inside or not
-            },
-
-            //applies the range to store
-            setRange(range)
-            {
-                this.value.hue = [range[0][0],range[1][0]];
-                this.handleData('hue');
-                this.value.saturation = [range[0][1],range[1][1]];
-                this.handleData('saturation');
-                this.value.value = [range[0][2],range[1][2]];                
-                this.handleData('value');
-            },
-
-            //returns the current range in format [[Hmin,Smin,Vmin],[Hmax,Smax,Vmax]]
-            getRange(){
-                let a= this.value;
-                return [[a.hue[0],a.saturation[0],a.value[0]],[a.hue[1],a.saturation[1],a.value[1]]];
-            },
-            handleData(val){
-                this.handleInput(val,this.value[val]);
+            handleData(val) {
+                this.handleInput(val, this.value[val]);
                 this.$emit('update')
-            },     
+            },
         },
-        mounted: function()
-        {            
-            let a = this.init;
-            window.onload = function() {
-            if(document.getElementById('CameraStream'))
-              a();//this.init();
+        mounted: function () {
+            const self = this;
+            this.colorPicker = require('../../plugins/ColorPicker').default;
+            window.addEventListener('load', function () {
+                self.colorPicker.initColorPicker();
+            })
         }
     }
-}
 
 </script>
 
 <style lang="" scoped>
-    
+
 </style>
\ No newline at end of file

From 5e9649195393b474f320a1b05958e5c4101daa89 Mon Sep 17 00:00:00 2001
From: Unknown <oriagranat9@gmail.com>
Date: Tue, 3 Dec 2019 00:54:23 +0200
Subject: [PATCH 10/12] bugfix for correct tab

---
 chameleon-client/src/views/Camera.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/chameleon-client/src/views/Camera.vue b/chameleon-client/src/views/Camera.vue
index d818a3da5..80ed9a79f 100644
--- a/chameleon-client/src/views/Camera.vue
+++ b/chameleon-client/src/views/Camera.vue
@@ -156,7 +156,9 @@
         },
         methods: {
             onImageClick(event){
-                this.$refs.component.onClick(event);
+                if(this.selectedTab ===1){
+                    this.$refs.component.onClick(event);
+                }
             },
             toCameraNameChange() {
                 this.newCameraName = this.cameraList[this.currentCameraIndex];

From b56b3a7918241669dde02129fc8d2c1bd7b1abfc Mon Sep 17 00:00:00 2001
From: Omer <zipory.omer@gmail.com>
Date: Tue, 3 Dec 2019 00:57:21 +0200
Subject: [PATCH 11/12] cleanup and commenting

---
 chameleon-client/src/plugins/ColorPicker.js | 24 ++++++++++++++-------
 1 file changed, 16 insertions(+), 8 deletions(-)

diff --git a/chameleon-client/src/plugins/ColorPicker.js b/chameleon-client/src/plugins/ColorPicker.js
index 061b2fb04..bba09292a 100644
--- a/chameleon-client/src/plugins/ColorPicker.js
+++ b/chameleon-client/src/plugins/ColorPicker.js
@@ -8,6 +8,11 @@ function initColorPicker() {
     canvas.height = image.height;
 }
 
+//Called on click of the image,
+//Finds X,Y of the mouse on the image,
+//Draws the image on the (invisible) canvas
+//Reads the color values (pixelData) in X,Y of the canvas
+//calls the function to handle the button (either eyedrop,expand or shrink)
 function colorPickerClick(event, currentFunction, currentRange) {
     let rect = image.getBoundingClientRect();
     let x = Math.round(event.clientX - rect.left);
@@ -23,13 +28,11 @@ function colorPickerClick(event, currentFunction, currentRange) {
 
 function eyeDrop(pixel) {
     let hsv = RGBtoHSV(pixel);
-    let range = createRange([hsv]);
-    range = widenRange(range);
+    range = widenRange([hsv,hsv.slice(0)]);//sends hsv and a copy of hsv
     return range
 }
 
 function expand(pixel, currentRange) {
-
     let hsv = RGBtoHSV(pixel);
     let widenHSV = widenRange([[].concat(hsv), hsv]);
     return createRange(currentRange.concat(widenHSV));
@@ -38,12 +41,12 @@ function expand(pixel, currentRange) {
 function shrink(pixel, currentRange) {
     let hsv = RGBtoHSV(pixel);
     let widenHSV = widenRange([[].concat(hsv), hsv]);
-
-    if (!shrinkRange(currentRange, widenHSV[0]))
-        shrinkRange(currentRange, widenHSV[1]);
+    if (!shrinkRange(currentRange, widenHSV[0]))//Tries to shrink the lower part of the widen HSV
+        shrinkRange(currentRange, widenHSV[1]);//If the prev attempt failed, try to shrink the higher part of the widen HSV
     return currentRange
 }
 
+//numbers is an array of 3 rgb values, returns array for 3 hsv values
 function RGBtoHSV(numbers) {
     let r = numbers[0],
         g = numbers[1],
@@ -67,6 +70,7 @@ function RGBtoHSV(numbers) {
     return [Math.round(H), Math.round(S), Math.round(V)];
 }
 
+//Loops though the colors array, finds the smallest and biggest value for H,S and V. Returns the range containing every color
 function createRange(HSVColors) {
     let range = [[], []];
     for (var i = 0; i < 3; i++) {
@@ -80,6 +84,7 @@ function createRange(HSVColors) {
     return range;//[[Hmin,Smin,Vmin],[Hmax,Smax,Vmax]]
 }
 
+//This function adds 10 extra units to each side of the sliders, not to be confued with the expand selection button
 function widenRange(range) {
     let expanded = [[], []];
     for (let i = 0; i < 3; i++) {
@@ -91,19 +96,22 @@ function widenRange(range) {
     return expanded;
 }
 
+//If color in range then take the closer range value to color and set it to color plus or minus 10
+//For example if hmax is 200 hmin is 100 and color's h is 120 range will become [130,200]
 function shrinkRange(range, color) {
+
     let inside = true;
-    for (let i = 0; i < color.length && inside; i++) {
+    for (let i = 0; i < color.length && inside; i++) {//Check if color is in range
         if (!(range[0][i] <= color[i] <= range[1][i]))
             inside = false;
     }
+
     if (inside) {
         for (let j = 0; j < color.length; j++) {
             if (color[j] - range[0][j] < range[1][j] - color[j])
                 range[0][j] = Math.min(range[0][j] + 10, range[1][j]);//shrink from min side
             else
                 range[1][j] = Math.max(range[1][j] - 10, range[0][j]);//shrink from max side
-
         }
     }
     return inside;//returns if color is inside or not

From 8a7a234ede90831be1f164291af3963b17e590ba Mon Sep 17 00:00:00 2001
From: Omer <zipory.omer@gmail.com>
Date: Tue, 3 Dec 2019 01:09:54 +0200
Subject: [PATCH 12/12] Reveted changes to range slider

---
 chameleon-client/src/components/cv-range-slider.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/chameleon-client/src/components/cv-range-slider.vue b/chameleon-client/src/components/cv-range-slider.vue
index 8755dc591..571fa086f 100644
--- a/chameleon-client/src/components/cv-range-slider.vue
+++ b/chameleon-client/src/components/cv-range-slider.vue
@@ -6,7 +6,7 @@
             </v-col>
             <v-col :cols="10">
                 <v-range-slider :value="localValue" @input="handleInput" :max="max" :min="min" hide-details
-                                class="align-center" dark color="#4baf62" :step="step" :disabled="disabled">
+                                class="align-center" dark color="#4baf62" :step="step">
                     <template v-slot:prepend>
                         <v-text-field :value="localValue[0]" :max="max" :min="min" @input="handleChange"
                                       @focus="prependFocused = true" @blur="prependFocused = false" class="mt-0 pt-0"
@@ -27,7 +27,7 @@
 <script>
     export default {
         name: 'RangeSlider',
-        props: ['name', 'min', 'max', 'value', 'step','disabled'],
+        props: ['name', 'min', 'max', 'value', 'step'],
         data() {
             return {
                 prependFocused: false,