diff --git a/js/Color.js b/js/Color.js index 2c9e3df..e2ee851 100644 --- a/js/Color.js +++ b/js/Color.js @@ -48,25 +48,21 @@ class Color { } : null; } static rgbToHex(rgb) { - //convert a decimal number to 2-digit hex - let hex = ""; - Object.values(rgb).forEach((color) => { - let colorToString = color.toString(16); - if (colorToString.length === 1) { - colorToString = "0" + colorToString; - } - hex += colorToString; - }); - return hex; + function componentToHex (c) { + var hex = Math.round(c).toString(16); + return hex.length == 1 ? "0" + hex : hex.substring(0, 2); + } + + return componentToHex(rgb.r) + componentToHex(rgb.g) + componentToHex(rgb.b); } static hslToRgb(hsl) { let r, g, b; let h = hsl.h, s = hsl.s, l = hsl.l; - h /= 255; - s /= 255; - l /= 255; + h /= 360; + s /= 100; + l /= 100; if(s == 0){ r = g = b = l; // achromatic @@ -116,7 +112,7 @@ class Color { hue /= 6; } - return {h:hue, s:saturation, l:luminosity}; + return {h:hue*360, s:saturation*100, l:luminosity*100}; } static hsvToRgb(hsv) { diff --git a/js/_colorPicker.js b/js/_colorPicker.js index 8a4775d..9bad37a 100644 --- a/js/_colorPicker.js +++ b/js/_colorPicker.js @@ -419,10 +419,10 @@ function getCursorPosMinipicker(e) { // Moves the cursor function updatePickerByHex(hex) { let hsv = new Color("hex", hex).hsv; - let xPos = miniPickerCanvas.width * hsv.h - 8; - let yPos = miniPickerCanvas.height * hsv.s + 8; + let xPos = miniPickerCanvas.width * hsv.h/360 - 8; + let yPos = miniPickerCanvas.height * hsv.s/100 + 8; - miniPickerSlider.value = hsv.v * 100; + miniPickerSlider.value = hsv.v; currPickerIconPos[0][0] = xPos; currPickerIconPos[0][1] = miniPickerCanvas.height - yPos; @@ -445,14 +445,13 @@ function updatePickerByHex(hex) { // Fired when the value of the minislider changes: updates the spectrum gradient and the hex colour function miniSliderInput(event) { let currColor = new Color("hex", getMiniPickerColour()); - let newHex = currColor.hex; let newHsv = currColor.hsv; - let rgb; + let newHex; // Adding slider value to value - newHsv.v = parseInt(event.target.value); + newHsv = new Color("hsv", newHsv.h, newHsv.s, parseInt(event.target.value)); // Updating hex - newHex = Color.rgbToHex(Color.hsvToRgb(newHsv)); + newHex = newHsv.hex; colourValue.value = newHex; @@ -465,6 +464,7 @@ function updateMiniPickerColour() { let hex = getMiniPickerColour(); activePickerIcon.style.backgroundColor = '#' + hex; + console.log("Mini picker col: #" + hex); // Update hex and sliders based on hex colourValue.value = '#' + hex; @@ -482,7 +482,7 @@ function getMiniPickerColour() { pickedColour = miniPickerCanvas.getContext('2d').getImageData(currPickerIconPos[0][0] + 8, currPickerIconPos[0][1] + 8, 1, 1).data; - return new Color("rgb", pickedColour[0], pickedColour[1], pickedColour[2]).hex; + return new Color("rgb", Math.round(pickedColour[0]), Math.round(pickedColour[1]), Math.round(pickedColour[2])).hex; } // Update the background gradient of the slider in the minipicker @@ -501,7 +501,7 @@ function updateMiniSlider(hex) { function updateMiniPickerSpectrum() { let ctx = miniPickerCanvas.getContext('2d'); let hsv = new Color("hex", colourValue.value).hsv; - let tmp; + console.log("Spectrum hex: " + new Color("hex", colourValue.value).hex); let white = new Color("hsv", hsv.h, 0, parseInt(miniPickerSlider.value)).rgb; ctx.clearRect(0, 0, miniPickerCanvas.width, miniPickerCanvas.height); @@ -633,10 +633,10 @@ function updateOtherIcons() { newColourHexes[0] = newColourHsv.hex; // Second colour - newColourHsv.h = new Color("hsv", ((currentColourHsv.h + 320) % 360), currentColourHsv.s, currentColourHsv.v); + newColourHsv = new Color("hsv", ((currentColourHsv.h + 320) % 360), currentColourHsv.s, currentColourHsv.v); currPickerIconPos[2][0] = miniPickerCanvas.width * newColourHsv.hsv.h/360 - 8; - currPickerIconPos[2][1] = miniPickerCanvas.height - (miniPickerCanvas.height * newColourHsv.s + 8); + currPickerIconPos[2][1] = miniPickerCanvas.height - (miniPickerCanvas.height * newColourHsv.hsv.s/100 + 8); newColourHexes[1] = newColourHsv.hex; break;