Feature/fancy test strip

package.json

@@ -34,6 +34,7 @@
     "filesaver.js": "^0.1.1",
     "font-awesome": "^4.3.0",
     "fs-promise": "^0.3.1",
+    "image-map-resizer": "brickify/image-map-resizer#dev",
     "jade": "^1.10.0",
     "jquery": "^2.1.1",
     "js-yaml": "^3.2.7",

public/styles/app/exportModal.styl

@@ -12,3 +12,19 @@
 		margin-top 0.5em
 	img
 		width 100%
+
+	.selectContainer
+		position relative
+		margin-top -15%
+
+		img
+			position relative
+			top 0
+			z-index 9001
+			pointer cursor
+
+		img:last-child
+			position absolute
+			left 0
+			top 0
+			z-index 9000

src/client/ui/downloadModal.coffee

@@ -1,3 +1,5 @@
+require 'image-map-resizer'
+
 wizardLogicInitialized = false
 currentWizardStep = 0
 wizardSteps = [
@@ -17,8 +19,15 @@ $testStripContent = undefined
 $wizardButtons = undefined
 $wizardHoleSizeSelect = undefined
 $wizardStudSizeSelect = undefined
+$wizardStudImage = undefined
+$wizardHoleImage = undefined
+$wizardTextOverlayStud = undefined
+$wizardTextOverlayHole = undefined
 $studSizeSelect = undefined
 $holeSizeSelect = undefined
+$wizardStepObjects = undefined
+$textMap = undefined
+$numberMap = undefined
 
 alphabeticalList = (i, range) ->
 	# A = 65
@@ -43,6 +52,10 @@ disableWizard = ->
 	$legoContent.fadeIn wizardFadeTime
 	$stlContent.fadeIn wizardFadeTime
 	$wizardButtons.fadeOut wizardFadeTime
+
+	for $step in $wizardStepObjects
+		$step.fadeOut wizardFadeTime
+
 	currentWizardStep = 0
 
 # Initializes the logic for the test strip wizard
@@ -60,6 +73,9 @@ initializeWizard = ($modal) ->
 
 	$startWizard = $modal.find('#startWizard')
 
+	# init imagemaps
+	initializeImageMaps $modal
+
 	$wizardStepObjects = wizardSteps.map (selector) ->
 		$wizardStep = $modal.find(selector)
 		$wizardStep.hide()
@@ -90,7 +106,11 @@ initializeWizard = ($modal) ->
 			disableWizard()
 		else
 			$wizardStepObjects[currentWizardStep]
-			.fadeIn wizardFadeTime
+			.fadeIn wizardFadeTime, ->
+				# Trigger image map resize after images are loaded
+				# and shown, since image size is not set accurately
+				# before
+				updateImageMapSize()
 
 		# Update calibration preview on last step
 		if currentWizardStep is wizardSteps.length - 1
@@ -129,6 +149,28 @@ initializeWizard = ($modal) ->
 			applyCurrentWizardStep()
 			updateButtonCaptions()
 
+	setHoleImageToSelectValue = ->
+		id = $wizardHoleSizeSelect.find('option:selected').html()
+		$wizardHoleImage.attr 'src', "img/testStripWizard/holes/#{id}.png"
+
+	setStudImageToSelectValue = ->
+		id = $wizardStudSizeSelect.find('option:selected').html()
+		$wizardStudImage.attr 'src', "img/testStripWizard/studs/#{id}.png"
+
+	# Update image on selection change
+	$wizardHoleSizeSelect.on 'change', ->
+		setHoleImageToSelectValue()
+
+	$wizardStudSizeSelect.on 'change', ->
+		setStudImageToSelectValue()
+
+	# Reset image when leaving the selection area
+	$wizardTextOverlayHole.mouseleave ->
+		setHoleImageToSelectValue()
+
+	$wizardTextOverlayStud.mouseleave ->
+		setStudImageToSelectValue()
+
 	# Fade out size select, start wizard on click
 	$startWizard.click ->
 		currentWizardStep = 0
@@ -139,6 +181,45 @@ initializeWizard = ($modal) ->
 			$wizardStepObjects[0].fadeIn wizardFadeTime
 			$wizardButtons.fadeIn wizardFadeTime
 
+initializeImageMaps = ($modal) ->
+	$wizardStudImage = $modal.find '#wizardStudImage'
+	$wizardHoleImage = $modal.find '#wizardHoleImage'
+	$wizardTextOverlayHole = $modal.find '#wizardTextOverlayHole'
+	$wizardTextOverlayStud = $modal.find '#wizardTextOverlayStud'
+
+	$textMap = $modal.find('#textMap')
+	$textMap.imageMapResize()
+	$numberMap = $modal.find('#numberMap')
+	$numberMap.imageMapResize()
+
+	$textMap.find('area').each ->
+		thisArea  = $(@)
+		id = thisArea.attr 'id'
+		thisArea.hover ->
+			$wizardStudImage.attr 'src', "img/testStripWizard/studs/#{id}.png"
+		thisArea.click ->
+			$wizardStudImage.attr 'src', "img/testStripWizard/studs/#{id}.png"
+			$wizardStudSizeSelect
+			.find('option')
+			.filter -> return $(@).html() is id
+			.attr('selected', true)
+
+	$numberMap.find('area').each ->
+		thisArea  = $(@)
+		id = thisArea.attr 'id'
+		thisArea.hover ->
+			$wizardHoleImage.attr 'src', "img/testStripWizard/holes/#{id}.png"
+		thisArea.click ->
+			$wizardHoleImage.attr 'src', "img/testStripWizard/holes/#{id}.png"
+			$wizardHoleSizeSelect
+			.find('option')
+			.filter -> return $(@).html() is id
+			.attr('selected', true)
+
+updateImageMapSize = ->
+	$textMap.imageMapResize()
+	$numberMap.imageMapResize()
+
 getModal = ({testStrip, stl, lego, steps} = {}) ->
 	$modal ?= $('#downloadModal')
 	$legoContent ?= $modal.find('#legoContent')

views/downloadModal/testStripWizard.jade

@@ -1,17 +1,17 @@
 h4.disabled Download stl for 3d printer
 #sizeSelect
 	p.
-		Please enter your printer type:
+		Use our wizard to determine the correct calibration settings for your 3D-printer:
+	button.btn.btn-primary.btn-block#startWizard Start wizard
+	br
+	p.
+		If you already know, enter them here before downloading:
 	.row
 		.col-sm-6
 			select.form-control#studSizeSelect
 		.col-sm-6
 			select.form-control#holeSizeSelect
 	br
-	p.
-		If you don't know your printer's type, use our wizard to find it out:
-	button.btn.btn-primary.btn-block#startWizard Start wizard
-	br
 #wizardStepIntro
 	p.
 		Every 3D-printer is different and produces slightly differnt 3D-printed objects.
@@ -22,14 +22,43 @@ h4.disabled Download stl for 3d printer
 #wizardStepStuds
 	p.
 		Try to connect the test strip studs into a LEGO-brick. Which size fits best?
-	img(src='img/testStripWizard-studSize.png')
+	.selectContainer
+		map(name='textMap' id='textMap')
+			area( shape="poly" coords="476, 328, 583, 151, 388, 109, 391, 303" id="I" )
+			area( shape="poly" coords="517, 390, 706, 337, 591, 170, 479, 341" id="H" )
+			area( shape="poly" coords="523, 397, 511, 469, 710, 552, 713, 351" id="G" )
+			area( shape="poly" coords="445, 529, 520, 708, 706, 565, 507, 481" id="F" )
+			area( shape="poly" coords="340, 537, 274, 691, 478, 695, 437, 533" id="E" )
+			area( shape="poly" coords="270, 480, 79, 577, 254, 696, 335, 531" id="D" )
+			area( shape="poly" coords="256, 398, 264, 472, 72, 563, 48, 365" id="C" )
+			area( shape="poly" coords="304, 329, 263, 386, 48, 357, 179, 199" id="B" )
+			area( shape="poly" coords="310, 324, 385, 302, 378, 109, 186, 192" id="A" )
+
+		img(src='img/testStripWizard/studs/textOverlay.png' usemap='#textMap' id='wizardTextOverlayStud')
+		img(src='img/testStripWizard/studs/E.png' usemap='#textMap' id='wizardStudImage' onmouseleave="alert('leave2');")
+
 	p.wizardSelect This size fits best:
 		select.form-control#wizardStudSizeSelect
+
 #wizardStepHoles
 	p.
 		Now connect the LEGO-brick studs into the test strip. Which size fits best?
-	img(src='img/testStripWizard-holeSize.png')
-	p.wizardSelect This size fits best:
+	.selectContainer
+		map(name='numberMap' id='numberMap')
+			area( shape="poly" coords="529, 370, 518, 447, 696, 524, 705, 331" id="6" )
+			area( shape="poly" coords="396, 270, 472, 294, 581, 146, 388, 104" id="8" )
+			area( shape="poly" coords="478, 300, 533, 363, 707, 325, 588, 154" id="7" )
+			area( shape="poly" coords="444, 506, 521, 719, 687, 527, 510, 454" id="5" )
+			area( shape="poly" coords="332, 508, 440, 512, 515, 721, 260, 704" id="4" )
+			area( shape="poly" coords="258, 448, 329, 508, 251, 704, 72, 537" id="3" )
+			area( shape="poly" coords="247, 365, 255, 444, 73, 532, 69, 335" id="2" )
+			area( shape="poly" coords="300, 296, 252, 358, 76, 329, 202, 174" id="1" )
+			area( shape="poly" coords="303, 290, 386, 272, 373, 101, 205, 164" id="0" )
+
+		img(src='img/testStripWizard/holes/numberOverlay.png' usemap='#numberMap' id='wizardTextOverlayHole')
+		img(src='img/testStripWizard/holes/5.png' usemap='#numberMap' id='wizardHoleImage')
+
+	p.wizardSelect.clear This size fits best:
 		select.form-control#wizardHoleSizeSelect
 #wizardStepFinished
 	p.