Best and/or easiest implementation of non-flash "Build Your Own"

Hello Sitepoint users!

I am working on a feature for a client who sells door hardware commercially. They want to implement a new customizer feature where the user can choose the location of the hardware (entry, passage, privacy, dummy) as well as the type of hardware (handle/lever, escutcheon/rosette [the back plate of the handle/lever], accessory [like hinges/doorstops], etc) as well as the finish (polished chrome, satin nickel, etc). They want the user to be able to see the changes visually in real time.

My company does not work with Flash so we want to achieve this process using JS and AJAX. I have come up with a couple of options. For both options, the user should choose the series of the hardware first (which is the overarching category for a style of hardware), then they should choose the location. Users will also, at any point, choose a door finish as the background (not as important). So to get the desired effects of the changing hardware, I can only see two options:

  1. Take a picture of every single combination of hardware the user will have the option to choose. This way there will be only one image for any given combination of handle/knob, escutcheon/rosette, and finish and my script will only have to change a single image url
  2. take a photo of every individual piece of hardware by itself. the background should be a solid color so that transparency can be applied. the image the user sees will then be comprised of layers (which will be divs), the background, the escutcheon/rosette, then the handle/lever (listed from bottom to top).

Now, option 1 would be the easiest to implement. Option 2 has complexities that are difficult to see past. Every photo would need to be the same proportion, the camera would have to be the same distance from all hardware for consistency, and the hardware would have to always face the camera lens dead on. With the number of products they offer, I just can’t see this photo taking process (which the client is responsible for) being consistent all the way through.

Am I missing an option? Is there something I’m missing in the two options I presented? How would YOU do it? :eye:

P.S. We are leaning towards option two but have yet to present both options and their complexities to the client.

Thanks for the feedback Alex! I think I’m going to take option 2! Now it’s just a matter of designing the tables in the database to hold all the info…

Interesting problem. Personally I would go with Option 2 on the basis that it requires less images (and therefore would reduce bandwidth usage in loading elements to be layered into the preview pane). However I think the key principle that you need to account for is scale, as you’ve stated you would need to ensure the proportions are correct so in taking photos of the equipment and pieces I would build a temporary set with a stand to place the items on, have the camera on a tripod fixed into place (keeping the distance accurate) and then photograph each item in turn. The best way to accomplish this I think would interestingly enough use method one and then crop out the stuff not related to the “part” within each image. So basically you take a photo of every possible combination or part as it would appear if you did every combination in every door (so everything looks accurate) but rather than simply saving the image “as is”, you go through each photo and crop (adding transparency) around each item thereby allowing you to layer the fewer required images as per Option 2 whilst having the transparency layer you need for the web. :slight_smile: