ZIM BITS TUTORIAL

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>ZIM BITS - Pizzazz 2 - Icon Buttons and Toggle Buttons</title>

<!-- Welcome to ZIM at https://zimjs.com - Code Creativity!              	        -->
<!-- ZIM runs on the HTML Canvas powered by JavaScript and CreateJS https://createjs.com -->
<!-- Founded by Inventor Dan Zen - https://danzen.com - Canadian New Media Award Winner 	-->
<!-- ZIM is free to use. You can donate to help improve ZIM at https://zimjs.com/donate 	-->

<script src="https://zimjs.org/cdn/1.3.4/createjs.js"></script>
<script src="https://zimjs.org/cdn/01/zim_doc.js"></script>

<!-- 0. import the pizzazz_02.js file of icons -->
<script src="https://zimjs.org/cdn/pizzazz_02.js"></script>
<script src="https://zimjs.com/bits/footer10.js"></script><!-- you will not need this -->

<script>

// SCALING OPTIONS
// scaling can have values as follows with full being the default
// FIT	sets canvas and stage to dimensions and scales to fit inside window size
// FILL	sets canvas and stage to dimensions and scales to fit outside window size
// FULL	sets stage to window size with no scaling
// "tagID"	add canvas to HTML tag of ID - set to dimensions if provided - no scaling

const scaling = FIT; // this will resize to fit inside the screen dimensions
const width = 1000;
const height = 800;
const color = darker;
const outerColor = light;

new Frame(scaling, width, height, color, outerColor, ready);
function ready() {
	
	// given F (Frame), S (Stage), W (width), H (height)

	// ZIM BITS - Pizzazz 2 - Icon Buttons and Toggle Buttons (2016 - updated 2022)
	
	// ZIM BUTTON
	// Button now has icon and rollIcon parameters
	// these accept any display object and will show instead of text
	// you can use then to go on top of the basic rectangle (or circle using corner:width/2)
	// or they can go on top of a custom backing that you supply the button with backing and rollbacking parameters
	
	// these examples (on three pages) show mostly buttons created with Pizzazz 2 icons
	// but there are three toggle buttons on the last page that use custom bitmaps as icons
	
	// Button now has toggle and rollToggle parameters
	// that toggle to these when pressed (or mousedowned depending on the toggleEvent parameter)
	// 1. if toggle is a string then the label is toggled (does not work if icon is set)
	// 2. if the toggle is a display object and the icon is set then toggle toggles with the icon
	// and rollToggle will toggle with the rollIcon
	// 3. if icon is not set then toggle will toggle with the backing
	// and rollToggle will toggle with the rollbacking
	
	// in these examples, the video play toggles with pause and sound toggles with mute
	// on the stylish page the 1, 2, 3 buttons toggle to look depressed
	// they control the alpha of the other buttons based on their toggle state
	
	
	// PIZZAZZ 2

	// NOTE:  if using the CDN zim_pizzazz import, then the pizzazz namespace is not needed
	// Also, all the pizzazz libraries are included
	// See the https://zimjs.com/code.html template for Pizzazz.

	// pizzazz_02.js is similar to pizzazz_01.js (see the related ZIM Bit on Pizzazz Backings)
	// this Pizzazz set features standard interface icons
	// these are Shape objects that can be made with pizzazz.makeIcon
	// makeIcons adds a few tricks like skewing and making multiple copies
	// that can be scaled, alpha set and offset
	// the parameters are as follows followed by and example:
	
	// type, color, scale, multi, multiAlpha, multiScale, multiX, multiY, skewX, skewY, backing
	// const icon = pizzazz.makeIcon("play", green, 1, 6);
	// icon.center();
	
	// most of the examples below use pizzazz icons and then pass them into buttons as the icon param
	// because the buttons are presented in sets, it is often easier to abstract the similar settings
	// so we are usually calling a function which sets the common properties
	// and then passing in to the function the properties that we want to change
	
	// STEPS
	
	// 0. A nice easy example - as the rest are put in loops for efficiency, etc.
	// 1. use loop() to loop through the pizzazz.icons object to get the types
	// 2. make an icon using pizzazz.makeIcon() which accepts ZIM DUO config object
	// 3. make icons for rollover too (optional)
	// 4. create a button for each icon and pass the icons in as icon and rollIcon
	// 5. note that we can rotate icons - eg. to change the direction of an arrow
	// 6. create a sample set of video controls
	// 7. create a container to hold the controls
	// 8. make the play button toggle between two icons: play and pause
	// 9. make the sound button toggle between two icons: sound and mute
	// 10. once the icons are made, add them to the Button with icon, rollIcon, toggle and rollToggle params
	// 11. add pizzazz to buttons with skewing and multiplying them
	// 12. you can also change the alpha and offset of the multi icons
	// 13. you can also apply a backing to the icon such as any pizzazz_01 backings or your own custom shapes
	// 14. you can make buttons with custom images
	// 15. create toggle buttons by passing in toggle and optional rollToggle
	// 16. use the toggled property of the button to find the toggled state of the button
	// 17. create a radio button navigation to traverse the pages
	// 18. create a Pages object to handle transitions between pages
	// 19. on the radioButtons change event change the pages with pages.go()
	// 20. get the new page to load
	// 21. get the direction for the slide transition
	
	/////////////////  STANDARD  //////////////////
	
	pizzazz.listIcons()
	
	// 0. A nice easy example - as the rest are put in loops for efficiency, etc.
	
	const info = new Button({
		width:50,
		height:50,
		backgroundColor:blue, // or "red", "#666" etc.
		rollBackgroundColor:pink,
		corner:0,
		label:"",
		icon:pizzazz.makeIcon("info", "white").sca(.7) // scaling is optional
	})
		.pos(W - 100, 50)
	info.on("click", function(){zgo("https://zimjs.com/bits/icons.html")});
	
	
	// 1. use loop() to loop through the pizzazz.icons object to get the types
	// or use a for (type in pizzazz.icons) {} but then we need a count variable too
	const standard = new Container();
	standard.name = "standard";
	let icon;
	let button;
	zogr(pizzazz.icons)
	loop(pizzazz.icons, function(type, value, count) { // value not used in this case
		// 2. make an icon using pizzazz.makeIcon() which accepts ZIM DUO config object
		// try a skewX of 10 or 20 and see if you like that touch of pizzazz!
		icon =  pizzazz.makeIcon({
			type:type,
			color:dark,
			scale:1.2,
			multi:1,
			multiAlpha:.5,
			multiScale:0,
			multiX:2,
			multiY:2,
			skewX:0,
			skewY:0
		});
		// 3. make icons for rollover too (optional)
		const rollIcon =  pizzazz.makeIcon({
			type:type,
			color:"white",
			scale:1.2,
		});
		// 4. create a button for each icon and pass the icons in as icon and rollIcon
		button = new Button({
			width:90,
			height:90,
			backgroundColor:lighter,
			rollBackgroundColor:green,
			gradient:.3,
			corner:45,
			icon:icon,
			rollIcon:rollIcon
		});
	
		// can access the icon and rollIcon once in the button like so
		button.icon.alpha = .9;
		button.rollIcon.alpha = .9;
	
		// 5. note that we can rotate icons - eg. to change the direction of an arrow
		if (icon.type == "arrowstick") {
			icon.rotation = 180; // or button.icon.rotation = 180;
			rollIcon.rotation = 180;
		}
		button.loc(45 + 120 * (count%8), 140 + 110 * Math.floor(count/8), standard);
	});
	
	///////////////////// VIDEO /////////////////////
	
	// 6. create a sample set of video controls
	const video = new Container(W, H);
	video.name = "video";
	
	// just show a rect where video would be - see ZIM Bits video example for real
	const pretend = new Rectangle(600, 360, green)
		.addTo(video)
		.pos(200, 140);
	
	const spacing = 10;
	const iconScale = .6;
	const iconColor = light
	const buttonSize = 40;
	const buttonColor = grey;
	const buttonRoll = silver;
	const rollIconColor = dark;
	
	// 7. create a container to hold the controls
	const controls = new Container()
		.addTo(video)
		.pos(pretend.x, pretend.y + pretend.height + spacing);
	
	// 8. make the play button toggle between two icons: play and pause
	const playButton = makeButton("play", "pause").addTo(controls);
	
	const restartButton = makeButton("restart").addTo(controls);
	restartButton.x = playButton.x + restartButton.width + spacing;
	
	const rwButton = makeButton("rewind");
	controls.addChild(rwButton);
	rwButton.x = restartButton.x + rwButton.width + spacing;
	
	const ffButton = makeButton("fastforward").addTo(controls);
	ffButton.x = rwButton.x + ffButton.width + spacing;
	
	// 9. make the sound button toggle between two icons: sound and mute
	const soundButton = makeButton("sound", "mute").addTo(controls);
	soundButton.x = ffButton.x + soundButton.width + spacing;
	
	
	function makeButton(type, toggle) {
		const icon =  pizzazz.makeIcon({
			type:type,
			color:iconColor,
			scale:iconScale
		});
		const rollIcon =  pizzazz.makeIcon({
			type:type,
			color:rollIconColor,
			scale:iconScale
		});
	
		let toggleIcon;
		let rollToggleIcon;
		if (toggle) {
			toggleIcon = pizzazz.makeIcon({
				type:toggle,
				color:iconColor,
				scale:iconScale
			});
			rollToggleIcon = pizzazz.makeIcon({
				type:toggle,
				color:rollIconColor,
				scale:iconScale
			});
		}
		// 10. once the icons are made, add them to the Button with icon, rollIcon, toggle and rollToggle params
		const button = new Button({
			width:buttonSize,
			height:buttonSize,
			backgroundColor:buttonColor,
			rollBackgroundColor:buttonRoll,
			gradient:.3,
			corner:4,
			icon:icon,
			rollIcon:rollIcon,
			toggleIcon:toggleIcon,
			rollToggleIcon:rollToggleIcon,
			shadowColor:-1
		});
		return button;
	}
	
	///////////////////  FANCY  /////////////////////
	
	const stylish = new Container(W, H);
	stylish.name = "stylish";
	
	// 11. add pizzazz to buttons with skewing and multiplying them
	const settings = makeStylish({
		type:"settings",
		rotation:0,
		proportion:1.4,
		skew:20
	})
		.center(stylish)
		.mov(-200, -110);
	
	const heart = makeStylish({
		type:"heart",
		rotation:0,
		proportion:1.5,
		multi:3,
		multiScale:.6
	})
		.center(stylish)
		.mov(0, -110);
	
	const arrow = makeStylish({
		type:"arrow",
		rotation:0,
		proportion:1.7,
		multi:2,
		multiScale:.1,
		offset:2
	})
		.center(stylish)
		.mov(200, -110);
	
	// just keeping some things the same and changing others
	function makeStylish(type, rotation, proportion, multi, multiScale, offset, skew, backing) {
		let duo; if (duo = zob(makeStylish, arguments)) return duo;
	
		// 12. you can also change the alpha and offset of the multi icons
		// 13. you can also apply a backing to the icon such as any pizzazz_01 backings or your own custom shapes
		// type, color, scale, multi, multiAlpha, multiScale, multiX, multiY, skewX, skewY, backing
		const icon = pizzazz.makeIcon(type, blue, 1.5, multi, null, multiScale, offset, offset, skew, null, backing)
			.rot(rotation);
		const rollIcon = pizzazz.makeIcon(type, pink, 1.5, multi, null, multiScale, offset, offset, skew, null, backing)
			.rot(rotation);
		const button = new Button({
			width:icon.width*proportion, height:icon.width*proportion,
			icon:icon,
			rollIcon:rollIcon,
			corner:icon.width*proportion/2,
			backgroundColor:"#111",
			rollBackgroundColor:"#000",
			borderColor:"#333",
			borderWidth:3
		})
		return button;
	}
	
	// 14. you can make buttons with custom images
	
	// thanks - http://sharpfellows.com/post/WPFE-A-glass-button
	F.loadAssets(["glass.png", "glass2.png", "glass3.png", "glass4.png"], "https://zimjs.com/bits/view/assets/");
	F.on("complete", function() {
		const icon1 = new Pic("glass.png").centerReg({add:false}).sca(.6); // up not rolled over
		const icon2 = new Pic("glass2.png").centerReg({add:false}).sca(.6); // down not rolled over
		const icon3 = new Pic("glass3.png").centerReg({add:false}).sca(.6); // up rolled over
		const icon4 = new Pic("glass4.png").centerReg({add:false}).sca(.6); // down rolled over
	
		// 15. create toggle buttons by passing in toggle and optional rollToggle
		// if you pass in a string for toggle, the button toggles this with the label text
		// if you pass in a display object and icon is set, then the button toggles toggle with the icon
		// otherwise the button toggles toggle with the backing
		const glass1 = new Button({
			width:icon1.width*icon1.scaleX,
			height:icon1.height*icon1.scaleY,
			label:"1",
			backing:icon1, rollBacking:icon3,
			toggleIcon:icon2, rollToggleIcon:icon4,
			borderWidth:-1
		})
			.center(stylish)
			.mov(-100, 90);
	
		const glass2 = glass1.clone()
			.addTo(stylish)
			.mov(100);
		glass2.text = 2;
	
		const glass3 = glass1.clone()
			.addTo(stylish)
			.mov(200);
		glass3.text = 3;
	
		// 16. use the toggled property of the button to find the toggled state of the button
		glass1.on("click", function(e){settings.alpha = e.target.toggled?.2:1; S.update();});
		glass2.on("click", function(e){heart.alpha = e.target.toggled?.2:1; S.update();});
		glass3.on("click", function(e){arrow.alpha = e.target.toggled?.2:1; S.update();});
	
	});
	
	
	/////////////////////  NAV  /////////////////////
	
	// 17. create a radio button navigation to traverse the pages
	const bar = new Rectangle(W, 70, "#444")
		.pos(null, 600);
	const options = new RadioButtons({
		size:35,
		buttons:["standard", "video", "stylish"],
		vertical:false,
		backgroundColor:silver,
		always:true
	
	})
		.center()
		.mov(0, 238);
	options.selectedIndex = 0;
	
	// 18. create a Pages object to handle transitions between pages
	const pages = new Pages({
		holder:S,
		pages:[standard, video, stylish],
		transition:"slide",
		speed:.6
	}).addTo();
	
	// 19. on the radioButtons change event change the pages with pages.go()
	const content = [standard, video, stylish];
	options.on("change", function() {
	
		// 20. get the new page to load
		const newPage = content[options.selectedIndex];
	
		// 21. get the direction for the slide transition
		const direction = newPage==standard?"left":newPage==stylish?"right":pages.page==standard?"right":"left";
	
		// // same as above but with switch statement
		// const direction;
		// switch (newPage) {
		// 	case standard:
		// 		direction = "left";
		// 		break;
		// 	case stylish:
		// 		direction = "right";
		// 		break;
		// 	default:
		// 		switch (pages.page) {
		// 			case standard:
		// 				direction = "right";
		// 				break;
		// 			default:
		// 				direction = "left";
		// 		}
		// }
	
		// // same as above but with if statement
		// const direction;
		// if (newPage == standard) {
		// 	direction = "left"
		// } else if (newPage == stylish) {
		// 	direction = "right";
		// } else {
		// 	if (pages.page == standard) {
		// 		direction = "right";
		// 	} else {
		// 		direction = "left";
		// 	}
		// }
	
		pages.go(newPage, direction);
	
		// // just swapping pages without animation
		// loop(content, function(c) {
		// 	S.removeChild(c);
		// });
		// S.addChild(content[options.selectedIndex]);
		// S.update();
	});
	
	
	const title = "ZIM Pizzaz 2 - Icon Buttons and Toggle Buttons";
	new Label(title, 30, null, "#666")
			.pos(70, 70);

	const docItems = "Frame,Container,Rectangle,Label,Button,RadioButtons,loop,pos,mov,rot,sca,addTo,centerReg,center,Pages,loop,zog,makeIcon";
	makeFooter(S, W, H, null, docItems); // ZIM BITS footer - you will not need this

} // end of ready

</script>

<meta name="viewport" content="width=device-width, user-scalable=no" />

</head>

<body>
<!-- canvas with id="myCanvas" is made by zim Frame -->
</body>
</html>