ZIM js JavaScript Framework

Canvas Components, Controls and more!

ZIM 10.6.0 Launches with Radial Menu and much More for the JavaScript Canvas



ZIM 10.6.0 has launched to Code Creativity on the JavaScript Canvas now with a new Radial Menu interface for the Canvas that makes use of Label on Arc and the ZIM Hierarchy SIMPLE with EXTRA data structure.  This allows the hierarchical menu to be styled down to the individual buttons.  The code example page also features animated text with the new ZIM LabelLetters class to break up letters into individual labels for easy animation effects.



Also introduced is a DPad (Directional Pad) component for the Canvas that replaces keyboard controls for mobile games and apps.  Just put your thumb on that and move the player around!  There are three example files showing the DPad connected to the ZIM MotionController.  The MotionController has a new DPad type (pass in the actual DPad object).  There is also a new “pressdrag” type that only drags an object if pressed on to start – remember this is the MotionController – not ZIM drag(), transform() or gesture() all of which drag easily.  The pressdrag starts off like the others but then you can set the speed and damping of the object being dragged.  The MotionController already has a “pressmove” type but this activates no matter where on the stage you press.  Ah… details.


ZIM has launched a new version of CreateJS that has improved Touch handling in Firefox for desktop.  Recently, Firefox has followed Chrome to disabled certain touch events on Desktop to avoid being detected as mobile.  So adjustments were made to the CreateJS doc.  ZIM also has launched a special version of ThreeJS OrbitController to work with ZIM overlayed on top of a ThreeJS canvas.  In the past, we had to choose one or the other canvas to be interactive – now, we can run orbit controls from the ZIM canvas.

Here is a pre-formatted summary of all the updates – also found at https://zimjs.com/updates.html.

ZIM 10.6.0
Added DPad() class - a round joy-stick-like controller to replace arrow keys on mobile
good for moving things around by passing the DPad into the MotionController
Adjusted MotionController type parameter to accept "DPad"
SEE https://zimjs.com/ten/dpad.html

Added LabelOnArc() to put a ZIM Label on an arc (remember there is LabelOnPath as well)
Added Radial() and RadialMenu() classes
These make radial buttons similar to Tabs
The RadialMenu provides a hierarchy menu similar to List Accordion - but on rings
Adusted Hierarchy to be able to add extra properties in simple format
used in RadialMenu for adding styles to each radial
SEE https://zimjs.com/ten/radial.html

Added LabelLetters() to break apart a Label into individual letter labels
This is handy for animating letters using animate with a series - also for kerning letters
SEE https://zimjs.com/ten/radial.html

Added hold() and noHold() chainable methods
Similar to tap() but will call function when object is held for longer than a specified time
The time is handled with a setInterval at which point it checks if in same position
If it is in a different position then the user must let go and try a hold again to trigger hold
Hold must keep cursor within a certain distance (5px) and be held for a certain time (1500ms)
This can be used to replace shift, ctrl, etc. keys on mobile

Added hold on Blob and Squiggle points to remove points
shift click still removes - but now hold on points will allow mobile users to remove points

Added tiny API for Shape right on Shape (added 300 Bytes)
So the following can be chained right to the Shape object
This means we can do code like the following:
new Shape().s(red).ss(5).mt(100,100).lt(200,100).addTo().alp(.5);
There is no longer a need for the separate call to the graphics property
See https://www.createjs.com/docs/easeljs/classes/Graphics.html for definitions and parameters
NOTE: only the tiny API has been added to the Shape NOT moveTo() for instance...
mt()	moveTo
lt()	lineTo
a() 	arc
at()	arcTo
bt()	bezierCurveTo
qt()	quadraticCurveTo
r() 	rect
cp()	closePath
c() 	clear
f() 	beginFill
lf()	beginLinearGradientFill
rf()	beginRadialGradientFill
bf()	beginBitmapFill
ef()	endFill
ss()	setStrokeStyle
sd()	setStrokeDash
s() 	beginStroke
ls()	beginLinearGradientStroke
rs()	beginRadialGradientStroke
bs()	beginBitmapStroke
es()	endStroke
dr()	drawRect
rr()	drawRoundRect
rc()	drawRoundRectComplex
dc()	drawCircle
de()	drawEllipse
dp()	drawPolyStar
p() 	decodePath

ZIM pos() now uses constants LEFT, RIGHT, CENTER, MIDDLE, TOP, BOTTOM see below
The parameters have been adjusted to (x, y, horizontal, vertical, etc.) BREAK
Use LEFT, RIGHT, CENTER, MIDDLE for horizontal (or true for legacy RIGHT)
Use TOP, BOTTOM, CENTER, MIDDLE for vertical (or true for legacy BOTTOM)
Docs have been updated to better describe pos()
See https://zimjs.com/positioning/

These are equal to the lowercase strings - so align:LEFT is the same as align:"left"
Added these and the colors to the DOCS under the FRAME module
Also added TAU, DEG and RAD constants to the CODE module
If working in radians, TAU is equal to 2 radians (360).
This allows easy visualization of angles - TAU/2 is 180, TAU/4 is 90, etc.
DEG is 180/Math.PI so you multiply a radian value by DEG to get degrees.
RAD is Math.PI/180 so you multiply a degree value by RAD to get radians.
Math.sin(TAU/4); // sin of 90 degrees (1)
// is same as
// is same as
// and
Math.asin(1)*DEG; // is 90

IMPROVEMENT Updated ZIM Frame resize event.  After a resize, Frame now checks immediately then every 50ms until the delay time is met.
The delay default has been changed 1000 on mobile to catch the unbelievable delay iOS has in reporting new screen size.
The delay is 30 on non-mobile which forces the 50ms delay check to 30 (or whatever the delay is if less than 30).
Thanks Drashya Gohil and Frank Los for reporting and testing - hopefully this is the last time this needs to be worked on.
Added a color property to LabelOnPath
IMPROVEMENT Fixed animate() to animate with just an object literal for the props - eg. circle.animate({x:500})
This used to be read as a ZIM DUO object and therefore not work unless a second parameter was added
So we would always add the time for instance: circle.animate({x:500}, time:1000) - even though that is default
Added a setDefault() method and isDefault read only property to ZIM Frame
The methods addTo(), center(), centerReg(), loc(), pos(), Ticker.add()
default to the stage of the first frame made
Use setDefault() to set a frame to the default frame
Previously (and still), you could use the undocumented zimDefaultFrame global variable
Updated Frame asset parameter and Frame.loadAssets() to handle sound with text after the filename extension
by dividing filename with ? and using first part. - Thanks Cajoek on Slack for the prompting!
Added "pressdrag" type to MotionController that makes target follow mouse when pressed on
this is different than "pressmove" which moves the target to wherever the mouse is pressed and then follows the mouse
Thanks Shan Yuan for the request!

PATCHED - (unlikely) BREAK - Radial, RadialMenu, List and Organizer
now have these parameters in this order: color, rollColor, selectedColor, selectedRollColor
This matches with tabs and Pad

UPDATED - ZIM Code Page to ES6, GitHub, ZIM Templates, TypeScript, NPM, Distill, Bubbling Videos
UPDATED - ZIM Tips and ZIM Skool to ES6
UPDATED - CreateJS to 1.2.2 with important changes to help Touch on Desktop - especially for educators
UPDATED - CDN URL to ThreeJS to https://zimjs.org/cdn/r109/three.min.js
and added OrbitControls that work with ZIM even if on own ThreeJS canvas https://zimjs.org/cdn/r109/OrbitControls.js




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


%d bloggers like this: