Step 8b - Adding the final parts of the JavaScript code

Implementing the last things in JavaScript

In the dotime() function we need to add a couple of things. First we need to check the radio buttons with the id "colorWeighting", and save which radio button that is checked in a variable "colorQuantization". This is done in the exactly same way as we did when we selected different color shades in step 7b.

// Check state of radio buttons with id colorWeighting
// and store in variable weightingRadios
var weightingRadios = document.getElementsByName("colorWeighting");
for (var i = 0, length = radios.length; i < length; i++) {
if (weightingRadios[i].checked) {
var colorQuantization = weightingRadios[i].value;
break;
}
}

Then we need to call a new function colorName(), and we need to include two things. First we need to include the RGB values as an array [rgbHour,rgbMinute,rgbSecond], and secondly we need to include the type of distance measuring, that is variable colorQuantization. Then we use the replace method to remove spaces in the color name because the web browser do not understand color names with spaces in. Then we use jQuery to update the color name and the background color of the rectangle on the screen.

// Call function colorName, include RGB values as an
// array + colorQuantization
var htmlColorName = colorName([rgbHour,rgbMinute,rgbSecond],colorQuantization);
// Remove spaces from the string with the color name
var htmlColor = htmlColorName.replace(/\s+/g, "");
// Show color name
$("#displayColorName").html(htmlColorName);
// Set rectangle background to HTML color name
$("#colorRectangle").css("background-color",htmlColor);

The last thing we need to do is to write the colorName() function. In this function we declare two variables comparisonValue and namePosition. These variables will be used to compare the smallest measured distance, and which entry number in the arrays that corresponded to the measured distance. There are also two long arrays, one with all the 140 color names (like: var colorNames = ["White","Snow", ...), and one with 140 arrays with the RGB values (like: var rgbValues = [[255,255,255],[255,250,250], ...). I'm not going to present these long arrays in this text, but they can easily be copied from the JavaScript file.

To compare all RGB values in the rgbValues array with the current RGB value used as the background color, we need to write a for loop similar to the one in step 7b. The script uses an if statement to check the value of variable colorQuantization and then use either Manhattan, Euclidean, or Weighted Euclidean distance measure to compare the values. Even if these calculate the distance different, there is not a big difference between these comparisons. The reason for this is probably because of the rather small data set of 140 colors. The formulas for these comparisons looks like this:

// Manhattan distance
var tempValue = Math.abs((rgbValues[i][0]-currentRGB[0]))+Math.abs((rgbValues[i][1]-currentRGB[1]))+Math.abs((rgbValues[i][2]-currentRGB[2]));
// Euclidean distance
var tempValue = Math.sqrt(Math.pow((rgbValues[i][0]-currentRGB[0]),2) + Math.pow((rgbValues[i][1]-currentRGB[1]),2) + Math.pow((rgbValues[i][2]-currentRGB[2]),2));
// Weighted Euclidean distance
var var tempValue = Math.sqrt(Math.pow((rgbValues[i][0]-currentRGB[0]),2) + 2*(Math.pow((rgbValues[i][1]-currentRGB[1]),2)) + 0.5*(Math.pow((rgbValues[i][2]-currentRGB[2]),2)));

In the above code strip we used the Math object again to perform mathematical tasks. In this code we use abs to get absolute numbers (only positive numbers). We also used sqrt to get the square root of a number, as well as pow which gives the value of a number to be the power of 2 (in this case).

With if (!comparisonValue) the JavaScript checks wether the variable is empty or not. If the variable is empty it is the first turn in the for loop and the first measurement value should be stored in the variable. Then if the measurement value is less than the variable comparisonValue, the measurement value should be stored in comparisonValue. The turn i in the for loop is then also stored in the variable namePosition.

// If comparisonValue is empty this is the first
// comparisonValue then put tempValue in comparisonValue
if (!comparisonValue) {
comparisonValue = tempValue;
}
// If tempValue is less than comparisonValue put tempValue
// in comparisonValue and store the name position
if (tempValue < comparisonValue) {
comparisonValue = tempValue;
namePosition = i;
}

Nearly done. The JavaScript just needs to return the color name on position namePosition to the dotime() function which in turn will update the information in the HTML element.

// Return the color name on position namePosition
return colorNames[namePosition];