1

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!

Improve this question
8
  • 2
    What are you making it in? HTML, CSS, and JavaScript?
    – Zach Saucier
    Commented Dec 2, 2014 at 15:10
  • That is the initial plan, unless there is a better suggestion? Without a Database back-end, I do not see another way based on my own experience.
    – Analytic Lunatic
    Commented Dec 2, 2014 at 15:11
  • Are you allowed to write on the filesystem? Instead of the database you can use a structured file.
    – Paolo Gibellini
    Commented Dec 2, 2014 at 15:25
  • 2
    With shapes this complex I'd recommend SVG as well
    – Zach Saucier
    Commented Dec 2, 2014 at 15:25
  • 1
    @PaoloGibellini, thanks for the input. I'll take a look at it, but think I'll probably give Zach's SVG solution a go for this particular problem.
    – Analytic Lunatic
    Commented Dec 2, 2014 at 17:20

1 Answer 1

Reset to default
3

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.

Improve this answer
3
  • Thanks for elaborating Zach. Currently the focus is on on the different stripes/hull/etc, but the seats could be an option. Right now the idea is to present the user with enough of a builder to give them an idea of what their own personal boat could look like. I would like to include a way to save/print the created image if possible. Do you know of any similar (if basic) examples or tutorials for this that could walk me through the process? How long do you think it would take do this in Adobe Illustrator?
    – Analytic Lunatic
    Commented Dec 2, 2014 at 15:38
  • @AnalyticLunatic Here's a tutorial for something similar (it uses a library called Raphael, you could look for one that doesn't use a library - it's not required for this), I don't know of something that walks you through exactly what you're doing. As for the development time, it depends fully on how good you are with the program. I'd assume most of the scripting for the interaction would be done outside of Illustrator, instead being done in whatever you do web development in now
    – Zach Saucier
    Commented Dec 2, 2014 at 15:43
  • Thanks Zach. I'll get a hold of Illustrator and try out a few examples to see if I think it will work. Appreciate your detailed input, and I'll message you if I have some more questions!
    – Analytic Lunatic
    Commented Dec 2, 2014 at 17:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.