Updated!

This now works with Firefox 3.5, IE7 and Chrome 3. Upgrading to the newest sIFR version (2.07) made it compatible with versions of Flash 10+.

Background

Maybe this is helpful: Developing a site for a client who does custom embroidery, we wanted to offer a way to preview different lettering styles, colors and backgrounds.

The sIFR package seemed like a handy solution, and has worked out pretty well. Using the "addons" package's rollback function, we can modify styles on-the-fly, using whatever fonts we want (or have).

Note: Since upgrading to Firefox 3 and Flash 10, the sIFR functions weren't working. Upgrading to version 2.07 and recreating the font movies with the new sifr.fla file, things worked normally again. One thing not mentioned in the documentation for the upgrade is the necessity of recopying your sIFR.replace... functions; don't forget!

A Text Preview Tool in sIFR

Here's a working model of the whole package:

Enter some test in the "text to preview" box and tab to the next form field. Change them to new values.

Preview Text Goes Here

Text to Preview:

Select a font:

Select a text color:

Select a background color:

Have fun!

How It Works

More than just changing a standard "the quick brown fox..." block of type, we wanted users to be able to enter in their own wording or initials to see what they looked like. Working with a range of manufacturers, each with a range of products in multiple colors, we needed to marry them with another range of thread colors.

Embroidery fonts are somewhat different than regular TrueType or OpenType fonts. They usually are close matches to standard commercial fonts, with slightly varied names. With a little detective work, we mapped almost all of them to standard PC or Mac fonts that we had.

For this to work, all the various garments needed to be color-mapped to hex values. Using PhotoShop or GIMP's eyedropper tool set to a wide radius, I captured an average that matched the visual impression of each, and built a JavaScript hash to contain them:

Swatches['Dragon'] = '6f3d45';
Swatches['Hydrant'] = 'f98f0e';
Swatches['Gremlin'] = '4b554d';
Swatches['Bright Blue'] = '0129ea';
etc...

As well as a similar hash for thread colors, and another for fonts.

That done (as task best done while watching TV or something), we need some functions to call on sIFR to do its work. Installation of sIFR is covered elsewhere here on the site, as well as on the sIFR site. You can experiment with the downloadable package, but to add any more fonts to the two they give you, you'll need the Flash application.

Changing the background color is trivial. Based on the color of the garments, again, it's just matter of setting up a unique element and changing its background color property. Here I'm using a div with the ID of "styleswitcher". Just add the function to the select box:

   select a background color:
   <select name="backgroundcolor" 
    onchange="switchBackground()">
 
<option>Athletic Gold</option>
<option>Bark</option>
<option>Berry</option>
<option>Black</option>
<select>

And build a JavaScript function to handle it:

function switchBackground() {
 if (document.getElementById('styleswitcher') ) {
  document.getElementById('styleswitcher').style.backgroundColor = 
   '#' + Swatches[document.getElementsByName('backgroundcolor')[0].value];
  document.getElementById('styleswitcher').style.border = 
   "2px solid #" + TextSwatches[document.getElementsByName('textcolor')[0].value];
    }
  }

I'm also changing the border color here, which will match the text color.

Text color involves more. Since the text color is part of the Flash movie that sIFR generates, you can't just assign a new value directly. You have to roll the sIFR back -- remove the flash movies -- and create new ones. Assuming that there's a default font set up, your select box will look like:

 select a text color:
<select name="textcolor"
 onchange="text_color_change()">
<option>Red</option>
<option>Black</option>
<option>Blue 3541</option>
<option>Green 5510</option>
<select>

With a corresponding hash on the back end:

TextSwatches['Gold 0824'] = 'e89e00';
TextSwatches['Purple 2910'] = '998cff';
TextSwatches['Violet 3541'] = '000dff';
TextSwatches['Burgundy 2115'] = '40192b';

The text_color_change function is going to gather the form fields for the font and text color, roll back the movie applied to the styleswitcher div, and apply a new one by calling the do_sIFR function:

function text_color_change() {            
 //get the font file name from the hash
 previewFont = 
   Fonts[document.getElementsByName('font')[0].value];
 //get the hex value of the font color
 previewFontColor = 
   TextSwatches[document.getElementsByName('textcolor')[0].value];
 sIFR.rollback("div#styleswitcher");   
 do_sIFR(previewFont,previewFontColor);
}  

The "do_sIR" function takes the font face that's been fed in and the hex value, maps the font to the matching movie in the file system, prepends a "#" onto the hex value, and feeds it into the supplied sIFR.replaceElement function.

function do_sIFR(face, color) { 
 var face = "sIFR2/" + face + ".swf";
 var color = "#" + color;
 if ( typeof sIFR == 'function' ) {
    sIFR.replaceElement("div#styleswitcher", 
      named({sFlashSrc: face, 
      sColor: color,
      sBgColor:"",
      sFlashVars:"textalign=center",
      sWmode:"transparent"}));
    }

Note the sWmode:"transparent" parameter; you could make sBgColor the hex value of your background, but at some point I'm going to want to superimpose this over images so I make it transparent.

The last piece is a function attached to the text input box itself. The tricky part is you have to remove the Flash move and the text for this to work properly. Ideally I'd have wanted the function to fire off onkeypress, but in testing it, it seemed kind of abusive to have the movies swapping in-and-out with every stroke. So I tied the function to onchange instead. It gathers the current values of the form fields, rolls back the Flash movie, nukes the text inside the styleswitcher div, replaces it with the user-entered text, and applies the new movie.

function text_options_change() {
 textField = document.getElementsByName('displayText')[0].value;
 previewFont = Fonts[document.getElementsByName('font')[0].value];
 previewFontColor = TextSwatches[document.getElementsByName('textcolor')[0].value];
 sIFR.rollback("div#styleswitcher");
 document.getElementById('styleswitcher').innerHTML = '';
 document.getElementById('styleswitcher').innerHTML = textField;
 do_sIFR(previewFont, previewFontColor);
}

Well at least that's the way it should work. Internet Explorer and compatibility is the ultimate in vaporware. IE7 is playing dumb about taking the implicit value of the select options (that is, the innerText) as I've made them here. You have to spell it out. Meanwhile, if you try to feed Firefox the selected index innerText, it chokes on that. It just wants the .value. Not to mention that the subindices get a little out of control. Anyway, I wrapped up a function that tests for which value to throw back. You can read it in the source code. It's probably still buggy as all get out, but as a proof-of-concept it'll have to do.

Tom McGee