ZIM BITS TUTORIAL
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>ZIM BITS - Quick Console</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! -->
<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 = dark; // or any HTML color such as "violet" or "#333333"
const outerColor = light;
new Frame(scaling, width, height, color, outerColor, ready);
function ready() {
// given F (Frame), S (Stage), W (width), H (height)
// ZIM BITS - Quick Console (2016 - updated 2022)
// traditionally we log to the console with console.log();
// this is too long when other languages just use trace(), print(), echo()
// the ZIM Wrap module provides global shortcuts and one is for logging
// zog() binds the console.log() so works exactly the same
// including giving document and line numbers
// NOTE - for some reason, Firefox 46 stopped showing file and line numbers
// a message has been sent to Mozilla - we shall see...
// good news - https://bugzilla.mozilla.org/show_bug.cgi?id=1280818
// this is fixed as of Firefox 50
zog("this is logged with zog()");
const x = 1;
zogr(x + " is the x value"); // red
zogy("multiple", "times", "in", "one", "zog"); // yellow
// colored versions are zogr(), zogp(), zogb(), zogg(), zogy(), zogo(), zogd(), zogl()
const label = new Label("See Console - F12", 30, "Courier", "white")
.addTo()
.pos(100, 100);
zog(label);
// Here is a tabular format for objects:
const obj = {name:"Dan Zen", occupation:"Inventor"};
zta(obj);
const docItems = "Frame,Label,pos,addTo,zog,zta";
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>