Step 7b - Adding more JavaScript code

Showing different color shades

Quite a lot of work now needs to be done in the JavaScript. First we need to add code that will check the status of the radio buttons. This code is inserted just after the variables hours, minutes, and seconds have been declared. It stores all radio buttons within the id "colorSelection" in the variable radios. Then the JavaScript checks all radio buttons until it finds the one that is checked (clicked on), and finally stores the radio button in the variable displayMode.

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

We then need to rewrite or move the three lines that recalculate the time values to use the entire RGB range. This should only be done if displayMode = 0, i.e. that RGB has been selected by the radio buttons.

// Depending on displayMode, use the appropriate color
// emphasis and change from RGB to hex values
if (displayMode == 0)){
// Use the entire range
var rgbHour = Math.round(hours*(256/24));
var rgbMinute = Math.round(minutes*(256/60));
var rgbSecond = Math.round(seconds*(256/60));
}

Then we are going to emphasise the different RGB channels. We do that by continuing the if statement with else if. I use both the hour and the minute for the emphasised color, and since the RGB values range from 0 to 255, and we are going to add the hour and the minute together we use 128 instead of 256. I want the shade to go from dark towards lighter with every second, but without going all the way to white. Therefore, we need to keep the value connected to the seconds half of that of the emphasised color. Then we use the attenuated seconds value for the two color channels that we do not emphasise. With this the shade of the emphasised color will go from dark towards brighter as the hours goes by, but that shade will also change from darker towards brighter as the minutes goes by, and then this shade will change from darker towards brighter with every second.

else if (displayMode == 1)){
// Emphasise red
var emphHour = Math.round(hours*(128/24));
var emphMinute = Math.round(minutes*(128/60));
var attSecond = Math.round(seconds*((emphHour+emphMinute)/2)/60));
var rgbHour = emphHour+emphMinute;
var rgbMinute = attSecond;
var rgbSecond = attSecond;
}

Only the Red channel is shown above. The same procedure is for the Green channel else if (displayMode == 2), i.e. rgbMinute, and for the Blue channel else if (displayMode == 3), i.e. rgbSecond.

The next option is to invert the RGB values. This is done by simply subtracting the current RGB value for the hour, minute, respectively second from 255. This is also added to the if statement.

else if (displayMode == 4)){
// Invert RGB
var rgbHour = 255-Math.round(hours*(256/24));
var rgbMinute = 255-Math.round(minutes*(256/60));
var rgbSecond = 255-Math.round(seconds*(256/60));
}

The last option is to show the actual RGB values.

else if (displayMode == 5)){
// Actual RGB value
var rgbHour = hours;
var rgbMinute = minutes;
var rgbSecond = seconds;
}