-
+
+
+
+
-
-
-
-
-
+
colorize
- Colorpick Calibration
+ Eye drop
+
+ add
+ Expand Selection
+
+
+ remove
+ Shrink Selection
+
+
+
@@ -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