ZIM js JavaScript Framework

Canvas Components, Controls and more!

ZIM 2.6 Launches with Dial, Indicator and Pad Components plus Easy Asset Loading for the HTML 5 Canvas with JavaScript and CreateJS


ZIM 2.6 Duo has launched http://zimjs.com with three new components and updates to Tab and Slider components.  There are now a lucky 13 components in the free library of interactive media modules for the HTML 5 Canvas and JavaScript working with the free and fantastic CreateJS library.  These are mobile optimized with zim.OPTIMIZE set although you should still cache parts for full optimization.

The Dial component lets users set values from a min to a max and you can specify step and tickers.  There are arrow, dot and line indicators.  The dial dispatches a change event like most of the other components and then gives you a currentValue property.  See the ZIM Bit Example.

The Indicator component is a row of lights that can be use to indicate the status of your app – what page or level the user is on, or the current screen, etc.  It can fill in earlier lights as seen in the example above on the left or it can just show one light at a time as seen on the right.

The Pad component is live but will be featured in a future ZIM Bits and is basically rows of tabs.  Inventor Dan Zen is using the pad for an upcoming puzzle app!


ZIM Frame, the 6K template for ZIM that handles canvas creation and scaling, now includes asset loading which is just a wrapper for the CreateJS PreloadJS module.  The PreloadJS module is very flexible and powerful but can be a touch daunting and tricky to remember.  So Frame focuses on loading pictures and sounds like so with a frame object called frame:

frame.on("complete") {var myPic = frame.asset("mypicture.jpg");}

This myPic is now a createjs.Bitmap that you can add to the stage, or wherever.  You can load multiple assets by passing in an array of file names.  And you can specify a path:

frame.loadAssets(["mysound.mp3", "mypicture.jpg"], "mypath/");
frame.on("complete") {var mySound = frame.asset("mysound.mp3").play();}

This will play a sound when it loads and mySound will be the createjs sound instance.  At which point you can adjust volume: mySound.volume = .5;

— 16 —



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


This entry was posted on March 31, 2016 by in interactive media, javascript, launch and tagged , , , , , , , , , , , , , .


%d bloggers like this: