ZIM BITS TUTORIAL
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>ZIM BITS - Two Canvases</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 - http://danzen.com - Canadian New Media Award Winner -->
<!-- ZIM is free to use. You can donate to help improve ZIM at http://zimjs.com/donate -->
<script src="https://zimjs.org/cdn/1.3.4/createjs.js"></script>
<script src="https://zimjs.org/cdn/01/zim_min.js"></script>
<!-- use zimjs.com/distill for minified individual functions! -->
<style>
body {margin:0px; padding:0px; background-color:#eee;}
#one {position:relative; background-color:#333; width:200px; height:200px; display:inline-block; margin-right:20px;}
#two {position:relative; background-color:#333; width:200px; height:150px; display:inline-block; vertical-align:top;}
main {width:420px; margin:0px auto;}
nav, footer {width:100%; padding:20px 0px; text-align:center;}
a {outline:none;}
footer a {
font-family:Courier New; padding:5px 8px; background-color:#ddd;
border:dashed thin #666; text-decoration:none; color:#666;
}
footer a:hover {background-color:#fff;}
footer {margin-bottom:30px;}
</style>
<script>
window.addEventListener("DOMContentLoaded", function(e) { // make sure tag is loaded!
// 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
let scaling = "one"; // for inline canvas set scaling to tagID
// optional - can remove dimensions to set stage to tag dimensions
// then make sure to give tag dimensions in pixels, percentage, etc.
// Frame will place a canvas there an not scale the canvas
// so you would then scale within the code if desired
// see https://zimjs.com/F.html and Docs for more
// ZIM BITS - Two Canvases (2016 - updated 2022)
// sometimes we want two canvases like the current ZIM home page
// there is one canvas for the interactive logo
// and another canvas for the happy sun face example
// STEPS
// 1. make div tags to hold the two canvases (or other types of tags - but NOT canvas tags)
// 2. pass the name of the tag and the dimensions for the canvas to ZIM Frame
// 3. add things to the stage, etc.
// 4. use ZIM Frame to add another canvas (note the two different variables for frame)
// 5. add things to the second stage, etc.
// STEP 1 is down below in the HTML code
// 2. pass the name of the tag and the dimensions for the canvas to ZIM Frame
// ZIM Frame makes the canvas for you so do not make a canvas tag yourself - just a holder for the canvas
// here we call our first frame variable frame1 and we will call the second frame variable frame2
// all the variables inside the ready function are protected so they can be whatever they like
// for instance, it is okay to call the stage, stage in both ready functions
// as each ready function has its own scope
// just for reference, ZIM Frame will make canvases with the IDs of oneCanvas and twoCanvas
// as we passed in one and two as the holder tag names (so it appends the word Canvas)
// if we used fit, outside or full instead of a tag name then it would set the canvas to an id of myCanvas
// you can override this with the canvasName parameter in ZIM Frame
// HERE IS A DOUBLE - where one canvas is on top of another https://zimjs.com/bits/view/double.html
let width = 200;
let height = 200;
new Frame(scaling, width, height, null, null, ready);
function ready() {
zog("ready from ZIM Frame 1");
// 3. add things to the stage, etc.
const circle = new Circle(60, blue)
.center() // both centers and does addChild
.drag();
} // end of ready
// 4. use ZIM Frame to add another canvas (note the two different variables for frame)
scaling = "two";
width = 200;
height = 150;
new Frame(scaling, width, height, null, null, ready2);
function ready2(F2, S2, W2, H2) { // collect the frame specific details as parameters
zog("ready from ZIM Frame 2");
// 5. add things to the second stage, etc.
const square = new Rectangle(100, 100, yellow)
.center(S2) // need stage - otherwise centers on default Frame's (frame1) stage
.drag();
S2.update();
} // end of ready
}); // end of dom loaded
</script>
<meta name="viewport" content="width=device-width, user-scalable=no" />
</head>
<body>
<main>
<nav>
<a href="https://zimjs.com/bits.html#two">
<img src="https://zimjs.com/images/zimbits.png"></a>
</nav>
<!-- 1. make div tags to hold the two canvases (or other types of tags - but NOT canvas tags) -->
<div id="one"></div><div id="two"></div>
<footer>
<a href="https://zimjs.com/bits.html#two">ZIM BITS</a>
<a href="https://zimjs.com/bits/two.html">SEE CODE</a>
</footer>
</main>
</body>
</html>