YOUR GUIDE TO

Responsive and Adaptive Design on the Canvas

These canvas controls will help make your app just right!

Image for post
Image for post
ZIM Pages demo with responsive and adaptive design on the canvas

Basic Responsive Design on the Canvas

Image for post
Image for post
ZIM Frame page with options for template
const frame = new Frame("fit", 1024, 768); // fit mode // ORconst frame = new Frame(); // full mode by default

For mobile, we use the full scaling mode of the Frame

SCALING AND POSITIONING ON THE CANVAS

const frame = new Frame();
frame.on("ready", ()=>{
let stageW = frame.width;
let stageH = frame.height;

const circle = new Circle();

frame.on("resize", ()=>{
// get new width and height
stageW = frame.width;
stageH = frame.height;

// scale and position content
circle
.scaleTo(stage, 20)
.pos(stageW * .1, stageH * .1);
});
}); // end ready
Image for post
Image for post
Responsive Canvas 2 with ZIM showing min and max scale

GRIDS AND GUIDES

new Grid();
new Guide({vertical:false}); // horizontal Guide
Grids and Guides in ZIM (older code using zim namespace which is no longer needed)

WRAPPING ON THE CANVAS

Image for post
Image for post
ZIM Wrapper() class :: similar to the CSS FlexBox
var circles = [];
loop(40, function () {
circles.push(new Circle(20, [orange, green, blue]));
});
var wrapper = new Wrapper(circles, 400, 20, 20).center();
interval(.5, function () {
wrapper.resize(rand(300,500)).outline();
stage.update();
});
Image for post
Image for post
Wrapper on the Canvas

Responsive and Adaptive Canvas Controls

Image for post
Image for post
Page and layout controls for the canvas

TILE

YouTube video for responsive Tile in ZIM

LAYOUT

Image for post
Image for post
Flexive Design (2014) in Adobe Flash and Flex applications
YouTube video for Layout Class in ZIM (old ZIM but same principles)
// these would be containers with your content
// make sure that bounds are set on containers
const header = new Rectangle(500, 200, blue);
const content = new Rectangle(600, 500, green);
const footer = new Rectangle(500, 200, blue);
stage.addChild(header, content, footer);

// make the Layout
const layout = new Layout({
holder:stage,
regions:[
{object:header, marginTop:5, maxWidth:80, minHeight:10},
{object:content, marginTop:5, maxWidth:90},
{object:footer, marginTop:5, maxWidth:80, height:10}
],
lastMargin:5
});
// using a manager lets you resize all layouts at once
// otherwise you could resize() each layout individually
const manager = new LayoutManager();
manager.add(layout);

frame.on("resize", () => {
manager.resize();
stage.update();
});
Image for post
Image for post
Quick example of laying out vertical regions on the canvas

PAGES

Image for post
Image for post
Swiping between pages on the canvas
// for responsive design, these pages would hold Layout objects
const pH1 = new Page(stageW, stageH, green, yellow);
const pH2 = new Page(stageW, stageH, orange, red);
// the Pages object sets up swiping between pages
// for button interaction use the go() method
const pagesH = new Pages([
{page:pH1, swipe:[pH2, pH2]},
{page:pH2, swipe:[pH1, pH1]},
], "bubbleZIM", .7).center();

For adaptive, we swap the pages objects!

frame.on("orientation", () => {
if (frame.orientation == "horizontal") {
// will want to match current page with the go() method
hPages.addTo().enable();
vPages.removeFrom().disable();
} else {
vPages.addTo().enable();
hPages.removeFrom().disable();
}
});

MANAGERS

const manager = new ResizeManager();
manager.add([pages, layout, grid, guide]);
frame.on("resize", () => {
manager.resize();
});

CONCLUSION

Image for post
Image for post
ZIM Model View Controller demo with responsive and adaptive design on the canvas

At ZIM, we call them Zapps!

Further reading

Image for post
Image for post

Written by

Inventor, Founder of ZIM JavaScript Canvas Framework and Nodism, Professor of Interactive Media at Sheridan, Canadian New Media Awards Programmer and Educator

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store