Feature/fancy test strip

[AtiX]

Adds fancy images for each state to the test strip wizard, makes them clickable.
Closes #638

[AtiX]

All issues resolved, now open for review :)

[johannesdeselaers]

the imagemap works for me in chrome, but not in safari, investigating ..

[johannesdeselaers]

could we make the wizard scale with the browser window?
i was pretty confused when i had this window:

i could click, but nothing (visible) happend. it took me a second or so to see that i had to scroll down

[johannesdeselaers]

i think the image should switch back to the selected option, when the user is not hovering over another option, e.g. this should not happen

[stuikomma]

My 2cts:

• Swap the wizard button and the dropdowns in the download dialog. We're aiming at first time users so they propably want to do the wizard first. I.e. "Please print the test strip to find out the sizes..." "If you already know the settings..."
• Remove the realistic shadow (I suppose it's ambient occlusion) casting. It makes the test strip change hue when the brick is at different positions.
• Don't use dropdowns. A button group should work just as well and is easier to interact with.
• Use the pointer cursor on the clickable images. It conveys a lot more meaning.
• Extend the clickable areas further to the inside of the test strip. You should be able to click the test strip itself and not only the captions.

Maybe we can even get rid of the dropdown in the wizard and having to click the next button.

• Make no default selection, so it is apparent that you have to click somewhere in the image.
• Transition immediately to the next step after clicking the image.
• Remove the dropdown box.
• Remove the next button. I don't know where to put the previous button, though. Maybe we can fit it into the modal-footer?

[AtiX]

Implemented some suggestions, for the rest:

• Button groups: might be usable, but in order to make them work to match the meaning (walkman push down buttons) some ugly hacks / manual control with jquery etc have to performed. done once, don't want to do it again ;)
• no global illumination: make a note for the future, currently my renderer is broken
• rid of the next: I don't agree. this would lead to too much confusion (accidently clicking.. okay, leaving the previous button. if there is a previous button, why isnt there a next button..?). I think a wizard should look like a wizard, and that with previous and next button

[stuikomma]

rid of the next: I don't agree. this would lead to too much confusion (accidently clicking.. okay, leaving the previous button. if there is a previous button, why isnt there a next button..?). I think a wizard should look like a wizard, and that with previous and next button

Then @johannesdeselaers' issue remains unsolved, yet?

[AtiX]

mmh, in between solution: Go next when clicking on the image, but leave the buttons intact?

[stuikomma]

Could this work?
There is no next button.
You can click each stud image, which highlights it and makes a next button appear (just a caret on a round button-thing) with a speaking caption that says "If you really want to use this setting click again.". Not that exact phrase of course but something similar...

[adius]

• The description is wrong. We calibrate our software and not the users their printer.
• Use serif font to make clear that it's a capital i and not a lowercase L

[AtiX]

1. Imho that is just interchangeable. In the end, the printer should create exact results. Whether we call it "calibrating our software for your printer" or "calibrate the printer" results to the same...
2. The "I" already has serif-like top and bottom. How would a serif font make this better?

[adius]

1. Makes a huge difference in my opinion. "Calibrate the printer" means that you have to change something on the printer or configure the printer.
   Calibrating our software means that the user doesn't have to do anything except specifying which studs and holes fit.
2. I mean the summary at the end