Adding random static images to your web-site

mpatek — Sat, 04 Aug 2012 15:38:09 +0000

There are times when one wishes to add just a “simple” static photo to improve feel and presentation of our/client’s site or photo blog. The idea usually goes like this:

I have a series of images that I want to display on my website.
I do not need a slideshow.
I just want to display one image (on the page load) and I want to grab it at random.
My site is either based on WordPress theme or it is just a plain xhtml site.

To accomplish this task, three web components are needed: html, css, and some sort of JavaScript. For the latter, I picked jQuery library which is well suited for this task. In addition, other standard web technologies will be used, such as JSON and Ajax.

Prerequisites:

For the following part, we will need to be comfortable with a simple editing of html code, preparing JSON list of our photos, including jQuery/Ajax script, and with a little bit of css styling.

Putting all things together:

First, we start off with creating a structured list that will contain file name and title (description) of our photos. In this example, we have five photos with two data sets for each (title and url). Feel free to add, replace, or remove photos from this file, but always make sure that its structure remains the same. “Title” is essentially a header or photo description that will be displayed with it and “url” field takes the file name of your image.
I often check integrity of JSON file at: Jsonlint.

Example of JSON file – images.json

// Building jason list
{"images":[ 	 
{ 	 
	"title": "Sunset at the Horshoe Bend, AZ", 	 
	"url": "1.jpg"	  
	 },	 
	 {	 
	"title": "Kauai Highlands", 	 
	"url": "2.jpg" 
	 },	 
	 {	 
	"title": "Storm is coming", 	 
	"url": "3.jpg"
	 },	 
	 {	 
	"title": "Venice - Grand Canal view from the Rialto Bridge", 	 
	"url": "4.jpg" 
	 },	 
	 {	 
	"title": "Mexican wolf", 	 
	"url": "5.jpg"  
	 }	 
	 ] 	 
}

Next, save the above code as images.json and create a new directory on your web server where all images and the just saved .json file will be located. I have chosen images_rand to distinguish it from common web-site images. For example, if your web site is at www.yoursite.com, new directory would go to: www.yoursite.com/images_rand. Again, this is where both images and the above images.json file would go.

Editing html page:

This is a very simple step: just place new div element into your html document, somewhere between the body tags:


......
 	 

......

I have assigned this element new id and called it “singleshot”. This is where the random image and description will be injected by the jQuery call.

Styling the image:

Position and style can be adjusted in css stylesheet which gets loaded with your page. You can find its name by viewing the page source from any browser.
The link that you are looking for is in the head sections. For example:

Part of the html head section


.....

.....

.....

Example of css file

#singleshot {
 		padding:7px; 
 		background-color: rgb(80,80,80); 
 		-moz-border-radius: 5px; 
 		-webkit-border-radius: 5px; 
 	      border-radius: 5px;
       	margin-bottom: 60px;
       	width:665px;
       	height: 499px;
            }
#singleshot p {
	       background: rgba(90,90,90,0.3);
	       color: rgb(20,20,20);
	       position: relative;
	       top: -500px;
	       margin: 0 0 0 0 ;
	       padding: 5px 0 5px 0;
	       text-align: center;
	       font-family: Arial, Helvetica;
	       font-size: 2.2em;
	       font-weight: bold;
             }

I have assigned this element new id called “singleshot”. This is where the image and description will be injected by jQuery call.

jQuery code:

First, we need to include jQuery library into our page. To accomplish this, include its source into the head section as shown above (part of the html section, line 5). The latest (Aug 2012) source is always at: Google Ajax API CDN.
Check for the most recent version at: jQuery main web site .
Enter the following script into the html body, just before the “singleshot” div element at line 3 above (Editing html page).

Since I was adapting this script for a WordPress template, I use jQuery instead of $ sign in the front of jQuery statements (else the script won’t work in WordPress).

The script starts with Ajax call to images.json file located on your server. Data is read into an array and random entry is assigned to a variable item. In the next step, the complete img tag is built by adding the image file name (url) and image dimensions, which are constant for the web page. Once done, the img tag is appended to #singleshot id in the empty div element. The last step of our script grabs the title and places it into a separate p tag.
That’s all. Change the path to your images.json file and image dimensions to fit your page.

Final result is at the lower part of my Photography web site.

Example of working script at photo.marcelpatek.com

While the code above works just fine, color of the description text sometimes does not match the image lightness. If we were just able to change the text color depending on image tones … Read below.

Further improving our script:

In order to match the image density with color of the description header, we have to modify two parts. Namely, the json file and the jQuery/Ajax script.
Below is the new json list with additional tag, called “scene”. This is where we define the image category (light, dark, normal). Each category will then be used to change the css style of our description text.

// Modified jason list (images1.json)
{"images":[ 	 
{ 	 
	"title": "Sunset at the Horshoe Bend, AZ", 	 
	"url": "1.jpg",
	"scene": "light"	  
	 },	 
	 {	 
	"title": "Kauai Highlands", 	 
	"url": "2.jpg",
	"scene": "dark" 
	 },	 
	 {	 
	"title": "Gathering before the storm", 	 
	"url": "3.jpg",
	"scene": "light"
	 },	 
	 {	 
	"title": "Venice - Grand Canal view from the Rialto Bridge", 	 
	"url": "4.jpg",
	"scene": "normal" 
	 },	 
	 {	 
	"title": "Mexican wolf in Sonora Desert Museum in Tucson, AZ", 	 
	"url": "5.jpg",
	"scene": "normal"  
	 }	 
	 ] 	 
}

Save the list as images1.json and upload it into the same directory as the images.json file above.

Now, the jQuery part. We define several additional variables to describe the color and the text background. Then, depending on the image category, empty variable scene is assigned the corresponding values and it is passed as a style into the p element at line 15.

That’s it. Change the jQuery script on your html page and tweak the color settings between lines 5-7.

Retiring Windows XP to VMware Virtual Machine

mpatek — Sun, 15 Apr 2012 17:25:22 +0000

Background:

After many years of working with Windows XP OS, I recently (and finally) upgraded my OS system to Windows 7. I liked the XP system quite a lot, however, with so many recent software applications that were only working under newer OSs (e.g., Adobe Lightroom 4), I realized that it was the time to move on. I did a “clean” install on my current C: partition, which obviously meant that I lost all my programs and settings as installation went through the partition formatting. Another challenge was to maintain my disk partitioning scheme as I am used to have four partitions:

Drive C: the main and boot partition with system maintenance software
Drive D: productivity software (Photoshop, Lightroom, Office, …)
Drive E: web and internet software
Drive F: data only

Since C: partition contains Windows registry, links and registration info for the remaining software on those other partitions is lost. Having so many customizations and applications working well on my XP machine, I did not feel like losing them all at once. This is where the virtual machine comes in.

A little bit of background – virtual machine is a software implementation of a computer system (real physical computer) that runs programs like a physical machine. It can be thought of as a computer in another computer. It comes handy when one wants to test a software outside of the main computer system or wants to keep older computer setup (or operating system), like in this case.

Software needed for the transition:

While I am sure that there are other options available, I am used to make system backups (images) of all critical partitions (C, D, E) with Acronis True Image (TI) application (at this time – Home 2012). For the virtualization part, I use VMware Workstation 7 ( version 8 is now available) application that runs both under Window and Linux systems. Depending on the version of True Image (and the .tib file), we may also need a copy (evaluation copy is just fine) of WinImage.

Here is the sequence of file transformations for two scenarios:
a) TrueImage Echo -> .tib -> [TrueImage .tib -> .vmdk] -> VMware Workstation
b) TrueImage Home 2012 -> .tib -> [TrueImage Home 2012 .tib -> .vhd] -> WinImage -> vmdk -> VMware Workstation

From tib to vmdk:
I was quite happy with Acronis True Image Echo Workstation that was able to convert True Image images (.tib) directly to VMware .vmdk format (see the menu snapshot on the left). Done that way, the virtual disk could be used directly in the VMware Workstation or Player software (scenario a, Fig. 1).

Fig. 1 TI-Echo Workstation Tools menu

Unfortunately, True Image Home 2012 edition does not support this feature and can only save virtual disks in .vhd format (found in “Acronis backup conversion” section). Had I made my .vmdk disks with the earlier Echo version, I would save myself quite a lengthy process of vhd to vmdk conversion. Since I used the newer Home 2012 edition and have the corresponding version of .tib file, here is how to proceed.

First, if you still have the older version of .tib image file, there is a free version of virtual disk (VD) conversion application from VMware called “VMware vCenter Converter Standalone Client” that can convert many third party VD file types into the vmdk type (Fig.2). Unfortunately, newer (TI-Home 2012) VD .tib files cannot be converted.

Fig. 2 VMware Converter filetypes

If you only have image files created with TrueImage Home 2012, go to “Tools and utilities” tab and launch “Acronis backup conversion” under the “Backup conversion” section. Choose the .tib image of partition that you want to convert, click Next and choose archive location of the future .vhd file. Click Next, confirm, and wait until the conversion finishes. With the new .vhd file in hand, proceed to WinImage conversion into the .vmdk file.

I recommend making a copy of the original .tib disk image file as I lost the original image after .tib -> .vhd conversion. So, just in case.

WinImage:
As mentioned above and unless you already have it, download and install the copy of WinImage. I will go only briefly through the steps as there is already one detailed description on the web.

Fig. 3 Convert Virtual Hard Disk image …

Fig. 4 Select the .vhd file to convert

Start the WinImage
Go to “Disk” and choose “Convert Virtual Hard Disk image …” (Fig. 3).
Next, select the earlier created .vhd file (Fig. 4).
Click “Next” and choose what type of virtual disk you want to create (I prefer dynamically expanding disk, Fig. 5).
Click OK and type the name of .vmdk file in the “file name” field (Fig. 6).
Click OK and wait for conversion to complete.
At the end, WinImage will ask to select the partition to connect to. Click “Cancel”.

Fig. 5 Choose the type of VD

Fig. 6 Type name of the final .vmdk file

At this point, we should have one or more original partitions (in this case C, D, and E) converted to virtual disks and saved as the corresponding .vmdk files. Now, it is time to launch VMware Workstation.

VMware Workstation setup:
The following steps assume that you have VMware Workstation installed on your computer. For this tutorial, I will be using version 7. Here is the outline of main steps that we will go through:

Create new virtual machine with a default hard disk.
Replace the above disk with the boot partition created earlier (former c: drive).
Customize this virtual machine (memory, network, shared folders).
Add additional virtual disks (former D, E drives – if applicable).
Troubleshoot shared folders and internet access.

We will start by launching the VMware Workstation.

File -> New -> Virtual machine.
Choose the typical machine, click Next and at the Operating system page, select “I will install OS later” (Fig. 7).

Fig. 7 Choosing the OS system

Fig. 8 Selecting guest operating system

Click “Next” and for the operating system, click Microsoft Windows (XP Professional) as shown in Fig. 8.
On the next page, enter virtual machine name – use any name (without the .vmdk extension) and select location of the new machine (same location where the vmdk file resides). If you get a warning message, click Continue.
At the disk capacity page (Fig. 9), keep the default and click Next.
Another Next and Finish.

Fig. 9 Specify disk capacity

Fig. 10 Remove and Add virtual disks

At this point we shall see a new tab created in the main VMware window.

On the left, click “Edit Virtual machine settings”.
Highlight the Hard Disk (IDE) 40 GB and click Remove at the bottom (Fig. 10).
Click Add, choose Hard Disk, Next and choose “Use existing virtual disk”. Browse for our c .vmdk file and confirm selection by clicking Finish and OK.

Now, we have a modified virtual machine that can boot from the image of our original Windows c: partition.

In the next several steps, we will adjust settings of our new machine.

Click “Edit virtual machine settings”.
Increase virtual memory to about 1,000 MB and set network adapter according to Fig. 11.
In Options tab, set the Share Folders as shown in Fig. 12.

Now, let’s power on the machine. It should boot into the former system partition. New virtual machine will go through an automated installation of several drivers and will also issue a warning that our new XP system has to be activated.

Yes, you will need the original code from the XP package. Activation has to be done within 3 days and can be accomplished by sending proper credentials through the web (from virtual machine).

Fig. 11 Setting memory and network adapter

Fig. 12 Set shared folders

Now, it is time to connect additional disk images, i.e., .vmdk images of our other computer partitions created earlier.

In the Virtual Machine Settings/Hardware, click Add at the bottom (similar to Fig. 10) and choose Hard Disk (IDE) option.
Browse for the corresponding .vmdk image file and confirm by OK
Repeat the same for each drive (Fig. 13)

As a result, “original” disks (C, D, E, and F) are now part of our new virtual machine with all settings, programs, desktop icons, e-mails, … are back. While we continue working with the new Windows 7 system, we can get back into our previous “computer” at any time and transfer missed settings, links, bookmarks, icons to the new system.
Unfortunately, things often do not go as one expects and disk drives may be switched (D: may be mapped as E:), real physical partition (F share) will not connect properly, or we have no access to the internet from the virtual machine. It is time to read the following section of troubleshooting.

Fig. 13 Adding other virtual disks

Troubleshooting:

Disk drive letter:
After adding single .vmdk disk images, resulting order of drives may differ (e.g., E, D instead of D, E). Since windows registry and links are originating from the c: partition, many desktop icons and programs will be blank or not working. We need to change the assignment of drive letters to correct this situation.

From within the virtual machine, go to Start, Run and type diskmgmt.msc into the blank field.
Disk management window will open (Fig. 14) that will allow us to change the drive letter.
Click (highlight) the mislabeled disk (say, D in this example would read E), right-mouse-click and select Change Drive Letter and Paths.
New window will open (Fig. 15) where we could change the drive letter as indicated.

Make sure that unique letter is assigned to each partition. Computer cannot have the same letter pointing to two different partitions. If that would be the case, change the letter of other drives to end up with unique drive identifiers.

Fig. 14 Identify disk that needs new letter

Fig. 15 Change disk letter

Map the share drive:

Earlier, we have mapped the data disk (real physical partition) to our new virtual machine (Fig. 12).

Fig. 16 Mapped drive in the Windows Explorer

Fig. 17 Drive remapped to My Computer

Mapped drive actually shows up in the “My network Places” under the “VMware Shared Folders” menu (Fig. 16). While we can use this path and browse the local mapped drive, if any icons or links in the new VM point to this drive, they would be broken. To correct that, we need to re-map this drive as the original data drive in My Computer (e.g., F: as in Fig. 17).

In Windows Explorer, go to Tools -> Map Network Drive.
Choose any unused letter in the Drive: pull down menu (e.g., S:)
In the Folder: field browse to the folder that we want to re-map (F:) as shown in Fig. 16.
Check the “Reconnect at logon” box and click Finish.

Our VM shared drive (F:) will be mapped as a network file to My computer (Fig. 18). Even though it is mapped under letter S:, computer sees it as the original F: drive.

Fig. 18 Mapping network drive to My computer

Internet connection:

Network connection is a hit and miss scenario when running VMware Workstation under Windows 7. The initial setup is shown in Fig. 11. Make sure that “NAT:” is selected and “Connect at power on” is checked. This is basic and supposedly the easiest choice. Additional setting to check:

In the VMware application, go to Edit -> Virtual Network Editor.
Make sure that VMnet8 is associated with NAT and connected (Fig. 19). Note the VMnet0 Bridged setting that we try use later.
In Windows 7, click on Start and in the search field type “network and sharing center”.
Overview of the local network settings will appear (Fig. 20). We should see the VMnet8 adapter installed with “No Internet access” above it (that is OK).

Fig. 19 Virtual Network Editor in VMware Workstation

Fig. 20 Win7 Network settings

By choosing “NAT”, we let the router assign IP address to our virtual machine through the DHCP protocol. For a communication between computers (including the virtual ones) to happen, network adapters (so called NICs) have to be present (typically they are part of computer motherboard accessible through ethernet ports). The Plug and Play code in Windows handles all the work of installing drivers for those adapters.
Settings in the virtual machine (XP Pro) are shown in Fig. 21-22.

Fig. 21 Network settings in Win XP (virtual)

Fig. 22 Details for Local Area Connection

Click My Computer -> My Network Places -> Network Connections to review what networks are setup and available (Fig. 21). Device name should read something like “VMware AMD adapter”. In my case, I have two adapters installed for testing purposes (not necessary). Right-mouse click on “Local Area Connection” and select Properties. We should see connection modules shown in Fig. 22.

Make sure that same protocols are set in Virtual Network Adapter (Fig. 19) and Virtual Machine Settings (Fig. 11). The latter is also accessible via a little icon (looks like two monitors) at the bottom-right of the VMware Workstation application.

Browsers & Color Management II – the Code

mpatek — Fri, 23 Dec 2011 15:15:10 +0000

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 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.

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 119 times]

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.

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

element of the html document with id attribute of “count” (

// 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('Next');
	$("#patch-area").append('Reset');
	$("#patch-area").append('Previous');

           $('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

with id attribute of “container”. Navigation mark-up follows next wrapped in another

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.


   
    Untagged - No CM
    sRGB
    Adobe98 RGB
    Pro Photo

   Total Images:
   Patch: white



All available patches

 
Gray ramp and Primaries


 

[2]
Choose and click which set of patches you wish to run.
[1]
Always click "Reset" first. Then click the desired tab above to select patches with a specific
embedded color profile.

RGB patches

    










................... and so on for the all patches ..............

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

Browsers & Color Management I – Sending Color Patches through the Web Browser

mpatek — Mon, 28 Nov 2011 01:18:28 +0000

While writing my previous posts on color management and web browsers [1, 2], I realized that instead of guessing as to whether a browser understands how to manage colors, a few measurements of color patches would go a long way. Questions, such as, what will happen with untagged images in Chrome 11 or is it safe to use sRGB profile for photos displayed on a wide-gamut monitor would then be easier to answer. By all means, these questions are not trivial and would deserve an in-depth study of the browser documentation and perhaps many hours spent on Google. Unfortunately, with many browsers one would still be unclear on the exact way by which are the (un)tagged images processed.

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 119 times]

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:/ ).
Double-click on the index.html file in the main folder. Alternatively, drag the index.html file to the browser window.
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.
The following page will appear in the browser window.

How to run the patch animation:

To make sure that everything is in the initial state, press RESET.
If you wish to run Untagged series first, just check which set to run (All or Gray & Primaries) [2] and proceed by clicking NEXT.
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).
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).
Read steps in the note [3] to calibrate the measuring device and acquire reading of the white patch.
Use the NEXT, PREVIOUS buttons to advance or step back. At the end of the cycle, script resets into the default state.

If something goes wrong, press RESET.

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.

Enabling color management in Google Chrome

mpatek — Sat, 19 Nov 2011 23:04:31 +0000

In my previous post, I provided a step-by-step guide to enable full color management in the Mozilla Firefox browser. While Firefox handles colors in a very respectful way, there are other browsers that cannot be setup (yet) to effectively manage colors (IE, Opera). For some time, Google Chrome was not capable of managing colors also or its setup was just undocumented. However, while there are several pages on the Internet describing how to enable color management in Chrome, results are often unreliable (read more below).

In general, the first part of troubleshooting annoying color shifts is checking that our monitor is calibrated and profiled.

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.

Note: Unfortunately, “color management” switch does not work on Windows 7 systems (32 bit, 64 bit). Still confirmed in Chrome 18.

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

Right-mouse click the Chrome icon and select Properties.

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

```
Click the OK button and restart Chrome.
```

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

For users of multiple monitors or monitors with different gamut, read more !!

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.

Assigning sRGB as the Default monitor space under Windows (XP-SP3) causes the wide-gamut monitor to display any image (tagged or untagged) as sRGB converted image (good and safe). However, on a regular monitor, colors get desaturated in reds and greens. Assigning icc/icm monitor profile as the Default space results in conversion into (or assignment of) sRGB space on the very monitor which profile was assigned as Default. On other monitor(s), native RGB primaries are used to display the image.

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.

Full color management in Firefox – settings

mpatek — Wed, 02 Nov 2011 21:44:56 +0000

Every day, hundreds of thousands of photos are uploaded to the web. There are many web surfers, photography amateurs, pros and photo agencies browsing for the best pictures. Nothings gets more frustrating then seeing an image that took several hours of editing and rigorous color management discipline, only to realize that colors got shifted and that the whole visual experience is compromised. Main culprit is often wrong setup of the web browser or use of browser that cannot be setup to effectively manage colors (IE, Opera).

In general, the first part of troubleshooting color shifts is checking that our monitor is calibrated and profiled.

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):

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

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

```
Type "gfx" to the Filter field.
```

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

If you do not know or do not have your monitor profile, just leave the default value. System will assume monitor RGB color space.

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).

```
Quit and restart Firefox.
```

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

Detect iPad and iPhone in web browsers

mpatek — Sun, 09 Oct 2011 18:32:45 +0000

In this short post, I will share a web page redirection code for users of iPad, iPhone or ipod who have no access to Adobe Flash media.

In the first week of November 2011, Adobe announced that it will cease developing its Flash Player plug-in for mobile browsers. The next most affected devices(besides the iPad, iPod, iPhone) are those based on Android OS.

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.

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.

Making of this site

mpatek — Sun, 11 Sep 2011 21:01:03 +0000

Sometime in June 2011, I finally realized that I need to make a new home for all my photos, margin notes, web links, and code that I have created over the years. Repeatedly, I found myself jotting down notes for image sizes, Lightroom settings, Photoshop configuration, camera settings, flash presets, … Overall, too many things to remember. I also became unhappy with color management settings in the Adobe Flash, which rarely worked for me and which rendered my images too saturated on wide gamut monitors.

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.