Creating a Build-Your-Own Color Picker to go with Website?

I am trying to create a build-your-own type of color picker based upon the brochure image below:

Base-Brochure

Basically I want to create a color changer that will allow a user to select each different stripe/section of the boat and then choose from the available color patterns, where the selected area will immediately change to their selection.

This would be far easier with a database back-end, but there are constraints in place keeping me from using a database. Thus, I believe I am stuck using HTML/CSS/JavaScript to accomplish this.

This to me only leaves the option of manually creating EVERY single possible combination of color combinations and then performing some if...then...else logic to display the appropriate one based on hotlink clicks… a very tedious and less than favorable solution.

Does anyone with more experience doing this sort of project have a better suggestion for how to go about this?

Thanks!

Answer

Since the tiles are shaped in such an irregular way, you can create each them using SVG in Inkscape or Adobe Illustrator and attach a click event to change the selected color. Once you export it from Illustrator or Inkscape it turns into XML which is DOM based, so you can selecte each part using CSS and JavaScript.

You can then do the same thing for the boat (and anything else that needs to be created like the seats – not sure if that’s your intention) and attach click events to each portion to allow the currently selected color to be applied.


The other option would be <canvas>, which could possibly require a lot more calculation on the JavaScript side and likely be harder to make as responsive to varying screen sizes. My guess is that the load time of a Canvas version would be less though.


As for the need for a database, the only thing you’ll need one for is to save the user’s input or order it once they are finished (and perhaps allow users to pull up previously made ones?). The tiles, boat, and everything on the page can be served on the initial load. Make sure you optimize everything because there’s a huge potential for a long load time.

Attribution
Source : Link , Question Author : Analytic Lunatic , Answer Author : Zach Saucier

Leave a Comment