Winwheel.js tutorial: #20 Making it Responsive


This tutorial shows you how to make the canvas and wheel responsive so that it will fit nicely in to the screen of different devices, not only at the time of loading but also if the web browser window re-sizes. An important thing to know is that the canvas as well as the wheel are resized when responisve mode is on.


Note: the responsive feature is only available from Winwheel version 2.8.



Enabling responsive mode


In the Winwheel properties, set responsive to true, the Winwheel code will take care of the rest. If you are interested in more details on how it works see later in this tutorial. You should design the wheel and specify the wheel parameters for the maximum size - i.e. the desktop size - the responsive feature is designed to scale down the wheel to fit on smaller devices.


There are also some optional parameters specified on the canvas element itself as data- attributes, these are..


Example code


	<canvas id="canvas" width="880" height="440"
		data-responsiveMinWidth="180"
		data-responsiveScaleHeight="true"   /* Optional Parameters */
		data-responsiveMargin="50"
		onClick="startSpin();">
	</canvas>
	<script>
		// The responisve parameter is the only difference needed to make a wheel responsive.
		let theWheel = new Winwheel({
			'numSegments'  : 8,
			'textFontSize' : 28,
			'responsive'   : true,  // This wheel is responsive!
			'segments'     :
			[
				{'fillStyle' : '#eae56f', 'text' : 'Prize 1'},
				{'fillStyle' : '#89f26e', 'text' : 'Prize 2'},
				{'fillStyle' : '#7de6ef', 'text' : 'Prize 3'},
				{'fillStyle' : '#e7706f', 'text' : 'Prize 4'},
				{'fillStyle' : '#eae56f', 'text' : 'Prize 5'},
				{'fillStyle' : '#89f26e', 'text' : 'Prize 6'},
				{'fillStyle' : '#7de6ef', 'text' : 'Prize 7'},
				{'fillStyle' : '#e7706f', 'text' : 'Prize 8'}
			],
			'pins' :
			{
				'outerRadius': 6,
				'responsive' : true, // This must be set to true if pin size is to be responsive.
			},
			'animation' :
			{
				'type'     : 'spinToStop',
				'duration' : 5,
				'spins'    : 8,
			}
		});

		// Called by the onClick of the canvas, starts the spinning.
		function startSpin()
		{
			// Stop any current animation.
			theWheel.stopAnimation(false);

			// Reset the rotation angle to less than or equal to 360 so spinning again works as expected.
			// Setting to modulus (%) 360 keeps the current position.
			theWheel.rotationAngle = theWheel.rotationAngle % 360;

			// Start animation.
			theWheel.startAnimation();
		}
	</script>

Output on the canvas


Click / Tap the wheel to spin




How does the responsive feature work and can I do my own thing?


The responsive feature of Winwheel.js works by including a scaleFactor property in many of the calculations used to create a wheel. When not in responsive mode or at the the maximum size the scaleFactor value is 1.0, when responsive this will be less than 1.0 to make the wheel smaller if the canvas is less than its original size.


How it works is that when the responsive property of the wheel equals true a function called winwheelResize() is bound to the window.load and window.resize events. This function resizes the canvas to fit the screen and also works out the percentage smaller the canvas is than its original size. This percentage is then used to set the scalefactor. For example if the canvas is half the size it was originally that equals 50% so the scaleFactor is set to 0.5.


If you would rather figure out the scaleFactor with your own calculations then that is possible, just be sure to leave the responsive property of the wheel false so the load and resize events are not bound to the winwheelResize() function, instead create your own function and add event listeners for those events and set the scaleFactor as desired. Remember to call the draw() function of the wheel after any change of the scaleFactor so the changes are displayed on the screen.


The scaleFactor property is just like any other property of the wheel, it can be passed in the JSON config when the wheel is created and also updated at any time with JavaScript. You could even animate the scale factor property, using a custom animation, for some interesting effects.


While the scaleFactor could be used to make the wheel larger than normal, its recommended that you design and create the wheel at the maximum size. This is for 2 reasons: 1) the responsive feature only scales down the canvas from the original size, it will not make it larger. 2) When images are involved while scaled down images look ok, images scaled up from the original size will probably look bad.



Previous:
< #19 Playing sounds and music 		Next:
Documentation Index >