Developing Windows 8 – Hex Math

I recently was working on an application where I wanted to use a simple color picker and then make the button that I used to launch the color picker display the color chosen. The library that I ended up using can be found here. I selected it because I didn’t want any dependencies on jQuery or other libraries and just use a lightweight JavaScript approach.

As you can see, I am using the built-in AppBar/NavBar features of Windows 8 to help keep the UI clean.

One problem I ran into while testing my code was that when I picked either a background or brush color that was white, I could no longer see the icon and text on my command bar.

This is what my markup looks like for the color selectors:

</pre>
<div id="navBar" data-win-control="WinJS.UI.AppBar" data-win-options="{placement: 'bottom'}"><button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'bgColor', label:'Background', icon:'fontcolor', section:'selection', type:'flyout', flyout: select('#backgroundColorFlyout')}"></button>
 <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'color', label:'Brush Color', icon:'fontcolor', section:'selection', type:'flyout', flyout: select('#colorFlyout')}"></button></div>
<div class="flyout" id="colorFlyout" data-win-control="WinJS.UI.Flyout"></div>
<div class="flyout" id="backgroundColorFlyout" data-win-control="WinJS.UI.Flyout"></div>
<pre>

The following is the solution I used:

var BLACK = "#000000";
var WHITE = "#ffffff";
var WHITE_THRESHOLD = 13289158;

function bgColorInit(elementName, hex) {
    var bgColor = document.getElementById(elementName);
    var bgLabel = bgColor.getElementsByClassName("win-label")[0];
    var bgImage = bgColor.getElementsByClassName("win-commandimage")[0];
    var bgRing = bgColor.getElementsByClassName("win-commandring")[0];

    bgColor.style.backgroundColor = hex;
    var h2d = parseInt(hex.substring(1), 16);
    if (h2d > WHITE_THRESHOLD) {
        bgColor.style.color = BLACK;
        bgLabel.style.color = BLACK;
        bgImage.style.color = BLACK;
        bgRing.style.borderColor = BLACK;
    }
    else {
        bgColor.style.color = WHITE;
        bgLabel.style.color = WHITE
        bgImage.style.color = WHITE
        bgRing.style.borderColor = WHITE;
    }
}

The one thing that I did learn was that Windows 8 uses a lot of CSS classes to perform its look and feel. I did a little research and found the classes that I need and grabbed the underlying objects that there were attached to. Next, I simply updated the color and border color of the elements to the corresponding WHITE or BLACK colors.

You have to be careful as I had to parse the Hex value I had first. As you can see, the Hex string also contains the “#” symbol. Next, I simply used the parseInt function specifying 16 for the radix number.

I did a little playing around and found the following 13289158 to be a good number as a threshold for white colors. I didn’t want to only update the screen when it was completely white as I lost visibility of the text and icons for even lighter shades of white.

Again, this was just a simple approach to a bigger problem. I wanted to have a simple color selector and thought that by using the button itself as the color indicator, I could keep my user interface clean.

Here is what the screen looks like now with my fix:

Here is a screenshot of the Color Picker in action using a Flyout as well:

Hope this helps…