Rename to PhotonVision

photon-client/src/plugins/ColorPicker.js

@@ -0,0 +1,121 @@
+var canvas = undefined;
+var image = undefined;
+
+function initColorPicker() {
+    canvas = document.createElement('canvas');
+    image = document.getElementById('CameraStream');
+    canvas.width = image.width;
+    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);
+    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 = 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));
+}
+
+function shrink(pixel, currentRange) {
+    let hsv = RGBtoHSV(pixel);
+    let widenHSV = widenRange([[].concat(hsv), hsv]);
+    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],
+        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)];
+}
+
+//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++) {
+        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
+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;
+}
+
+//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++) {//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
+}
+
+
+export default {initColorPicker, colorPickerClick, eyeDrop, expand, shrink}

photon-client/src/plugins/objectDiff.js

@@ -0,0 +1,121 @@
+//https://gomakethings.com/getting-the-differences-between-two-objects-with-vanilla-js/
+export const diff = function (obj1, obj2) {
+
+    // Make sure an object to compare is provided
+    if (!obj2 || Object.prototype.toString.call(obj2) !== '[object Object]') {
+        return obj1;
+    }
+
+    //
+    // Variables
+    //
+
+    let diffs = {};
+    let key;
+
+
+    //
+    // Methods
+    //
+
+    /**
+     * Check if two arrays are equal
+     * @param  {Array}   arr1 The first array
+     * @param  {Array}   arr2 The second array
+     * @return {Boolean}      If true, both arrays are equal
+     */
+    const arraysMatch = function (arr1, arr2) {
+
+        // Check if the arrays are the same length
+        if (arr1.length !== arr2.length) return false;
+
+        // Check if all items exist and are in the same order
+        for (let i = 0; i < arr1.length; i++) {
+            if (arr1[i] !== arr2[i]) return false;
+        }
+
+        // Otherwise, return true
+        return true;
+
+    };
+
+    /**
+     * Compare two items and push non-matches to object
+     * @param  {*}      item1 The first item
+     * @param  {*}      item2 The second item
+     * @param  {String} key   The key in our object
+     */
+    const compare = function (item1, item2, key) {
+
+        // Get the object type
+        let type1 = Object.prototype.toString.call(item1);
+        let type2 = Object.prototype.toString.call(item2);
+
+        // If type2 is undefined it has been removed
+        if (type2 === '[object Undefined]') {
+            diffs[key] = null;
+            return;
+        }
+
+        // If items are different types
+        if (type1 !== type2) {
+            diffs[key] = item2;
+            return;
+        }
+
+        // If an object, compare recursively
+        if (type1 === '[object Object]') {
+            let objDiff = diff(item1, item2);
+            if (Object.keys(objDiff).length > 1) {
+                diffs[key] = objDiff;
+            }
+            return;
+        }
+
+        // If an array, compare
+        if (type1 === '[object Array]') {
+            if (!arraysMatch(item1, item2)) {
+                diffs[key] = item2;
+            }
+            return;
+        }
+
+        // Else if it's a function, convert to a string and compare
+        // Otherwise, just compare
+        if (type1 === '[object Function]') {
+            if (item1.toString() !== item2.toString()) {
+                diffs[key] = item2;
+            }
+        } else {
+            if (item1 !== item2) {
+                diffs[key] = item2;
+            }
+        }
+
+    };
+
+
+    //
+    // Compare our objects
+    //
+
+    // Loop through the first object
+    for (key in obj1) {
+        if (obj1.hasOwnProperty(key)) {
+            compare(obj1[key], obj2[key], key);
+        }
+    }
+
+    // Loop through the second object and find missing items
+    for (key in obj2) {
+        if (obj2.hasOwnProperty(key)) {
+            if (!obj1[key] && obj1[key] !== obj2[key] ) {
+                diffs[key] = obj2[key];
+            }
+        }
+    }
+
+    // Return the object of differences
+    return diffs;
+
+};

photon-client/src/plugins/vuetify.js

@@ -0,0 +1,11 @@
+import '@mdi/font/css/materialdesignicons.css';
+import 'material-design-icons-iconfont/dist/material-design-icons.css'
+import Vue from 'vue';
+import Vuetify from 'vuetify/lib';
+
+Vue.use(Vuetify);
+
+export default new Vuetify({
+    icons: {}
+
+});