ZIM BITS TUTORIAL
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>ZIM BITS - Responsive Design</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 = FULL; // sets stage to window size with no scaling
const color = dark; // or any HTML color such as "violet" or "#333333"
const outerColor = light;
new Frame(scaling, null, null, color, outerColor, ready);
function ready() {
// given F (Frame), S (Stage), W (width), H (height)
// ZIM BITS - Responsive Design (2016 - updated 2022)
// the scaling types passed into ZIM Frame allow for fit
// fit keeps the defined aspect ratio and scales the canvas inside the window
// however for mobile devices, this is not always optimal
// as it can leave outside areas empty
// there is also a full value for the scaling paramater
// this makes the canvas the size of the window or screen on mobile
// ZIM Frame gives resize events and orientation events
// we can then scale and position content on the canvas based on these
// ZIM Pages module has a Layout class to help is with responsive design
// as there is no CSS for the canvas
// To handle adaptive design, we can swap Layouts for portrait and landscape
// in this example, we will keep it simple and assume portrait
// see the ZIM site and the Pages modue live example for a complete system
// see the ZIM templatepages for the ZIM Frame example (use this for latest!)
// STEPS
// 1. put regions like header, content and footer into containers
// 2. these must have bounds otherwise ZIM will tell you in console
// 3. make ZIM Layout object with various regions specified
// 4. resize the Layout object if the page resizes
// 1. make the content
// this often goes in a model.js file if the project is complicated
const header = new Container().addTo();
const title = new Label("ROLL DOTS", 40, "Courier", "white").addTo(header);
// 2. Labels have bounds set so Container will inherit Label bounds
// if you need to set bounds it would be eg. header.setBounds(0,0,600,100);
// a litte light interactive content to cycle dot color on rollover
// NOTE: would now code this with hitTestGrid() for extra responsiveness
// 2. ZIM Circles also have bounds so the Container will inherit the sum of these
const content = new Container()
.addTo()
.alp(.8);
// would use ZIM Tile() for this now...
let tile; const cols = 10; const r = 15; let color;
const colors = [blue, pink, grey, orange, brown];
loop (cols*cols, function(i) {
color = rand(colors.length-1);
tile = new Circle(r,colors[color]);
tile.c = color; // to help in rollover function
content.addChild(tile);
tile.x = i%cols*30+r;
tile.y = Math.floor(i/cols)*30+r;
});
content.on("mouseover", function(e) {
// might want to use hitTestGrid for maximum efficiency
tile = e.target;
tile.color = colors[++tile.c%colors.length];
S.update();
});
// we may as well put our footer on the bottom
// makeFooter() can have a hard coded width passed in
// as it was made to handle the fit scaling (don't worry about it)
// 2. the footer also was coded to have bounds set
const docItems = "Frame,Container,Shape,Circle,Label,Pane,Tile,hitTestGrid,alp,scaleTo,addTo,Layout,rand,zog";
const footer = makeFooter(S, W, H, 900, docItems);
// 3. make ZIM Layout object
// there are lots of options for the region objects
// like align, valign, backgroundColor, height for the vertical regions
// there is a slightly different region object for horizontal
// this can get quite tricky but you get the hang of it
// see the docs and the ZIM Pages live example
// parameters: container, regionArray, bottomMargin, backgroundColor, vertical, shape
// the shape is where the region bounds will be drawn
// note: all numbers are in percent of the container (in this case stage)
// holder, regions, lastMargin, lastMarginMin, backgroundColor, vertical, showRegions, scalingObject, hideKey
const layout = new Layout(S, [
{object:header, minHeight:10, marginTop:5, maxWidth:60},
{object:content, minHeight:60, marginTop:5, maxWidth:90},
{object:footer, minHeight:10, marginTop:5, maxWidth:90}
], 5, null, null, true, true); // true for vertical then true for bounds
// EXTRA
// you can nest regions - here we have added to the stage
// but we could add another layout in the content area for instance
// you can put multiple layouts into a layoutManager()
// this lets you scale, hide and dispose all layouts at once
// you can use ZIM Grid and Guide classes to help dimension regions
// you can make containers have their own padding
// and set regions to 100 in width with backgroundColors
// to get different backing colors
// here is a message indicating that you can toggle the region bounds with B
const pane = new Pane(600, 200, "B key toggles Bounds")
.alp(.7)
.scaleTo(S, 80)
.show();
timeout(1.8, function() {pane.hide();});
// 4. resize the Layout object when the page resizes
// use the ZIM Frame resize event
// there is also an orient event that you can capture to swap regions
F.on("resize", resize);
function resize() {
// resize the layout
layout.resize();
}
} // 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>