ZIM BITS TUTORIAL
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>ZIM BITS - Pop Up Windows</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 - Pop Up Windows (2016 - updated 2022)
// pop up windows are handy for alerts and interface buttons
// you should avoid JavaScript alert() as these give a lazy feeling to your app
// ZIM Build provides a Pane class as one of its components
// you can add a message (label) as well as anything else you want
// you can set the pane dimensions, draggable, modal, etc. (see docs)
// STEPS
// 1. make a zim.Pane() passing container dimensions and label
// 2. show() the pane when you want to see it
// 3. add a close event if you want something to happen when the pane closes
// 4. customize your pane with content if you want
// 1. make a pane
const pane = new Pane(500, 200, "SIMPLE MESSAGE")
// 2. show the pane - click off the pane to close it (unless modal is false)
.show(); // CHAINING show()
// here we make a button to open a second pane
const showButton = new Button(140,60,"POP")
.alp(0)
.center()
.tap(function() {paneDrag.show();});
// 3. can add a close event - here we will animate in the button after a half second delay
pane.on("close", function(){
showButton.animate({alpha:1}, 1, null, null, null, .5)
});
// 4. here we customize a pane by adding its own close button
// we set the modal to false so we have to use the close button
// you can add anything you want to the pane - note, its origin is in the center
// here we also use some more parameters and pass in a ZIM Label
// width, height, label, backingColor, backingRollColor, borderColor, borderWidth, corner, shadowColor, shadowBlur, buttonPadding
const closeBut = new Button(41,41,"X","black","#444","white","2",5);
const label = new Label("DRAG MESSAGE", 30, "Courier", white);
// width, height, content, backgroundColor, color, draggable,
const paneDrag = new Pane({
width:400,
height:300,
content:label,
backgroundColor:black,
draggable:true,
close:true
});
paneDrag.x = 400; paneDrag.y = 200;
closeBut.x = 136; closeBut.y = -130;
// EXTRA
// Pane is one of the ZIM Components along with
// Label, Button, RadioButton, CheckBox, Slider, Waiter and Stepper
// along with the ZIM Shapes, these are the main part of the ZIM Build module
// There is also a callback function that can be passed into show()
// to call a function when the pane is closed
const docItems = "Frame,Label,Button,Pane,tap,animate,alp,center,zog";
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>