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>