ZIM js JavaScript Framework

Canvas Components, Controls and more!

Ultimate Responsive, Adaptive and Flexive Design for the Canvas

responsive

This is an overview on how responsive, adaptive and flexive design can work on the Canvas with JavaScript.  It is not a tutorial but there are links to basic CodePen examples that are well documented and easy to follow.

Responsive and adaptive design on the HTML Canvas with JavaScript is a “no brainer”.  By definition, coding is responsive and adaptive.  We just ask for the width or height of the window and apply position and scale based on percentage.

Going one step further to adaptive design, we just use conditionals (if statements) to hide or show content or change its location.  Flexive design is considerably harder but we offer an easy solution.

FIT MODE

There are many cases where a simplified responsive solution will work.  For instance, when we keep the aspect ratio (proportion) of an application and scale the app to fit within a window size.  The ZIM canvas framework, at http://zimjs.com, has a “fit” mode which will fit dimensions you choose in a window. There are many examples at http://zimjs.com/examples.html almost all of which are fit mode.  The drawback of the fit mode is that space may be wasted particularly on mobile so most mobile apps will use the full mode (up next!).

With fit mode, scale and position in the code are relative to your specified dimensions – for example 1024×768.  It is the easiest way to code because you scale and position things once and can do so with absolute precision.  The fit mode will then scale your whole app keeping its aspect ratio until the app fits within the window.  Try out the Example FIT Template

FULL MODE

In full mode, the app takes up the whole window size.  You are responsible for positioning and scaling the interface and content as the window size changes. Try out the Example FULL Template

Scaling and Positioning in Full Mode:

frame.on("resize", function() {
  logo.scaleTo(stage, 5).pos(stage.width*.1, stage.height*.1);
});

When the frame resizes, scale the logo to 5% of the stage width and update the x and y position to 10% the width and height.   scaleTo(stage, 5, 5) would scale to the smaller of 5% the width and 5% the height – much like how the fit mode scales the app to the window size.  Other options are available.  The scaleTo() is just short for a small equation with simple multiplication and division.

Here is a Responsive Scaling and Positioning Example:

And a Minimum and Maximum Scale Example:

LAYOUT for RESPONSIVE FLEX DESIGN

Often, we want to scale and position regions of interface and content but within these regions we want to keep a specific aspect ratio (proportions).  This is what Adobe (now Apache) Flex and subsequently the CSS Flex system is named after.

A Three-region Flex Design was built by ZIM founder in Flash and termed flexive design:

flexive

LAYOUT CLASS

In ZIM, the complex flexive code was expanded to any number of regions and nestable regions.  Using the ZIM Layout code looks very much like CSS styling but it should be remembered that the object literal format {property:value, property:value} has been around in coding long before CSS.

new Layout(stage, [
  {object:title, marginTop:10, maxWidth:80, minHeight:20, align:"left", valign:"top"},
  {object:content, marginTop:5, maxWidth:90}, 
  {object:nav, marginTop:5, maxWidth:80, height:20, backgroundColor:"red"}
]);

The layout object then gets resized with the resize() method in the frame resize event.  Here is a Responsive Flex Layout Example for the Canvas.  The striped boundaries are for visualization only and can be toggled and ultimately, removed before publishing.

ADAPTIVE DESIGN

A simplified distinction between responsive and adaptive design is that responsive stretches, wraps and scales and adaptive actually changes position or interface/content.

With coding, conditionals or if(){} statements are used for adaptive design.  These are also found in media queries to determine different styles for different size screens or in theory media types.  It is understandable why designers get excited about the idea – but coders have been using conditionals since the dawn of code.

if (stage.width > stage.height) {
  horizontalLayout.addTo(stage);
} else {
  verticalLayout.addTo(stage);
} 
// or choose to show certain content based on stage.width
// or choose to use certain interface based on stage.height

The ZIM Adaptive Canvas Example is an early ZIM example that shows a grid layout of 12 horizontal pages and 12 vertical pages.  If the the orientation changes, for example the stage width becomes smaller than the stage height, then the pages are swapped.  Each page has multiple Layout objects.  These are added to a LayoutManager and updated in the frame resize event by a single line of code.

The horizontal layout is shown in the first picture in this post and the vertical layout is shown below.  Click either picture to try the example – resize your browser.  Swiping also works.  As you can see, ZIM provides quite a complete responsive and adaptive multi-page system for the HTML Canvas.

layout2

ABOUT ZIM

ZIM at http://zimjs.com is an open source JavaScript Framework for the HTML Canvas. You code in a text editor and view the code in a Browser. You can make visually rich games, apps, art and sites. ZIM is powered by the wonderful CreateJS with many thanks to their team!

The ZIM site features the following sections:

  • LEARN tutorials on how to start and code in ZIM
  • CODE ZIM Frame template and code context
  • DOCS the objects and commands all defined
  • NEWS latest features and articles
  • ABOUT features, applications, archives, reviews, etc.
  • EXAMPLES sample projects created in ZIM

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Advertisements

Categories

%d bloggers like this: