From 2c4649a3be2ad683f886d507ce53f055561c22b2 Mon Sep 17 00:00:00 2001 From: Omer Date: Wed, 27 Nov 2019 22:02:45 +0200 Subject: [PATCH] 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 @@
- + No Cameras Are connected
{{point}}
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 @@ @@ -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