About the code:

jQuery code used in this project is essentially a slideshow script that works on the client side. That explains why we do not need any active connection to the Internet. It will run in our browser providing that JavaScript is enabled. Since it turns images into a slideshow, it can be used for many other purposes, e.g., to display photos on our personal web site. jQuery is free, open source software, dual-licensed under the MIT License or the GNU General Public License, Version 2 and it is included in the “js” folder inside the zip file.

If you have not done so before, download it here:

Patches1.0.1.zip v 1.01 | Complete set of files. Fixed a minor error in the index increment and displaying full set of images. – [downloaded 1 times]

manual_patches.js [part 1]

The script starts with declaration of several variables. These are mostly arrays that are used to store different sets of images. Function “mainimage()” (line 9) is the heart of the script. It takes index “nr” and displays the next image in “array0″. Interestingly, there are three calls to the white patch, all in order to provide a stage at which a measuring device can read the white point. During the “onclick” event at the “Next” button, the first white patch will hide (line 5, [part 3], id=”white”). Next, mainimage() function will fire up by fading out another instance of the white patch (class=”img1″) and the index will advance to “0″. This happens at line 10 with the “complete” callback function that is fired once the fadeOut event is complete. Only then, the next image in array fades in (second image). Index gets incremented by the event function (lines 4, 17 in the [part 3]) and its value will be displayed in the Patch field which is <p> element of the html document with id attribute of “count” (<p id=”count”> </p>).

// Declare global variables
var index = -1; // accounting for the three white patches
var array0 = [];
var array1 = [];
var array1a = [];
var spaces = ["untagged", "srgb", "argb", "prophoto"];

// Main slideshow function
function mainimage(nr) {
      // when run, move from the first image to the next one
     $("div.mainimg ul li:eq(0) div img").fadeOut({"duration":100, complete:function() {
         $(this).attr("src",array0[nr]).fadeIn(100); //display image from the array based on the index and src attribute
         nr = index; //this will set the index of the currently selected image
	$('#count p').html('Patch: '+ (index+1) + ''); // display image sequence number
         };

manual_patches.js [part 2]

Next goes a general wrapper function() used for several events and settings. At the beginning, default settings are defined, such as, default color space (untagged), array0 that contains src attribute of all images, default count of images and its screen output for “Total images: “. Script then follows by generating CSS buttons which have the “onclick” event attached to each of them.

The key part of the wrapper function is the selection of color spaces (line 20). It involves the standard “click()” function that sets the color space variable and css styling upon the click event. There are four selection calls that have very similar structure. Once the color space variable is set, the main array0 is generated by calling the function “makearray()” at line 48. At the same time, radio button for the set selection is cleared to have no default state (line 39).

Now, about the “makearray()” function. It looks at the src path of each image in #photos  html tag and alters the hard-coded path by substituting the default path with the current space variable set above upon the click event (e.g., line 35). This is done with help of the callback function (index, attr). In the next step, an array of image src tags is created using the “each” method. Actually, two arrays are created; one with the full set of images (array1) and another one with the limited set of images (array1a). Which array to use depends on the radio button selection (line 66). Conditional statement and two methods of copying arrays are used. Finally, the total image count is updated by reading the array0 length.

$(function(){
// Set defaults
 		 curr_space = spaces[0]; // untagged images are set as default
		 makearray(); //run function defined at line 48
		 array0 = array1a.slice(); // plain copy of array1a
		 totalimages = 12;
		 $('#total p').html('Total images: '+ totalimages + '');

//Prepare radio and CSS buttons
	$("#patch-area").append('<a id="next" onclick="next();" href="#">Next</a>');
	$("#patch-area").append('<a id="reset" onclick="reset();" href="#">Reset</a>');
	$("#patch-area").append('<a id="previous" onclick="previous();" href="#">Previous</a>');

           $('input').click(function () {
           $('input:not(:checked)').parent().removeClass("selected"); // box selection styling
           $('input:checked').parent().addClass("selected");
              });

//-----------------------> select color space
$("#untagged").click(function(){
		if ($(this).text() == "Untagged - No CM") 	{
		$(this).text("Untagged - No CM");
		$('#selection a').css('background','#000F7D');
		$('#untagged').css('background','#ac0000');
		 curr_space = spaces[0];	// Set space for this option
		 makearray(); // make the array - see below
		 			}
		});

$("#srgb").click(function(){
		if ($(this).text() == "sRGB") {
		$(this).text("sRGB");
		$('#selection a').css('background','#000F7D');
		$('#srgb').css('background','#ac0000');
		curr_space = spaces[1]; // Set space for this option
		array0 = []; // Clear all arrays
		array1 =[];
		array1a = [];
		$('#source2').prop('checked', false); // Clear selection of the set (radio buttons)
		makearray();
				 	}
		});

//............ similar for other color spaces
// -----------------------------> end of space selection
//-------------------------------> function to prepare arrays based on space

function makearray() 	{
	$('img').attr('src',function(index,attr){ // Create correct path to images based on the selected color space
        return attr.replace(/srgb|argb|prophoto|untagged/,curr_space);
   		     });

	$('#photos img').each(function() { // take all images from #photos in index.html
    	array1.push($(this).attr('src')); // and push their src attribute into array1
			});

	$('#photos img').filter('.keep').each(function() { // take some images from #photos (gray and primaries)
    	array1a.push($(this).attr('src')); // and push their src attribute into an array1a
			});

//-----------------------------> Select which set of images to run

     $("input[name='set']").live('click', function(){
 	 var radio_value = $(this).val(); // Get the button value after it is clicked

  	 if(radio_value == 'short') {
   	 	array0 = array1a.slice(); } // Just gray and primaries
   	 else 	{
   	 	array0 = []; //Empty Array0 and assign it again in the next step
   	 	array0 = array1; // Full set of patches
   		};

 	totalimages = array0.length; //  Update Array0 size and print it to the screen
 	$('#total p').html('Total images: '+ totalimages + '');
				});

					          }
});

manual_patches.js [part 3]

The scripts ends with section of “events”, specifically with assignment of events to buttons  NEXT, PREVIOUS, and RESET. These assignments consist of index increment (decrement), text styling (hide), and trigger of the main slideshow (mainimage(index)) at the line 8. Reset to the original state is executed by the “window.location.reload(true)” statement.

// Events
function next() {
        if (index < array0.length) {
            index++;
            $('#white').hide(); // Hide the white patch
            $('#container ol li').hide(); //Hide instruction area
            $('#third').hide(); // Hide the instruction header
            mainimage(index); //start the slideshow
           }
        else {
        	window.location.reload(true); // reset to beginning
        	 }
       };

function previous() {
        if (index < array0.length & index > 0) {
            index--;
            mainimage(index);
           }
        else {
        	window.location.reload(true); // reset to beginning
        	 }
       };

function reset() {
        	window.location.reload(true); // reset to beginning
        	};

index.html, only part

The main part of XHTML mark-up is outlined below. The body tag opens with a typical block level element <div> with id attribute of “container”. Navigation mark-up follows next wrapped in another <div> tag with id “selection”. Those are color space buttons, counters, radio buttons and their description. Patch area starts at line 28 with div element encapsulating the first white patch (lines 28-29). This patch is not part of the animation and serves the purpose of calibrating the measuring device. Another instance of the white patch is defined in another div element with class “mainimg” (lines 31-35). This is the first image that fades out when the animation starts.

Next is the complete list of available images wrapped in div element with id “photos”. Each image either has class “keep” associated with it or has no class at all. In the former case, the “keep” class “marks” the image for inclusion in the “shorter” list of gray ramp and primaries. Sub-directory “untagged” is the default part of src path. It is this part that gets replaced by the chosen color space variable (on “click” event) through the jQuery script. If you wish to provide your own set of images, it is the place where they would be entered.

<div id="container">
   <div id="selection">
    <a id="untagged" href="#">Untagged - No CM</a>
    <a id="srgb" href="#">sRGB</a>
    <a id="argb" href="#">Adobe98 RGB</a>
    <a id="prophoto" href="#">Pro Photo</a>

   <div id="total">Total Images:</div>
   <div id="count">Patch: white</div>

<ul id="radio">
<li><input id="source1" type="radio" name="set" value="all" class='ctrl'></input>
<label for="source1">All available patches</label>
</li>
<li><input id="source2" type="radio" name="set" checked="checked" value="short"></input> <!-- Default state is "checked"-->
<label for="source2">Gray ramp and Primaries</label>
</li>
</ul>
</div> <!-- close selection -->

<div id="first"><a href="#">[2]<span>
Choose and click which set of patches you wish to run.</span></a></div>
<div id="second"><a href="#">[1]<span>
Always click "Reset" first. Then click the desired tab above to select patches with a specific
embedded color profile.</span></a></div>

<h2>RGB patches</h2>
<div id="patch-area">
   <div id="white"><img src="images/white.jpg" alt="white" /> <!-- show the white patch for instrument calibration --></div>

<div class="mainimg">
<ul>
<li><div><img alt="n-255" src="images/untagged/n-255.jpg" /></div></li>
</ul>
</div>

<div id="photos"><!-- Customize the patches below. Keep the syntax. -->
<img src="images/untagged/n-255.jpg" alt="n-255" />
<img src="images/untagged/n-223.jpg" alt="n-223" />
................... and so on for the all patches ..............
<img src="images/untagged/b-0.jpg" alt="b-0" /></div>
</div><!-- closing patch-area-->

Again, all discussed files including html file and css styling sheet are included in the zipped file through the download.

To address browser color capabilities in the most straightforward way, we would just send images of RGB primaries through the browser and record their colorimetric values. In order to do that, we would need a set of images that are either untagged (no color space information is associated with them) or images that carry color space information in the form of icc/icm profile. After the measurement is done, a quick comparison with known CIE 1931 chromaticity coordinates of RGB primaries of standard color spaces (sRGB, Adobe98 RGB, Pro Photo RGB) would reveal any color processing done by the browser. To measure the radiometric output, we can use the same device that we use to calibrate our display.

To make measurement of colors from within a browser easier, I provide jQuery script that displays different color patches and allows measurement in a semi-manual manner. The script runs in any browser that has JavaScript enabled. Included are gray and RGB ramps in four different variants; untagged and tagged with sRGB, Adobe98 RGB, and ProPhoto RGB icc profiles. After measuring these patches directly from the browser, we can both judge its color management capabilities and also obtain display characteristics, such as, display gamma, color temperature and gamma values for each RGB channel. On that later (link).

The Upshot of the Script:

• Inter-browser compatibility (IE, Chrome, Firefox, Safari, Opera, …)
• No installation (all necessary files are included)
• No need to be connected to the Internet
• Simple navigation (NEXT, PREVIOUS, RESET)
• Customizable (supply your own images)
• Free

How to prepare the script:

To begin, first download the necessary files (the latest version):

Patches1.0.1.zip v 1.01 | Complete set of files. Fixed a minor error in the index increment and displaying full set of images. – [downloaded 1 times]

1. Unzip the zip file into a folder (it self-extracts into folder “patches”) and place the folder structure anywhere on your computer (e.g. in c:/ ).
2. Double-click on the index.html file in the main folder. Alternatively, drag the index.html file to the browser window.
3. Depending on the Security policy settings of your computer,  you will want to confirm (OK, Agree, …) the message saying something about the JavaScript, Active-X to be allowed.
4. The following page will appear in the browser window.

How to run the patch animation:

1. To make sure that everything is in the initial state, press RESET.
2. If you wish to run Untagged series first, just check which set to run (All or Gray & Primaries) [2] and proceed by clicking  NEXT.
   
3. For other color spaces, choose the color profile (icc profile) associated with the image set by clicking the corresponding red tab at the top [1] (Untagged is the default).
4. Select the set of images to run (All or Gray & Primaries) [2]. “Gray ramp and Primaries” has 12 images (default); 7 gray ramps, 3 RGB patches and the black and white patches. “All available patches” include the gray ramp from the above, 7 patches each of the red, green, and blue ramps and the black and white patches  (total of 36).
5. Read steps in the note [3] to calibrate the measuring device and acquire reading of the white patch.
6. Use the NEXT, PREVIOUS buttons to advance or step back.  At the end of the cycle, script resets into the default state.

How to measure patches:

Unfortunately, there are limited options when it comes to manual measurements off the screen that are not driven by a specific display calibration package. The good news is there are still a few free software applications. These include Argyll CMS and homecinema-fr colormeter at HCFR. On the commercial side, I prefer using the BabelColor CT&A.

I described setup and use of all of the mentioned applications on my Techpages, specifically at: Argyll CMS – examples of use,  HCFR Colorimetere, and BabelColor CT&A.

I will go into measurements and results in more details later. At this point, I will continue with discussion of the code used in this project.

This post will show modification in a simple start-up option that enables management of colors in the Chrome browser (I am intentionally avoiding the term “color management” for the reasons explained below).

When enabled, then regardless if the image is or it is not tagged with icc profile, its color interpretation will default to the computer system color space (sRGB under Windows OS) and resulting RGB values are then sent straight to the monitor. If monitor icc profile is assigned in the “Default monitor profile” section, colors will be ultimately converted to sRGB color space.

In short, for calibrated and profiled or any decent monitor, results for tagged and untagged images will be just fine. However, troubles may arise when using a wide-gamut monitor.

The setup described below will ensure that most images from the Web will be faithfully displayed on your monitor, especially on wide-gamut monitors. It is also important to note that Chrome is not color managing images in the strict sense. Instead, if enabled, it treats all images as if they were in sRGB color space. The net result is that regardless of the monitor gamut, images are displayed in the web-safe sRGB color space.

Here is how to proceed (in Google Chrome browser):

1. Right-mouse click the Chrome icon and select Properties.

2. Add --enable-monitor-profile at the end of the path in the Target field. Use double quotes as seen in the screenshot. 

3. Click the OK button and restart Chrome.

That’s it. Chrome should now display images in the “web save” mode.

Unfortunately, until recently, I was not able to get the Chrome manage colors (over-saturation mostly) on my tagged images. First, I must say that I am running two monitors off the XP-SP3 computer. Moreover (complicating aspect), one of my monitors is a wide-gamut display. Both displays are calibrated and profiled and behave very good when editing photos in Photoshop on either one of them. Looking deeper into color problem in Chrome, I noticed that there is no monitor profile explicitly entered when enabling the color management (in contrast to Firefox). That leads to a question what profile is used by Chrome? It turns out that there is no profile used, but instead RGB values embedded in the image are assigned the monitor color space and then are converted to sRGB color space. However, for this transformation to happen, one has to set the default monitor profile by clicking “Set As Default” as shown in the picture below. This is not immediately intuitive, but it is important when viewing images on the wide-gamut monitor. On a standard monitor, differences are negligible.

In situation where two monitors of different gamuts are run, I suggest to set the Default profile (above) to the wide-gamut display.

In summary, for users of two or more monitors from which at least one is wide-gamut display, set the “Default monitor profile” in Windows to the wide-gamut monitor profile and have the Chrome to display images on that same wide-gamut monitor.

This post will guide you through the powerful options in Firefox that enable color management of images that are tagged with icc profile. If the image is not tagged with icc profile, its color interpretation will default to the computer system color space, which in most cases is close to sRGB and and then converted to the monitor RGB. If the image is tagged with icc profile and if there is no monitor profile available, monitor RGB values are assumed and the monitor default profile is used for conversion. For calibrated and profiled or any decent monitor, results for tagged and untagged (but edited on standard sRGB gamut monitor) images will be just fine. However, troubles will most probably arise on a wide-gamut monitor.

Setup described below will ensure that most images from the Web will be faithfully displayed on your monitor, especially on wide-gamut monitors.

Here is how to proceed (in Mozilla Firefox browser):

1. Type "about:config" in the browser address bar (no quotes).  

2. Click the "OK, I'll be careful" button in the warning message that appears.

3. Type "gfx" to the Filter field.

4. Double-click the "gfx.color_management.display_profile" line and enter path to your monitor profile.

1. Double-click the "gfx.color_management.mode" line and enter "1" (means Full Color Management) in the box that opens up (click the image below to zoom in).

2. Quit and restart Firefox.

That’s it. Firefox should now display all images with full color management in action.

Below is simple javascript that needs to be inserted into the top section of your web page (between the and tags) to re-direct those users to an alternative page.

<!--ipad redirect-->
<script language=javascript>
if ((navigator.userAgent.indexOf('iPhone') != -1) || (navigator.userAgent.indexOf('iPod') != -1)
|| (navigator.userAgent.indexOf('iPad') != -1)) {
document.location = "http://www.yourdomain.com/directory/index1.html";
}
</script>

In this example, /directory/ is optional (in case that your site or iPad friedly version of your site resides in another directory) and index1.html is an alternative index.html that does not contain any Flash code. Index1.html is essentially a copy of the index.html where the Flash part is replaced with JQuery or html5 code to display the original slides or movie. It is where the visitor will be re-directed to.

In the late July, a plan was born – build a site for the photos and other content that would keep them in one place with confidence in the original color quality.