{"id":1343,"date":"2011-12-23T08:15:10","date_gmt":"2011-12-23T15:15:10","guid":{"rendered":"http:\/\/www.marcelpatek.com\/blog\/?p=1343"},"modified":"2012-01-02T09:15:39","modified_gmt":"2012-01-02T16:15:39","slug":"cm-code","status":"publish","type":"post","link":"https:\/\/www.marcelpatek.com\/blog\/2011\/12\/23\/cm-code\/","title":{"rendered":"Browsers & Color Management II – the Code"},"content":{"rendered":"

This post follows on the Browsers & Color Management I – Sending Color Patches in through the Web Browser<\/a> with more details on the code used to drive images through the browser window. As one might have expected, three components were needed: html, css, and some sort of JavaScript. For the latter, I picked jQuery library (jquery-1.7.min.js) which is well suited for this task.<\/p>\n

<\/h2>\n

About the code:<\/strong><\/h2>\n

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<\/a>, dual-licensed<\/a> under the MIT License<\/a> or the GNU General Public License, Version 2<\/a> and it is included in the “js” folder inside the zip file.<\/p>\n

[space]<\/p>\n

If you have not done so before, download it here:<\/p>\n

[space]<\/p>\n

[download id=”2″ format=”Marcel1″]<\/p>\n

[space]<\/p>\n

[note]The code below is just a sample of the whole script with associated files, shown only to outline the structure and logic of the script.[\/note]<\/p>\n

[space]<\/p>\n

[space]<\/p>\n

<\/p>\n

[separator]<\/p>\n

[space]<\/p>\n

manual_patches.js [part 1]<\/span><\/p>\n

[space]<\/p>\n

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<\/a>], 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<\/a>]) 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>).<\/p>\n

[sourcecode language=”js”]
\n\/\/ Declare global variables
\nvar index = -1; \/\/ accounting for the three white patches
\nvar array0 = [];
\nvar array1 = [];
\nvar array1a = [];
\nvar spaces = ["untagged", "srgb", "argb", "prophoto"];<\/p>\n

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

[space]
\n[separator]<\/p>\n

[space]<\/p>\n

manual_patches.js [part 2]<\/span><\/p>\n

[space]<\/p>\n

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<\/em>” event attached to each of them.<\/p>\n

[space]<\/p>\n

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).<\/p>\n

[space]<\/p>\n

Now, about the “makearray()” function. It looks at the src path of each image in #photos\u00a0 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.<\/p>\n

[space]<\/p>\n

[sourcecode language=”js”]
\n$(function(){
\n\/\/ Set defaults
\n \t\t curr_space = spaces[0]; \/\/ untagged images are set as default
\n\t\t makearray(); \/\/run function defined at line 48
\n\t\t array0 = array1a.slice(); \/\/ plain copy of array1a
\n\t\t totalimages = 12;
\n\t\t $(‘#total p’).html(‘Total images: ‘+ totalimages + ”);<\/p>\n

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

$(‘input’).click(function () {
\n $(‘input:not(:checked)’).parent().removeClass("selected"); \/\/ box selection styling
\n $(‘input:checked’).parent().addClass("selected");
\n });<\/p>\n

\/\/———————–> select color space
\n$("#untagged").click(function(){
\n\t\tif ($(this).text() == "Untagged – No CM") \t{
\n\t\t$(this).text("Untagged – No CM");
\n\t\t$(‘#selection a’).css(‘background’,’#000F7D’);
\n\t\t$(‘#untagged’).css(‘background’,’#ac0000′);
\n\t\t curr_space = spaces[0];\t\/\/ Set space for this option
\n\t\t makearray(); \/\/ make the array – see below
\n\t\t \t\t\t}
\n\t\t});<\/p>\n

$("#srgb").click(function(){
\n\t\tif ($(this).text() == "sRGB") {
\n\t\t$(this).text("sRGB");
\n\t\t$(‘#selection a’).css(‘background’,’#000F7D’);
\n\t\t$(‘#srgb’).css(‘background’,’#ac0000′);
\n\t\tcurr_space = spaces[1]; \/\/ Set space for this option
\n\t\tarray0 = []; \/\/ Clear all arrays
\n\t\tarray1 =[];
\n\t\tarray1a = [];
\n\t\t$(‘#source2’).prop(‘checked’, false); \/\/ Clear selection of the set (radio buttons)
\n\t\tmakearray();
\n\t\t\t\t \t}
\n\t\t});<\/p>\n

\/\/………… similar for other color spaces
\n\/\/ —————————–> end of space selection
\n\/\/——————————-> function to prepare arrays based on space<\/p>\n

function makearray() \t{
\n\t$(‘img’).attr(‘src’,function(index,attr){ \/\/ Create correct path to images based on the selected color space
\n return attr.replace(\/srgb|argb|prophoto|untagged\/,curr_space);
\n \t\t });<\/p>\n

\t$(‘#photos img’).each(function() { \/\/ take all images from #photos in index.html
\n \tarray1.push($(this).attr(‘src’)); \/\/ and push their src attribute into array1
\n\t\t\t});<\/p>\n

\t$(‘#photos img’).filter(‘.keep’).each(function() { \/\/ take some images from #photos (gray and primaries)
\n \tarray1a.push($(this).attr(‘src’)); \/\/ and push their src attribute into an array1a
\n\t\t\t});<\/p>\n

\/\/—————————–> Select which set of images to run<\/p>\n

$("input[name=’set’]").live(‘click’, function(){
\n \t var radio_value = $(this).val(); \/\/ Get the button value after it is clicked<\/p>\n

\t if(radio_value == ‘short’) {
\n \t \tarray0 = array1a.slice(); } \/\/ Just gray and primaries
\n \t else \t{
\n \t \tarray0 = []; \/\/Empty Array0 and assign it again in the next step
\n \t \tarray0 = array1; \/\/ Full set of patches
\n \t\t};<\/p>\n

\ttotalimages = array0.length; \/\/ Update Array0 size and print it to the screen
\n \t$(‘#total p’).html(‘Total images: ‘+ totalimages + ”);
\n\t\t\t\t});<\/p>\n

\t\t\t\t\t }
\n});
\n[\/sourcecode]<\/p>\n

[space]
\n[separator]<\/p>\n

[space]<\/p>\n

manual_patches.js [part 3]<\/span><\/p>\n

[space]<\/p>\n

The scripts ends with section of “events”, specifically with assignment of events to buttons\u00a0 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.<\/p>\n

[space]<\/p>\n

[sourcecode language=”js”]
\n\/\/ Events
\nfunction next() {
\n if (index < array0.length) {
\n index++;
\n $(‘#white’).hide(); \/\/ Hide the white patch
\n $(‘#container ol li’).hide(); \/\/Hide instruction area
\n $(‘#third’).hide(); \/\/ Hide the instruction header
\n mainimage(index); \/\/start the slideshow
\n }
\n else {
\n \twindow.location.reload(true); \/\/ reset to beginning
\n \t }
\n };<\/p>\n

function previous() {
\n if (index < array0.length & index > 0) {
\n index–;
\n mainimage(index);
\n }
\n else {
\n \twindow.location.reload(true); \/\/ reset to beginning
\n \t }
\n };<\/p>\n

function reset() {
\n \twindow.location.reload(true); \/\/ reset to beginning
\n \t};<\/p>\n

[\/sourcecode]<\/p>\n

[separator]<\/p>\n

[space]<\/p>\n

index.html, only part<\/span><\/p>\n

[space]<\/p>\n

The main part of XHTML mark-up is outlined below. The body tag opens with a typical block level element <div> with id<\/em> attribute of “container”. Navigation mark-up follows next wrapped in another <div> tag with id<\/em> “selection”. Those are color space buttons, counters, radio buttons and their description. Patch area starts at line 28 with div<\/em> 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<\/em> element with class “mainimg” (lines 31-35). This is the first image that fades out when the animation starts.<\/p>\n

Next is the complete list of available images wrapped in div<\/em> element with id<\/em> “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<\/em> 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.<\/p>\n

[space]<\/p>\n

[sourcecode language=”html”]
\n<div id="container">
\n <div id="selection">
\n <a id="untagged" href="#">Untagged – No CM<\/a>
\n <a id="srgb" href="#">sRGB<\/a>
\n <a id="argb" href="#">Adobe98 RGB<\/a>
\n <a id="prophoto" href="#">Pro Photo<\/a><\/p>\n

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

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

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

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

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

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

[space]<\/p>\n

Again, all discussed files including html file and css styling sheet are included in the zipped file through the download.
\n[space]<\/p>\n

[separator]<\/p>\n","protected":false},"excerpt":{"rendered":"

This post follows on the Browsers & Color Management I – Sending Color Patches in through the Web Browser with more details on the code used to drive images through the browser window. As one might have expected, three components … Continue reading →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13,16,8],"tags":[],"class_list":["post-1343","post","type-post","status-publish","format-standard","hentry","category-code-software","category-color-management","category-software"],"_links":{"self":[{"href":"https:\/\/www.marcelpatek.com\/blog\/wp-json\/wp\/v2\/posts\/1343","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.marcelpatek.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.marcelpatek.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.marcelpatek.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.marcelpatek.com\/blog\/wp-json\/wp\/v2\/comments?post=1343"}],"version-history":[{"count":66,"href":"https:\/\/www.marcelpatek.com\/blog\/wp-json\/wp\/v2\/posts\/1343\/revisions"}],"predecessor-version":[{"id":1345,"href":"https:\/\/www.marcelpatek.com\/blog\/wp-json\/wp\/v2\/posts\/1343\/revisions\/1345"}],"wp:attachment":[{"href":"https:\/\/www.marcelpatek.com\/blog\/wp-json\/wp\/v2\/media?parent=1343"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.marcelpatek.com\/blog\/wp-json\/wp\/v2\/categories?post=1343"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.marcelpatek.com\/blog\/wp-json\/wp\/v2\/tags?post=1343"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}