feat : update detection.js

Presently/presently/users/static/users/assets/js/detection.js

-/*
- *
- * This is for uploading files to the page, standard HTML5 jazz.
- *
- * */
 function handleFileSelect(evt)
 {
 	var files = evt.target.files;
@@ -38,13 +33,8 @@ function handleFileSelect(evt)
 	message.innerHTML = 'Click any image to get theme colors!';
 }
 
-/*
-* This portion was created by referencing the article
-* "Using python and k-means to find the dominant colors in images"
-* By Charles Leifer
-* */
+// Using python and k-means to find the dominant colors in images
 
-// You can see the Python version of this in Charles Leifer's article
 function euclidean(point1, point2)
 {
 	var s = 0;
@@ -55,7 +45,7 @@ function euclidean(point1, point2)
 	return Math.sqrt(s);
 }
 
-// There are various ways to convert rgb to hex, I found this on Stack Overflow.
+// convert rgb to hex
 function rgbToHex(rgb)
 {
 	function toHex(c)
@@ -97,7 +87,6 @@ function calculateCenter(points, n)
 	return values;
 }
 
-// I basically just took this from Charles Leifer.
 function k_mean(points, k, min_diff)
 {
 	plength = points.length;
@@ -160,7 +149,7 @@ function k_mean(points, k, min_diff)
 	return colorGroup;
 }
 
-// Here's where we to actual interaction with the webpage
+
 function processimg(img, canvaselement)
 {
 	var points = [];
@@ -168,8 +157,7 @@ function processimg(img, canvaselement)
 	// Drawing the given image onto a canvas 250x250 in size
 	canvaselement.drawImage(img, 0, 0, 250, 250);
 
-	// Getting data from said canvas.  This *DOES* get every pixel in the image.
-	// Luckily, it's fast.
+	// Getting data from said canvas.  This *DOES* get every pixel in the image fastest way.
 	dataCanvas = canvaselement.getImageData(0, 0, 250, 250).data;
 
 	// Populating the points array with colors from the image
@@ -181,8 +169,7 @@ function processimg(img, canvaselement)
 
 	var totals = k_mean(points, 3, 1), hex = [];
 
-	// If you try and convert the RGB to Hex directly here, it takes FOREVER,
-	// but if you have the helper method above, it works fast.  Strange.
+	
 	for (var i = 0; i < totals.length; i++)
 	{
 		hex.push(rgbToHex(totals[i][0]));
@@ -255,8 +242,6 @@ function createSwatches(hex)
 {
 	nHex = hex;
 
-	// The light and dark values could potentially be changed so colors are changed based on these hues.  
-	// It's this way just in case we expand it to include such functionality.
 	var lightRGB = new Array(255, 255, 255);
 	var darkRGB = new Array(0, 0, 0);
 	var colorValues = new Array();
@@ -276,12 +261,12 @@ function createSwatches(hex)
 		colorValues[i][0] = nHex;
 		colorValues[i][1] = nColor;
 		
-		// Actually putting the swatches on the page
+		// putting the swatches on the page
 		document.getElementById("s"+i).style.backgroundColor = "#" + nHex;
 	}
 }
 
-// Actually crating the hues with different lightness
+//  crating the hues with different lightness
 function setColorHue(originColor, opacityPercent, maskRGB)
 {
 	returnColor = new Array();
@@ -290,7 +275,7 @@ function setColorHue(originColor, opacityPercent, maskRGB)
 	return returnColor;
 }
 
-// Helper method for sonverting to HEX
+// Helper method for converting to HEX
 function toHex(dec) {
 	hex=dec.toString(16);
 	if(hex.length==1)hex="0"+hex;
@@ -328,8 +313,6 @@ function hexToRGB(hex)
 	return new Array(r, g, b);
 }
 
-
-// This is currently not used.  Maybe if we start playing with hues and everything, it'll be useful!
 /*
  function HueShift(h,s) {
  h+=s;

Presently/presently/users/templates/users/colourcube.html

@@ -213,8 +213,8 @@
 					<div class="g__row">
 						<div class="g__col g--two rhythm">
 							<h3>Criteria</h3>
-							<p>This tool shows three different ratio targets and how your color performs with each
-								— white, black, or other colors in your palette:</p>
+							<p>This shows three different ratio targets and how color performs with each
+								— white, black, or other colors in the palette:</p>
 							<ul>
 								<li><strong class="text-light">WCAG Level AAA:</strong> a contrast ratio equal or
 									greater than <strong>7.0</strong>. For large-scale text, a ratio equal or greater