Frame
zim class - extends a createjs EventDispatcher
DESCRIPTION
Frame creates a canvas and stage.
Frame lets you decide how you want your stage to scale.
It also provides events for ready, resizing and orientation change
as well as a way to remake the canvas if necessary.
Frame handles loading Bitmap, Sound, etc. assets by wrapping PreloadJS
See https://zimjs.com/frame.html for sample templates using Frame.
The first frame made is called the zimDefaultFrame - or zdf.
It will also have the default stage for addTo(), center(), etc.
Use setDefault() on another frame to change the default frame.
As of ZIM ZIM 01, ZIM will make F, S, W, H global variables
that reference the zimDefaultFrame, its stage and the stage width and height.
The width and height will be updated in FULL mode if the window size changes.
ZIM ASSET TOOL
See https://zimjs.com/assetlist/
Optionally use this tool to prepare an array of assets from a folder.
CANVAS ALTERNATIVE CONTENT
Frame will move any tag with an id of canvasIDAlternative into the canvas tag.
By default, the canvasID is "myCanvas" so use an id of "myCanvasAlternative".
This allows you to show content for non-canvas browsers.
The content may also be indexed by search engines - one would hope
and is read by screen readers (see also ZIM Accessibility).
NOTE
addTo(), center(), centerReg(), loc(), pos(), new Ticker.add()
default to the stage of the first frame made
use the setDefault() method to set a frame to the default frame
NOTE
here are some tips that relate to Frame:
https://zimjs.com/tips#FRAMEhttps://zimjs.com/tips#IMAGEShttps://zimjs.com/tips#SOUNDhttps://zimjs.com/tips#FULLSCREENNOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// load assets such as images right in Frame call using a url
// put multiple assets in an array - see assets parameter for options
// the path and progress are optional
new Frame(FIT, 1024, 768, "#ddd", "#333", ready, "image.png", "assets/", new Waiter());
function ready() {
new Pic("image.png").center(); // formerly had used asset("image.png").center();
} // end ready
EXAMPLE
// load assets on-demand inside ready event
new Frame(FIT, 1024, 768, dark, light, ready);
function ready() {
// code here - or optionally load assets
F.loadAssets("image.png");
F.on("complete", ()=>{
// app code goes here if waiting for assets
var image = new Pic("image.png");
image.center();
S.update();
}); // end asset complete
// OR for multiple assets in an assets folder:
F.loadAssets(["sound.mp3", "spriteData.json", "spriteImage.png"], "assets/");
F.on("complete", ()=>{
// app code goes here if waiting for assets
const soundInstance = new Aud("sound.mp3").play(); // formerly asset("sound.mp3").play()
// later soundInstance.paused = true; // etc.
const sprite = new Sprite({json:"spriteData.json"});
sprite.center().run(2);
// the image for the sprite is specified in the JSON
// but we still want to load it so it is in the loadAssets()
// and the JSON data will take care of adding it to the sprite
S.update();
}); // end asset complete
} // end of ready
EXAMPLE
// lazy-load image - added in ZIM Cat
// this means that the asset is not passed into the Frame in the assets parameter
// and it is not added with loadAssets() but rather just called with asset().
new Frame(FIT, 1024, 768, dark, light, ready); // no assets parameter
function ready() {
// lazy-loading will make a container with type "AC" (Asset Container)
// it will store requested transform information
// such as that the container is supposed to be centered in this case
// (remember, the dimensions are unknown until the Bitmap is loaded)
// then call loadAssets() behind the scene
// and add the Bitmap to the container
// if loading is successful, it will rename the type to "Image"
// then it will use the dimensions to center the container
new Pic("image.jpg").center(); // formerly asset("image.jpg")
// there are many things that can be done to an object
// that need dimensions - ZIM tries to handle these
// but if there is something obscure like gesture bounds
// that ZIM may have missed then use conventional loading
// or try loading with dimensions provided:
new Pic("image.jpg", 100, 200).center();
// NOTE: do not lazy-load Sprite images.
}
EXAMPLE
// With multiple loadAsset() calls you can assign the results to a variable
// and use that variable for the events independently
// Warning, each of these will still call a frame complete event
// so usually you would use one or the other but not both
const first = F.loadAssets("image.png");
first.on("complete", ()=>{
const image = new Pic("image.png").center();
S.update();
});
const second = F.loadAssets("sound.mp3");
second.on("complete", ()=>{
const sound = new Aud("sound.mp3").play();
});
EXAMPLE
// if app is in an iFrame, this will get keyboardAccess using a hidden F.keyboardMessage()
// good for games that need keyboard if the game is in an iFrame like the Editor or CodePen
new Pane({content:"START", keyboardAccess:true}).show();
EXAMPLE
// dynamically adjusting touch - there are also touch and singleTouch parameters of Frame
// also, drag() has its own singleTouch parameter
const radio = new RadioButtons(30, ["MULTI TOUCH", "SINGLE TOUCH", "NO TOUCH"]).center().mov(0,-200).change(()=>{
if (radio.text.includes("MULTI")) F.singleTouch = false;
else if (radio.text.includes("SINGLE")) F.singleTouch = true;
else F.touch = false;
});
new Circle(50,white,red,5).center().mov(-100,50).drag();
new Circle(50,white,purple,5).center().mov(100,50).drag();
PARAMETERS supports DUO - parameters or single object with properties below
scaling - (default FULL) can have values as follows
Note: as of ZIM Cat 04, the constant FIT or the string "fit", etc. can be used
FIT sets canvas and stage to dimensions and scales to fit inside window size
FILL sets canvas and stage to dimensions and scales to fill window size (previously "outside")
FULL sets stage to window size with no scaling
"tagID" add canvas to HTML tag of ID - set to dimensions if provided - no scaling
FIT and FILL: width and height will set the stage width and height and the canvas is then scaled
this is handy because all your dimensions are set to start
FULL: width and height are ignored when scaling as these are set to the window width and height
TAG: if width and height are provided then the canvas and stage will be these dimensions
if width and height are not provided in tag mode, the canvas and stage will take the dimensions of the tag
this means, the tag must have some sort of width and height dimensions set or it will be really big!
In this mode, you may need to style the containing tag with CSS to get a desired effect.
width - (default 1024 except for full**) the width of the stage
height - (default 768 except for full**) the height of the stage
** if tag mode and no width or height then these will be the width and height of the tag
color - (default null) the background color of the frame (any CSS value) - or just set in styles
will be see-through if not specified
outerColor - (default null) the body color of the HTML page - null will not adjust the background color
ready - (default null) - an callback function for when the Frame is ready - rather than using the "ready" event
this will be passed frame specific (frame, stage, width, height, mobile) parameters
the stage is updated after this function is called
assets - (default null) - 1. a string asset or 2. an array of assets, 3. ZIM asset object, 4. ZIM multi-asset object
1. "logo.png"
2. ["logo.png", "bounce.mp3", "Reuben.otf"]
3. {id:"string", src:"logo.png", path:"assets/", loadTimeout:2, noCORSonImage:true}
4. [{assets:["one.png", "two.png"], path:"images/"}, {assets:["big.mp3", "oof.mp3"], path:"sounds/"}]
** see the loadAssets() method for details - including more file types, etc.
NOTE: "complete", "progress" and "fileLoaded" events are not dispatched
use loadAssets() for these if desired
the "ready" event will be dispatched when the canvas is ready and initial assets are loaded
NOTE: the loadAssets() method can still be used as desired
NOTE: as of ZIM Cat 04, SVG will be automatically converted to a Bitmap with and svg property of the original SVG.
SEE: https://zimjs.com/assetlist/ for many files
path - (default null) - a string path for the assets
if an assets object is provide with a path then this parameter is ignored
this will also set the ZIM PATH global to the path
ZIM PATH is used with lazy-loaded images (eg. when not using Frame assets parameter or loadAssets() method)
ticker - (default null) - an optional callback function to be added to the ZIM Ticker - rather than using Ticker.add();
this will be passed frame specific (count, frame, stage, width, height) parameters
count starts at 1 and the stage is updated after this function is called
also see the pauseTicker() method
progress - (default null) - set to a Waiter() or ProgressBar() object to show while loading
rollover - (default true or false on mobile) activates rollovers
touch - (default true) activates touch on mobile - this will be multitouch by default
set to false for no touch on mobile
also see singleTouch parameter to set singleTouch
also see touch and singleTouch properties
scrollTop - (default false) activates scrolling on older apple devices to hide the url bar
align - (default CENTER) for FIT and FILL, the horizontal alignment LEFT, CENTER, RIGHT
valign - (default CENTER) for FIT and FILL, the vertical alignment TOP, CENTER, BOTTOM
canvasID - (default "myCanvas" or if subsequent frame, myCanvas+randomID) will be set to tagIDCanvas if a tagID is provided - eg. scaling="test", canvasID="testCanvas"
rollPerSecond - (default 20) times per second rollover is activated (if rollover parameter is true)
delay - (default .03 and 1 for mobile) seconds to resize at load and after orientation change (also see ZIM TIME constant)
some devices are slow to report true width and height
At loading, mobile will be tested right away and then at .1 seconds
the default is to then test again at the delay (default 1 second)
At resize, mobile will be tested every .05 seconds up to the delay
set this to some other time if desired
if set to 0 then no additional test will be done - not even the one at .03 seconds
canvasCheck - (default true) check to see if there is canvas support - uses !!window.HTMLCanvasElement
gpu - (default false) set to true to use a CreateJS StageGL stage for GPU renderer
note: retina will be turned off if gpu is on otherwise antialiasing really looks bad
See: https://blog.createjs.com/stagegl-faster-better-stronger-webgl-update-easeljs/ (written before version 1 release)
gpuObj - (default null) object with following properties (with defaults) See CreateJS docs on GITHUB:
preserveBuffer (false), antialias (false), transparent (false), premultiply (false), autoPurge (1200)
nextFrame - (default null) set to zim Frame object of Frame underneath current Frame to pass events to nextFrame
nextStage - (default null) alternative to nextFrame if the stage beneath current Frame is not a ZIM Frame but just a CreateJS Stage
allowDefault - (default false - true for tag mode) set to true to allow default mouse, key and scrollwheel events on canvas
See also the zil property of frame that allows you to add and remove these events dynamically (except for mouse swipe scroll and zoom on mobile)
allowDefault of false also sets body overflow to hidden - which is good for full, fit and fill modes
also see allowDefault property
loadFailObj - (default result of F.makeCircles) object that shows if asset() does not exist or did not load withing loadTimeout
This will be given a type property of "EmptyAsset"
Set the loadFailObj property below to null to set no object - but this will yield errors unless each resulting asset() is tested
Set to new Container() to show nothing (but avoid errors) - or new Rectangle(10, 10) to show little black square, etc.
sensors - (default false) set to true to capture Frame devicemotion and deviceorientation events - see Events
retina - (default true) scales stage to use pixelDensity (sharper when scaling up) and supports Adobe Animate export
may need to set mouse event targets to e.stageX/zim.scaX and e.stageY.zim.scaY
except for using S.getObjectUnderPoint()
ZIM overrides CreateJS localToGlobal, globalToLocal and localToLocal to accomodate stage scaling
This was a major adjustment to transform(), bezier controls, outline, physics, etc.
set to false to return to traditional PRE ZIM 10.3.0 unscaled stage
mouseMoveOutside - (default false) set to true to capture mouse movement outside the stage
see also mouseX and mouseY properties of frame - these work with ZIM retina without adjusting for stage scale
captureMouse - (default true) set to false to not use stagemousemove event to set F.mouseX and F.mouseY (good with Retina)
shim - (default null) used by ZIM SHIM 2 https://zimjs.com/animate/ to create Frame with pre-existing stage and canvas
accepts an object with stage and canvas properties - lets Adobe handle resize
maxConnections - (default 10) set the maximum number of concurrent connections.
From CreateJS PreloadJS: Note that browsers and servers may have a built-in maximum number of open connections,
so any additional connections may remain in a pending state until the browser opens the connection.
maxNum - for sound this is how many instances of the sound can play at once
also can set in asset object maxNum property and loadAssets() and asset() maxNum parameters.
also see sound interrupt parameter
singleTouch - set to true for single touch rather than the default multitouch (or touch false)
this will override the touch setting to turn touch to true
also see touch and singleTouch properties
METHODS
loadAssets(assets, path, progress, xhr, time, loadTimeout, outputAudioSprite, crossOrigin, fileType, queueOnly, maxConnections, maxNum) |ZIM DUO| also accepts ZIM DUO configuration object as single parameter
// see also assets and path parameters of Frame - which share the info below
// see https://zimjs.com/assetlist/ to get an array of many files
assets - a file (url String, asset object or multi-asset object) or files in an Array
each asset String is how you then access the asset with the asset() method of Frame
asset types (from CreateJS PreloadJS): Image, Font, JSON, Sound, SVG, Text, XML
NOTE: as of ZIM ZIM 02, fonts can be loaded with just the font file name (including Google Fonts) rather than a ZIM font object - see FONTS in the Docs.
NOTE: as of ZIM Cat 04, SVG will be automatically converted to a Bitmap with and svg property of the original SVG.
asset can also be a ZIM asset object:
{id:"string", src:"filename", path:"dir/", loadTimeout:1, maxNum:num, noCORSonImage:true}
then can use the id to access the asset in the asset() method of Frame
filename will be added to an overall path if a path parameter is provided
or overwritten with a local path if a path property is provided
an asset object with a filename of an absolute filename starting with http will ignore path
loadTimeout (default 8) will override the loadAssets() loadTimeout
this is how many seconds to wait for asset before error and a complete fires even though asset not loaded
maxNum (browser default) is used with sound to specify the maximum number of sounds of the same source to play at one time
this can be used with the interrupt parameter of the play() method
to ignore multiple sounds or start the sound over again instead of playing multiple versions
noCORSonImage (default false) set to true to make an HTML img tag and read it into a ZIM Bitmap to avoid CORS testing
it then uses ZIM expand(0) to add a CreateJS hitArea to the Bitmap allowing it to be interactive and avoid CORS
thanks Disco for the technique
note: this means the Bitmap will be interactive everywhere - not just in opaque areas
note: loading images this way will not count as progress (bytes loaded ratio) in the progress event but do count for fileloaded and complete events
asset can be a ZIM multi-asset object {assets:[], path:"dir/", loadTimeout:1, maxNum:num, noCORSonImage:true}
where the array can hold multiple files that will have the provided properties applied
this is handy for loading assets from multiple directories (added in ZIM Cat 02 - thanks Netanela for the prompting)
eg.
[
{assets:["one.png", "two.png"], path:"images/"},
{assets:["big.mp3", "oof.mp3"], path:"sounds/"}
]
** warning - if an asset has the same name as a previous asset, then the later asset id will have the path added to its id
** for example:
[
{assets:["one.png", "two.png"], path:"images/"},
{assets:["one.png", "man.png"], path:"portraits/"}
]
** then asset("one.png") will be the asset in the images folder
** and asset("portraits/one.png") will be the asset in the portraits folder
asset can also be a font object - but as of ZIM ZIM 02, fonts can be loaded with just the file name, including Google Fonts
DO NOT use uppercase letters on mobile apps
{font:name, src:url, type:string, weight:string, style:string} // with last three properties being optional
eg.
{font: "wildwood", src:"ChurchintheWildwood-Regular.ttf", type:"OpenType"} // type is not needed
{font: "regu", src:"regul-bold.woff", weight:"bold"}
{src:"https://fonts.googleapis.com/css?family=Roboto"}
For google fonts https://fonts.google.com/ you add extra information to the url so the font (family), type, weight and style are ignored
If absolute src is used, path parameter is ignored - otherwise path is added to start of src
After loading, can just use:
var label = new Label("hello", 30, "wildwood") // or whatever the font property is
asset can be an AudioSprite - which is a single sound file and data for sounds within the sound file:
ZIM has a format for the data and so does CreateJS - there is also the parseAudioSprite() method for importing formats
See the parseAudioSound parameter to pre-parse the ZIM format then use the resulting CreateJS format to avoid live parsing (maybe save a millisecond)
ZIM FORMAT:
{src:"audiosprite.mp3", audioSprite:[
// [id, startime(s), endtime(s)]
// prefer this when making audioSprites by hand in Premiere or Audition
['blackball', 1.041, 2.475],
['bounce', 3.567, 4.232]
]}
CREATEJS FORMAT:
{src: "audiosprite.mp3", data:{ // extra data property
audioSprite: [
{id:"sound1", startTime:0, duration:500}, // time in ms
{id:"sound2", startTime:1000, duration:400},
{id:"sound3", startTime:1700, duration: 1000}
]
}}
See also previewAudioSprite() method in the META section of docs.
path - pass in an optional path String that gets prepended to the asset
when accessing the asset with the asset() method you do NOT include the path
assets with an absolute URL (http[s]://etc.) will ignore path
this will also set the ZIM PATH global to the path
ZIM PATH is used with lazy-loaded images (eg. when not using Frame assets parameter or loadAssets() method)
progress - (default null) - set to a Waiter() or ProgressBar() object to show while loading
xhr (default true) the loading method for files - perhaps will need to set to false in some cases (WEBP alternative from Cloudflare, etc.)
time (default 0) is the minimum number of seconds for the complete event to trigger
use this for testing or to always have time to show a loading message
loadTimeout (default 8) is how many seconds to wait for asset before error and a complete fires even though asset not loaded
outputAudioSprite (default false) set to true when passing in a ZIM AudioSprite format to output to the console a CreateJS AudioSprite JSON object
JSON.parse() this object before passing in to loadAssets() - and add single quotes around console output as those are stripped by console
crossOrigin (default "anonymous") - leave at default to load from Amazon S3, etc.
had to add <AllowedMethod>HEAD</AllowedMethod> in CORSRule of CORS configuration on Amazon S3 for fonts
https://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html#how-do-i-enable-corshttps://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/header-caching.html#header-caching-web-cors
and had to edit distribution behaviours for cache header > whitelist and move over Origin
NOTE: this will still not get past CORS if there is no CORS provided
see noCORSonImage property of ZIM asset object for an image solution to bypass CORS
fileType (default null) in cases where the file type cannot be parsed or is parsed incorrectly, this overrides
might have to split up loading as this fileType gets applied to all files loaded
Types are for CreateJS PreloadJS: https://www.createjs.com/docs/preloadjs/classes/LoadQueue.html
createjs.Types.BINARY: Raw binary data via XHR
createjs.Types.CSS: CSS files
createjs.Types.IMAGE: Common image formats
createjs.Types.JAVASCRIPT: JavaScript files
createjs.Types.JSON: JSON data
createjs.Types.JSONP: JSON files cross-domain
createjs.Types.MANIFEST: A list of files to load in JSON format, see AbstractLoader/loadManifest
createjs.Types.SOUND: Audio file formats
createjs.Types.SPRITESHEET: JSON SpriteSheet definitions. This will also load sub-images, and provide a SpriteSheet instance.
createjs.Types.SVG: SVG files
createjs.Types.TEXT: Text files - XHR only
createjs.Types.VIDEO: Video objects
createjs.Types.XML: XML data
queueOnly (default false) - set to true to send events only to the Queue object (see below) rather than the Frame
when using queues to accept events, remember that the frame also receives events
if you also have some general frame events for loading, set this parameter to true to avoid accident
maxConnections - (default the Frame maxConnections) set the maximum number of concurrent connections.
From CreateJS PreloadJS: Note that browsers and servers may have a built-in maximum number of open connections,
so any additional connections may remain in a pending state until the browser opens the connection.
maxNum - for sound this is how many instances of the sound can play at once
also see sound play() interrupt parameter
RETURNS: a Queue object that can be used for control with multiple loadAssets calls
Each Queue will trigger progress, assetload and complete events
Each Queue will have a preload property to the CreateJS LoadQueue and an isLoading property
The frame also has these events and properties but acts for all loading - so be careful - see the queueOnly parameter
It is recommended to use the Queue any time you use multiple LoadAssets() calls at the same time
You still access assets with asset() as outlined below whether you use the Queue or not
asset(file, width, height, maxNum) - access an asset such as an image or sound - see loadAssets() for more on types
note: asset() is a general alternative to new Pic(), new Aud(), new Dat() - also see new Vid() and new SVG()
file is the string name or url to the file
if the asset was loaded with a string then use the string (less the path if provided)
if the asset was loaded with a full URL then use the full URL here
if the asset uses an asset object with an id then use the id
file can be a |ZIM VEE| value so for instance, an array and asset will pick randomly - or a series, etc.
** warning, if the assets are loaded with ZIM Multi-asset Objects with assets and path
** and an asset has the same name as a previous asset, then the later asset id will have the path added to its id
width and height will help the auto-loading (lazy-loading) otherwise, ZIM will recall positioning applied before the asset is loaded
** otherwise there is no need to add a width and height - only do so to optionally help auto-loading
maxNum - for sound this is how many instances of the sound can play at once - also see sound play() interrupt parameter
** asset() is available as a global function asset() or if zns (ZIM name space) is true then as zim.asset()
** if there are two or more frames, then use F.asset() not asset()
** traditionally, these have been preloaded into the Frame asset parameter or with Frame loadAssets()
** As of ZIM Cat, using asset() without preloading will automatically load the asset - thanks Ami Hanya for suggestion
this works only for images and sound and should be used sparingly as each asset has its own preloading
and some things like sprite assets may have issues.
** As of ZIM ZIM, there is a ZIM PATH constant that can be used to set the path for automatic loading (lazy-loading)
see the docs under ZIM PATH for details
** asset() will add "complete" and "assetLoad" event to the asset object
if the asset is an image then this is a Bitmap which can be added to the stage, etc.
if the asset is a sound then use asset(file).play();
play has ZIM DUO params of volume, loop, loopCount, pan, offset, delay, interrupt
see the ZIM Docs on Sound (below the Frame) for param information
if the asset is anything else, then it is what it is!
asset() will have a type property depending on what type (except JSON, XML and text which are just the object itself)
for instance, an image will have type "Bitmap" as it is a ZIM Bitmap object
but a lazy-loaded image will have type "Image" as it is actually a Container holding a Bitmap
and its Bitmap can be accessed with the bitmap property - so asset("auto.png").bitmap will access the Bitmap
a lazy-loaded sound will have type "Sound"
asset.getIDs() will return an array of asset IDs.
zim.assets is an object literal that holds all the assets based on ID
consider this to be read only
this is the object that the asset() function calls so usually just use asset()
object(name) - get a DisplayObject (for example a Circle or Button) by its name.
** object() is available as a global function object() or if zns (ZIM name space) is true then as zim.object()
DisplayObjects do not start with a name but can be named if desired. Usually, we use variable names to reference an object
See the DisplayObject name property and the nam() short chainable method to set a name
object.getNames() will return an array of object names that have been set.
any object that is named the same name as another object will overwrite the other object and will not be in the object() list anymore
follow(obj, boundary, damp, dampY, leftOffset, rightOffset, upOffset, downOffset, offsetDamp, offsetDampY, horizontal, vertical, borderLock, lag) |ZIM DUO|
moves obj container to keep provided object in middle of stage view
pass in null for obj to stop following
See https://zimjs.com/ten/follow.html - with keys
See https://codepen.io/danzen/pen/gNKQYY - with press
** supports DUO - parameters or single object with properties below
obj - the Display Object to follow - works well if controlling obj with ZIM Motion Controller (mousedown, keydown, gamebutton, gamestick)
unlike Physics follow() the obj for Frame follow() must be in a container - the container will be moved
boundary - (default stage size) - or use a ZIM Boundary() object to specify x, y, width and height to keep obj inside
see also followBoundary property of Frame to update this boundary in a frame "resize" event function when frame is in "full" scaling mode
damp - (default .05) the damping of the motion - 1 moves faster, 0 not at all
dampY - (default damp) can set to damp vertical movement at a separate rate
leftOffset - (default 0 from left of boundary)
rightOffset - (default 0 from right of boundary) - differs from Physics follow which is distance from 0 to right offset
the object will try and move to leftOffset when moving right and rightOffset when moving left
this counters the damping so that the user can see in the direction of motion
when the object is not being controled it moves to the average between left and right offsets
upOffSet - (default 0 from top of boundary)
downOffSet - (default 0 from bottom of boundary)
same as offsets above but in the y direction
offsetDamp - (default .02) the damping for moving the object to the offset
offsetDampY - (default offsetDamp) - damping for moving the object to the y offset if desired to be different than x
horizontal - (default true) set to false to not follow horizontally
vertical - (default true) set to false to not follow vertically
borderLock - (default false) set to true to stop container at boundary
lag - (default false) set to true to position object back from direction of motion
this gives more view as moving but sort of goes in two directions when motion stops
setDefault() - sets the frame to be the default frame
by default ;=) the default frame is the first frame made
the default frame has the stage that addTo(), center(), etc. will use as the default container
a global varible called zdf is also available
as of ZIM ZIM 01, global variables F, S, W, H are provided for frame, stage, width and height of the default frame
keyboardMessage(color, backgroundColor, message, response, percent, call) |ZIM DUO| - place a message to press screen for keyboard control
works with iFrames as well to avoid having to press outside the canvas on the iframe
it does this by turning off the canvas pointer events until the iframe is pressed
color defaults to yellow, backgroundColor to black
response is the message given when the stage or iframe has been pressed to activate the keyboard
pass in "" for no message and response - to use a custom Pane() for example.
percent defaults to 80% the stage width
call - the function to call when keyboard is active - or see keyboardactive event
returns the label if repositioning is desired
Dispatches a "keyboardactive" event when pressed to activate keyboard
fullscreen(mode) - set Frame to HTML fullscreen - mode defaults to true - set to false to come out of fullscreen
also see isFullscreen property and two fullscreen events
note: this is nothing to do with "full" scaling mode but rather the Browser window F11 fullscreen
see: https://zimjs.com/expand to go from ZIM "tag" scaling mode to ZIM "fit" scaling mode
makeCat(height) - returns a ZIM Cat icon - provide height rather than scaling for better caching if cached
if mobile, the icon will be cached - can uncache() it if desired
makeIcon(edges, box, slats, borderColor, borderWidth) |ZIM DUO| - returns a ZIM Z icon
edges defaults to zim.light and is the top and bottom line in the Z
box defaults to zim.dark and is the background box color
slats defaults to the ZIM colors but can be set to any array of five colors (setting true will set to zim.silver)
borderColor and borderWidth default to null - or borderWidth 1 if color set and borderColor black if borderWidth set
madeWith(color, text, edges, box, slats, borderColor, borderWidth) |ZIM DUO| - returns a ZIM Z icon with Made With message
color - (default zim.dark) change color of text (pass in clear to hide text)
text - (default: "Made with ZIM") change to desired made with message
other parameters see makeIcon() above
makeCircles(radius, multiple) - returns ZIM Circles (centered reg)
radius defaults to 100
multiple defaults to false which will return a ZIM Shape - set to true to return a ZIM Container of ZIM Circles
remakeCanvas(width, height) - removes old canvas and makes a new one and a new stage
will have to set your local stage, W and H variables again
update() - call this if frame position is moved on the HTML page
for instance, when a div to left has its display style set to none and the frame shifts over
calling update() will dispatch an update event to any TextArea, Loader or Tag objects
so they resize properly with the new F.x and F.y values
dispose() - removes canvas, resize listener and stage
PROPERTIES
type - holds the class name as a String
stage - read only reference to the zim Stage - to change run remakeCanvas()
frame gives the stage read only S.width and S.height properties
frame gives the stage a frame property that points to the frame that made the stage
canvas - a reference to the frame's canvas tag
canvasID - a reference to the frame's canvas ID
color - the color of the frame background - any css color
outerColor - the color of the body of the HTML page - set with styles
scaling - holds the scaling mode - FULL, FIT, FILL (or "full", "fit", "fill"), "tag" or "inline"
tag is tag mode with no dimensions and inline is tag mode with dimensions
also see the tag property below if mode is tag or inline
tag - the containing tag if scaling is set to an HTML tag id (else null)
isDefault - a Boolean to indicate whether the Frame is the default frame (see setDefault() method)
the default frame has the stage that addTo(), center(), etc. will use as the default container
a global varible called zdf is also available
isLoading - a Boolean to indicate whether loadAssets() is currently loading assets (also, each queue has an isLoading property)
isFullscreen - a Boolean to indicate if Frame is in HTML fullscreen mode - see fullscreen() method and events
width - read only reference to the stage width - to change run remakeCanvas()
height - read only reference to the stage height - to change run remakeCanvas()
scale - read only returns the scale of the canvas - will return 1 for full and tag scale modes
mouseX, mouseY - read only value of the mouse x and y positions on the canvas
note: the frame captureMouse parameter must be set to true (default)
note: this value includes the division by the stage scale needed for ZIM Retina
whereas getting the mouse coordinates from a mouse event object does not include division by the stage scale
set frame's mouseMoveOutside parameter to true to capture movement outside the canvas
cursors - get or set an object literal with custom cursors to override the CSS cursors or act on their own
See: https://zimjs.com/014/cursors.html
the format is:
F.cursors = {default:DisplayObject, pointer:DisplayObject, madeUp:DisplayObject, etc.}
NOTE: use the cur() method to set cursors - DO NOT use the cursor property to set cursors
drag(), tap(), etc. will already work with the custom cursor system
set F.cursors = null to turn off custom cursors
cursorsExclude - object or [objects] not to get custom cursors
NOTE: the cur() must be set on the object for the exclude to work
if the cur() is set on an object inside a container then the exclude must be set manually (after F.cursor is set)
innerObject.cursor = "default"; // or "pointer", etc.
innerObject._cursor = null; // clear custom cursor flag
cursorObj - the current custom cursor object
cursorList - a Dictionary that holds data for cursors - used internally to keep track of custom cursors
cursorTypes - an array of valid CSS cursors - used internally to watch for invalid CSS cursors if name used is not in cursors
leftMouseDown - read only value as to whether the left mouse button is down
used internally by drag and others to make sure pressup on iFrames is handled when the mouse comes back on the stage
also see "mouseupplus" event
mousedownEvent - a reference to the frame "stagemousedown" event - can set F.off("stagemousedown", F.mousedownEvent)
mousemoveEvent - a reference to the frame "stagemousemove" event - can set F.off("stagemousemove", F.mousemoveEvent)
orientation - VERTICAL or HORIZONTAL (updated live with orientation change)
visibleLeft, visibleTop, visibleRight, visibleBottom - in "fill" scale mode these give window edge locations relative to the stage
can be used to position items like navigation relative to window as the frame resize event is fired
in all scale modes other than "fill", the values are 0, W, 0, H
zil - reference to zil events that stop canvas from shifting or scrolling - also see allowDefault parameter
can set allowDefault property to false then allow specific defaults by removing zil events - see zil global function
example: window.removeEventListener("keydown", F.zil[0]); removes keydown preventions (for page up, page down, home, end, etc)
allowDefault - set to true to remove zil or false to set zil (see above) also affects body overflow
touch - get or set the touch setting - setting to false will not allow touch on mobile
also see touch and singleTouch parameters and singleTouch property
singleTouch - get or set the singleTouch setting - set to true to turn on single touch and false to turn on multitouch
setting either true or false will set the touch property to true
also see the touch and singleTouch parameters and touch property
followBoundary - update with a ZIM Boundary for follow() if "full" mode Frame "resize" event happens, etc.
altKey - true if the alt key is being pressed otherwise false
ctrlKey - true if the ctrl key is being pressed otherwise false
metaKey - true if the meta key (⌘ command on Mac or ⊞ windows key) is being pressed otherwise false
shiftKey - true if the shift key is being pressed otherwise false
loadFailObj - the object that shows if images are broken - will be given a type property of "EmptyAsset"
startTime - datestamp of when frame was made - used internally
retina - read-only Boolean as to whether stage (as opposed to the canvas) was scaled for pixelDensity during Frame creation
reloaded - read-only Boolean as to whether page has been reloaded - uses window.performance.getEntriesByType
ALSO see F, S, W, H, M global variables which reference the default frame, its stage and width and height, and if on mobile
EVENTS
"ready" - fired when the stage is made (and state update will be called after dispatched) - also see ready parameter
"failed" - fired if no canvas support (and canvasCheck parameter is set to true - which is the default)
"resize" - fired on resize of screen
"update" - fired when F.update() is called - read by Loader, TextArea and Tag objects
note: this is for when the frame is moved within an html page
for instance, when a div to the left has its display set to none - then call F.update();
"orientation" - fired on orientation change
"contextmenu" - fired on right click
to prevent the default right click then use
e.preventDefault() in your event function.
see https://zimjs.com/explore/contextmenu.html
"keydown" - fired on keydown - just like the window keydown event with eventObject.keyCode, etc.
also stores F.altKey, F.ctrlKey, F.metaKey, F.shiftKey
Note: Alt ArrowLeft and Alt ArrowRight has been set to go back or forward in the browser history
"keyup" - fired on keyup - just like the window keyup event with eventObject.keyCode, etc.
"pointerdown", "pointermove", "pointerup", "pointerenter", "pointerleave" - mirrors DOM Pointer Events
Note: the event object is a raw JavaScript event object, not a CreateJS event object
so there is no clear() on the event object nor a once parameter for the on() method, instead use:
const ev = F.on("pointerdown", ()=>{
F.off("pointerdown", ev);
// this will only run once
});
"mouseupplus" - fired when the browser window receives a mouseup event
NOTE: deprecated - would suggest using pointerup instead of this
also fired when the mouse enters the stage from an iFrame and is no longer down.
Note there is no eventObject.
ALSO see mouseupplusonly for only firing as mouse enters the stage from an iFrame and is no longer down.
mouseup, pressup, stagemouseup, etc. do not work when the mouse is up over an iframe or outside an iframe
ZIM drag() makes use of this event to stop the drag if the mouse was up over an iframe or outside the an iframe holding the canvas.
This could have been done with setting events on parent windows but this runs into CORS errors in many cases
This event fires on the bubbling phase so can be ignored if a real press up is in place - for instance:
record a check variable as true when mousedown and false when pressup which also calls an up function.
In a mouseupplus event function, activate the up function only if the check variable is still true.
This will call the up function as the mouse comes back onto the stage
if the mouse was down when leaving the stage and let up outside the iframe the canvas is in - goodness.
"mouseuplusonly" - fired when the mouse comes back from an iframe (not holding the canvas)
NOTE: deprecated - would suggest using pointerup instead of this
and the mouse was down on the canvas and up in the iframe.
this does not fire on a regular mouseup whereas the mouseupplus will.
"wheel" - fired on mousewheel (Window wheel event)
can get eventObject.deltaX and eventObject.deltaY
these vary greatly in value based on Browser
may want to just ask for sign(eventObject.deltaY) and multiply it by a factor
and then perhaps constrain the value - here the scale is constrained between .5 and 5
note - when changing scale, it is better to multiply by a factor rather than add to the scale
eg. circle.scale = constrain(circle.scale*(sign(e.deltaY)>0?.75:1.25), .5, 5);
"deviceorientation" - turned on when using ZIM PermissionAsk()
fired as device orientation changes:
eventObject.rotation.x (beta in HTML specs) holds rotation about the x axis between -180 and 180 (tipped forward or backward)
eventObject.rotation.y (gamma in HTML specs) holds rotation about the y axis between -90 and 90 (tipped left or right)
eventObject.rotation.z (alpha in HTML specs) holds rotation about the z axis 0-360 clockwise (relative to orientation when app loads)
note rotation.z is 360-alpha compared to the HTML 5 specs
note also that beta, gamma and alpha from the HTML 5 specs are also provided
eg.
var label = new Label().center();
// Note: MUST USE PermissionAsk()
F.on("deviceorientation", function(e) {
label.text = e.rotation.x +","+ e.rotation.y +","+ e.rotation.z;
S.update();
});
"devicemotion" - turned on when using ZIM PermissionAsk()
fired on moving mobile device - like a tilt or shake - eventObject.acceleration holds x, y and z properties of motion
eg.
var label = new Label().center();
// Note: MUST USE PermissionAsk()
F.on("devicemotion", function(e) {
label.text = e.acceleration.x +","+ e.acceleration.y +","+ e.acceleration.z;
S.update();
});
"fullscreenenter" - dispatched going into fullscreen - see fullscreen() method
"fullscreenexit" - dispatched if coming out of fullscreen - see fullscreen(false) method
"tabfocus" - dispatched when tab gains focus - only dispatched by the zdf (ZIM Default Frame)
ZIM setBlurDetect() is now activated by Frame and used by ZIM in animate(), timeout(), interval(), wiggle()
"tabblur" - dispatched when tab loses focus - only dispatched by the zdf (ZIM Default Frame)
"keyboardactive" - dispatched if keyboardMessage() is called and keyboard is active
ASSET EVENTS
loadAssets() will trigger these events on the Frame object and on the specific queue (eg. var queue = F.loadAssets();)
NOTE
if loadAssets() queueOnly parameter is true, then only the queue receives the events - see queueOnly parameter
"progress" - fires constantly as assets are loaded with loadAssets() to represent overall load progress (fonts not included)
The event object has a progress property between 0 and 1
"assetload" - fired when an asset loaded with loadAssets() or asset() has loaded (use asset property of event object to get its file and src) (fonts not included)
"complete" - fired when all assets loaded with loadAssets() or asset() are loaded
"error" - fired when there is a problem loading an asset with loadAssets()
If the assets are loaded in the Frame then the error event must be captured outside the ready event
and if loadAssets() or lazy-load with asset() are used then the error event must be captured outside the complete event
CLOSE ▲PAGE ▤CODE ▤TOUR😊BITS VIDS
Pic
zim class - extends a zim.Container which extends a createjs.Container
DESCRIPTION
Use Pic() to show an image, such as a jpg, png, webp, etc.
There may be a security error when loading images locally for any Canvas app.
Please read https://zimjs.com/tips.html#IMAGES for easy solutions.
Before ZIM version ZIM 00, asset() or F.asset() was used to show images.
These can still be used if desired. The Pic() class just wraps the asset() call.
SEE: https://zimjs.com/zim/assets.html
PRELOADING
It is recommended that you preload images (along with sounds, etc.) using the Frame() assets and path parameters.
Batch loading images is more efficient and the width and height will be available when the Frame() is "ready" or loadAssets() is "complete".
Images can also be loaded on demand with F.loadAssets() at any time - for instance, for a second section of the app.
LAZY-LOADING
If images are not preloaded then Pic() will use automatic loading (lazy-loading).
If width and height are provided, all will go smoothly.
If width and height are not provided, ZIM will store various scaling and positioning commands
and re-apply the commands once the images are loaded.
This happens for center(), centerReg(), pos(), scaleTo(), outline() and perhaps others.
This extra work is NOT required if assets are preloaded or a width and height are provided.
Some controls like Tile() and Scroller() must have dimensions and will give a warning in the console.
In the past there has been issues with cloning lazy-loaded images before they are loaded, but this should work now.
Pic will give a "ready" and a "complete" event when loaded.
These events are triggered 20 ms after making the object if the object is already preloaded.
NOTE
Pic is a container with a bitmap inside (see bitmap property).
This means that other objects can be added to the Pic object.
This is like the ZIM Shapes (Rectangle, Circle, etc.) which are containers and can have objects added to them.
If doing this, note that the container has its mouseChildren turned off
so when dragging, for instance, the whole pic moves rather than the bitmap inside the pic.
To interact with objects inside, set pic.mouseChildren = true.
Generally, for clarity, avoid adding objects to Shapes or Pics unless you are used to the mouseChildren setting.
NOTE
there is an outlineImage(pic, reverse) function that can be called to outline a DisplayObject - search docs for outlineImage
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// lazy-load an image in the same directory
new Pic("image.png").center();
// NOTE: the above may give a CORS security error locally
// to easily solve this see https://zimjs.com/tips.html#IMAGES
EXAMPLE
// lazy-load an image in the assets/ directory
new Pic("assets/image.png").center();
EXAMPLE
// lazy-load an image in the assets/ directory using PATH constant
PATH = "assets/"
new Pic("image.png").center();
EXAMPLE
// preload the image in the Frame along with path parameter
new Frame(FIT, 1024, 768, light, grey, ready, "image.png", "assets/");
function ready() {
new Pic("image.png").center(); // adds the preloaded assets/image.png
// the PATH would be set to "assets/" by the Frame path parameter
new Pic("sky.png").addTo(); // would lazy-load assets/sky.png
PATH = "people/";
new Pic("laura.png").addTo(); // would lazy-load people/laura.png
new Pic("peter.png").addTo(); // would lazy-load people/peter.png
}
EXAMPLE
// preload all the images above
// the first two will use the path parameter
// the other two are in a different directory so can use an assets object {} with a different path
const assets = ["image.png", "sky.png", {assets:["laura.png", "peter.png"], path:"people/"}];
const path = "assets/";
new Frame(FIT, 1024, 768, light, grey, ready, assets, path);
function ready() {
new Pic("image.png").center(); // adds the preloaded assets/image.png
new Pic("sky.png").addTo(); // adds the preloaded assets/sky.png
new Pic("laura.png").addTo(); // adds the preloaded people/laura.png
new Pic("peter.png").addTo(); // adds the preloaded people/peter.png
}
// alternatively the path could have been added to each asset:
assets = ["assets/image.png", "assets/sky.png", "people/laura.png", "people/peter.png"];
// this would be passed into Frame along with no path parameter
// and the assets would then be accessed in the ready event with the path included:
new Pic("asset/image.png").center();
EXAMPLE
const plates = ["plate1.png", "plate2.png", "plate3.png"];
// lazy-load random plate pictures in a Tile
// below would be broken with a warning in the console
// because the tile does not know the plate dimensions
new Tile(new Pic(plates), 4, 4).center();
// below would work because the dimensions of 200, 200 were provided
// however, if the plates are not actually 200,200 then it may look wrong
new Tile(new Pic(plates, 200, 200), 4, 4).center();
// below would work because preloading in Frame() or loadAssets() provides real dimensions
// when the tile is made, the dimensions are known
const load = F.loadAssets(plates);
load.on("complete", ()=>{
new Tile(new Pic(plates), 4, 4).center();
S.update();
});
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports VEE - parameters marked with ZIM VEE mean a zim Pick() object or Pick Literal can be passed
Pick Literal formats: [1,3,2] - random; {min:10, max:20} - range; series(1,2,3) - order, function(){return result;} - function
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
file - |ZIM VEE| the String file name of the image including file extension for instance, "pic.png"
There is a global PATH constant that can be set to add a path to the start of the file name
for instance setting PATH = "assets/" would then look for "assets/pic.png".
If a path is provided to Frame() parameter or the loadAssets() then these will automatically set the global PATH constant.
width - (default null) optionally predict the width of the image
The width will be ignored and the actual width will be used if the image is preloaded
and if lazy-loaded, the width will be replaced with the actual width after the image is loaded.
So the width is only used to tell something like a Tile(), what size to expect before the image is loaded.
To change the width of a Pic, use siz() or sca() methods
or width, widthOnly, height, heightOnly, scale, scaleX and scaleY properties.
height - (default null) optionally predict the height of the image (see width for similar details)
noCors - (default false) set to true to attempt to bypass CORS (cross origin resource sharing) issues.
CORS errors may show up when loading images from other servers that do not have settings saying this is allowed.
Setting noCors to true will try and load the image with a proxy server https://cors.zimjs.com/ so use sparingly.
It is better to try and load the images from your own server or get CORS permissions from the server.
Do not preload the image with this setting - or preload using an asset object with noCORSonImage:true set.
The noCors setting will use image() rather than asset()
All these solutions use https://cors.zimjs.com/https://theurltotheasset.jpg
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly
METHODS
keyOut(color, tolerance, replacement) - remove a certain color in the picture and make it see-through - with a color tolerance between 0-1
the default color is "#389b26" which is a medium dark green
the default tolerance is .1 - the higher the tolerance the less sensitive the keying process - so more colors will be removed similar to the provided color
color and tolerance can be an array of colors and tolerances (or just one tolerance if all are the same)
replacement (default clear) a color to replace the keyed out color with or an optional array to match the colors array if an array is used
Note: there is an outlineImage(pic, reverse) function that can be called to outline a DisplayObject - search docs for outlineImage
ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO
see the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.
PROPERTIES
type - holds the class name as a String
in this case the type is "Pic" but if the Pic is lazy-loaded then
it starts as type "AC" (Asset Container) if no dimensions are provided
or "ACWD" (Asset Container With Dimensions) until the image is loaded
at which point, the type is set to "Pic"
bitmap - reference the the ZIM Bitmap (picture) inside the Pic container
file - the filename used
src - the source with path and filename - available on complete event
image - the HTML image tag - available on complete event
item - the CreateJS data item used for preload - available on complete event
ALSO
see ZIM Container for properties such as:
width, height, widthOnly, heightOnly, draggable, level, depth, group
blendMode, hue, saturation, brightness, contrast, etc.
ALSO
see the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.
EVENTS
dispatches a "complete" and a "ready" event (use either one) when the image is loaded
if preloaded this is dispatched 20 ms after the Pic is made
See the CreateJS Easel Docs for Container events such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover
CLOSE ▲PAGE ▤CODE ▤TOUR😊VIDS
Aud
zim class - extends a createjs.EventDispatcher
DESCRIPTION
Use Aud() to play a sound with its play() method.
The app must be interacted with before a sound can be played.
There may be a security error when loading sounds locally for any Canvas app.
Please read https://zimjs.com/tips.html#SOUND for easy solutions.
Multiple instances of a sound can be played from the same Aud() object.
When a sound is played it returns an object that can be used to change that specific instance.
Use that object to change the volume, pan, to find out if the sound has looped or is complete
or to pause() or stop() the sound.
Before ZIM version ZIM 00, asset() or F.asset() was used to play sounds.
These can still be used if desired. The Aud() class just wraps the asset() call.
SEE: https://zimjs.com/zim/assets.html
PRELOADING
It is recommended that you preload sounds (along with images, etc.) using the Frame() assets and path parameters.
After the frame loads, sounds can also be loaded on demand with F.loadAssets().
Batch loading sounds is more efficient and the sound will be ready when the Frame() is "ready" or loadAssets() is "complete".
LAZY-LOADING
If sounds are not preloaded then Aud() will use automatic loading (lazy-loading).
Aud will give a "ready" event when loaded.
This event is triggered 20 ms after making the object if the object is already preloaded.
The "complete" event is used for when the sound is finished playing (not finished loading).
AUDIOSPRITE
An AudioSprite can alternatively be used which has many sounds in one sound file.
There is data that goes with the AudioSprite to match a label to a time and duration.
See the Frame docs under loadAssets() method although they can be loaded in the Frame as well.
See also parseAudioSprite() and previewAudioSprite() functions in META section of Docs.
NOTE
The sound can be made at any time but the app must be interacted with before the sound can be played.
This is a general Browser rule to stop being bombarded with sounds.
It means that you will have to make a start button or a splash page
that the user clicks or taps before a background sound can be played.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// There may be a security error when loading sounds locally for any Canvas app.
// Please read https://zimjs.com/tips.html#SOUND for easy solutions.
const click = new Aud("click.mp3"); // lazy-load a click sound
S.on("stagemousedown", ()=>{
click.play(); // plays everytime the stage is clicked (sigh)
});
EXAMPLE
// make a backing sound but do not play it
// the user must first interact at least once with a mousedown/click/tap/change
const backing = new Aud({file:"backing.mp3", loop:true});
let backingSound; // this will store the sound that is playing
// make a Toggle button that starts toggled off
new Toggle({label:"SOUND"})
.sca(.7)
.pos(30,30,LEFT,BOTTOM)
.change(e=>{
// play the sound if it has not played
// and toggle the instance's paused property if it has been played
if (!backingSound) backingSound = backing.play();
else backingSound.paused = !e.target.toggled;
});
EXAMPLE
// preload a couple sounds from an assets/ directory (path)
new Frame(FIT, 1024, 768, light, dark, ready, ["sound.mp3", "backing.mp3"], "assets/");
function ready() {
// show a Pane() to start so we know user has interacted before we play sounds
new Pane("START GAME", yellow).show(init); // this calls init when closed
function init() {
// now the user has interacted to close the pane
new Aud("backing.mp3", .3, true).play(); // volume of .3 and looping
// Make sounds only play once and start over when pressed again
// otherwise, the default is play the sound completely each press.
// If someone presses a lot - this is a lot of sounds playing at once.
// If we left the interrupt at "none" the sound would finish before playing again
// which is not optimal as we want the sound to start each time we press.
// We could add these to the Aud() parameters but here we use STYLE
STYLE = {maxNum:1, interrupt:"any"}
const sound = new Aud("sound.mp3");
new Circle().center().tap(()=>{
sound.play();
});
} // end init()
} // end frame ready
EXAMPLE
// lazy-load a sound from a PATH of "assets/"
PATH = "assets/"
const long = new Aud("long.mp3");
// press on the stage - note the true for once at end of event
S.on("stagemousedown", ()=>{
const sound = long.play({volume:.2});
// adjust the sound after...
timeout(2, ()=>{
sound.volume = 1;
});
timeout(4, ()=>{
sound.paused = true;
});
timeout(6, ()=>{
sound.paused = false;
});
sound.on("complete", ()=>{
F.color = red;
// lazy-load a woot sound from path of assets/ and play twice
new Aud("woot.wav").play({loopCount:2});
S.update();
});
}, null, true); // true for once then remove the event
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports VEE - parameters marked with ZIM VEE mean a zim Pick() object or Pick Literal can be passed
Pick Literal formats: [1,3,2] - random; {min:10, max:20} - range; series(1,2,3) - order, function(){return result;} - function
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
file - |ZIM VEE| the String file name of the sound including file extension for instance, "sound.mp3"
There is a global PATH constant that can be set to add a path to the start of the file name
for instance setting PATH = "assets/" would then look for "assets/sound.mp3".
If a path is provided to Frame() parameter or the loadAssets() then these will automatically set the global PATH constant.
For an audioSprite use the label here.
** ALL THE PARAMETERS below can also be specified in the play() method (except for maxNum)
volume (default 1) - set the volume
loop (default false) - set to true to loop forever or a number based on loopCount
loopCount (default null) - change to how many times to play the sound
there is no need to set loop if loopCount is set
pan (default 0) - set towards -1 to pan left and towards 1 to pan right
may not work locally but should work on server
offset (default 0) - elapsed time in seconds to start playing
delay (default 0) - time to wait before sound is started
interrupt (default "none") - how to interrupt a sound if a sound with the same source is played
and the maximum number of instances of the sound are already playing
** must have maxNum set - see the maxNum property or the Frame(), loadAssets() or asset() maxNum parameter
"none" - do not interrupt the previously playing sound(s) (with the same source)
"any" - interrupt the previously playing sound(s) (with the same source)
"early" - interrupt only the previously playing sound that has progressed the least
"late" - interrupt only the previously playing sound that has progressed the most
** thank you CreateJS and SoundJS for providing these options
maxNum (default null) ONLY FOR LAZY LOAD - otherwise use maxNum in Frame() or F.loadAssets()
set to a number of instances that a sound can play.
The default is as many as the browser can handle (hundreds).
maxNum can also be set as Frame(), loadAssets() and asset() parameters.
Setting this to 1 will only play one instance of the sound at a time.
The interrupt setting determines what happens if the sound is played again while it is playing
if "none" is set (default) then it will not interrupt the current instance
if "any" is set then it will play the sound again from the start, etc.
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly
METHODS
play(volume, loop, loopCount, pan, offset, delay, interrupt) - play the sound
*** Supports ZIM DUO - regular parameters or single configuration object {}
*** returns a CreateJS AbstractSoundInstance (of course). Detailed docs are here:
*** https://www.createjs.com/docs/soundjs/classes/AbstractSoundInstance.html
*** See the methods and properties listed after the play parameters
volume (default 1) - set the volume
loop (default false) - set to true to loop forever or a number based on loopCount
loopCount (default null) - change to how many times to play the sound
there is no need to set loop if loopCount is set
pan (default 0) - set towards -1 to pan left and towards 1 to pan right
may not work locally but should work on server
offset (default 0) - elapsed time in seconds to start playing
delay (default 0) - time to wait before sound is started
interrupt (default "none") - how to interrupt a sound if a sound with the same source is played
and the maximum number of instances of the sound are already playing
** must have maxNum set when sound is loaded - see the Aud(), Frame(), loadAssets() or asset() maxNum parameter
"none" - do not interrupt the previously playing sound(s) (with the same source)
"any" - interrupt the previously playing sound(s) (with the same source)
"early" - interrupt only the previously playing sound that has progressed the least
"late" - interrupt only the previously playing sound that has progressed the most
** thank you CreateJS and SoundJS for providing these options
ABSTRACT SOUND INSTANCE
The return result of the play() makes a CreateJS AbstractSoundInstance
var sound = Aud("sound.mp3").play(); // sound is an AbstractSoundInstance
// note: if lazy-loaded then the result of a play() before the sound has loaded
// will be a proxy object with volume, pan, paused, position and duration properties and will dispatch a complete event
// methods, other properties and events will only be available on a play() of the sound played after loaded
// or if the sound is played before loaded, there will be a sound property added after loaded
// that has the rest of the AbstractSoundInstance properties and methods
// for instance, myLazyPlay.sound.muted or myLazyPlay.sound.stop()
// If the sound were preloaded, then these would be myPreloadPlay.muted and myPreloadPlay.stop()
METHODS (of AbstractSoundInstance)
** full docs here: https://www.createjs.com/docs/soundjs/classes/AbstractSoundInstance.html
** these methods are on the results of a new Aud().play() not on the new Aud()
const sound = new Aud();
const soundInstance = sound.play();
timeout(2, ()=>{soundInstance.stop()});
stop() - stops the sound and sets the time to 0
play() - plays the sound again - usually, the sound is already playing from the sound.play()
but if it is stopped - this will start it again
fade(volume, time, call) - fade in or out a playing sound in a time and call the call function when done
panSound(pan, time, call) - pan left (-1) or right (1) or in between a playing sound in a time and call the call function when done
PROPERTIES
type - holds the class name as a String
in this case the type is "Aud" but if the Aud is lazy-loaded then
it starts as type "AC" (Asset Container) and then when loaded becomes "Aud"
file - the filename used
src - the src used - path and file - available on complete event
item - the CreateJS data item used for preload - available on complete event
PROPERTIES (of AbstractSoundInstance)
** full docs here: https://www.createjs.com/docs/soundjs/classes/AbstractSoundInstance.html
** these properties are on the results of a new Aud().play() not on the new Aud()
const sound = new Aud();
const soundInstance = sound.play();
timeout(2, ()=>{soundInstance.volume = .5});
paused - set to true to pause and false to unpause
muted - set to true to mute - but sound keeps playing or false to unmute
volume - the volume with 1 being the default
pan - set from -1 (full left) to 1 (full right) with 0 in middle (may not work until on server)
position - set to place in sound in milliseconds (ZIM TIME constant does not affect this)
duration - the length of the sound in milliseconds
EVENTS
dispatches a "ready" or "complete" event when the sound is loaded
if preloaded this is dispatched 20 ms after the Aud is made
Note: the AbstractSoundInstance below also dispatches a "complete" event when the sound is finished playing
EVENTS (of AbstractSoundInstance)
** full docs here: https://www.createjs.com/docs/soundjs/classes/AbstractSoundInstance.html
complete - dispatched when the sound has reached the end - after any loops (not before)
loop - dispatched when the sound loops (but not at end of last loop - that is complete)
currently triggering at the first play too.
CLOSE ▲PAGE ▤CODE ▤TOUR😊VIDS
Vid
zim class - extends a zim.Container which extends a createjs.Container
DESCRIPTION
Use Vid() to show a video. Use the play() method to start the video when loaded.
The user must interact with the app before play() will work.
There may be a security error when loading video locally for any Canvas app.
Please read https://zimjs.com/tips.html#VIDEO for easy solutions.
Vid will add an HTML 5 video and source tag in behind the scene
and pipe the video into a ZIM Bitmap which is shown in the Vid container.
Vid lets you pause() and play() and get the duration
or get and set the currentTime and volume.
A source property stores the HTML 5 video for more methods, properties and events.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video
Vid also has a keyOut() method to key out a color from the video.
SEE: https://zimjs.com/zim/assets.html
Vid will give a "ready" and a "complete" event when ready to play.
NOTE
Vid is a container with a bitmap inside (see bitmap property).
This means that other objects can be added to the Vid object.
This is like the ZIM Shapes (Rectangle, Circle, etc.) which are containers and can have objects added to them.
If doing this, note that the container has its mouseChildren turned off
so when dragging, for instance, the whole vid moves rather than the bitmap inside the vid.
To interact with objects inside, set vid.mouseChildren = true.
Generally, for clarity, avoid adding objects to Shapes or Vids unless you are used to the mouseChildren setting.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// video is a container that will have a width of 800 and height of 600
// The video will be FIT inside these dimensions and centered by default
// Also see align and valign parameters
// At the start, it will have a type of "AC" once it loads it will be "Vid"
const video = new Vid("video.mp4", 800, 600)
.center() // using 800x600
S.on("stagemousedown", () => {
video.play();
});
EXAMPLE
// video is a container that will have a width of 800 and height of 600
// The video will be stretched to 800 by 600 - possibly changing the aspect ratio
const video = new Vid("video.mp4", 800, 600, FULL)
.center() // using 800x600
S.on("stagemousedown", () => {
video.play();
});
EXAMPLE
// video is a container with no width and height to start
// once the video is loaded the container will take the dimensions of the video
// and the center() will be called again to properly center the container
// just like lazy loading Pic().
const video = new Vid("video.mp4")
.center() // will automatically be re-centered after loading
S.on("stagemousedown", () => {
video.play();
});
EXAMPLE
// make the video cover the stage
const video = new Vid("video.mp4", W, H, FILL)
.center()
S.on("stagemousedown", () => {
video.play();
});
EXAMPLE
// load a video from the assets/ folder
PATH = "assets/"
// either provide width and height before scaleTo() or use the ready event
const video = new Vid("video.mp4", W, H).center();
video.on("ready", ()=>{
// video.keyOut("#01b03f", .2); // optional keyOut a green color
// do not play the video until we interact with the app
const pane = new Pane("VIDEO ON CANVAS!").show(()=>{
// this (the callback) runs when the pane is closed
video.play();
});
});
// toggle the pause of the video
video.on("mousedown", ()=>{
// note videoPaused property
// not paused (which is for animation)
video.pause(!video.videoPaused);
});
EXAMPLE
// getting a preview
const video = new Vid("video.mp4")
.scaleTo()
.center()
.vis(false);
new Pane("WELCOME").show(init);
function init() {
video.play().pause().vis(true);
// note, to play after this use video.pause(false); // not video.play()
Ticker.always();
}
EXAMPLE
// getting a keyed out preview
const video = new Vid("video.mp4")
.scaleTo()
.center()
.vis(false);
new Pane("WELCOME").show(init);
function init() {
video
.keyOut("#01b03f", .25) // key out the green
.play();
timeout(.05, ()=>{
video.pause().vis(true);
});
Ticker.always();
}
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports VEE - parameters marked with ZIM VEE mean a zim Pick() object or Pick Literal can be passed
Pick Literal formats: [1,3,2] - random; {min:10, max:20} - range; series(1,2,3) - order, function(){return result;} - function
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
file - |ZIM VEE| the String file name of the image including file extension for instance, "pic.png"
There is a global PATH constant that can be set to add a path to the start of the file name
for instance setting PATH = "assets/" would then look for "assets/pic.png".
If a path is provided to Frame() parameter or the loadAssets() then these will automatically set the global PATH constant.
width - (default null) optionally predict the width of the video for placement before being loaded
The width will be ignored once the video is loaded.
To change the width of Vid, use siz() or sca() methods
or width, widthOnly, height, heightOnly, scale, scaleX and scaleY properties.
height - (default null) optionally predict the height of the Vid (see width for similar details)
scaling - (defaut FIT) how to scale video into dimensions if provided - otherwise
FIT - scales video to fit inside width and height keeping aspect ratio - also see align and valign
FILL - scales video to surround width and height keeping aspect ratio - also see align and valign
FULL - scales video width to width and video height to height possibly stretching aspect ratio
volume - (default 1) the volume of the video - also see the volume property
loop - (default false) set to true to loop the video
align - (default CENTER) for FIT and FILL, the horizontal alignment LEFT, CENTER, RIGHT
valign - (default CENTER) for FIT and FILL, the vertical alignment TOP, CENTER, BOTTOM
type - (default "video/mp4") the mime type or codec of the video
see https://developer.mozilla.org/en-US/docs/Web/Media/Formats/codecs_parameter
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly
METHODS
play() - play the video
pause(state) - pause the video if the state is true (default) or play again if state is false
keyOut(color, tolerance, replacement) - remove a certain color in the video and make it see-through - with a color tolerance between 0-1
the default color is "#389b26" which is a medium dark green
the default tolerance is .1 - the higher the tolerance the less sensitive the keying process - so more colors will be removed similar to the provided color
color and tolerance can be an array of colors and tolerances (or just one tolerance if all are the same)
replacement (default clear) a color to replace the keyed out color with or an optional array to match the colors array if an array is used
clone(exact) - clone the object - if using ZIM VEE values for file, use exact true to copy the picked ZIM VEE option.
dispose() - dispose the video including HTML tags, etc.
ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO
see the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.
PROPERTIES
type - holds the class name as a String
in this case the type is "Vid" but if no dimensions are provided
it starts as type "AC" (Asset Container)
and when the video is ready to play (see "complete" or "ready" event), the type is set to "Vid"
file - the filename used
duration - get the duration of the video in seconds
currentTime - get or set the current time in seconds
volume - get or set the volume of the video
videoPaused - get if the video is paused
bitmap - reference to the the ZIM Bitmap inside the container
source - reference to the HTML video tag with all sorts of methods, properties and events
use this for the fastSeek() method if currentTime property is too slow
see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/videoALSO
see ZIM Container for properties such as:
width, height, widthOnly, heightOnly, draggable, level, depth, group
blendMode, hue, saturation, brightness, contrast, etc.
ALSO
see the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.
EVENTS
See the "ended" event on the HTML video tag (source)
dispatches a "complete" and a "ready" event (use either one) when the image is loaded.
if preloaded this is dispatched 20 ms after the Vid is made.
Also see HTML video events: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#events
which has an "ended" event on the source property...
so use myVideo.source.addEventListener("ended", ()=>{});
See the CreateJS Easel Docs for Container events such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover
CLOSE ▲PAGE ▤CODE ▤TOUR😊VIDS
Dat
zim class - extends a createjs EventDispatcher
DESCRIPTION
Use Dat() to load data files like text, csv, XML and json.
Then use the data property to get the data.
Before ZIM version ZIM 018 the Frame asset() method was used for data
and asset(file) can still be used - the Dat() class is a wrapper class to match Pic(), Aud(), etc.
It is just a dozen lines long.
PRELOADING
It is recommended that you preload data files using the Frame() assets and path parameters.
After the frame loads, data files can also be loaded on demand with F.loadAssets().
LAZY-LOADING
The data file can be lazy loaded at which point the data property will be available in a complete or ready event
Dat will give a "ready" and a "complete" event when loaded.
These events are triggered 20 ms after making the object if the object is already preloaded.
See: https://zimjs.com/018/dat.htmlNOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// loading a text file with some text
new Frame(FIT, 1024, 768, light, dark, ready, "data.txt", "assets/");
function ready() {
const data = new Dat("data.txt").data;
new Label(data).center();
}
EXAMPLE
// loading a JSON file with {"test":"complete"}
new Frame(FIT, 1024, 768, light, dark, ready, "data.json", "assets/");
function ready() {
const data = new Dat("data.json").data;
new Label(data.test).center(); // will say complete
}
EXAMPLE
// loading an XML file with <test>complete</test>
new Frame(FIT, 1024, 768, light, dark, ready, "data.xml", "assets/");
function ready() {
const data = new Dat("data.xml").data;
// also children property and getAttribute() method, etc.
new Label(data.innerHTML).center(); // will say complete
}
// also see https://zimjs.com/018/dat.html for looping through multiple tags
EXAMPLE
// lazy loading a text file with some text
new Frame(FIT, 1024, 768, light, dark, ready);
function ready() {
const text = new Dat("assets/data.txt");
data.on("complete", ()=>{
new Label(text.data).center();
});
}
PARAMETERS
file - the file provided to the Frame class (or Frame loadAssets method) assets parameter
or if not preloaded then the file to lazy load - then must wait for the complete or ready event
PROPERTIES
type - holds the class name as a String
data - the data such as the text for a txt file or will be a JSON parsed object for a JSON file
EVENTS
dispatches a "complete" and a "ready" event
used primarily for lazy loading of the file
if preloaded then the Frame or loadAsssets ready event is all that is needed
there will be a complete or ready event on the Dat() dispatched 20 ms later for compatibility
CLOSE ▲PAGE ▤CODE ▤
SVG
zim class - extends a zim.Container which extends a createjs.Container
DESCRIPTION
Use SVG() to show an SVG tag or file on the Canvas.
There are two options, the default is as a Bitmap
or choose an SVGContainer with Blob, Squiggle, and transformable shapes.
Before ZIM version ZIM 00, svgToBitmap() or SVGContainer() was used to show SVGs.
These can still be used if desired. The SVG() class just wraps these.
SEE: https://zimjs.com/zim/assets.htmlNOTE
ZIM has Squiggle() and Blob() which often can replace the need for SVG() and has many more benefits.
These can be made with ZIM Pizzazz 4 at https://zimjs.com/paths
Or an SVG path can be passed directly to the points parameter of a Blob or Squiggle.
Squiggles and Blobs let the user:
turn the paths editable
animate objects on the path
add Beads to the path
animate the path
shape animate the path to another path
do hitTestPath on the path
We recommend using SVG only when there is already an SVG that image you want to use.
PRELOADING
It is recommended that you preload SVG files using the Frame() assets and path parameters.
After the frame loads, SVG files can also be loaded on demand with F.loadAssets().
Batch loading SVGs is more efficient and the width and height will be available when the Frame() is "ready" or loadAssets() is "complete".
LAZY-LOADING
If SVGs are not preloaded then SVG() will use automatic loading (lazy-loading).
If width and height are provided, all will go smoothly.
If width and height are not provided, ZIM will store various scaling and positioning commands
and re-apply the commands once the images are loaded.
This happens for center(), centerReg(), pos(), scaleTo(), outline() and perhaps others.
This extra work is NOT required if assets are preloaded or a width and height are provided.
Some controls like Tile() and Scroller() must have dimensions and will give a warning in the console.
In the past there has been issues with cloning lazy-loaded objects before they are loaded, but this should work now.
SVG will give a "ready" and a "complete" event when loaded.
These events are triggered 20 ms after making the object if the object is already preloaded.
NOTE
SVG is a container with a bitmap inside (see bitmap property)
or if the bitmap option is not selected there are other shapes inside.
This means that other objects can be added to the SVG object.
This is like the ZIM Shapes (Rectangle, Circle, etc.) which are containers and can have objects added to them.
If doing this, note that the container has its mouseChildren may be turned off
so when dragging, for instance, the whole SVG moves rather than the bitmap inside the SVG.
To interact with objects inside, set pic.mouseChildren = true.
Generally, for clarity, avoid adding objects to Shapes, Pics SVGs unless you are used to the mouseChildren setting.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// lazy-load an SVG
new SVG("file.svg").center().drag();
EXAMPLE
// assuming there is an SVG tag on the page - could be display:none
new SVG(zid("svgTagID")).center().drag();
EXAMPLE
// Find the SVG in an assets/ folder
PATH = "assets/"
// Tile a lazy-loaded SVG with dimensions - otherwise Tile would give a console warning
new Tile(new SVG("file.svg", 100, 100), 4, 4)).center();
// but the dimensions might not be right and the tile could look odd once the SVGs are loaded
// would be better to preload - see next example
EXAMPLE
// Adding Physics to an SVG
// Must import zim_physics or have Physics checked in the Editor
// cannot make a Bitmap until SVG is made:
const physics = new Physics();
const svg = new SVG("file.svg");
svg.on("complete", ()=>{
const bitmap = new Bitmap(svg).center();
const blob = new Blob({
points:simplifyPoints(outlineImage(bitmap), 10),
color:faint,
interactive:false
}).loc(bitmap).addPhysics();
bitmap.addTo(blob);
});
EXAMPLE
// pre-load and Tile an SVG
new Frame(FIT, 1024, 768, light, grey, ready, "file.svg", "assets/");
function ready() {
new Tile(new SVG("file.svg"), 4, 4)).center();
}
EXAMPLE
// add an SVGContainer from an SVG string
// this would make a simple Squiggle line with editable points
// see the Docs under SVGContainer for more complex examples and added information
// note the h t t p : should be edited to not have spaces - just avoiding Doc auto linking
const svg = `<svg width="150" height="200" xmlns="h t t p ://www.w3.org/2000/svg">
<path id="lineAB" d="M 0 0 l 150 200" stroke="red" stroke-width="3" fill="none" />
</svg>`;
new SVG(svg, null, null, false).center();
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports VEE - parameters marked with ZIM VEE mean a zim Pick() object or Pick Literal can be passed
Pick Literal formats: [1,3,2] - random; {min:10, max:20} - range; series(1,2,3) - order, function(){return result;} - function
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
svg - |ZIM VEE| the String file name of the SVG including file extension for instance, "pic.svg"
or an SVG tag either directly as a string or as a reference to an HTML tag - ie. zid("svgID")
There is a global PATH constant that can be set to add a path to the start of the file name
for instance setting PATH = "assets/" would then look for "assets/pic.svg".
If a path is provided to Frame() parameter or the loadAssets() then these will automatically set the global PATH constant.
width - (default null) optionally predict the width of the SVG
The width will be ignored and the actual width will be used if the SVG is preloaded
and if lazy-loaded, the width will be replaced with the actual width after the SVG is loaded.
So the width is only used to tell something like a Tile(), what size to expect before the SVG is loaded.
To change the width of an SVG, use siz() or sca() methods
or width, widthOnly, height, heightOnly, scale, scaleX and scaleY properties.
height - (default null) optionally predict the height of the SVG (see width for similar details)
bitmap - (default true) this will show the SVG as a Bitmap (still nicely scalable!)
or set to false to use an SVGContainer() which converts the SVG to Blob, Squiggle and ZIM Shapes with transforms.
This allows for editable paths - but perhaps not all aspects of SVGs are supported such as CSS styles on SVGs.
Alternatively, a single SVG path can be passed to a ZIM Blob() or Squiggle() and SVG() can be avoided.
** these parameters are NOT for the bitmap option but rather for the SVGContainer
splitTypes - (default false) - set to true to split different types of paths into separate objects
geometric - (default true) - set to false to load Rectangle and Circle objects as Blob objects
showControls - (default true) set to false to start with controls not showing
interactive - (default true) set to false to turn off controls, move, toggle, select, edit - leaving just the shapes
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly
METHODS
keyOut(color, tolerance, replacement) - for Bitmap setting - remove a certain color in the SVG and make it see-through - with a color tolerance between 0-1
the default color is "#389b26" which is a medium dark green
the default tolerance is .1 - the higher the tolerance the less sensitive the keying process - so more colors will be removed similar to the provided color
color and tolerance can be an array of colors and tolerances (or just one tolerance if all are the same)
replacement (default clear) a color to replace the keyed out color with or an optional array to match the colors array if an array is used
ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO
see the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.
PROPERTIES
type - holds the class name as a String
in this case the type is "SVG" but if the SVG is lazy-loaded then
it starts as type "AC" (Asset Container) if no dimensions are provided
or "ACWD" (Asset Container With Dimensions) until the SVG is loaded
at which point, the type is set to "SVG"
bitmap - reference the the ZIM Bitmap inside the container.
this exists for both the bitmap setting and the SVGContainer setting
but with the SVGContainer setting, the bitmap is not added to the container
svg - reference to the SVG code
file - the filename used
src - the source with path and filename - available on complete event
item - the CreateJS data item used for preload - available on complete event
ALSO
see ZIM Container for properties such as:
width, height, widthOnly, heightOnly, draggable, level, depth, group
blendMode, hue, saturation, brightness, contrast, etc.
ALSO
see the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.
EVENTS
dispatches a "complete" and a "ready" event (use either one) when the SVG is loaded.
if preloaded this is dispatched 20 ms after the SVG is made.
See the CreateJS Easel Docs for Container events such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover
CLOSE ▲PAGE ▤CODE ▤TOUR😊VIDS
Speech
zim class - extends a createjs.EventDispatcher
DESCRIPTION
Create a new Speech() and use talk() or listen()
The talk() will speak words
The listen() will turn voice into words
This is a short wrapper class for the Web Speech API
https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API
Thanks Karel Rosseel for the initial research on Speech.
SEE: https://zimjs.com/016/speech.htmlNOTE
The listen() method is currently not supported by Apple iOS Web - only Native apps (grr)
But the talk() method works on iOS and Android Web - however, there seems to be one voice.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const speech = new Speech();
// interact at least once before talking
new Button({label:"TALK"}).center().tap(()=>{
speech.talk("Hello World");
});
EXAMPLE
// let user pick a voice
const speech = new Speech();
// interact at least once before talking
new Button({label:"TALK"}).center().mov(0,-120).tap(()=>{
speech.talk("Hello World!", list?list.text:null);
});
let list;
speech.on("voiceschanged", ()=>{ // must wait for voices to be loaded
if (list) list.dispose(); // seems to run only once but just in case
list = new List(500,300,speech.voices,6).center().mov(0,120);
S.update();
});
EXAMPLE
const speech = new Speech();
new Button({label:"LISTEN"}).center().tap(()=>{
// Note: iOS does not support
speech.listen();
});
speech.on("result", e=>{
label.text = e.words;
S.update();
})
const label = new Label({align:CENTER, text:""}).reg(CENTER).pos(0,200,CENTER,BOTTOM);
METHODS
talk(text, voice, volume, lang, rate, pitch) - the computer will say the words
returns an utterance object on which all these parameter can be dynamically set including the words
text - the text to say (or see Web Speech API for special formats)
voice (default "Microsoft David - English (United States)") - the voice
also see "voiceschanged" event at which point speech.voices will be a list
the voices do not need to be loaded if using the default voice
volume (default 1) the volume of the voice
lang (default user system language) the language of the voice
rate (default 1) the rate of the voice
pitch (default 1) the pitch of the voice
stopTalking() - stop talking
pauseTalking() - pause talking
resumeTalking() - resume talking ;-)
getVoices() - called automatically when the the Voice's voiceschanged event triggers
his is set automatically but may take a second or two to load
listen(interim, language) - start listening to the mic to record what is said
this will dispatch a "result" event on the Speech object
interim defaults to true and means it gives a results as each word is spoken
set interim to false to give a result only after speaking is done (or a pause in speaking)
the result event object (often e is used) will have a words property with the words
and a confidence property with a percent as to how confident the match
stopListening() - stop listening
PROPERTIES
type - holds the class name as a String
voices - an array of string voices available for talk() - loads when "voiceschanged" event is dispatched (automatically set)
voiceObjects - an array of voice objects with name and lang properties used internally by talk() - matches voices indexes
voiceLanguages - an array of languages for the voices - matches voices indexes
recognition - the SpeechRecognition() object created (used internally) has JS properties - see:
https://wicg.github.io/speech-api/#speechreco-attributes
for instance, set the default language as mySpeech.recognition.language = "en-US";
EVENTS
dispatches a "voiceschanged" event when voices property will be ready - not needed if just using default voice
dispatches "result" when either as each word is spoken if listen() is used (interim defaults to true)
or at the end of speaking words if listen(false) is used (interim is set to false)
the result event will have an event object (often e is used) that holds a words property with the words spoken
and a confidence property that is a ratio (0-1) for confidence in the result
Note: iOS (at this time) does not support the listen() and result event
dispatches "speechend" events when listen() has detected an end to the talking
dispatches "start", "end" events
dispatches a "boundary" event between words
dispatches an "error" event if no words are spoken, etc. the event object has an error property with the error message
Note: there are more features to the Web Speech API - see the HTML docs
CLOSE ▲PAGE ▤CODE ▤VIDS
Fonts
For a Label object or components with labels
DESCRIPTION
As of ZIM ZIM 02, custom fonts can be loaded by their file name without the need for a font object {}.
Custom fonts must be preloaded in the Frame() or loadAssets() assets parameter.
Supported fonts are "ttf","otf","woff2","woff","fnt" files and Google fonts.
The font is then available to Label and components with labels.
ZIM wraps the CreateJS PreloadJS library to offer simplified loading.
NOTE
do not use uppercase letters on font name or extension - seems to not load on mobile.
NOTE
system fonts can be used without loading the font.
**************
DO NOT make a new Font() - rather, pass the font information into the Frame assets parameter.
Or load fonts when desired with Frame loadAssets() and wait for a complete event.
In either case, the font will then be available for Labels
**************
EXAMPLE
new Frame({ready, assets:"Reuben.otf", path:"assets/"});
function ready() {
new Label("Custom Font", 30, "Reuben").center();
}
EXAMPLE
// here is the same but with the font object - used pre ZIM ZIM 02 - this still works
new Frame({ready, assets:{font:"Reuben", src:"Reuben.otf"}, path:"assets/"});
function ready() {
new Label("Custom Font", 30, "Reuben").center();
}
EXAMPLE
// use a Google font https://fonts.google.com/ and apply it with a STYLE
// previously, the whole URL was needed:
// new Frame(FIT, 1024, 768, red, dark, ready, "https://fonts.googleapis.com/css?family=Dancing+Script");
// now, the gf_ shortcut can be used:
new Frame(FIT, 1024, 768, red, dark, ready, "gf_Dancing+Script");
function ready() {
STYLE = {font:"Dancing Script"}; // or include + but not necessary.
new Label("Custom Google Font").center();
new Label("Second Custom Google Font").center().mov(0,100);
}
EXAMPLE
// with loadAssets, the previous example would be:
F.loadAssets("gf_Dancing+Script");
F.on("complete", ()=>{
new Label("Custom Google Font", 50, "Dancing Script").center();
});
Keys
"keydown" and "keyup" Frame events
DESCRIPTION
The Frame has a "keydown" and "keyup" events to capture key presses
and a keyboardMessage() method to prompt for keyboard interactivity.
When an app is first loaded it cannot receive keyboard events until it is interacted with.
Interaction must be a mousedown or click - not just an over or move interaction.
Often, we will make an intro Pane() or play Button() for a game, for instance, before playing sounds.
In ZIM 014 we added a keyboardMessage() method to the Frame to prompt for an interaction so key events are activated.
Also see ZIM Keyboard(), TextEditor(), TextInput() and MotionController() for various keyboard functionality.
EXAMPLE
F.keyboardMessage(); // will prompt for keyboard control
F.on("keydown", e=>{
zog(e.key) // a string of the keypress
zog(e.keyCode) // the numeric code of the keypress (older but used in lots of examples)
zog(F.altKey) // true if alt is pressed - also: ctrlKey, metaKey, shiftKey
});
// for controlling a game object with keyboard please see MotionController(obj, "keydown")
// as the MotionController solves a few tricky issues with key control
Cursors
Frame property
DESCRIPTION
In ZIM 014 we added support for custom cursors as a Frame property
to get or set an object literal with custom cursors that override the CSS cursors or act on their own.
See: https://zimjs.com/014/cursors.html
the format is:
F.cursors = {default:DisplayObject, pointer:DisplayObject, madeUp:DisplayObject, etc.}
NOTE: use the cur() method to specify which cursor is on an object.
drag(), tap(), etc. will already work with the custom cursor system
set F.cursors = null to turn off custom cursors
There is a Frame cursorsExclude() method to exclude certain objects from the custom cursors.
There is a Frame cursorObj property to indicate the current custom cursor.
EXAMPLE
F.cursors = {
// the default cursor will be an emitter
default:new Emitter({
obj:new Circle({min:3,max:8},white),
force:1,
gravity:0
}),
box:new Rectangle(40,40,clear,white,8,0,true)
.reg(CENTER)
.animate({props:{dashedOffset:-110}, rewind:true, loop:true})
}
const rect = new Rectangle(500,500,red).center().cur("box"); // apply the box cursor
Tilt
"devicemotion" and "deviceorientation" Frame events
DESCRIPTION
The Frame has a "devicemotion" event to capture device tilt
and a "deviceorientation" to capture device rotation (like a compass)
Also see the PermissionAsk() class which will handle asking for permission on iOS devices.
NOTE
For either event the Frame sensors parameter MUST be set to true
EXAMPLE
// for capturing tilt on device (rotation about an axis)
// also SEE the PermissionAsk example below
// also set Frame sensors parameter to true
// and be on a mobile device
const label = new Label().center();
F.on("deviceorientation", e=>{
label.text = e.rotation.x +","+ e.rotation.y +","+ e.rotation.z;
S.update();
});
EXAMPLE
// on iOS, the sensors must be allowed first - this example works for all devices
const label = new Label().center();
const permissionType = "deviceorientation"; // or "devicemotion"
const ask = new PermissionAsk(init, permissionType);
function init(yes) {
// if the user answers yes to the PermissionAsk
const errorPane = new Pane("SENSOR not available",yellow);
if (yes) {
// use the sensors
F.on("deviceorientation", e=>{
label.text = e.rotation.x +","+ e.rotation.y +","+ e.rotation.z;
S.update();
});
S.update();
} else { // answered no to PermissionAsk dialog
errorPane.show();
}
}
EXAMPLE
// for shaking motion - ALSO see the PermissionAsk example above for iOS
// and replace "deviceorientation" with "devicemotion"
// and replace e.rotation.x, etc. with e.acceleration.x etc.
// also set Frame sensors parameter to true
// and be on a mobile device
const label = new Label().center();
F.on("devicemotion", e=>{
label.text = e.acceleration.x +","+ e.acceleration.y +","+ e.acceleration.z;
S.update();
});
EVENTS
"devicemotion" - for tilt (also set Frame sensors parameter to true)
fired on moving mobile device - like a tilt or shake - eventObject.acceleration holds x, y and z properties of motion
"deviceorientation" - for rotation (also set Frame sensors parameter to true)
fired as device orientation changes:
eventObject.rotation.x (beta in HTML specs) holds rotation about the x axis between -180 and 180 (tipped forward or backward)
eventObject.rotation.y (gamma in HTML specs) holds rotation about the y axis between -90 and 90 (tipped left or right)
eventObject.rotation.z (alpha in HTML specs) holds rotation about the z axis 0-360 clockwise (relative to orientation when app loads)
note rotation.z is 360-alpha compared to the HTML 5 specs
note also that beta, gamma and alpha from the HTML 5 specs are also provided
CLOSE ▲PAGE ▤CODE ▤
PermissionAsk
zim class - extends a zim.Pane which extends a zim.Container
DESCRIPTION
A circular confirmation widget to ask the user if they want a permission for iOS.
For some iOS permissions, the app needs to be interactive with first before permission can be asked!
This is for iOS only - if not in iOS then will just pass through the test.
Also adds Frame deviceorientation and devicemotion events for a matching permissionType.
Pre ZIM 018, this was done with a sensors parameter on the Frame.
The sensors parameter has now been removed and the events are handled with PermissionAsk.
NOTE
this started as SensorAsk but the class has been adjusted to handle other permissions and the name has been changed in ZIM 016
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// DEVICE ORIENTATION - gives angle of device in all 3 dimensions
// Note: this is NOT an orientation event to see if phone is portrait or landscape (see Frame orientation event)
// new Frame({scaling:FIT, width:1024, height:768, color:white, outerColor:dark, ready:ready, sensors:true});
const permissionType = "deviceorientation";
const ask = new PermissionAsk(init, permissionType);
function init(yes) {
const errorPane = new Pane("SENSOR not available",yellow);
if (yes) { // the user answers yes to the PermissionAsk
// use the sensors
const label = new Label("on mobile").centerReg();
F.on("deviceorientation", e=>{
// use the sensors
label.text = label.text = "x: "+decimals(e.rotation.x) +"\ny: "+ decimals(e.rotation.y) +"\nz: "+ decimals(e.rotation.z);
S.update();
});
} else { // the user answered no to PermissionAsk dialog
errorPane.show();
}
}
EXAMPLE
// DEVICE MOTION - gives accelerometer values in all 3 dimensions
// new Frame({scaling:FIT, width:1024, height:768, color:white, outerColor:dark, ready:ready, sensors:true});
const permissionType = "devicemotion";
const ask = new PermissionAsk(init, permissionType);
function init(yes) {
const errorPane = new Pane("SENSOR not available",yellow);
if (yes) { // the user answers yes to the PermissionAsk
// use the sensors
const label = new Label("on mobile").centerReg();
F.on("devicemotion", e=>{
// use the sensors
label.text = "x: "+decimals(e.acceleration.x, 3) +"\ny: "+ decimals(e.acceleration.y, 3) +"\nz: "+ decimals(e.acceleration.z, 3);
S.update();
});
} else { // the user answered no to PermissionAsk dialog
errorPane.show();
}
}
EXAMPLE
// on iOS, the app must be interacted with before using mic or cam
// goes right to permissions on computer and android
// pops up a PermissionAsk Pane on iOS then if yes, goes to permissions on iOS
new PermissionAsk(init, "cam");
function init(val) {
new Label(val).center(); // media stream if yes to permissions otherwise false
S.update();
}
EXAMPLE
// on iOS, the app must be interacted with before using mic or cam
// this goes right to permissions on computer and android
// but pops up a PermissionAsk Pane on iOS then if yes, goes to permissions on iOS
new PermissionAsk(init, "mic"); // or "cam" or "miccam"
function init(val) {
new Label(val).center(); // media stream if yes to permissions otherwise false
S.update();
}
PARAMETERS - accepts ZIM DUO regular parameters in order or a configuration object with parameters as properties
callback - the function to callback when permission is accepted
if the permissionType is deviceorientation or devicemotion this will receive true for accept or false for no permission
if the permissionType is audio, video or audiovideo this will receive a stream if accepted or false if not
for not iOS, the system permissions will appear
for iOS the PermissionAsk Pane will be shown and the system permissions
in all cases, the callback will be called on result
the parameter given to the callback will be true (sensors) or a media stream (mic / cam) or false if not accepted
permissionType - (default "deviceorientation") the string deviceorientation, devicemotion, mic, cam, or miccam
color - (default zim.dark) the font and border color of the widget
backgroundColor - (default zim.lighter) the backgroundColor of the widget
METHODS
dispose() - dispose the PermissionAsk
ALSO
see all the methods of a zim Pane()
including hide()
ALSO
ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO
see the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.
PROPERTIES
type - name of class as a string
permissionType - the type of permission requested
label - reference to the zim Label
yes - reference to the zim Button with YES
no - reference to the zim Button with NO
ALSO
see ZIM Pane for properties such as:
backdropColor, etc.
ALSO
see ZIM Container for properties such as:
width, height, widthOnly, heightOnly, draggable, level, depth, group
blendMode, hue, saturation, brightness, contrast, etc.
ALSO
see the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.
CLOSE ▲PAGE ▤CODE ▤
Colors - red, salmon, orange, green, pink, blue, brown, yellow, purple, interstellar, black, darker, licorice, dark, charcoal, grey, gray, granite, tin, pewter, silver, fog, mist, light, moon, lighter, wh¡te, faint, clear
zim constants (lowercase)
DESCRIPTION
ZIM colors for convenience - such as blue, green, dark, etc.
Traditional HTML colors as strings can also be used such as "blue", "tomato", etc.
Also available are HEX numbers as strings such as "#333" or "#cc0000"
and RGB and RGBA of 0-255 values for red, green, blue with 0 being no color and 255 being full color
then alpha from 0 to 1 as a decimal with 0 being transparent to 1 being opaque.
These are in a string such as "rgb(0,0,255)" or "rgba(0,0,0,.2)" (.2 is alpha)
NOTE
These DO NOT require the zim namespace, even if zns=true is set or if using node modules without zimplify()
NOTE
ZIM colors started off as properties of the frame so F.blue
but the frame properties have now been removed as they are stored on the zim namespace and as globals
FAINT AND CLEAR
faint is "rgba(0,0,0,.01)" which is the faintest color that can be interacted with
clear is "rgba(0,0,0,0)" which is invisble but cannot be interacted with
However, clear can be used along with expand(0) to be able to interact with an object
where the expand(0) (or whatever padding is desired) adds a CreateJS hitArea.
DARKEN AND LIGHTEN
ZIM has added darken() and lighten() methods to the JS String prototype to handle easy darkening and lightening of colors
This is very handy in desiging.
https://zimjs.com/docs.html?item=darkenhttps://zimjs.com/docs.html?item=lighten
COLOR BLENDS
ZIM has toColor() to move one color towards another color
https://zimjs.com/docs.html?item=toColor
ALPHA
ZIM has toAlpha() to set the alpha of colors
https://zimjs.com/docs.html?item=toAlpha
GRADIENTS
ZIM DisplayObjects accept GradientColor(), RadialColor() and BitmapColor() objects - see docs under the CODE module for info.
https://zimjs.com/docs.html?item=GradientColorhttps://zimjs.com/docs.html?item=RadialColorhttps://zimjs.com/docs.html?item=BitmapColorNOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
new Circle(100, blue).center();
// is the same as
new Circle(100, "#50c4b7").center();
// ZIM colors (or HTML colors) can have alpha adjusted as follows:
new Circle(100, blue.toAlpha(.5)).center();
// colors can be darkened or lightened using darken() or lighten()
new Circle(100, blue.darken(.5)).center();
// colors can be blended using toColor()
new Circle(100, blue.toColor(red, .2)).center();
Constants - FIT, FILL, FULL, LEFT, RIGHT, CENTER, MIDDLE, START, END, TOP, BOTTOM, OVER, UNDER, HORIZONTAL, VERTICAL, BOTH, RANDOM, RADIAL, UP, DOWN, NEXT, PREV, AUTO, DEFAULT, ALL, NONE, AVE, GET, POST, LOCALSTORAGE, SOCKET, TO, FROM, BOTH, SINE, SQUARE, TRIANGLE, SAW, ZAP, IGNORE
zim constants
DESCRIPTION
ZIM positioning, data and sound constants for convenience if desired.
These DO NOT require the zim namespace, even if zns=true is set or if using node modules without zimplify()
These are all equal to strings with lowercase values.
So using TOP is the same as using "top"
Positioning: FIT, FILL, FULL, LEFT, RIGHT, CENTER, MIDDLE, JUSTIFY, START, END, TOP, BOTTOM, OVER, UNDER, HORIZONTAL, VERTICAL, BOTH, RANDOM, RADIAL, UP, DOWN, NEXT, PREV, AUTO, DEFAULT, ALL, NONE, AVE
Data: GET, POST, LOCALSTORAGE, SOCKET, TO, FROM, BOTH
Sound: SINE, SQUARE, TRIANGLE, SAW, ZAP
Style: IGNORE
NOTE
there are a set of constants at the start of the CONTROLS module as well
NOTE
for START and END, see DIR constant under CONTROLS module.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
new Tip("hello", RIGHT, MIDDLE).show();
// same as
new Tip("hello", "right", "middle").show();
Globals - F, S, W, H, M
zim globals
DESCRIPTION
F, S, W, H, M are globals given when using ZIM Frame.
There are also globals for the ZIM CONSTANTS and ZIM Colors - see the Docs above
and a few variables and functions listed under ALL INITIAL GLOBALS below.
The globals NEVER require the zim namespace and are global in the JavaScript window scope.
ZIM has a method called zimplify() that can make all ZIM classes, functions and properties global.
zimplify() loops through all properties on the zim namespace and adds them to the JavaScript window.
Examples are Frame(), Button(), center(), STYLE, GLOBALSTYLE, Emitter(), etc.
zimplify() is automatically run when using the CDN ES module or script tags
unless the global variable zns is set to true before importing ZIM.
If zns is set to true, then the zim namespace is required: zim.Frame(), etc.
If using NPM, then zimplify() is NOT automatically run, and the zim namespace is required,
but zimplify() can be used at the top to turn all ZIM classes, functions and properties global.
NOTE
there are a set of constants at the top of the CONTROLS module like STYLE, PATH, TIME, etc.
These are NOT global unless zimplify() is run.
So default global for ES module and scripts but default NOT global for NPM
ADDED ZIM ZIM 01:
F - the ZIM default frame - also there is a zimDefaultFrame and zdf global variable made - but F is easier.
the ZIM default frame is the first frame made - or the frame that last has the setDefault() method called
S - the Stage of the default frame - this will be the stage that addTo(), center(), etc. get added to if no container is provided
W - the width of the default frame - this will be updated automatically in FULL mode on window resize.
H - the height of the default frame - this will be updated automatically in FULL mode on window resize.
M - false if not on mobile, otherwise reports the mobile device "iOS", "android", etc. - can also use mobile().
There are many previous examples that declare frame, stage, stageW and stageH
this technique can still be used but you are welcome to use the F, S, W, H if desired.
ALL INITIAL GLOBALS:
WW (JavaScript window - saves 1.5K as window reference is not minified)
createjs (namespace)
zim (namespace)
zns (zim name space - set to true before importing ZIM to require namespace)
zon (set to false before importing ZIM to stop all console messages)
zimBlob (used to avoid import conflict with JS Blob)
zimWindow (used to avoid import conflict with JS Window)
z_i (global iterator - reused rather than declaring i all the time)
z_d (function for ZIM Distill - like tree-shaking)
isDUO (used for ZIM DUO technique)
zimify (turn ZIM functions into methods as of in ZIM 4TH)
zimplify (function that adds all ZIM Objects to the global namespace)
zimDefaultFrame (an original global reference to the default frame)
zdf (the shortened reference to the default frame)
F, S, W, H, M (frame, stage, stageW, stageH, mobile)
ZIM WRAP module of short globals starting with z - See the WRAP section of the DOCS
zog, zid, zss, zgo, zum, zot, zop, zil, zet, zob, zik, zta, zor
zog has zogr, zogb, zogg, etc, for logging with various colors
ZIM CONSTANTS: See CONSTANTS entry in the Docs above.
ZIM Colors: See Colors entry un the Docs above.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
new Frame({ready});
function ready() {
const c = new Circle().pos(W*.2, H*.2);
F.on("keydown", e=>{
c.sca(rand(.5,3));
S.update();
zog(M); // false if on desktop/laptop
});
}
Stage
zim class - extends a createjs.Stage which extends a createjs.Container
DESCRIPTION
An extension of a createjs.Stage that includes read only type, width and height properties, loop and hitTestGrid methods.
When using zim.Frame, there should be no reason to make a zim.Stage.
This was put in place to match the ZIM TypeScript typings for stage width and height.
Also see https://www.createjs.com/docs/easeljs/classes/Stage.htmlNOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const stage = new Stage("canvasID");
PARAMETERS
canvasID - (default null) string ID for canvas tag
touch - (default false) set to true for touch on mobile
will be multitouch unless singleTouch is set to true
singleTouch - (default false) set to true for single touch
will override touch setting and turn touch to true but with single touch
METHODS
loop(call, reverse, step, start, end) - see the ZIM Display Methods loop() for details
see the ZIM Display Methods loop() for details
hitTestGrid(width, height, cols, rows, x, y, offsetX, offsetY, spacingX, spacingY, local, type)
see the ZIM Display Methods hitTestGrid() for details
disposeAllChildren() - remove and dispose all children
See the CreateJS Easel Docs for Stage methods, such as:
clear, update, toDataURL
And all the Container methods such as:
on, off, setBounds, getBounds, globalToLocal, etc.
PROPERTIES
frame - if made with ZIM Frame then frame points to the frame that made the stage
type - holds the class name as a String
width - read only width set by ZIM Frame
height - read only height set by ZIM Frame
ALSO
see the CreateJS Easel Docs for Stage properties, such as:
autoClear, canvas, nextStage, etc.
and all the Container properties, such as:
children, mouseChildren, filters, cacheCanvas, etc.
Note: also makes a partial zdf allowing circle.center() to work
but will be overwritten if an actual Frame is made
EVENTS
See the CreateJS Easel Docs for Stage events, such as:
mouseenter, mouseleave, stagemousedown, stagemousemove, stagemouseup, drawstart, drawend, etc.
and all the Container events such as:
click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover
CLOSE ▲PAGE ▤CODE ▤TOUR😊
StageGL
zim class - extends a zim.Stage which extends a createjs.Stage
DESCRIPTION
An extension of a zim.Stage for WebGL support
See ZIM Stage and https://www.createjs.com/docs/easeljs/classes/StageGL.htmlNOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const stage = new StageGL("canvasID", {preserveBuffer:true, antialias:true});
PARAMETERS
canvasID - (default null) string ID for canvas tag
options - (default null) an object literal with the following properties
FROM https://www.createjs.com/docs/easeljs/classes/StageGL.html
preserveBuffer (default false)
If true, the canvas is NOT auto-cleared by WebGL (the spec discourages setting this to true). This is useful if you want persistent draw effects.
antialias (default false)
Specifies whether or not the browser's WebGL implementation should try to perform anti-aliasing. This will also enable linear pixel sampling on power-of-two textures (smoother images).
transparent (default false)
If true, the canvas is transparent. This is very expensive, and should be used with caution.
premultiply (default false)
Alters color handling. If true, this assumes the shader must account for pre-multiplied alpha. This can help avoid visual halo effects with some assets, but may also cause problems with other assets.
autoPurge (default 1200)
How often the system should automatically dump unused textures with purgeTextures(autoPurge) every autoPurge/2 draws. See purgeTextures for more information.
touch - (default false) set to true for touch on mobile
will be multitouch unless singleTouch is set to true
singleTouch - (default false) set to true for single touch
will override touch setting and turn touch to true but with single touch
METHODS
loop(call, reverse, step, start, end) - see the ZIM Display Methods loop() for details
see the ZIM Display Methods loop() for details
hitTestGrid(width, height, cols, rows, x, y, offsetX, offsetY, spacingX, spacingY, local, type)
see the ZIM Display Methods hitTestGrid() for details
disposeAllChildren() - remove and dispose all children
See the CreateJS Easel Docs for StageGL methods:
https://www.createjs.com/docs/easeljs/classes/StageGL.htmlPROPERTIES
frame - if made with ZIM Frame then frame points to the frame that made the stage
type - holds the class name as a String
width - read only width set by ZIM Frame
height - read only height set by ZIM Frame
See the CreateJS Easel Docs for Stage properties:
https://www.createjs.com/docs/easeljs/classes/StageGL.html
Note: also makes a partial zdf allowing circle.center() to work
but will be overwritten if an actual Frame is made
EVENTS
See the CreateJS Easel Docs for StageGL events, such as:
mouseenter, mouseleave, stagemousedown, stagemousemove, stagemouseup, drawstart, drawend, etc.
and all the Container events such as:
click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover
CLOSE ▲PAGE ▤CODE ▤TOUR😊VIDS
Container
zim class - extends a createjs.Container
DESCRIPTION
A Container object is used to hold other display objects or other containers.
You can then move, rotate, scale and skew the container and all objects inside will transform accordingly.
You can apply an event on a container and use the target property of the event object
to access the object in the container that caused the event
or use the currentTarget property of the event object to access the container itself.
Containers do not have bounds unless some items in the container have bounds -
at which point the bounds are the combination of the bounds of the objects with bounds.
You can manually set the bounds with setBounds(x,y,w,h) - read the CreateJS docs.
Or pass in width and height, or boundsX, boundsY, width, height to have Container set bounds.
Manually set bounds will not update automatically unless you setBounds(null).
NOTE
All the ZIM shapes and components extend the Container.
This means all shapes and components inherit the methods and properties below
and indeed, the Container inherits all the createjs.Container methods and properties.
See the CreateJS documentation for x, y, alpha, rotation, on(), addChild(), etc.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const container = new Container().loc(100,100);
// demonstration of adding drag() to a Container
const rect = new Rectangle(100, 100, blue)
.addTo(container); // add rectangle to container
const circle = new Circle(40, red)
.center(container) // add the circle to the container and center
container.drag(); // will drag either the rectangle or the circle
container.drag({all:true}); // will drag both the rectangle and the circle
// below will reduce the alpha of the object in the container that was clicked (target)
container.on("click", e => {e.target.alpha = .5; S.update();});
// below will reduce the alpha of all the objects in the container (currentTarget)
container.on("click", e => {e.currentTarget.alpha = .5; S.update();});
EXAMPLE
// Here we apply the normalize() method of the Container to a Tile (which is a Container)
// and scale the children based on the resulting ratio
const tile = new Tile(new Rectangle(70,70,white,black).reg(CENTER), 9, 1, 20)
.normalize("x", CENTER)
.center();
// scale the items based on the distance from the center
// note, could set the strokeObj:{ignoreScale:true} param of Rectangle above too
tile.loop(item=>{
zogy(decimals(item.ratio)); // 0, .3, .5, .8, 1, .8, .5, .3, 0
item.sca(.5 + item.ratio*2);
});
// adjust the spacing by re-tiling the scaled items
const final = new Tile({
obj:tile.items,
cols:tile.items.length,
rows:1,
spacingH:-10,
unique:true, // make sure we do not pick (ZIM VEE) from the array
valign:CENTER
}).center()
tile.dispose();
final.sortBy("ratio"); // make more central objects come to front
EXAMPLE
// In this case we animate the children based on the rate
// animate() the rate and use sequence:0 to apply different speed to each item
const tile = new Tile(new Rectangle(10, 10, series(green,blue,yellow)), 20, 20, 5, 5)
.normalize("reg", CENTER)
.center()
.noMouse()
.animate({
props:{scale:2},
time:2,
ease:"elasticOut",
rate:target=>{return 1 + target.ratio*4},
sequence:0 // turn on per item animation
});
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
** Container has a, b, c, d parameters to set x, y, width and height
There are two settings that are more common than providing all four parameters:
1. provide no parameters to make a Container with bounds that grow with content.
2. provide a and b only to make a Container with a width and height (and bounds with x and y of 0)
Here is what happens when you provide 1, 2 or all of the a,b,c,d parameters:
a - (default null) - width and height will be equal to parameter a (x and y will be 0)
or provide a ZIM Boundary() object or createjs Rectangle() object with x, y, width and height properties
a, b - (default null) - the width and height (x and y will be 0)
this is the normal way to make a container with a starting width and height
a, b, c, d - (default null) - the x, y, width and height of the bounds
if parameter a is not set, then the Container will take bounds that grow with its content
the bounds of the Container can be set at any time with setBounds(a, b, c, d)
if the bounds are set, then the Container bounds will not change as content is added
the bounds can be removed with setBounds(null) and the Container will get auto bounds
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly
METHODS
* This class has all the DISPLAY METHODS introduced in ZIM 4TH
* the methods are available to all ZIM Display objects that extend a ZIM Container
* such as ZIM Rectangle, Circle, Triangle, BLob
* as well as all components like: Label, Button, Slider, Dial, Tab, Pane, etc.
* as well as the ZIM display wrappers: Container, Shape, Sprite, MovieClip and Bitmap
cache(width||x, height||y, null||width, null||height, scale, options, margin, rtl, willReadFrequently) - overrides CreateJS cache() and returns object for chaining
** Supports ZIM DUO
If you do not provide the first four parameters, then the cache dimensions will be set to the bounds of the object
width||x - (default getBounds().x) the width of the chache - or the x if first four parameters are provided
height||y - (default getBounds().y) the height of the chache - or the y if first four parameters are provided
width - (default getBounds().width) the width of the chache - or null if first two parameters are provided
height - (default getBounds().height) the height of the chache - or null if first two parameters are provided
scale - (default 1) set to 2 to cache with twice the fidelity if later scaling up
options - (default null) additional parameters for cache logic - see CreateJS somewhere for details
also added adjustBounds property for options - set to true to set new bounds and registration point
on cached objects with x,y,width,height different than the original
this appears to NOT be the default with createjs cache() which keeps the original registration point and bounds
automatically fixing this changes lots of things so use the adjustBounds option when needed
for instance when caching parts of a container and requiring hit tests or the part to be draggable, etc.
margin - (default 0) add or subtract a margin from the bounds
eg. margin:10 will make the cache size 10 pixels more on all sides
this can be handy when caching objects with borders - that go half outside the natural bounds
rtl - (default null) set to true to use right to left
willReadFrequently - (default null) set to true if planning on using operations with getImageData() or toDataURL()
if you get a warning in the console about willReadFrequently then set this to true
updateCache() - updates the cache if cache() is set
uncache() - uncaches and returns object for chaining
setBounds(width||x||Boundary, height||y, null||width, null||height) - overrides CreateJS setBounds() and returns object for chaining
If you do not provide any parameters, then the bounds will be reset to the calculated bounds
width||x||Boundary - (default null) the width of the bounds - or the x if four parameters are provided
or a ZIM Boundary Object {x,y,width,height} - same as CreateJS Rectangle - thanks Joseph Diefenbach
height||y - (default width) the height of the bounds - or the y if four parameters are provided
width - (default null) the width of the bounds - or null if only the first two parameters are provided
height - (default null) the height of the bounds - or null if only the first two parameters are provided
getBounds(targetSpace) - overrides CreateJS getBounds() and returns a rectangle with x, y, width height of bounds (not including outside of border)
pass in a Container (including Stage) to map rectangle to that coordinate space
childrenToBitmap() - turns content to a Bitmap and adds bitmap to container - removing all other children
sortBy(prop) - sorts the children of the container by a property - must be numeric
normalize(prop, from, from2, min, max, factor, clamp) - sets a ratio property (1 to 0) for each item in a Container.
passing in no parameters will normalize to the last normalized parameters - also see normalized property
** Supports ZIM DUO
PARAMETERS: prop - the property (as a string) to normalize
from - where the ratio will start at 1, values can be START (highest number), END (lowest number), CENTER, LEFT, RIGHT
from2 - used with "reg" with values of START, END, CENTER, TOP, BOTTOM - see the SPECIAL note down below.
min and max - can be set to override the calculated min and max values for the items in container - min and max are ignored for "reg"
factor - (default 1) is going the same direction and -1 is going in opposite direction
targetRound - (default false) set to true to round the converted number
clamp - (default true) set to false to let results go outside min and max range
WORKINGS: the ratio is 1 when it is closest to the from parameter(s) and 0 when farthest
For example, container.normalize("x") would provide a ratio property for each item in the container
with a default from START that would be 1-item.x/(largestX-smallestX)
In other words, if the item is the least distance in the x then ratio is 1, if the item is the most distance in the x then the ratio is 0
The from parameter will determine where the ratio is the largest.
container.normalize("x", END) would be 0 for an x of 0 and 1 for an item on the right side
container.normalize("x", CENTER) would be 1 for an item in the middle and 0 for items at the start and end
Set factor to -1 to reverse the direction of the ratio - eg. 0 in the middle and 1 at the start and end.
Or set min and max values to override the calculated min and max
The clamp, if true, will keep values between min and max or let them go outside these if false
there is one ratio property per object but this can be set and used any number of times.
NOTE: The ratio property is like a ZIM Proportion convert() but to each item in the container.
A provided property is converted based on a min and max to a target of 1 to 0 (factor is inverted)
SPECIAL: a property of "reg" will actually set the registration to the from value
the still property of reg() is used to keep the item from shifting.
An _orX and _orY will be provided on each item for original regX and regY.
setting normalize("reg", CENTER) will do both horizontal and vertical to the container dimensions.
If this is not desired, use container.loop(item=>{item.reg(item._orX, item._orY, true)});
to set the registration point back but still keep the ratio property
USAGE: the ratio property can be used by animate() with sequenceRatio to set the rate of an animation based on ratio
Or the ratio property can be used directly - for instance, to set a scale based on a distance from somewhere
Or as another example, set the alpha based on the rotation of a shape in the container
specialColor(colorCommand, colorObject) - used internally by ZIM Shapes
to set GradientColor, RadialColor and BitmapColor on a fill or stroke color command
hasProp(property as String) - returns true if property exists on object else returns false
clone(exact) - clones the container, its properties and all its children
exact (default false) ZIM VEE (Pick) values are active in clones unless exact is set to true
For instance, if a Container holds a new Circle(20,[blue,green])
then its clone might be blue or green
If exact is set to true then the clone will be whatever color was picked for the original circle
disposeAllChildren() - removes and disposes all children but leaves the container (see also CreateJS removeAllChildren() which does not dispose them)
dispose(disposing) - removes from parent, removes event listeners - must still set outside references to null for garbage collection
if calling dispose() on the super class from a custom class then pass in true to indicate already started dispose (otherwise infinite loops)
ALSO
see the CreateJS Easel Docs for Container methods, such as:
on(), off(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.
PROPERTIES
** common to all DisplayObjects that extend a Container such as ZIM Shapes and Components
type - holds the class name as a String
group - used when the object is made to add STYLE with the group selector (like a CSS class)
** bounds must be set first (or width and height parameters set) for these to work
** setting these adjusts scale not bounds and getting these uses the bounds dimension times the scale
width - gets or sets the width. Setting the width will scale the height to keep proportion (see widthOnly below)
height - gets or sets the height. Setting the height will scale the width to keep proportion (see heightOnly below)
widthOnly - gets or sets the width. This sets only the width and may change the aspect ratio of the object
heightOnly - gets or sets the height. This sets only the height and may change the aspect ratio of the object
ratio - get a ratio set by the Container normalize method() - or Tile itemRegX, itemRegY parameters
this will probably be a value from 1 to 0 as to how close the property is the end specified in the from parameter of normalize()
a value of 1 is the closest and a value of 0 is the farthest - see the normalize() method for details
normalized - get if the container has been normalized - see normalized parameter
draggable - set to true for a default drag() and false for a noDrag()
level - gets or sets the level of the object in its parent container (or the stage) - a property for parent.getChildIndex() and parent.setChildIndex()
depth - for ZIM VR - the depth used to shift left and right channel and for parallax in VR - also see dep() ZIM Display method
blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation
effects - an object that holds effects added such as blur, glow, shadow, color, multi and alpha - see effect() under ZIM Methods
** the following are convenience Effects that run a ZIM MultiEffect()
** these can use a lot of processing when animating - see Docs for effects()
** batch versions are available too as hueBatch, etc. these will not update the effect until updateEffects() is called on the object
hue - the tint of an object between -180 and 180 with 0 being no change
Also see the keyOut() method of Bitmap(), Pic() and SVG() that has a replacement color parameter
saturation - the amount of color of an object between -100 and 100 with 0 being no change
brightness - the lightness or darkness of an object between -255 and 255 with 0 being no change
contrast - the crispness of an object between -100 and 100 with 0 being no change
ALSO
see the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scale, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.
EVENTS
See the CreateJS Easel Docs for Container events such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover
CLOSE ▲PAGE ▤CODE ▤TOUR😊BITS VIDS
Shape
zim class - extends a createjs.Shape
DESCRIPTION
ZIM Shape lets you draw dynamic shapes beyond the ZIM provided shapes.
You make a new shape object and then draw in its graphics property
using similar commands to the HTML Canvas commands (and Flash Bitmap drawing).
See the CreateJS Easel Shapes and Graphics docs:
https://www.createjs.com/docs/easeljs/classes/Graphics.html
ALSO SEE: https://zimjs.com/docs.html?item=Generator for dynamically drawing into shapes like Processing (P5js)
ALSO SEE: https://zimjs.com/docs.html?item=Squiggle,Blob for odd shapes and user adjustable shapes
ALSO SEE: https://zimjs.com/docs.html?item=Pen for dynamic drawing of lines
ALSO SEE: https://zimjs.com/docs.html?item=Connectors for dynamic connections
// these mean we rarely use Shape directly but all of above were made in ZIM with Shape
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
NOTE
as of ZIM 10.6.0 the tiny API is available right on the Shape (no need for graphics)
EXAMPLE
// NEWER CODE
// Uses the tiny API (see options down below) right on the ZIM Shape
// for example: f() is fill() and dr() is drawRect()
// s() is beginStroke(), ss() is setStrokeStyle(), mt() is moveTo(), lt() is lineTo()
// draw a red rectangle into a shape
new Shape().f(red).dr(0,0,200,100).addTo();
// but it would be easier to use
// new Rectangle(200, 100, red).addTo();
// we can draw lines, etc. (but also see the ZIM Line object)
new Shape().s(blue).ss(5).mt(200,200).lt(300,300).addTo();
// note - we can draw as much as we want in the same shape
EXAMPLE
// OLDER CODE
// The first example uses a tiny API (see options below)
// The traditional full commands are available on the graphics object:
const shape = new Shape().addTo();
shape.graphics.beginFill(red).drawRect(0,0,200,100);
// or often we stored the graphics object in a variable g
const g = shape.graphics;
g.beginStroke(blue).moveTo(200,200).lineTo(300,300);
EXAMPLE
// to change a color or stroke after it has been made use command:
const shape = new Shape().addTo();
const strokeColor = shape.s(red).command;
shape.dr(50,50,100,100);
S.update();
timeout(1, ()=>{
strokeColor.style = blue;
S.update();
});
// This seems a little complex which is why ZIM provides many basic shapes
// Rectangle, Circle, Triangle, Squiggle, Blob, Poly, Line, Flare
// that can be adjusted dynamically with properties
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
** Shape supports three different sets of parameters as follows:
a - (default null) - width and height equal to parameter a (x and y will be 0)
a, b - (default null) - the width and height (x and y will be 0)
a, b, c, d - (default null) - the x, y, width and height of the bounds
graphics - (default null) a CreateJS Graphics instance (see CreateJS docs)
or just use the graphics property of the shape object (like usual)
optimize - (default false) set to true to not store graphics methods directly on Shape
this means the shapes graphics property will need to be used to access f(), s(), ss(), etc.
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly
METHODS
The following shortcuts to CreateJS graphics methods are provided (as long as optimize is false)
See https://www.createjs.com/docs/easeljs/classes/Graphics.html for definitions and parameters
mt() moveTo
lt() lineTo
a() arc
at() arcTo
bt() bezierCurveTo
ct() curveTo
qt() quadraticCurveTo (same as curveTo)
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
pg() polygon // added in ZIM CreateJS 1.3.3 (Diamond)
p() decodePath
cache(width||x, height||y, null||width, null||height, scale, options, margin, rtl, willReadFrequently) - overrides CreateJS cache() and returns object for chaining
** Supports ZIM DUO
If you do not provide the first four parameters, then the cache dimensions will be set to the bounds of the object
width||x - (default getBounds().x) the width of the chache - or the x if first four parameters are provided
height||y - (default getBounds().y) the height of the chache - or the y if first four parameters are provided
width - (default getBounds().width) the width of the chache - or null if first two parameters are provided
height - (default getBounds().height) the height of the chache - or null if first two parameters are provided
scale - (default 1) set to 2 to cache with twice the fidelity if later scaling up
options - (default null) additional parameters for cache logic - see CreateJS somewhere for details
also added adjustBounds property for options - set to true to set new bounds and registration point
on cached objects with x,y,width,height different than the original
this appears to NOT be the default with createjs cache() which keeps the original registration point and bounds
automatically fixing this changes lots of things so use the adjustBounds option when needed
for instance when caching parts of a container and requiring hit tests or the part to be draggable, etc.
margin - (default 0) add or subtract a margin from the bounds
eg. margin:10 will make the cache size 10 pixels more on all sides
this can be handy when caching objects with borders - that go half outside the natural bounds
rtl - (default false) set to true to use right to left
willReadFrequently - (default null) set to true if planning on using operations with getImageData() or toDataURL()
if you get a warning in the console about willReadFrequently then set this to true
setBounds(width||x||Boundary, height||y, null||width, null||height) - overrides CreateJS setBounds() and returns object for chaining
If you do not provide any parameters, then the bounds will be reset to the calculated bounds
width||x||Boundary - (default null) the width of the bounds - or the x if four parameters are provided
or a ZIM Boundary Object {x,y,width,height} - same as CreateJS Rectangle - thanks Joseph Diefenbach
height||y - (default width) the height of the bounds - or the y if four parameters are provided
width - (default null) the width of the bounds - or null if only the first two parameters are provided
height - (default null) the height of the bounds - or null if only the first two parameters are provided
getBounds(targetSpace) - overrides CreateJS getBounds() and returns a rectangle with x, y, width height of bounds (not including outside of border)
pass in a Container (including Stage) to map rectangle to that coordinate space
hasProp(property) - returns true if String property exists on object else returns false
clone(recursive) - makes a copy of the shape
recursive defaults to true so copy will have own copy of graphics
set recursive to false to have clone share graphic property
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection
ALSO
ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), placeReg(), pos(), alp(), rot(), setMask(), etc.
ALSO
see the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.
PROPERTIES
type - holds the class name as a String
command - save a previously chained operation as a command
then can use the command to change the operation later (see example above)
group - used when the object is made to add STYLE with the group selector (like a CSS class)
** bounds must be set first (or width and height parameters set) for these to work
** setting these adjusts scale not bounds and getting these uses the bounds dimension times the scale
width - gets or sets the width. Setting the width will scale the height to keep proportion (see widthOnly below)
height - gets or sets the height. Setting the height will scale the width to keep proportion (see heightOnly below)
widthOnly - gets or sets the width. This sets only the width and may change the aspect ratio of the object
heightOnly - gets or sets the height. This sets only the height and may change the aspect ratio of the object
draggable - set to true for a default drag() and false for a noDrag()
level - gets or sets the level of the object in its parent container (or the stage) - a property for parent.getChildIndex() and parent.setChildIndex()
depth - for ZIM VR - the depth used to shift left and right channel and for parallax in VR - also see dep() ZIM Display method
blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation
effects - an object that holds effects added such as blur, glow, shadow, color, multi and alpha - see effect() under ZIM Methods
** the following are convenience Effects that run a ZIM MultiEffect()
** these can use a lot of processing when animating - see Docs for effects()
** batch versions are available too as hueBatch, etc. these will not update the effect until updateEffects() is called on the object
hue - the tint of an object between -180 and 180 with 0 being no change
saturation - the amount of color of an object between -100 and 100 with 0 being no change
brightness - the lightness or darkness of an object between -255 and 255 with 0 being no change
contrast - the crispness of an object between -100 and 100 with 0 being no change
ALSO
see the CreateJS Easel Docs for Shape properties, such as:
graphics, x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, mouseEnabled, etc.
EVENTS
See the CreateJS Easel Docs for Shape events, such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover
CLOSE ▲PAGE ▤CODE ▤TOUR😊BITS VIDS
Bitmap
zim class - extends a createjs.Bitmap
DESCRIPTION
Makes a Bitmap object from an image source (image, video or canvas).
It is best to preload images in the Frame() or with loadAssets() and the path parameter
then simply use ZIM Pic() to display the image.
See the ZIM Frame class and ZIM Pic in the Docs.
But Bitmap() is handy to turn other canvases or any DisplayObject into a picture.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
new Frame({ready, assets:"logo.jpg"});
function ready() {
const logo = new Pic("logo.jpg").center(); // logo is a Pic with a bitmap property that is a Bitmap
const logo2 = new Pic("logo.jpg").loc(100,100);
}
EXAMPLE
// https://zimjs.com/zapp/Z_ADQEH - coloring a Bitmap pic
const assets = "ai_coloring_groovy.png";
const path = "https://zimjs.org/assets/";
new Frame(FIT, 1481, 745, light, dark, ready, assets, path);
function ready() {
const pic = new Pic("ai_coloring_groovy.png");
const bitmap = new Bitmap(pic)
.addBitmapData()
.scaleTo()
.cur()
.center();
const color = series(red, orange, blue, green, yellow);
bitmap.on("mousedown", ()=>{
bitmap.color(color); // or get from ColorPicker()
S.update();
});
}
EXAMPLE
// turn a container of circles into a Bitmap
const circles = new Container(W, H).addTo();
loop(10, ()=>{
new Circle(rand(200), [pink,green,blue,yellow,purple], dark).center(circles).ble();
});
const pic = new Bitmap(circles).center().drag();
circles.removeFrom();
// previous to ZIM 10.8.0 we needed to use the cacheCanvas:
var pic = new Bitmap(circles.cache().cacheCanvas).center().drag();
EXAMPLE
// fill a Bitmap with noise:
const noise = new Noise();
// empty Bitmap size 200, 200
const bmp = new Bitmap(null,200,200).center();
// we fill the bitmap starting from top left going across in the inner loop,
// then down, then across, etc. until we get to bottom right.
const f = 50; // used to make noise bigger or smaller - see the blob comment below
for (let y = 0; y < bmp.height; y++) {
for (let x = 0; x < bmp.width; x++) {
// the noise methods return a number from -1 to 1
// by adding 1 we get a number between 0 and 2 then divide by 2
// and we multiply this by 255 to get a number between 0 and 255
let value = (noise.simplex2D(x, y)+1)/2 * 255;
// or get blobs by smoothing and adjusting frequency:
// var value = smoothStep((noise.simplex2D(x/f, y/f)+1)/2, .3,.35) * 255;
// imageData is four values per pixel
// the red, green, blue and alpha
// in one big long array - each value will be constrained to between 0 and 255
// this i value will increase by 4 each time
// then we write the same value for red, green, blue to get a shade of grey
let i = (x + y * bmp.width) * 4;
bmp.imageData.data[i] = value; // red (0-255)
bmp.imageData.data[i + 1] = value; // green (0-255)
bmp.imageData.data[i + 2] = value; // blue (0-255)
bmp.imageData.data[i + 3] = 255; // alpha (0-255)
}
}
bmp.drawImageData();
EXAMPLE
// applying filters
new Pic("statue.jpg").effect(new BlurEffect()).center();
EXAMPLE
// getting the color at point(100, 100) on the Bitmap
const bitmap = new Bitmap(new Pic("statue.jpg"));
zog(bitmap.getColorAt(100,100)); // rgba(245,142,37,1)
EXAMPLE
// a Base64 image - with a long list of characters:
const image = "data:image/png;base64,longlistofcharacters";
const logo;
Bitmap.fromData(image, bitmap=>{
logo = bitmap.center();
S.update();
});
EXAMPLE
const thumbs = [];
const cols = 5;
const rows = 5;
const image = new Pic("yourimage.jpg");
const w = image.width/cols;
const h = image.height/cols;
loop(rows, r=>{
loop(cols, c=>{
// make Bitmap show a different part of the main image each time
// note: width, height, left, top
// NOT x, y, width, height like Container
// left and top specifiy where in an image
// to start the picture at 0,0 in the Bitmap
thumbs.push(new Bitmap(image, w, h, c*w, r*h));
});
});
const tile = new Tile(thumbs, cols, rows, 0, 0, true).center();
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
image - an HTML image URL (may not load right away - see Frame loadAssets)
or as of 10.8.0 a DisplayObject - this will be turned into a cacheCanvas
and then the DisplayObject turned back to its previous cached setting
width - (default image width or 100) the width of the resulting Bitmap - will potentially crop an image
see also height, left and top parameters
which allow part of an image to be drawn into the Bitmap
and is handy rather than masking to cut up an image into squares for instance
height - (default image height or 100) the height of the resulting Bitmap
left - (default 0) where on the source image to start the left of the image
top - (default 0) where on the source image to start the top of the image
scale - if making a Bitmap from a DisplayObject, this will scale the object before it is cached for better resolution
the resulting bitmap will be the scaled size
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly
METHODS
addBitmapData() - returns a new Bitmap of the original but with the CreateJS BitmapData class added as a bitmapData property
see https://zimjs.com/docs.html?item=BitmapData
color(color, thresholdColor, x, y) - color a Bitmap. The Bitmap must be made with addBitmapData() - or have equivilant adjustments applied.
color - |ZIM VEE| (default red) is the color to do a BitmapData floodFill() - it will automatically be converted to the right color format
thresholdColor (default dark) is the color for which darker colors will not be colored allowing dark lines to separate coloring areas
x and y (default F.mouseX and F.mouseY relative to the Bitmap) an x and y inside the Bitmap coordinates to apply BitmapData floodFill()
keyOut(color, tolerance, replacement) - remove color from Bitmap and a tolerance between 0-1
the default color is "#389b26" which is a medium dark green
the default tolerance is .1 - the higher the tolerance the less sensitive the keying process - so more colors will be removed similar to the provided color
color and tolerance can be an array of colors and tolerances (or just one tolerance if all are the same)
replacement (default clear) a color to replace the keyed out color with or an optional array to match the colors array if an array is used
removeGreenScreen(smoothing, hueMin, hueMax, satMin, lightMin) - alternative to keyOut() that keys out green
smoothing (default 0) Edge smoothing factor (0-10) - higher values create smoother edges around subjects
hueMin (default 80) Minimum hue value (0-360) for green detection - sets the lower bound of green hues
hueMax (default 160) Maximum hue value (0-360) for green detection - sets the upper bound of green hues
satMin (default 30) Minimum saturation value (0-100) - avoids detecting desaturated/grayish pixels as green
lightMin (default 15) Minimum lightness value (0-100) - avoids detecting very dark pixels as green
fromData(data, callback) - STATIC method so use the Bitmap class directly: Bitmap.fromData()
The callback will receive a reference to the Bitmap after 50ms or 100ms.
There is no event for making a Bitmap from base64 for instance - so this will have to do.
drawImageData(x, y, sourceX, sourceY, sourceWidth, sourceHeight) - draws the Bitmap's imageData data to the Bitmap
NOTE: This is only used when dynamically drawing a Bitmap with data - not for your normal picture
See the imageData property which should be set before using the drawImageData() method
ZIM calls a putImageData method for the HTML Canvas and then transfers this to the Bitmap
See also https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/putImageData - but let ZIM do the work...
Usually just leave the parameters blank
x - (default 0) where to start putting the drawing in the x
y - (default 0) where to start putting the drawing in the y
sourceX - (default 0) where in the imageData to start using the data in the x
sourceY - (default 0) where in the imageData to start using the data in the y
sourceWidth - (default the width of the imageData) how much width of the data to use
sourceHeight - (default the height of the imageData) how much height of the data to use
setBounds(width||x||Boundary, height||y, null||width, null||height) - overrides CreateJS setBounds() and returns object for chaining
If you do not provide any parameters, then the bounds will be reset to the calculated bounds
width||x||Boundary - (default null) the width of the bounds - or the x if four parameters are provided
or a ZIM Boundary Object {x,y,width,height} - same as CreateJS Rectangle - thanks Joseph Diefenbach
height||y - (default width) the height of the bounds - or the y if four parameters are provided
width - (default null) the width of the bounds - or null if only the first two parameters are provided
height - (default null) the height of the bounds - or null if only the first two parameters are provided
getBounds(targetSpace) - overrides CreateJS getBounds() and returns a rectangle with x, y, width height of bounds (not including outside of border)
pass in a Container (including Stage) to map rectangle to that coordinate space
cache(width||x, height||y, null||width, null||height, scale, options, rtl, willReadFrequently) - overrides CreateJS cache() and returns object for chaining
** Supports ZIM DUO
** Usually you do not want to cache a Bitmap as it is already a Bitmap ;-)
** But for applying a filter or using a cacheCanvas to get a context, etc. then you might.
If you do not provide the first four parameters, then the cache dimensions will be set to the bounds of the object
width||x - (default getBounds().x) the width of the chache - or the x if first four parameters are provided
height||y - (default getBounds().y) the height of the chache - or the y if first four parameters are provided
width - (default getBounds().width) the width of the chache - or null if first two parameters are provided
height - (default getBounds().height) the height of the chache - or null if first two parameters are provided
scale - (default 1) set to 2 to cache with twice the fidelity if later scaling up
options - (default null) additional parameters for cache logic - see CreateJS somewhere for details
also added adjustBounds property for options - set to true to set new bounds and registration point
on cached objects with x,y,width,height different than the original
this appears to NOT be the default with createjs cache() which keeps the original registration point and bounds
automatically fixing this changes lots of things so use the adjustBounds option when needed
for instance when caching parts of a container and requiring hit tests or the part to be draggable, etc.
rtl - (default null) set to true to use Right to Left.
willReadFrequently - (default null) set to true if planning on using operations with getImageData() or toDataURL()
if you get a warning in the console about willReadFrequently then set this to true
getColorAt(x,y,array) - returns the rgba() value at the x and y location - passes array of [r,g,b,a] if array parameter is true
hasProp(property as String) - returns true if property exists on object else returns false
clone() - makes a copy with properties such as x, y, etc. also copied - also copies file and src properties
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection
if this is a cloned bitmap then the original asset("image.png") will still exist unless it is disposed.
ALSO
ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO
see the CreateJS Easel Docs for Bitmap methods, such as:
on(), off(), dispatchEvent(), etc.
PROPERTIES
type - holds the class name as a String
file - if loaded as an asset this is the file name
imageData - data for the pixels stored in a data property of an ImageData object
NOTE: This is only used when dynamically drawing a Bitmap with data - not for your normal picture
The data property is an one dimensional Array with consecutive red, green, blue, alpha values (0-255) for each pixels
eg. 0,0,0,255,255,255,255,255 is a black pixel with 1 alpha and a white pixel with 1 alpha
You set this before calling the Bitmap drawImageData() method
See also https://developer.mozilla.org/en-US/docs/Web/API/ImageData - but let ZIM do the work
bitmapData - if a Bitmap is created with addBitmapData() then a bitmapData property is added to reference its CreateJS BitmpaData object
see https://zimjs.com/docs.html?item=BitmapData
group - used when the object is made to add STYLE with the group selector (like a CSS class)
** bounds must be set first (or width and height parameters set) for these to work
** setting these adjusts scale not bounds and getting these uses the bounds dimension times the scale
width - gets or sets the width. Setting the width will scale the height to keep proportion (see widthOnly below)
height - gets or sets the height. Setting the height will scale the width to keep proportion (see heightOnly below)
widthOnly - gets or sets the width. This sets only the width and may change the aspect ratio of the object
heightOnly - gets or sets the height. This sets only the height and may change the aspect ratio of the object
cacheScale - get the requested scale parameter or if cached, the cache scale
draggable - set to true for a default drag() and false for a noDrag()
level - gets or sets the level of the object in its parent container (or the stage) - a property for parent.getChildIndex() and parent.setChildIndex()
depth - for ZIM VR - the depth used to shift left and right channel and for parallax in VR - also see dep() ZIM Display method
blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation
effects - an object that holds effects added such as blur, glow, shadow, color, multi and alpha - see effect() under ZIM Methods
** the following are convenience Effects that run a ZIM MultiEffect()
** these can use a lot of processing when animating - see Docs for effects()
** batch versions are available too as hueBatch, etc. these will not update the effect until updateEffects() is called on the object
hue - the tint of an object between -180 and 180 with 0 being no change
saturation - the amount of color of an object between -100 and 100 with 0 being no change
brightness - the lightness or darkness of an object between -255 and 255 with 0 being no change
contrast - the crispness of an object between -100 and 100 with 0 being no change
ALSO
see the CreateJS Easel Docs for Bitmap properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, mouseEnabled, etc.
EVENTS
See the CreateJS Easel Docs for Bitmap events, such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover
CLOSE ▲PAGE ▤CODE ▤TOUR😊BITS
SlicedBitmap
zim class - extends a zim.Bitmap which extends a createjs.Bitmap
DESCRIPTION
Makes an n-sliced bitmap. This is similar to 9-sliced, and can do 9-sliced,
but also can have any number of horizontal or vertical slices.
The slices make regions that can be fixed in scale, stretched or tiled.
This is handy for graphics that have detailed corners or edges that should not be scaled
and then areas that can be scaled or tiled when size is changed.
The bitmap can then be sized with slicesWidth and slicesHeight rather than width and height
to stretch and tile those regions but leave fixed regions fixed in size.
The ZIM transform() defaults to using slicesWidth and slicesHeight when resizing the edges
it will still scale when using the corners. This can be turned off by setting sliceX and sliceY parameters of transform to false.
Properties for the slice lines are available and can be set and animated as can the scalesWidth and scalesHeight.
SEE: https://zimjs.com/slices for the ZIM Slices tool and example of SlicedBitmap
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// slice a pic in four at 25% from the edges, scale the middle and keep the sides and corners not scaled.
new SlicedBitmap(1600, pic.height, pic, [[0.25,0.75],[0.25,0.75]], [[0,1,0],[0,1,0]])
.center()
.transform({minScaleX:.05, minScaleY:.05});
EXAMPLE
// slice a pic in four at 25% from the edges, scale the middle and keep the sides and corners not scaled.
const pic = new Pic("pic.png"); // preload this in Frame() or loadAssets()
const startSlices = [[0.25,0.75],[0.25,0.75]];
const startTypes = [[0,2,0],[0,1,0]]; // middle is tiled horizontally and stretched vertically
const slicer = new Slicer({
obj:pic.clone(), // slicer will adjust obj so clone the pic so can use it unaffected later
scale:.5,
slices:startSlices,
types:startTypes,
upload:false
})
.pos(30,50)
.change(()=>{preview.exchange = slicer.exchange;); // this will update the picture below
// this will provide slice type options
new SlicerTypes(slicer).pos(30,120,RIGHT,TOP);
// SlicedBitmaps slicesWidth and slicesHeight do not currently scale from the registration point
// here we animate the slicesWidth and use a container to animate from the center
const holder = new Container(800,400).center();
const preview = new SlicedBitmap(1600, pic.height, pic, slicer.slices, slicer.types, 2, .5)
.center(holder)
.animate({
props:{slicesWidth:980},
// props:{sH0:.31}, // alternatively, animate the first horizontal slice (vertical line)
time:2,
ease:"elasticInOut",
rewind:true,
rewindWait:1,
loop:true,
loopWait:1,
animateCall:()=>{preview.center(holder)} // always recenter the SlicedBitmap in the container
});
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
width - (default null) the width of the object - this will apply slices and types settings to keep fixed, scale or tile regions
height - (default null) the height of the object - this will apply slices and types settings to keep fixed, scale or tile regions
obj - (default null) a DisplayObject such as a ZIM Pic, Container, etc. or an HTML image or canvas
slices - (default null) an array of horizontal and vertical arrays holding slice percentage
[[.25,.75], [.1,.4,.5,.9]]
three horizontal regions made from two vertical lines placed at 1/4 and 3/4 the width
five vertical regions made from four horizontal lines with 1/10 the picture at left, middle and right
types - (default null) an array of horizontal and vertical arrays holding slice types
0 - fix - keeps the original width and height of the region. Usually, good for corners.
1 - stretch - stretch the region to fill space as an object is stretched
2 - tile - tile the region at original scale - currently, will match the first side and sometimes the second side
gap - (default 2) pixels to overlap on each side to avoid canvas ditthered edges
scale - (default 1) a scale for the caching
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly
METHODS
slicesSca() - like sca() but will call sclicesScaleX and slicesScaleY to operate on regions
hasProp(property as String) - returns true if property exists on object else returns false
clone() - makes a copy with properties such as x, y, etc. also copied - also copies file and src properties
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection
if this is a cloned bitmap then the original asset("image.png") will still exist unless it is disposed.
ALSO
ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO
see the ZIM Bitmap methods, such as:
keyOut(), cache(), getColorAt(), etc.
ALSO
see the CreateJS Easel Docs for Bitmap methods, such as:
on(), off(), dispatchEvent(), etc.
PROPERTIES
type - holds the class name as a String
slices - get or set slices - see slices parameter and sH, sV properties
types - get or set types - see types parameter and tH, tV properties
gap - get or set the gap 0 see gap parameter
slicesWidth - set the width so slices operate - different than width which will scale in general, not operating the slices
slicesHeight - set the height so slices operate - different than height which will scale in general, not operating the slices
slicesSale - set the scale so the slices operate - different than scale which will scale in general, not operating the slices
slicesScaleX - set the scaleX so the slices operate - different than scaleX which will scale in general, not operating the slices
slicesScaleY - set the scaleY so the slices operate - different than scaleY which will scale in general, not operating the slices
exchange - set the [slices, types] in one array - used to recieve data from the ZIM Slicer
sH - set an individual horizontal slice percent - these are sH0, sH1, sH2, etc. and are properties that can be animated and wiggled as well
sV - set an individual vertical slice percent - these are sH0, sH1, sH2, etc. and are properties that can be animated and wiggled as well
tH - set an individual horizontal slice type - also see types parameter
tV - set an individual vertical slice type - also see types parameter
ALSO
see ZIM Docs for Bitmap properties, such as:
width, height, widthOnly, heightOnly, draggable, level, blendMode, etc.
ALSO
see the CreateJS Easel Docs for Bitmap properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, mouseEnabled, etc.
EVENTS
See the CreateJS Easel Docs for Bitmap events, such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover
CLOSE ▲PAGE ▤CODE ▤
Sprite
zim class - extends a createjs.Sprite
DESCRIPTION
A Sprite plays an animation of a spritesheet
which is a set of images layed out in one file.
You play the Sprite with the run() method.
This animates the Sprite over a given time
with various features like playing a labelled animation,
playing animation series, wait, loop, rewind and call functions.
This actually runs a ZIM animation and animates the frames.
Sprites can also be used a Texture Atlas
which is one image that holds many pictures.
The sprite can be told to go to a frame and show the picture.
This is how most games are made with a SpriteSheet of treasures, trees, etc.
It is faster as it makes one GPU call.
If the Sprite is not run, it will show a random frame (as if ZIM 017).
If you want a specific frame then use the frame property or the run({frame:num}).
SEE:
https://zimjs.com/interactiveanimation.htmlhttps://zimjs.com/interactiveanimation/
older:
https://zimjs.com/spritesheet/https://zimjs.com/spritesheet/skateboard.htmlhttps://codepen.io/danzen/pen/yEKbbRhttps://codepen.io/danzen/pen/VdXzLVhttps://zimjs.com/zide/https://zimjs.com/explore/sidescroller.html (with keyboard)
https://zimjs.com/sprite/ (with Free TexturePacker)
NOTE
A ZIM Sprite handles both an evenly tiled spritesheet - use cols and rows
and an un-evenly tiled spritesheet - use the json parameter.
The json can come from TexturePacker for instance exported for EaselJS/CreateJS
CreateJS Easel Sprite and SpriteSheet docs:
https://www.createjs.com/docs/easeljs/classes/Sprite.htmlhttps://www.createjs.com/docs/easeljs/classes/SpriteSheet.html
You can optionally pass in an existing createjs.SpriteSheet as a parameter.
When you do so, all other parameters are ignored.
** JSON hash and JSON array formats are now supported (Phaser formats)
** See https://www.codeandweb.com/free-sprite-sheet-packerNOTE
You can use CreateJS gotoAndPlay(), play(), etc.
but we found the framerate could not be kept
with other animations or Ticker events running.
So we recommend using the ZIM Sprite run() method.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// boom.png is a sprite sheet found online
// It has 8 columns and 6 rows that we can visually count
// We can enter a total parameter if it does not end evenly in the grid
// A graphics editor (like Photoshop) could be used to see
// if there is an offset or spacing, etc. and enter those as parameters
// In this case, we do not need to do any of this - just enter the cols and rows
new Frame(FIT, 1024, 768, black, darker, ready, "boom.png", "https://zimjs.org/assets/");
function ready() {
const animation = new Sprite({
image:"boom.png",
cols:8,
rows:6,
animations:{mid:[10,20], end:[30,40]} // optional animations with labels
// see CreateJS SpriteSheet docs for the various animation format as there are a few different ones!
})
.center()
.run(2); // plays the frames of the Sprite over 2 seconds (master time)
// OR use the label to play the frames listed in animations parameter
animation.run(1, "mid");
// OR run a series of animations
// by passing an array of label objects to the label parameter
// these each have a time so the master time is ignored
// they can also have any of the run() parameters
// if you provide an array of labels, you cannot rewind the overall animation
animation.run(null, [
{label:"mid", time:1},
{label:"end", time:.5, loop:true, loopCount:5, call:function(){zog("loops done");}},
{startFrame:10, endFrame:20, time:1}
]);
// OR can call a function when done
animation.run(1, "mid", function(){
S.removeChild(animation);
S.update();
});
// OR can loop the animation
animation.run({time:2, loop:true}); // see run() parameters for more
}
EXAMPLE
// using Sprite as a texture atlas - or spritesheet of different images
// load in assets and path
new Frame({ready, assets:"ai_trees02.png", path:"https://zimjs.org/assets/"});
function ready() {
new Sprite("ai_trees02.png", 5, 4).center(); // will show a random tree
new Sprite("ai_trees02.png", 5, 4).loc(200,200).run({frame:2}); // will show the third tree
const tree = new Sprite("ai_trees02.png", 5, 4).loc(500,500);
tree.frame = 5; // will show the 6th tree
}
EXAMPLE
// using Sprite as a texture atlas - or spritesheet of different images
// see: https://zimjs.com/zapp/Z_FDJXA
// load in assets and path
new Frame({ready, assets:["fruit.png", "fruit.json"], path:"https://zimjs.org/assets/"});
function ready() {
new Sprite({json:"fruit.json", label:"apple"}).center();
}
EXAMPLE
// Here is an example with CreateJS SpriteSheet data
// robot.png is a sprite sheet made by ZOE based on a Flash swf
// you can also make your own with Photoshop or Texture Packer
F.loadAssets("robot.png");
F.on("complete", ()=>{
// using ZOE to export swf animation to spritesheet data
// spritesheet data uses the image name, not the Bitmap itself
const image = new Pic("robot.png").image;
const spriteData = {
"framerate":24,
"images":[image],
"frames":[[0, 0, 256, 256, 0, -54, -10], many more - etc.],
"animations":{}
};
const animation = new Sprite({json:spriteData});
animation.center();
animation.run(2); // note, duration alternative to framerate
});
// OR
// load in data from external JSON
F.loadAssets(["robot.json", "robot.png"]);
// ... same as before
const animation = new Sprite({json:"robot.json"});
// ... same as before
// see CreateJS SpriteSheet docs for the format of the JSON file
// including various animation formats
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
image - the ZIM Pic() ir ZIM Bitmap() for the spritesheet
or use a string filename to a preloaded image file (in Frame or loadAssets())
cols - (default 1) - the columns in the spritesheet
rows - (default 1) the rows in the spritesheet
count - (default cols*rows) how many total frames in the spritesheet
offsetX - (default 0) the pixels from the left edge to the frames
offsetY - (default 0) the pixels from the top edge to the frames
spacingX - (default 0) the horizontal spacing between the frames
spacingY - (default 0) the vertical spacing between the frames
width - (default image width) the width including offset and spacing for frames
height - (default image height) the height including offset and spacing for frames
animations - (default null) an object literal of labels holding frames to play
{label:3, another:[4,10]}
run(1, "label") would play frame 3 for a second
run(1, "another") would play frames 4 to 10 for a second
{unordered:{frames:[1,2,3,22,23,24,"anotherLabel",5,6], next:prevLabel}}
There are also ways to set speeds - but would recommend dividing into simple labels
and using the label series technique available with the run() method
json - (default null) a JSON string for a CreateJS SpriteSheet
or use a string filename to a preloaded JSON file (in Frame or loadAssets())
If you pass in a json parameter, all other parameters are ignored
NOTE: remember that JSON needs quotes around the animation properties above:
{"label":3, "another":[4,10]}
JSON hash and JSON array formats from TexturePacker are supported as well as the createjs/easeljs format
See https://www.codeandweb.com/free-sprite-sheet-packer for instance
id - (default randomly assigned) an id you can use in other animations - available as sprite.id
use this id in other animations for pauseRun and stopRun to act on these as well
globalControl - (default true) pauseRun and stopRun will control other animations with same id
spriteSheet - (default null) pass in a CreateJS SpriteSheet to build a Sprite from that
label - (default null) pass in a label to stop on initially - to play from a label use the run({label:val}) method
frame - (default zimDefaultFrame) specify a Frame other than the default frame
note - this is not the frame number of the Sprite - for that use the frame property or run({frame:num})
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly
METHODS
run(time, label, call, params, wait, waitedCall, waitedParams, loop, loopCount, loopWait, loopCall, loopParams, loopWaitCall, loopWaitParams, loopPick, rewind, rewindWait, rewindCall, rewindParams, rewindWaitCall, rewindWaitParams, rewindTime, rewindEase, startFrame, endFrame, frame, tweek, id, globalControl)
The run() method animates the Sprite over an amount of time
Would recommend this method over the CreateJS play() and gotoAndPlay()
methods because the framerate for these get overwritten by other S.update() calls
With run() you get other nice ZIM animate features as well as follows:
Returns the object for chaining
Can be paused with pauseAnimate(true) or unpaused with pauseAnimate(false)
Can be stopped with stopAnimate() on the Sprite
supports DUO - parameters or single object with properties below
time (default 1) - the time in seconds to run the animations (the master time)
label (default null) - a label specified in the Sprite animations parameter
if this is an array holding label objects for example:
[{label:"run", time:1}, {label:"stand", time:2}]
then the sprite will play the series with the times given and ignore the master time
Note: if any of the series has a loop and loops forever (a loopCount of 0 or no loopCount)
then this will be the last of the series to run
rewind is not available on the outside series but is available on an inside series
call - (default null) the function to call when the animation is done
params - (default target) a single parameter for the call function (eg. use object literal or array)
wait - (default 0) seconds to wait before doing animation
waitedCall - (default null) call the function after a wait time if there is one
waitedParams - (default null) parameters to pass to the waitedCall function
loop - (default false) set to true to loop animation
loopCount - (default 0) if loop is true how many times it will loop (0 is forever)
loopWait - (default 0) seconds to wait before looping (post animation wait)
loopCall - (default null) calls function after loop and loopWait (not including last loop)
loopParams - (default target) parameters to send loopCall function
loopWaitCall - (default null) calls function after at the start of loopWait
loopWaitParams - (default target) parameters to send loopWaitCall function
rewind - (default false) set to true to rewind (reverse) animation (doubles animation time) (not available on label series)
rewindWait (default 0) seconds to wait in the middle of the rewind
rewindCall (default null) calls function at middle of rewind after rewindWait
rewindParams - (default target) parameters to send rewindCall function
rewindWaitCall (default null) calls function at middle of rewind before rewindWait
rewindWaitParams - (default target) parameters to send rewindCall function
rewindTime - (default time) set to a time in seconds to adjust the time to rewind
rewindEase - (default null) see ease parameter for options for rewind ease
note - this goes backwards - so "bounceOut" would happen at the end of the rewind
startFrame - (default null - or 0) the frame to start on - will be overridden by a label with frames
endFrame - (default null - or totalFrames) the frame to end on - will be overridden by a label with frames
frame - (default null) set the single frame to run - will override startFrame and endFrame
this is good for a TextureAtlas where you show one frame of the sprite as a picture
also see frame property - this just goes to the frame and does not use ZIM animate() in the background
tweek - (default 1) a factor for extra time on rewind and loops if needed
id - (default randomly assigned) an id you can use in other animations - available as sprite.id
use this id in other animations for pauseRun and stopRun to act on these as well
globalControl - (default true) pauseRun and stopRun will control other animations with same id
pauseOnBlur - (default true) pause the sprite when the window is not seen or set to false to keep playing the sprite
pauseRun(state) - pause or unpause the animation (including an animation series)
state - (default true) when true the animation is paused - set to false to unpause
returns object for chaining
stopRun() - stop the sprite from animating
setBounds(width||x||Boundary, height||y, null||width, null||height) - overrides CreateJS setBounds() and returns object for chaining
If you do not provide any parameters, then the bounds will be reset to the calculated bounds
width||x||Boundary - (default null) the width of the bounds - or the x if four parameters are provided
or a ZIM Boundary Object {x,y,width,height} - same as CreateJS Rectangle - thanks Joseph Diefenbach
height||y - (default width) the height of the bounds - or the y if four parameters are provided
width - (default null) the width of the bounds - or null if only the first two parameters are provided
height - (default null) the height of the bounds - or null if only the first two parameters are provided
getBounds(targetSpace) - overrides CreateJS getBounds() and returns a rectangle with x, y, width height of bounds (not including outside of border)
pass in a Container (including Stage) to map rectangle to that coordinate space
hasProp(property as String) - returns true if property exists on object else returns false
clone() - makes a copy with properties such as x, y, etc. also copied
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection
ALSO
ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO
see the CreateJS Easel Docs for Sprite methods, such as:
play(), gotoAndPlay(), gotoAndStop(), stop(), advance(),
on(), off(), dispatchEvent(), etc.
PROPERTIES
type - holds the class name as a String
id - an id that you can use in other animations to also be controlled by pauseRun() and stopRun()
frame - get and set the current frame of the Sprite
As of ZIM 017, if the sprite is not run() then it will show a random frame
normalizedFrame - if animations have CreateJS speeds applied, zim handles these by making extra frames
for example, if a speed is given of .5 then two frames are made (min resulution is .1)
normalizedFrames - an array of total frames after being normalized - really for internal usage
totalFrames - get the total frames of the Sprite - read only
animations - the animations data with labels of frames to animate
running - is the sprite animation being run (includes both paused and unpaused) - read only
runPaused - is the sprite animation paused (also returns paused if not running) - read only
note: this only syncs to pauseRun() and stopRun() not pauseAnimate() and stopAnimate()
note: CreateJS has paused, etc. but use that only if running the CreateJS methods
such as gotoAndPlay(), gotoAndStop(), play(), stop()
draggable - set to true for a default drag() and false for a noDrag()
group - used when the object is made to add STYLE with the group selector (like a CSS class)
** bounds must be set first (or width and height parameters set) for these to work
** setting these adjusts scale not bounds and getting these uses the bounds dimension times the scale
width - gets or sets the width. Setting the width will scale the height to keep proportion (see widthOnly below)
height - gets or sets the height. Setting the height will scale the width to keep proportion (see heightOnly below)
widthOnly - gets or sets the width. This sets only the width and may change the aspect ratio of the object
heightOnly - gets or sets the height. This sets only the height and may change the aspect ratio of the object
draggable - set to true for a default drag() and false for a noDrag()
level - gets or sets the level of the object in its parent container (or the stage) - a property for parent.getChildIndex() and parent.setChildIndex()
depth - for ZIM VR - the depth used to shift left and right channel and for parallax in VR - also see dep() ZIM Display method
blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation
effects - an object that holds effects added such as blur, glow, shadow, color, multi and alpha - see effect() under ZIM Methods
** the following are convenience Effects that run a ZIM MultiEffect()
** these can use a lot of processing when animating - see Docs for effects()
** batch versions are available too as hueBatch, etc. these will not update the effect until updateEffects() is called on the object
hue - the tint of an object between -180 and 180 with 0 being no change
saturation - the amount of color of an object between -100 and 100 with 0 being no change
brightness - the lightness or darkness of an object between -255 and 255 with 0 being no change
contrast - the crispness of an object between -100 and 100 with 0 being no change
ALSO
see the CreateJS Easel Docs for Sprite properties, such as:
currentFrame, framerate, paused, currentAnimation, currentAnimationFrame, spriteSheet,
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, mouseEnabled, etc.
EVENTS
See the CreateJS Easel Docs for Sprite events, such as:
animationend, change, added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover
CLOSE ▲PAGE ▤CODE ▤TOUR😊BITS VIDS
MovieClip
zim class - extends a createjs.MovieClip
DESCRIPTION
A MovieClip adds timelines to a Container.
The timelines are animate() zimTween properties.
The zimTween property returns a CreateJS Tween object.
Primarily made to support Adobe Animate MovieClip export.
*Consider this experimental for the moment...
NOTE
to use animate() on a MovieClip, add the MovieClip to a Container and animate() the Container
otherwise the animate() may advance the MovieClip.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const movieClip = new MovieClip();
const circle = new Circle(20, blue).animate({
props:{scale:3}, time:.1, rewind:true, loop:true
});
// Time is in frames NOT in ms - so 100 frames at the Ticker.framerate 60 fps by default is almost 2 seconds
// To change the Ticker's framerate use setFPS(mobile, desktop) method
// If you use one number then both mobile and desktop are set to that fps.
// The defaults are 60 fps mobile (as of ZIM Cat 04) and 60 fps desktop
movieClip.timeline.addTween(circle.zimTween);
movieClip.play();
movieClip.center();
S.on("stagemousedown", ()=>{
movieClip.paused = !movieClip.paused;
});
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
// from the CreateJS MovieClip docs: https://www.createjs.com/docs/easeljs/classes/MovieClip.html
mode - (default "independent") or single_frame (based on startPosition) or synched (syncs to parent)
startPosition - (default 0) the start position of the MovieClip (*could not get to work)
loop - (default true) set to false not to loop (*did not seem to loop so use loop:true in zim.animate())
labels - (default null) declare label property with position value
eg. {explode:20} to use with gotoAndPlay("explode") rather than gotoAndPlay(20)
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly
METHODS
hasProp(property as String) - returns true if property exists on object else returns false
setBounds(width||x||Boundary, height||y, null||width, null||height) - overrides CreateJS setBounds() and returns object for chaining
If you do not provide any parameters, then the bounds will be reset to the calculated bounds
width||x||Boundary - (default null) the width of the bounds - or the x if four parameters are provided
or a ZIM Boundary Object {x,y,width,height} - same as CreateJS Rectangle - thanks Joseph Diefenbach
height||y - (default width) the height of the bounds - or the y if four parameters are provided
width - (default null) the width of the bounds - or null if only the first two parameters are provided
height - (default null) the height of the bounds - or null if only the first two parameters are provided
getBounds(targetSpace) - overrides CreateJS getBounds() and returns a rectangle with x, y, width height of bounds (not including outside of border)
pass in a Container (including Stage) to map rectangle to that coordinate space
clone() - makes a copy with properties such as x, y, etc. also copied
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection
ALSO
ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO
see the CreateJS Easel Docs for MovieClip methods, such as:
play(), gotoAndPlay(), gotoAndStop(), stop(), advance(),
on(), off(), dispatchEvent(), etc.
PROPERTIES
type - holds the class name as a String
draggable - set to true for a default drag() and false for a noDrag()
group - used when the object is made to add STYLE with the group selector (like a CSS class)
** bounds must be set first (or width and height parameters set) for these to work
** setting these adjusts scale not bounds and getting these uses the bounds dimension times the scale
width - gets or sets the width. Setting the width will scale the height to keep proportion (see widthOnly below)
height - gets or sets the height. Setting the height will scale the width to keep proportion (see heightOnly below)
widthOnly - gets or sets the width. This sets only the width and may change the aspect ratio of the object
heightOnly - gets or sets the height. This sets only the height and may change the aspect ratio of the object
draggable - set to true for a default drag() and false for a noDrag()
level - gets or sets the level of the object in its parent container (or the stage) - a property for parent.getChildIndex() and parent.setChildIndex()
depth - for ZIM VR - the depth used to shift left and right channel and for parallax in VR - also see dep() ZIM Display method
blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation
effects - an object that holds effects added such as blur, glow, shadow, color, multi and alpha - see effect() under ZIM Methods
** the following are convenience Effects that run a ZIM MultiEffect()
** these can use a lot of processing when animating - see Docs for effects()
** batch versions are available too as hueBatch, etc. these will not update the effect until updateEffects() is called on the object
hue - the tint of an object between -180 and 180 with 0 being no change
saturation - the amount of color of an object between -100 and 100 with 0 being no change
brightness - the lightness or darkness of an object between -255 and 255 with 0 being no change
contrast - the crispness of an object between -100 and 100 with 0 being no change
ALSO
see the CreateJS Easel Docs for MovieClip properties, such as:
currentFrame, totalFrames, currentLabel, duration, framerate, labels, loop, mode, paused, startPosition, timeline,
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, mouseEnabled, parent, etc.
EVENTS
See the CreateJS Easel Docs for MovieClip events, such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover
CLOSE ▲PAGE ▤CODE ▤TOUR😊
SVGContainer
zim class - extends a zim.Container which extends a createjs.Container
DESCRIPTION
Parses SVG and adds items to a ZIM Container.
Items are created as ZIM Shapes: Circle, Rectangle, Blob, Squiggle.
If geometric is true then Circle and Rectangle are used otherwise Blob is used.
Items can be accessed using svgcontainer.getChildAt(0), etc.
See: https://zimjs.com/svg/
See: https://zimjs.com/explore/svgcontainer.htmlALSO
see SVG() class under Frame module.
An SVG path string can be passed directly to a Squiggle or Blob points parameter
and so avoiding the SVGContainer - see ZIM Squiggle and Blob
WARNING: this should be considered experimental
The idea is that paths from SVG can be made editable in ZIM
or animation, dragging, or Label along paths can be accommodated
As such, not all SVG features will work - no CSS, Text, Gradients, DropShadows, etc.
It is possible that these will be added at some point
See also the ZIM svgToBitmap() function under META to get an exact image of the SVG
Thank you https://github.com/colinmeinke/svg-arc-to-cubic-bezier for the Arc conversion
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const svgContainer = new SVGContainer(asset("sample.svg")).addTo();
// OR
const svg = `<svg width="150" height="200" xmlns="h t t p ://www.w3.org/2000/svg">
<path id="lineAB" d="M 0 0 l 150 200" stroke="red" stroke-width="3" fill="none" />
</svg>`;
const svgContainer = new SVGContainer(svg).center();
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
svg - an SVG file loaded into an asset() or SVG text
splitTypes - (default false) - set to true to split different types of paths into separate objects
geometric - (default true) - set to false to load Rectangle and Circle objects as Blob objects
showControls - (default true) set to false to start with controls not showing
interactive - (default true) set to false to turn off controls, move, toggle, select, edit - leaving just the shapes
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly
METHODS
processPath(path) - path is an SVG path string - returns a ZIM Blob or Squiggle points array
hasProp(property as String) - returns true if property exists on object else returns false
clone() - makes a copy with properties such as x, y, etc. also copied
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection
ALSO
ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO
see the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.
PROPERTIES
svg - a reference to the SVG text
type - holds the class name as a String
ALSO
see ZIM Container for properties such as:
width, height, widthOnly, heightOnly, draggable, level, depth, group
blendMode, hue, saturation, brightness, contrast, etc.
ALSO
see the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.
EVENTS
See the CreateJS Easel Docs for Container events such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover
CLOSE ▲PAGE ▤CODE ▤TOUR😊
Tag
zim class - extends a zim.Container which extends a createjs.Container
DESCRIPTION
Creates a <div></div> with id of id and overlays it on the Canvas with the createjs DOMElement
The tag is scaled and positioned with ZIM code and can be filled with any HTML desired
Access to the HTML tag is provided with the tag property (so you can use innerHTML or style on this)
However a convenience innerHTML and style properties have been added to Tag
CSS Styles can be applied to the HTML tag as with any HTML div tag
Or use the chainable add() method to add a String of HTML (instead of setting innerHTML)
SEE: https://zimjs.com/explore/tag.htmlNOTE
due to the HTML tag being overlayed, the tag.resize() must be called if it is manually scaled or moved
(This is called automatically when the stage is resized)
NOTE
if the tag is placed in a container and the container is removed or added again
the tag must be manually removed or added again with tag.removeFrom() or tag.addTo().
This is so ZIM does not have to keep track of HTML tags each time a container is added or removed.
NOTE
rotation and skewing of Tag is not supported - although might work with custom CSS transformations
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const tag = new Tag(300, 60).center().add("<h1>TITLE TEXT</h1>");
tag.style.color = red;
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
width - (default 250) the width of the div tag
height - (default 70) the height of the div tag
Note: to set scrollBars use CSS: tag.style.overflow = "auto";
id - (default zimTag_randomNumber) a string id for the HTML div tag.
frame - (default the zdf) a reference to the Frame (to scale and position the HTML tag)
backgroundColor - (default "rgba(0,0,0,0)") a ZIM Rectangle used as a background
padding - (default 10) inner padding between edge of background rectangle and HTML tag
paddingH - (default padding) inner horizontal padding between edge of background rectangle and HTML tag
paddingV - (default padding) inner vertical padding between edge of background rectangle and HTML tag
expand - (default 20) hit area around background to count as a press on Tag - handy for dragging as HTML tag area will override mouse on canvas
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly
METHODS
add(htmlString) - chainable method to add HTML to tag - calling add() again will append
see innerHTML property as alternative or to overwrite the innerHTML
resize(update) - call the resize event if the scale or position of the tag is changed
this will sync the location of the div tag
resize() is only needed if the scale or x, y of the tag (or its container) is changed
it is not needed for general window resizing - the Tag handles this
Note: if the Frame itself changes location in the HTML document, call a F.update()
this will then dispatch an update event to the Tag and it will resize()
this is not needed if resizing the window or scrolling - see Frame update() method docs
update defaults to true - set to false to not update the stage during a resize()
hasProp(property as String) - returns true if property exists on object else returns false
clone() - makes a copy with properties such as x, y, etc. also copied
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection
ALSO
ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), setMask(), etc.
ALSO
see the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.
PROPERTIES
type - holds the class name as a String
tagID - the assigned id of the tag
tag - the HTML div tag - just a regular HMTL div tag which can be styled
innerHTML - the innerHTML property of the tag (so myTag.tag.innerHTML is not needed)
background - access to the ZIM Rectangle used as the background
frame - get or set the frame - set this if changing frames
ALSO
see ZIM Container for properties such as:
width, height, widthOnly, heightOnly, draggable, level, depth, group
blendMode, hue, saturation, brightness, contrast, etc.
ALSO
see the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.
EVENTS: See the CreateJS Easel Docs for Container events such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover
CLOSE ▲PAGE ▤CODE ▤
Shader
zim class - extends a zim.Bitmap which extends a createjs.Bitmap
DESCRIPTION
Makes a Bitmap from shader code. The Bitmap will update automatically if set to dynamic (default).
Shaders run on the GPU and are very fast for cool visual effects and are also the basis for 3D.
For 3D, we recommend using three.js with ZIM and the the Three helper module - overlayed or with TextureActive.
BUT - shaders are also commonly used for amazing 2D effects.
Also see ShaderOverlay() that overlays the raw WebGL Canvas on ZIM as a Tag() rather than converting to a Bitmap.
The best way to see what shaders are about are to look at the many examples on ShaderToy, for instance:
https://www.shadertoy.com
Many of the shaders from ShaderToy will work in ZIM Shader() with a simple cut and paste.
However, ones with multiple channels are currently not supported - but you may be able to add equivilant code.
For instance, a picture can be brought into the shader rather than using a channel.
There are many more shaders other than in ShaderToy.
Shaders have their own coding language called GLSL https://en.wikipedia.org/wiki/OpenGL_Shading_Language
ZIM Shader was built for OpenGL 3.0 but other versions may work.
This is a very complicated coding world based on C - so do not expect to easily make shaders.
Most likely, you will start with copying and perhaps modifying code - but it is not easy.
When looking at reference materials, note that ZIM has greatly simplified the requirements
So tend to ignore how shaders are set up to run
and concentrate on the actual fragment (and sometimes vertex) shader code
https://learnopengl.com/Getting-started/Shadershttps://thebookofshaders.com/https://thebookofshaders.com/glossary/
ZIM Shader() abstracts a couple hundred lines of somewhat famously complicated WebGL code.
There are three main inputs (beyond width and height)
FRAGMENT
Shader code that changes the pixel colors.
This is the code that is displayed in ShaderToy and is most popular in 2D shaders.
Fragment shaders run after Vertex shaders but it is an early parameter because the Vertex shader is usually default.
UNIFORMS
These are variables that we pass in to the shader.
ZIM provides a Uniforms() object for this purpose for easy animate() and wiggle() and component interactivity.
The uniforms will automatically be updated by ZIM Shader.
The following code will get inserted at the top of the shader code:
#version 300 es // version number - see versions parameter
precision mediump float; // can reset a different precision if desired
uniform vec3 iResolution; // width and height of shader (in pixels)
uniform float iTime; // shader playback time (in seconds)
uniform float iTimeDelta; // render time (in seconds)
uniform float iFrameRate; // shader frame rate (frames per second)
uniform int iFrame; // shader playback frame
uniform vec4 iMouse; // mouse coordinates x, y (in pixels), down (0/1), click (0/1)
uniform vec4 iDate; // year (full), month (0-11), day, time (in seconds from midnight)
uniform float iChange; // increases with the rate (parameter or property) of the Shader
VERTEX
Shader code that changes the verticies (points) of triangles.
This defaults to two triangles in a strip that make a rectangle based on the provided width and height.
This code will probably not be needed and is not shown in ShaderToy - but can be used in ZIM Shader()
TIPS
In the shader code, data types matter, are declared and need to match properly - for example:
float num = 1.0;
int count = 1;
vec2 size = vec(0.0, 1.0);
Vectors are used a lot and can have 2, 3, or 4 components (like array elements) that we access with x, y, z, w (or rgba or stpq)
These can be accessed and adjusted in multiple ways - called "swizzling" (examples from learnopengl.com)
vec2 someVec; // has two components
vec4 differentVec = someVec.xyxx; // make 4 components from the two components - repeating is fine
vec3 anotherVec = differentVec.zyw; // has three components
vec4 otherVec = someVec.xxxx + anotherVec.yxzy; // added components together
vec2 vect = vec2(0.5, 0.7); // two components - use leading 0 and trailing 0 to keep as float if desired
vec4 result = vec4(vect, 0.0, 0.0); // vect will be spread across the first two components
vec4 otherResult = vec4(result.xyz, 1.0); // first three components of results are spread across otherResult
ShaderToy uses a slightly different format which is converted by ZIM - see the Docs under fragment parameter.
A main thing to watch out for is that ShaderToy fragCoord is a vec2
whereas gl_FragCoord (WebGL 1.0) is a vec3 so use gl_FragCoord.xy to match fragCoord
Conditionals are often avoided for performance https://theorangeduck.com/page/avoiding-shader-conditionals
ZIM Shader() defaults to dynamic which means that it will update.
Set the dynamic parameter to false if the shader does not need to update.
SEE: https://zimjs.com/016/shaders for a mini-site of shaders in ZIM.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// A simple horizontal gradient shown four ways
// These four ways can be used throughout the examples
// but we will show the rest as the ShaderToy format.
// https://www.shadertoy.com/view/MlK3DK
// iResolution is a default uniform (see Uniforms above)
// VERSION 1 - ShaderToy mainImage(out, in) {} Format
const fragment = `
void mainImage( out vec4 fragColor, in vec2 fragCoord ) {
fragColor = mix(vec4(1,1,0,1), vec4(0,1,1,1), fragCoord.x/iResolution.x);
}
`;
new Shader(W, H, fragment).center();
// VERSION 2 - main() {} - traditional GLSL 3 format
const fragment = `
out vec4 fragColor;
void main() {
vec2 fragCoord = gl_FragCoord.xy; // convert default input vec3 gl_FragCoord to vec2 fragCoord
fragColor = mix(vec4(1,1,0,1), vec4(0,1,1,1), fragCoord.x/iResolution.x);
}
`;
new Shader(W, H, fragment).center();
// VERSION 3 - using gl_FragCoord directly
const fragment = `
out vec4 fragColor;
void main() {
fragColor = mix(vec4(1,1,0,1), vec4(0,1,1,1), gl_FragCoord.x/iResolution.x);
}
`;
new Shader(W, H, fragment).center();
// VERSION 4 - traditional GLSL 1 format (note version param in Shader)
const fragment = `
void main() {
gl_FragColor = mix(vec4(1,1,0,1), vec4(0,1,1,1), gl_FragCoord.x/iResolution.x);
}
`;
new Shader({width:W, height:H, fragment:fragment, version:""}).center();
EXAMPLE
// Animating with the iTime uniform (see default uniforms)
const fragment = `
void mainImage( out vec4 fragColor, in vec2 fragCoord ) {
vec2 uv = fragCoord.xy / iResolution.xy;
vec3 color = 0.5 + 0.5 * cos(iTime + uv.xyx + vec3(0,2,4));
fragColor = vec4(vec3(color), 1.0);
}
`;
new Shader(W, H, fragment).center();
EXAMPLE
// https://zimjs.com/016/shader/spiral.html
// loading shader from file - often a glsl extension
// VS Code has a glsl-literal extension that will color syntax shader code
new Frame(FILL, 1024, 768, purple, black, ready, "spiral.glsl");
function ready() {
new Shader(W, H, asset("spiral.glsl")).addTo();
}
EXAMPLE
// A circle - using rgb() and circle() functions
const fragment = `
// center will be wiggled outside in ZIM so need a uniform
uniform vec2 center;
// prepare a function to convert RGB 0-255 to 0-1
vec3 rgb(float r, float g, float b) {
return vec3(r/255.0, g/255.0, b/255.0); // 0-1
}
// prepare a function to see if each point (uv) is inside or outside radius
// from wherever the center of the circle is located (pos - based on center uniform)
vec4 circle(vec2 uv, vec2 pos, float rad, vec3 color) {
float d = length(pos - uv) - rad;
float t = clamp(d, 0.0, 1.0); // threshhold 0 if within radius range from center
return vec4(color, 1.0 - t); // alpha 0 if outside radius
}
void mainImage( out vec4 fragColor, in vec2 fragCoord ) {
// circle will be 1/2 the height
float radius = 0.25 * iResolution.y;
// Background
vec4 layer1 = vec4(rgb(255.0, 165.0, 0.0), 1.0);
// Circle
vec3 red = rgb(255.0, 0.0, 0.0);
vec4 layer2 = circle(fragCoord.xy, center, radius, red);
// Blend the two using the alpha of the circle
fragColor = mix(layer1, layer2, layer2.a);
}
`;
const width = 500;
const height = 500;
const uniforms = {
center:[width/2, height/2]
};
const u = new Uniforms(uniforms).wiggle("center_A", width/2, 50,100, 2,4);
new Shader(width, height, fragment, u).center().drag();
EXAMPLE
// a double spiral with speed set by iChange uniform
// which is controlled by the shader rate parameter/property
F.color = purple;
const fragment = `
void mainImage(out vec4 fragColor, in vec2 fragCoord) {
// https://www.shadertoy.com/view/cl3BWr
vec2 uv = 0.5-fragCoord/iResolution.xy;
uv.y*=iResolution.y/iResolution.x;
float angle=atan(uv.y, uv.x);
float stage=sin(-iChange + 10.*(length(uv)*10.+.2*angle));
fragColor = vec4(mix(.1,.9,smoothstep(-1.,1.,stage/fwidth(stage))));
}
`;
const shader = new Shader(W, H, fragment).center();
// shader.animate({ // would animate the rate
// props:{rate:5},
// time:5,
// rewind:true,
// loop:true
// })
const slider = new Slider({
min:0,
max:1,
value:.5,
barLength:100
}).pos(50,50,RIGHT,BOTTOM).change(()=>{
shader.rate = Math.exp(slider.value*3)-1;
});
shader.rate = Math.exp(slider.value*3)-1;
EXAMPLE
// Make a chessboard with a Fragment Shader - from https://medium.com/@banksysan_10088/webgl-checkerboard-42e15490603c
// Change the col and row counts with a Stepper using Uniforms
const fragment = `
uniform vec2 counts; // cols and rows
uniform vec4 color1; // rgba
uniform vec4 color2;
void mainImage( out vec4 fragColor, in vec2 fragCoord ) {
vec2 boardCoordinates = floor(fragCoord.xy * counts.xy / iResolution.xy);
float xMod = mod(boardCoordinates.x, 2.0);
float yMod = mod(boardCoordinates.y, 2.0);
float state = mod(xMod + yMod, 2.0);
fragColor = mix(color1, color2, state);
}
`;
const start = 8;
const uniforms = new Uniforms({
counts:[start, start],
color1:[0,0,0,1],
color2:[1,1,1,1]
});
const board = new Shader(500, 500, fragment, uniforms, null, false).center(); // false for not dynamic
const stepper = new Stepper({min:1, max:20, value:start}).sca(.8).pos(0,30,CENTER,BOTTOM).change(()=>{
uniforms.counts_A = stepper.value;
uniforms.counts_B = stepper.value;
board.update(); // update needed as dynamic is set to false
S.update();
});
EXAMPLE
// make a chessboard from a little bw image - from https://medium.com/@banksysan_10088/webgl-checkerboard-42e15490603c
// not sure if this is the easiest or only way to do this...
new Frame(FIT, 1024, 768, light, dark, ready, "board.jpg");
function ready() {
const vertex = `
in vec3 vertexPosition;
out vec3 vPosition; // will get passed to fragment shader
void main() {
vPosition = vertexPosition;
gl_Position = vec4(vertexPosition, 1.0);
}
`;
const fragment = `
uniform sampler2D TEXTURE; // texture captured here
in vec3 vPosition;
void mainImage( out vec4 fragColor, in vec2 fragCoord ) {
// texture comes in flipped and on different coordinates
vec2 normalizedCoordinates = (vPosition.xy * vec2(0.5, -0.5)) + vec2(0.5, 0.5);
fragColor = texture(TEXTURE, normalizedCoordinates); // note this is texture2D() in OpenGL 1
}
`;
const before = function(program, gl, canvas) {
const textureImageElement = new Pic("board.jpg").image;
const texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); // nearest as linear will blend
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, textureImageElement);
}
const board = new Shader(500, 500, fragment, null, vertex, false, before).center();
}
EXAMPLE
// make a chessboard with the Vertex Shader - from https://medium.com/@banksysan_10088/webgl-checkerboard-42e15490603c
// adding only certain squares - add a Fragment Shader with a color to change the default black
const after = function(program, gl, canvas, vertexData) {
const counts = [8,8];
const size = {width:2/counts[0], height:2/counts[1]};
let rowAlternate = true;
for (let i=-1; i<1; i+=size.width) {
let cellAlternate = rowAlternate;
for (let j=-1; j<1; j+=size.height) {
cellAlternate = !cellAlternate;
if (cellAlternate) continue; // do not add anything
const v1 = [i, j];
const v2 = [i, j + size.height];
const v3 = [i + size.width, j + size.height];
const v4 = [i + size.width, j];
vertexData.push(...v1);
vertexData.push(...v3);
vertexData.push(...v2);
vertexData.push(...v3);
vertexData.push(...v1);
vertexData.push(...v4);
}
rowAlternate = !rowAlternate;
}
}
new Rectangle(500,500,white).center();
const board = new Shader({
width:500,
height:500,
dynamic:false,
postCall:after,
strip:false // use TRIANGLES not TRIANGEL_STRIP (might not show on iOS)
}).center();
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
width - (default 500) the width of the Shader
this can be retrieved in the Shader code as iResolution.x
height - (default 500) the height of the Shader
this can be retrieved in the Shader code as iResolution.y
fragment - provide the code as a string for the Fragment Shader which affects the pixels
This can be passed in as a variable with `` for multiline or preloaded as an asset and read using asset("filename.glsl")
ShaderToy uses "void mainImage(out vec4 fragColor, in vec2 fragCoord) {}"
But basic GLSL uses main(), fragColor for OUT, and gl_FragCoord as IN
ZIM converts the ShaderToy so that you can use either.
To see the final Fragment Shader in the console set the Shader() log parameter to true
Here is the default Fragment Shader for OpenGL 3 (verion 1 is slightly different):
// START AUTO - do not include below
#version 300 es
precision mediump float;
// plus all the default Uniforms mentioned above
// END AUTO - do not include above
void main() {
vec2 fragCoord = gl_FragCoord.xy; // a 2D variable of IN coordinates
gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0); // OUT variable
}
uniforms - (default null) a ZIM Uniform object or an object literal {} with uniform names and values (use arrays for vectors)
if a {} is passed in, a Uniform object will be made and in either case available as the uniform property of the Shader
the uniform properties match the {} properties except any array is made into individual properties to make animation easier
For instance, passing in:
{
alpha:.5,
position:[100,200]
}
would result in three properties on the uniform object:
shader.uniform.alpha // .5
shader.position_A // 100
shader.position_B // 200
These could be animated or wiggled like:
shader.uniform.animate({position_A:300}, 2); // animate position.x inside the shader
shader.wiggle("alpha", .5, .1, .4, 1, 2); // wiggle alpha inside the shader - probably on the "z" or "a" component of a color vec4
vertex - provide the code as a string for the Vertex Shader which affects the points
this will be used less with 2D outputs - see the Fragment Shader parameter for similar details
To see the final Fragment Shader in the console set the Shader() log parameter to true
Here is the default Vertex Shader for OpenGL 3 (verion 1 is slightly different):
// START AUTO - do not include below
precision mediump float;
// plus all the default Uniforms mentioned above
vec2 fragCoord = gl_FragCoord.xy; // a 2D variable of IN coordinates
// END AUTO - do not include above
void main() {
gl_Position = vec4(vertexPosition, 0.0, 1.0); // OUT variable
}
dynamic - (default true) set to false to not update the uniforms of the shaders constanty
preCall - (default null) a function to run just before before gl.useProgram(program); and after createProgram(gl, vertex, fragment)
the function will receive (program, gl, canvas) arguments to its parameters
postCall - (default null) a function to run after createProgram(gl, vertex, fragment) and gl.useProgram(program);
the function will receive (program, gl, canvas, vertexData) arguments to its parameters
Note: the vertexData is a [] and can be filled in this function
if it is not filled then it defaults to two triangles making a rectangle of width and height
Also see the strip parameter below
rate - |ZIM VEE| (default 1) set the rate of the iChange uniform.
many shaders use iTime to animate the effect. Instead, you can use an iChange uniform
and setting a rate of 2 will animate it twice as fast, .5 half as fast, etc.
this can be set with a ZIM VEE value and can also be adjusted with the rate property of the shader
(this could also be done with the iFrameRate uniform but then the Ticker.setFPS() would have to be changed)
version - (default "#version 300 es") string version to add to top of shader code - would suggest leaving this as default
use "" for lower versions. Higher versions probably will work using the #
canvas - (default a canvas tag) a canvas tag will be created for the Shader or pass in an existing canvas tag
this will be available as the canvas property
vertexPosition - (default "vertexPosition") the variable name for the vertexPosition
strip - (default true) use gl.TRIANGLE_STRIP - set to false to use gl.TRIANGLES for vertex data
Note: could not get gl.TRIANGLES working on iOS (iPad2)
strip:true will use vertexData = [1.0, 1.0, -1.0, 1.0, 1.0, -1.0, -1.0, -1.0]; // two triangles strips
strip:false will use: vertexData = [-1.0, -1.0, 1.0, 1.0, -1.0, 1.0, 1.0, 1.0, -1.0, -1.0, 1.0, -1.0]; // two triangles
in either case, if vertexData is set in the postCall then this overrides the default vertexData above.
log - (default false) - set to true to log the vertex and fragment shaders in the console - in that order
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly
METHODS
update() - update the shader - not needed if dynamic is true (default)
clone() - makes a copy of the Shader
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection
ALSO
ZIM 4TH adds all the methods listed under Bitmap (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO
see the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), uncache(), updateCache(), dispatchEvent(), etc.
PROPERTIES
type - holds the class name as a String
dynamic - get or set whether the shader is dynamic
rate - |ZIM VEE| get or set the rate of the iChange uniform - can use for animating the shader - see also the rate parameter
canvas - the canvas for the shader
gl - the WebGL context for the canvas for the shader
uniforms - the uniforms object stored on the shader - use uniforms.obj for the original object literal
uniforms holds all the properties as individual properties
vectors (arrays) are accessed as vector_A, vector_B, vector_C, vector_D
see ZIM Uniforms for more info
fragment - the fragment shader - also see the log parameter to view final shaders in console
vertex - the vertex shader
program - the WebGL program with the shaders
ticker - the ZIM Ticker that runs the updates
ALSO
see ZIM Bitmap for properties such as:
width, height, widthOnly, heightOnly, draggable, level, depth, group
blendMode, hue, saturation, brightness, contrast, etc.
ALSO
see the CreateJS Easel Docs for Bitmap properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseEnabled, parent, etc.
EVENTS
See the CreateJS Easel Docs for Bitmap events such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover
CLOSE ▲PAGE ▤CODE ▤VIDS
ShaderOverlay
zim class - extends a zim.Tag
DESCRIPTION
ShaderOverlay is a ZIM Tag() that holds a canvas with a shader from provided shader code.
This is the same as ZIM Shader() so see the Docs for Shader above.
The only difference is that the shader canvas is placed in a Tag() so overlayed on ZIM.
This can also be underlayed by setting the z-index of the tag.
The advantage of a tag is that the canvas is used directly with its WebGL context
rather than passed into a Bitmap() to be displayed on the Canvas2D context.
The disadvantage is that the tag can only be overlayed or underlayed
and not be in the normal ZIM canvas container levels.
Also, if manually adjusting, a shaderOverlay.update() might need to be called.
But for the most part, the Tag() should take care of it - for instance, resizing the window.
See ZIM Tag() for more tips regarding update().
EXAMPLE
new Frame(FILL, 1024, 768, clear, clear, ready);
function ready() {
const fragment = `
void main() {
vec2 uv = gl_FragCoord.xy / iResolution.xy;
vec3 color = 0.5 + 0.5 * cos(iTime + uv.xyx + vec3(0,2,4));
gl_FragColor = vec4(vec3(color), 1.0);
}
`;
const shader = new zim.ShaderOverlay(W, H, fragment).center();
shader.tag.style.zIndex = -50; // put shader beneath stage
const list = new List({
backdropColor:faint,
bgColor:white.toAlpha(.5),
rollBgColor:dark.toAlpha(.5),
selectedBgColor:dark.toAlpha(.8),
}).sca(1.5).center();
F.on("resize", ()=>{list.center();});
} // end ready
Uniforms
zim class - extends a zim.Container which extends a createjs.Container
DESCRIPTION
Makes an object to hold uniforms for a ZIM Shader() or ShaderOverlay().
(This is not to be used as a display object despite extending a Container)
Uniforms are variables to pass in to the shader code.
They are often arrays to make vectors and array values are hard to animate.
ZIM Uniforms stores each array element as an individual property.
Uniforms extends a Container giving it animate() and wiggle() methods.
This means we can animate or wiggle any of the Uniforms properties
and ZIM will update the shader if the shader's dynamic parameter or property is true.
HOW IT WORKS
An object literal {} is passed into the Uniforms(obj).
This will have all the uniform names and values.
If the value is an array that is used to set vector uniforms, then ZIM splits this up
so that each array value has a property called the name_A, name_B, name_C, name_D as needed.
There are only ever 2, 3, or 4 component vectors.
If the value is a single value, then it is stored as the name alone.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const uniforms = new Uniforms({
age:20,
color:[.5, .2, .8, 1]
});
// the the Uniforms object will have:
zog(uniforms.age); // 20
zog(uniforms.color_A); // .5
zog(uniforms.color_B); // .2
zog(uniforms.color_C); // .8
zog(uniforms.color_D); // 1
uniforms.wiggle("color_A", .5, .2, .4, 1, 2); // would wiggle the red
// inside the shader they must be declared if they are to be used
// uniform float age;
// uniform vec4 color;
const fragment = `
uniform vec4 color; // declare our uniform - only using color, age will be ignored
void mainImage( out vec4 fragColor, in vec2 fragCoord ) {
fragColor = color; // gl_FragColor or fragColor is the default output
}
`;
new Shader(500, 500, fragment, uniforms).center().drag(); // draggable animated color box
PARAMETERS
obj - the object literal {} with uniform properties and values
METHODS
update() - update the uniforms as long as dynamic is true or the update() method of the shader is called
this is handled automatically by the shader update() so may as well call update() on shader
PROPERTIES
type - holds the class name as a String
obj - the original object literal - its properties get updated as the uniforms properties are updated
***
Each property in the object literal
with arrays being split into a property for each element in the format
name_A, name_B, name_C, name_D as dicted by the number of elements in the value for the property
{year:2024, dimensions:[200,500]}
would get:
uniforms.year = 2024
uniforms.dimensions_A = 200
uniforms.dimensions_B = 500
CLOSE ▲PAGE ▤CODE ▤VIDS
--------------ZIM SHAPES
EXPAND ▼ CustomShape(x, y, w, h)
CustomShape
zim class - extends a zim.Container which extends a createjs.Container
DESCRIPTION
Used internally to make ZIM Shapes - Circle, Rectangle, Triangle, etc.
Holds the following properties in common:
color, colorRange, borderColor, borderWidth, thickness, dashed, dashedOffset, corner
Holds the following functions in common: (most methods applied through ZIM 4TH methods)
setColorRange, cloneAll(), linearGradient (depreciated), radialGradient (depreciated)
NOTE
this is NOT a generic Shape - see the zim.Shape() class for that.
EXAMPLE
// would recommend just extending a Container() for custom shapes / objects
// unless properties listed above are needed over multiple projects
// but it could be done with matching various private properties, etc.
// also note that a Blob can make just about any shape...
const Smile = function(color) {
this.super_constructor(-100,-20,200,70);
this._color = color;
this.shape = new Shape().addTo(this);
// this is an example of how ZIM changes shape color
// will need to go through and do similar things for borderColor, etc.
this.colorCommand = this.shape.f(this._color).command;
this.shape.mt(-100,-20).bt(0,70,0,70,100,-20);
}
extend(Smile, CustomShape);
const s = new Smile(red).center();
timeout(1, function () {
s.color = blue;
S.update();
});
Circle
zim class - extends a zim.CustomShape which extends a zim.Container which extends a createjs.Container
DESCRIPTION
Makes a circle shape inside a container.
The registration and origin will be the center.
NOTE
mouseChildren is turned to false for all zim Shape containers.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
new Circle(50, red).center();
// or with 10 pixel grey stroke
const circle = new Circle(50, red, grey, 10).center();
// change the color of the circle to a radial gradient fill
circle.color = new RadialColor([yellow,green], [0, .7], 0, 0, 20, 0, 0, 50);
// make a half circle - or any percent of a circle
new Circle({radius:200, color:pink, percent:50}).center();
EXAMPLE
const circle = new Circle({min:10, max:50}, [red, green, blue]).center();
interval(1, ()=>{
// apply a different values picked from original ZIM VEE values
zog(circle.veeObj)
circle.radius = Pick.choose(circle.veeObj.radius); // or zik(circle.veeObj.radius)
circle.color = Pick.choose(circle.veeObj.color);
S.update();
});
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports VEE - parameters marked with ZIM VEE mean a zim Pick() object or Pick Literal can be passed
Pick Literal formats: [1,3,2] - random; {min:10, max:20} - range; series(1,2,3) - order, function(){return result;} - function
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
radius - |ZIM VEE| (default 50) the radius (from the center to the edge or half the diameter) ;-)
color - |ZIM VEE| (default black) the fill color as any CSS color including "rgba()" for alpha fill (set a to 0 for tranparent fill)
borderColor - |ZIM VEE| (default null) the stroke color
borderWidth - |ZIM VEE| (default 1 if stroke is set) the size of the stroke in pixels
dashed - (default false) set to true for dashed border (if borderWidth or borderColor set)
or set to an array of line size then space size, etc.
eg. [20, 10] is 20 line and 10 space repeated and [20,100,50,10] is 20 line, 100 space, 50 line, 10 space, etc.
percent - (default 100) set to a percentage of a circle (arc) - registration stays at radius center, bounds shrink to arc
percentClose - (default true) set to false to not close the border of a circle with percent set
percentArc - (default false) set to a percent to make moon shapes - must have percent turned on
the value is the distance the arc-making circle is placed from the original circle's edge
this distance is given as a percentage of the original circle's radius
so if percentArc is set to 0 then the arc-making circle is at the radius (the edge) of the original circle
if the percentArc is set to 50 then the arc-making circle is half the radius outside the original radius and the arc is less
if the percentArc is set to -50 then the arc-making circle is half the radius inside the original radius and the arc is more
Note, due to canvas winding, the arc will not do very thin cresents as expected
instead once the inner arc is as wide as the outer arc, it makes a straight line
for thin crecents, overlap the circle with a circle that matches the background color
or if the background is an image, etc. then mask a clone of the background with the arc circle
strokeObj - (default {caps:"butt", joints:"miter", miterLimit:10, ignoreScale:false}) set to adjust stroke properties
// note, not all applicable to a Circle - perhaps just ignoreScale...
caps options: "butt", "round", "square" or 0,1,2
joints options: "miter", "round", "bevel" or 0,1,2
miterLimit is the ration at which the mitered joint will be clipped
ignoreScale set to true will draw the specified line thickness regardless of object scale
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly
METHODS
setColorRange(color1, color2) - set a color range for shape - used by colorRange property - returns obj for chaining
if one color is used, the current color is used and color1 is the second color in the range
cache(see Container docs for parameter description) - overrides CreateJS cache() and returns object for chaining
Leave parameters blank to cache bounds of shape (plus outer edge of border if borderWidth > 0)
hasProp(property as String) - returns true if property exists on object else returns false
clone(exact) - makes a copy of the shape
exact (default false) ZIM VEE (Pick) values are active in clones unless exact is set to true
For instance, if the object's color is [blue, green]
then its clone might be blue or green - which could be different than the original
If exact is set to true then the clone will be the color of the original object
Warning: clone does not clone any content added to a shape - use a Container for that - see cloneAll()
cloneAll(exact, style, group, inherit) - copies shape and any custom content in shape - experimental
exact (default false) in theory will copy ZIM VEE values as they are in the original
see main class for style, group, inherit parameters
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection
ALSO
ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO
see the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.
PROPERTIES
type - holds the class name as a String
shape - gives access to the circle shape
color - get and set the fill color
colorRange - if setColorRange() is used, the colorRange is a ratio (0-1) between the colors
setting the colorRange will change the color property of the shape
for instance, shape.setColorRange(blue, pink) then shape.colorRange = .5
will set the color of the shape to half way between blue and pink
shape.animate({color:red}, 1); is a shortcut to animate the colorRange
shape.wiggle("colorRange", .5, .2, .5, 1, 5) will wiggle the colorRange
colorCommand - access to the CreateJS fill command for bitmap, linearGradient and radialGradient fills
depreciated - see ZIM GradientColor, RadialColor and BitmapColor
borderColor - get and set the stroke color
borderColorCommand - access to the CreateJS stroke command for bitmap, linearGradient and radialGradient strokes
See: https://www.createjs.com/docs/easeljs/classes/Graphics.Stroke.html
borderWidth - get and set the stroke size in pixels
borderWidthCommand - access to the CreateJS stroke style command (width, caps, joints, miter, ignoreScale)
See: https://www.createjs.com/docs/easeljs/classes/Graphics.StrokeStyle.html
dashed - get and set the dashed - use true / false or an array (see dashed parameter)
dashedOffset - get and set the offset of the dash (50 default) - can animate this property for a marquee effect
borderDashedCommand - access to the CreateJS stroke dashed command (segments, offset)
see https://www.createjs.com/docs/easeljs/classes/Graphics.StrokeDash.html
radius - gets or sets the radius.
The radius is independent of scaling and can be different than the width/2
Setting the radius redraws the circle but any current scaling is kept
percentage - get or set the percent of the circle (see percent parameter)
NOTE not percent property which interferes with animate percent
percentClose - get or set the percent close of the circle (see percentClose parameter)
percentArc - get or set the percent arc (see percentArc parameter)
mouseChildren - set to false to avoid dragging the shape inside
to drag or interact with objects inside then set mouseChildren to true
veeObj - an object with ZIM VEE original parameters:value allowing the ZIM VEE values to be referenced
for instance, obj.prop = Pick.choose(obj.veeObj.prop); will reset the the prop to the result of the original ZIM VEE value
ALSO
see ZIM Container for properties such as:
width, height, widthOnly, heightOnly, draggable, level, depth, group
blendMode, hue, saturation, brightness, contrast, etc.
ALSO
see the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.
EVENTS
See the CreateJS Easel Docs for Container events such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover
CLOSE ▲PAGE ▤CODE ▤TOUR😊BITS VIDS
Rectangle
zim class - extends a zim.CustomShape which extends a zim.Container which extends a createjs.Container
DESCRIPTION
Makes a rectangle shape inside a container.
The registration and origin will be top left corner.
NOTE
mouseChildren is turned to false for all zim Shape containers.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
new Rectangle(200, 100, blue).center();
// or with rounded corners
new Rectangle({width:200, height:100, color:blue, corner:20}).center();
// or with individual corners
new Rectangle({width:100, height:100, corner:[50,0,50,0]}).center();
// or with skewed corners
// this will have a radius of 50 in the horizontal but 20 in the vertical
new Rectangle({width:100, height:100, corner:[50,20]}).center();
// or a combination of corner values and skewed values
new Rectangle({width:100, height:100, corner:[0, 50, [10,50], [40, 20]}).center();
// or with 2 pixel white stroke
new Rectangle(200, 100, blue, white, 2).center();
// fill the rectangle with a Bitmap fill assuming icon has been loaded - not the image property
new Rectangle(200, 300, new BitmapColor(new Pic("icon.png"))).center();
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports VEE - parameters marked with ZIM VEE mean a zim Pick() object or Pick Literal can be passed
Pick Literal formats: [1,3,2] - random; {min:10, max:20} - range; series(1,2,3) - order, function(){return result;} - function
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
width - |ZIM VEE| (default the height if provided else 100) the width
height - |ZIM VEE| (default the width if provided else 100) the height
color - |ZIM VEE| (default black) the fill color as any CSS color including "rgba()" for alpha fill (set a to 0 for tranparent fill)
borderColor - |ZIM VEE| (default null) the stroke color
borderWidth - |ZIM VEE| (default 1 if stroke is set) the size of the stroke in pixels
corner - (default 0) the round of corner
can also be an array of [topLeft, topRight, bottomRight, bottomLeft]
can also be an array of [horizontal, vertical] which skews each corner
can also be a combination array of values and skew arrays
[topLeft, [horizontal, vertical], bottomRight, [horizontal, vertical]]
dashed - (default false) set to true for dashed border (if borderWidth or borderColor set)
or set to an array of line size then space size, etc.
eg. [20, 10] is 20 line and 10 space repeated and [20,100,50,10] is 20 line, 100 space, 50 line, 10 space, etc.
strokeObj - (default {caps:"butt", joints:"miter", miterLimit:10, ignoreScale:false}) set to adjust stroke properties
caps options: "butt", "round", "square" or 0,1,2
joints options: "miter", "round", "bevel" or 0,1,2
miterLimit is the ration at which the mitered joint will be clipped
ignoreScale set to true will draw the specified line thickness regardless of object scale
scaleDimensions - (default true) set to false to redraw the shape rather than scale the shape
when using width, height widthOnly, and heightOnly
a false setting will keep the corner and the borderWidth the same size
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly
METHODS
setColorRange(color1, color2) - set a color range for shape - used by colorRange property - returns obj for chaining
if one color is used, the current color is used and color1 is the second color in the range
cache(see Container docs for parameter description) - overrides CreateJS cache() and returns object for chaining
Leave parameters blank to cache bounds of shape (plus outer edge of border if borderWidth > 0)
hasProp(property as String) - returns true if property exists on object else returns false
clone(exact) - makes a copy of the shape
exact (default false) ZIM VEE (Pick) values are active in clones unless exact is set to true
For instance, if the object's color is [blue, green]
then its clone might be blue or green - which could be different than the original
If exact is set to true then the clone will be the color of the original object
Warning: clone does not clone any content added to a shape - use a Container for that - see cloneAll()
cloneAll(exact style, group, inherit) - copies shape and any custom content in shape - experimental
exact (default false) in theory will copy ZIM VEE values as they are in the original
see main class for style, group, inherit parameters
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection
ALSO
ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO
see the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.
PROPERTIES
type - holds the class name as a String
shape - gives access to the rectangle shape
color - get and set the fill color
colorRange - if setColorRange() is used, the colorRange is a ratio (0-1) between the colors
setting the colorRange will change the color property of the shape
for instance, shape.setColorRange(blue, pink) then shape.colorRange = .5
will set the color of the shape to half way between blue and pink
shape.animate({color:red}, 1); is a shortcut to animate the colorRange
shape.wiggle("colorRange", .5, .2, .5, 1, 5) will wiggle the colorRange
colorCommand - access to the CreateJS fill command for bitmap, linearGradient and radialGradient fills
depreciated - see ZIM GradientColor, RadialColor and BitmapColor
borderColor - get and set the stroke color
borderColorCommand - access to the CreateJS stroke command for bitmap, linearGradient and radialGradient strokes
See: https://www.createjs.com/docs/easeljs/classes/Graphics.Stroke.html
borderWidth - get and set the stroke size in pixels
borderWidthCommand - access to the CreateJS stroke style command (width, caps, joints, miter, ignoreScale)
See: https://www.createjs.com/docs/easeljs/classes/Graphics.StrokeStyle.html
corner - get or set the corner or array of corners (see corner parameter)
dashed - get and set the dashed - use true / false or an array (see dashed parameter)
dashedOffset - get and set the offset of the dash (50 default) - can animate this property for a marquee effect
borderDashedCommand - access to the CreateJS stroke dashed command (segments, offset)
see https://www.createjs.com/docs/easeljs/classes/Graphics.StrokeDash.html
mouseChildren - set to false to avoid dragging the shape inside
to drag or interact with objects inside then set mouseChildren to true
scaleDimensions - get or set whether the shape scales when width, height, widthOnly or heightOnly are used
also see the scaleDimensions paramater
veeObj - an object with ZIM VEE original parameters:value allowing the ZIM VEE values to be referenced
for instance, obj.prop = Pick.choose(obj.veeObj.prop); will reset the the prop to the result of the original ZIM VEE value
ALSO
see ZIM Container for properties such as:
width, height, widthOnly, heightOnly, draggable, level, depth, group
blendMode, hue, saturation, brightness, contrast, etc.
ALSO
see the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.
EVENTS
See the CreateJS Easel Docs for Container events such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover
CLOSE ▲PAGE ▤CODE ▤TOUR😊BITS VIDS
Triangle
zim class - extends a zim.CustomShape which extends a zim.Container which extends a createjs.Container
DESCRIPTION
Makes a triangle shape inside a container using three line lengths.
Passing one length parameter makes an equilateral triangle.
Passing two length parameters makes an isosceles triangle.
Passing -1 as the middle or last length parameter makes a 90 degree triangle.
NOTE
mouseChildren is turned to false for all zim Shape containers.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
new Triangle(200, null, null, "green").center();
// all three sides specified - tall pointy triangle with yellow stroke of 10 pixels
new Triangle(100, 200, 200, "green", "yellow", 10).center();
// here we adjust so rotation looks better
const tri = new Triangle({a:200, color:"green", adjust:30})
.center()
.animate({obj:{rotation:360}, time:3, ease:"linear", loop:true});
// here we fill the triangle with a linear gradient color
tri.color = new GradientColor([green, blue ,green], [.2, .5, .8], 0, 0, tri.width, 0);
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports VEE - parameters marked with ZIM VEE mean a zim Pick() object or Pick Literal can be passed
Pick Literal formats: [1,3,2] - random; {min:10, max:20} - range; series(1,2,3) - order, function(){return result;} - function
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
a, b and c - |ZIM VEE| (default 100) the lengths of the sides
a will run horizontally along the bottom
b is upwards and c is back to the origin
if b or c is set to -1 will assume a 90 angle
color - |ZIM VEE| (default black) the fill color as any CSS color including "rgba()" for alpha fill (set a to 0 for tranparent fill)
borderColor - |ZIM VEE| (default null) the stroke color
borderWidth - |ZIM VEE| (default 1 if stroke is set) the size of the stroke in pixels
corner - (default 0) the round of corner
can also be an array of [bottomLeft, bottomRight, top]
center - (default true) puts the registration point to the center
adjust - (default 0) pixels to bring center towards vertical base
the actual center is not really the weighted center
dashed - (default false) set to true for dashed border (if borderWidth or borderColor set)
or set to an array of line size then space size, etc.
eg. [20, 10] is 20 line and 10 space repeated and [20,100,50,10] is 20 line, 100 space, 50 line, 10 space, etc.
strokeObj - (default {caps:"butt", joints:"miter", miterLimit:10, ignoreScale:false}) set to adjust stroke properties
caps options: "butt", "round", "square" or 0,1,2
joints options: "miter", "round", "bevel" or 0,1,2
miterLimit is the ration at which the mitered joint will be clipped
ignoreScale set to true will draw the specified line thickness regardless of object scale
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly
METHODS
setColorRange(color1, color2) - set a color range for shape - used by colorRange property - returns obj for chaining
if one color is used, the current color is used and color1 is the second color in the range
cache(see Container docs for parameter description) - overrides CreateJS cache() and returns object for chaining
Leave parameters blank to cache bounds of shape (plus outer edge of border if borderWidth > 0)
hasProp(property as String) - returns true if property exists on object else returns false
clone(exact) - makes a copy of the shape
exact (default false) ZIM VEE (Pick) values are active in clones unless exact is set to true
For instance, if the object's color is [blue, green]
then its clone might be blue or green - which could be different than the original
If exact is set to true then the clone will be the color of the original object
Warning: clone does not clone any content added to a shape - use a Container for that - see cloneAll()
cloneAll(exact style, group, inherit) - copies shape and any custom content in shape - experimental
exact (default false) in theory will copy ZIM VEE values as they are in the original
see main class for style, group, inherit parameters
exact (default false) in theory will copy ZIM VEE values as they are in the original
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection
ALSO
ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO
see the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.
PROPERTIES
type - holds the class name as a String
shape - gives access to the triangle shape
color - get and set the fill color
colorRange - if setColorRange() is used, the colorRange is a ratio (0-1) between the colors
setting the colorRange will change the color property of the shape
for instance, shape.setColorRange(blue, pink) then shape.colorRange = .5
will set the color of the shape to half way between blue and pink
shape.animate({color:red}, 1); is a shortcut to animate the colorRange
shape.wiggle("colorRange", .5, .2, .5, 1, 5) will wiggle the colorRange
colorCommand - access to the CreateJS fill command for bitmap, linearGradient and radialGradient fills
depreciated - see ZIM GradientColor, RadialColor and BitmapColor
borderColor - get and set the stroke color
borderColorCommand - access to the CreateJS stroke command for bitmap, linearGradient and radialGradient strokes
See: https://www.createjs.com/docs/easeljs/classes/Graphics.Stroke.html
borderWidth - get and set the stroke size in pixels
borderWidthCommand - access to the CreateJS stroke style command (width, caps, joints, miter, ignoreScale)
See: https://www.createjs.com/docs/easeljs/classes/Graphics.StrokeStyle.html
corner - get or set the corner or array of corners (see corner parameter)
dashed - get and set the dashed - use true / false or an array (see dashed parameter)
dashedOffset - get and set the offset of the dash (50 default) - can animate this property for a marquee effect
borderDashedCommand - access to the CreateJS stroke dashed command (segments, offset)
see https://www.createjs.com/docs/easeljs/classes/Graphics.StrokeDash.html
one, two, three - read only - points with x, y properties for bottom left, bottom right, top right
angles - read only - Array of angles [bottom left, bottom right, top right]
adjusted - read only - the value of the adjust parameter or 0 if no adjust was supplied
mouseChildren - set to false to avoid dragging the shape inside
to drag or interact with objects inside then set mouseChildren to true
veeObj - an object with ZIM VEE original parameters:value allowing the ZIM VEE values to be referenced
for instance, obj.prop = Pick.choose(obj.veeObj.prop); will reset the the prop to the result of the original ZIM VEE value
ALSO
see ZIM Container for properties such as:
width, height, widthOnly, heightOnly, draggable, level, depth, group
blendMode, hue, saturation, brightness, contrast, etc.
ALSO
see the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.
EVENTS
See the CreateJS Easel Docs for Container events such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover
CLOSE ▲PAGE ▤CODE ▤TOUR😊BITS VIDS
Poly
zim class - extends a zim.CustomShape which extends a zim.Container which extends a createjs.Container
DESCRIPTION
Makes a regular polygon with radius like a Circle.
The number of sides can be set as well as a pointSize that will make star-like shapes
The registration and origin will be the center.
NOTE
mouseChildren is turned to false for all zim Shape containers.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
new Poly(200, 5, 0, pink).center(); // pentagon
new Poly(200, 5, .6, pink).center(); // five point star
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports VEE - parameters marked with ZIM VEE mean a zim Pick() object or Pick Literal can be passed
Pick Literal formats: [1,3,2] - random; {min:10, max:20} - range; series(1,2,3) - order, function(){return result;} - function
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
radius - |ZIM VEE| (default 50) the radius (from the center to the edge or half the diameter) ;-)
sides - |ZIM VEE| (default 5) the number of sides
pointSize - |ZIM VEE| (default 0) a factor that will indent or outdent the sides to form stars
0 is no indent - 1 is a complete indent - which will have no fill and if there is a border will look like a stick figure
beyond 1 is cool - it overlaps on itself and makes multiple patterns
color - |ZIM VEE| (default black) the fill color as any CSS color including "rgba()" for alpha fill (set a to 0 for tranparent fill)
borderColor - |ZIM VEE| (default null) the stroke color
borderWidth - |ZIM VEE| (default 1 if stroke is set) the size of the stroke in pixels
dashed - (default false) set to true for dashed border (if borderWidth or borderColor set)
or set to an array of line size then space size, etc.
eg. [20, 10] is 20 line and 10 space repeated and [20,100,50,10] is 20 line, 100 space, 50 line, 10 space, etc.
strokeObj - (default {caps:"butt", joints:"miter", miterLimit:10, ignoreScale:false}) set to adjust stroke properties
caps options: "butt", "round", "square" or 0,1,2
joints options: "miter", "round", "bevel" or 0,1,2
miterLimit is the ration at which the mitered joint will be clipped
ignoreScale set to true will draw the specified line thickness regardless of object scale
flat - (default false) by default all Poly star shapes point up - set flat to true to keep a flat side down
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly
METHODS
setColorRange(color1, color2) - set a color range for shape - used by colorRange property - returns obj for chaining
if one color is used, the current color is used and color1 is the second color in the range
cache(see Container docs for parameter description) - overrides CreateJS cache() and returns object for chaining
Leave parameters blank to cache bounds of shape (plus outer edge of border if borderWidth > 0)
hasProp(property as String) - returns true if property exists on object else returns false
clone(exact) - makes a copy of the shape
exact (default false) ZIM VEE (Pick) values are active in clones unless exact is set to true
For instance, if the object's color is [blue, green]
then its clone might be blue or green - which could be different than the original
If exact is set to true then the clone will be the color of the original object
cloneAll(exact style, group, inherit) - copies shape and any custom content in shape - experimental - usually shapes do not have content (use a Container)
exact (default false) in theory will copy ZIM VEE values as they are in the original
see main class for style, group, inherit parameters
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection
ALSO
ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO
see the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.
PROPERTIES
type - holds the class name as a String
radius - gets or sets the radius.
The radius is independent of scaling and can be different than the width/2
Setting the radius redraws the circle but any current scaling is kept
sides - get or set the sides of the shape
pointSize - get or set the point size of the shape (can be animated too)
shape - gives access to the poly shape
color - get and set the fill color
colorRange - if setColorRange() is used, the colorRange is a ratio (0-1) between the colors
setting the colorRange will change the color property of the shape
for instance, shape.setColorRange(blue, pink) then shape.colorRange = .5
will set the color of the shape to half way between blue and pink
shape.animate({color:red}, 1); is a shortcut to animate the colorRange
shape.wiggle("colorRange", .5, .2, .5, 1, 5) will wiggle the colorRange
colorCommand - access to the CreateJS fill command for bitmap, linearGradient and radialGradient fills
depreciated - see ZIM GradientColor, RadialColor and BitmapColor
borderColor - get and set the stroke color
borderColorCommand - access to the CreateJS stroke command for bitmap, linearGradient and radialGradient strokes
See: https://www.createjs.com/docs/easeljs/classes/Graphics.Stroke.html
borderWidth - get and set the stroke size in pixels
borderWidthCommand - access to the CreateJS stroke style command (width, caps, joints, miter, ignoreScale)
See: https://www.createjs.com/docs/easeljs/classes/Graphics.StrokeStyle.html
dashed - get and set the dashed - use true / false or an array (see dashed parameter)
dashedOffset - get and set the offset of the dash (50 default) - can animate this property for a marquee effect
borderDashedCommand - access to the CreateJS stroke dashed command (segments, offset)
see https://www.createjs.com/docs/easeljs/classes/Graphics.StrokeDash.html
mouseChildren - set to false to avoid dragging the shape inside
to drag or interact with objects inside then set mouseChildren to true
veeObj - an object with ZIM VEE original parameters:value allowing the ZIM VEE values to be referenced
for instance, obj.prop = Pick.choose(obj.veeObj.prop); will reset the the prop to the result of the original ZIM VEE value
ALSO
see ZIM Container for properties such as:
width, height, widthOnly, heightOnly, draggable, level, depth, group
blendMode, hue, saturation, brightness, contrast, etc.
ALSO
see the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.
EVENTS
See the CreateJS Easel Docs for Container events such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover
CLOSE ▲PAGE ▤CODE ▤VIDS
Line
zim class - extends a zim.CustomShape which extends a zim.Container which extends a createjs.Container
DESCRIPTION
Makes a straight line with a length and thickness.
See also ZIM Squiggle() with points:[[0,0], [100,0], etc. with Bezier handles
See also ZIM Shape() for custom lines, curves, etc.
The registration and origin will be at the start point at the left.
Start point and end point can be adjusted in various ways to accommodate animation, etc.
NOTE
mouseChildren is turned to false for all zim Shape containers.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
new Line(500).center(); // centered line
EXAMPLE
new Line({points:[[0,0],[100,0],[100,100],[200,100]]}).center(); // over, up, over, etc.
// or with quadratic curves:
// 100,0 is control point to x,y of 100,50
new Line({points:[[0,0],[100,0,100,50],[100,100,200,100]]}).center(); // over, up, over
// or with bezier curves:
// 100,0 is first control point, 100,0 is second control point and 100,50 is final point
new Line({points:[[0,0],[100,0,100,0,100,50],[100,100,100,100,200,100]]}).center(); // over, up, over
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports VEE - parameters marked with ZIM VEE mean a zim Pick() object or Pick Literal can be passed
Pick Literal formats: [1,3,2] - random; {min:10, max:20} - range; series(1,2,3) - order, function(){return result;} - function
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
length - |ZIM VEE| (default 100) the length of the line - see also length property and start and end point properties
thickness - |ZIM VEE| (default 3) the size of the stroke in pixels
color - |ZIM VEE| (default black) the fill color as any CSS color including "rgba()" for alpha fill (set a to 0 for tranparent fill)
startHead - |ZIM VEE| (default "none") the start head of the line - set to "arrow" (or "triangle") or "circle" or a custom DisplayObject - probably centerReg this
endHead - |ZIM VEE| (default "none") the end head of the line - set to "arrow" (or "triangle") or "circle" or a custom DisplayObject - probably centerReg this
dashed - (default false) set to true for dashed border (if borderWidth or borderColor set)
or set to an array of line size then space size, etc.
eg. [20, 10] is 20 line and 10 space repeated and [20,100,50,10] is 20 line, 100 space, 50 line, 10 space, etc.
strokeObj - (default {caps:"butt", joints:"miter", miterLimit:10, ignoreScale:false}) set to adjust stroke properties
caps options: "butt", "round", "square" or 0,1,2
joints options: "miter", "round", "bevel" or 0,1,2
miterLimit is the ration at which the mitered joint will be clipped
ignoreScale set to true will draw the specified line thickness regardless of object scale
lineType - (default "straight") - by default the line is a straight line between points
set to "corner" to draw only horizontal and vertical lines at 90 degree angles between lines (see lineOrientation)
set to "curve" to draw horizontal and vertical lines with curves between lines (see lineOrientation)
lineOrientation - (default AUTO) - for lineType other than straight automatically decide between horizontal or vertical
set to HORIZONTAL to draw two horizontal lines and one vertical line between points
set to VERTICAL to draw two vertical lines and one horizontal line between points
curveH - (default 100) - for "curve" lineType this is the horizontal distance of the curve
curveV - (default 100) - for "curve" lineType this is the vertical distance of the curve
points - (default null) an Array of points for the line which will ignore length and lineType parameters
points in the array can have the following formats (a mix is okay too):
[x,y] points for straight lines. This format should also be used for first point
[cpX, cpY, x, y] for quadratic curve to with a single control point followed by the destination point
[cp1X, cp1Y, cp2X, cp2Y, x, y] for Bezier curve to with start and end control points followed by the destination point
// see the ZIM Shape docs (or https://www.createjs.com/docs/easeljs/classes/Graphics) for details on the curves
startLength - |VEE| (default null) for lineType corner or curved, the length the line will start.
should be less than half the line distance (either vertical or horizontal depending on lineOrientation) otherwise ignored
varying this will avoid overlap when used with Connectors - also see endLength
for the corner lineType both can be set but usually one would be set
for the curved lineType the endLength will be chosen over the startLength
endLength - |VEE| (default null) for lineType corner or curved, the length the line will end.
should be less than half the line distance (either vertical or horizontal depending on lineOrientation) otherwise ignored
varying this will avoid overlap when used with Connectors - also see startLength
for the corner lineType both can be set but usually one would be set
for the curved lineType the endLength will be chosen over the startLength
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly
METHODS
setPoints(a, b, c, d) - pass in two ZIM Points or four numbers to set start points and end points or an array of points
this will not change the x and y of the shape
also see startPoint, endPoint, startX, startY, endX, endY properties
if an array is used the points are remade like when made with the points parameter
from(a, b, localToLocal) - pass in a ZIM Point or two numbers to set the start point
if a DisplayObject is passed in then it will locate the point adjusting for coordinate space (unless localToLocal is false)
to(a, b, localToLocal) - pass in a ZIM Point or two numbers to set the end point
if a DisplayObject is passed in then it will locate the point adjusting for coordinate space (unless localToLocal is false)
setColorRange(color1, color2) - set a color range for shape - used by colorRange property - returns obj for chaining
if one color is used, the current color is used and color1 is the second color in the range
cache(see Container docs for parameter description) - overrides CreateJS cache() and returns object for chaining
Leave parameters blank to cache bounds of shape (plus outer edge of border if borderWidth > 0)
hasProp(property as String) - returns true if property exists on object else returns false
clone(exact) - makes a copy of the shape
exact (default false) ZIM VEE (Pick) values are active in clones unless exact is set to true
For instance, if the object's color is [blue, green]
then its clone might be blue or green - which could be different than the original
If exact is set to true then the clone will be the color of the original object
cloneAll(exact style, group, inherit) - copies shape and any custom content in shape - experimental - usually shapes do not have content (use a Container)
exact (default false) in theory will copy ZIM VEE values as they are in the original
see main class for style, group, inherit parameters
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection
ALSO
ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO
see the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.
PROPERTIES
type - holds the class name as a String
** below will not change the x and y of the shape
** if points is being used: length, startPoint, start and end X and Y, endPoint and angle are ignored - use the point property
length - gets or sets the length of the line - will grow from its registration point
startPoint - (ZIM Point or x,y object) get or set the start point
startX - get or set the start x point - allows for animation
startY - get or set the start y point - allows for animation
endPoint - (ZIM Point or x,y object) get or set the end point
endX - get or set the end x point - allows for animation
endY - get or set the end y point - allows for animation
startHead - get or set the start head - see startHead parameter
endHead - get or set the end head - see endHead parameter
startLength - get or set the start length of the line (see startLength parameter)
endLength - get or set the end length of the line (see endLength parameter)
angle - gets (not sets) the current angle relative to the line (does not include line rotation)
points - get and set the points array (see points parameter) - ignoring all settings above
** above will not change the x and y of the shape
shape - gives access to the line shape
color - get and set the fill color
colorRange - if setColorRange() is used, the colorRange is a ratio (0-1) between the colors
setting the colorRange will change the color property of the shape
for instance, shape.setColorRange(blue, pink) then shape.colorRange = .5
will set the color of the shape to half way between blue and pink
shape.animate({color:red}, 1); is a shortcut to animate the colorRange
shape.wiggle("colorRange", .5, .2, .5, 1, 5) will wiggle the colorRange
colorCommand - access to the CreateJS fill command for bitmap, linearGradient and radialGradient fills
depreciated - see ZIM GradientColor, RadialColor and BitmapColor
thickness - get and set the stroke size in pixels
thicknessCommand - access to the CreateJS stroke style command (width, caps, joints, miter, ignoreScale)
See: https://www.createjs.com/docs/easeljs/classes/Graphics.StrokeStyle.html
dashed - get and set the dashed - use true / false or an array (see dashed parameter)
dashedOffset - get and set the offset of the dash (50 default) - can animate this property for a marquee effect
borderDashedCommand - access to the CreateJS stroke dashed command (segments, offset)
see https://www.createjs.com/docs/easeljs/classes/Graphics.StrokeDash.html
lineType - read only access to type of line "straight", "corner", "curve"
lineOrientation - get or set the lineOrientation to AUTO, HORIZONTAL or VERTICAL - see Line params for info
mouseChildren - set to false to avoid dragging the shape inside
to drag or interact with objects inside then set mouseChildren to true
veeObj - an object with ZIM VEE original parameters:value allowing the ZIM VEE values to be referenced
for instance, obj.prop = Pick.choose(obj.veeObj.prop); will reset the the prop to the result of the original ZIM VEE value
ALSO
see ZIM Container for properties such as:
width, height, widthOnly, heightOnly, draggable, level, depth, group
blendMode, hue, saturation, brightness, contrast, etc.
ALSO
see the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.
EVENTS
See the CreateJS Easel Docs for Container events such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover
CLOSE ▲PAGE ▤CODE ▤VIDS
Squiggle
zim class - extends a zim.Container which extends a createjs.Container
DESCRIPTION
Makes a squiggly line with a number of points.
The points have Bezier controls - little handles that change the shape of the line.
The type of control can be specified overall and individually - and can be hidden or shown
The type of control can be changed by double clicking the point - colors of the handles will change
Points can be added by clicking on the line or removed by SHIFT clicking a point.
CTRL Z will undo adding or removing a point
The shape of the line can be recorded with the recordData() method and recreated with the setData() method
The Squiggle is set by default to show and hide controls when clicked
It is also draggable by default when the controls are showing
It can be set to copy with a shift click
SEE: https://www.youtube.com/watch?v=P2hDe5JCINY for Blob and Squiggle Basics
SEE: https://zimjs.com/paths/ to make points for Blob and Squiggle
MULTIPLE SELECT
Multiple points can be selected with the CTRL key held and then dragged
or moved with the keyboard arrows (moves 10 pixels with shift key down)
NOTE
mouseChildren is turned to false for all zim Shape containers.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
new Squiggle().center(); // makes a line with default 4 points with Bezier controls
EXAMPLE
new Squiggle({points:2, controlType:"none"}).pos(100,100); // makes a diagonal straight line that is editable
// there are so many examples for Blob and Squiggle
// see https://www.youtube.com/watch?v=P2hDe5JCINY
// Add a new second smaller part to the Squiggle
// reverse points from right to left and animate along Squiggle
const s1 = new Squiggle({showControls:false}).center();
const s2 = new Squiggle()
.transformPoints("scale", .5)
.transformPoints("x", s1.width);
s.appendPoints(s2.points).reversePoints();
new Circle(10).addTo().animate({path:s1}, 5);
EXAMPLE
// split Squiggle and change color of second part
const s1 = new Squiggle().center();
const s2 = s1.splitPoints(2);
s2.color = red;
EXAMPLE
// split Blob into Squiggles
const b1 = new Blob().center();
const s1 = b1.makeSquiggle(0).loc(b1);
const s2 = s1.splitPoints(2).loc(b1);
s2.color = red;
b1.removeFrom();
// // and put back again
// s1.appendPoints(s2.points, "mirror");
// const b2 = s1.makeBlob().loc(s1);
// b2.color = blue;
// b2.borderColor = null;
// s1.removeFrom();
// s2.removeFrom();
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports VEE - parameters marked with ZIM VEE mean a zim Pick() object or Pick Literal can be passed
Pick Literal formats: [1,3,2] - random; {min:10, max:20} - range; series(1,2,3) - order, function(){return result;} - function
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
color - |ZIM VEE| (default green) the line color as any CSS color including "rgba()" for alpha
thickness - (default 2) the thickness of the line in pixels
points - (default 5) a number of points to start with to make the shape
OR an SVG path like: points:"M0,129.5c22,0,40-31,40-41c0-8-3.2-13-10-13" etc. (also see SVGContainer)
OR an array of points as follows - https://zimjs.com/paths has a tool to make points in this format
[[controlX, controlY, circleX, circleY, rect1X, rect1Y, rect2X, rect2Y, controlType], [etc]]
controlX and controlY - the x and y location of the control Container which holds the point circle and the two control rectangles
rect1X, rect1Y, rect2X, rect2Y - (default based on controlLength) the x and y location of the control rectangles relative to the control location
circleX and circleY - (default 0) the x and y location of the circle relative to the control location (usually 0, 0)
controlType - (default main controlType parameter or "straight" if not controlType parameter) the point's controlType "none", "mirror", "straight" or "free"
custom points will start with approximateBounds() called
but approximateBounds() must be called manually anytime afterwards when new bounds are desired.
length - (default 300) the default length of line used to create the squiggle (also specifies the squiggle's bounds(0, 0, length, thickness))
controlLength - |ZIM VEE| (default radius*numPoints/4) specify a Number to override the calculated default
controlType - (default "straight") one of four String values as follows:
none - there are no control rectangles (they are actually set at 0,0). This makes a corner at the circle point.
mirror - the control rectangles reflect one another about the point circle - lengths are kept even
straight - the control rectangles keep a straight line through the point circle but length is independent
free - the control rectangle moves independently from the other control rectangle
** The controlType can be specified for each point - see the points parameter
** The controlType can be changed by doubleClicking the point circle to cycle through the controls in the order above - unless the lockControlType is set to true
lockControlType - (default false) set to true to disable doubleClicking of point circles to change controlType
showControls - (default true) set to false to start with controls not showing - can change this after with controlsVisible property or showControls() and hideControls() methods
lockControls - (default false) set to true to lock the editing of controls - can't move the points or handles - but can see them if showControls is set to true
handleSize - (default 20 mobile 10 for non-mobile) the size of control boxes and affects the circles too proportionally
allowToggle - (default true) set false to let turn off clicks showing and hiding controls
move - (default true) set to false to disable dragging when controls are showing
can also set to "always" to allow movement when controls are not showing
dashed - (default false) set to true for dashed border (if borderWidth or borderColor set)
or set to an array of line size then space size, etc.
eg. [20, 10] is 20 line and 10 space repeated and [20,100,50,10] is 20 line, 100 space, 50 line, 10 space, etc.
onTop - (default true) set to false to not bring shape to top of container when dragging
circleColor - (default light) set the circle color of the controls
circleBorderColor - (default dark) set the circle border color of the controls
stickColor - (default darker) set the stick color of the controls
stickThickness - (default 1) set the stick thickness of the controls
selectColor - (default white) the color of the selected circle or rectangle of the controls if selectPoints is true
selectPoints - (default true) set to false to not allow point controls to be selected for keyboard control
editPoints - (default true) lets user add points by pressing on shape path or remove points by shift click or hold
set to "anywhere" to let users add points anywhere - will add points with controlType:"none"
set to false to not allow adding or removing points with shift click or hold
interactive - (default true) set to false to turn off controls, move, toggle, select, edit - leaving just the shape
strokeObj - (default {caps:"butt", joints:"miter", miterLimit:10, ignoreScale:false}) set to adjust stroke properties
caps options: "butt", "round", "square" or 0,1,2
joints options: "miter", "round", "bevel" or 0,1,2
miterLimit is the ration at which the mitered joint will be clipped
ignoreScale set to true will draw the specified line thickness regardless of object scale
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly
METHODS
approximateBounds(num, showPoints, margin) - update the bounds based on a Rectangle
that surrounds the number of points (default 80) distributed around the object path
set showPoints to true to draw little dots on points
margin increases (or if negative decreases) the bounds on all sides by the margin
use outline() after object has been added to the stage to see the bounds
Squiggles with custom points will start with approximateBounds() called
but approximateBounds() must be called manually anytime afterwards when new bounds are desired.
addPoint(percent, controlType) - add a point at a percent (100) of the total curve
this is handy to make path have the same number of points for animate() path tweens
controlType can be as specified in main points parameter
returns index of new point
addPoints(num, controlType, startPoint, spread, dataOnly, points, even) - add num points between existing points
controlType can be as specified in main points parameter
specify a startPoint to add points between the startPoint and the next point (one segment of points)
spread (default false) set to true to spread points evenly around path rather than evenly between segments
dataOnly and points are used internally
returns object for chaining
removePoint(index) - remove a point at the specified index
interpolate(num, startPoint, spread, points, even) - get point data {x,y} for existing points and num (default 1) points inbetween
used with hitTestPath() and animate() drag on path - also add points (note add points does not use even:true)
specify a startPoint to get points between the startPoint and the next point (one segment of points)
spread (default false) set to true to spread number of points around path rather equal number between segments
points (default all points) the points to work with in the same format as the points property
even (default false) set to true to use zim.Bezier() with even turned on for even percentage distribution
returns an array of point objects with x, y properties and an r property for ratio of distance along path
recordData(toJSON) - returns an object with x, y, points, color, borderColor, borderWidth, move, toggle, controls PROPERTIES to be used with setData() method
if toJSON (default false) is set to true, the return value is a JSON string
the points data comes from the points property
setData(data, fromJSON) - sets the properties to match the data object passed in - this should come from recordData()
if fromJSON (default false) is set to true, it will assume a JSON string is passed in as data
the points data is parsed with the set setPoints() so the number of points should be the same
returns object for chaining
getPoints(popup) - returns an array with the same format as the points parameter - or can just use points property - also recordPoints() for backwards compatibility
popup - (default false) set to true to open a zim Pane (squiggle.pane) with the points in a zim TextArea (squiggle.textArea) (click off to close)
NOTE: the TextArea output uses JSON.stringify() - to add the points to the points parameter of the Squiggle use JSON.parse(output);
NOTE: using zog(JSON.stringify(squiggle.recordData()))... the console will remove the quotes from the controlTypes so those would have to be manually put back in before parse() will work
also see points property
setPoints(data) - sets the Squiggle points to the data from getPoints
this does not remake the Squiggle but rather shifts the controls so the number of points should be the same
also see points property
changeControl(index, type, rect1X, rect1Y, rect2X, rect2Y, circleX, circleY, update) - change a control type and properties at an index
accepts ZIM DUO normal parameters or configuration object literal with parameter names as propterties
passing in null as the index will change all points to the specified properties
the update parameter defaults to false so set to true to show update or call update() below
this is so multiple changes can be batched before calling update - for instance when animating blobs.
transformPoints(transformType, amount, x, y, approximateBounds) - scale, rotate, move points without affecting controls or borderWidth - returns object for chaining
transformType - String any of: "scale", "scaleX", "scaleY", "rotation", "x", "y"
amount - the amount to transform
x, y - (default 0, 0) the x and y position to transform about
approximateBounds defaults to true - set to false to not call approximateBounds after transforming points
reversePoints() - reverse the order of the points
this also swaps each rectangle in the Bezier controls
also see the Code module for reversePoint(points) function to operate on data points in Squiggle format
appendPoints(points, controlType) - add points at end of points - updates Squiggle
it is assumed that the first point of the new points is in the same place as the last point of the Squiggle
by default these will transfer control types but can override with controlType
this will not have immediate effect but will be triggered when the joining point handle is moved
prependPoints(points, controlType) - add points at start of points - updates Squiggle
it is assumed that the last point of the new points is in the same place as the first point of the Squiggle
by default these will transfer control types but can override with controlType
this will not have immediate effect but will be triggered when the joining point handle is moved
splitPoints(index) - breaks the Squiggle into two Squiggles at the index (length / 2)
the original Squiggle is the first Squiggle
returns a reference to the second Squiggle
makeBlob(controlType, mergeDist) - makes a new Blob from the Squiggle
returns the new Blob - the Squiggle remains unchanged so may need to remove it
controlType (default "free" if not merged and "mirror" if merged)
controlType for the joined end points - also see mergeDist below
this will not change the control sticks until their handles are dragged
mergeDist (default 5) merges overlapping end points (within this pixel distance)
update(normalize) - update the Squiggle if animating control points, etc. would do this in a Ticker
set normalize (default false) to true to use pointsAdjusted for rotated and scaled points
and if animating along the path after setting rotation or scale on point
just leave out if only animating points
showControls() - shows the controls (and returns squiggle) also see controlsVisible property
hideControls() - hides the controls (and returns squiggle) also see controlsVisible property
toggle(state - default null) - shows controls if hidden and hides controls if showing (returns the object for chaining)
or pass in true to show controls or false to hide controls
traverse(obj, start, end, time) - animates obj from start point to end point along path - thanks KV for the thought!
set start point greater than end point to traverse backwards
will dispatch a "traversed" event when done
setColorRange(color1, color2) - set a color range for shape - used by colorRange property - returns obj for chaining
if one color is used, the current color is used and color1 is the second color in the range
getPointAngle(index) - gets the angle made by the tangent at the index provided
getSegmentPoint(point1, point2) - returns an array of [point1, controlPoint1, controlPoint2, point2]
used internally for animating to path and adding removing Bezier points
getAdjacentSegmentData(index) - returns an array of two arrays:
The first is an array of cubic Bezier points for segments adjacent and including the provided point index
each element is in the form of [point1, controlPoint1, controlPoint2, point2]
The second is an array of starting point indexes for the segments that were tested
used internally to drag an animation along the path
getCurvePoint(ratio, segmentRatios, segmentPoints, getAngle) gets a point along whole curve at the ratio (0-1) provided
along with x and y values, the point has a z value that is the index of the squiggle point before the calculated point
if the getAngle parameter is true (default false) the point also has an angle property which is the angle of the tangent at the point
ratio is 0-1 with 0 being at the first point and 1 being at the end of the last segment
segmentRatios and segmentPoints will be calculated if not provided
used internally for animating along the path - if lockControls is true, only animate will precalculate these values
linearGradient([colors],[ratios], x0,y0, x1,y1) - shortcut to thicknessCommand linearGradient method (see properties below)
radialGradient([colors],[ratios], x0,y0,radius0, x1,y1,radius1) - shortcut to thicknessCommand radialGradient method (see properties below)
cache(see Container docs for parameter description) - overrides CreateJS cache() and returns object for chaining
Leave parameters blank to cache bounds of shape (plus outer edge of border if borderWidth > 0)
hasProp(property as String) - returns true if property exists on object else returns false
clone(exact, commands) - makes a copy of the object
exact (default false)
ZIM VEE (Pick) values are active in clones unless exact is set to true
For instance, if the object's color is [blue, green]
then its clone might be blue or green - which could be different than the original
If exact is set to true then the clone will be the color of the original object
commands (default false) makes clones with current color and borderColor commands of object
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection
ALSO
ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO
see the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.
PROPERTIES
type - holds the class name as a String
shape - gives access to the shape of the squiggle
color - get and set the fill color
colorRange - if setColorRange() is used, the colorRange is a ratio (0-1) between the colors
setting the colorRange will change the color property of the shape
for instance, shape.setColorRange(blue, pink) then shape.colorRange = .5
will set the color of the shape to half way between blue and pink
shape.animate({color:red}, 1); is a shortcut to animate the colorRange
shape.wiggle("colorRange", .5, .2, .5, 1, 5) will wiggle the colorRange
circleColor - get or set the circle color of the controls - requires an update() to see changes
circleBorderColor - get or set the circle borderColor of the controls - requires an update() to see changes
stickColor - get or set the stickColor - requires an update() to see changes
colorCommand - access to the CreateJS fill command for bitmap, linearGradient and radialGradient fills
eg. shape.colorCommand.linearGradient([green, blue ,green], [.2, .5, .8], 0, 0, shape.width, 0)
See: https://www.createjs.com/docs/easeljs/classes/Graphics.Fill.html
thickness - get and set the stroke size in pixels
thicknessCommand - access to the CreateJS stroke style command (width, caps, joints, miter, ignoreScale)
See: https://www.createjs.com/docs/easeljs/classes/Graphics.StrokeStyle.html
dashed - get and set the dashed - use true / false or an array (see dashed parameter)
dashedOffset - get and set the offset of the dash (50 default) - can animate this property for a marquee effect
dashedCommand - access to the CreateJS stroke dashed command (segments, offset)
see https://www.createjs.com/docs/easeljs/classes/Graphics.StrokeDash.html
num - get the number of points - to set, use the points property
points - get or set the points array of the Squiggle in the same format as the points parameter:
[[controlX, controlY, circleX, circleY, rect1X, rect1Y, rect2X, rect2Y, controlType], [etc]]
also see getPoints(popup) and setPoints() methods
pointsAdjusted - get points with any point rotation converted to 0 - see update(true)
pointControls - get an array of controls (a container) - use this to animate controls
pointCircles - get an array of control circles - use this to place some other object at the point
pointObjects - get an array of point objects for each point in the following format:
[[control, circle, rect1, rect2, controlType], [etc.]]
control - the container for the control that holds the circle and rectangles (also see pointControls)
circle - the control point circle (also see pointCircles)
rect1 - the first control point rectangle
rect2 - the second control point rectangle
controlType - the control type: default is "straight" (or null) and there is also "mirror", "free" and "none"
NOTE: control, circle, rect1, rect2 can be positioned or animated and controlType can be changed
NOTE: the update() method must be called if manually changing the control positions or type
NOTE: if constantly animating the controls then use a Ticker.add(function(){squiggle.update();})
NOTE: also see recordData(), setData(), getPoints(), setPoints() methods for further options
addPointFactor - (default 20) used when placing new points along edge (editPoints is true)
divides the distance between points by this amount - the smaller the more accurate but also slower
addMinDistance - (default 15) edge press needs to be within this distance to add a point to the edge
segmentPoints - a read-only array of cubic Bezier points for each segment
each element is in the form of [point1, controlPoint1, controlPoint2, point2]
used internally to animate to the path and add and remove Bezier points
segmentRatios - a read-only array of cumulative ratio lengths of segments
for instance the default five points (four segments) is [.25, .5, .75, 1]
used internally to animate to the path and attribute proportional time to each segment
controls - access to the container that holds the sets of controls
each control is given a read-only num property
sticks - access to the Shape that has the control sticks
lastSelected - access to the last selected (or created) control container
lastindex - the index number of the last selected controls
controlsVisible - get or set the visibility of the controls - or use showControls() and hideControls()
toggled - read-only Boolean property as to whether picker is showing
types - get or set the general array for the types ["mirror", "straight", "free", "none"]
changing this or removing a type will adjust the order when the user double clicks the points to change their type
this is not an array of types for each point - see the points property to access the types of each point
lockControls - Boolean to lock controls from being adjusted or not
lockControlType - Boolean to lock the type of the controls in their current state or not
allowToggle - Boolean to get or set clicking to show and hide controls
move - Boolean to drag or not drag Squiggle when controls are showing
can also set to "always" to allow movement when controls are not showing
onTop - get or set the onTop
selectPoints - get or set whether points can be selected
interactive - get or set whether the shape is interactive - toggle, move, change or add controls, etc.
keyFocus - get or set the keyboard focus on the DisplayObject - see also zim.KEYFOCUS
will be set to true if this DisplayObject is the first made or DisplayObject is the last to be used with keyboard
veeObj - an object with ZIM VEE original parameters:value allowing the ZIM VEE values to be referenced
for instance, obj.prop = Pick.choose(obj.veeObj.prop); will reset the the prop to the result of the original ZIM VEE value
ALSO
see ZIM Container for properties such as:
width, height, widthOnly, heightOnly, draggable, level, depth, group
blendMode, hue, saturation, brightness, contrast, etc.
ALSO
see the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.
EVENTS
dispatches a "change" event for when the bezier controls are adjusted (pressup only)
if monitoring constant change is needed add a pressmove event to Squiggle.controls
the change event object has a transformType property with values of "move", "bezierPoint", "bezierHandle", "bezierSwitch"
dispatches "controlsshow" and "controlshide" events when clicked off and on and toggle is true
dispatches an "update" event if the points are changed or a point is added or removed
this removes all listeners on the old shape and controls
so any custom listeners on shape and controls will need to be re-applied - use the update event to do so
dispatches a "traversed" event when traverse() is done - the event object has an obj property for the traversing object
See the CreateJS Easel Docs for Container events such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover
MORE
https://zimjs.com/squigglehttps://www.youtube.com/watch?v=BA1bGBU4itI&list=PLCIzupgRt1pYtMlYPtNTKCtztFBeOtyc0
Note the points property has been split into points and pointObjects (and there have been a few property changes) since the time of the video
CLOSE ▲PAGE ▤CODE ▤TOUR😊VIDS
Blob
zim class - extends a zim.Container which extends a createjs.Container
DESCRIPTION
Makes a blob shape inside a container using a number of points.
The points have Bezier controls - little handles that change the shape of the Blob.
The type of control can be specified overall and individually - and can be hidden or shown
The type of control can be changed by double clicking the point - colors of the handles will change
Points can be added by clicking on the shape or removed by SHIFT clicking a point.
CTRL Z will undo adding or removing a point
The shape of the Blob can be recorded with the recordData() method and recreated with the setData() method
The Blob is set by default to show and hide controls when clicked
It is also draggable by default when the controls are showing
SEE https://zimjs.com/paths for a tool to make Blob and Squiggle shapes
SEE https://www.youtube.com/watch?v=P2hDe5JCINY for Basics Video
MULTIPLE SELECT
Multiple points can be selected with the CTRL key held and then dragged
or moved with the keyboard arrows (moves 10 pixels with shift key down)
NOTE
mouseChildren is turned to false for all zim Shape containers.
NOTE
with the ZIM namespace zns = false, this overwrites a JS Blob - so the JS Blob is stored as document.Blob
NOTE
if using Rive and Blobs, sometimes Rive apps use embedded images that need the JavaScript Blob()
ZIM disables Blob until the Rive app is loaded. Possibly this could conflict with a ZIM Blob
being made at the same time as the Rive app. In that case, use zim.Blob() for the blob.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
new Blob().center(); // makes a circle with default 4 points with Bezier controls
EXAMPLE
new Blob({
points:12, // 12 points for more complex shape
}).center();
EXAMPLE
new Blob({
color:purple,
controlType:"free", // free will be default control type (rather than "straight")
points:[
// the control position x, y
// then three point positions inside the control - so relative to the control position
// 1. circle position x, y (usually the same as the control position - so 0,0)
// 2. the location of the first control rectangle x and y
// 3. the location of the second control rectangle x and y
// then an optional specific type of control that overrides the controlType parameter (or the default type of "straight")
[-100,-100,-100,100,100,-100,0,0,"mirror"], // this will be type "mirror"
[100,-100,100,0,-50,0], // this will be type "free" because controlType parameter
[100,100], // these will be type "none" because no dimensions (or dimensions 0) specified for controls
[-100,100]
]
}).centerReg();
EXAMPLE
// Transform the original points of a Blob
// If you rotate or scale, this affects the control points - the little rectangles rotate or they scale
// To avoid this, the points themselves can be transformed (scaleX, scaleY, scale, rotation, x, y)
// This makes a square and scales it bigger without affecting control size or stroke size (if there were a stroke)
// Note the default number of points is 4 but they are arranged at the top, bottom and sides - so would make a diamond with just controlType:"none"
new Blob({controlType:"none"}).transformPoints("rotation", 45).transformPoints("scale", 2).center();
EXAMPLE
// make a Blob the shape of basic ZIM shapes
// this overrides the path parameter
new Blob({points:"circle"}).pos(200,200);
new Blob({points:new Rectangle(100,200)}).center();
new Blob({points:new Triangle()}).transformPoints("rotation", 90).pos(50,50,true,true);
// Animate one Blob into another
const targetBlob = new Blob({points:"rectangle"});
const blob = new Blob({radius:50, points:"circle", interactive:false})
.pos(200,200)
.transformPoints("rotation", -45) // to better tween to rectangle
.animate({
props:{shape:targetBlob},
time:1,
rewind:true,
loop:true
});
EXAMPLE
// split Blob into Squiggles
const b1 = new Blob().center();
const s1 = b1.makeSquiggle(0).loc(b1);
const s2 = s1.splitPoints(2).loc(b1);
s2.color = red;
b1.removeFrom();
// // and put back again
// s1.appendPoints(s2.points, "mirror");
// var b2 = s1.makeBlob().loc(s1);
// b2.color = blue;
// b2.borderColor = null;
// s1.removeFrom();
// s2.removeFrom();
EXAMPLE
// Split a blob into two blobs
const blobs = new Blob().center().splitBlob(1,3);
blobs[0].color = blue;
// or with points - cuts diagonally across blob
const blobs = new Blob().center().splitBlob(new Point(0,0), new Point(W,H));
blobs[0].color = blue;
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports VEE - parameters marked with ZIM VEE mean a zim Pick() object or Pick Literal can be passed
Pick Literal formats: [1,3,2] - random; {min:10, max:20} - range; series(1,2,3) - order, function(){return result;} - function
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
color - |ZIM VEE| (default green) the fill color as any CSS color including "rgba()" for alpha fill (set a to 0 for tranparent fill)
borderColor - |ZIM VEE| (default null) the stroke color
borderWidth - (default 1 if stroke is set) the size of the stroke in pixels
num - get the number of points - to set, use the points property
points - (default 4) a number of points to start with to make the shape
OR a shape string of "circle", "rectangle" or "triangle"
OR a ZIM Circle, Rectangle, Triangle or Flare with any dimensions that will be matched
OR an SVG path like: points:"M0,129.5c22,0,40-31,40-41c0-8-3.2-13-10-13" etc. (also see SVGContainer)
OR an array of points as follows - see https://zimjs.com/paths for a tool to make points in this format:
[[controlX, controlY, circleX, circleY, rect1X, rect1Y, rect2X, rect2Y, controlType], [etc]]
controlX and controlY - the x and y location of the control Container which holds the point circle and the two control rectangles
circleX and circleY - (default 0) the x and y location of the circle relative to the control location (usually 0, 0)
rect1X, rect1Y, rect2X, rect2Y - (default based on controlLength) the x and y location of the control rectangles relative to the control location
controlType - (default main controlType parameter or "straight" if not controlType parameter) the point's controlType "none", "mirror", "straight" or "free"
custom points will start with approximateBounds() called
but approximateBounds() must be called manually anytime afterwards when new bounds are desired.
radius - (default 100) the default radius of the circle used to create the blob (also specifies the blob's bounds(-radius, -radius, radius*2, radius*2))
controlLength - |ZIM VEE| (default radius*numPoints/4) specify a Number to override the calculated default
controlType - (default "straight") one of four String values as follows:
none - there are no control rectangles (they are actually set at 0,0). This makes a corner at the circle point.
mirror - the control rectangles reflect one another about the point circle - lengths are kept even
straight - the control rectangles keep a straight line through the point circle but length is independent
free - the control rectangle moves independently from the other control rectangle
** The controlType can be specified for each point - see the points parameter
** The controlType can be changed by doubleClicking the point circle to cycle through the controls in the order above - unless the lockControlType is set to true
lockControlType - (default false) set to true to disable doubleClicking of point circles to change controlType
showControls - (default true) set to false to start with controls not showing - can change this after with control property or showControls() method
lockControls - (default false) set to true to lock the editing of controls - can't move the points or handles - but can see them if showControls is set to true
handleSize - (default 20 mobile 10 for non-mobile) the size of control boxes and affects the circles too proportionally
If a handleSize of 0 is chosen, then the sticks will disappear too
allowToggle - (default true) set false to let turn off clicks showing and hiding controls
move - (default true) set to false to disable dragging when controls are showing
can also set to "always" to allow movement when controls are not showing
dashed - (default false) set to true for dashed border (if borderWidth or borderColor set)
or set to an array of line size then space size, etc.
eg. [20, 10] is 20 line and 10 space repeated and [20,100,50,10] is 20 line, 100 space, 50 line, 10 space, etc.
onTop - (default true) set to false to not bring shape to top of container when dragging
circleColor - (default light) set the circle color of the controls
circleBorderColor - (default dark) set the circle border color of the controls
stickColor - (default darker) set the stick color of the controls
stickThickness - (default 1) set the stick thickness of the controls
selectColor - (default white) the color of the selected circle or rectangle of the controls if selectPoints is true
selectPoints - (default true) set to false to not allow point controls to be selected for keyboard control
editPoints - (default true) lets user add points by pressing on shape path.
set to "anywhere" to let users add points anywhere - will add points with controlType:"none"
set to false to not allow adding or removing points with click or shift click
interactive - (default true) set to false to turn off controls, move, toggle, select, edit - leaving just the shape
strokeObj - (default {caps:"butt", joints:"miter", miterLimit:10, ignoreScale:false}) set to adjust stroke properties
caps options: "butt", "round", "square" or 0,1,2
joints options: "miter", "round", "bevel" or 0,1,2
miterLimit is the ration at which the mitered joint will be clipped
ignoreScale set to true will draw the specified line thickness regardless of object scale
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly
METHODS
approximateBounds(num, showPoints) - update the bounds based on a Rectangle
that surrounds the number of points (default 80) distributed around the object path
set showPoints to true to draw little dots on points
use outline() after object has been added to the stage to see the bounds
Blobs with custom points will start with approximateBounds() called
but approximateBounds() must be called manually anytime afterwards when new bounds are desired.
addPoint(percent, controlType) - add a point at a percent (100) of the total curve
this is handy to make path have the same number of points for animate() path tweens
controlType can be as specified in main points parameter
returns index of new point
addPoints(num, controlType, startPoint, spread, dataOnly, points, even) - add num points between existing points
controlType can be as specified in main points parameter
specify a startPoint to add points between the startPoint and the next point (one segment of points)
spread (default false) set to true to spread points evenly around path rather than evenly between segments
dataOnly and points are used internally
returns object for chaining
removePoint(index) - remove the point at the specified index
interpolate(num, startPoint, spread, points, even) - get point data {x,y} for existing points and num (default 1) points inbetween
used with hitTestPath() and animate() drag on path - also add points (note add points does not use even:true)
specify a startPoint to get points between the startPoint and the next point (one segment of points)
spread (default false) set to true to spread number of points around path rather equal number between segments
points (default all points) the points to work with in the same format as the points property
even (default false) set to true to use zim.Bezier() with even turned on for even percentage distribution
returns an array of point objects with x, y properties and an r property for ratio of distance along path
recordData(toJSON) - returns an object with x, y, points, color, borderColor, borderWidth, move, toggle, controls PROPERTIES to be used with setData() method
if toJSON (default false) is set to true, the return value is a JSON string
the points data comes from the points property
setData(data, fromJSON) - sets the properties to match the data object passed in - this should come from recordData()
if fromJSON (default false) is set to true, it will assume a JSON string is passed in as data
the points data is parsed with the set setPoints() so the number of points should be the same
returns object for chaining
getPoints(popup) - returns an array with the same format as the points parameter - or can just use points property - also recordPoints() for backwards compatibility
popup - (default false) set to true to open a zim Pane (blob.pane) with the points in a zim TextArea (blob.textArea) (click off to close)
NOTE: the TextArea output uses JSON.stringify() - to add the points to the points parameter of the Blob use JSON.parse(output);
NOTE: using zog(JSON.stringify(blob.recordData()))... the console will remove the quotes from the controlTypes so those would have to be manually put back in before parse() will work
also see points property
setPoints(data) - sets the Blob points to the data from getPoints()
this does not remake the Blob but rather shifts the controls so the number of points should be the same
also see points property
changeControl(index, type, rect1X, rect1Y, rect2X, rect2Y, circleX, circleY, update) - change a control type and properties at an index
accepts ZIM DUO normal parameters or configuration object literal with parameter names as propterties
passing in null as the index will change all points to the specified properties
the update parameter defaults to false so set to true to show update or call update() below
this is so multiple changes can be batched before calling update - for instance when animating blobs.
transformPoints(transformType, amount, x, y, approximateBounds) - scale, rotate, move points without affecting controls or borderWidth - returns object for chaining
transformType - String any of: "scale", "scaleX", "scaleY", "rotation", "x", "y"
amount - the amount to transform
x, y - (default 0, 0) the x and y position to transform about
approximateBounds defaults to true - set to false to not call approximateBounds after transforming points
reversePoints(sameStart) - reverse the order of the points
sameStart defaults to true and will keep the start point the same
set to false to make the last point before the start point, the start point
This also swaps each rectangle in the Bezier controls
also see the Code module for reversePoint(points) function to operate on data points in Squiggle format
Note: reversing blob points with the reversePoints function will make the starting point the last point
makeSquiggle(index) - create a new Squiggle by cutting blob at index (default 0)
returns the new Squiggle - the blob remains unchanged - so may need to remove it
splitBlob(a, b, num, clean) - split a Blob into two blobs - returns an array with each blob
this uses makeSquiggle() then splitPoints() to split squiggle then makeBlob() to make two blobs
a - (default 0) an index of the blob - or an object with an x and y property (read globally)
note - if using x, y points, these points do not have to be on the Blob - and they are global
b - (default Math.ceil(num points / 2)) an index of the blob - or an object with an x and y property (read globally)
num - (default 50) if points are used, this is how many points to add along the line between points to estimate cut point
clean - (default true) remove original blob - set to false to not remove
update(normalize) - update the Blob if animating control points, etc. would do this in a Ticker
set normalize (default false) to true to use pointsAdjusted for rotated and scaled points
use true for manually editing points after setting rotation or scale on point
just leave out if only animating points
showControls() - shows the controls (and returns blob) - or use blob.controlsVisible = true property
hideControls() - hides the controls (and returns blob) - or use blob.controlsVisible = false property
toggle(state - default null) - shows controls if hidden and hides controls if showing (returns the object for chaining)
or pass in true to show controls or false to hide controls
traverse(obj, start, end, time) - animates obj from start point to end point along path - thanks KV for the thought!
set start point greater than end point to traverse backwards
will dispatch a "traversed" event when done
setColorRange(color1, color2) - set a color range for shape - used by colorRange property - returns obj for chaining
if one color is used, the current color is used and color1 is the second color in the range
getPointAngle(index) - gets the angle made by the tangent at the index provided
getSegmentPoint(point1, point2) - returns an array of [point1, controlPoint1, controlPoint2, point2]
used internally for animating to path and adding removing Bezier points
getAdjacentSegmentData(index) - returns an array of two arrays:
The first is an array of cubic Bezier points for segments adjacent and including the provided point index
each element is in the form of [point1, controlPoint1, controlPoint2, point2]
The second is an array of starting point indexes for the segments that were tested
used internally to drag an animation along the path
will wrap around the blob if needed
getCurvePoint(ratio, segmentRatios, segmentPoints, getAngle) gets a point along whole curve at the ratio (0-1) provided
along with x and y values, the point has a z value that is the index of the blob point before the calculated point
if the getAngle parameter is true (default false) the point also has an angle property which is the angle of the tangent at the point
ratio is 0-1 with 0 being at the first point and 1 being at the end of the last segment (the first point)
segmentRatios and segmentPoints will be calculated if not provided
used internally for animating along the path - if lockControls is true, only animate will precalculate these values
linearGradient([colors],[ratios], x0,y0, x1,y1) - shortcut to colorCommand linearGradient method (see properties below)
radialGradient([colors],[ratios], x0,y0,radius0, x1,y1,radius1) - shortcut to colorCommand radialGradient method (see properties below)
cache(see Container docs for parameter description) - overrides CreateJS cache() and returns object for chaining
Leave parameters blank to cache bounds of shape (plus outer edge of border if borderWidth > 0)
hasProp(property as String) - returns true if property exists on object else returns false
clone(exact, commands) - makes a copy of the object
exact (default false)
ZIM VEE (Pick) values are active in clones unless exact is set to true
For instance, if the object's color is [blue, green]
then its clone might be blue or green - which could be different than the original
If exact is set to true then the clone will be the color of the original object
commands (default false) makes clones with current color commands of object
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection
ALSO
ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO
see the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.
PROPERTIES
type - holds the class name as a String
shape - gives access to the shape of the blob
color - get and set the fill color
colorRange - if setColorRange() is used, the colorRange is a ratio (0-1) between the colors
setting the colorRange will change the color property of the shape
for instance, shape.setColorRange(blue, pink) then shape.colorRange = .5
will set the color of the shape to half way between blue and pink
shape.animate({color:red}, 1); is a shortcut to animate the colorRange
shape.wiggle("colorRange", .5, .2, .5, 1, 5) will wiggle the colorRange
colorCommand - access to the CreateJS fill command for bitmap, linearGradient and radialGradient fills
eg. shape.colorCommand.linearGradient([green, blue ,green], [.2, .5, .8], 0, 0, shape.width, 0)
See: https://www.createjs.com/docs/easeljs/classes/Graphics.Fill.html
borderColor - get and set the stroke color
borderColorCommand - access to the CreateJS stroke command for bitmap, linearGradient and radialGradient strokes
See: https://www.createjs.com/docs/easeljs/classes/Graphics.Stroke.html
borderWidth - get and set the stroke size in pixels
borderWidthCommand - access to the CreateJS stroke style command (width, caps, joints, miter, ignoreScale)
See: https://www.createjs.com/docs/easeljs/classes/Graphics.StrokeStyle.html
dashed - get and set the dashed - use true / false or an array (see dashed parameter)
dashedOffset - get and set the offset of the dash (50 default) - can animate this property for a marquee effect
borderDashedCommand - access to the CreateJS stroke dashed command (segments, offset)
see https://www.createjs.com/docs/easeljs/classes/Graphics.StrokeDash.html
circleColor - get or set the circle color of the controls - requires an update() to see changes
circleBorderColor - get or set the circle borderColor of the controls - requires an update() to see changes
stickColor - get or set the stick color of the controls - requires an update() to see changes
points - get or set the points array of the Blob in the same format as the points parameter:
a number, a shape string ("circle", "rectangle", "triangle"), a ZIM Circle, Rectangle, Triangle
or an array as follows:
[[controlX, controlY, circleX, circleY, rect1X, rect1Y, rect2X, rect2Y, controlType], [etc]]
see also getPoints(popup) and setPoints() methods
pointsAdjusted - get points with any point rotation converted to 0 - see update(true)
pointControls - get an array of controls (a container) - use this to animate controls
pointCircles - get an array of control circles - use this to place some other object at the point
pointObjects - get an array of point objects for each point in the following format:
[[control, circle, rect1, rect2, controlType], [etc.]]
control - the container for the control that holds the circle and rectangles (also see pointControls)
circle - the control point circle (also see pointCircles)
rect1 - the first control point rectangle
rect2 - the second control point rectangle
controlType - the control type: default is "straight" (or null) and there is also "mirror", "free" and "none"
NOTE: control, circle, rect1, rect2 can be positioned or animated and controlType can be changed
NOTE: the update() method must be called if manually changing the control positions or type
NOTE: if constantly animating the controls then use a Ticker.add(function(){blob.update();})
NOTE: also see recordData(), setData(), getPoints(), setPoints() methods for further options
addPointFactor - (default 20) used when placing new points along edge (editPoints is true)
divides the distance between points by this amount - the smaller the more accurate but also slower
addMinDistance - (default 15) edge press needs to be within this distance to add a point to the edge
segmentPoints - a read-only array of cubic Bezier points for each segment
each element is in the form of [point1, controlPoint1, controlPoint2, point2]
used internally to animate to the path and add and remove Bezier points
segmentRatios - a read-only array of cumulative ratio lengths of segments
for instance the default four points is [.25, .5, .75, 1]
used internally to animate to the path and attribute proportional time to each segment
controls - access to the container that holds the sets of controls
each control is given a read-only num property
sticks - access to the Shape that has the control sticks
lastSelected - access to the last selected (or created) control container
lastindex - the index number of the last selected controls
controlsVisible - get or set the visibility of the controls - or use showControls() and hideControls()
types - get or set the general array for the types ["mirror", "straight", "free", "none"]
changing this or removing a type will adjust the order when the user double clicks the points to change their type
this is not an array of types for each point - see the points property to access the types of each point
lockControls - Boolean to lock controls from being adjusted or not
allowToggle - Boolean to get or set clicking to show and hide controls
move - Boolean to drag or not drag Blob when controls are showing
can also set to "always" to allow movement when controls are not showing
lockControlType - Boolean to lock the type of the controls in their current state or not
onTop - get or set the onTop property
selectPoints - get or set whether points can be selected
interactive - get or set whether the shape is interactive - toggle, move, change or add controls, etc.
keyFocus - get or set the keyboard focus on the DisplayObject - see also zim.KEYFOCUS
will be set to true if this DisplayObject is the first made or DisplayObject is the last to be used with keyboard
veeObj - an object with ZIM VEE original parameters:value allowing the ZIM VEE values to be referenced
for instance, obj.prop = Pick.choose(obj.veeObj.prop); will reset the the prop to the result of the original ZIM VEE value
ALSO
see ZIM Container for properties such as:
width, height, widthOnly, heightOnly, draggable, level, depth, group
blendMode, hue, saturation, brightness, contrast, etc.
ALSO
see the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.
EVENTS
dispatches a "change" event for when the bezier controls are adjusted (pressup only or moving with keys - thanks Yui Kim for find)
if monitoring constant change is needed add a pressmove event to Blob.sets
the change event object has a transformType property with values of "move", "bezierPoint", "bezierHandle", "bezierSwitch"
dispatches "controlsshow" and "controlshide" events when clicked off and on and toggle is true
dispatches an "update" event if the points are changed or a point is added or removed
this removes all listeners on the old shape and controls
so any custom listeners on shape and controls will need to be re-applied - use the update event to do so
dispatches a "traversed" event when traverse() is done - the event object has an obj property for the traversing object
See the CreateJS Easel Docs for Container events such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover
CLOSE ▲PAGE ▤CODE ▤TOUR😊VIDS
Flare
zim class - extends a zim.Container which extends a createjs.Container
DESCRIPTION
Makes a flare shape - a shape with a gradual widening like flared pants or skirts.
The shape defaults to a horizontal rectangle flared outwardly to the right.
The flare angleA and angleB can be specified at any angle negative or positive.
The flare axis or spine can be at any angle to the horizontal positive in the x.
The cross or end angles can be specified relative to a normal the spine so 0 is -90.
Different color and border options are available and editable as properties.
More than one flare can be created in the same shape - these are called segments.
Multiple Flare objects can be easily combined into a ZIM MultiFlare
and a special FlareBox can be used to place flares or multiFlares around a rectangle
to be used for backings on buttons, pictures, etc.
See https://zimjs.com/ten/flare.html for examples of a 3D wall, a rocket and a button frame
NOTE
mouseChildren is turned to false for all zim Shape containers.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
new Flare().center();
// a Rocket
const rocket = new Flare({
thickness:100,
angles:-90, // all segment angles will point up
lengths:[40,.5,100,150,105],
anglesA:[-20,89,-12,0,-22], // anglesB will be mirrored by default
color:new GradientColor([dark,silver,dark],[.1,.6,.9],-50,0,50,0),
cross:true // add a line at segment borders
}).center();
// see also MultiFlare and FlareBox examples
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
color - (default black) the color of the flare
if null and a border is speficied the color will be transparent
borderColor - (default null) the stroke color
borderWidth - (default 1 if stroke is set) the size of the stroke in pixels
crossAngle - (default 0) the angle from the normal of the spine
so if the spine goes to the right at 0 degrees then 0 crossAngle starts at -90 and goes positive clockwise
a crossAangle of -45 would look like a picture frame bevel
if the flare starts at the top left corner of a rectangle
thickness - (default 20) the thickness at the start of the flare assuming 0 crossAngle
this will be divided evenly to thicknessA on one side of the spine and thicknessB on the other side of the spine
thicknessA - (default null) - will be set to half the thickness if thicknessB is not set otherwise thickness-thicknessB
thicknessB - (default null) - will be set to half the thickness if thicknessA is not set otherwise thickness-thicknessA
pin - (default null) - set to a segment number to set registration point at the start of the segment
Pin is used with MultiFlare to align flares at pinned segments
Pin is used with FlareBox to place pinned segments at any of the four corners of the box
When doing so, the Flare will be automatically rotated (corner number - pin number) * 90
This can be overriden by rotating the flare to the desired rotation after creation
startX - (default 0) shift the start of the flare in the x from the registration point (note, pin will reset registration)
startY - (default 0) shift the start of the flare in the y from the registration point (note, pin will reset registration)
lengths - (default [200]) an array of spine lengths
angles - (default [0]) an array of angles (degrees) for the spines relative to 0 along the positive x axis
anglesA - (default [10]) an array of relative angles to the left of the current spine when heading along the spine
so if the spine heads to the right, angleA is positive from the spine upwards
think of these as how much the shape flares out from the spine on one side
anglesB - (default anglesA) an array of relative angles to the right of the current spine when heading along the spine
so if the spine heads to the right, angleB is positive from the spine downwards
think of these as how much the shape flares out from the spine on another side
anglesEnd - (default [0]) an array of angles at the end of each segment from the normal of each segment spine
so if the spine goes to the right at 0 degrees then a 0 anglesEnd is perpendicular to the spine
an anglesEnd of 45 would look like a picture frame bevel
as the segments are placed around the picture frame clockwise
note: end angles greatly change the look of flared segments
poorly chosen angles can lead to flares crossing or massively diverging
good choices depend on the length of the flares, the spine angles and the flare angles
generally, a trial and error technique is the easiest to find the desired solution
cross - (default true) draw a crossing line at each segment - this draws each segment as a closed path
crossColors - (default null) an array of colors for each segment if cross is true
close - (default false) join the end of the last segment to the start of the first segment
dashed - (default false) set the dashed of the border if the borderColor or borderWidth is specified
strokeObj - (default {caps:"butt", joints:"miter", miterLimit:2, ignoreScale:false}) set to adjust stroke properties
caps options: "butt", "round", "square" or 0,1,2
joints options: "miter", "round", "bevel" or 0,1,2
miterLimit is the ration at which the mitered joint will be clipped
ignoreScale set to true will draw the specified line thickness regardless of object scale
spineColor - (default null) as the spine is drawn, fill the shape it makes with this color
this can create a picture frame effect as the spine color may hide half the flare for each segment
spineBorderWidth - (default null) the width of the spine
spineBorderColor - (default null) the color of the actual spine
spineDashed - (default false) set to true for dashed spine (if spineBorderWidth or spineBorderColor set)
spineStrokeObj - (default strokeObject) see strokeObject parameter for details
closeColor - (default color) the color of the segment created if closing the flare
closeBorderWidth - (default borderWidth) the borderWidth of the closing segment if closing the flare
closeBorderColor - (default borderColor) the borderColor of the closing segment if closing the flare
closeDashed - (default false) set to true for dashed closed segment (if closeBorderWidth or closeBorderColor set)
closeStrokeObj - (default strokeObject) see strokeObject parameter for details
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly
METHODS
add(lengths, angles, anglesA, anglesB, anglesEnd, cross, crossColors, close) |ZIM DUO| - add segment(s) to the Flare - returns object for chaining
see segment parameters for details - returns object for chaining
remake() - remake the Flare segments after setting properties
hasProp(property as String) - returns true if property exists on object else returns false
clone(exact) - makes a copy of the shape
exact (default false) ZIM VEE (Pick) values are active in clones unless exact is set to true
For instance, if the object's color is [blue, green]
then its clone might be blue or green - which could be different than the original
If exact is set to true then the clone will be the color of the original object
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection
ALSO
ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO
see the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.
PROPERTIES
type - holds the class name as a String
shape - access to the ZIM Shape for the flare(s)
spineShape - access to the ZIM Shape for the spine if spine is true
closeShape - access to the ZIM Shape for the closing segment if close is true
pin - get or set the pin number - which spine has the registration point
see the pin parameter for more details
points - access to array of flare shape points {x,y}
if not close - around outside then around inside
if close - around each segment
pinPoints - access to array of spine points {x,y} and then to final end spine point
color - get and set the fill color
colorRange - if setColorRange() is used, the colorRange is a ratio (0-1) between the colors
setting the colorRange will change the color property of the shape
for instance, shape.setColorRange(blue, pink) then shape.colorRange = .5
will set the color of the shape to half way between blue and pink
shape.animate({color:red}, 1); is a shortcut to animate the colorRange
shape.wiggle("colorRange", .5, .2, .5, 1, 5) will wiggle the colorRange
borderColor - get and set the stroke color
borderWidth - get and set the stroke size in pixels
borderDashedCommand - access to the CreateJS stroke dashed command (segments, offset)
see https://www.createjs.com/docs/easeljs/classes/Graphics.StrokeDash.html
closeColor - get and set the fill color of the close segment
closeBorderColor - get and set the stroke color of the close segment
closeBorderWidth - get and set the stroke size in pixels of the close segment
closeBorderDashedCommand - access to the CreateJS stroke dashed command (segments, offset)
see https://www.createjs.com/docs/easeljs/classes/Graphics.StrokeDash.html
spineColor - get and set the fill color of the spine shape
spineBorderColor - get and set the stroke color of the spine shape
spineBorderWidth - get and set the stroke size in pixels of the spine shape
spineBorderDashedCommand - access to the CreateJS stroke dashed command (segments, offset)
see https://www.createjs.com/docs/easeljs/classes/Graphics.StrokeDash.html
** the following properties can be read or changed
** if changed, the remake() method must be run to see changes
** see the Flare parameters for definitions
thicknessA - number
thicknessB - number
cross - boolean
close - boolean
lengths - array
angles - array
anglesA - array
anglesB - array
anglesEnd - array
crossColors - array
mouseChildren - set to false to avoid dragging the shape inside
to drag or interact with objects inside then set mouseChildren to true
ALSO
see ZIM Container for properties such as:
width, height, widthOnly, heightOnly, draggable, level, depth, group
blendMode, hue, saturation, brightness, contrast, etc.
ALSO
see the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.
EVENTS
See the CreateJS Easel Docs for Container events such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover
CLOSE ▲PAGE ▤CODE ▤VIDS
MultiFlare
zim class - extends a zim.Container which extends a createjs.Container
DESCRIPTION
Joins multiple Flare objects in one container
at the pin points of the flares or end to end.
See also ZIM Flare and ZIM FlareBox.
NOTE
mouseChildren is turned to false for all zim Shape containers.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// a fan of legs with feet!
const flare = new Flare({lengths:[100,100,20,8],anglesA:[5,-5,60],anglesB:[5,-5,0]})
const multi = new MultiFlare().center();
loop(12, i=>{
multi.add(flare.rot(i*360/12))
});
// or prepare flares and angles ahead of time
const flares = [];
const angles = [];
loop(12, i=>{
flares.push(flare.clone());
angles.push(i*360/12);
});
new MultiFlare(flares, null, angles).center();
// a ring of beads using endToEnd
const flare = new Flare({crossAngle:-360/12, lengths:[50,20,5,20,50],anglesA:[5,60,0,-60,-5]})
const flares = [];
const angles = [];
loop(12, i=>{
flares.push(flare.clone());
angles.push(i*360/12);
});
new MultiFlare(flares, null, angles, true).center();
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
flares - (default null) an array of ZIM Flares objects to add - also see add() method
pins - (default null) an array of pin indexes for the flares
pins will set the registration point for each flare at whatever segment matches the pin index
angles - (default null) an array angles for the flares
endToEnd - (default false) set to true to locate each first segment point of the flare at the last segment point of the last flare
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly
METHODS
add(flares) - add an array of flares or a single flare to MultiFlare
add() redraws the whole flare so for many, make an array to start and pass it in as an argument
remove(flares) - remove an array of flares or a single flare to MultiFlare
remove() redraws the whole flare so for many, make an array to start and pass it in as an argument
cache(see Container docs for parameter description) - overrides CreateJS cache() and returns object for chaining
Leave parameters blank to cache bounds of shape (plus outer edge of border if borderWidth > 0)
hasProp(property as String) - returns true if property exists on object else returns false
clone() - makes a copy of the multiFlare cloning the flares too
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection
ALSO
ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO
see the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.
PROPERTIES
type - holds the class name as a String
** can get and change the following properties
** see the paremeters for details
** if properties are changed call the remake() method to update the MultiFlare
flares - array
pins - array
angles - array
endToEnd - boolean
mouseChildren - set to false to avoid dragging the shape inside
to drag or interact with objects inside then set mouseChildren to true
ALSO
see ZIM Container for properties such as:
width, height, widthOnly, heightOnly, draggable, level, depth, group
blendMode, hue, saturation, brightness, contrast, etc.
ALSO
see the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.
EVENTS
See the CreateJS Easel Docs for Container events such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover
CLOSE ▲PAGE ▤CODE ▤
FlareBox
zim class - extends a zim.Container which extends a createjs.Container
DESCRIPTION
Makes a Rectangle with ZIM Flare objects positioned around edges and corners.
Pass in an array of Flare objects or a MultiFlare
FlareBox places flares at specified corner indexes depending on flare pin index.
See also ZIM Flare and ZIM MultiFlare.
A FlareBox can be used as a backing and rollBacking for buttons and other components
to create exciting borders inspired by the tail lights of 2020 automibiles.
See: https://zimjs.com/ten/flare.htmlNOTE
mouseChildren is turned to false for all zim Shape containers.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const border1 = new Flare({
thickness:6,
angles:[0,90], // to the right then down
lengths:[60,90],
anglesA:[3,-1.5], // flare angles
anglesEnd:[45,0], // 0 is optional
color:white,
pin:1 // pin at flare corner
});
const border2 = new Flare({
thickness:25,
angles:[0,90], // to right then down
lengths:[50,50],
anglesA:[-2,2], // anglesB will mirror these if not provided
anglesEnd:[45],
color:dark,
pin:1 // pin at flare corner
});
// put both flares at left top corner 0
// they each have pin of 1 so
// the rotation is (0-1)*90 = -90 (counter clockwise)
// they were to the right and down
// now they are up and to the right
const flareBox = new FlareBox(220, 100, blue, dark, 3, [border1, border2], [0,0])
.centerReg();
// clone the flares for the rollover FlareBox
// put the first flare at corner 2
// the rotation becomes (2-1)*90 = 90 (clockwise)
// it was built to go to the right and down
// now it is going down and to the left
const flareBoxOver = new FlareBox(220, 100, green, dark, 3, [border1.clone(), border2.clone()], [2,0])
.centerReg({add:false});
// use the flareBoxes as backings
const button = new Button({
width:flareBox.width,
height:flareBox.height,
backing:flareBox,
rollBacking:flareBoxOver
}).center();
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
width - (default 220) the width of the rectangle about which the Flare objects are placed
this is a little larger than the ZIM Button default width
height - (default 80) the height of the rectangle about which the Flare objects are placed
this is a little larger than the ZIM Button default height
color - (default black) the fill color as any CSS color including "rgba()" for alpha fill (set a to 0 for tranparent fill)
borderColor - (default null) the stroke color
borderWidth - (default 1 if stroke is set) the size of the stroke in pixels
flares - (default null) an array of ZIM Flare objects or a single flare or a ZIM MultiFlare
corners - (default [0]) an array of corner indexes to place the pin points of the ZIM Flare objects
corner indexes are:
0 - LEFT TOP
1 - RIGHT TOP
2 - RIGHT BOTTOM
3 - LEFT BOTTOM
pins - (default null) an array of pins of the ZIM Flare objects
The pin index can be set on the Flare or through the MultiFlare or here in the FlareBox
The pin is also the registration point of the flare so the flare will be placed at the corner at its pin
FlareBox will also automatically rotate the flares with this formula:
flare.rotation = (corner-pin)*90
This formula allows for easy setting of angles on corners
See the Button at https://zimjs.com/ten/flare.html
This can be overridden by setting the flare rotation after the FlareBox is created
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly
METHODS
setColorRange(color1, color2) - set a color range for shape - used by colorRange property - returns obj for chaining
if one color is used, the current color is used and color1 is the second color in the range
cache(see Container docs for parameter description) - overrides CreateJS cache() and returns object for chaining
Leave parameters blank to cache bounds of shape (plus outer edge of border if borderWidth > 0)
hasProp(property as String) - returns true if property exists on object else returns false
clone() - makes a copy of the flareBox and clone flares as well
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection
ALSO
ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO
see the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.
PROPERTIES
type - holds the class name as a String
multiFlare - gives access to the ZIM Multiflare object
this is made automatically by FlareBox if an array of flares was used
flares - an array of flares that belong to the multiFlare
backing - gives access to the rectangle backing shape
color - get and set the fill color of the backing shape
colorRange - if setColorRange() is used, the colorRange is a ratio (0-1) between the colors
setting the colorRange will change the color property of the backing shape
for instance, shape.setColorRange(blue, pink) then shape.colorRange = .5
will set the color of the shape to half way between blue and pink
shape.animate({color:red}, 1); is a shortcut to animate the colorRange
shape.wiggle("colorRange", .5, .2, .5, 1, 5) will wiggle the colorRange
borderColor - get and set the stroke color
borderWidth - get and set the stroke size in pixels
borderDashedCommand - access to the CreateJS stroke dashed command (segments, offset)
see https://www.createjs.com/docs/easeljs/classes/Graphics.StrokeDash.html
mouseChildren - set to false to avoid dragging the shape inside
to drag or interact with objects inside then set mouseChildren to true
ALSO
see ZIM Container for properties such as:
width, height, widthOnly, heightOnly, draggable, level, depth, group
blendMode, hue, saturation, brightness, contrast, etc.
ALSO
see the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.
EVENTS
See the CreateJS Easel Docs for Container events such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover
CLOSE ▲PAGE ▤CODE ▤
Label
zim class - extends a zim.Container which extends a createjs.Container
DESCRIPTION
Makes a label - wraps the createjs Text object.
Can use with Button, CheckBox, RadioButtons and Pane.
Text seems to come in different sizes so we do our best.
Have tended to find that left and alphabetic are most consistent across browsers.
Custom fonts loaded through css can be used as well.
NOTE
can wrap text at given width using lineWidth (or labelWidth) parameter.
To dynamically change the width without changing the font size use the labelWidth property.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
new Label("Hello").center(); // adds label to and centers on the stage
new Label({
text:"CLICK",
size:100,
font:"courier",
color:white,
rollColor:red,
bold:true,
italic:true
}).loc(100,100).tap(()=>{zog("tapping");});
EXAMPLE
// with text that wraps at labelWidth
// can also set this as a property later to dynamically change width of text
// without changing the size
new Label({
text:"this is a long bunch of text, this is a long bunch of text, this is a long bunch of text",
labelWidth:200
}).center();
EXAMPLE
STYLE = {font:"courier"};
new Label("Hi Courier").center(); // will be courier not arial
STYLE = {text:"YAY!", color:red};
new Label().center().mov(0,100); // will say YAY! in red arial font
new Label("Hello").center().mov(0,200); // will say Hello in red arial
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
** supports VEE - parameters marked with ZIM VEE mean a zim Pick() object or Pick Literal can be passed
Pick Literal formats: [1,3,2] - random; {min:10, max:20} - range; series(1,2,3) - order, function(){return result;} - function
text - |ZIM VEE| String for the the text of the label
size - (default 36) the size of the font in pixels
font - (default arial) the font or list of fonts for the text
color - (default black) color of font (any CSS color)
rollColor - (default color) the rollover color of the font
shadowColor - (default -1) for no shadow - set to any css color to see
shadowBlur - (default 14) if shadow is present
align - ((default LEFT) text registration point alignment also CENTER/MIDDLE and RIGHT
set to START to align LEFT for ZIM DIR constant is "ltr" or RIGHT when DIR="rtl" - END is the opposite
valign - (default TOP) vertical registration point alignment alse CENTER/MIDDLE, BOTTOM
bold - (default false) set the font to bold - note: fontOptions has been removed as of ZIM Cat
italic - (default false) set the font to italic - note: fontOptions has been removed as of ZIM Cat
variant - (default false) set to true to set the font to "small-caps" - note: fontOptions has been removed as of ZIM Cat
lineWidth - (default false) for no wrapping (use \n) Can set to number for wrap
lineHeight - (default getMeasuredLineHeight) set to number to adjust line height
backing - (default null) a Display object for the backing of the label (eg. Shape, Bitmap, Container, Sprite)
the backing most likely should be centerReg() ie. backing:new Rectangle(200,50,yellow).centerReg()
see ZIM Pizzazz module for a fun set of Shapes like Boomerangs, Ovals, Lightning Bolts, etc.
outlineColor - (default null - or black if outlineWidth set) - the color of the outline of the text
outlineWidth - (default null - or (size*.2) if outlineColor set) - the thickness of the outline of the text
backgroundColor - (default null) set to CSS color to add a rectangular color around the label
The background color will change size to match the text of the label
Note: the backgroundColor is different than a backing which can be any Display Object
and background parameters are ignored if a backing parameter is set
backgroundBorderColor - (default null) the background stroke color
backgroundBorderWidth - (default null) thickness of the background border
corner - (default 0) the round of corner of the background if there is one
can also be an array of [topLeft, topRight, bottomRight, bottomLeft]
backgroundDashed - (default null) set to true for dashed background border (if backgroundBorderColor or backgroundBorderWidth set)
padding - (default 10 if backgroundColor set) places the border this amount from text (see paddingH and paddingV)
padding parameters are ignored if there is no backgroundColor set (also ignored if a backing parameter is set)
paddingH - (default padding) places border out at top bottom
paddingV - (default padding) places border out at left and right
shiftH - |ZIM VEE| (default 0) move the label (CreateJS Text) inside the Label container horizontally
shiftV - |ZIM VEE| (default 0) move the label (CreateJS Text) inside the Label container vertically
rollPersist - (default false) set to true to maintain rollover stage as long as mousedown or press is activated (used by Buttons)
labelWidth - (default null) the same as the lineWidth - the text will wrap at the labelWidth (added to match labelHeight)
labelHeight - (default null) the height of the text - setting this will probably alter the font size - so the size parameter is overwritten
for labelHeight to work, the labelWidth must also be set
using labelWidth and labelHeight together allow you to fit as much text into specified width and height dimensions
maxSize - (default null) set to limit the font size when using labelWidth and labelHeight
splitWords - (default false) set to true when lineWidth > 0 to split words at the line width
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly
METHODS
setColorRange(color1, color2) - set a color range for label - used by colorRange property - returns obj for chaining
if one color is used, the current color is used and color1 is the second color in the range
showRollColor(visible) - default true to show roll color (used internally)
cache(see Container docs for parameter description) - overrides CreateJS cache() and returns object for chaining
Leave parameters blank to cache bounds of shape (plus outer edge of border if borderWidth > 0)
hasProp(property as String) - returns true if property exists on object else returns false
clone(exact) - makes a copy with properties such as x, y, etc. also copied
exact (default false) ZIM VEE (Pick) values are active in clones unless exact is set to true
For instance, if the object's color is [blue, green]
then its clone might be blue or green - which could be different than the original
If exact is set to true then the clone will be the color of the original object
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection
ALSO
ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO
see the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.
PROPERTIES
type - holds the class name as a String
label - references the CreateJS Text object of the label
text - references the text property of the CreateJS Text object
size - the font size of the Label (without px)
font - get or set the font of the text
bold - get or set the bold (boolean) of the font
italic - get or set the italic (boolean) of the font
variant - get or set the variant (boolean) of the font (true is "small-caps")
align - get or set the horizontal alignment of the text
valign - get or set the vertical alignment of the text
paddingH - read-only value for paddingH of label
note - no padding property - that gets split into paddingH and paddingV
paddingV - read-only value for paddingV of label
color - gets or sets the label text color (and the rollColor if they are the same to start)
colorOnly - gets or only sets the label color
backgroundColor - gets or sets the label background color
colorRange - if setColorRange() is used, the colorRange is a ratio (0-1) between the colors
setting the colorRange will change the color property of the label
for instance, label.setColorRange(blue, pink) then label.colorRange = .5
will set the color of the label to half way between blue and pink
label.animate({color:red}, 1); is a shortcut to animate the colorRange
label.wiggle("colorRange", .5, .2, .5, 1, 5) will wiggle the colorRange
rollColor - gets or sets the label rollover color
labelWidth - the width at which the text wraps
currently does not work well with labelHeight and backgroundColor
labelHeight - setting this and labelWidth will change the font size to fit within the specified dimensions
outlineLabel - reference to the outline CreateJS Text object if there is an outline
backing - access to backing object
background - access to background Rectangle if backgroundColor is set
enabled - default is true - set to false to disable
veeObj - an object with ZIM VEE original parameters:value allowing the ZIM VEE values to be referenced
for instance, obj.prop = Pick.choose(obj.veeObj.prop); will reset the the prop to the result of the original ZIM VEE value
ALSO
see ZIM Container for properties such as:
width, height, widthOnly, heightOnly, draggable, level, depth, group
blendMode, hue, saturation, brightness, contrast, etc.
ALSO
see the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.
OPTIMIZED
This component is affected by the general OPTIMIZE setting (default is false)
if set to true, you will have to S.update() after setting certain properties
EVENTS
See the CreateJS Easel Docs for Container events such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover
CLOSE ▲PAGE ▤CODE ▤BITS VIDS
LabelOnPath
zim class - extends a zim.Container which extends a createjs.Container
DESCRIPTION
Makes a label along a path of a Squiggle or Blob - which can be interactive, fixed, toggled or hidden
A list of percentages for where the letters are can be provided to move around letters
See: https://zimjs.com/explore/labelonpath.htmlNOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const lop = new LabelOnPath({
label:"Hello World",
// label:new Label({text:"JELLO JIGGLES!", size:50}),
// path:new Blob(),
// path:new Squiggle({
// color:lighter,
// thickness:4,
// points:[[0,75,0,0,-100,200,100,-200],[300,75,0,0,-100,200,100,-200]]
// }).transformPoints("scaleX",2).transformPoints("rotation",0),
percentAngle:100, // default
showPath:false, // default
allowToggle:true, // default
interactive:true, // default
onTop:false // default
}).center();
zog(lop.text)
F.on("keydown", ()=>{
// shows percent spacing of letters along path
// could pass [results] in as an array to percents parameter of LabelOnPath
zog(lop.percents.toString());
// uncomment to record the path
// could pass this in as the points parameter to start with a given path
// lop.path.getPoints(true);
});
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
label - (default "Label on Path") a String or a ZIM Label
can set any label properties such as color, size, font, etc. on the label passed in
path - (default new Squiggle()) a ZIM Squiggle or ZIM Blob
can set any properties such as color, points, etc. on the shape passed in
percentAngle - (default 100) from 0-100 (or beyond in either direction) as to how much to tilt the letters
percents - (default null) an array of percentage locations of the letters along the line - should match number of letters
showPath - (default true) Boolean to show path at start
allowToggle - (default true) Boolean to allow user to toggle path off and on
interactive - (default true) Boolean to allow user to change path with controls, drag or add and remove points
can also set these individually on the path
onTop - (default false) - Boolean to set path on top when dragged
rtl - (default DIR) - set to true to start letters at right end of path - will just reverse the Blob or Squiggle path.
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly
METHODS
toggle(state) - leave off state to toggle path to opposite state. Use true to hide and false to show - returns object for chaining
hidePath() - hides path - returns object for chaining
showPath() - shows path - returns object for chaining
setProps(properties) - sets provided properties (as {prop:val, prop:val}) for each letter
the values accept ZIM VEE - dynamic parameters - see ZIM Pick()
returns object for chaining
resize() - if not interactive, call this to update the text on the path - returns object for chaining
cache(see Container docs for parameter description) - overrides CreateJS cache() and returns object for chaining
Leave parameters blank to cache bounds of shape (plus outer edge of border if borderWidth > 0)
hasProp(property as String) - returns true if property exists on object else returns false
clone() - makes a copy with properties such as x, y, etc. also copied
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection
ALSO
ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO
see the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.
PROPERTIES
type - the name of the class as a String
text - get or set the text on the path
path - read-only access to path - but can manipulate the path
letters - access to ZIM Container of labels used for letters
for instance labels.loop(label=>{label.color = red;});
or animate as a sequence labels.animate({props:{scale:1.5}, loop:true, rewind:true, sequence:.2});
numLetters - how many letters - same as letters.numChildren
percents - access to the array of percents for letter positioning - resize() after changing unless interactive which auto resizes
color - get or set the color of the text
allowToggle - get or set the Boolean to allow toggling the path
interactive - get or set the Boolean to allow interaction with the path
ALSO
see ZIM Container for properties such as:
width, height, widthOnly, heightOnly, draggable, level, depth, group
blendMode, hue, saturation, brightness, contrast, etc.
ALSO
see the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.
EVENTS
See the CreateJS Easel Docs for Container events such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover
CLOSE ▲PAGE ▤CODE ▤VIDS
LabelOnArc
zim class - extends a zim.Container which extends a createjs.Container
DESCRIPTION
Makes a label along an arc - see also LabelOnPath - for a more interactive version
Used internally for making labels on Radial and RadialMenu objects
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const loa = new LabelOnArc({
label:"Hello World"
}).center();
zog(loa.text);
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
label - (default "Label on Arc") a String or a ZIM Label
can set any label properties such as color, size, font, etc. on the label passed in
size - (default 30) the font size of the label
font - (default "verdana") the font of the label - can load custom fonts in Frame() or F.loadAssets()
color - (default white) a color for the text can be any ZIM or CSS color
radius - (default 100) the radius of the circle to apply the arc of the text
flip - (default false) set to true to flip text if between 90 and 270
spacing - (default 0) the space between the Label and the arc - varies with different fonts
letterSpacing - (default 5) - the space between letters
angles - (default null) optionally specify an array of angles for the letters
this will override letterSpacing - see also angles property to receive an array of angles
showCircle - (default false) set to true to see a circle - then use circle property to adjust if desired
arcColor - (default null) set to a color to see a filled arc
arcBorderColor - (default null) the borderColor of the arc
acrBorderWidth - (default 2 if arcBorderColor) the borderWidth of the arc
radiusSpread - (default false) set to true to keep same letter angles as radius is changed
ignored if angles are provided
rtl - (default ZIM DIR) - set to true for right to left text
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly
METHODS
hasProp(property as String) - returns true if property exists on object else returns false
setProps(properties) - sets provided properties (as {prop:val, prop:val}) for each label
the values accept ZIM VEE - dynamic parameters - see ZIM Pick()
returns object for chaining
clone() - makes a copy with properties such as x, y, etc. also copied
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection
ALSO
ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO
see the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.
PROPERTIES
type - the name of the class as a String
text - get or set the text on the arc
radius - get or set the radius of the arc (see radiusSpread parameter too)
labels - an array of ZIM Label objects for the letters
letters - access to ZIM Container of labels used for letters
for instance labels.loop(function (label) {label.color = red;});
or animate as a sequence labels.animate({props:{scale:1.5}, loop:true, rewind:true, sequence:200});
numLetters - how many letters - same as letters.numChildren
letterHeight - get the height of letters
color - get or set the text color
circle - access to the circle object
arc - access to the arc object
angles - access to the array angles for letter positioning
use angles.toString() to log angle data (for kerning)
this can be modified and passed in as an angles property to start
innerRadius - the inside radius at the bottom of the text
outerRadius - the outside radius at the top of the text
ALSO
see ZIM Container for properties such as:
width, height, widthOnly, heightOnly, draggable, level, depth, group
blendMode, hue, saturation, brightness, contrast, etc.
ALSO
see the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.
EVENTS
See the CreateJS Easel Docs for Container events such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover
CLOSE ▲PAGE ▤CODE ▤
LabelLetters
zim class - extends a zim.Container which extends a createjs.Container
DESCRIPTION
Splits apart a ZIM Label into labels per characater
to allow manipulation of each character - animation, kerning, etc.
SEE: https://zimjs.com/ten/radial.html - (ZIM TEN) the title and subtitle
Also accepts basic HTML-like tags to allow Canvas text to have multi-formatting.
SEE: https://zimjs.com/cat/html.htmlNOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const letters = new LabelLetters("Label Letters", CENTER, "bottom", 5)
.center()
.animate({
props:{scale:1.5, rotation:-10},
wait:.5,
time:.2,
sequence:.05,
rewind:true
});
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
label - (default "Label Letters") a String or a ZIM Label
can set any label properties such as color, size, font, etc. on the label passed in
can pass in a string with basic "old fashioned" HTML tags as follows:
<b>bold</b> - or <strong>bold</strong>
<i>italic</i> - or <em>italic</em>
<u>underline</u> - can use this with <a> to make a classic underlined link
<a href=url target=_blank>link</a>
<br> - for a break or use \n
<font
color=zimColor
backgroundColor='htmlColor'
rollBackgroundColor=#hexColor
size=20
family=verdana
group=groupStyle>font</font>
note: use NO QUOTES except for single quote with colors if want HTML blue for instance rather than ZIM blue
note: setting groupStyle will make letter from scratch as opposed to building on the submitted label styles
align - (default CENTER) set to LEFT, CENTER / MIDDLE, RIGHT for letter registration x positioning
also see lineAlign for alignment of lines
valign - (default CENTER) set to TOP, CENTER / MIDDLE, "bottom" for letter registration y positioning
also see lineValign for vertical alignment of lines
letterSpacing - (default 5) - the space between letters
letterSpacing is turned off if the Label has a backgroundColor
to use letterSpacing and a backgroundColor use the backing parameter of Label instead of backgroundColor
or use letterSpacings (see below) to set specific spacings (kerning) on letters
letterSpacings - (default null) - an array of the space between letters each letter
any value here will override the letterSpacing
0 is the index for the space between first and second letter
the length of this should be one less than the number of letters
lineSpacing - (default 5) - the space between lines (not including lineHeight)
lineSpacings - (default null) - an array of the space between lines
any values here will override the lineSpacing
lineHeight - (default null) null will auto set the height. Set to a number to force line heights - if \n or <br> are present in label
lineAlign - (default LEFT or RIGHT for rtl:true) the horizontal alignment of lines if multiple lines - set to LEFT, CENTER/MIDDLE, RIGHT, JUSTIFY
set to START to lineAlign LEFT for ZIM DIR constant is "ltr" or RIGHT when DIR="rtl" - END is the opposite
note the lineAlignLast parameter if using JUSTIFY
lineValign - (default BOTTOM) the vertical alignment within lineSpacing if multiple lines - set to TOP, CENTER/MIDDLE, BOTTOM
cache - (default false) set to true to cache each letter - improves performance on animation
rtl - (default false) set to true to reverse letters other than a-zA-Z0-9 and set default lineAlign to RIGHT
lineWidth - (default null) set the line width - could cause wrapping. Also see lineWidth property
lineAlignLast - (default LEFT or RIGHT for rtl:true) - only applied if lineAlign is JUSTIFY
this value can also be JUSTIFY to spread the words of the last line
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly
METHODS
hasProp(property as String) - returns true if property exists on object else returns false
setProps(properties) - sets provided properties (as {prop:val, prop:val}) for each label
the values accept ZIM VEE - dynamic parameters - see ZIM Pick()
returns object for chaining
clone() - makes a copy with properties such as x, y, etc. also copied
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection
ALSO
ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO
see the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.
PROPERTIES
type - the name of the class as a String
text - get or set the text
labels - an array of ZIM Label objects for the letters
numLetters - how many letters (same as numChildren)
lineWidth - get or set the line width - could cause wrapping
ALSO
see ZIM Container for properties such as:
width, height, widthOnly, heightOnly, draggable, level, depth, group
blendMode, hue, saturation, brightness, contrast, etc.
ALSO
see the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.
EVENTS
See the CreateJS Easel Docs for Container events such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover
CLOSE ▲PAGE ▤CODE ▤VIDS
LabelWords
zim class - extends a zim Wrapper which extends a zim.Container which extends a createjs.Container
DESCRIPTION
Splits apart a ZIM Label into labels per word - also see LabelLetters
to allow manipulation of each word - animation, color, etc.
SEE: https://zimjs.com/016/labelwords.htmlNOTE
since this is really a Wrapper containing word Labels, all the wrapper functionality can be used.
SEE: https://zimjs.com/ten/wrapper.htmlNOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
new LabelWords({
label:"Here is LabelWords that divides text into words for individual control!",
color:white,
itemRegY:BOTTOM,
itemCache:true,
backgroundColor:series(red,orange,pink,green,blue,purple),
size:50,
width:700,
align:CENTER
}).center().mov(0,20).animate({
props:{scaleY:0},
time:.5,
rewind:true,
loop:true,
sequence:.1
});
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports VEE - parameters marked with ZIM VEE mean a zim Pick() object or Pick Literal can be passed
Pick Literal formats: [1,3,2] - random; {min:10, max:20} - range; series(1,2,3) - order, function(){return result;} - function
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
label - (default "Will this wind...") a String or a ZIM Label
if custom Label properties beyond size, font, color, and backgroundColor are desired then pass in a ZIM Label
and LabelWords will clone the label to maintain letterSpacing, bold, italic, etc.
width - (default label width or 500) set to a width to set the width of the wrapper
size - |ZIM VEE| (default label size or 36) set the font size of the label
font - |ZIM VEE| (default label font or arial) set the font of the label
color - |ZIM VEE| (default label color or black) set the color of the label
backgroundColor - |ZIM VEE| (default label backgroundColor or null) set the background color of the label
itemRegX - |ZIM VEE| (default CENTER) the horizontal registration of the word Labels
itemRegY - |ZIM VEE| (default CENTER) the vertical registration of the word Labels
itemCache - (default false) set to true to cache each label - better for animation
spacingH - (default size/2) a spacing between items - ignored if colSize is set
spacingH does not get ZIM VEE - the results are jiggly when wrapping
spacingV - |ZIM VEE| (default size/2) a spacing between rows - ignored if rowSize is set
** WRAPPER PARAMETERS - we use the term wrapper to mean the LabelWords
** If using STYLE then style a Wrapper for these rather than LabelWords
wrapperType - (default "spacing") changes how the wrapper lays out the items as follows:
"spacing" - places each item spaced at the spacingH from the next item
"spread" - places equal spacing around edges and items horizontally (min the spacingH)
"stretch" - places equal spacing between objects horizontally with no spacing at edges (min the spacingH)
"column" - uses colSize parameter to determine spacing (spacingH is ignored)
align - |ZIM VEE| (default LEFT) set to CENTER, MIDDLE, RIGHT
this aligns the whole row - see also alignInner for aligning inside columns
align:series(LEFT, RIGHT) will toggle rows aligning left and right
valign - |ZIM VEE| (default TOP) set to CENTER, MIDDLE, BOTTOM
this aligns the rows at the top, middle or bottom only when a height is provided (rare)
see also valignInner for vertical aligning within rows (common)
alignInner - |ZIM VEE| (default LEFT) set to CENTER, MIDDLE, RIGHT
aligns the items when colSize is set only - see also align for aligning whole rows horizontally
valignInner - |ZIM VEE| (default BOTTOM) set to TOP, CENTER, MIDDLE
aligns the items in vertically in their row (common) - see also valign for aligning whole rows vertically (rare)
flip - |ZIM VEE| (default false) set to true to flip the order of the rows
flip:series(false, true) would read left to right then right to left then left to right, etc.
reverse - |ZIM VEE| (default false) set to true to reverse all the items so the first is (probably) at the bottom right
bottomFull - |ZIM VEE| (default false) set to true to fill the Wrapper at the bottom
does not reverse but rather leaves potentially fewer items at the top
colSize - |ZIM VEE| (default null) set to number to hard code column width
this is ignored if the wrapperType is not set to "column"
use colSize:series(100, 200, 100, 400) to set specific sizes
this will also the only setting for which alignInner works
rowSize - |ZIM VEE| (default null) set to number to hard code row height
this ignores spacingV but can be used with any wrapperType
use a series(100, 200, 100, 400) to set specific sizes
height - (default null) does not really set the height of the wrapper
the height is always determined by the width and the items as they wrap
(both the width and height cannot be used together without scaling and the wrapper does not scale items)
the height will have no effect when the valign parameter is set to TOP (default)
The height will place the bottom of the wrapper at the height when the valign is BOTTOM
The height will place the wrapper in the middle of the height when the valign is CENTER/MIDDLE
Note: in the all cases the bounds will still be the bounds around the wrapper
just the positioning of the wrapper is changed.
This allows the wrapper to be placed at the bottom and grow to the top
or placed in the middle and grow from the middle
which would not be possible otherwise aside from repositioning after each resize
minSpreadNum - (default 2) spread would always center a single item on a row
and can look weird spreading two or even three final items
a wrapper with wrapperType:"spread" will spread items if there are at least minSpreadNum items
if there is less than minSpreadItems then it will align the items according to align
minStretchNum - (default 3) stretch would always center a single item on a row
and can look weird stretching two or even three final items
a wrapper with wrapperType:"stretch" will stretch items if there are at least minStretchNum items
if there is less than minStretchItems then it will align the items according to align
this will not stop the first line from stretching unless minStretchFirst parameter is set to false
percentVoidH - |ZIM VEE| (default 0) set a percent horizontal space between items default in center
offsetVoidH - |ZIM VEE| (default 0) set a percent (or negative percent) to offset the void from the center horizontally
percentVoidV - |ZIM VEE| (default 0) set a percent vertical space between rows default in center
offsetVoidV - |ZIM VEE| (default 0) set a percent (or negative percent) to offset the void from the center vertically
minStretchFirst - (default true) set to false to avoid stretching the first line if less than minStretchNum is set and met
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly
METHODS
hasProp(property as String) - returns true if property exists on object else returns false
clone() - makes a copy with properties such as x, y, etc. also copied
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection
ALSO
See ZIM Wrapper for methods such as setProps(), add(), addAt(), remove(), resize(), etc.
ALSO
ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO
see the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.
PROPERTIES
type - the name of the class as a String
text - get or set the text
labels - an array of ZIM Label objects for the letters
numWords - how many words in labels (same as numChildren)
ALSO
see ZIM Wrapper for properties items, items2D, and properties for most of the Wrapper parameters
ALSO
see ZIM Container for properties such as:
width, height, widthOnly, heightOnly, draggable, level, depth, group
blendMode, hue, saturation, brightness, contrast, etc.
ALSO
see the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.
EVENTS
See the CreateJS Easel Docs for Container events such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover
CLOSE ▲PAGE ▤CODE ▤
Emoji
zim class - extends a zim.Label which extends a zim.Container
DESCRIPTION
Shows an emoji in a Label - an emoji is just text.
This helps treat the emoji as an image and works in conjunction with ZIM EmojiPicker
SEE: ZIM EmojiPicker() in COMPONENTS below ColorPicker().
SEE: https://zimjs.com/nft/bubbling/emoji.htmlNOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// Go to https://emojipedia.org/ and find an emoji page
// copy the emoji or use the copy link and paste into the string below
new Emoji("paste the unicode icon here in string")
.center()
.drag();
EXAMPLE
// or use UTF code from https://zimjs.com/emoji
new Emoji("\ud83c\udf47") // grapes using UTF codes
.center()
.drag();
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
** supports VEE - parameters marked with ZIM VEE mean a zim Pick() object or Pick Literal can be passed
Pick Literal formats: [1,3,2] - random; {min:10, max:20} - range; series(1,2,3) - order, function(){return result;} - function
code - |ZIM VEE| (default \ud83d\ude42") the Unicode Character or the Emoji from https://emojipedia.org/
or pass in UTF codes such as "\ud83d\ude42".
To convert from Unicode to UTF use https://zimjs.com/emoji/ (also see MORE link at bottom of page)
size - |ZIM VEE| (default 36) the size of the font in pixels
monochrome - (default false) set to true to make black outline - this is actually the bold version of the icon
italic - (default false) set the font to italic
** SEE Label for the rest of the definitions
backgroundColor, corner, backing, padding, paddingH, paddingV, shiftH, shiftV, style, group, inherit
backgroundColor - (default null) set to CSS color to add a rectangular color around the label
The background color will change size to match the text of the label
Note: the backgroundColor is different than a backing which can be any Display Object
and background parameters are ignored if a backing parameter is set
backgroundBorderColor - (default null) the background stroke color
backgroundBorderWidth - (default null) thickness of the background border
corner - (default 0) the round of corner of the background if there is one
can also be an array of [topLeft, topRight, bottomRight, bottomLeft]
backing - (default null) a Display object for the backing of the emoji (eg. Shape, Bitmap, Container, Sprite)
the backing most likely should be centerReg() ie. backing:new Rectangle(200,50,yellow).centerReg()
see ZIM Pizzazz module for a fun set of Shapes like Boomerangs, Ovals, Lightning Bolts, etc.
padding - (default 10 if backgroundColor set) places the border this amount from emoji (see paddingH and paddingV)
padding parameters are ignored if there is no backgroundColor set (also ignored if a backing parameter is set)
paddingH - (default padding) places border out at top bottom
paddingV - (default padding) places border out at left and right
shiftH - (default 0) move the emoji inside the container horizontally
shiftV - (default 0) move the emoji inside the container vertically
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly
METHODS
clone() - makes a copy with properties such as x, y, etc. also copied
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection
ALSO
ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO
see the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.
PROPERTIES
type - the name of the class as a String
veeObj - an object with ZIM VEE original parameters:value allowing the ZIM VEE values to be referenced
for instance, obj.prop = Pick.choose(obj.veeObj.prop); will reset the the prop to the result of the original ZIM VEE value
ALSO
see ZIM Container for properties such as:
width, height, widthOnly, heightOnly, draggable, level, depth, group
blendMode, hue, saturation, brightness, contrast, etc.
ALSO
see the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.
EVENTS
See the CreateJS Easel Docs for Container events such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover
CLOSE ▲PAGE ▤CODE ▤
Button
zim class - extends a zim.Container which extends a createjs.Container
DESCRIPTION
Makes a button with rollover and many more features - see parameters.
You will need to pass in a Label to change the font properties of the button from the default.
You will then need to add the button to the stage and add a mousedown or click event.
Button rollover is done automatically.
Generally, there are three modes for a button - normal, toggle and wait.
Each of these have backgroundColor, color, backing and icon displays
and each of these have up (normal), roll and down states.
Down states were added in ZIM ZIM 01
SEE https://zimjs.com/zim/button.html
DISPLAYS FOR NORMAL MODE WITH THREE STATES EACH
backgroundColor, rollBackgroundColor, downBackgroundColor,
color, rollColor, downColor,
backing, rollBacking, downBacking,
icon, rollIcon, downIcon
** The normal mode also has borderColor, borderWidth, rollBorderColor and downBorderColor inserted after the color set.
The parameters are kept flat rather than grouped in {} object parameters in order to use ZIM DUO and STYLE
The button parameters have indicators showing the subsections
The normal mode is listed first, then general Button parameters such as corner, shadowColor, etc.
The toggle and wait parameters are listed last.
You can set a backing display object (Shape, Bitmap, Pattern, etc.) in place of the standard rectangle.
You can set an icon display object in place of the standard text
You can set the Button to toggle between text, backings or icons
SEE the ZIM Pizzazz series for a growing selection of backings, patterns and icons
https://zimjs.com/bits/view/pizzazz.htmlhttps://zimjs.com/bits/view/icons.htmlhttps://zimjs.com/patterns.htmlNOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
new Button(200,60,"CLICK").center().tap(()=>{
zog("clicking");
});
// OR add custom label (needed to change label color for instance)
const label = new Label({
text:"POWER OPTION",
size:40,
backgroundColor:"violet",
bold:true
});
new Button({
label:label,
width:390,
height:110,
backgroundColor:"purple",
rollBackgroundColor:"MediumOrchid",
borderWidth:8,
borderColor:"violet",
gradient:.3,
corner:0
}).center();
EXAMPLE
// using the on() method and a mousedown - or click - event rather than tap()
// note - do not chain the on() method
const button = new Button().center();
button.on("mousedown", ()=>{
zgo("https://zimjs.com");
})
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
** supports VEE - parameters marked with ZIM VEE mean a zim Pick() object or Pick Literal can be passed
Pick Literal formats: [1,3,2] - random; {min:10, max:20} - range; series(1,2,3) - order, function(){return result;} - function
width - (default 200) the width of the button or AUTO to fit width to label (see also autoPadding)
height - (default 60) the height of the button or AUTO to fit height to label (see also autoPadding)
label - (default "CLICK" or "" if icon or backing) ZIM Label or plain text with default settings (white)
---------- NORMAL MODE
backgroundColor - |ZIM VEE| (default purple) background color of button (any CSS color)
also as of ZIM ZIM 01 any backgroundColor parameter can be written as bgColor
rollBackgroundColor - |ZIM VEE| (default backgroundColor.lighten(.2)) rollover background color of button
also as of ZIM ZIM 01 any backgroundColor parameter can be written as bgColor - so rollBgColor works, etc.
downBackgroundColor - |ZIM VEE| (default null) pressing down background color of button
color - |ZIM VEE| (default white) label color of button (any CSS color) unless a custom Label is set
rollColor - |ZIM VEE| (default white) rollover label color of button
downColor - |ZIM VEE| (default null) pressing down label color of button
borderColor - (default null) the color of the border
rollBorderColor - (default borderColor) rollover color of the border
downBorderColor - (default rollBorderColor) the pressing down color of the border
borderWidth - (default null) thickness of the border
backing - (default null) a Display object for the backing of the button (eg. Shape, Bitmap, Container, Sprite)
assumed to be center registration for easy positioning *** as with all backings
see ZIM Pizzazz module for a fun set of Button Shapes like Boomerangs, Ovals, Lightning Bolts, etc.
https://zimjs.com/bits/view/pizzazz.html
rollBacking - (default null) a Display object for the backing of the rolled-on button
downBacking - (default null) a Display object for the backing of the pressed-down button
icon - (default null) set to display object to add icon at the center of the button and remove label
assumed to be center registration for easy positioning *** as with all icons
https://zimjs.com/bits/view/icons.html
rollIcon - (default null) set to display object to show icon on rollover
downIcon - (default null) set to display object to show icon on press down
---------- GENERAL PARAMETERS
corner - (default 10) the round of the corner (set to 0 for no corner)
can also be an array of [topLeft, topRight, bottomRight, bottomLeft]
and [horizontal, vertical] pairs - see Rectangle() for more info
dashed - (default false) set to true to turn the border to dashed - if the borderColor or borderWidth is provided
shadowColor - (default rgba(0,0,0,.3)) set to -1 for no shadow
shadowBlur - (default 14) how blurred the shadow is if the shadow is set
gradient - (default 0) 0 to 1 (try .3) adds a gradient to the button
gloss - (default 0) 0 to 1 (try .1) adds a gloss to the button
align - (default CENTER) horizontal align of the label
valign - (default CENTER) vertical align of the label
indent - (default 10) indent of label when align or valign is set
indentH - (default indent) horizontal indent of label when align or valign is set
indentV - (default indent) vertical indent of label when align or valign is set
hitPadding - (default 0) adds extra hit area to the button (good for mobile)
Note that if the button alpha is 0 the button will still be active if hitPadding is not equal to 0
Set the hitPadding property to 0 in this case - thanks Frank Los for the notice
autoPadding - (default 20) the padding used by AUTO width or height
autoPaddingH - (default autoPadding) the padding used by AUTO width
autoPaddingV - (default autoPadding) the padding used by AUTO height
rollPersist - (default false) set to true to keep rollover state when button is pressed even if rolling off
---------- TOGGLE MODE
toggle - (default null) set to string to toggle with label - or set to true to activate toggle but keep label the same
the button will not toggle if there is a wait parameter set
see also toggle colors, backings and icons
toggleBackgroundColor - (default backgroundColor) background color to make button when toggled
rollToggleBackgroundColor - (default toggleBackgroundColor) background color for button when toggled and rolled over
downToggleBackgroundColor - (default null) background color for button when toggled and pressed down
toggleColor - (default label's color) color to make text when toggled
rollToggleColor - (default label's roll color) color for text when toggled and rolled over
downToggleColor - (default null) color for text when toggled and pressed down
toggleBacking - (default null) set to display object to set a different backing for toggled state
rollToggleBacking - (default null) set to display object to set a backing for the rolled toggle state
downToggleBacking - (default null) set to display object to set a backing for the pressed down state
toggleIcon - (default null) set to display object to add icon at the center of the button and remove label in toggle state
rollToggleIcon - (default null) set to display object to show icon on rollover in toggle state
downToggleIcon - (default null) set to display object to show icon on press down in toggle state
toggleEvent - (default mousedown for mobile and click for not mobile) what event causes the toggle
---------- WAIT MODE
wait - (default null) - String word for button to show when button is pressed and a wait state is desired
LOADING: this can be used as a loading message - so change the button to "LOADING"
When the asset has loaded, use the clearWait() method to return to the normal button or toggled button state
CONFIRMING: this can also be used to confirm user action rather than a full new confirm panel
Set wait:"CONFIRM", set the waitBackgroundColor and rollWaitBackgroundColor parameters to red and the waitTime parameter to 4
In a button mousedown (must use mousedown - not click or tap if ACTIONEVENT is mousedown - the default),
check if the waiting property is true to test for confirmation
The waiting property will not be true for the first button press but will be true during the wait period
Perhaps set the waitModal parameter to true to clearWait() if the user clicks off the button
Use the clearWait() method to clear or cancel the wait status - for instance, if the pane the button is in is closed
waitTime - (default 5 seconds) seconds to show wait state before reverting to normal button (also see ZIM TIME constant)
waitBackgroundColor - (default red) background color to make button during wait time if wait is set
rollWaitBackgroundColor - (default rollBackgroundColor) background color for button when waiting and rolled over
downWaitBackgroundColor - (default null) background color for button when waiting and pressed down
waitColor - (default label's color) color to make text during wait time if wait is set
rollWaitColor - (default label's roll color) color for text when waiting and rolled over
downWaitColor - (default label's roll color) color for text when waiting and pressed down
waitBacking - (default null) set to display object to set a different backing for wait state
rollWaitBacking - (default null) set to display object to a different roll backing for wait state
downWaitBacking - (default null) set to display object to a different pressed-down backing for wait state
waitIcon - (default null) set to display object to add icon at the center of the button and remove label in wait state
rollWaitIcon - (default null) set to display object to show icon on rollover in wait state
downWaitIcon - (default null) set to display object to show icon on pressed down in wait state
waitModal - (default false) set to true to clearWait() if the user clicks off the button
waitEnabled - (default true) set to false to disable button while wait is in progress
---------- FINAL PARAMETERS
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly
METHODS
setBacking(type, newBacking) - dynamically set any type of backing for button (if null removes backing for that type)
Backing types are: "backing", "rollBacking", "downBacking", "toggleBacking", "rollToggleBacking", "downToggleBacking", "waitBacking", "rollWaitBacking", "downWaitBacking"
note - all backing will have a pattern property if a pattern is set as a backing
returns object for chaining
setIcon(type, newIcon) - dynamically set any type of icon for button (if null removes icon for that type)
Icon types are: "icon", "rollIcon", "downIcon", "toggleIcon", "rollToggleIcon", "downToggleIcon", "waitIcon", "rollWaitIcon", "downWaitIcon"
returns object for chaining
toggle(state) - forces a toggle of label, backing and icon if set
state defaults to null so just toggles if left blank
pass in true to go to the toggled state and false to go to the original state
returns object for chaining
removeRoll() - force rollover state off
wait() - forces a wait state - with wait text, backings and icons if set
clearWait() - clears a wait state of the button - sets it back to normal
removeWait() - removes (and clears) a wait state of the button so it will not trigger again
hasProp(property as String) - returns true if property exists on object else returns false
clone(exact) - makes a copy with properties such as x, y, etc. also copied
exact - will ignore ZIM VEE values and clone the original values
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection
ALSO
ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO
see the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.
PROPERTIES
type - holds the class name as a String
text - references the text property of the Label object of the button
label - gives access to the label
color - get or set non-rolled on label color (if no icon specified)
rollColor - get or set rolled on label color
backgroundColor - get or set non-rolled on backing color (if no backing specified)
rollBackgroundColor - get or set rolled on backing color
rollPersist - default is false - set to true to keep rollover state when button is pressed even if rolling off
borderColor - get or set non-rolled on border color
rollBorderColor - get or set the border rolled color
hitPadding - extra padding for interactivity - see hitPadding parameter for extra notes
backing - references the backing of the button
use setBacking() to change as with all backings
note - all backings will have a pattern property if a pattern is set as a backing
rollBacking - references the rollBacking (if set)
downBacking - references the downBacking (if set)
icon - references the icon of the button (if set)
use setIcon() to change as with all icons
rollIcon - references the rollIcon (if set)
downIcon - references the downIcon (if set)
rolled - read-only true if button is being rolled over else false
pressed - read-only true if button is being pressed else false
toggled - read-only true if button is in toggled state, false if button is in original state
note: on mousedown toggle may not be switched over - except on mobile
so would recommend for consistency checking on click or tap or mouseup
toggleBacking - references the toggle backing (if set)
rollToggleBacking - references the toggle roll backing (if set)
downToggleBacking - references the toggle down backing (if set)
toggleIcon - references the toggle icon (if set)
rollToggleIcon - references the toggle roll icon (if set)
downToggleIcon - references the toggle down icon (if set)
waiting - read-only true if button is in the waiting state within wait time
note: must test this in a mousedown function not click or tap
waitBacking - references the wait backing (if set)
rollWaitBacking - references the wait roll backing (if set)
downWaitBacking - references the wait down backing (if set)
waitIcon - references the wait icon (if set)
rollWaitIcon - references the wait roll icon (if set)
downWaitIcon - references the wait down icon (if set)
focus - get or set the focus property of the Button used for tabOrder
enabled - default is true - set to false to disable
veeObj - an object with ZIM VEE original parameters:value allowing the ZIM VEE values to be referenced
for instance, obj.prop = Pick.choose(obj.veeObj.prop); will reset the the prop to the result of the original ZIM VEE value
ALSO
see ZIM Container for properties such as:
width, height, widthOnly, heightOnly, draggable, level, depth, group
blendMode, hue, saturation, brightness, contrast, etc.
ALSO
see the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.
OPTIMIZED
This component is affected by the general OPTIMIZE setting (default is false)
if set to true, you will have to S.update() after setting certain properties
for example seeing toggle take effect
EVENTS
dispatches a "waited" event if button is in wait state and the wait time has completed
See the CreateJS Easel Docs for Container events such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover
CLOSE ▲PAGE ▤CODE ▤BITS VIDS
CheckBox
zim class - extends a zim.Container which extends a createjs.Container
DESCRIPTION
A checkbox that when pressed toggles the check and a checked property.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const checkBox = new CheckBox(50, "TEST").center().change(()=>{
zog(checkBox.checked); // will be true then false, etc.
});
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports VEE - parameters marked with ZIM VEE mean a zim Pick() object or Pick Literal can be passed
Pick Literal formats: [1,3,2] - random; {min:10, max:20} - range; series(1,2,3) - order, function(){return result;} - function
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
size - (default 60) size in pixels (always square)
label - |ZIM VEE| (default null) ZIM Label object - or String to make a default label (black)
startChecked - |ZIM VEE| (default false) an initial parameter to set checked if true
color - (default darker) the text color of the label
backgroundColor - (default white.toAlpha(.8)) the background color of the box
borderColor - (default darker) the color of the border
borderWidth - (default size/10) thickness of the border
corner - (default 0) the round of the corner
can also be an array of [topLeft, topRight, bottomRight, bottomLeft]
margin - (default 10) is on outside of box so clicking or pressing is easier
indicatorType - (default check) could be square (box) or x
indicatorColor - (default borderColor or black if no border) the color of the indicator
tap - (default false) set to true to tap to activate CheckBox rather than mousedown or click
rtl - (default DIR=="rtl") set to true to force CheckBox to the right of the text
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly
METHODS
setChecked(Boolean) - defaults to true to set button checked (or use checked property)
hasProp(property as String) - returns true if property exists on object else returns false
clone() - makes a copy with properties such as x, y, etc. also copied
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection
ALSO
ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO
see the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.
PROPERTIES
type - holds the class name as a String
checked - gets or sets the check of the box
label - gives access to the label
text - the text of the label
box - the Rectangle of the checkBox
box2 - the border Rectangle of the checkBox
indicator - gives access to the check mark ie. indicator.sca(.8);
indicatorColor - get or set the color of the indicator
enabled - default is true - set to false to disable
veeObj - an object with ZIM VEE original parameters:value allowing the ZIM VEE values to be referenced
for instance, obj.prop = Pick.choose(obj.veeObj.prop); will reset the the prop to the result of the original ZIM VEE value
ALSO
see ZIM Container for properties such as:
width, height, widthOnly, heightOnly, draggable, level, depth, group
blendMode, hue, saturation, brightness, contrast, etc.
ALSO
see the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.
OPTIMIZED
This component is affected by the general OPTIMIZE setting (default is false)
if set to true, you will have to S.update() after setting certain properties
ACTIONEVENT
This component is affected by the general ACTIONEVENT setting
The default is "mousedown" - if set to something else the component will act on click (press)
EVENTS
dispatches a "change" event when pressed on but not when the checked property is set
ALSO
see the CreateJS Easel Docs for Container events such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover
CLOSE ▲PAGE ▤CODE ▤BITS VIDS
RadioButtons
zim class - extends a zim.Container which extends a createjs.Container
DESCRIPTION
A radio button set that lets you pick from choices.
Radio buttons can display radio buttons vertically (default) or horizontally.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const radioButtons = new RadioButtons(50, ["ONE", "TWO", "THREE"]).center().change(()=>{
zog(radioButtons.text); // will be ONE, TWO or THREE
zog(radioButtons.index); // will be 0, 1, or 2
});
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
size - (default 60) in pixels
buttons - an array of button data objects as follows:
[{label:ZIM Label or text, id:optional id, selected:optional Boolean}, {etc...}]
or just a list of labels for default labels ["hi", "bye", "what!"]
vertical - (default true) displays radio buttons vertically - set to false to display horizontally
color - (default darker) the text color of the label
backgroundColor - (default "rgba(255,255,255,.8)") the background color of the circle
borderColor - (default darker) the color of the border
borderWidth - (default size/9) thickness of the border
spacing - (size*.2 for vertical and size for horizontal) the space between radio button objects
margin - (size/5) the space around the radio button itself
always - (default true) if set false, cannot click on selection to unselect it
indicatorColor - (default borderColor or black) the color of the indicator
index - (default 0) - set the index at start
rtl - (default DIR=="rtl") - set to true to put text on left of RadioButtons
selectedIndex - same as index, kept in for backwards compatibility in ZIM DUO
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly
METHODS
setSelected(num) - sets the selected index (or use index) -1 is default (none)
hasProp(property as String) - returns true if property exists on object else returns false
clone() - makes a copy with properties such as x, y, etc. also copied
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection
ALSO
ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO
see the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.
PROPERTIES
type - holds the class name as a String
selected - gets the selected object - selected.label, selected.id, etc.
index - gets or sets the selected index of the buttons
label - current selected label object
text - current selected label text
id - current selected id
buttons - an array of button Container objects holding the shape and label (note - different than buttons parameter)
labels - an array of the ZIM Label objects. labels[0].text = "YUM"; labels[2].y -= 10;
indicators - an array of the zim Shape dot objects. indicators[0].color = "yellow";
enabled - default is true - set to false to disable
ALSO
see ZIM Container for properties such as:
width, height, widthOnly, heightOnly, draggable, level, depth, group
blendMode, hue, saturation, brightness, contrast, etc.
ALSO
see the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.
OPTIMIZED
This component is affected by the general OPTIMIZE setting (default is false)
if set to true, you will have to S.update() after setting certain properties
and S.update() in change event to see component change its graphics
ACTIONEVENT
This component is affected by the general ACTIONEVENT setting
The default is "mousedown" - if set to something else the component will act on click (press)
EVENTS
dispatches a "change" event when pressed but not when index is set
then ask for the properties above for info
ALSO
see the CreateJS Easel Docs for Container events such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover
CLOSE ▲PAGE ▤CODE ▤BITS VIDS
Toggle
zim class - extends a zim.Container which extends a createjs.Container
DESCRIPTION
A Toggle button that toggles off and on - with optional labels
Thanks Andi Erni for the initial design and coding of the Toggle.
See: https://zimjs.com/explore/toggle.htmlNOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const toggle = new Toggle({label:"ON"}).center().change(()=>{
zog(toggle.toggled);
});
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
width - (default 80) the width of the toggle (less labels)
height - (default 50) the height of the toggle
label - (default null) an optional ZIM Label (or text for default label properties)
also see labelLeft for left side text
startToggled - (default false) set to true to start in the toggled position
backgroundColor - (default purple) set to any HTML color for background color
margin - (default 10) the distance around and between the toggle and its parts
indicatorType - (default "circle" or "round") set to "rectangle" or "square" for square indicator
indicatorColor - (default darker)
toggleBackgroundColor - (default "#F93") orange - for toggled background color
try setting the borderColor to the same color as the background for inner color change effect
color - (default darker) the font color of the toggle
borderColor - (default null) the color of the border
borderWidth - (default null - or 1 if borderColor) the size of the border
corner - (default half the height) a corner radius - or an array of corners [topLeft, topRight, bottomRight, bottomLeft]
indicatorCorner - (default 0) change the corner radius of a rectangle toggleType - or an array of corners [topLeft, topRight, bottomRight, bottomLeft]
shadowColor - (default "rgba(0,0,0,.3)" if shadowBlur) the shadow color - set to -1 for no shadow
shadowBlur - (default 14 if shadowColor) the shadow blur - set to -1 for no shadow
time - (default .1) time in seconds for toggle to animate (also see ZIM TIME constant)
labelLeft - (default null) an optional ZIM Label for the left side of the toggle (or text for default label properties)
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly
METHODS
toggle(state) - toggle the toggle - state defaults to true - set to false to un-toggle
hasProp(property as String) - returns true if property exists on object else returns false
clone() - makes a copy with properties such as x, y, etc. also copied
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection
ALSO
ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO
see the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.
PROPERTIES
type - holds the class name as a String
toggled - gets and sets the toggled state of the toggle
text - gets the selected label text or "on" / "off" if no label
indicator - access to the indicator object
background - access to background Rectangle
label - access to the label if provided
labelLeft - access to the label on the left if provided
enabled - default is true - set to false to disable
ALSO
see ZIM Container for properties such as:
width, height, widthOnly, heightOnly, draggable, level, depth, group
blendMode, hue, saturation, brightness, contrast, etc.
ALSO
see the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.
EVENTS
dispatches a "change" event when pressed but not when toggle() is used
ALSO
see the CreateJS Easel Docs for Container events such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover
CLOSE ▲PAGE ▤CODE ▤VIDS
Tip
zim class - extends a a zim.Label which extends a zim.Container which extends a createjs.Container
DESCRIPTION
A Tip() can be used to show some extra information - the tip disappears after an amount of time
Tip has easy positioning along the inside edges or the outside edges of a target.
NOTE
Tip places the tip on the stage when the show() method is called
You can reposition with .mov() etc. if desired
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
new Tip("Press Circle").show(1); // wait one second and show tip at 40 pixels from bottom right
const circle = new Circle().center().tap(()=>{
circleTip.show();
});
const circleTip = new Tip({
text:"This is a default ZIM Circle",
backgroundColor:white,
color:black,
outside:true, // outside the circle
target:circle,
align:CENTER,
valign:BOTTOM,
margin:14,
corner:0,
size:20
});
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
text - (default "Here's a tip!") String for the the text of the tip
tipAlign - (default RIGHT) the horizontal position of the tip (LEFT, CENTER / MIDDLE, RIGHT)
tipValign - (default BOTTOM") the vertical position of the tip (TOP, CENTER / MIDDLE, BOTTOM")
margin - (default 40) distance from side (unless centered) in pixels
marginH - (default margin) distance from horizontal edges
marginV - (default margin) distance from vertical edges
outside - (default false) set to true to place Tip on outside of container
target - (default zdf's stage) tip is placed on stage relative to container
delay - (default 0) set the default delay for show() - can override with show() parameters
time - (default 2) set the default time for show() - can override with show() parameters
mouseClose - (default true) set to false to not hide tip on mouse press
** the rest are parameters for a Label (align and valign are set as textAlign and textValign)
size - (default 36) the size of the font in pixels
font - (default arial) the font or list of fonts for the text
color - (default black) color of font (any CSS color)
rollColor - (default color) the rollover color of the font
shadowColor - (default "rgba(0,0,0,.3)") set to -1 for no shadow - set to any css color to see
shadowBlur - (default 1) if shadow is present
align - ((default LEFT) text registration point alignment also CENTER and RIGHT
valign - (default CENTER) vertical registration point alignment alse MIDDLE / CENTER, BOTTOM
lineWidth - (default false) for no wrapping (use \n) Can set to number for wrap
lineHeight - (default getMeasuredLineHeight) set to number to adjust line height
backing - (default null) a Display object for the backing of the label (eg. Shape, Bitmap, Container, Sprite)
see ZIM Pizzazz module for a fun set of Shapes like Boomerangs, Ovals, Lightning Bolts, etc.
outlineColor - (default null - or black if outlineWidth set) - the color of the outline of the text
outlineWidth - (default null - or (size*.2) if outlineColor set) - the thickness of the outline of the text
backgroundColor - (default null) set to CSS color to add a rectangular color around the label
The background color will change size to match the text of the label
Note: the backgroundColor is different than a backing which can be any Display Object
and background parameters are ignored if a backing parameter is set
backgroundBorderColor - (default null) the background stroke color
backgroundBorderWidth - (default null) thickness of the background border
corner - (default 0) the round of corner of the background if there is one
can also be an array of [topLeft, topRight, bottomRight, bottomLeft]
backgroundDashed - (default null) set to true for dashed background border (if backgroundBorderColor or backgroundBorderWidth set)
padding - (default 10 if backgroundColor set) places the border this amount from text (see paddingH and paddingV)
padding parameters are ignored if there is no backgroundColor set (also ignored if a backing parameter is set)
paddingH - (default padding) places border out at top bottom
paddingV - (default padding) places border out at left and right
shiftH - (default 0) move the label (CreateJS Text) inside the Label container horizontally
shiftV - (default 0) move the label (CreateJS Text) inside the Label container vertically
rollPersist - (default false) set to true to maintain rollover stage as long as mousedown or press is activated (used by Buttons)
labelWidth - (default null) the same as the lineWidth - the text will wrap at the labelWidth (added to match labelHeight)
labelHeight - (default null) the height of the text - setting this will probably alter the font size - so the size parameter is overwritten
for labelHeight to work, the labelWidth must also be set
using labelWidth and labelHeight together allow you to fit as much text into specified width and height dimensions
maxSize - (default null) set to limit the font size when using labelWidth and labelHeight
bold - (default false) set to true to bold the tip
italic - (default false) set to true to italic the tip
variant - (default false) set to true to set the tip to small caps
splitWords - (default false) set to true to split words when wrapping
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly
METHODS
show(delay, time) - show the tip - delay in s defaults to 0 and time in s defaults to 2 (also see ZIM TIME constant)
default delay and time can be set with main default and time parameters for Tip()
hide() - hides tip - show() will also hide the tip automatically after the time provided
clear() - hides tip and removes the call to a delayed tip using a delay time in show()
hasProp(property as String) - returns true if property exists on object else returns false
clone() - makes a copy with properties such as x, y, etc. also copied
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection
ALSO
see all methods of a Label() such as setColorRange(), etc.
ALSO
ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO
see the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.
PROPERTIES
tipAlign - get or set the horizontal alignment of the tip
tipValign - get or set the vertical alignment of the tip
text - get or set the text of the Tip
ALSO
see all properties of a Label() such as size, color, etc.
ALSO
see ZIM Container for properties such as:
width, height, widthOnly, heightOnly, draggable, level, depth, group
blendMode, hue, saturation, brightness, contrast, etc.
ALSO
see the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.
EVENTS
See the CreateJS Easel Docs for Container events such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover
CLOSE ▲PAGE ▤CODE ▤
Pane
zim class - extends a zim.Container which extends a createjs.Container
DESCRIPTION
Adds a window for alerts, etc.
You need to call the pane.show() to show the pane and pane.hide() to hide it.
You do not need to add it to the stage - it adds itself centered.
You can change the x and y (the origin and registration point are in the middle).
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
new Pane("Watch out!", yellow).show(); // pressing anywhere will close pane (see parameters for options)
EXAMPLE
// if app is in an iFrame, this will get keyboardAccess using a hidden F.keyboardMessage()
// good for games that need keyboard if the game is in an iFrame like the Editor or CodePen
// NOTE: do not use the on("close", f) method as it will not receive an event
// with keyboardAccess the events on the canvas are turned off and captured in an any iFrame
new Pane({content:"START", keyboardAccess:true}).show(()=>{zog("Keys ready")});
EXAMPLE
const pane = new Pane({width:600, height:250, modal:false, displayClose:false});
const cancel = new Button(220, 100, "CANCEL", red).center(pane).mov(-130);
const confirm = new Button(220, 100, "CONFIRM", green).center(pane).mov(130);
cancel.on("click", ()=>{pane.hide();});
confirm.on("click", ()=>{zgo("https://zimjs.com")});
pane.show(); // pressing anywhere will close pane (see parameters for options)
EXAMPLE
// as above but using a callback function in show()
const pane = new Pane({width:600, height:250, modal:false, displayClose:false}).show(confirm=>{
if (confirm) zgo("https://zimjs.com");
});
const cancel = new Button(220, 100, "CANCEL", red).center(pane).mov(-130).tap(()=>{
pane.hide(false);
});
const confirm = new Button(220, 100, "CONFIRM", green).center(pane).mov(130).tap(()=>{
pane.hide(true);
});
EXAMPLE
// as above but using CONTENT CONFIG OBJECT
const pane = new Pane({
width:600,
height:250,
modal:false,
displayClose:false,
content:{
buttonScale:1,
buttons:[
{
label:"CANCEL",
bgColor:red,
call:()=>{pane.hide();}
}, {
label:"CONFIRM",
bgColor:green,
call:()=>{zgo("https://zimjs.com");}
}
]
}
}).show();
EXAMPLE
// custom backing with ZIM Pizzazz import at top
// import zim from "https://zimjs.org/cdn/016/zim_pizzazz"
new Pane({
content:new Label({color:white, text:"STOP", size:50}),
backing:makePattern({
type:"stripes",
colors:series(red,black),
rows:20
}).alp(.8)
}).show();
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
content - (default " ") optional content to be centered in one of three formats:
a string or number to add a ZIM Label - color darker
a ZIM DisplayObject such as a Circle or a Container with more objects, etc.
a content configuration object {} with the following properties - any are optional:
header - a ZIM DisplayObject for the top of the content
message - text that will put into a ZIM Label - default darker - see color property
display - a ZIM DisplayObject for beneath the message
buttons - an array of ZIM Button objects or configuration objects {} as follows:
{label, color, rollColor, backgroundColor, rollBackgroundColor, call}
with call being a callback function for when the button is pressed
buttonScale - the scale for the buttons
color - the color of the message
spacingH - horizontal space between the buttons
spacingV - vertical space between the content areas
align - default CENTER, or use LEFT or RIGHT
backgroundColor - (default white) a css color for the background of the Pane
color - (default black) a css color for the text color of the Pane
width - (default AUTO) width of pane - AUTO will matches content width - see also autoPadding and autoPaddingH
height - (default AUTO) height of pane - AUTO will matches content width - see also autoPadding and autoPaddingV
draggable - (default false) pass in true to drag the pane
resets - (default true) resets position to start on re-open - set to false to keep last position
modal - (default true) pane will close when user clicks off the pane - set to false to keep pane open
corner - (default 20) is the corner radius - set to 0 for no corner
can also be an array of [topLeft, topRight, bottomRight, bottomLeft]
backdropColor - (default "rgba(0,0,0,.2)") the color of the background that fills the stage
shadowColor - (default "rgba(0,0,0,.3)") set to -1 for no shadow
shadowBlur - (default 20) how blurred the shadow is if shadow is set
center - (default true) centers the pane
if center is false you will have to set x and y for the pane
the registration point and the origin inside the pane is in the center
you can adjust the label placement by changing its x and y or registration point
displayClose - (default true) closes the Pane if display backing is pressed
if draggable is set to true, displayClose will automatically be set to false
backdropClose - (default true) closes the Pane if backdrop is pressed
backing - (default null) a Display object for the backing of the pane (eg. Shape, Bitmap, Container, Sprite)
see ZIM Pizzazz module for a fun set of Shapes like Boomerangs, Ovals, Lightning Bolts, etc.
as well as patterned backings using Pizzazz 3
fadeTime - (default 0) seconds to fade in and out - also see ZIM TIME constant
container - (default - the default stage) container for the pane
titleBar - (default null - no titleBar) a String or ZIM Label title for the pane that will be presented on a titleBar across the top
titleBarColor - (default black) the color of the titleBar text if a titleBar is requested
titleBarBackgroundColor - (default "rgba(0,0,0,.2)") the background color of the titleBar if a titleBar is requested
titleBarHeight - (default fit label) the height of the titleBar if a titleBar is requested
close - (default false) - a close X for the top right corner that closes the pane when pressed
closeColor - (default grey) - the color of the close X if close is requested
autoPadding - (default 70) the padding used by AUTO width or height
autoPaddingH - (default autoPadding) the padding used by AUTO width
autoPaddingV - (default autoPadding) the padding used by AUTO height
keyboardAccess - (default false) set to true to adds a click through iframe to gain keyboard control
this sets an invisible Frame keyboardMessage() that will close the pane and give key access to iFrames
do not use if expecting interactive content in the Pane - it is for a start message only
do not use on("close", f) as it will not be captured with keyboardAccess true
instead, use the callback in show() to call a function on close
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly
METHODS
show(call, params) - shows the pane (returns the pane for chaining)
pass in an optional callback function that will be called when the pane closes
pass in an optional params object that will be passed to the callback when the pane closes
also see the closeCall and closeParams property to set these dynamically
for instance, if the pane has YES and NO buttons, the closeParams can be set to true or false
for easy results to an option pop-up
(as of ZIM ZIM 01 can also use pos(), loc(), center(), etc.)
hide(params, callEvent) - hides the pane
params will set the closeParams property that gets sent to a callback function in the show()
callEvent defaults to false - set to true to also call close event
(as of ZIM ZIM 01 can also use removeFrom())
toggle(state - default null) - shows if hidden and hides if showing (returns the pane for chaining)
or pass in true to show pane or false to hide pane
add(obj, index, center, replace) - supports DUO - add object to the content container with optional center
or just add content like usual to the contentContainer.
index is the level in the contentContainer - default is the top
center (default true) for Pane (different than Panel and Window which have false as default)
replace (default true) for Pane (different than Panel and Window which have false as default)
will replace the current content with the new content
see also content parameter of Pane and contentContainer property
returns the pane for chaining
hasProp(property as String) - returns true if property exists on object else returns false
clone() - makes a copy with properties such as x, y, etc. also copied (returns the new pane for chaining)
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection
ALSO
ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO
see the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.
PROPERTIES
type - holds the class name as a String
closeCall - a function to call when the pane closes (see also call parameter of show method)
closeParams - an object to pass to the closeCall (see also params parameter of show method)
backing - or display - reference to the pane box
contentContainer - ZIM Container used to hold added content (formerly the content property)
use the add() method or add directly to the contentContainer property of the pane
content - gives access to the content provided as a parameter to the Pane()
** in the past, content refered to what is now the contentContainer
If a content config object {} is used, the following properties are added to the Pane()
header - reference to the header if provided
message - reference to the message if provided - this is a Label
text - reference to the text of the message if provided
display- reference to the display if provided
buttons - an array of the Button objects if provided
config - the original content config object {}
titleBar - gives access to the titleBar Container - which also has a background property
titleBarLabel - gives access to the titleBar label
toggled - read-only Boolean property as to whether pane is showing
close - access to the ZIM Shape if there is a close X
backdrop - reference to the backdrop that covers the stage
container - get or set the container the pane will be added to
resetX - if reset is true you can dynamically adjust the position if needed
resetY - and the y position for reset...
enabled - set to false to disable component
ALSO
see ZIM Container for properties such as:
width, height, widthOnly, heightOnly, draggable, level, depth, group
blendMode, hue, saturation, brightness, contrast, etc.
ALSO
see the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.
OPTIMIZED
This component is affected by the general OPTIMIZE setting (default is false)
if set to true, you will have to S.update() after setting certain properties
and S.update() in change event to see component change its graphics
ACTIONEVENT
This component is affected by the general ACTIONEVENT setting
The default is "mousedown" - if set to something else the component will act on click (press)
EVENTS
dispatches a "closing" event when about to be closed - good for reloading a game for instance
dispatches a "close" event when closed by clicking on backing, display, close, etc. when applicable
see also call and params parameters of show() plus closeCall and closeParams properties
see also params parameter of hide() which also sets the closeParams property
dispatches a "change" event when closed by clicking on backing, display, close, etc. when applicable
dispatches a "fadedin" event if fadeTime is set and pane has finished its fade in animation
dispatches a "fadedout" event if fadeTime is set and pane has finished its fade out animation
ALSO
see the CreateJS Easel Docs for Container events such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover
CLOSE ▲PAGE ▤CODE ▤BITS VIDS
Panel
zim class - extends a zim.Container which extends a createjs.Container
DESCRIPTION
A simple panel with titleBar and optional arrow for more panels.
Panel can be set draggable and can have a collapse button and a close button
See: https://zimjs.com/explore/panel.htmlNOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// make a panel with two pages
const panel = new Panel({titleBar:series("TODAY", "TOMORROW")})
.center();
// content for panel 1
const today = new Circle(30, yellow);
panel.add(today, 0, true); // content, level, center on content
// content for panel 2
const tomorrow = new Label("-30");
// event to change content as panels change
panel.on("change", ()=>{
if (today.parent) {
panel.add(tomorrow, 0, true, true); // content, level, center and replace
} else {
panel.add(today, 0, true, true); // content, level, center and replace
}
S.update();
});
EXAMPLE
const panel = new Panel({
width:400,
height:250,
bgColor:new GradientColor([black,dark],90),
titleBar:"CONTENT",
draggable:true,
content:{
message:"We shall greet you!",
color:lighter, // override default darker
display:new TextInput({placeholder:"enter name"}).sca(.7),
align:CENTER, // default
spacingV:25, // 20 is default
spacingH:10, // default
buttonScale:.5, // default
buttons:[ // or just a single button object
{
label:"GREET",
bgColor:new GradientColor([green,blue],90),
width:300,
call:()=>{
new Emitter({
obj:new Label("Hello "+panel.display.text, 80, null, [green,blue,orange,yellow,pink]),
startPaused:true,
shrink:false,
life:2,
gravity:2,
force:{min:2,max:6}
}).loc(panel).spurt(20).on("spurtfizzed",e=>{e.target.dispose();});
}
}, {
// button:new Button(), // can also specify a custom Button
label:"CLEAR",
bgColor:new GradientColor([yellow,orange],90),
call:()=>{panel.display.text="";}
}
]
}
}).centerReg();
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports VEE - parameters marked with ZIM VEE mean a zim Pick() object or Pick Literal can be passed
Pick Literal formats: [1,3,2] - random; {min:10, max:20} - range; series(1,2,3) - order, function(){return result;} - function
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
width - (default 250) the width of the panel
height - (default 300) the height of the panel
content - (default null) optional content to be centered in one of three formats:
a string or number to add a ZIM Label - default white
a ZIM DisplayObject such as a Circle or a Container with more objects, etc.
a content configuration object {} with the following properties - any are optional:
header - a ZIM DisplayObject for the top of the content
message - text that will put into a ZIM Label - default color white - see color property
display - a ZIM DisplayObject for beneath the message
buttons - an array of ZIM Button objects or configuration objects {} as follows:
{label, color, rollColor, backgroundColor, rollBackgroundColor, call}
with call being a callback function for when the button is pressed
buttonScale - the scale for the buttons
color - the color of the message
spacingH - (default 20*buttonScale) horizontal space between the buttons
spacingV - (default 20) vertical space between the content areas
align - default CENTER, or use LEFT or RIGHT
titleBar - |ZIM VEE| (default "PANEL") a String or ZIM Label title for the panel that will be presented on a titleBar across the top
Panel must have a titleBar - use a Pane or a Rectangle if a titleBar is not desired.
titleBarColor - |ZIM VEE| (default black) the text color of the titleBar
titleBarBackgroundColor - |ZIM VEE| (default "rgba(0,0,0,.2)") the background color of the titleBar
titleBarHeight - (default fit label) the height of the titleBar
backgroundColor - |ZIM VEE| (default lighter) background color (use clear - or "rbga(0,0,0,0)" for no background)
borderColor - |ZIM VEE| (default pewter) border color
borderWidth - (default 1) the thickness of the border
corner - (default 5) the round of corner
can also be an array of [topLeft, topRight, bottomRight, bottomLeft]
close - (default false) - add a close icon top right
closeColor - (default titleBarColor) the color of the close icon
next - (default true if more than one panel) set to false to not show an next arrow if multiple panels
nextColor - (default titleBarColor) the color of the next icon
extraButton - (default null) creates a little square button with the letter R for reset
this is made with the group style id of "extraButton"
use the extraButton property to access the button to change its label or capture an event, etc.
collapse - (default false) - set to true to add a collapse icon to the titleBar that reduces the panel so only the bar shows and adds an icon to expand
also can double click bar to collapse panel
collapseColor - (default grey) - the color of the collapse icon
collapsed - (default false) set to true to start the panel collapsed
align - (default LEFT) set to CENTER, MIDDLE or "right" to align the label on the titleBar
this may get in the way of the close, arrow, collapse or extra buttons at right
shadowColor - (default "rgba(0,0,0,.3)" if shadowBlur) the shadow color - set to -1 for no shadow
shadowBlur - (default 14 if shadowColor) the shadow blur - set to -1 for no shadow
draggable - (default true if titleBar) set to false to not allow dragging titleBar to drag window
boundary - (default null) set to ZIM Boundary() object - or CreateJS.rectangle()
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly
METHODS
add(obj, index, center, replace) - supports DUO - add object to the content container with optional center
note that the content container is below the title bar
index is the level in the contentContainer - default is the top
replace will replace the current content with the new content
see also content parameter of Panel and contentContainer property
returns the panel for chaining
nextPanel(index, event) - show next panel - the panels are set up to be a series or random or function based
this means there is not necessarily an order to be able to go backwards to... so, only forward!
If a series is provided to the Panel title, etc. then the index can be used to go to the title in the series at the index
event (default false) will dispatch a change event if nextPanel is called
hasProp(property as String) - returns true if property exists on object else returns false
collapse(state) - state defaults to true to collapse or set to false to expand collapsed panel
must start with the collapse parameter set to true
also see collapsed property
clone() - makes a copy with properties such as x, y, etc. also copied
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection
ALSO
ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO
see the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.
PROPERTIES
type - holds the class name as a String
contentContainer - ZIM Container used to hold added content (formerly the content property)
this is below the title bar - use the add() method or add directly to the contentContainer property of the panel
content - gives access to the content provided as a parameter to the Panel()
** in the past, content refered to what is now the contentContainer
If a content config object {} is used, the following properties are added to the Panel()
header - reference to the header if provided
message - reference to the message if provided - this is a Label
text - reference to the text of the message if provided
display- reference to the display if provided
buttons - an array of the Button objects if provided
config - the original content config object {}
panelHeight - get and set the height of the panel without scaling it as height does (for width, remake the Panel object)
titleBar - access to the titleBar container
label - access to the label of the current panel
text - access to the text of the current panel
titleBar - gives access to the titleBar Container - which also has a background property
titleBarLabel - gives access to the titleBar label
closeIcon - access to the close button
collapseIcon - access to the ZIM Shape if there is a collapse triangle
collapsed - get or set whether the panel is collapsed - must start with collapse parameter set to true
also see collapse() method
arrow - access to the next arrow
background - access to the background Rectangle
extraButton - access to the Label for the extra button if extraButton parameter is set to true
use this to set the text in the button (a one letter button is expected - for instance, i for info, R for reset, etc.)
overlay - access to the overlay Rectangle used if enabled = false
enabled - default is true - set to false to disable
blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation
group - used when the object is made to add STYLE with the group selector (like a CSS class)
ALSO
see ZIM Container for properties such as:
width, height, widthOnly, heightOnly, draggable, level, depth, group
blendMode, hue, saturation, brightness, contrast, etc.
ALSO
see the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.
EVENTS
dispatches a "change" event when arrow is pressed to go to the next panel
dispatches a "close" event when closed with close button if there is a close button
dispatches a "collapse" event if collapsing
dispatches a "expand" event if expanding after being collapsed
ALSO
see the CreateJS Easel Docs for Container events such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover
CLOSE ▲PAGE ▤CODE ▤VIDS
Window
zim class - extends a zim.Container which extends a createjs.Container
DESCRIPTION
Adds a window for content that can be swiped and scrolled.
NOTE
if zim namespace zns = true then this overwrites a JS Window - so the JS Window is stored as document.Window
NOTE
set the enable property to false if animating the position of the whole Window
then set the enable property to true on the animate call function. See update() method for more.
NOTE
to add ZIM Swipe() to objects in window set the overrideNoSwipe parameter of Swipe to true
NOTE
if animating the window off screen then either turn optimize:false
or use window.update() in the "animation" event with the animate({events:true})
NOTE
if window content has items set to visible false then set optimize false to avoid conflict
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const w = new Window({scrollBarDrag:true, padding:20}).center();
const t = new Tile(new Circle(20, red), 4, 20, 20, 20);
w.add(t);
// the above would only drag on the circles (or the scrollbars)
// adding a Rectangle to help dragging
w.add(new Rectangle(w.width-20,t.height,dark), 0);
// or could have added it to the bottom of the Tile
// new Rectangle(w.width-20,t.height,dark).addTo(t).bot();
EXAMPLE
// Make two windows resize based on one resizeHandle
// We will use a List which extends a Window
// See https://zimjs.com/explore/splitter.html
const listWidth = 200;
const windowWidth = 600;
const margin = 50;
const list = new List({
width:listWidth+windowWidth,
align:LEFT,
scrollBarDrag:true,
resizeHandle:true,
resizeBoundary:new Boundary(-listWidth-windowWidth+margin,0,listWidth+windowWidth-margin*2, 0),
// resizeVisible:true
})
.resize(listWidth)
.pos(120,-80,LEFT,CENTER);
list.items[1].label.text = "Some very long but important option!";
list.on("resize", ()=>{
const point = list.resizeHandle.localToGlobal(0,0);
win.resize(list.x+listWidth+windowWidth-point.x);
win.x = point.x;
});
const win = new Window({
width:windowWidth,
height:list.height,
paddingH:20
}).loc(list).bot().mov(list.width);
win.add(new Pack());
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
width - (default 300) the width of the window
height - (default 200) the height of window - including the titleBar if there is a titleBar
content - (default null) optional content to be centered in one of three formats:
a string or number to add a ZIM Label - default white
a ZIM DisplayObject such as a Circle or a Container with more objects, etc.
a content configuration object {} with the following properties - any are optional:
** see Panel() and Pane() for examples of content configuration object being used
header - a ZIM DisplayObject for the top of the content
message - text that will put into a ZIM Label - default color white - see color property
display - a ZIM DisplayObject for beneath the message
buttons - an array of ZIM Button objects or configuration objects {} as follows:
{label, color, rollColor, backgroundColor, rollBackgroundColor, call}
with call being a callback function for when the button is pressed
buttonScale - the scale for the buttons
color - the color of the message
spacingH - (default 20*buttonScale) horizontal space between the buttons
spacingV - (default 20) vertical space between the content areas
scrollBar - set to true if a default scrollBar is present or a number if custom
backgroundColor - (default dark) background color (use clear - or "rbga(0,0,0,0)" for no background)
borderColor - (default silver) border color
borderWidth - (default 1) the thickness of the border
padding - (default 0) places the content in from edges of border (see paddingH and paddingV)
padding is ignored if content x and y not 0 - and really only works on top left - so more like an indent
corner - (default 0) is the rounded corner of the window (does not accept corner array - scrollBars are too complicated)
swipe - (default auto/true) the direction for swiping set to none / false for no swiping
also can set swipe to just vertical or horizontal
scrollBarActive - (default true) shows scrollBar (set to false to not)
scrollBarDrag - (default false) set to true to be able to drag the scrollBar
scrollBarColor - (default borderColor) the color of the scrollBar
scrollBarAlpha - (default .3) the transparency of the scrollBar
scrollBarFade - (default true) fades scrollBar unless being used
scrollBarH - (default true) if scrolling in horizontal is needed then show scrollBar
scrollBarV - (default true) if scrolling in vertical is needed then show scrollBar
slide - (default true) Boolean to throw the content when drag/swipe released
slideFactor - (default .9) is the factor multiplied by dragging velocity (1 no slowing, .7 fast slowing)
slideSnap - (default true - false if no vertical scroll) slides past boundary and then snaps back to boundary when released
also VERTICAL, HORIZONTAL, and false
slideSnapDamp - (default .1) the damping to snap back to boundary
interactive - (default true) allows interaction with content in window
set to false and whole window will be swipeable but not interactive inside
shadowColor - (default rgba(0,0,0,.3)) the color of the shadow
shadowBlur - (default 20) set shadowBlur to -1 for no drop shadow
paddingH - (default padding) places content in from left and right (ignored if content x not 0)
paddingV - (default padding) places content in from top and bottom (ignored if content y not 0)
scrollWheel - (default true) scroll vertically with scrollWheel
damp - (default null) set to .1 for instance to damp the scrolling
titleBar - (default null - no titleBar) a String or ZIM Label title for the window that will be presented on a titleBar across the top
titleBarColor - (default black) the text color of the titleBar if a titleBar is requested
titleBarBackgroundColor - (default "rgba(0,0,0,.2)") the background color of the titleBar if a titleBar is requested
titleBarHeight - (default fit label) the height of the titleBar if a titleBar is requested
draggable - (default true if titleBar) set to false to not allow dragging titleBar to drag window
boundary - (default null) set to ZIM Boundary() object - or CreateJS.rectangle()
onTop - (default true) set to false to not bring Window to top of container when dragging
close - (default false) - a close X for the top right corner that closes the window when pressed
closeColor - (default grey) - the color of the close X if close is requested
cancelCurrentDrag - (default false) - set to true to cancel window dragging when document window loses focus
this functionality seems to work except if ZIM is being used with Animate - so we have left it turned off by default
fullSize - (default false) - set to true to add a fullsize icon to the titleBar
to let user increase the size of the window to the frame - will turn into a reduce size icon
fullSizeColor - (default grey) - the color of the fullSize icon
resizeHandle - (default false) - set to true to rollover bottom right corner to resize window with resizeHandle
collapse - (default false) - set to true to add a collapse button to the titleBar that reduces the window so only the bar shows and adds a button to expand
also can double click bar to collapse window
collapseColor - (default grey) the color of the collapse icon
collapsed - (default false) set to true to start the window collapsed
optimize - (default true) set to false to not turn DisplayObjects visible false if they are not on within 300 pixels of the window
as the Window is scrolled, any objects within the content and any objects within one level of those objects
are set to visible false if their bounds are not hitting the the window bounds + 300 - thanks Ami Hanya for the suggestion
also see optimize property
if window content has items set to visible false then set optimize false to avoid conflict
resizeBoundary - (default null) add a ZIM Boundary() object for the resize handle - relative to the resize handle start position
new Boundary(-100, 0, 200, 0) - would allow the resize handle to move to the left or right 100 pixels but not up or down
new Boundary(0, -100, 0, 200) - would allow the resize handle to move to up or down 100 pixels but not left or right
new Boundary(0,0,100,100) - would allow the window to expand in x or y 100 pixels but not grow smaller
new Boundary(-100,-100,100,100) - would allow the window to shrink in x or y 100 pixels but not grow bigger
resizeVisible - (default false) set to true to always see the resizeHandle - if resizeHandle is set to true
continuous - (default false) set to true (or VERTICAL) to lock window to vertical access and ignore boundary
or set to HORIZONTAL to lock window to horizontal and ignore boundary
used internally for when scrolling should not be limited but rather wrapped such as with ZIM List with continuous:true
will set scrollBarActive to false
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly
METHODS
add(obj, index, center, replace) - supports DUO - parameters or single object with properties that match parameters
adds obj to content container of window (at padding) must have bounds set
you can add individual objects but may find it easier to make a Container with dimensions
then add and position objects in the container and add the container.
If adding individual objects and adjusting their x and y or scale, do so first and then add()
or if adjusting after adding and the object goes outside the window size then you should call update()
which will reset the scrollbars.
index is the level or layer in the content with 0 being at the bottom
center will center the content in the visible window
replace defaults to false and if set to true, removes all content then adds the obj.
returns window for chaining
remove(obj) - removes object from content container of window and updates - returns window for chaining
removeAll() - removes all objects from content container of window and updates - returns window for chaining
resize(width, height) - resizes the Window without scaling the content (also calls update() for scroll update)
width and height are optional - returns window for chaining
update() - resets window scrolling if perhaps the content gets bigger or smaller
update() does not quite update the dragBoundary due to a timeout in waiting for scrolls to be set
so if animating the position of a window, set the enable property to false before animating
then set the enable property to true on the animate call function
cancelCurrentDrag() - stop current drag on window - but add dragging back again for next drag
fullSize(state) - state defaults to true to set window to fullsize or set to false to go back to normal
must start with the fullSize parameter set to true
also see fullSized property
collapse(state) - state defaults to true to collapse or set to false to expand collapsed window
must start with the collapse parameter set to true
also see collapsed property
clone(recursive) - makes a copy with properties such as x, y, etc. also copied
recursive (default true) clones the window content as well (set to false to not clone content)
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection
ALSO
ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO
see the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.
PROPERTIES
type - holds the class name as a String
backing - ZIM Shape used for backing of Window
backgroundColor - the color of the backing
borderColor - the color of the border
borderWidth - the width of the border
contentContainer - ZIM Container used to hold added content (formerly the content property)
content - gives access to the content provided as a parameter to the Window()
** in the past, content refered to what is now the contentContainer
If a content config object {} was passed in the following properties are added to the Window()
header - reference to the header if provided
message - reference to the message if provided - this is a Label
text - reference to the text of the message if provided
display- reference to the display if provided
buttons - an array of the Button objects if provided
config - the original content config object {}
optimize - see optimize parameter - set to true (default) or false to optimize scrolling of Window
if window content has items set to visible false then set optimize false to avoid conflict
enabled - get or set whether the Window is enabled
scrollEnabled - get or set whether the Window can be scrolled
scrollBar - data object that holds the following properties (with defaults):
you can set after object is made - call window.update() to see change
scrollBar.horizontal = zim Shape // the horizontal scrollBar rectangle shape
scrollBar.vertical = zim Shape // the vertical scrollBar rectangle shape
scrollBar.color = borderColor; // the color of the scrollBar
scrollBar.size = 6; // the width if vertical or the height if horizontal
scrollBar.minSize = 12; // for the height if vertical or the width if horizontal
scrollBar.spacing = 3 + size + borderWidth / 2;
scrollBar.margin = 0; // adds extra space only at end by scrollBars
scrollBar.corner = scrollBar.size / 2;
scrollBar.showTime = .5; // s to fade in
scrollBar.fadeTime = 3; // s to fade out
scrollBar.speed = .5 // scrollwheel speed for x and y scrolling with mouse wheel
scrollX - gets and sets the content x position in the window (this will be negative)
scrollY - gets and sets the content y position in the window (this will be negative)
scrollXMax - gets the max we can scroll in x based on content width - window width (plus padding and margin)
scrollYMax - gets the max we can scroll in y based on content height - window height (plus padding and margin)
titleBar - access to the ZIM Container for the titleBar if there is a titleBar also has a backing property
titleBarLabel - access to the ZIM Label of the titleBar if there is a titleBar
closeIcon - access to the ZIM Shape if there is a close X
fullSizeIcon - access to the ZIM Container if there is a fullSize icon
fullSized - get or set whether the window is full sized - must start with fullSize parameter set to true
also see fullSize() method
collapseIcon - access to the ZIM Shape if there is a collapse triangle
collapsed - get or set whether the window is collapsed - must start with collapse parameter set to true
also see collapse() method
resizeHandle - access the ZIM Rectangle that makes up the resizeHandle when resizeHandle parameter is set to true
resizeHandle.removeFrom() would stop resize from being available and resizeHandle.addTo(window) would activate it again
continuous - get if window is set to continuous - see continuous parameter
ALSO
see ZIM Container for properties such as:
width, height, widthOnly, heightOnly, draggable, level, depth, group
blendMode, hue, saturation, brightness, contrast, etc.
ALSO
see the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.
EVENTS
dispatches a "select" event when clicked on in a traditional manner (fast click with little movement)
dispatches a "hoverover" event when rolled on without moving for 300 ms
dispatches a "hoverout" event when not hovering due to movement or mouseout on the window
dispatches a "scrolling" event when the window scrolls
dispatches a "close" event when the window is closed with the x on the titleBar if there is a titleBar
dispatches a "slidestart" event if slide is true and window starts sliding (on pressup)
dispatches a "slidestop" event if slide is true and window stops sliding
dispatches a "resize" event if resizing
dispatches a "collapse" event if collapsing
dispatches a "expand" event if expanding after being collapsed
dispatches a "fullsize" event if made fullscreen
dispatches a "originalsize" event if reduced from fullscreen
ALSO
see the CreateJS Easel Docs for Container events such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover
CLOSE ▲PAGE ▤CODE ▤BITS VIDS
Page
zim class - extends a zim.Container which extends a createjs.Container
DESCRIPTION
ZIM Page() is a Container() with Rectangle() backing.
For years, many questions were asked - how to make a page in ZIM.
Now, we have decided to officially answer that! ZIM Page().
An easy way to handle linear gradients is provided as well as a custom background
such as a ZIM Pizzazz pattern.
To keep things brief, Page is expected to fit the stage.
So border, corner, dashed, etc. has been left out.
If the page is smaller and these are desired...
old-school-it and make a Container and add the desired Rectangle.
SEE: https://zimjs.com/cat/page.html
SEE: Docs for ZIM Pages() as well to handle multiple pages.
SEE: ZIM Panel(), ZIM Pane() and ZIM Window() for alternatives.
NOTE A Page object will start with one child or two children if a pattern is specified.
NOTE Do not use Page with Layout as it will overlay the region backgroundColors - instead use a Container
NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const page = new Page(W, H, red, pink).addTo();
page.title = new Label("A Page!").loc(100,100,page);
page.content = new Circle().center(page);
page.nav = new Tabs().pos(0,100,CENTER,BOTTOM,page);
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports VEE - parameters marked with ZIM VEE mean a zim Pick() object or Pick Literal can be passed
Pick Literal formats: [1,3,2] - random; {min:10, max:20} - range; series(1,2,3) - order, function(){return result;} - function
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
width - (default zimDefaultFrame.width) the width of the Page
but backing is sized to screen.width if no width is provided
height - (default zimDefaultFrame.height) the height of the Page
but backing is sized to screen.height if no height is provided
color - |ZIM VEE| (default zim.light) the color of the page
color2 - |ZIM VEE| (default null) a second color which would form a zim.GradientColor() as the color
angle - (default 90) the angle for the gradient if there is a gradient
corner
pattern - (default null) a DisplayObject that will be added to the page above the backing
For instance, import zim_pizzazz and use:
makePattern("slants", series(grey,dark), 20, 52, 40).alp(.2)
scalePattern - (default "fill") scale the pattern so it fills the window (formerly "bigger" or "outside")
set to false for no scaling or:
FIT or "fit" fits inside the Page keeping proportion (formerly "smallest")
FILL or "fill" fills the Page keeping proportion (formerly "biggest" or "outside")
FULL or "full" keeps both x and y scales - may stretch object (formerly "both")
borderColor (default null) set a color for the border
borderWidth (default 1 if borderColor) set a borderWidth for the border
cache - (default false or true for gradient or pattern) whether the backing and pattern is cached
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly
METHODS
clone(recursive) - makes a copy with properties such as x, y, etc. also copied
recursive (default false) - set to true to copy children of the object (these will not get custom properties, no drag, events, etc.)
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection
ALSO
ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO
see the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.
PROPERTIES
type - holds the class name as a String
backing - access the backing Rectangle
pattern - access the pattern object if one is provided
color - get or set the color of the backing Rectangle
ALSO
see ZIM Container for properties such as:
width, height, widthOnly, heightOnly, draggable, level, depth, group
blendMode, hue, saturation, brightness, contrast, etc.
ALSO
see the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.
EVENTS
See the CreateJS Easel Docs for Container events such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover
CLOSE ▲PAGE ▤CODE ▤VIDS
Central
zim class - extends a zim.Container which extends a createjs.Container
DESCRIPTION
ZIM Central() is a Container() with its origin and registration point in the center.
It will resize to the stage so that it stays in the middle.
The container will scale only to fit within the stage height.
This is the same functionality as the classic three.js full window scaling.
Note, that the origin is in the middle of the stage - also like three.js
but the y values still are negative going up and positive going down like usual ZIM.
Objects would then be added to Central rather than the stage
to emulate this form of scaling.
This may work well with three.js on top of beneath ZIM using the Three helper module
There is a lay parameter that can be set to UNDER or OVER.
The interactive parameter can be set to true to control three.js or false to control ZIM.
Set the Frame scaling to FULL and add ZIM content to a Central to match the scaling of three.js.
See https://zimjs.com/three/central.html
NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// most likely in a FULL Frame scaling mode
const central = new zim.Central()
.addTo(); // or center() or centerReg() - will always just centerReg()
const circle = new Circle(100)
.center(central).alp(.5);
new Slider({max:1, value:.5})
.pos(0,200,CENTER,CENTER,central)
.wire(circle, "alpha");
PARAMETERS
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
width - (default 1024) the width of the container - just use to adjust overall scale
height - (default 768) the height of the container - just use to adjust overall scale
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly
METHODS
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection
ALSO
ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO
see the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.
PROPERTIES
type - holds the class name as a String
ALSO
see ZIM Container for properties such as:
width, height, widthOnly, heightOnly, draggable, level, depth, group
blendMode, hue, saturation, brightness, contrast, etc.
ALSO
see the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.
EVENTS
See the CreateJS Easel Docs for Container events such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover
CLOSE ▲PAGE ▤CODE ▤
Layer
zim class - extends a zim.Container which extends a createjs.Container
DESCRIPTION
Layer is a ZIM Container with transform controls.
ZIM transform() objects have their mousechildren turned off so they can be dragged and transformed.
This means there can be no interactivity inside the transformed object.
Layer provides a solution to nest transformed objects in transformable containers.
It does so by providing a titleBar that can be used to turn on and off the transform of the container
and allow its contents to be transformed when the transform controls of the Layer are turned off.
This is more than just hiding the transform tools but rather removing and adding them.
The Layer titleBar will always remain visible on the stage
If the Layer is moved (not by its titleBar) so that the titleBar hits the edge,
then the titleBar will become anchored to the edge (unless anchor is set to false)
This creates an independent titleBar that can be moved to any location.
The titleBarPos() method can also be used to separate the titleBar at any time.
Drop the titleBar on the top left corner of the Layer or doubleClick it to snap it back on to the layer
NOTE
Layers can be added to a Transform Manager and saved with the persist sytem.
NOTE
Layers can be added to Layers (nested) along with any other type of DisplayObject content.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
SEE: https://zimjs.com/explore/layer.htmlEXAMPLE
// adding the Layers above the content will allow pressing Layer titleBar objects inside other Layers
// adding everything right on the stage would not allow pressing titleBars inside other Layers - either way may be best, depending on content
const content = new Container(W, H).addTo();
const layers = new Container(W, H).addTo();
// create an outer layer with two inner layers - one holding a circle and the other two circles
const layer0 = new Layer(800, 500, "LAYER 0", layers).center(content);
const layer1 = new Layer(300, 400, "LAYER 1", layers).loc(50,50,layer0);
const circle1 = new Circle(50, pink).center(layer1).transform({visible:false});
const layer2 = new Layer(300, 400, "LAYER 2", layers).pos(50,50,true,false,layer0);
const circle2 = new Circle(50, green).center(layer2).mov(0, -80).transform({visible:false});
const circle3 = new Circle(50, blue).center(layer2).mov(0, 80).transform({visible:false});
// optionally store transforms
const t = new TransformManager([layer0, layer1, layer2, circle1, circle2, circle3], "layersID");
// t.clearPersist("layersID")
timeout(1, ()=>{
layer2.resetTitleBar();
layer2.turnOn();
// if moving manually, must call resize()
layer2.mov(30);
layer2.resize();
S.update();
});
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
width - (default 500) the width of the Layer Container
height - (default 500) the height of the Layer Container not including the titleBar (which is not in the Container)
titleBar - (default "LAYER") a String or ZIM Label for the titleBar
titleBarContainer - (default null - zdf' stage) a container for the titleBar
can group these with other Layers and hide them all by hiding the container for instance
this also can help layer the titleBars above the content
backgroundColor - (default lighter) the background color of the titleBar
rollBackgroundColor - (default white) the roll background color of the titleBar
selectedBackgroundColor - (default granite) the selected background color of the titleBar
color - (default granite) the color of the titleBar text
rollColor - (default granite) the roll color of the titleBar text
selectedColor - (default moon) the selected color of the titleBar text
borderWidth - (default 1) the width of the ghost outline when the Layer is not selected
to adjust the transform controls border width use the transformObject parameter and set the borderWidth property
borderColor - (default borderColor) the color of the ghost outline when the Layer is not selected
to adjust the transform controls border color use the transformObject parameter and set the borderColor property
dashed - (default true) the dashed of the ghost outline when the Layer is not selected
to adjust the transform controls border dashed use the transformObject parameter and set the dashed property
transformObject - (default {borderColor:selectedBackgroundColor}) any of the transform parameters as an object literal
certain properties are overwritten by Layer as follows:
{events:true, visible:false, ghostColor:borderColor, ghostWidth:borderWidth, ghostDashed:dashed, ghostHidden:true}
use the transformControls.show() to show the transform controls once the Layer is made for instance:
timeout(.1, function(){layer.transformControls.show();}); // a timeout is needed as Layer gets created - sorry.
titleBarWidth - (default 100 + 30 if close) the width of the titleBar. 30 pixels will be added if close is true
titleBarHeight - (default 40) the height of the titleBar
titleBarX - (default null) the starting x position of the titleBar - see also titleBarPos() and resetTitleBar() methods
titleBarY - (default null) the starting y position of the titleBar - see also titleBarPos() and resetTitleBar() methods
titleBarDraggable - (default true) set to false to not let the titleBar be dragged.
this is useful with the titleBarPos() to create a stationary menu for the layers - for instance along the edge like tabs
close - (default true) - set to false to not use the close checkbox
WARNING: without the close checkbox, the user may make the layer bigger than the stage and not be able to deselect the layer
closeColor - (default selectedBackgroundColor) the border of the close checkBox
closeBackgroundColor - (default selectedBackgroundColor) the backgroundColor of the close checkBox
closeIndicatorColor - (default selectedColor) the indicator color of the close checkBox
anchor - (default true) set to false to not anchor the titleBar to the edge if dragged with the Layer (not the titleBar)
with anchor true, the user can dock the titleBar to the edges and then drag them to any desired location
the user can snap the titleBar back on the layer by dropping it on the top left corner of the layer or double clicking the titleBar
onTop - (default true) set to false to not bring the layer on top when selected
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly
METHODS
titleBarPos(x, y, right, bottom) - position the titleBar in the titleBarContainer - returns object for chaining
This will undock the titleBar from the Layer so it can be moved independently
unless titleBarDraggable is set to false
See also titleBarX and titleBarY parameters to start titleBars at a certain position
resetTitleBar() - dock the titleBar back on the Layer - returns object for chaining
toggle(state) - toggle the controls or turn on or off the controls by providing a Boolean state - returns object for chaining
resize(dispatch) - resize the Layer and its children if Layer is manually adjusted - returns object for chaining
for instance, layer.x = 10; layer.resize(); otherwise, the transform controls are broken!
normal layer transforming using the controls automatically resize.
Setting dispatch to true will dispatch a "transformed" event
hasProp(property as String) - returns true if property exists on object else returns false
clone() - makes a copy with properties such as x, y, etc. also copied (returns the new waiter for chaining)
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection
ALSO
ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO
see the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.
PROPERTIES
type - holds the class name as a String
transformControls - the transform transformControls object - see below for a description
anchor - get or set whether the titleBar will anchor to the edges of the titleBarContainer
toggled - read only if Layer has its transform turned on - or use transformControls.visible
use toggle(state) to toggle controls or pass in true for show controls or false for hide controls
titleBar - access to the ZIM Container that holds the titleBar
titleBarDraggable - get or set whether the titleBar can be dragged
use with titleBarPos() to permanently positing the titleBar
checkBox - access to the ZIM CheckBox that shows when the Layer is active and close is true
button - access to the ZIM Button that makes up the titleBar
label - access to the ZIM Label that is on the Button for the titleBar
ALSO
see ZIM Container for properties such as:
width, height, widthOnly, heightOnly, draggable, level, depth, group
blendMode, hue, saturation, brightness, contrast, etc.
ALSO
see the transformControls property described below for more options.
ALSO
see the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.
TRANSFORM CONTROLS OBJECT
Layer receives a transformControls property
This may be slightly delayed as Layer is prepared on stage
var layer = new Layer().center();
timeout(100, function(){zog(layer.transformControls);}); // will probably do the trick
The transformControls property holds the following:
TRANSFORM CONTROL OBJECT PROPERTIES
visible - read only whether the controls are visible
ghost - read only as to whether the ghost outline is showing - set with showGhost and hideGhost
ghostEnabled - read only as to whether the ghost outline will be turned on and off - set with addGhost and removeGhost
scaleControls - reference to the Container that holds the corner boxes for scaling
stretchXControls - reference to the Container that holds the left and right boxes for stretching
stretchYControls - reference to the Container that holds the top and bottom boxes for stretching
rotateControls - reference to the Container that holds the outer circles for rotating
TRANSFORM CONTROL OBJECT METHODS
hide() - hides the controls - returns object for chaining
show() - shows the controls - returns object for chaining
recordData(toJSON) - returns an object with type, x, y, scaleX, scaleY, rotation, skewX, skewY, visible PROPERTIES
if toJSON (default false) is set to true, the return value is a JSON string
setData(data, fromJSON) - sets the properties to match the data object passed in - this should come from recordData()
if fromJSON (default false) is set to true, it will assume a JSON string is passed in as data
returns object for chaining
remove(noHide) - removes the controls - set noHide true if already hidden
add(noShow) - adds the controls back if then have been removed - set noShow true if not wanting to show
allowToggleOn() - sets the show / hide controls on with click
allowToggleOff() - removes the show / hide controls on with click
showGhost() - show the ghost outline - the ghostWidth or ghostColor must be set in initial parameters
hideGhost() - hide the ghost outline
toggleGhost(state) - if ghost is showing will hide ghost and if ghost is hidden will show ghost
or set state to true to show ghost or false to not show ghost
addGhost() - enable ghost outline functionality - the ghostWidth or ghostColor must be set in initial parameters
removeGhost() - disable ghost outline functionality
disable() - may show the controls if visible but cannot use them
enable() - turns the using of the controls back on
resize(dispatch) - call resize if the object is transformed in ways other than with the controls
set dispatch to true to dispatch a "transformed" event - if manually adjusted this will save to TransformManager
EVENTS
dispatches a "transformed" event when being transformed
the transformed event object has a transformType property
the transformType property has values of "size", "move", "rotate", "stretch", "reg", "reset"
the transformType also might be "resize" if resize(true) is called to dispatch a transformed event
the transformed event object also has a pressup property that is true if on pressup and null if from pressmove
dispatches "transformshow" and "transformhide" events for when click to hide or show controls
If TransformManager() is used there are more events available such as "persistset", etc.
See the CreateJS Easel Docs for Container events such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover
CLOSE ▲PAGE ▤CODE ▤VIDS
Waiter
zim class - extends a zim.Container which extends a createjs.Container
DESCRIPTION
Adds a little animated three dot wait widget.
You need to call waiter.show() to show the waiter and waiter.hide() to hide it.
You do not need to add it to the stage - it adds itself centered.
You can change the x and y (with origin and registration point in middle).
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const waiter = new Waiter().show(); // show the waiter until assets load
F.loadAssets("cave02.jpg", "https://zimjs.org/assets/");
F.on("complete", ()=>{
waiter.hide();
new Pic("cave02.jpg").center();
S.update();
});
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
container - (default first frame's stage) the container that holds the waiter
speed - (default .6) cycle time in seconds (also see ZIM TIME constant)
foregroundColor - (default white) the dot color
backgroundColor - (default "orange") the background color
corner - (default 14) the corner radius of the waiter box
can also be an array of [topLeft, topRight, bottomRight, bottomLeft]
shadowColor - (defaults rgba(0,0,0,.3)) set to -1 for no shadow
shadowBlur - (default 14) the blur of the shadow if shadow is set
fadeTime - (default 0) milliseconds to fade in and out
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly
METHODS
show() - shows the waiter (returns the waiter for chaining)
hide() - hides the waiter
toggle(state - default null) - shows waiter if hidden and hides waiter if showing (returns the object for chaining)
or pass in true to show waiter or false to hide waiter
hasProp(property as String) - returns true if property exists on object else returns false
clone() - makes a copy with properties such as x, y, etc. also copied (returns the new waiter for chaining)
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection
ALSO
ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO
see the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.
PROPERTIES
type - holds the class name as a String
display - reference to the waiter backing graphic
ALSO
see ZIM Container for properties such as:
width, height, widthOnly, heightOnly, draggable, level, depth, group
blendMode, hue, saturation, brightness, contrast, etc.
ALSO
see the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.
EVENTS
See the CreateJS Easel Docs for Container events such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover
CLOSE ▲PAGE ▤CODE ▤BITS VIDS
ProgressBar
zim class - extends a zim.Container which extends a createjs.Container
DESCRIPTION
Adds a little progress bar that can be scaled if desired
Pass in to progress parameter of the Frame or LoadAssets call to operate
or use on its own with the show(), hide() methods and percent property
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const progressBar = new ProgressBar();
F.loadAssets({assets:"greeting.mp3", progress:progressBar});
// a bar will be centered on the default stage (or specify a container)
// the bar will show a percentage of asset bytes loaded
F.on("complete", ()=>{
// the bar will be removed when loading is complete
// must have interacted previously to play sound...
new Aud("greeting.mp3").play();
});
EXAMPLE
// testing progress bar:
new ProgressBar({barType:"rectangle"}).show().run(2); // run for 2 seconds
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
barType - (default "circle") set "rectangle" for rectangular progress bar
foregroundColor - (default green) the color of the bar
backgroundColor - (default dark) the color of the background
borderColor - (default backgroundColor) the color of the border - for "rectangle" barType
borderWidth - (default 10 "circle" or 0 "rectangle") the width of the border (or ring for "circle" barType)
padding - (default 2 for "circle" or 0 for "rectangle") the space between the bar and the backing
label - (null) set to a String or a ZIM Label to specifify label properties
color - (default foregroundColor) the color of the label if there is one
labelPosition - ("bottom" if label specified) also set to TOP to move label above progress bar
percentage - (default false) set to true to show percentage after label (set label to "" for only percentage)
corner - (default 15 for "rectangle" barType) set to 0 for square corners, etc.
can also be an array of [topLeft, topRight, bottomRight, bottomLeft]
shadowColor - (default rgba(0,0,0,.3)) set to -1 for no shadow
shadowBlur - (default 14) the blur of the shadow if shadow is set
backing - (default null) a Display object for the backing of the "rectangle" barType (eg. Shape, Bitmap, Container, Sprite)
See ZIM Pizzazz 3 - for patterns - these have a type of "Pattern" which makes them special
If a "pattern" is used then the normal backing will be used to mask the pattern
delay - (default .1) seconds to delay view of progress bar - helps not flash progress bar when content is cached (also see ZIM TIME constant)
fastClose - (default true) hide as soon as progress is done
The complete event is delayed slightly after the progress bar is loaded
Set to false to wait until the complete event triggers before removing the progress bar
container - (defaultFrame's stage) or specify a container to hold the progress bar
autoHide - (default true) set to false so bar does not hide when reaching 100%
width - (default 20/200 for circle/rectangle) set the width of the bar (for the circle the width is diameter)
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly
METHODS
show() - shows the progress bar (returns the progress bar for chaining)
hide() - hides the progress bar
toggle(state - default null) - shows progress bar if hidden and hides progress bar if showing (returns the object for chaining)
or pass in true to show progress bar or false to hide progress bar
run(time, close, repeat) - shows and runs the progress bar for the given time (default 3s) (also see ZIM TIME constant)
setting close to true or false will set the main class autoHide setting
set repeat to true to keep repeating
thanks Racheli Golan for the request
setBacking(backing) - change the backing of the progress bar
hasProp(property as String) - returns true if property exists on object else returns false
clone() - makes a copy with properties such as x, y, etc. also copied (returns the new waiter for chaining)
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection
ALSO
ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO
see the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.
PROPERTIES
type - holds the class name as a String
percent - get or set the percent (0-100) complete of the progress bar
label - reference to the label if there is one
backing - reference to the backing shape. This may be the backing DisplayObject if provided
the backing will have a pattern property if a pattern is set for the backing
bar - reference to the bar shape
toggled - read-only Boolean that is true if progress bar is showing otherwise false
ALSO
see ZIM Container for properties such as:
width, height, widthOnly, heightOnly, draggable, level, depth, group
blendMode, hue, saturation, brightness, contrast, etc.
ALSO
see the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.
group - used when the object is made to add STYLE with the group selector (like a CSS class)
EVENTS
Dispatches a "complete" event when the loading or running is complete
See the CreateJS Easel Docs for Container events such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover
CLOSE ▲PAGE ▤CODE ▤VIDS
Indicator
zim class - extends a zim.Container which extends a createjs.Container
DESCRIPTION
A row of dots or squares that can be used to indicate a step, page, level, score, etc.
The indicator can be used as an input as well but often these are small so may not be best to rely on.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const lights = new Indicator({fill:true});
lights.index = 0; // set the first light on
lights.center();
S.on("stagemousedown", ()=>{
// increase the indicator lights each click (then start over)
lights.index = (lights.index+1) % lights.num;
});
S.update();
EXAMPLE
// lightening indicator!
new Indicator({
indicatorType:new Emoji("\u26a1\ufe0f"),
fill:true,
interactive:true
}).center();
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
width - (default 300) width of indicator
height - (default 50) height of indicator
num - (default 6) the number of lights
foregroundColor - (default "orange") color of the light(s) turned on
backgroundColor - (default grey) color of the light(s) turned off
borderColor - (default -1 for no border) border color of lights and backdrop (if backdrop)
borderWidth - (default 1 if stroke is set) the size of the stroke in pixels
backdropColor - (default -1 for no backdrop) backdrop rectangle around lights
corner - (default 0) the corner radius if there is a backdropColor provided
can also be an array of [topLeft, topRight, bottomRight, bottomLeft]
indicatorType - (default "dot" or "circle") can also be "box" or "square", "heart", "star"
or pass in a ZIM Emoji and Indicator will fade alpha to backgroundAlpha parameter setting for unselected emojis
or pass any DisplayObject and the this will be used
selectedIndicatorType - (default indicatorType) - see indicatorType parameter for options
this will be shown for all the selected indicators
fill - (default false) set to true to fill in lights (or show selected indicators) to the left of the index
scale - (default 1) for all the lights including spacing
lightScale - (default 1) scale for each light - keeping the spacing unchanged
interactive - (default false) set to true to make lights clickable
clicking on first light when first light is only light on, will toggle light
unless toggleFirst is set to false
shadowColor - (default rgba(0,0,0,.3)) set to -1 for no shadow
shadowBlur - (default 5) the shadow blur if shadow is set
index - (default 0) - set the index at start. Use -1 for no indicator at start.
backgroundAlpha - (default 1 or .2 if indicatorType is Emoji) - affects only Emoji and custom DisplayObject indicatorType
selectedIndex - same as index, kept in for backwards compatibility in ZIM DUO
toggleFirst - (default true) set to false to not toggle first light if indicator is set to interactive
delayLight - (default false) set to true to not activate the light when interactive is true
sometimes something else will set the lights so just dispatch a change event without updating the light
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly
METHODS
hasProp(property as String) - returns true if property exists on object else returns false
update() - updates lights - needed only if indicatorList or selectedIndicatorList is used and changed dynamically
clone() - makes a copy with properties such as x, y, etc. also copied
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection
ALSO
ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO
see the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.
PROPERTIES
type - holds the class name as a String
index - gets or sets the current index of the indicator
num - the assigned num value (how many light objects) (read only)
backdrop - gives access to the backdrop if there is one Rectangle
lights - an array of the light objects (zim Circle or Rectangle objects)
lightsContainer - gives access to the lights createjs.Container with its Circle or Rectangle children
enabled - set to false to disable component
ALSO
see ZIM Container for properties such as:
width, height, widthOnly, heightOnly, draggable, level, depth, group
blendMode, hue, saturation, brightness, contrast, etc.
ALSO
see the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.
EVENTS
dispatches a "change" event if press is true and indicator is pressed on and lights change
ALSO
see the CreateJS Easel Docs for Container events such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover
CLOSE ▲PAGE ▤CODE ▤BITS VIDS
TextInput
zim class - extends a zim.Window which extends a zim.Container which extends a createjs.Container
DESCRIPTION
Makes an input text field like an HTML form input type text field.
This will be right on the canvas so can be layered with canvas objects
as opposed to the ZIM TextArea() which is an HTML tag overlay.
Thanks Cajoek for coding the text for the class.
WARNING: currently a single line is available (so height is not at this point useful)
See: https://zimjs.com/explore/textinput.htmlNOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const input = new TextInput().loc(100,100); // adds a default input field to the stage
new Button({label:"SUBMIT"}).loc(100, 200).tap(()=>{
zog(input.text); // whatever is typed into the LabelInput
});
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
** supports VEE - parameters marked with ZIM VEE mean a zim Pick() object or Pick Literal can be passed
Pick Literal formats: [1,3,2] - random; {min:10, max:20} - range; series(1,2,3) - order, function(){return result;} - function
width - |ZIM VEE| (default 300) - the width of the backgroundColor of the field - set to -1 for expanding width
This will limit the length of the text added to the field
In the future, scrolling text may be provided
height - |ZIM VEE| (default size plus paddingV) - the height of the backgroundColor for the label
Currently, the text is always one line.
In the future, multi-line functionality may be provided
Until then, use a ZIM TextArea for multiline.
placeholder - |ZIM VEE| String to show when no text is entered - will disappear when there is text entered
text - |ZIM VEE| String for the the text of the label
size - (default 36) the size of the font in pixels
font - (default arial) the font or list of fonts for the text
color - |ZIM VEE| (default dark) color of font
backgroundColor - |ZIM VEE| (default lighter) background color - set to clear for no background
borderColor - |ZIM VEE| (default null) the background stroke color
borderWidth - (default null) thickness of the background border
maxLength - (default null) set to limit the number of characters in the field
password - (default false) set to true to show **** for text to hide password
this will be replaced by inputType in upcoming versions of ZIM
selectionColor - (default color) the selection color of the text
selectionAlpha - (default .2) the alpha of the selection color
cursorColor - (default color) the blinking cursor in the text
cursorSpeed - (default .5) seconds for which the cursor blinks
shadowColor - (default -1) for no shadow - set to any css color to see
shadowBlur - (default 14) if shadow is present
align - ((default LEFT) text registration point alignment
also RIGHT for right aligned
also CENTER - (experimental) this adds a maxWidth to keep text centered
the maxWidth that is added can be overwritten
corner - (default 0) the round of corner of the background if there is one
can also be an array of [topLeft, topRight, bottomRight, bottomLeft]
padding - (default 5 if backgroundColor set) places the border this amount from text (see paddingH and paddingV)
padding parameters are ignored if there is no backgroundColor set
paddingH - (default padding) places border out at top bottom
paddingV - (default padding) places border out at left and right
shiftH - (default 0) move the label (CreateJS Text) inside the Label container horizontally
shiftV - (default 0) move the label (CreateJS Text) inside the Label container vertically
rollPersist - (default false) set to true to maintain rollover stage as long as mousedown or press is activated (used by Buttons)
scrollBarActive - (default false) set to true to show scrollBar
scrollBarDrag - (default false) set to true to be able to drag the scrollBar
scrollBarColor - (default borderColor) the color of the scrollBar
scrollBarAlpha - (default .3) the transparency of the scrollBar
scrollBarFade - (default true) fades scrollBar unless being used
scrollBarH - (default true) if scrolling in horizontal is needed then show scrollBar
scrollBarV - (default true) if scrolling in vertical is needed then show scrollBar
readOnly - (default false) set to true for field to be readOnly - also see readOnly property
inputType - (default "text") set to "text", "number", "password", "email"
number has 0-9 . + - / * % $ available
this will replace the password parameter in upcoming versions of ZIM
rtl - (default ZIM DIR) the direction of the text. Also set "rtl" in the HTML tag dir parameter for RTL
uppercase - (default false) set to true to force uppercase letters
placeholderInstant - (default true) set to false to not remove the placeholder as soon as the cursor is in the field
keyboardShift - (default false) set to true to lift stage at least 1/4 height or up to label y/2 to raise input above keyboard
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly
METHODS
hasProp(property as String) - returns true if property exists on object else returns false
resize(width, height) - resizes the field dimensions (inherited from Window) returns object for chaining
clone(exact) - makes a copy with properties such as x, y, etc. also copied
exact (default false) ZIM VEE (Pick) values are active in clones unless exact is set to true
For instance, if the object's color is [blue, green]
then its clone might be blue or green - which could be different than the original
If exact is set to true then the clone will be the color of the original object
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection
ALSO
all methods of ZIM Window()
ALSO
ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO
see the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.
PROPERTIES
type - holds the class name as a String
text - references the text property of the CreateJS Text object
label - references the ZIM Label object of the TextInput
this is actually a LabelInput that extends a ZIM Label
see the STATIC PROPERTY LabelInput entry below
placeholderLabel - refrerence to the placeholder label
htmlTag - access to the hidden HTML input tag
focus - get or set the focus of the TextInput
selection - access to selection ZIM Rectangle
use this to set color or blendMode of selection
selectionAlpha - get or set the alpha of the selection
blinker - access to the blinking cursor ZIM Rectangle
use this to set color or blendMode of blinker
size - the font size of the Label (without px)
use textInput.resize() if there are selection problems after setting size
often a resize() is desired anyway so manually calling avoids double resizing
font - get or set the font of the text
align - get or set the horizontal alignment of the text
values are LEFT and RIGHT and CENTER (experimental)
color - gets or sets the label text color
backgroundColor - gets or sets the background color
readOnly - get or set the field as readOnly - also see readOnly parameter
read only of true will allow selection and copy but not typing and cursor will be removed
set enabled to false to not allow selection and copy
enabled - default is true - set to false to disable
setting enabled false will remember the readOnly setting when enabled is set to false
so when set to true again it will be that remembered readOnly and will not rememember any changes to readOnly made in-between
so any in-between readOnly changes will have to be re-applied after enabled is set back to true
veeObj - an object with ZIM VEE original parameters:value allowing the ZIM VEE values to be referenced
for instance, obj.prop = Pick.choose(obj.veeObj.prop); will reset the the prop to the result of the original ZIM VEE value
ALSO
all properties of ZIM Window()
ALSO
see ZIM Container for properties such as:
width, height, widthOnly, heightOnly, draggable, level, depth, group
blendMode, hue, saturation, brightness, contrast, etc.
ALSO
see the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.
STATIC PROPERTY
LabelInput() - a static class so use new TextInput.LabelInput() to create.
This class is an editable label that expands in size as it is typed into
The TextInput is a ZIM Window with a LabelInput inside
The LabelInput has all the parameters of a ZIM Label with the following added after the size parameter:
maxLength - (default null) the maximum number of characaters the text can have
password - (default false) turn text into password text * symbols
selectionColor - (default - the text color) the color of the selection
selectionAlpha - (default .2) the alpha of the selection
blinkerColor - (default - the text color) the color of the blinker cursor
blinkerSpeed - (default .5) the speed of the blinker cursor
Some parameters of LabelInput such as rollColor and rollPersist are ignored - but kept in the signature to match Label for ease
an inputType parameter is available before the style parameter with a value of "text", "number", "email", "password"
as well an uppercase parameter is available just before the style parameter
OPTIMIZED
This component is affected by the general OPTIMIZE setting (default is false)
if set to true, you will have to S.update() after setting certain properties
EVENTS
focus, blur are dispatched when the text gains and loses focus
input is dispatched when the input text is typed or pasted into
capture the key with the event object data property
change is dispatched when the input text is different after losing focus (except if text is set programmatically)
capture the key a F.keydown event object key or keyCode properties
See the events for HTML input field of type text
See the events for ZIM Window()
See the CreateJS Easel Docs for Container events such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover
CLOSE ▲PAGE ▤CODE ▤VIDS
List
zim class - extends a zim.Window which extends a zim.Container which extends a createjs.Container
DESCRIPTION
A vertical or horizontal list of items.
This is really a zim.Tabs object inside a zim.Window object.
The list can be strings, numbers or Label objects and these are added to Tabs buttons.
The list can also include any DisplayObject with bounds (which most ZIM objects have except a Shape needs bounds set manually with setBounds()).
If the object is not a string, number or Label then selection will not highlight and currently animateTo() may not work if size is different.
See: https://zimjs.com/explore/list.html
See: https://zimjs.com/explore/listObjects.html
ACCORDION
An accordion is a list with nested sections that expand open.
A special accordion object can be passed to the list parameter
that includes the menu items, styles for the sub menus
and properties to animate, shade and indent the sub menus.
See: https://zimjs.com/ten/accordion.html
CONTINUOUS
As of ZIM 015 a List can be made continuous
So it will continually wrap. The scrollbars will be removed for this.
See: https://zimjs.com/015/continuous.html
PULLDOWN AND LIST COMPONENTS
The pulldown parameter can be set to true to make list act like a pulldown
This hides the backdrop and border and can be set to be collapsed or expanded
There are component items available for slider, checkbox and colorPicker
See: https://zimjs.com/ten/pulldown.html
There is also a checkBox parameter to make a list of checkboxes
This acts like a multiple select list
See: https://zimjs.com/ten/listcheckbox.html
SPACING, PADDING, INDENTING
These adjust depending on vertical or horizontal settings
The spacing is the distance between items (default 2)
The padding is the distance around the items but not between (default spacing)
So changing the spacing can seem to change the padding - but that can be overridden
There is also paddingV and paddingH that can be adjusted (default padding)
Indent only works with custom items in the list in left, right alignment or top, bottom valignment
This moves the items away from their alignment
There is also label indenting for items with labels - and labelIndentV and labelIndentH
DROP
As if ZIM 017, drop parameters and properties have been added.
These allow List items to be dragged and dropped within the same list or to other lists or to other objects.
Objects not in lists can also be dragged into a list - see the drag() method's drop parameters.
See https://zimjs.com/017/dropping.htmlNOTE
List can have a ZIM Organizer added with the organizer parameter
The organizer lets the user add, remove and move items up, down, to the top or the bottom
See: https://zimjs.com/docs.html?item=organizer
See: https://zimjs.com/explore/organizer.htmlNOTE
set the enable property to false as animating the position of the List object (or its parent Window)
then set the enable property to true on the animate call function. See update() in Window docs for more
NOTE
to add ZIM Swipe() to objects in List set the overrideNoSwipe parameter of Swipe to true
NOTE
if animating the List off screen then either turn optimize:false
or use list.update() in the "animation" event with the animate({events:true})
for a List in Pages use:
pages.on("pagetransitioned", ()=>{
list.update();
});
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const list = new List({
list:["Enormous", "Big", "Medium", "Small", "Puny"],
viewNum:3, // this number will change the size of the list elements (default is 5)
}).center()
EXAMPLE
// drop items onto own list or other list
// drop is set to true in the STYLE - this means the list can drop its items onto itself
// dropTargets is set after the lists are made - to be able to drop onto other lists
// these two things are separate - items can be dropped onto other lists but not their own, etc.
// also see https://zimjs.com/017/dropping.html for dropping to and from outside a list
const w = 60;
const h = 60;
STYLE = {
Rectangle:{width:w, height:h, color:series(blue,green,orange,yellow,pink)},
List:{vertical:false, spacing:null, viewNum:9, drop:true}
}
const items = [];
loop(40,()=>{items.push(new Rectangle())})
const list = new List(600, h*1.5, items).center().mov(0, -100);
const items2 = [];
loop(40,()=>{items2.push(new Rectangle())})
const list2 = new List(600, h*1.5, items2).center().mov(0,100);
list.dropTargets = list2;
list2.dropTargets = list;
EXAMPLE
// make a pulldown - this must start with a name for the list
// see https://zimjs.com/ten/pulldown.html for nested lists
const data = {
"MONSTERS":["Ghost", "Ghoul", "Vampire", "Werewolf", "Skeleton"]
}
const list = new List({
list:{menu:data, bloom:true, whither:true},
pulldown:true,
pulldownToggle:true // if want list to close when selected or stage is selected
}).center();
S.update();
EXAMPLE
// make a list with a width of 300 be resizeable
// from 100 width to 500 width
new List({
width:500,
align:LEFT,
resizeHandle:true,
resizeBoundary:new Boundary(0,0,-400,0)
}).resize(300).center()
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
width - (default 300) width of list
height - (default 200) height of list
list - (default Options 1-30) an array of strings, numbers or zim Label objects - these will be added to zim Tabs Buttons
or include any DisplayObject with bounds - these will not get highlighted but will indicate a change event and index
currently objects with different sizes may not animateTo() properly - this will be fixed soon.
A special Accordion object literal {} can be provided - see: https://zimjs.com/ten/accordion.html
with the following properties:
menu - a SIMPLE or COMPLEX hierarchy input - see ZIM Hierarchy() in the Code module
note: if just providing the menu and the rest of the properties below are default
then the Accordion object literal can be the SIMPLE or COMPLEX hierarchy input.
In other words, no need to pass in {menu:{blah}} just pass in {blah}
open - (default false) set to true to start the list opened
shade - (default .2) the alpha of indented shade in sub menus - or false for no shading
shift - (default 15) the pixels to indent the shade - and left or right aligned text of sub menus - or false for no indenting
dim - (default .1) the alpha of dark background overlay on sub menus - or false for no dimming
bloom - (default false) time in seconds for each submenu item to be added - or false to not animate sub menus in - if true default time is .1 second
whither - (default false) time in seconds for each submenu item to be removed - or false to not animate sub menus out - if true default time is .1 second
expander - (default "plus") set to "arrow" or "none" to change the expander icon - thanks Christopher Browne and Ofweird Top for the suggestions
subStyles - (default null) an array of style objects for each sublevel - with all the color and background color properties
See: https://zimjs.com/ten/accordion.html
note: the Accordion List is currently incompatible with the Organizer, addAt() and removeAt()
viewNum - (default 5) how many items to show in the width and height provided
adjusting this number will also change the overall scale of custom items for horizontal lists
(this does not affect vertical lists due to the way vertical tabs are optimized)
or see the noScale parameter to avoid scaling custom items in horizontal lists
if no items are provided to start but rather added with addAt() then choose a viewNum that roughly matches how many items will fit in the view
Note - the items will not be scaled larger by a viewNum setting... only scaled smaller.
vertical - (default true) set to false to make a horizontal list
currentSelected - (default false) set to true to show the curret selection as highlighted
align - (default CENTER) horizontal align
set to START to align LEFT for ZIM DIR constant is "ltr" or RIGHT when DIR="rtl" - END is the opposite
valign - (default CENTER) vertical align
labelAlign - (default CENTER) horizontal align of the label only
labelValign - (default CENTER) vertical align of the label only
labelIndent - (default indent) indent of label when align or valign is set - usually same as indent unless custom objects are in list
labelIndentH - (default indent) horizontal indent of label when align or valign is set
labelIndentV - (default indent) vertical indent of label when align or valign is set
indent - (default 10) indent of items when align or valign is set and there are custom objects in list
spacing - (default 2) is the pixels between tab buttons
backgroundColor - (default tin) the background color of the list elements (unless custom object)
rollBackgroundColor - (default grey) the background color of the list element as rolled over
selectedBackgroundColor - (default charcoal) the background color of the list element when selected
backdropColor - (default dark) the background color of the list window (any CSS color)
color - (default white) the text color of a deselected list element when not rolled over
rollColor - (default color) the rollover color
selectedColor - (default color) the text color of the selected list element
selectedRollColor - (default color) the text color of the rolled over selected list element
borderColor - (default silver) border color
borderWidth - (default 1) the thickness of the border
padding - (default 0) places the content in from edges of border (see paddingH and paddingV)
corner - (default 0) is the rounded corner of the list (does not accept corner array - scrollBars are too complicated)
swipe - (default AUTO/true) the direction for swiping set to NONE / false for no swiping
also can set swipe to just VERTICAL or HORIZONTAL
scrollBarActive - (default true) shows scrollBar (set to false to not)
scrollBarDrag - (default true) set to false to not be able to drag the scrollBar
scrollBarColor - (default borderColor) the color of the scrollBar
scrollBarAlpha - (default .3) the transparency of the scrollBar
scrollBarFade - (default true) fades scrollBar unless being used
scrollBarH - (default true) if scrolling in horizontal is needed then show scrollBar
scrollBarV - (default true) if scrolling in vertical is needed then show scrollBar
scrollBarOverlay - (default true) set to false to not overlay the scrollBar on the content
overlaying could hide content - but without overlay, content less than window size will show gap when no scrollBar
slide - (default true) Boolean to throw the content when drag/swipe released
slideFactor - (default .95) is the factor multiplied by dragging velocity (1 no slowing, .7 fast slowing)
slideSnap - (default true) slides past boundary and then snaps back to boundary when released - also VERTICAL, HORIZONTAL, and false
slideSnapDamp - (default .1) the damping to snap back to boundary
shadowColor - (default rgba(0,0,0,.3)) the color of the shadow
shadowBlur - (default 20) set shadowBlur to -1 for no drop shadow
paddingH - (default padding) places content in from left and right
paddingV - (default padding) places content in from top and bottom
scrollWheel - (default true) scroll vertically with scrollWheel
damp - (default null) set to .1 for instance to damp the scrolling
titleBar - (default null - no titleBar) a String or ZIM Label title for the list that will be presented on a titleBar across the top
titleBarColor - (default black) the text color of the titleBar if a titleBar is requested
titleBarBackgroundColor - (default "rgba(0,0,0,.2)") the background color of the titleBar if a titleBar is requested
titleBarHeight - (default fit label) the height of the titleBar if a titleBar is requested
draggable - (default true if titleBar) set to false to not allow dragging titleBar to drag list
boundary - (default null) set to ZIM Boundary() object - or CreateJS.rectangle()
onTop - (default true) set to false to not bring list to top of container when dragging
close - (default false) a close X for the top right corner that closes the list when pressed
closeColor - (default grey) the color of the close X if close is requested
collapse - (default false) set to true to add a collapse button to the titleBar that reduces the list so only the bar shows and adds a button to expand
collapseColor - (default grey) the color of the collapse icon
collapsed - (default false) set to true to start the list collapsed
excludeCustomTap - (default false) set to true to exclude custom buttons from tap() which would override existing tap() on the custom buttons
organizer - (default null) the ZIM Organizer for the list
checkBox - (default false) set to true to turn labeled list into a list of ZIM CheckBox objects - thanks Dale789 for the prompting!
See: https://zimjs.com/ten/listcheckbox.html
use selected.checkBox to get access to the selected CheckBox
use the checkBoxes property to get a list of the CheckBox objects
use setCheck(index, type), setChecks(type), getCheck(index) methods to manipulate
use STYLE to set CheckBox size
pulldown - (default false) set to true to have List act like a Pulldown
use tapClose and offClose parameters to optionally adjust behaviour
See: https://zimjs.com/ten/pulldown.html
clone - (default false) set to true to add clones of the list items rather than the items themselves
cancelCurrentDrag - (default false) set to true to cancel window dragging when document window loses focus
this functionality seems to work except if ZIM is being used with Animate - so we have left it turned off by default
index - (default 0) set the index at start - set to -1 for no selection
noScale - (default false) set to true to not scale custom items - this ignores viewNum
pulldownToggle - (default false) set to true to collapse list in pulldown mode when final item is selected or pressing off list
optimize - (default true) set to false to not turn DisplayObjects that are not on the stage visible false
as the Window is scrolled, any objects within the content and any objects within one level of those objects
are set to visible false if their bounds are not hitting the stage bounds
resizeHandle - (default false) set to true to rollover bottom right corner to resize list with resizeHandle
currently, the List content does not automatically expand
so create the list with a width as wide as it will go
then call the resize() method to start the list at the desired width
resizeBoundary - (default null) add a ZIM Boundary() object for the resize handle - relative to the resize handle start position
new Boundary(-100, 0, 200, 0) - would allow the resize handle to move to the left or right 100 pixels but not up or down
new Boundary(0, -100, 0, 200) - would allow the resize handle to move to up or down 100 pixels but not left or right
new Boundary(0,0,100,100) - would allow the list to expand in x or y 100 pixels but not grow smaller
new Boundary(-100,-100,100,100) - would allow the list to shrink in x or y 100 pixels but not grow bigger
resizeVisible - (default false) set to true to always see the resizeHandle - if resizeHandle is set to true
continuous - (default false) set to true to make the list scroll continuously - should have more elements than the viewNum for this
closeOthers - (default false) set to true to close any open branches before expanding selected branch
drop - (default false) set to true to allow drag and drop of items onto the current list
if the list is vertical, dragging the item horizontally will pull it from the list
the item can then be dragged to a different location and dropped in place
for a horizontal list, dragging the item vertical will pull it from the list
also see the dropTargets parameter and the drop and dropTarget properties
note: the dropTargets alone can be set to drop onto other lists but not the current list
also see updateDrop() method if a list has been moved or scaled
dropTargets - (default null) add a list or an array of lists to drop an item from the current list
see the drop parameter and the drop and dropTargets properties
note: dropTargets can be set without setting the drop parameter to true
and then items can be dragged to the target lists but not onto the current list
also see updateDrop() method if a list has been moved or scaled
dropSelf - (default true) set to false to not drop on itself if drop is true
dropCopy - (default false) set to true to drop a copy
dropColor - (default white) the color of the diamond reticle that indicates where an item will be dropped
dropThickness - (default 1) the thickness of the diamond reticle that indicates where an item will be dropped
dropScrollSpeed - (default 5) the speed the list is scrolled as a drop item is dragged up to 50px off an end of the list
this is only applied if the list scrolls on that end
the speed is multiplied by 1.5 when the item is between 50px and 80px off the end
dropReticleAlpha - (default 1) set the alpha of the drop reticle diamond - set to 0 to not show reticle
dropScale - (default null) set a scale when dropped
dropWidth - (default null) set a width when dropped - overrides scale
height will keep proportion unless both dropWidth and dropHeight are provided
dropHeight - (default null) set a height when dropped - overrides scale
width will keep proportion unless both dropWidth and dropHeight are provided
*** Drop parameters that work only when dropping on a dropTarget that is NOT a List
dropHitTest - (default "bounds") can also be "reg", "circles", "circle", "rect" - see ZIM HitTests
dropFull - (default true) do not drop on a full target
note - if the object is removed from the target then a drop can occur again on that target
dropSnap - (default true) snap to the target object
dropEnd - (default true) once dropped on a target a noMouse() is set on the object
*** End drop parameters that work only when dropping on a target that is NOT a List
selectedIndex - same as index, kept in for backwards compatibility in ZIM DUO
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly
METHODS
animateTo(index, timePerItem) - animate list to index at given time per item (default 50ms) - returns object for chaining
addAt(items, index, style, clone) - an array of items to insert at an index in the list - returns object for chaining
if the list is made with no items to start and items are added with addAt() then set the List() viewNum parameter value to match roughly how many items will fit in view
clone defaults to false - set to true to add a clone of the item or items to the list
note: does not support continuous at this time (whereas removeAt() does support continuous)
removeAt(number, index) - remove a number of elements (default 1) from the list starting at and including the index - returns object for chaining
note: does support continuous (whereas addAt() does not support continuous)
clear() - clears the list
first() - select first list element - returns object to chain
last() - select last list element - returns object to chain
toggle(state, index) - for an accordion, will close the accordion if open or open if closed
passing in true will open (or keep opened), passing in false will close (or keep closed)
pass in an index to open an accordion to that index (indexes always start at 0)
the way the index works is that it is based on visible items
pass in an array to the index parameter to open inner accordions
remember, the index is based on all visible items and does not restart at 0 for nested items
there is a 50ms delay after each index is chosen as the accordion opens up
example:
4 items showing and index 1 (second item) has 5 things, the second of which has 3 things.
toggle(true, [1, 3, 4])
would open outer index 1 showing five more
the 3 index is now the 1 index of the five
so 3 would open the 1 index of those 5 showing 3 more
the 4 index is now the 0 index of those three
so 4 would open the 0 index of those three
also see toggled property (which only works on the root) and openAtNum()
note - in pulldown mode cannot call toggle() from change or tap methods - see pulldownToggle parameter instead
setCheck(index, type) - set the CheckBox at an index to true or false (the type parameter)
setChecks(type) - set all CheckBoxes to true or false (the type parameter) returns object for chaining
getCheck(index) - get the checked value of the CheckBox at an index
cancelCurrentDrag() - stop current drag on list - but add dragging back again for next drag
collapse(state) - state defaults to true to collapse or set to false to expand collapsed list
must start with the collapse parameter set to true
also see collapsed property
openAtLevel(level) - open a level of an accordion list
level 0 shows first level, 1 shows second level, etc.
openAtNum(idNum, closeOthers) - open an accordion list at a specific id number
view the tree property in the console (F12) and expand the data property to see ids
and then expand any ids to see more ids nested inside
the idNum should be something like 6 or 12 without the word id.
closeOthers defaults to false - set to true to close any open branches before opening at idNum
updateDrop() - updates global locations of list if being used as a drop location and list has been moved or scaled
hasProp(property as String) - returns true if property exists on object else returns false
clone() - makes a copy with properties such as x, y, etc. also copied
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection
COMPONENT LIST ITEMS
These static methods make special List items with components
See: https://zimjs.com/ten/pulldown.html
Each may have a label, min, max, starting val, steps, etc.
Each has a call parameter for the function to call when the component changes
There are alternatively obj and property parameters
Setting these will change the property of the obj to the value of the component
Each will be given a call property of the call function
This can be changed dynamically if desired.
List.slider(label, min, max, val, call, step, decimals, obj, property, paddingLeft, paddingRight, factor, offset, backgroundColor)
A static method (use it like List.slider("fps", 0, 60, 20, doFps)) to make a slider List item
decimals defaults to 0 so if using decimals set to 1, 2, 3, etc. to adjust the decimals on the stepper (at right)
factor will multiply the slider value only in the stepper
offset will start the stepper offset by that amount
this lets the stepper value be factored and offset from the actual slider value
List.checkBox(label, checked, call, obj, property, paddingLeft, paddingRight, backgroundColor)
A static method (use it like List.checkBox("visible", checked, doVisible)) to make a checkBox List item
List.colorPicker(label, color, picker, call, obj, property, paddingLeft, paddingRight, backgroundColor)
A static method (use it like List.colorPicker("color", red, docColor)) to make a colorPicker List item
picker is an optional custom ZIM ColorPicker
This static method is used internally by the checkBox parameter of List
It can be used to create a checkBox list element - but also see List.checkBox() above
which is a little different and matches the format of the other List Items
List.checkItem(text, width, paddingH, paddingV, color, rollColor, backgroundColor, rollBackgroundColor, selectedColor, selectedRollColor, selectedBackgroundColor, selectedRollBackgroundColor)
A static method (use it like List.checkItem("hello", 30, 300, 10, 10, white, etc.))
To add a checkItem to a plain list use:
new List({list:["goodbye", List.checkItem("hello", 30, 300, 10, 10, white), "what?"]})
ALSO
All Window methods such as resize()
ALSO
ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO
see the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.
PROPERTIES
type - holds the class name as a String
index - get or set the index of the selected list element
indexPlusPosition set the index and scroll the index into view - might be broken for lists with custom objects of different heights
accordionIndex - read only index of the selected item inside an accordion otherwise is undefined
selected - gets the current selected list object (ie. a Button)
use selected.checkBox to access the selected CheckBox if checkBox parameter is true
if custom objects are in the list then use selected.content to access the custom object\
value - gets or sets the current value - in setting, it matches the first label that has the value anywhere in it
currentValue - same as value - kept in for backwards compatibility
text - gets or sets the current selected label text
label - gets current selected label object
items (or list) - read-only array of list button objects or objects in the list
this will change from the list entered as parameters as strings are turned into tab buttons, etc.
use addAt() and removeAt() methods to manipulate
custom items can be accessed using item.content - as the item is a container with a backing then content
each item has the following properties:
index, label, expander (Label for accordion +- or arrows), listZID (see Hierarchy) and other properties depending on the item
checkBoxes - read-only array of CheckBox objects if checkBox parameter is true
itemsText - read-only array of text for labels (or null element if no label)
itemWidth - the width of each item (unless custom items)
itemHeight - the height of each item (unless custom items)
spacing - get the spacing
length - read-only length of the list
tabs - a reference to the tabs object used in the list
organizer - a reference to the organizer object if used
originalList - if an accordion object is provided this is the reference to that object
tree - if an accordion object is provided this is the active tree data
this will also give ids that can be used with the openAtNum(idNum) method
vertical - read-only true if list is vertical or false if horizontal
toggled - for accordion get or set whether the main (root) accordion is open (true) or closed (false)
also see toggle() chainable method for more options
note - in pulldown mode cannot call toggled from change or tap methods - see pulldownToggle parameter instead
collapseIcon - access to the ZIM Shape if there is a collapse triangle
collapsed - get or set whether the list is collapsed - must start with collapse parameter set to true
also see collapse() method
drop - get or set to allow drag and drop of items onto the current lists - see drop parameter
dropTargets - get or set a list or an array of lists to drop an item from the current list - see dropTargets parameter
dropColor - get or set the color of the diamond reticle that indicates where an item will be dropped - see dropColor
dropReticle - each list that can be dropped on gets a dropReticle property that is the ZIM rectangle
so individual reticles can be adjusted - say different colors for different lists
dropItem - after a dropdown event, the dropItem is the ghost being dragged
dropIndex - after a dropdown event, the dropIndex is the original index of the item being dragged
dropTarget - after a dropup event, the dropTarget is the object the item was dropped into (could be original list)
dropNewIndex - after a dropup event, the dropNewIndex is the index in the list the item has been dropped
enabled - default is true - set to false to disable
DROP ITEM PROPERTIES
dropTarget - is the target dropped on
dropList - is list item came from
// dropEnd should not be false if dropBack is true - when dropping from a list
ALSO
see all Window properties - like titleBar, titleBarLabel, resizeHandle, etc.
ALSO
see ZIM Container for properties such as:
width, height, widthOnly, heightOnly, draggable, level, depth, group
blendMode, hue, saturation, brightness, contrast, etc.
ALSO
see the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.
EVENTS
dispatches a "change" event - then use index or text to find data
dispatches a "bloom" event for each item that is created when blooming
this receives an event object with an item property for the list item that was just opened
dispatches an "expanded" event when items have been expanded
this receives an event object with an items property of the items just opened
dispatches a "collapsed" event when items have been collapsed
dispatches a "dropdown" event when drop item is pulled from list
list will have dropItem and dropIndex properties
dispatches a "dropup" event when drop item is dropped
list will have dropItem, dropTarget and dropNewIndex properties
item dropped will have dropList for which list it came from and dropTarget for which object it is dropped on
ALSO
All Window events including "scrolling"
ALSO
see the CreateJS Easel Docs for Container events such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover
CLOSE ▲PAGE ▤CODE ▤VIDS
Stepper
zim class - extends a zim.Container which extends a createjs.Container
DESCRIPTION
Lets you step through a list of numbers or strings with arrows and keyboard arrows.
Uses mousedown to activate and defaults to stepping while pressing down
and going faster if you drag away from your press.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const stepper = new Stepper().center().change(()=>{
zog(stepper.index);
zog(stepper.value);
});
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
list - (default 0-10) pass in an array of strings or numbers to display one at a time
passing in an array will change the stepperType parameter from "number" to "list"
for instance a set of words ["hello", "goodbye", "wow", "omg!"]
would need a stepperType of "list" to be set and a larger width
width - (default 100) is the width of the text box (you can scale the whole stepper if needed)
backgroundColor - (default white) for the arrows and the text box
borderColor - (default null) stroke color for the box
borderWidth - (default 1 if borderColor) stroke thickness for the box
label - (default null) which can be used to define custom text properties
vertical - (default false) set to true if you want the arrows above and below the text
arrows - (default true) - use graphical arrows (also see keyArrows to turn off keyboard arrows)
corner - (default 10) is the radius of the text box corners - set to 0 for square corners
can also be an array of [topLeft, topRight, bottomRight, bottomLeft]
shadowColor - (default rgba(0,0,0,.3)) set to -1 for no drop shadow
shadowBlur - (default 14) value for shadow blur if shadow is set
continuous - (default false) set to true to loop around or go back past 0 index
display - (default true) set to false just to just show the arrows and not the value
press - (default true) will advance on label mousedown - set to false to not advance on mousedown
hold - (default true) set to false to not step with extended press down
holdDelay - (default .4) time (seconds) to wait for first step with hold (also see ZIM TIME constant)
holdSpeed - (default .2) time (seconds) between steps as holding (also see ZIM TIME constant)
draggable - (default true) set to false to not step when dragging
dragSensitivity - (default .1) .01 changes really quickly - 1 changes at base rate
dragRange - (default 200) absolute distance (pixels) from press the drag will reach maximum
stepperType - (default "number" unless passing in an array to list) makes numbers, words, letters to step through
also stepperType "list", "letter" - these get ranges below
min - (default 0 for number and "A" for letter) the minimum value (can make min bigger than max) (not for list stepperType)
max - (default 10 for number and "Z" for letter) the maximum value (can make max smaller than min) (not for list stepperType)
step - (default 1) the step value each time - can be decimal (only positive, only for number stepperType)
step2 - (default set to step) the step value when dragging perpendicular to main horizontal or vertical direction
step2 will run with draggable set to true or with arrows2 set below (only positive, only for number stepperType)
arrows2 - (default true if step2 different than step and stepperType number - else false) secondary arrows perpendicular to main horizontal or vertical direction
arrows2 will activate step2 above (only for number stepperType)
arrows2Scale - (default .5) the scale relative to the main arrows
keyEnabled - (default true) set to false to disable keyboard search / number picker
keyArrows - (default true) set to false to disable keyboard arrows
rightForward - (default true) set to false to make left the forward direction in your list
downForward - (default true except if stepperType is "number" then default false) set to false to make up the forward direction in your list
index - (default 0) set the index at start
value - (default null) set the value at start
arrowColor - (default backgroundColor) set the arrow color
arrowScale - (default 1) set the arrow scale
selectedIndex - same as index, kept in for backwards compatibility in ZIM DUO
currentValue - same as value - kept in for backwards compatibility
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly
METHODS
next() - goes to next
prev() - goes to previous
hasProp(property as String) - returns true if property exists on object else returns false
clone() - makes a copy with properties such as x, y, etc. also copied
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection
ALSO
ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO
see the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.
PROPERTIES
type - holds the class name as a String
index - gets or sets the current index of the array and display
value - gets or sets the current value of the array and display
currentValue - same as value - kept in for backwards compatibility
valueEvent - gets or sets the current value and dispatches a "change" event if set and changed
stepperArray - gets or sets the list
containerPrev, containerNext - access to the zim Container that holds the arrows
arrowPrev, arrowNext - access to the zim Triangle objects
arrowPrev2, arrowNext2 - access to the zim Triangle objects for arrows2
min, max - only for number mode at the moment - currently, do not change the max to be less than the min
label - access to the Label
textBox - access to the text box backing shape
continuous - does the stepper loop
enabled - default is true - set to false to disable
blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation
keyFocus - get or set the keyboard focus on the component - see also zim.KEYFOCUS
will be set to true if this component is the first made or component is the last to be used
ALSO
see ZIM Container for properties such as:
width, height, widthOnly, heightOnly, draggable, level, depth, group
blendMode, hue, saturation, brightness, contrast, etc.
ALSO
see the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.
OPTIMIZED
This component is affected by the general OPTIMIZE setting (default is false)
if set to true, you will have to S.update() after setting certain properties
and S.update() in change event to see component change its graphics
EVENTS
dispatches a "change" event when changed by pressing an arrow or a keyboard arrow
(but not when setting index or value properties)
ALSO
see the CreateJS Easel Docs for Container events such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover
CLOSE ▲PAGE ▤CODE ▤VIDS
Slider
zim class - extends a zim.Container which extends a createjs.Container
DESCRIPTION
A traditional slider - will give values back based on min and max and position of button (knob).
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const slider = new Slider({step:1})
.center()
.change(() => {
zog(slider.value); // 0-10 in steps of 1
});
// or create an on("change", function) event (do not chain on)
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports VEE - parameters marked with ZIM VEE mean a zim Pick() object or Pick Literal can be passed
Pick Literal formats: [1,3,2] - random; {min:10, max:20} - range; series(1,2,3) - order, function(){return result;} - function
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
min - |ZIM VEE| (default 0) the minimum value for the slider
max - |ZIM VEE| (default 10) the maximum value for the slider
step - |ZIM VEE| (default 0) 0 is continuous decimal - 1 would provide steps of 1, 2 would provide steps of 2, etc.
button - (default small button with no label) - a zim Button or string as follows:
"pill" - a narrow rectangle with rounded corners
"aztec" - a quadrilateral with fat side and skinny side (default for sound)
"circle" - a circle - can be oval with different width or height
"grip" - adds three grip lines to button
barLength - (default 300) the length of the bar (the slider slides along its length)
barWidth - (default 3) the width of the bar (how fat the bar is)
barColor - (default granite) the color of the bar (any CSS color)
vertical - (default false) set to true to make slider vertical
useTicks - (default false) set to true to show small ticks for each step (step > 0)
tickColor - (default barColor) set the tick color if ticks are set
tickStep - (default step - or 1 if no step and useTicks is true) set to adjust tick amount
if using semiTicks, this is the step between the semiTicks
a tickStep of .1 and semiTicks of 4 would lead to main ticks of 0, .5, 1, 1.5, 2, 2.5, etc.
with five spaces between main ticks
semiTicks - (default 4) add a number of semiTicks. 1 would add one smaller tick between ticks, 4 would add 4 smaller ticks, etc.
tickScale - (default 1) scale the height of the ticks
semiTickScale - (default 1) scale the height of the semiTicks
accentSize - (defualt 0) height of a bar next to slider that can be used to accent selection
accentOffset - (default 24) distance from edge of slider the accent will show
accentColor - (default zim.pink) color of filled part of accent
accentBackgroundColor - (default clear) color of background of accent
accentDifference - (default -.25) pixels accent background is bigger (or smaller if negative) than accentSize
this is used to stop bleeding of accent background
but can also be used to make the accent half the width of the background so it runs in a track, etc.
or fatter than the background so it runs on a wire or mono-rail
sound - (default false) - set to true to adjust various defaults for ticks, accent, button
inside - (default false) set to true to fit button inside bar (need to manually adjust widths)
keyArrows - (default true) set to false to disable keyboard arrows
keyArrowsStep - (default 1% of max-min) number to increase or decrease value when arrow is used
if step is set, then this value is ignored and set to step
keyArrowsH - (default true) use left and right arrows when keyArrows is true
keyArrowsV - (default true) use up and down arrows when keyArrows is true
damp - (default null) set to value such as .1 to damp the slider value
use with Ticker rather than "change" event - eg:
Ticker.add(()=>{circle.x = slider.value;});
value - |ZIM VEE| (default min) a starting value for the slider
expand - (default null or 10 for mobile) set to value to expand the interactive area of the slider button
expandVertical - (default expand) set to value to expand the vertical interactive area of the slider button
expandBar - (default 20 or 0 for horizontal) set to value to expand the interactive area of the slider bar
expandBarVertical - (default 0 or 20 for horizontal) set to value to expand the vertical interactive area of the slider bar
useLabels - (default false) - add Labels to ticks if useTicks is true - can apply STYLE
labelMargin - (default 20) - distance from ticks to Label if useLabels is true
labelColor - (default 20) - distance from ticks to Label if useLabels is true
range - (default false) set to true to change to a range slider with two circle buttons
this will provide read and write rangeMin, rangeMax and rangeAve values instead of value
also will provide a read only rangeAmount
rangeBar, rangeSliderA, rangeSliderB, rangeButtonA and rangeButtonB properties will be added
rangeColor - (default purple) set the color of the range bar
rangeWidth - (default 3 pixels wider than the barWidth on both sides) set the thickness of the range bar (not its lenght)
rangeMin - (default min) set the minimum value of the range
rangeMax - (default (max-min)/2) set the maximum value of the range
rangeAve - (default null) set the range average value - this may relocate rangeMin and rangeMax settings
addZero - (default false) add zero on end of decimals for useLabels true
currentValue - same as value - kept in for backwards compatibility
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly
METHODS
hasProp(property as String) - returns true if property exists on object else returns false
clone() - makes a copy with properties such as x, y, etc. also copied
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection
ALSO
ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO
see the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.
PROPERTIES
type - holds the class name as a String
value - gets or sets the current value of the slider
currentValue - same as value - kept in for backwards compatibility
valueEvent - gets or sets the current value and dispatches a "change" event if set and changed
min, max, step - read only - the assigned values
bar - gives access to the bar Rectangle
button - gives access to the Button
ticks - gives access to the ticks (to position these for example)
labels - access to the labels container if useLabels is true
accent - gives access to the access Shape
accentBacking - gives access to the accessBacking Shape
keyArrowsH, keyArrowsV - get or set the type of arrow keys to use (helpful for when cloning)
enabled - default is true - set to false to disable
blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation
keyFocus - get or set the keyboard focus on the component - see also zim.KEYFOCUS
will be set to true if this component is the first made or component is the last to be used
veeObj - an object with ZIM VEE original parameters:value allowing the ZIM VEE values to be referenced
for instance, obj.prop = Pick.choose(obj.veeObj.prop); will reset the the prop to the result of the original ZIM VEE value
*** the following properties are added if the range parameter is true
rangeBar - access to the ZIM Rectangle that makes the bar between the range buttons
rangeSliderA - access to the first slider made - which is the same as this (the Slider object)
rangeSliderB - access to the second slider made which is a ZIM Slider added to this slider with the bar, ticks, labels, accents removed
rangeButtonA - access to the first slider's button - so the same as button
rangeButtonB - access to the second slider's button - so the same as ranageSilderB.button
rangeMin - get or set the minimum value of the range
in some cases, it may be better to animate the rangeSliderA.value and rangeSliderB.value
rather than the rangeMin and rangeMax for instance when wiggling to avoid crossover issues
rangeMax - get or set the maximum value of the range
rangeAve - get or set the average value of the range
rangeAmount - read only get the range amount
ALSO
see ZIM Container for properties such as:
width, height, widthOnly, heightOnly, draggable, level, depth, group
blendMode, hue, saturation, brightness, contrast, etc.
ALSO
see the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.
OPTIMIZED
This component is affected by the general OPTIMIZE setting (default is false)
if set to true, you will have to S.update() after setting certain properties
and S.update() in change event to see component change its graphics
EVENTS
dispatches a "change" event when button is slid on slider (but not when setting value property)
ALSO
see the CreateJS Easel Docs for Container events such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover
CLOSE ▲PAGE ▤CODE ▤BITS VIDS
Selector
zim class - extends a zim.Container which extends a createjs.Container
DESCRIPTION
A Selector acts on a ZIM Tile to provide an interactive selector that highlights a tile element.
The selector works as a select bar and a select pad.
See: https://zimjs.com/ten/wrapper.html which includes several Selector objects as bars
Selector as a pad would be similar to selecting letters on an onscreen TV remote system
Selector has a multi parameter that allows for multiple elements to be in selected mode.
The index or selectedItem will only be the last selected.
And only one selecteIndex can be set at a time
but as many as desired can be set one after another - in a loop for instance.
The difference is that once selected, the item remains highlighted until unselected with a presseup.
This allows for a synth pad for instance where multiple notes can be played at the same time.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// the items in the Tile should be centerReg()
new Selector(new Tile(new Rectangle().centerReg(), 4, 4, 20, 20))
.center()
.change(e=>{
e.target.currentItem.alpha = 0;
S.update();
});
S.update();
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
tile - (default four red circles) the ZIM Tile to which to apply the selector
the elements should have their registration centered
see Tile for how to tile a series of different objects, etc.
this will work as a horizontal or vertical bar or a grid selector
borderColor - (default white) the border color of the selector
borderWidth - (default 2) the border width of the selector
backgroundColor - (default "rgba(0,0,0,.1)") the background color of the selector
corner - (default 10) the corner radius of the selector
dashed - (default false) the dashed border setting of the selector
paddingH - (default half tile spacingH) the space from the selected item
paddingV - (default half tile spacingV) the background color of the selector
speed - (default 2) the speed the selector moves to the next selection - can set to 0 for instant
diagonal - (default false) defaults to animate horizontally and vertically - set to true for diagonally
dim - (default null) set to true for .7 alpha or a number between 0-1 for tile to dim while selector animates
multi - (default false) set to true to enable multiple highlights
index and selectedItem will still read only the last selected tile or set only one tile at a time
will need a multitouch devices - degrades fine to single touch if no multitouch
keyArrows - (default true) set to false to disable keyboard arrows
behind - (default false) set to true to put selector behind tile
resizeScale - (default false) set to true to resize the border as selector changes scale
index - (default 0) the item index on which to start the selector - set to -1 for no selection
liveIndex - (default false) set to true to update the index and dispatch a change event as selector animates across items
selectedIndex - same as index, kept in for backwards compatibility in ZIM DUO
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly
METHODS
hasProp(property as String) - returns true if property exists on object else returns false
clone() - makes a copy with properties such as x, y, etc. also copied
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection
ALSO
ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO
see the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.
PROPERTIES
type - holds the class name as a String
index - the index number of the selected item in the tile - set to -1 for no selection
liveIndex - gets or sets whether to update the index and dispatch a change event as selector animates across items
currentItem - gets or sets the current item under the selector
noAnimate - set to make the next index or currentItem call not animate to tile
MULTI - in a change event with multi set:
downIndex - this will be the index under the selector on press down (or null if pressing up)
upIndex - this will be the index under the selector on press up (or null if pressing down)
downItem - this will be the item under the selector on press down (or null if pressing up)
upItem - this will be the item under the selector on press up (or null if pressing down)
lastIndex - get the last selected index
lastItem - get the last selected item
selectedCol - get the index of the selected column
selectedRow - get the index of the selected row
lastCol - get the index of the last selected column
lastRow - get the index of the last selected row
tile - a reference to the Tile object
selector - a reference to the Rectangle object used as the selector
enabled - default is true - set to false to disable
blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation
keyFocus - get or set the keyboard focus on the component - see also zim.KEYFOCUS
will be set to true if this component is the first made or component is the last to be used
ALSO
see ZIM Container for properties such as:
width, height, widthOnly, heightOnly, draggable, level, depth, group
blendMode, hue, saturation, brightness, contrast, etc.
ALSO
see the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.
EVENTS
dispatches a "change" event when selector finishes animating to a new selection or for each index if liveIndex is true
dispatches a "changeset" event if index or currentItem is set programatically (not user selected)
note that a tap() or mousedown/click function can be used if the index is desired right away
ALSO
see the CreateJS Easel Docs for Container events such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover
CLOSE ▲PAGE ▤CODE ▤
Slicer
zim class - extends a zim.Window which extends a zim.Container which extends a createjs.Container
DESCRIPTION
A Slicer provides a tool to break a DisplayObject such as a Pic() into horizontal and vertical regions.
See: https://zimjs.com/slicer which shows how a Slicer can be used to create data for a ZIM SlicedBitmap
The component has a horizontal track at the top which can be pressed to make editable vertical lines
and a vertical track at the left that can be pressed to make editable horizontal lines.
The sections can be selected or multiple selected and properties applied.
The lines can be dragged and deleted and their percentages retrieved with the slices property.
A new picture can be uploaded with the pic icon at the bottom right.
The interface can be hidden, the window resized at bottom right and collapsed at top right.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// slice a pic in four at 25% from the edges, scale the middle and keep the sides and corners not scaled.
const pic = new Pic("pic.png"); // preload this in Frame() or loadAssets()
const slicer = new Slicer({
obj:pic.clone(), // slicer will adjust obj so clone the pic so can use it unaffected later
scale:.5,
upload:false
})
.pos(30,50)
.change(()=>{preview.exchange = slicer.exchange;); // this will update the picture below
slicer.on("loaded", ()=>{
if (preview) preview.dispose();
preview = new SlicedBitmap(1600, 600, slicer.obj.clone(), slicer.slices, slicer.types, 2, .5)
.pos(0,100,CENTER,BOTTOM)
.transform({minScaleX:.05, minScaleY:.05});
});
// this will provide slice type options
new SlicerTypes(slicer).pos(30,120,RIGHT,TOP);
// slice a pic in four at 25% from the edges, scale the middle and keep the sides and corners not scaled.
let preview = new SlicedBitmap(1600, pic.height, pic)
.center()
.transform({minScaleX:.05, minScaleY:.05});
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
obj - (default new Tile()) a DisplayObject to slice
objScale - (default 1) set the scale of the object in the Slicer
slices - (default null) an array of horizontal and vertical arrays holding slice percentage
[[.25,.75], [.1,.4,.5,.9]]
three horizontal regions made from two vertical lines placed at 1/4 and 3/4 the width
five vertical regions made from four horizontal lines with 1/10 the picture at left, middle and right
types - (default null) an array of horizontal and vertical arrays holding slice types
0 - fix - keeps the original width and height of the region. Usually, good for corners.
1 - stretch - stretch the region to fill space as an object is stretched
2 - tile - tile the region at original scale - currently, will match the first side and sometimes the second side
titleBar - (default "Slicer") the title of the window as a String or ZIM Label
remember - (default true) use localStorage(zimSlicer) to store the last settings of the lines - see clear() method
upload - (default true) provide a pic button at bottom right to upload a pic
selection - (default true) let the sliced regions be selected
multiple - (default true) if selection then let shift or the multiple button be used to select multiple regions - set to false for single selection
proportion - (default true) when resized (or on upload) keep the percentages - set to false to keep lines at pixel setting
resize - (default true) roll over bottom right corner to resize - set to false to not provide resizing - also can use resizeVisible as STYLE to keep visible
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly
METHODS
hasProp(property as String) - returns true if property exists on object else returns false
setObject(newObj, scale) - change the object in the slicer and set the scale of the object
updateLines(slices) - remake lines with slices data - see slices parameter
setSlicerTypes(slicerTypes) - add a ZIM SlicerTypes object to control slicer types
clearSelection() - clears all highlights - not the line selections but the region selections
clear() - clears remembered data stored in localStorage(zimSlicer)
clone() - makes a copy with properties such as x, y, etc. also copied
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection
ALSO
All Window methods such as resize()
ALSO
ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO
see the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.
PROPERTIES
type - holds the class name as a String
obj - get a reference to the object being sliced - see setObject() to set the object
slices - get or set the slices array - see the slices parameter
types - get or set the types array - see the types parameter
exchange - get or set [slices, types] as a single array - used to set a SlicedBitmap
selectedIndexH - get the selected index of the current horizontal slice
selectedIndexV - get the selected index of the current vertical slice
currentLineH - get the selected horizontal slice line (a vertical line)
currentLineV - get the selected vertical slice line (a horizontal line)
selection - get an array of currently highlighted regions - also see highLightContainer
box - a reference to the box Rectangle that directly surrounds the obj
trackH - a reference to the top track Rectangle
trackV - a reference to the left track Rectangle
deleteH - a reference to the delete Button at top right
deleteV - a reference to the delete Button at bottom left
hide - a reference to the hide Button at top left
loader - a reference to the Loader button at bottom right
linesHContainer - a reference to the Container of horizontal slice lines (vertical lines)
linesVContainer - a reference to the Container of vertical slice lines (vertical lines)
highlightContainer - a reference to the left track Rectangle
ALSO
see ZIM Window for properties - like titleBar, titleBarLabel, resizeHandle, etc.
ALSO
see ZIM Container for properties such as:
width, height, widthOnly, heightOnly, draggable, level, depth, group
blendMode, hue, saturation, brightness, contrast, etc.
ALSO
see the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.
EVENTS
change - dispatched when a line is added, deleted or moved
selection - dispatched when a region is selected or deselected
delete - dispatched when a line is deleted
loaded - dispatched when an image is loaded
ALSO
all Window events including "collapse", "expand", "resize"
ALSO
see the CreateJS Easel Docs for Container events such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover
CLOSE ▲PAGE ▤CODE ▤
SlicerTypes
zim class - extends a zim.Window which extends a zim.Container which extends a createjs.Container
DESCRIPTION
SlicerTypes works with ZIM Slicer to provide slice types for ZIM SlicedBitmap.
The component is not to be used on its own.
Pass a ZIM Slicer object to the slicer parameter - the Slicer should be made first.
There are fixed, stretch and tile radio buttons for horizontal and vertical
and import and export buttons to work with [slices, types] used in Slicer and SlicedBitmap parameters and exchange property.
See: https://zimjs.com/slicer which shows how a Slicer can be used to create data for a ZIM SlicedBitmap
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// slice a pic in four at 25% from the edges, scale the middle and keep the sides and corners not scaled.
const pic = new Pic("pic.png"); // preload this in Frame() or loadAssets()
const slicer = new Slicer({
obj:pic.clone(), // slicer will adjust obj so clone the pic so can use it unaffected later
scale:.5,
upload:false
})
.pos(30,50)
.change(()=>{preview.exchange = slicer.exchange;); // this will update the picture below
slicer.on("loaded", ()=>{
if (preview) preview.dispose();
preview = new zim.SlicedBitmap(1600, 600, slicer.obj.clone(), slicer.slices, slicer.types, 2, .5)
.pos(0,100,CENTER,BOTTOM)
.transform({minScaleX:.05, minScaleY:.05});
});
// this will provide slice type options
new SlicerTypes(slicer).pos(30,120,RIGHT,TOP);
// slice a pic in four at 25% from the edges, scale the middle and keep the sides and corners not scaled.
let preview = new SlicedBitmap(1600, pic.height, pic)
.center()
.transform({minScaleX:.05, minScaleY:.05});
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
slicer - (default null) pass in the ZIM Slicer object to work with - required
titleBar - (default "Slicer Types") string or Label for slicerTypes
sliceType - (default "stretch") set the default slice type - fixed, stretch, tile
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly
METHODS
hasProp(property as String) - returns true if property exists on object else returns false
clone() - makes a copy with properties such as x, y, etc. also copied
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection
ALSO
All Window methods such as resize()
ALSO
ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO
see the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.
PROPERTIES
type - holds the class name as a String
slicer - read slicer used
sliceType - get or set default slice type - fixed, stretch, tile
radioH - access RadioButtons for horizontal
radioV - access RadioButtons for horizontal
importButton - access import Button
exportButton - access export Button
importPane - access import Pane
exportPane - access export Pane
submitButton - access import pane submit Button
shield - access shield that darkens radio buttons
ALSO
see ZIM Window for properties - like titleBar, titleBarLabel, resizeHandle, etc.
ALSO
see ZIM Container for properties such as:
width, height, widthOnly, heightOnly, draggable, level, depth, group
blendMode, hue, saturation, brightness, contrast, etc.
ALSO
see the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.
EVENTS
ALSO
all Window events including "collapse", "expand", "resize"
ALSO
see the CreateJS Easel Docs for Container events such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover
CLOSE ▲PAGE ▤CODE ▤
Dial
zim class - extends a zim.Container which extends a createjs.Container
DESCRIPTION
A traditional dial - will give values back based on min and max and position of dial.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
var dial = new Dial({step:1, backgroundColor:"violet"})
.center()
.change(()=>{
zog(dial.value); // 1-10 in steps of 1
});
S.update();
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports VEE - parameters marked with ZIM VEE mean a zim Pick() object or Pick Literal can be passed
Pick Literal formats: [1,3,2] - random; {min:10, max:20} - range; series(1,2,3) - order, function(){return result;} - function
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
min - |ZIM VEE| (default 0) the minimum value for the dial
max - |ZIM VEE| (default 10) the maximum value for the dial
step - |ZIM VEE| (default 1) 1 provides steps of 1, 0 is continuous decimal, 2 would provide steps of 2, etc.
width - (default 100) the width of the dial (diameter)
backgroundColor - (default granite) the background color of the dial
indicatorColor - (default licorice) the color of the indicator
indicatorScale - (default 1) the scale of the indicator
indicatorType - (default "arrow" or "triangle") can also be "dot" or "circle", and "line" or "rectangle"
useTicks - (default true - unless step set to 0) will show lines for ticks
innerTicks (default false) set to true to put the ticks inside if step is set
tickColor - (default backgroundColor) set the tick color if ticks are set
tickStep - (default step - or 1 if no step and useTicks is true) set to adjust tick amount
semiTicks - (default 0) add a number of semiTicks. 1 would add one smaller tick between ticks, 4 would add 4 smaller ticks, etc.
tickScale - (default 1) scale the height of the ticks
semiTickScale - (default 1) scale the height of the semiTicks
innerCircle - (default true) gives an inner knob look - set to false for flat
innerScale - (default 1) can be adjusted along with indicatorScale to get a variety of looks
innerColor - (default "rgba(0,0,0,.2)") color of first inner circle
inner2Color - (default "rgba(0,0,0,.1)") color of inside inner circle
accentSize - (defualt 0) height of a ring around the dial that can be used to accent selection
accentOffset - (default .45 width/2) distance from edge of dial the accent will show
accentColor - (default zim.pink) color of filled part of accent
accentBackgroundColor - (default clear) color of background of accent
accentDifference - (default -.25) pixels accent background is bigger (or smaller if negative) than accentSize
this is used to stop bleeding of accent background
but can also be used to make the accent half the width of the background so it runs in a track, etc.
or fatter than the background so it runs on a wire or mono-rail
sound - (default false) - set to true to rotate dial -180 and set a gap of .25
adjusts various defaults for ticks, accent, indicatorType, etc.
linear - (default false - unless sound is true) - set to true to pressdrag up and down to increase and decrease dial
gap - (default 0) ratio of circle 360 to leave as a gap between dial start and dial end
limit - (default true) stops dial from spinning right around - set to false to not limit dial
keyArrows - (default true) set to false to disable keyboard arrows
keyArrowsStep - (default 1% of max-min) number to increase or decrease value when arrow is used
if step is set, then this value is ignored and set to step
keyArrowsH - (default true) use left and right arrows when keyArrows is true
keyArrowsV - (default true) use up and down arrows when keyArrows is true
continuous - (default false) this turns the dial into a continuous dial from the min at the top
The (max-min)/360 give a delta value per degree
and as the dial goes clockwise it adds the delta and as it goes counterclockwise it subtracts the delta
The steps are still used or not if set to zero
The min and max are no longer a real min and max - see the continuousMin and continuousMax below
limit is ignored or set to false when continuous is true
continuousMin - (default null) set to Number to limit the minimum total value of the dial when continuous is true
continuousMax - (default null) set to Number to limit the maximum total value of the dial when continuous is true
damp - (default null) set to value such as .1 to damp the slider value
IGNORED when limit set to false - otherwise may damp incorrectly
use with Ticker rather than "change" event - eg:
Ticker.add(function () {circle.x = slider.value;});
value - |ZIM VEE| (default min value) - set the value at start
useLabels - (default false) - add Labels to ticks if useTicks is true - can apply STYLE
labelMargin - (default 10) - distance from ticks to Label if useLabels is true
addZero - (default false) add zero on end of decimals for useLabels true
currentValue - same as value - kept in for backwards compatibility
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly
METHODS
hasProp(property as String) - returns true if property exists on object else returns false
clone() - makes a copy with properties such as x, y, etc. also copied
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection
ALSO
ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO
see the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.
PROPERTIES
type - holds the class name as a String
value - gets or sets the current value of the dial
currentValue - same as value - kept in for backwards compatibility
valueEvent - gets or sets the current value and dispatches a "change" event if set and changed
min, max - read only assigned values unless continuous is true - then write enabled
step - read only - the assigned values
continuous - gets a boolean as to whether the continuous is true (read only)
continuousMin - get or set the continuousMin if continuous is set to true
continuousMax - get or set the continuousMax if continuous is set to true
backing - gives access to the dial backing Circle
inner and inner2 give access to any inner circles
ticks - gives access to the ticks (to scale these for example)
labels - access to the labels container if useLabels is true
accent - gives access to the access Shape
accentBacking - gives access to the accessBacking Shape
indicator - gives access to the indicator container with registration point at the dial center
indicatorShape - gives access to the shape on the end of the indicator (zim Triangle, Circle, Rectangle)
keyArrowsH, keyArrowsV - get or set the type of arrow keys to use (helpful for when cloning)
enabled - default is true - set to false to disable
blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation
keyFocus - get or set the keyboard focus on the component - see also zim.KEYFOCUS
will be set to true if this component is the first made or component is the last to be used
veeObj - an object with ZIM VEE original parameters:value allowing the ZIM VEE values to be referenced
for instance, obj.prop = Pick.choose(obj.veeObj.prop); will reset the the prop to the result of the original ZIM VEE value
ALSO
see ZIM Container for properties such as:
width, height, widthOnly, heightOnly, draggable, level, depth, group
blendMode, hue, saturation, brightness, contrast, etc.
ALSO
see the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.
OPTIMIZED
This component is affected by the general OPTIMIZE setting (default is false)
if set to true, you will have to S.update() after setting certain properties
and S.update() in change event to see component change its graphics
EVENTS
dispatches a "change" event when dial changes value (but not when setting value property)
ALSO
see the CreateJS Easel Docs for Container events such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover
CLOSE ▲PAGE ▤CODE ▤BITS VIDS
Tabs
zim class - extends a zim.Container which extends a createjs.Container
DESCRIPTION
A traditional tab layout for along the edge of content.
Can also act as an independent button row or column.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
var tabs = new Tabs({tabs:["A", "B", "C", "D"], spacing:5, corner:14})
.center()
.change(()=>{
zog(tabs.index);
zog(tabs.text);
});
S.update();
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
width - (default 240) overall width of tab set (ZIM divides the width across tabs and spacing)
height - (default 60) height of tabs
tabs - (default ["1","2","3","4"]) an array of any String, Number, Label, Button, (or any DisplayObject)
OR tab objects with the following properties available:
any tab specific properties will override the default values from other parameters
[{label:"String", width:200, backgroundColor:red, rollBackgroundColor:pink, downBackgroundColor:purple, selectedBackgroundColor:grey, color:yellow, selectedColor:"lime", downColor:white}, {etc.}]
label can be a String or a Label object - default text color is white
Tab objects can also include wait properties for individual buttons.
(this was put in place before Buttons were allowed in the tabs array - so you can just add a Button to the tab array instead)
See wait, waitTime, waitBackgroundColor, rollWaitBackgroundColor, waitColor, rollWaitColor, waitModal and waitEnabled parameters below
wait can be used with button's waiting property to offer an alternative to a loading screen or confirmation panel
also see the button's clearWait() method to cancel the wait state and waited event that triggers when the wait is done
wait will primarily be applicable when the tabs are used as a set of buttons rather than traditional tabbing
Warning - do not use the same array for multiple tabs as the array is turned into an array of objects used by the Tabs object.
backgroundColor - (default tin) the background color of a deselected tab when not rolled over
rollBackgroundColor - (default grey) the rollover background color
downBackgroundColor - (default null) the pressing down background color
selectedBackgroundColor - (default dark) the background color of the selected tab (any CSS color)
selectedRollBackgroundColor - (default rollBackgroundColor) the background color of the selected tab on rollover (if currentEnabled is true)
color - (default white) the text color of a deselected tab when not rolled over
rollColor - (default color) the rollover color (selected tabs do not roll over)
downColor - (default null) the pressing down color
selectedColor - (default color) the text color of the selected tab (any CSS color)
selectedRollColor - (default rollColor) the text color of the selected tab on rollover (if currentEnabled is true)
vertical - (default false) set to true to make vertical tabs with text still horizontal
spacing - (default 1) is the pixels between tab buttons
currentEnabled - (default false) set to true to be able to press (a second time) the selected tab button
currentSelected - (default true) set to false to not highlight the current button (good for button bars)
setting this to true will set currentEnabled to true
corner - (default 0) the corner radius of the tabs
can also be an array of [topLeft, topRight, bottomRight, bottomLeft]
base - (default "none") specifiy a side for flat bottom when corner is set (but not set to an array)
other values are "bottom" (default when corner and not vertical), LEFT (default when corner and vertical), TOP, RIGHT
** this was flatBottom - but then vertical tabs were added so it was changed in ZIM 9.2.0
keyEnabled - (default true) so tab key cycles through tabs, shift tab backwards
gradient - (default null) 0 to 1 (try .3) adds a gradient to the tabs
gloss - (default null) 0 to 1 (try .1) adds a gloss to the tabs
wait - (default null) String text for tab to say when pressed to enter a wait mode
The wait parameters can be (and probably will be) set as properties for each individual tab in the tabs array
waitTime - (default 20000) milliseconds to stay in wait state before returning to normal tab
waitBackgroundColor - (default color) the color of the tab during wait period
rollWaitBackgroundColor - (default color) the color of the tab during wait period
waitBackgroundColor - (default red) color to make button during wait time if wait is set
rollWaitBackgroundColor - (default rollColor) color for button when waiting and rolled over
waitColor - (default label's color) color to make text during wait time if wait is set
rollWaitColor - (default label's roll color) color for text when waiting and rolled over
waitModal - (default false) set to true to exit wait state if user clicks off tabs or to another tab
waitEnabled - (default true) set to false to disable tabs while in wait mode
backdropColor - (default null) set to a color to show behind the tabs (handy for when corner is not 0)
align - (default CENTER) horizontal align
valign - (default CENTER) vertical align
labelAlign - (default CENTER) horizontal align of the label only
labelValign - (default CENTER) vertical align of the label only
labelIndent - (default indent) indent of label when align or valign is set - usually same as indent unless custom objects are in tabs
labelIndentH - (default indent) horizontal indent of label when align or valign is set
labelIndentV - (default indent) vertical indent of label when align or valign is set
indent - (default 10) indent of items when align or valign is set and there are custom objects in tabs
useTap - (default false) set to true to use tap to activate otherwise uses ACTIONEVENT (mousedown or click)
excludeCustomTap - (default false) set to true to exclude custom buttons from tap() which would override existing tap() on the buttons
index - (default 0) - set the index at start
for no selected tab to start set this to -1
styleLabels - (default false) - set to true to pass styles to Tab labels
keyWrap - (default true) - set to false to not wrap around Tabs when tab key reaches end or start
selectedIndex - same as index, kept in for backwards compatibility in ZIM DUO
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly
METHODS
addAt(items, index, setStyle) - an array of items to insert at an index in the tab - tabs will grow in size - returns the object for chaining
To keep the same size - run insertAt() and then remake the Tabs using the tabs.buttons array as the tabs parameter
Can also send in a setStyle object literal {} with color, rollColor, selectedColor and selectedRollColor plus the background color versions of these!
removeAt(number, index) - remove number of items starting at a an index (default 1, length-1) - tabs will shrink in size - returns the object for chaining
first() - select first tab - returns object to chain
last() - select last tab - returns object to chain
getItemIndex(item) - gets the index of the list item provided
hasProp(property as String) - returns true if property exists on object else returns false
clone() - makes a copy with properties such as x, y, etc. also copied
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection
ALSO
ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO
see the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.
PROPERTIES
type - holds the class name as a String
index - gets or sets the selected index of the tabs
selected - gets the selected button - selected.enabled = true, etc.
tabs - gets or sets tabs object (will have to manually change buttons as well as adjust props)
backgroundColor - gets or sets default unselected background color - not applied to custom buttons
rollBackgroundColor - gets or sets default rolled over background color - not applied to custom buttons
selectedBackgroundColor - gets or sets default selected background color - not applied to custom buttons
selectedRollBackgroundColor - gets or sets default selected roll background color - not applied to custom buttons
color - gets or sets default unselected text color - not applied to custom buttons
rollColor - gets or sets default rolled over text color - not applied to custom buttons
selectedColor - gets or sets default selected text color - not applied to custom buttons
selectedRollColor - gets or sets default selected roll text color - not applied to custom buttons
text - gets current selected label text
label - gets current selected label object
buttons - an array of the ZIM Button objects. buttons[0].enabled = false;
labels - an array of the ZIM Label objects. labels[0].text = "YUM"; labels[2].y -= 10;
buttonDown - the button that is currently being pressed
backdrop - reference to backdrop Rectangle if backdropColor is provided
keyEnabled - gets or sets whether the tab key and shift tab key cycles through tabs (does not affect accessibility)
enabled - default is true - set to false to disable
blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation
keyFocus - get or set the keyboard focus on the component - see also zim.KEYFOCUS
will be set to true if this component is the first made or component is the last to be used
ALSO
see ZIM Container for properties such as:
width, height, widthOnly, heightOnly, draggable, level, depth, group
blendMode, hue, saturation, brightness, contrast, etc.
ALSO
see the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.
OPTIMIZED
This component is affected by the general OPTIMIZE setting (default is false)
if set to true, you will have to S.update() after setting certain properties
and S.update() in change event to see component change its graphics
ACTIONEVENT
This component is affected by the general ACTIONEVENT setting
The default is "mousedown" - if set to something else the component will act on click (press)
EVENTS
dispatches a "change" event when a tab changes (but not when setting index property)
ALSO
see the CreateJS Easel Docs for Container events such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover
CLOSE ▲PAGE ▤CODE ▤BITS VIDS
Pad
zim class - extends a zim.Container which extends a createjs.Container
DESCRIPTION
A pad that has rows and cols made of square keys.
When the keys are pressed the pad will dispatch a change event - get the index or text property.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
var pad = new Pad()
.center()
.change(()=>{
zog(pad.index); // 0-8
zog(pad.text); // 1-9
});
S.update();
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
** inherits STYLE from type selector for Pad, then general styles then type selector for Tabs
width - (default 150) overall width of pad (ZIM divides the width across cols and spacing)
cols - (default 3) the columns in the pad
rows - (default cols) the rows in the pad
keys - (default an Array for cols x rows) an array of key objects with the following properties available:
any key specific properties will override the default values from other parameters
[{label:"String", width:200, backgroundColor:red, rollBackgroundColor:pink, selectedBackgroundColor:grey}, {etc.}]
the label can be a String or a Label object - default text color is white
Key objects can also include wait properties for individual buttons.
See wait, waitTime, waitBackgroundColor, rollWaitBackgroundColor, waitColor, rollWaitColor, waitModal and waitEnabled parameters below
wait can be used with button's waiting property to offer an alternative to a loading screen or confirmation panel
also see the button's clearWait() method to cancel the wait state and waited event that triggers when the wait is done
backgroundColor - (default tin) the background color of a deselected key when not rolled over
rollBackgroundColor - (default grey) the rollover background color (selected keys do not roll over)
downBackgroundColor - (default null) the pressing down background color
selectedBackgroundColor - (default dark) the background color of the selected key (any CSS color)
color - (default white) the text color of a deselected key when not rolled over
rollColor - (default color) the rollover color (selected keys do not roll over)
downColor - (default null) the pressing down color
selectedColor - (default color) the text color of the selected key (any CSS color)
spacing - (default 1) is the pixels between key buttons
currentEnabled - (default true) set to false to make selected key not pressable
currentSelected - (default true) set to false to make the current selected key not the selected colors
corner - (default 0) the corner radius of the keys
can also be an array of [topLeft, topRight, bottomRight, bottomLeft]
labelColor - (default white) the color of the label
gradient - (default null) 0 to 1 (try .3) adds a gradient to the tabs
gloss - (default null) 0 to 1 (try .1) adds a gloss to the tabs
wait - (default null) String text for button to say when pressed to enter a wait mode
The wait parameters can be (and probably will be) set as properties for each individual button in the pads array
waitTime - (default 20000) milliseconds to stay in wait state before returning to normal button
waitBackgroundColor - (default color) the color of the button during wait period
rollWaitBackgroundColor - (default color) the color of the button during wait period
waitBackgroundColor - (default red) color to make button during wait time if wait is set
rollWaitBackgroundColor - (default rollColor) color for button when waiting and rolled over
waitColor - (default label's color) color to make text during wait time if wait is set
rollWaitColor - (default label's roll color) color for text when waiting and rolled over
waitModal - (default false) set to true to exit wait state if user clicks off the pad or to another button
waitEnabled - (default true) set to false to disable pad while in wait mode
index - (default 0) - set the index at start
selectedIndex - same as index, kept in for backwards compatibility in ZIM DUO
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly
METHODS
hasProp(property as String) - returns true if property exists on object else returns false
clone() - makes a copy with properties such as x, y, etc. also copied
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection
ALSO
ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO
see the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.
PROPERTIES
type - holds the class name as a String
index - gets or sets the selected index of the pad
text - gets current selected label text
selected - gets the selected button - selected.enabled = true, etc.
label - gets current selected label object
selectedBackgroundColor - gets or sets default selected background color
backgroundColor - gets or sets default unselected background color
rollBackgroundColor - gets or sets default rolled over background color
color - gets or sets default unselected text color
rollColor - gets or sets default rolled over text color
selectedColor - gets or sets default selected text color
buttons - an array of the ZIM Button objects. buttons[0].enabled = false;
labels - an array of the ZIM Label objects. labels[0].text = "YUM"; labels[2].y -= 10;
tabs - an array of the zim Tabs objects (one object per row)
enabled - default is true - set to false to disable
blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation
ALSO
see ZIM Container for properties such as:
width, height, widthOnly, heightOnly, draggable, level, depth, group
blendMode, hue, saturation, brightness, contrast, etc.
ALSO
see the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.
OPTIMIZED
This component is affected by the general OPTIMIZE setting (default is false)
if set to true, you will have to S.update() after setting certain properties
and S.update() in change event to see component change its graphics
ACTIONEVENT
This component is affected by the general ACTIONEVENT setting
The default is "mousedown" - if set to something else the component will act on click (press)
EVENTS
dispatches a "change" event when a pad changes (but not when setting index property)
ALSO
see the CreateJS Easel Docs for Container events such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover
CLOSE ▲PAGE ▤CODE ▤BITS VIDS
NumPad
zim class - extends a zim.Panel which extends a zim.Container which extends a createjs.Container
DESCRIPTION
A number pad that can be used on its own or with the ZIM Keyboard() which has a key at the bottom right to pop up the NumPad
The Keyboard can also be shown with the NumPadOnly parameter set to true to make use of the labels parameter to target labels.
See https://zimjs.com/zim/numpad.htmlNOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const label = new Label("").pos(0,100,CENTER);
// The NumPad is built in to the Keyboard
// To set the parameters, such as titleBar, use STYLE before making the Keyboard
STYLE = {titleBar:"CALCULATE", align:CENTER};
const keyboard = new Keyboard({
labels:label,
numPadScale:.75,
numPadOnly:true,
numPadAdvanced:true
}).show();
keyboard.numPad.mov(0,120);
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports VEE - parameters marked with ZIM VEE mean a zim Pick() object or Pick Literal can be passed
Pick Literal formats: [1,3,2] - random; {min:10, max:20} - range; series(1,2,3) - order, function(){return result;} - function
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
advanced - (default false) set to true to add one more row of round brackets, exponential and percent or modulus
or set to "simple" to show only numbers, backspace and return
titleBar - |ZIM VEE| (default "NUMPAD") a String or ZIM Label title that will be presented on a titleBar across the top
titleBarColor - |ZIM VEE| (default black) the text color of the titleBar if a titleBar is requested
titleBarBackgroundColor - |ZIM VEE| (default "rgba(0,0,0,.2)") the background color of the titleBar if a titleBar is requested
titleBarHeight - (default fit label) the height of the titleBar if a titleBar is requested
backgroundColor - |ZIM VEE| (default lighter) background color (use clear - or "rbga(0,0,0,0)" for no background)
borderColor - |ZIM VEE| (default pewter) border color
borderWidth - (default 1) the thickness of the border
corner - (default 15) the round of corner
can also be an array of [topLeft, topRight, bottomRight, bottomLeft]
numberCorner (default 30) the corner of the number keys
close - (default false) - add a close icon top right
closeColor - (default titleBarColor) the color of the close icon
collapse - (default false) - set to true to add a collapse icon to the titleBar that reduces the panel so only the bar shows and adds an icon to expand
also can double click bar to collapse panel
collapseColor - (default grey) - the color of the collapse icon
collapsed - (default false) set to true to start the panel collapsed
align - (default LEFT) set to CENTER, MIDDLE or "right" to align the label on the titleBar
this may get in the way of the close, arrow, collapse or extra buttons at right
shadowColor - (default "rgba(0,0,0,.3)" if shadowBlur) the shadow color - set to -1 for no shadow
shadowBlur - (default 14 if shadowColor) the shadow blur - set to -1 for no shadow
draggable - (default true if titleBar) set to false to not allow dragging titleBar to drag window
boundary - (default null) set to ZIM Boundary() object - or CreateJS.rectangle()
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly
METHODS
clone() - makes a copy with properties such as x, y, etc. also copied
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection
ALSO
see ZIM Panel methods like collapse()
ALSO
ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO
see the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.
PROPERTIES
type - holds the class name as a String
key - the last key pressed - also see the pressed event
this may include special colored keys: "clear", "space", "backspace" and "enter"
pad - the ZIM Pad used for the numbers - see ZIM Pad() for properties to access buttons, and labels
ALSO
see ZIM Panel properties like contentContainer, collapsed, etc.
ALSO
see ZIM Container for properties such as:
width, height, widthOnly, heightOnly, draggable, level, depth, group
blendMode, hue, saturation, brightness, contrast, etc.
ALSO
see the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.
EVENTS
dispatches a "pressed" event when pressed - also see the key property to give the text of the key pressed
dispatches a "close" event when closed with close button if there is a close button
dispatches a "collapse" event if collapsing
dispatches a "expand" event if expanding after being collapsed
ALSO
see the CreateJS Easel Docs for Container events such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover
CLOSE ▲PAGE ▤CODE ▤VIDS
DPad
zim class - extends a zim.Container which extends a createjs.Container
DESCRIPTION
A DPad (Directional Pad) can be used to control x and y values
This is primarily handy on mobile where a substitute for keypresses is needed
The DPad can be set up for all directions, horizontal or vertical
The DPad can be passed in to a ZIM MotionController to control an object
See: https://zimjs.com/ten/dpad.htmlNOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const dPad = new DPad().pos(50,50,LEFT,BOTTOM);
new MotionController({
target:new Circle().center(),
type:dPad,
speed:mobile()?100:80,
boundary:new Boundary(0,0,W,H)
});
S.update();
EXAMPLE
// importing zim_physics...
const physics = new Physics(0);
const ball = new Circle().center().addPhysics();
const dPad = new DPad().pos(40,40,LEFT,BOTTOM);
ball.control(dPad, 80);
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
axis - (default ALL) set to HORIZONTAL or VERTICAL or BOTH. Appropriate arrows will show
width - (default 100) width of DPad
backgroundColor - (default granite) the background color (any zim or html color)
indicatorColor - (default moon) the color of the arrows
indicatorPressColor - (default lighter) the color of the arrows as pressed
indicatorScale - (default 1) the scale of the arrows
indicatorRadius - (default null) set the indicator radius
innerCircle - (default true) set to false to not show an inner circle
innerScale - (default .5) the scale relative to the indicator
activeRadius - (default width*2) radius at which the DPad works
clamp - (default true) set to false to not limit the value between -1 and 1
logo - (default false) set to true to show the letter D in the DPad - or add your own
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly
METHODS
hasProp(property as String) - returns true if property exists on object else returns false
clone() - makes a copy with properties such as x, y, etc. also copied
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection
ALSO
ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO
see the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.
PROPERTIES
type - holds the class name as a String
dirX, dirY - the x and y values for the DPad - between -1 and 1 if clamp is set
these can be multiplied by a factor to adjust speed - or use speed parameter of associated MotionController
blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation
enabled - default is true - set to false to disable
ALSO
see ZIM Container for properties such as:
width, height, widthOnly, heightOnly, draggable, level, depth, group
blendMode, hue, saturation, brightness, contrast, etc.
ALSO
see the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.
EVENTS
dispatches a "change" event with dirX and dirY provided as well on the event object
ALSO
see the CreateJS Easel Docs for Container events such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover
CLOSE ▲PAGE ▤CODE ▤VIDS
Radial
zim class - extends a zim.Container which extends a createjs.Container
DESCRIPTION
A radial ring with selectable buttons with lables or icons
Used internally by ZIM RadialMenu which has expandable rings for a hierarchical interface
Radial uses LabelOnArc for labels
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
var radial = new Radial(["one", "two", "three", "four"])
.center()
.change(()=>{
zog(radial.index);
});
S.update();
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports VEE - parameters marked with ZIM VEE mean a zim Pick() object or Pick Literal can be passed
Pick Literal formats: [1,3,2] - random; {min:10, max:20} - range; series(1,2,3) - order, function(){return result;} - function
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
labels - (default ["A", "B", "C", "D", "E"]) an array of text or ZIM Label objects for buttons
size - (default 30) label size
font - (default "verdana") the font - can also import fonts in Frame() asset parameter or F.loadAssets()
startAngle - (default null) will start first button centered at top - see also totalAngle
setting an angle will start left side of first button at this angle
with 0 being the top (note, ZIM angles usually start along x axis - but not here)
totalAngle - (default 360) set to use only a portion of the circle - see also startAngle
angles - (default null) can set an array of angles for center of the buttons
can use angles property toString() to get existing angle data
this can be modified to suit and passed into this parameter for unequal button sizes
flip - (default true) flip the text between 90 and -180 (from 0 at top)
shiftRadial - (default 0) amount to shift text in radially
icons - (default null) set to an array of objects that will go under the text
can set the labels to ["", "", "", etc.] to hide the text
icons should be centerReg({add:false}) to ensure centered placement
rollIcons - (default null) set to an array of objects to replace icon when rolled over
rotateIcons - (default false) set to true to rotate icons around radial
iconsShiftRadial - (default 0) amount to shif the icons radially
height - (default 60) height of radial - not including core
coreRadius - (default 100) the radius of the core
this is fairly large but can sca(.5) the radial after creating, etc.
coreColor - (default dark) the color of the core
backgroundColor - |ZIM VEE| (default granite) the background color of a button
ZIM VEE means you can specify different colors for instance: series(blue, green, red, yellow)
these would then be the color order of the buttons - same for rollBackgroundColor, etc.
rollBackgroundColor - |ZIM VEE| (default tin) the rollover background color of a button
selectedBackgroundColor - |ZIM VEE| (default charcoal) the background color of the selected button
selectedRollBackgroundColor - |ZIM VEE| (default selectedBackgroundColor) the roll background color of the selected button
backdropColor - (default clear) set to change the color behind the radial - including spacingOuter
color - |ZIM VEE| (default white) the text color of the button
rollColor - |ZIM VEE| (default color) the rollover text color of the button
selectedColor - |ZIM VEE| (default color) the text color of the selected button
selectedRollColor - |ZIM VEE| (default color) the rollover text color of the selected button
borderColor - (default dark) color of the button border
borderWidth - (default 2) width of the button border
gradient - (default null) set to a number between 0 and 1 - would suggest .1 for gradient on button
gap - (default 6 pixels or 3 degrees if gapAsAngle is true) gap between buttons
gapAsAngle - (default false) set to true set gap as angle
spacing - (default 6) radial spacing around button from core or edge of backdrop
spacingInner - (default spacing) inside radial spacing from core
spacingOuter - (default spacing) outside radial spacing from edge of backdrop
currentEnabled - (default false) set to true to make selected key pressable (for change event)
currentSelected - (default true) set to true to make selected key show selected colors
index - (default 0) - set the index at start
selectedIndex - same as index, kept in for backwards compatibility in ZIM DUO
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly
METHODS
hasProp(property as String) - returns true if property exists on object else returns false
clone() - makes a copy with properties such as x, y, etc. also copied
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection
ALSO
ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO
see the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.
PROPERTIES
type - holds the class name as a String
index - gets or sets the selected index of the pad
text - gets current selected label text
label - gets current selected label object
selected - gets the selected button - selected.enabled = true, etc.
buttons - a container of buttons
each button has label and icon properties
angles - an array of angles to the center of the buttons
can log angles.toString() to get angle data
this can be adjusted and passed in to the angles parameter for unequal size buttons
core - a reference to the core circle object
backdrop - a reference to the backdrop circle
enabled - default is true - set to false to disable
ALSO
see ZIM Container for properties such as:
width, height, widthOnly, heightOnly, draggable, level, depth, group
blendMode, hue, saturation, brightness, contrast, etc.
ALSO
see the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.
OPTIMIZED
This component is affected by the general OPTIMIZE setting (default is false)
if set to true, you will have to S.update() after setting certain properties
and S.update() in change event to see component change its graphics
ACTIONEVENT
This component is affected by the general ACTIONEVENT setting
The default is "mousedown" - if set to something else the component will act on click (press)
EVENTS
dispatches a "change" event when the button changes (but not when setting index property)
see also currentEnabled to get change event for each press - or use tap()
ALSO
see the CreateJS Easel Docs for Container events such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover
CLOSE ▲PAGE ▤CODE ▤VIDS
RadialMenu
zim class - extends a zim.Container which extends a createjs.Container
DESCRIPTION
An expanding hierarchy menu of button rings - using ZIM Radial objects.
The menu is specified by a menu parameter in the format of a ZIM Hierarchy object.
Styles for each ring can be specified in the menu object.
Icons for each ring can be specified in the styles.
See https://zimjs.com/ten/radial.html (ZIM TEN)
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const menu = {
"one":[1,2,3,4], // an array is okay as all items are leaf nodes (end nodes)
"two":{ // an object literal is required as one or more items hold other items
"1":[], // this holds nothing (a leaf node) but still needs an empty array
"2":["a", "b", "c"], // this holds a linear list - all leaf nodes
"3":{ // this holds another nested list where at least one item holds more
"emotions":["love","hate","happy","sad"],
"flavors":["sweet","sour","bland","spicy"]
}
},
"three":[1,2,3,4,5,6],
"four":[1,2,3,4,5,6,7,8]
}
new RadialMenu(menu).sca(.5).center();
// OR ADD STYLES
// see https://zimjs.com/ten/radial.html for full example (ZIM TEN)
// any Radial parameters can go in the styles:{} brackets
// including icons and rollIcons
// and can use series to apply background colors and colors to individual buttons
// PS - this is the EXTRA version of the simple ZIM Hierarchy format
// here we pass styles as an extra property - list is required
// styles is optional but used by ZIM RadialMenu to apply associated styles
var menu = {
list:{
"one":{
list:["A","B","C","D"], // an array is okay as all items are leaf nodes (end nodes)
styles:{backgroundColor:blue}
},
"two":{
list:{ // an object literal is required as one or more items hold other items
"1":[], // this holds nothing (a leaf node) but still needs an empty array
"2":{
list:["a", "b", "c"], // this holds a linear list - all leaf nodes
styles:{}
},
"3":{ // this holds another nested list where at least one item holds more
list:{
"emotions":{
list:["love","hate","happy","sad"],
styles:{}
},
"flavors":{
list:["sweet","sour","bland","spicy"] ,
styles:{}
}
},
styles:{}
}
},
styles:{}
},
"three":{
list:[1,2,3,4,5,6],
styles:{}
},
"four":{
list:[1,2,3,4,5,6,7,8],
styles:{}
}
},
// the styles for the first list
// here we make each backgroundColor a different color
styles:{backgroundColor:series(red,green,blue,yellow)}
}
new RadialMenu(menu).sca(.5).center();
S.update();
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports VEE - parameters marked with ZIM VEE mean a zim Pick() object or Pick Literal can be passed
Pick Literal formats: [1,3,2] - random; {min:10, max:20} - range; series(1,2,3) - order, function(){return result;} - function
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
menu - (default a simple menu) a ZIM Hierarchy (simple, simple EXTRA or complex)
that holds the menu labels and optionally styles
see the ZIM RadialMenu examples and the format descriptions of ZIM Hierarchy for details
size - (default 30) label size
font - (default "verdana") the font - can also import fonts in Frame() asset parameter or F.loadAssets()
startAngle - (default null) will start first button centered at top - see also totalAngle
setting an angle will start left side of first button at this angle
with 0 being the top (note, ZIM angles usually start along x axis - but not here)
totalAngle - (default 360) set to use only a portion of the circle - see also startAngle
flip - (default true) flip the text between 90 and -180 (from 0 at top)
shiftRadial - (default 0) amount to shift text in radially
rotateIcons - (default false) set to true to rotate icons around radial
iconsShiftRadial - (default 0) amount to shif the icons radially
height - (default 60) height of radial - not including core or previous radials
coreRadius - (default 100) the radius of the core
this is fairly large but can sca(.5) the radial after creating, etc.
coreColor - (default dark) the color of the core
title - (default "MENU") the label text in the core
titleIcon - (default null) an object to put under the title
** FOR BELOW: see menu parameter where colors can be set per ring and per button for ZIM VEE colors
backgroundColor - |ZIM VEE| (default granite) the background color of a button
ZIM VEE means you can specify different colors for instance: series(blue, green, red, yellow)
these would then be the color order of the buttons - same for rollBackgroundColor, etc.
rollBackgroundColor - |ZIM VEE| (default tin) the rollover background color of a button
selectedBackgroundColor - |ZIM VEE| (default charcoal) the background color of the selected button
selectedRollBackgroundColor - |ZIM VEE| (default selectedBackgroundColor) the roll background color of the selected button
backdropColor - (default clear) set to change the color behind the radial - including spacingOuter
color - |ZIM VEE| (default white) the text color of the button
rollColor - |ZIM VEE| (default color) the rollover text color of the button
selectedColor - |ZIM VEE| (default color) the text color of the selected button
selectedRollColor - |ZIM VEE| (default color) the rollover text color of the selected button
borderColor - (default dark) color of the button border
borderWidth - (default 2) width of the button border
gradient - (default null) set to a number between 0 and 1 - would suggest .1 for gradient on button
gap - (default 6 pixels or 3 degrees if gapAsAngle is true) gap between buttons
gapAsAngle - (default false) set to true set gap as angle
spacing - (default 6) radial spacing around button from core or edge of backdrop
spacingInner - (default spacing) inside radial spacing from nearest inside object
spacingOuter - (default spacing) outside radial spacing from edge of backdrop
currentEnabled - (default false) set to true to make selected key pressable (for change event)
currentSelected - (default true) set to true to make selected key show selected colors
open - (default false) set to true to start with first menu open
under - (default true) set to false to open menu rings in the top layer (usually under just in case there is a backdrop)
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly
METHODS
closeRings(num) - close menu rings - default is all rings but use 1 to close the outer ring, 2 to close the two outer rings, etc.
see the outerLevel property for the current outer ring number with core being 0
opening rings programmatically is not yet supported but may be in the future
hasProp(property as String) - returns true if property exists on object else returns false
clone() - makes a copy with properties such as x, y, etc. also copied
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection
ALSO
ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO
see the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.
PROPERTIES
type - holds the class name as a String
index - gets the selected index of the outer ring (setting may come soon)
selectedLevel - gets the index of the level with the latest selection - the core is 0
selectedMenu - gets a reference to the selected menu
outerLevel - gets the index number of the outside level - the core is 0
outerMenu - gets a reference to the outer menu
text - gets current selected label text
label - gets current selected label object
selected - gets the selected button
core - a reference to the core circle object
enabled - default is true - set to false to disable
ALSO
see ZIM Container for properties such as:
width, height, widthOnly, heightOnly, draggable, level, depth, group
blendMode, hue, saturation, brightness, contrast, etc.
ALSO
see the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.
OPTIMIZED
This component is affected by the general OPTIMIZE setting (default is false)
if set to true, you will have to S.update() after setting certain properties
and S.update() in change event to see component change its graphics
ACTIONEVENT
This component is affected by the general ACTIONEVENT setting
The default is "mousedown" - if set to something else the component will act on click (press)
EVENTS
dispatches a "change" event when the button changes (but not when setting index property)
see also index, selectedLevel, selected and text properties
see also currentEnabled to get change event for each press - or use tap()
ALSO
see the CreateJS Easel Docs for Container events such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover
CLOSE ▲PAGE ▤CODE ▤VIDS
ColorPicker
zim class - extends a zim.Container which extends a createjs.Container
DESCRIPTION
A traditional color picker which shows 256 Web colors by default or custom colors.
Can additionally show 16 greys and / or an alpha slider.
Picking on a color sets the swatch color and the selectedColor property.
OK dispatches a "change" event if the color changed or a close event if not.
The X dispatches a "close" event.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const cp = new ColorPicker()
.show() // use show() and hide() with ColorPicker. As of ZIM ZIM 01 can also use pos(), loc(), center(), etc.
.change(()=>{
zog(cp.selectedColor); // #ffcc99, etc. after pressing OK
zog(cp.selectedAlpha); // 0-1
});
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
width - (default 500) the width of the color picker
colors - (default "spectrum") - this shows a color spectrum, drag bar with collapse, mode and close (if no buttonBar)
these can be configured with ColorPicker parameters (see spectrum parameter near end of parameters).
The mode toggles between a gradient and pixel blocks
Set the colors to "legacy" to show the traditional 256 colors
or pass in an optional list of colors ["red", "#CCC", etc.]
cols - (default 10) how many columns to use if you pass in custom colors
spacing - (default 2) is the space between the color squares
greyPicker - (default true unless one row) shows an extra 16 greys (set to false to hide these)
for the default colors it also includes 2 starting colors that record last picked colors
alphaPicker - (default true unless one row) shows an alpha slider (set to false to hide this)
the swatch has a black, grey and white backing underneath to show multiple alpha effects
startBackgroundColor - (default the last color in color array) the starting color
draggable - (default true (false if no buttonBar or no spectrum)) whether you can drag the component - set to false to not drag
a small grip under the color text shows if draggable
shadowColor - (default rgba(0,0,0,.3)) set to -1 for no drop shadow
shadowBlur - (default 14) the blur of the shadow if shadow is set
buttonBar - (default true unless one row) set to false to hide the button bar with OK and X (close)
circles - (default false) set to true to show colors in circles rather than squares
indicator - (default true) set to false to remove indicator from currentBackgroundColor
backgroundColor - (default black) the color of the background
keyArrows - (default true) set to false to disable keyboard arrows
container - (default zimDefaultFrame) if using show(), hide(), toggle() can set which container to center on
index - (default 0) - set the index at start
dropperTarget - (default null) - set to a DisplayObject to use dropper on the target - such as the stage
the dropper will always work on the spectrum
dropperTarget will cache the target so a color can be picked from it
but this is modal on the target so buttons, etc. cannot be used and animations will not be seen
spectrumCollapse - (default true) - if spectrum color is set, set to false to not show a collapse button
spectrumMode - (default true) - if spectrum color is set, set to false to not show a mode button
spectrumClose - (default true) - if spectrum color is set, set to false to not show a close button
spectrumOk - (default true) - if spectrum color is set and there is a buttonBar, set to false to not show an OK button
spectrumTitle - (default null) - if spectrum color then this is the title - for example, set to "Color Picker"
collapsed - (default false) - if spectrum and spectrumCollapse then set to true to start collapsed
tolerancePicker - (default false) - show a slider for tolerance - useful for when using ColorPicker to keyOut a color
note: this will automatically hide the alphaPicker
selectedIndex - same as index, kept in for backwards compatibility in ZIM DUO
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly
METHODS
show() - show the picker (returns the picker for chaining) (as of ZIM ZIM 01 can also use pos(), loc(), center(), etc.)
hide() - hides the picker (as of ZIM ZIM 01 can also use removeFrom())
toggle(state - default null) - shows if hidden and hides if showing (returns the picker for chaining)
or pass in true to show picker or false to hide picker
toggleSpectrum(state - default null) - if run without state will toggle the spectrum mode
or pass in true to show gradient or false to show pixel blocks
collapse(state - default true) - with the "spectrum" setting, set state to true (default) to collapse or false to expand the picker
updateDropperTarget() - with the "spectrum" setting, a cached view of the dropperTarger is shown to pick the color from
using updateDropperTarget() will update this cached view - it is processor intensive so beware
hasProp(property as String) - returns true if property exists on object else returns false
clone() - makes a copy with properties such as x, y, etc. also copied
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection
ALSO
ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO
see the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.
PROPERTIES
type - holds the class name as a String
selectedColor - gets or sets the selected color swatch
value - same as selectedColor but consistent with other components
currentValue - same as value - kept in for backwards compatibility
valueEvent - gets or sets the current value and dispatches a "change" event if set and changed
selectedAlpha - gets or sets the selected alpha (set does not work if alphaPicker is false)
index - get or sets the selected index of the colorPicker
colors - read only array of colors in picker - not including greys - or "spectrum"
greys - read only array of greys in picker if the grey picker is set
toggled - read-only Boolean property as to whether picker is showing
collapsed - read-only Boolean property as to whether picker is collapsed
swatch - gets the Rectangle that is the color swatch
swatchBacking - gets the zim Shape that is under the swatch (seen if alpha set low)
swatchText - gets the Label that shows the color text
grip - gets the createjs.Shape for the grip if the panel is dragable
background - gets the Rectangle that is the background (cp.background.color = "white" - now a backgroundColor parameter)
okBut - references the OK Button
closeBut - references the X Button
indicator - gets the zim shape that is the indicator (if indicator is true)
title - reference to the spectrum title Label
NOTE
for colors:"spectrum"
dropper - reference to the circle dropper
gradient - reference to the gradient spectrum Bitmap
pixels - reference to the pixel spectrum Bitmap
closeIcon - reference to the close icon if there is one on the top bar
modeIcon - reference to the mode icon if there is one on the top bar
collapseIcon - reference to the collapse icon if there is one on the top bar
spectrumToggled - read-only Boolean that is true if gradient and false if spectrum is pixel blocks
NOTE
if alphaPicker is true:
alphaBacking - gets reference to the Rectangle that makes the backing for the alpha slider
alphaBut - the Button on the alpha slider
alphaSlider - the Slider for the alpha
alphaText - the Label for the alpha
NOTE
if tolerancePicker is true:
toleranceBacking - gets reference to the Rectangle that makes the backing for the tolerance slider
toleranceBut - the Button on the tolerance slider
toleranceSlider - the Slider for the tolerance
toleranceText - the Label for the tolerance
blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation
keyFocus - get or set the keyboard focus on the component - see also zim.KEYFOCUS
will be set to true if this component is the first made or component is the last to be used
ALSO
see ZIM Container for properties such as:
width, height, widthOnly, heightOnly, draggable, level, depth, group
blendMode, hue, saturation, brightness, contrast, etc.
ALSO
see the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.
ACTIONEVENT
This component is affected by the general ACTIONEVENT setting
The default is "mousedown" - if set to something else the component will act on click (press)
EVENTS
NOTE
these have been updated in ZIM 00
dispatches a "change" event when the color swatch changes or if no swatch when a color is picked.
also dispatches when the alpha is changed if there is an alpha picker.
also dispatches when the tolerance is changed if there is an tolerance picker.
also dispatches when text of color is changed.
dispatches a "swatch" event when the swatch is pressed.
dispatches an "ok" event when the OK button is pressed.
dispatches a "close" event when the close button is pressed. Automatically closes the ColorPicker.
dispatches a "collapsed" event when collapsed in spectrum color mode.
dispatches a "expanded" event when expanded in spectrum color mode.
ALSO
see the CreateJS Easel Docs for Container events such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover
CLOSE ▲PAGE ▤CODE ▤BITS VIDS
EmojiPicker
zim class - extends a zim.Window which extends a zim.Container which extends a createjs.Container
DESCRIPTION
An Emoji picker panel.
Can customize the list of emojis.
Gives a zim Emoji object as currentEmoji property on a "change" event
SEE: https://zimjs.com/nft/bubbling/emoji.htmlNOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const emojiPicker = new EmojiPicker()
.center()
.change(() => {
// we will make a bigger emoji by passing the code of the currentEmoji
// to the new Emoji - you can clone and then scale but that can look blotchy
const emoji = new Emoji(emojiPicker.currentEmoji.code, 200)
.centerReg()
.drag();
S.update();
});
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
width - (default 400) the width of the window
height - (default 500) the height of the window
emojis - (default a big list!) an array of UTF codes for emojis
["\ud83d\udca5","\ud83c\udf35", etc.]
can view the code page https://zimjs.com/code.php?view=67.05 to get raw list to modify
monochrome - (default false) set to true to greyscale the emojis
this had better performance when Chrome made black and white emojis in a bold bug
too bad - hope they bring them back.
backgroundColor - (default lighter) background color (use clear - or "rbga(0,0,0,0)" for no background)
titleBar - (default "Emojis") a String or ZIM Label title for the panel that will be presented on a titleBar across the top
note: set STYLE = {titleBar:false, close:false} to turn off title bar and remove close button
titleBarColor - (default black) the text color of the titleBar if a titleBar is requested
titleBarBackgroundColor - (default "rgba(0,0,0,.2)") the background color of the titleBar if a titleBar is requested
titleBarHeight - the height of the titleBar if a titleBar is requested
cache - (default false or true if mobile) - cache the collection of emojis for better performance - will not look as crisp on desktop
size - (default 30) - the size of the emojis in the picker
collapse - (default false) - set to true to add a collapse icon to the titleBar that reduces the window so only the bar shows and adds an icon to expand
also can double click bar to collapse window
collapseColor - (default grey) - the color of the collapse icon
collapsed - (default false) set to true to start the window collapsed
colSize - (default size+15) - the size of the columns
rowSize - (default size+14) - the size of the rows
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly
METHODS
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection
ALSO
see all the methods of the ZIM Panel
ALSO
ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO
see the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.
PROPERTIES
type - holds the class name as a String
selectedEmoji - get the selected emoji - this is a zim Emoji object
clone the object to let the user use it
or make a new Emoji() from the selectedEmoji.code and pass in a different size, etc.
emojiData - get the list of emojis - warning, if zog to console they will look like emojis
wrapper - the ZIM Wrapper used for the picker
ALSO
see all the properties of the ZIM Panel including close, titleBar, etc.
ALSO
see ZIM Container for properties such as:
width, height, widthOnly, heightOnly, draggable, level, depth, group
blendMode, hue, saturation, brightness, contrast, etc.
ALSO
see the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.
EVENTS
dispatches an "emoji" event when an emoji is picked
dispatches a "closed" event when closed
ALSO
see the CreateJS Easel Docs for Container events such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover
CLOSE ▲PAGE ▤CODE ▤VIDS
TextEditor
zim class - extends a zim.Panel which extends a zim.Container which extends a createjs.Container
DESCRIPTION
A configurable text editor for a ZIM Label - or text in code memory.
Call the editor.show(label) method and pass in the label - it will let the user change the following properties:
text, color, bold, italic, align, size, and font
Which ones the editor uses can be set with parameters.
SEE: https://zimjs.com/cat/texteditor.htmlNOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const label = new Label({
text:"press to edit with TextEditor",
italic:true,
align:CENTER,
font:"verdana"
})
.center()
.expand()
.tap(()=>{
textEditor.show(label);
});
const textEditor = new TextEditor({
colorList:true, // or array of colors
optionList:["bold","italic","align"], // or true, or array with any of these
sizeList:true, // or array of sizes
fontList:true, // or array of fonts
live:true, // default
scroll:true // default, etc.
});
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
The TextEditor is made of of the following sub components
and many styles need to be set on the sub component types:
Panel, TextArea, Button, ColorPicker, Selector, Stepper, List
For instance STYLE = {type:{Panel:{titleBarBackgroundColor:red}}}
width - (default 400) the width of the editor
color - (dark) the color of the TextArea text in the editor
backgroundColor - (default lighter) the background color of the editor
fieldColor - (default backgroundColor darkened .05) - the background color of the TextArea
fieldHeight - (default button height plus 2 margins) - the height of the TextArea
textSize - (default 20) the size of the text in the TextArea
sizeList - (default false) set to true to show numbers from 5-500
or set to an array of numbers used for the size Stepper [10,12,14,16] for instance
optionList - (default false) set to true to show ["bold", "italic", "align"]
or set to an array with any of these values ["bold", "italic"] for instance
colorList - (default false) set to true to show the default ZIM ColorPicker
or set to an array with colors [red, green, blue, black, "violet", "#333"] for instance
fontList - (default false) set to true to show a default list of fonts
"Arial",
"Courier New",
"Georgia",
"Helvetica",
"Palatino",
"Tahoma",
"Verdana",
// plus on desktop:
"Impact",
"Comic Sans"
or set to an array with desired fonts ["courier", "verdana"] for instance
live - (default true) will update the label as the text is typed
set to false to update only on button press - note, other setting update live regardless
button - (default green check) set to a custom ZIM Button if desired
titleBar - (default "Text Editor") a String or ZIM Label title for the panel that will be presented on a titleBar across the top
titleBarColor - (default black) the text color of the titleBar if a titleBar is requested
titleBarBackgroundColor - (default "rgba(0,0,0,.2)") the background color of the titleBar if a titleBar is requested
titleBarHeight - (default fit label) the height of the titleBar if a titleBar is requested
wrap - (default true) set to false to not wrap text in TextArea (wrapping on the actual label can be done with label.lineWidth)
limit - (default null) set to a number to limit the TextArea number of characters
scroll - (default true) set to false to not show a vertical scrollbar when needed - note if textHeight is not high enough, a scrollbar may not show
placeholder - (default null) set to true to show default text - will be overwritten with label text if there is text
password - (default false) set to true to make the TextArea a password field - shows dots - the label will not show dots
borderColor - (default pewter) border color
borderWidth - (default 1) the thickness of the border
margin - (default 10) the margin around the various sub components
corner - (default 0) the round of corner
can also be an array of [topLeft, topRight, bottomRight, bottomLeft]
shadowColor - (default "rgba(0,0,0,.3)" if shadowBlur) the shadow color - set to -1 for no shadow
shadowBlur - (default 14 if shadowColor) the shadow blur - set to -1 for no shadow
draggable - (default true if titleBar) set to false to not allow dragging titleBar to drag window
boundary - (default null) set to ZIM Boundary() object - or CreateJS.rectangle()
frame - (default zdf - ZIM Default Frame) pass in a frame if not the default frame - lets TextArea and ColorPicker work
fontListHeight - (default 100) the height of the font list if there is one
fontListViewNum - (default 3) the number of fonts to show in the font list if there is one
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly
METHODS
show(label, x, y, frame) - show the editor and pass in the label to operate on
the editor will appear centered above or below the text depending on where there is more room
this can be overridden with the x and y parameters
the TextEditor will show on the stage of the Label
if the label is not on the stage then the stage of the frame parameter otherwise the stage of the ZIMDefaultFrame
If the editor is already open it will not move
Calling show(label2) on a different label will switch the editor to that label
see also the label property
hide() - hides the editor
closeColorPicker() - close the ColorPicker - this needs to display the text (which is hidden when the ColorPicker opens)
hasProp(property as String) - returns true if property exists on object else returns false
clone() - makes a copy with properties such as x, y, etc. also copied
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection
ALSO
see all the methods of the ZIM Panel
ALSO
ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO
see the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.
PROPERTIES
type - holds the class name as a String
textArea - reference to the TextArea
label - get or set the label associated with the textEditor
button - reference to the Button
if various features are set:
swatch - reference to the Rectangle showing color
colorPicker - reference to the ColorPicker
bold - reference to the bold Button
italic - reference to the italic Button
align - reference to the align Selector
size - reference to the size Stepper
font - reference to the font List
ALSO
see all the properties of the ZIM Panel including close, titleBar, etc.
ALSO
see ZIM Container for properties such as:
width, height, widthOnly, heightOnly, draggable, level, depth, group
blendMode, hue, saturation, brightness, contrast, etc.
ALSO
see the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.
ACTIONEVENT
This component is affected by the general ACTIONEVENT setting
The default is "mousedown" - if set to something else the component will act on click (press)
EVENTS
dispatches an "input" event when the text is changed - although default is to update live
dispatches an "update" event when any property is changed and where text is changed
dispatches a "set" event when button is pressed
dispatches a "close" event when closed
dispatches a "color" event when ColorPicker is opened
ALSO
see the CreateJS Easel Docs for Container events such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover
CLOSE ▲PAGE ▤CODE ▤VIDS
Keyboard
zim class - extends a zim.Container which extends a createjs.Container
DESCRIPTION
The Keyboard class makes a keyboard ideal for mobile or touch screens.
Often, it seems the mobile keyboard can cause problems with layout.
This in-canvas keyboard requires much less testing and concern.
The Keyboard can work with ZIM Labels to give input text without a TextArea.
Thanks Frank Los for the initial design and coding of the Keyboard.
Keyboard also captures hard keyboard keydown and will type that as well
See https://zimjs.com/keyboardNOTE
press and hold down the vowels for multiple vowel options
NOTE
multi-line Label and TextArea input is not supported
NOTE
the width of the Label can be set by the Label's lineWidth paremeter
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// create Labels to capture the text from the keyboard
const text1 = new Label({text:"", backgroundColor:white}).pos(100,100);
const text2 = new Label({text:"", backgroundColor:white}).pos(100,200);
// create a new Keyboard and pass in the labels as an array
// or if just one label, then pass in the label
const keyboard = new Keyboard([text1, text2]);
// if just the letter is needed use the keydown event
keyboard.on("keydown", e=>{
zog(e.letter);
});
// create events to capture a mousedown on the labels
const text1Event = text1.on("mousedown", activate);
const text2Event = text2.on("mousedown", activate);
function activate(e) {
keyboard.show();
// remove the events when keyboard is active
text1.off("mousedown", text1Event);
text2.off("mousedown", text2Event);
}
keyboard.show(); // optionally show the keyboard to start
// add back the events to show the keyboard
keyboard.on("close", ()=>{
text1.on("mousedown", text1Event);
text2.on("mousedown", text2Event);
});
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
labels - (default null) a ZIM Label to show letters in or an array of labels
Keyboard will add a cursor to the Labels
and provide management across multiple labels
currently, multiline labels are not supported
setting the label lineWidth will set the max width of the label
backgroundColor - (default dark) an css color for the background color of the keys
color - (default white) the color of the text
shiftBackgroundColor - (default "orange") the color of the active shift key
shiftHoldBackgroundColor - (default "red") the color of the active shift hold key
placeBackgroundColor - (default "50c4b7") the color of the arrow backings when placing cursor in label
placeColor - (default "50c4b7") the color of the arrow text when placing cursor in label
cursorColor - (default "50c4b7") the cursor color
shadeAlpha - (default .2) special keys are shaded darker by this alpha
margin - (default 5) the margin around the keyboard from the container width
corner - (default 30) the round of the corner (set to 0 for no corner)
can also be an array of [topLeft, topRight, bottomRight, bottomLeft]
draggable - (default false) set to true to show the drag handle at top right
placeClose - (default true) shows an x key to close the cursor placement menu
shadowColor - (default "rgba(0,0,0,.2)") set to -1 for no shadow
shadowBlur - (default 14) how blurred the shadow is if the shadow is set
container - (default zimCurrentFrame stage) if placing Keyboard in different container or stage
data - (default see below) pass in data for the letters on the three sets of keyboards
also see the layout parameter for current default layouts like "arabic", "hebrew", etc.
Below is the default data - change any of the keys to change keyboard
There must be three boards (you can request more)
There must be a button specified on the fourth row to toggle to the second screen and back
There must be a button on the second and third screen at the start of the third row
to toggle between the second and third screen
The "shift" and "delete" keys are optional and can be moved or removed
There is a "back" key that is like the "backspace" key but takes the space of one key and not two keys
There will be at least 10 key places but there can be more than 10 keys per row
The last element of the outer array is a an object with special characters for e,u,i,o,a,n
If left off then it will use the characters below in the example.
These can be changed to any characters showing an extra set of any characters.
The fifth and sixth elements are lowercase to uppercase and uppercase to lowercase override mappings
For instance, in the turkish layout ı:"I" and i:"İ" for lowercase to uppercase
and I:"ı" and İ:"i" for uppercase to lowercase.
Use the data property to get this array if desired:
var data = [
[
["q","w","e","r","t","y","u","i","o","p"],
["a","s","d","f","g","h","j","k","l"],
["shift","z","x","c","v","b","n","m","backspace"],
["?123"] // rest of bottom line automatically added
],[
["1","2","3","4","5","6","7","8","9","0"],
["!","@","#","$","/","^","&","*","(",")"],
["1/2","-","'", "\"",":",";",",","?","backspace"],
["ABC"] // rest of bottom line automatically added
],[
["+","x","%","=","<",">","{","}","[","]"],
["€","£","¥", "$", "￦", "~", "`","¤","♡","☆"],
["2/2","_","\\","|","《","》","¡","¿","backspace"],
["ABC"] // rest of bottom line automatically added
],{
e:["ė","ē","ę","ê","é","ë","è"],
u:["ū","û","ú","ü","ù"],
i:["ī","į","ì","í","ï","î"],
o:["ō","œ","ø","õ","ô","ó","ö","ò"],
a:["ā","ã","å","â","á","ä","à","æ"],
n:["ñ","ń"]
},{
lowercaseletter:"uppercaseletter", // override lowercase to uppercase map
lc2:"uc2"
},{
uppercaseletter:"lowercaseletter", // override uppercase to lowercase map
uc2:"lc2"
}
];
place - (default true) set to false to not add place arrows when selecting Label
placeShiftH - (default 0) set to shift place arrows horizontal - from default location
placeShiftV - (default 0) set to shift place arrows vertically - from default location
placeScale - (default 1) set the place menu scale
special - (default null) set to a string to add a special key to the left of the space bar
rtl - (default false) (Experimental) set to true to use right-to-left text
hardKeyboard - (default true) set to false to not include keypresses from physical keyboard
layout - (default "qwerty") set to change the layout (also see data parameter for custom layout)
additionally supported layouts are "azerty", "hebrew", "turkish", "arabic" - thanks to those who submitted layouts!
please let us know at https://forum.zimjs.com if you are using a layout that others would use!
numPadScale - (default .8) the scale of the NumPad when pressed from the numPad key at bottom right
numPadDraggable - (default true) set to false to not be able to drag the NumPad
numPadOnly - (default false) set to true to open the NumPad only but can then use with labels
numPadAdvanced - (default false) set to true to add an extra row to the NumPad with round brackets, exponential and percent or modulus keys
maxLength - (default null) set to a number for the maximum characters - also see maxLength property
numbersOnly - (default false) set to force numbers only - also see numbersOnly property
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly
METHODS
show(index) - shows the Keyboard - use this rather than addTo(), etc.
index (default null) specify the index of the labels array to show cursor in
hide() - hides the keyboard
toggle(state - default null) - shows if hidden and hides if showing (returns the keyboard for chaining)
or pass in true to show keyboard or false to hide keyboard
setText(text) - change the current label text to the text provided
clearText() - clear the current label text
addChar(char) - add a character to the currentLabel at the currentIndex
removeChar() - removes the chararcter in the currentLabel at the currentIndex-1 (a backspace)
addLabels(labels) - add a ZIM Label or an array of Labels to the labels list for the Keyboard
removeLabels(labels) - remove a ZIM Label or an array of Labels
showNumPad() - shows the NumPad - also see Keyboard numPadOnly parameter and the NUMPAD key
hideNumPad() - hide the NumPad - also see the NUMPAD key and the x on the NumPad
showKeyboard() - specifically shows the keyboard if numPadOnly is set
hideKeyboard() - specifically hides the keyboard but may still show the NumPad
showPlace() - show the place menu for cursor
hidePlace() - hide the place menu for cursor
resize() - scales the keyboard to the stage with margin and places at bottom of screen
hasProp(property as String) - returns true if property exists on object else returns false
clone() - makes a clone of the Keyboard
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection
ALSO
ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO
see the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.
PROPERTIES
type - holds the class name as a String
data - get the data array for the keyboard - see the data parameter for details and to set value for data
labels - get the labels array - use addLabels() and removeLabels() to set
selectedLabel - the label with the cursor or -1 if no cursor
index - the index of the cursor in the selected label or -1 if no cursor
toggled - read-only Boolean that is true if keyboard is visible and false if not
keys - reference to the keyboard itself
numPad - reference to the NumPad once it has been shown once
placeMenu - reference to the place menu
maxLength - get or set the maximum characters - will not change existing label
numbersOnly - get or set to force numbers only - will not change existing label
ALSO
see ZIM Container for properties such as:
width, height, widthOnly, heightOnly, draggable, level, depth, group
blendMode, hue, saturation, brightness, contrast, etc.
ALSO
see the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.
EVENTS
Dispatches a "keydown" event with an event object having a letter property
keyboard.on("keydown", function(e) {zog(e.letter);}); // logs letter pressed or "del" for delete
Dispatches a "special" event if the special parameter is used and the special key is pressed
Dispatches a "close" event when close keyboard icon at bottom right is pressed
Dispatches "numpadopen" and "numpadclose" events when the NumPad is opened or closed
ALSO
see the CreateJS Easel Docs for Container events such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover
CLOSE ▲PAGE ▤CODE ▤VIDS
Organizer
zim class - extends a zim.Tabs which extends a zim.Container which extends a createjs.Container
DESCRIPTION
A Tabs bar of interface for organizing a ZIM List.
This includes add, up, down, toTop, toBottom and remove icon buttons.
The Organizer can sit above the list and allow the user to add, remove and reorder the list.
Adding an item will add an empty button - this would need to be filled with the user input, etc.
If the user input is not ready, the autoAdd parameter can be set to false.
The change event will report an orgType of "add" and the add() method can be used when the input is ready.
The same for positioning or removing if desired.
See: https://zimjs.com/explore/organizer.htmlNOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const organizer = new Organizer(250)
.change(()=>{
if (organizer.orgType=="add") organizer.orgItem.text = "new";
});
new List({
width:250,
organizer:organizer // pass the organizer to the list
});
.center()
.mov(0,40);
// OR
const list = new List(250)
.center()
.mov(0,40);
var organizer = new Organizer(250, list)
.center()
.mov(0,-80)
.change(()=>{
if (organizer.orgType=="add") organizer.orgItem.text = "new";
});
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
width - (default 300) width of Tabs - this will determine the height as the Buttons are square.
There is no vertical version of an Organizer.
list - (default null) an ZIM List object to control - or null to add later with the list property
useAdd - default(true) set to false to not include the add button
useRemove - default(true) set to false to not include the remove button
usePosition - default(true) set to false to not include the position buttons (up, down, toTop, toBottom)
autoAdd - default(useAdd) set to false to not automatically add an item
the "change" event will still be dispatched and the orgType will be "add"
the add() method can be used to add user input for instance
autoRemove - default(useRemove) set to false to not automatically add an item
the "change" event will still be dispatched and the orgType will be "remove"
the remove() method can be used to manually remove
autoPosition - default(usePosition) set to false to not automatically position an item
the "change" event will still be dispatched and the orgType will be UP, DOWN, TOP, BOTTOM
the up(), down(), toTop(), toBottom() methods can be used to manually position
addForward - (default true) set to false to add item behind the current item (in list index) when adding
removeForward - (default true) set to false to select the item before the current item (in list index) when deleting
backgroundColor - (default tin) the background color of the buttons
rollBackgroundColor - (default grey) the background color of the button as rolled over
selectedBackgroundColor - (default charcoal) the background color of the button when selected
color - (default white) the text color of a deselected button when not rolled over
rollColor - (default color) the rollover color
selectedColor - (default color) the text color of the selected button
selectedRollColor - (default color) the text color of the rolled over selected button
spacing - (default 2) the distance between the buttons
corner - (default 0) the corner radius of the tabs
can also be an array of [topLeft, topRight, bottomRight, bottomLeft]
keyEnabled - (default true) so tab key cycles through tabs, shift tab backwards
gradient - (default null) 0 to 1 (try .3) adds a gradient to the buttons
gloss - (default null) 0 to 1 (try .1) adds a gloss to the buttons
backdropColor - (default dark) the background color of the list window (any CSS color)
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly
METHODS
add(index, item, clone) - manually add item at index - both are optional - index defaults to current index
clone defaults to false - set to true to add a clone of the item - returns object for chaining
up(index) - move item up one index number in list - index defaults to current index - returns object for chaining
down(index) - move item down one index number in list - index defaults to current index - returns object for chaining
toTop(index) - move item to top of list (index 0) - index defaults to current index - returns object for chaining
toBottom(index) - move item bottom of list (index length-1) - index defaults to current index - returns object for chaining
remove(index) - manually remove item at index - index defaults to current index - returns object for chaining
setButtons() - manually rotate buttons to match List direction - automatically done when added to list or list is initially added to organizer
hasProp(property as String) - returns true if property exists on object else returns false
clone() - makes a copy with properties such as x, y, etc. also copied
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection
ALSO
All Tab methods
ALSO
ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO
see the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.
PROPERTIES
type - holds the class name as a String
list - the list the organizer is operating on
lastIndex - read-only selected index before change event is dispatched
orgIndex - read-only current index of list - same as list.currentIndex
orgItem - read-only selected item of list - same as list.selected
orgType - read-only type of button pressed - "add", "remove", UP, DOWN, TOP, BOTTOM
removedItem - a reference to the item that has been removed when removed button is pressed or remove() is called
group - used when the object is made to add STYLE with the group selector (like a CSS class)
ALSO
see all Tab properties
ALSO
see ZIM Container for properties such as:
width, height, widthOnly, heightOnly, draggable, level, depth, group
blendMode, hue, saturation, brightness, contrast, etc.
ALSO
see the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.
EVENTS
dispatches a "change" event when the buttons are pressed (may be the same button again)
use orgType for what type "add", "remove", UP, DOWN, TOP, BOTTOM
use orgIndex or list.currentIndex for current list index
use orgItem or list.selected for selected item
use removedItem for a removed item
use lastIndex for index before change
ALSO
All Tab events
ALSO
see the CreateJS Easel Docs for Container events such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover
CLOSE ▲PAGE ▤CODE ▤VIDS
Connectors
zim class - extends a zim.Container which extends a createjs.Container
DESCRIPTION
Adds nodes (any DisplayObject - default a Circle) that can be dragged to draw a connector line.
There are three main uses for Connectors:
1. Connecting dots like in coloring books - use linear:true
2. Making hieararchy type drawings - use snaps
3. Connecting objects like boxes together - pass in objects to the points
The num parameter limits the number of lines that can be drawn from a node.
The dropType can be set to require nodes to be dropped on or off other nodes (or the default, any).
There are min and max distances the connections can be made.
These and the other parameters provide a variety of game and puzzle options.
The Line can be set to have start and end heads.
The lineType in the Line can be set to "straight", "corner" or "curve"
Line also accepts points for any arrangement of a connector
but in this version, these have not been used in Connectors.
BASE
A DisplayObject can be used as a base for the connector and have nodes added.
A base can have multiple nodes attached on any of its sides
This approaches diagramming tools like Powerpoint, etc.
but currently, only vertically placed nodes can connect to vertically placed nodes
and horizontally placed nodes can connect to horizontally placed nodes.
DropType single works per node, not per base so use a single node on a base for this.
A base can be a Blob or a Squiggle as well with nodes added to points.
See: https://zimjs.com/cat/connectors.html
PREMADE CONNECTIONS
As of ZIM ZIM 02, Connectors() have a steps property that represents connections made.
Use getSteps(true) when done making connections - this will popup an array of steps.
Copy this array of steps to the steps parameter of the Connector() in the app code.
Connectors will then be made and the additional steps added.
Connectors can also be added to a ZIM TransformManager() so users can easily recreated their connections.
See https://zimjs.com/zim/connectors.html
See https://www.youtube.com/watch?v=ISjW2khGrxoNOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// draws four general connectors that can be connected to one another in a box
// adjust connector nodes after connections are complete
const connectors = new Connectors({linear:true}).center();
connectors.on("complete", ()=>{
connectors.nodes.loop(node=>{
node.radius = 5;
node.color = red;
});
// or hide connectors
// connectors.nodes.alp(0);
S.update();
});
EXAMPLE
// make a grid of connectors and only connect to other nodes
// do not let user delete a node or doubleclick to move a node
const points = [];
const spacing = 60;
loop(10, i=>{
loop(10, j=>{
points.push([i*spacing, j*spacing]);
});
});
const connectors = new Connectors({
points:points,
node:new Rectangle(12,12,purple).centerReg(),
line:new Line({color:purple, thickness:12}),
nodeRollColor:orange,
dropType:"on",
dblclick:false,
deleteNode:false,
max:70
}).center();
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
width - (default null) the width of the connnectors container or will grow with added connectors
height - (default null) the height of the connnectors container or will grow with added connectors
points - (default [[0,0], [100,0], [100,100], [0,100]]) an array of point arrays for the connectors
or can be [[x, y, startNode, endNode, startLength, endLength], etc]
x - the x position of the node
y - the y position of the node
startNode - (default true) set to false to not drag from node
endNode - (default true) set to false to not drop on node
startLength - (default null) set line startLength - see Connectors line parameter (for corner or curve lineType)
endLength - (default null) set line endLength - see Connectors line parameter (for corner or curve lineType)
example:
[[0,0,true,false,50], [100,0,false,true], ...]
would allow dragging from the first to the second but not the second to the first
and if the line (see line parameter) is lineType corner or curve the start length would be 50
Another point could have a different startLength to avoid overlapping lines
A convenience object literal can be used as well for any or all points:
[{x:0, y:0, endNode:false, startLength:50}, {x:100, y:0, startNode:false}, ...]
or the first two items in the array can can be a base (that connectors nodes will be added to) and baseInfo as follows:
[[base, baseInfo], [base, baseInfo], [base, baseInfo], etc.]
these can have the startNode, endNode, startLength, endLength as well
and can have the object literal format as follows:
[{base:base, info:baseInfo, etc.}, etc.] rather than the x:x and y:y properties
the baseInfo can be a number of nodes to place around all base sides
or baseInfo can be an array with three different formats:
[all]
[left/right, top/bottom]
[left, right, top, bottom]
These can be numbers greater than 0 for the number of nodes on the side
or 0 for no nodes on the side
or -1 for both corners on the side
or -2 for the first corner on the side
or -3 for the second corner on the side
or can specify a ZIM Blob or Squiggle to place connectors on their points
so: points:blob or points:squiggle
the Blob or Squiggle do not need to be added to the stage
use the getPoints(true) method of the Blob or Squiggle or see https://zimjs.com/paths/
node - (default new Circle(10, grey, grey)) the DisplayObject to use as a node - should be centerReg()
line - (default new zim.Line({thickness:3, color:tin, strokeObj:{caps:"round"}})) the line to use as the connector
ZIM Line has a lineType parameter for "straight", "corner", and "curve" which will affect the connector lines
ZIM Line has a lineOrientation parameter of AUTO, HORIZONTAL or VERTICAL that will affect the connector lines
ZIM LIne has startLength and endLength parameters that work with "corner" and "curve"
these accept ZIM VEE to dynamically set random or a series of values
that can help avoid overlapping lines or
these values can be set individually on the points parameter or on bases directly as properties
which will override any values set on the line provided here in the line parameter
ZIM Line as curveH and curveV settings that will adjust the lines for the "curve" setting
the caps should be set to "round" if drawing with clear or transparent nodes
linear - (default false) lines will only connect to points that are next to one another (in the point order)
this is good for connecting dots
linearWrap - (default true) let the first point connect to the last point in the linear setting
linearOrder - (default false) require the points to be connected in order
num - (default null) set the maximum number of lines that can come from a node
snapH - (default null) snap the nodes to a provided horizontal distance
snapV - (default null) snap the nodes to a provided vertical distance
dropType - (default "any") determines what happens when a node is dropped as follows:
"any" lets the node be dropped anywhere (and may be snapped)
"on" will save the node if dropped on an existing node otherwise it is removed or put back to where it is dragged from
"off" will save the node if not dropped on an existing node otherwise it is removed or put back to where it is dragged from
"single" will save the node if dropped on a node with no existing connections otherwise it is removed or put back to where it is dragged from
note - these only work with the currently dragged node - not other multiple selected nodes
dropArray - (defult null) with "on" or "single" dropType and NOT linear - specify which nodes a node can be connected to
use an array of arrays for each point index [[indexes], [indexes], etc]
eg. [[1,2],[0,2],[3],[0,1]] - if in "on", point 0 can go to 1 or 2, point 1 can go to point 0 or 2, point 2 can only go to 3, etc.
if "single" is set then only one line can be drawn
also see dropIndex and dropArray for each node and the targetNode property
each time a connection is made, a new node is created - these will inherit the dropIndex and dropArray from a targetNode
and if the latestNode's dropArray and its lineArray are the same and the duplicateLine is false then a "blocked" event is dispatched
continuous - (default false) set to true to force nodes to only be made from the last node
all other nodes will have their noMouse() set - also see startIndex - also see linear for doing points in order
startIndex - (default null) set to a point index to force connectors to start at that node
all other nodes will have there noMouse() set - also see continous
duplicateLine - (default true) set to false to not allow multiple lines between the same connectors
deleteNode - (default true) set to false to not allow nodes to be deleted by holding or doubleclicking and delete key
dblclick - (default true) set to false to not allow nodes to be selected by doubleclicking
selected nodes can be moved together
selecting a node selects its children unless the ctrl key is held at which point it will not select children
selected nodes can be deleted with the delete key (or hold to delete)
deleting a node will delete its children
fullMove - (default true) set to false to not automatically drag a node when it is full (if num is set)
min - (default node radius or smallest dimension) the minimum distance from the node's parent a node must move before placing node
max - (default null) the maximum distance from the node's parent a node can be moved to be placed
boundary - (default null) a ZIM Boundary object for the nodes - or a DisplayObject such as the stage (see ZIM Drag)
expand - (default 0 or 10 on mobile) expand the node mousedown area
nodeRollColor - (default node.color.lighten(.2)) the color of the node as rolled over
nodeRollBorderColor - (default node.borderColor) the borderColor of the node as rolled over
nodeSelectedColor - (default white) the selected node color if doubleclicked
nodeSelectedBorderColor - (default node.borderColor) the selected node borderColor if doubleclicked
baseColor - (default node.color) the color of the node connected to a base DisplayObject (see points parameter)
baseBorderColor - (default node.borderColor) the borderColor of the node connected to a base DisplayObject (see points parameter)
baseRollover - (default false) set to true to change all nodes on a base to their roll colors when rolling over the base
rootLock - (default false) do not let the root node (a node in the points array) be draggable or deletable
grandChildren - (default true) do not let there be grandchildren - so there can only be the root nodes and their direct children
dblclickTime - (default .5) time in seconds to capture a double click within (also see ZIM TIME constant)
steps - (default null) pass in an array of [nodeNum, dropX, dropY] arrays to recreate the steps - see getSteps(), setSteps() and steps property
this can be used to recreate a previously made set of connectors and connections
note: the steps may also include a delete flag, and moveX and moveY values and a flag for single select (rather than default children select)
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly
METHODS
addNode(x, y, startNode, endNode, startLength, endLength) - add a node at x and y
cannot add nodes in linear mode - see linear parameter
addNode will not work with the dropArray parameter
x - the x position of the node or provide a base (see Connectors points parameter)
y - the y position of the node or provide base info (see Connectors points parameter)
startNode - (default true) set to false to not drag from node
endNode - (default true) set to false to not drop on node
startLength - (default null) set line startLength - see Connectors line parameter (for corner or curve lineType)
endLength - (default null) set line endLength - see Connectors line parameter (for corner or curve lineType)
removeNode(node) - remove the node (and its children)
removeConnectors() - removes all nodes and connectors except for root nodes which were specified in the points parameter
selectNode(node, children) - select a node and its children unless children parameter is set to false
makeConnection(node, x, y) - add a connection from a node to an x and y position
getSteps(popup) - gets an array of [nodeNum, dropX, dropY] that are automatically recorded each connection. Also see the steps property.
This can then copeied and passed into the steps parameter of Connectors() or the setSteps() method
to recreate recorded connections allowing a set of connectors to be recreated.
note: the steps may also include a delete flag, and moveX and moveY values and a flag for single select (rather than default children select).
setSteps(steps) - add steps to a Connectors() object - or use the steps parameter - also applySteps() for backwards compatibility
steps of [nodeNum, dropX, dropY] are automatically collected when nodes are made and stored in a steps array.
The data for the steps can be collected with getSteps(popup) and shown in a popup window if desired.
Then pass the steps in to the Connectors() step parameter or use setSteps(steps) to recreate the recorded Connectors.
note: the steps may also include a delete flag, and moveX and moveY values and a flag for single select (rather than default children select).
addBase(base, baseInfo) - add nodes to a base DisplayObject - see the points parameter for info about the baseInfo
removeBase(base) - remove the connectors for a base - the base will still need to be removed with removeFrom()
setAvailableIndexes(indexes) - set the provided index or array of indexes to be active
clone() - makes a copy with properties such as x, y, etc. also copied
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection
ALSO
ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO
see the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.
PROPERTIES
type - holds the class name as a String
latestNode - reference to the latest node while being dragged or and dropped successfully creating a connection
this is set to null if the dragged node is dropped and a connection is not made
see all the properties added to the node objects to get for instance, a creator node
targetNode - reference to a node on which the latestNode was dropped to successfully create a connection
the latestNode will inherit the dropIndex and dropArray from the targetNode
node - the DisplayObject used to make the connector nodes
the node objects also have these added properties:
creator - the node the node was created from (parent in hierarchy) or null if root node
creatorLine - the line going back to the creator or null if root node
creations - an array of nodes made from the node (its children in hiearchy)
before - the node before it in the original points array (or null if first)
after - the node after it in the original points array (or null if last)
nodeColor - remembers the node color in case ZIM VEE is used for color so rolloff knows what color to set
base - the base the node is associated with or null if no base
selected - whether the node is selected or not
orientation - the orientation of the lines from the node
nodeNum - a unique index in order nodes are made
this is used in steps to recreate nodes and connections with the Connectors steps parameter or setSteps(steps) method
dropIndex - get or set the index of the point on which an original node is made
this will get transfered from a targerNode
dropArray - get or set the array of dropIndexes that this node can connect to
this will get transfered from a targerNode
and if the dropArray and the lineArray are the same
and the duplicateLine is false then a "blocked" event is dispatched
lineArray - get an array of indexes to other node connections
this will get transfered to a targetNode
and if the lineArray and dropArray are the same
and the duplicateLine is false then a "blocked" event is dispatched
line - the Line object used to make the connector lines
the line objects also have these added properties:
node - a reference to the node at the start of the line
creatorNode - a reference to the node at the end of the line
nodes - the Container that holds the nodes
lines - the Container that holds the lines
points - a read only array of points of node
steps - an array of [nodeNum, dropX, dropY] arrays that can be used to recreate connections
see also the getSteps(popup) method and the Connectors() steps parameter or setSteps(steps) method to recreate connections
note: the steps may also include a delete flag, and moveX and moveY values.
selectedList - a read-only array of selected nodes
bases - an Array of DisplayObjects used as bases (provided through the points parameter or addBase())
the base objects also have these added properties and methods:
connectors - an array of all connector nodes on the base
connectorMoveEvent - reference to pressmove event on base
connectorUpEvent - reference to pressmove event on base
connectorOverEvent - reference to pressmove event on base
connectorOutEvent - reference to pressmove event on base
setConnectorColors(baseColor, baseBorderColor, nodeRollColor, nodeRollBorderColor) - method to set colors
startNode - set to false to not start a line from this base - see points parameter
endNode - set to false to not end a line on this base - see points parameter
startLength - set a start length for the connector - see points parameter
good to prevent corner and curved lines from overlapping
endLength - set an end Length for the connector - see points parameter
good to prevent corner and curved lines from overlapping
ALSO
see ZIM Container for properties such as:
width, height, widthOnly, heightOnly, draggable, level, depth, group
blendMode, hue, saturation, brightness, contrast, etc.
ALSO
see the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.
EVENTS
dispatches a "connection" event if a new node is made and lastNode property is set to the new node
dispatches a "noconnection" event if the connector is dropped and no new node is made
dispatches a "blocked" event of duplicateLine is false and continuous is true and there are no more connections available
this will happen if the latestNode's dropArray is the same as its linesArray (the order in the array does not matter)
dispatches a "complete" event in linear mode when the connections are complete
ALSO
see the CreateJS Easel Docs for Container events such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover
CLOSE ▲PAGE ▤CODE ▤VIDS
Marquee
zim class - extends a zim.Container which extends a createjs.Container
DESCRIPTION
A display for ads and promos using an optional ZIM Indicator with pause button.
The Marquee uses the ZIM Pages class to transition multiple items.
The items can be interactive ZIM objects made ahead of time and passed into the items parameters
Images can also be loaded with the load() method.
See: https://zimjs.com/marquee.html for an example
See: zim Carousel as well for a more simple object with arrows
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const promo1 = new Container(600, 200);
new Rectangle(promo1.width, promo1.height, yellow).addTo(promo1);
new Circle(30, red).center(promo1).drag();
// could be more
// optionally or alternatively, specify a Marquee object
// there can be multiple image properties using end src as key
// just use null as value if no URL
const marqueeData = {"retina.jpg": ["https://zimjs.com/retina.html", "_blank"]};
const marqueePath = "assets/";
// create Marquee
// note the actual width of marquee will be 25+25 more for added margins (optional)
const marquee = new Marquee(600, 200, [promo1])
.center()
.load(marqueeData, marqueePath);
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
width - (default 300) width of marquee content
final marquee width will have marginLeft and marginRight added to this width
height - (default 100) height of content and marquee
items - (default null) an array of Display Objects - can be interactive
time - (default 5) time interval in seconds for changing items (also see ZIM TIME constant)
also see marqueeTime property for each item to individually override the time for viewing
transition - (default "slide") the transition between items
options are: "none", "reveal", "slide", "fade", "clear", "black", "white", "fan"
speed - (default .5) speed of transition in seconds (also see ZIM TIME constant)
direction - (default RIGHT) location of next item relative to current item
options are: RIGHT, LEFT, UP, DOWN
marginLeft - (default 25) width at left of content for Indicator and Pause button
set to 0 to not show indicator and pause button
marginRight - (default 25) width at right of content for Z logo with animated MARQUEE
set to 0 to not show Z logo with animated MARQUEE
marqueeType - (default "dot" or "circle") the Indicator type - also "box" or "square"
borderColor - (default dark) border color - any ZIM or HTML color - set to -1 for no border
borderWidth - (default 1) width of border if borderColor - set to 0 for no border
refresh - (default 30*60 seconds) page refresh to handle browser memory build
mix - (default true) randomize content and then play in that order - different for each page load
note: loaded files will always come after initial marquee items
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly
METHODS
add(obj, url, target) - add a Display Object (obj) - can be interactive content - returns obj for chaining
can provide an overall url and target for url
but often will provide navigation button, etc. as part of interactive content
remove(obj) - remove an object from the marquee - returns obj for chaining
will also call a dispose() method on the obj if there is one
go(page) - transition to specific page (obj) or index - returns obj for chaining
pause(state, immediate) - pause or unpause the Marquee - returns obj for chaining
can be used by interactive code to pause Marquee when interacting
immediate (default false) set to true to make the Marquee go to next item right away when unpausing (no effect when pausing)
load(data, path) - Marquee object for images their optional action url and target: - returns obj for chaining
data in format: {imageSrc:"actionURL", imageSrc:["actionURL", "target"], etc.}
path: optional directory location such as a relative path: "assets/"
clone() - makes a copy with properties such as x, y, etc. also copied
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection
ALSO
ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO
see the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.
PROPERTIES
type - holds the class name as a String
content - a reference to the ZIM Container that holds the content
pages - a reference to the ZIM Pages object that holds the items
use pages.pages to access an array of pages, etc. - see Pages Class
button - a reference to the pause/play button if there is one
indicator - a reference to the ZIM Indicator if there is one - see Indicator Class
index - the selected index of the Marquee
selected - the selected item of the Marquee
lastSelected - the last selected item of the Marquee
time - get or set the time of the marquee (between changing items)
speed - get the speed of the transition
paused - read only property as to whether the Marquee is paused - see pause() method
interval - a reference to the ZIM interval
left - a reference to the left Container
right - a reference to the right Container if there is one
icon - a reference to the Z icon if there is one
label - a reference to the MARQUEE Label that pops out of the Z if there is one
eg. label.visible = false to not show label popping out
marqueeLoader - a reference to the ZIM loadAssets queue if load() is used
Each item gets a marquee property that points to the ZIM marquee it is in
Each item gets a marqueViews property recording how many times viewed
Each item can have a marqueeTime property set to ms to customize its view time
ALSO
see ZIM Container for properties such as:
width, height, widthOnly, heightOnly, draggable, level, depth, group
blendMode, hue, saturation, brightness, contrast, etc.
ALSO
see the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.
EVENTS
dispatches a "page" event when item starts to change
dispatches a "pagetransitioned" event when item finishes changing
ALSO
see the CreateJS Easel Docs for Container events such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover
CLOSE ▲PAGE ▤CODE ▤VIDS
Carousel
zim class - extends a zim.Container which extends a createjs.Container
DESCRIPTION
A horizontal display for multiple objects with arrows at sides to animate to previous and next.
This is good for sliding banners, or sliding through a set of icons.
Items will be tiled in a ZIM Tile with one row.
It is expected that the items be the same width and height
but if not, the items will have width set to the most common width and heights aligned vertically to the valign setting.
Thank you Marva for the idea and original code!
See: ZIM Marquee for a more complex alternate format with Indicator
See: https://zimjs.com/zim/carousel.html for an example
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const items = [
new Rectangle(400,80,red).tap(()=>{zog("red");}),
new Rectangle(400,80,green).tap(()=>{zog("green");}),
new Rectangle(400,80,blue).tap(()=>{zgo("https://zimjs.com","_blank");})
];
new Carousel(items, 1).center();
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
items - default(seven multicolored rectangles) an array of Display Objects - can be interactive
items will be scaled to the most common width and tiled - see the tile property
a String item will be converted to a new Pic(item)
viewNum - (default 3) the number of items to show
time - (default .2) time in seconds to animate between items (also see ZIM TIME constant)
spacing - (default 20) the space between the items
backgroundColor - (default clear) the backgroundColor - also see background property
backing - (default null) - an optional backing DisplayObject that goes on top of the backing and under the tile
padding - (default 0) - the default for the background outside the tile
paddingH - (default padding) - the horizontal padding to override the padding setting
paddingV - (default padding) - the vertical padding to override the padding setting
arrowLeft - (default new Arrow().rot(180)) - an arrow for going left
arrowRight - (default new Arrow()) - an arrow for going right
arrowGap - (default 20) the gap between the arrow and the backing
valign - (default CENTER) the vertical alignment of the tile items
ease - (default quadInOut) the ease of the animation - see ZIM animate() ease parameter for types
swipe - (default true) set to false to not make the tile swipeable - see also the swipe property
remember - (default "zimCarousel") set to false to not remember the index when reloading the page
index - (default 0 or remembered index) the starting index - see also the index property
this is the index of the first (left) item in view
continuous - (default true) set to false to stop at ends
this will clone the items and use the modulus to keep index numbers correct
if continuous is false and the carousel is cycled then it will bounce back and forth
selectedIndex - same as index, kept in for backwards compatibility in ZIM DUO
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly
METHODS
goRight(time) - go to the right - time defaults to Carousel time parameter but can be customized - returns object for chaining
goLeft(time) - go to the left - time defaults to Carousel time parameter but can be customized - returns object for chaining
cycle(cycleTime, transitionTime, repeat, repeatNum, recycle, rtl) - |ZIM VEE| cycle the carousel from the current index (see also remember)
cycleTime (default 5) in seconds to animate to next item
transitionTime (default 1) in seconds to animate between items - overrides Carousel time setting
often a faster Carousel time is desired for pressing arrows or swiping
but a slower transitionTime when cycling
repeat (default true) continue past ends if carousel continuous is set
or go back and forth from start to end if continuous is not set
set to false to just go one once
repeatNum (default 0) set to a number greater than 0 to limit repeats or bounces - returns object for chaining
for bounce, use .5 for partial cycle for example, 1.5 will go forth then back then forth
recycle (default cycleTime*2) time in seconds to restart cycle if cleared due to arrows or swipes
set to false or -1 to not restart the cycle
rtl (default DIR) if true will stop going back to 0 index if no repeat
cycleClear() - stops the cycle
disableArrows() - turn arrows off - returns object for chaining
enableArrows() - turn arrows on - returns object for chaining
clone() - makes a copy with properties such as x, y, etc. also copied
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection
ALSO
ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO
see the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.
PROPERTIES
type - holds the class name as a String
index - get or set the first index (left) of the viewable area
items - reference to the original array of items
tile - reference to the single-row tile that holds the items
viewNum - get the number of items viewable
itemWidth - get the calculated item width
itemHeight - get the calculated maximum height
spacing - get the spacing between the items
arrowLeft - reference to the left arrow
arrowRight - reference to the right arrow
swipe - get or set whether the tile can be swiped
repeatTotal - the number of repeats or bounce cycles
swipeObj - reference to the ZIM Swipe object
cycleInterval - reference to the cycle interval
recycleEvent - reference to the recycle event
recycleWait - reference to the recycle timeout
background - reference to the background rectangle
backing - reference to a provided backing
continuous - get whether the carousel is continuous
ALSO
see ZIM Container for properties such as:
width, height, widthOnly, heightOnly, draggable, level, depth, group
blendMode, hue, saturation, brightness, contrast, etc.
ALSO
see the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.
EVENTS
dispatches a "page" event when starting an animation
dispatches a "goleft" and a "goright" event when going left or right - just after the page event
dispatches a "transitioned" event when item finishes changing
dispatches a "bounced" event on each bounce
dispatches a "bouncedone" event if the cycle bounceNum is set and the bounce is done
dispatches a "cyclecleared" event if the cycle is set and stops due to arrow press or swipe
ALSO
see the CreateJS Easel Docs for Container events such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover
CLOSE ▲PAGE ▤CODE ▤VIDS
Carousel3D
zim class - extends a zim.Container which extends a createjs.Container
DESCRIPTION
A 3D carousel that cycles through items as it is swiped
or using next(), prev() or go() methods or index property.
Can be horizontal or vertical.
See: ZIM Carousel for a 2D component.
See: https://zimjs.com/018/carousel3D.html for an example
See: https://zimjs.com/018/carousel3D_2.html for a simple example
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// normally load this in the Frame()
F.loadAssets("ai_monsters.png", "https://zimjs.org/assets/");
F.on("complete", ()=>{
const pages = [];
loop(4*4, i=>{
const sprite = new Sprite("ai_monsters.png", 4, 4)
.run({frame:i})
.reg(CENTER);
pages.push(sprite);
});
// 2.5 will spread the items more in the width
// 10 will increase height difference
// .6 will curve them a little more
const carousel = new zim.Carousel3D(700, 500, pages, 2.5, 10, .6)
.center()
.change(()=>{
indicator.index = carousel.index;
});
// optional indicator
const indicator = new Indicator({
width:pages.length*20,
height:25,
num:pages.length,
interactive:true,
toggleFirst:false,
delayLights:true
}).pos(0,80,CENTER,BOTTOM).change(()=>{
carousel.go(indicator.index);
});
// optional arrows
new Arrow().pos(50,0,RIGHT,CENTER).tap(()=>{
carousel.next();
});
new Arrow().rot(180).pos(50,0,LEFT,CENTER).tap(()=>{
carousel.prev();
});
S.update();
});
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
width - (default 300) the width of the component
if vertical is false then this may not match the actual content as the equations for spreading are complex
if vertical is true then this will set the width of the items to match
note: if horizontal, the fade is applied across the width, so this can be adjusted to affect the fade effect
height - (default 200) the height of the component
if vertical is false then this will set the height of the items to match
if vertical is true then this may not match the actual content as the equations for spreading are complex
note: if vertical, the fade is applied across the height, so this can be adjusted to affect the fade effect
items - (default six Pages) an array of Display Objects
items will be scaled to the height of the component if the vertical is false
or to the width of the component if the vertical is true
a String item will be converted to a new Pic(item)
if the item is not a form of Container then it will be placed in a Container so fade will work
the original item will then be available as currentItem.content
items will also automatically have their registration points set to the center
widthFactor - (default 1) a number to spread out items horizontally - just experiment, for instance 2.5 or 10 and see results
heightFactor - (default 1) a number to spread out items vertically - just experiment, for instance 2.5 or 10 and see results
curve - (default .5) a ratio from 0-1 that will move outside items inward to make the carousel look more curved
the equations for spreading out and scaling the items is pretty tricky
settings also change depending on the number of items
adjust widthFactor, heightFactor and curve until the desired look is reached
for a horizontal carousel, adjusting the height factor will cause outside items to get smaller faster
sometimes outside items will appear to float so then increase the curve
sometimes the curve will cause unexpected behavior like crossing over... then reduce the curve... try .98 rather than 1 etc.
interactive - (default false) set to true to allow interactivity within the items
setting to true may remove swiping on the items - but this can be adjusted
for instance, use a Page() to hold the interactive objects
then for each page set page.background.noMouse()
and then the items can be swiped and the interactive objects interacted with
continuous - (default true) set to false to stop at the last item and not go backwards past the first item
fade - (default .5) the outside alpha of the fade object that gets added to each item
the fade object is added automatically to the top of the item and is a rectangle colored to the fadeColor parameter
set fade to 1 to completely fade, set fade to 0 or false to not fade
the fade is applied with 0 in the middle and the fade amount at the edges
based on the provided width parameter for horizontal or height parameter for vertical
so whichever of these values can be adjusted to fine tune the fade
fadeColor - (default Frame.color) the color of the fade object - see fade
note: just setting the alpha of an item will not work as there are items beneath
so a fade object has been added to each item
vertical - (default false) set to true to make a vertical carousel
sensitivity - (default .2) the sensitivity of the ZIM Swiper() object
set to higher to speed up and lower to slow down
damp - (default .1) the damp value with 1 being no damping and 0 being no movement
factor - (default 1) set to -1 to swipe the opposite way
index - (default 0) set the desired starting index - see also the index property
selectedIndex - same as index, kept in for backwards compatibility in ZIM DUO
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly
METHODS
go(index, immediate, wrap) - go to an index - returns the object for chaining
immediate defaults to false - set to true to avoid animating
wrap defaults to false - set to true to animate the shortest route to the index
for instance, if there are 22 items and the carousel is at index 2
if wrap is false, it will animate forward (2,3,4,...19,20) to target index of 20
if wrap is true, it will animate backwards (2,1,22,21,20) to a target index of 20
prev(immediate) - go to the previous item - returns object for chaining
immediate defaults to false - set to true to go to the item without animating
next(immediate) - go to the next item - returns object for chaining
immediate defaults to false - set to true to go to the item without animating
addItem(item, index) - add an item or an array of items at an index (default at the end)
this will adjust the items array and call makeCarousel
removeItem(index, num) - remove an item at an index - pass an optional num to remove that many items
makeCarousel() - if the items array is changed must call makeCarousel - see the items property
clone() - makes a copy with properties such as x, y, etc. also copied
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection
ALSO
ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO
see the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.
PROPERTIES
type - holds the class name as a String
index - get or set the index of the item
selectedItem - the item at the front
each item has a content property if the item was added to a container by the carousel (only if item was not a container)
each item has a fader property which is a ZIM Rectangle - if the fade was not false or 0
items - the array of items
if setting this then call makeCarousel() - also see addItem() and removeItem()
curve - get or set the curve - see the curve parameter
continuous - get or set whether the carousel is continuous - see the continuous parameter
if setting this then call makeCarousel()
swiper - reference to the ZIM Swiper object
backing - the clear rectangle that is the swiper object
holder - the Container that holds all the items
ALSO
see ZIM Container for properties such as:
width, height, widthOnly, heightOnly, draggable, level, depth, group
blendMode, hue, saturation, brightness, contrast, etc.
ALSO
see the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.
EVENTS
dispatches a "change" event (or use change() method) when a new item is at the front
dispatches a "still" event when the pointer is up and the carousel has stopped movings
ALSO
see the CreateJS Easel Docs for Container events such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover
CLOSE ▲PAGE ▤CODE ▤VIDS
Loader
zim class - extends a zim.Button which extends a zim.Container
DESCRIPTION
Loader lets you upload images, text or JSON. These are available on the loaded event function.
Loader uses the HTML input type=file tag and overlays this with a createjs DOMElement.
Loader is a Button so can be displayed for the user to click on.
It defaults to a dashed line region as you can also drag and drop files to the loader.
You can also save an image using the save() method to a new browser window for the user to save
NOTE
due to the HTML tag being overlayed, the loader.resize() must be called if it is moved
(This is called automatically when the stage is resized)
NOTE
if the loader is placed in a container and the container is removed or added again
the loader must be manually removed or added again with loader.removeFrom() or loader.addTo().
This is so ZIM does not have to keep track of HTML tags each time a container is added or removed.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// loading a single pic
const loader = new Loader({
label:"UPLOAD PIC HERE",
width:700,
height:400,
corner:50,
multiple:false // or don't bother and it just gets the first loaded
}).center();
loader.on("loaded", e=>{
e.bitmap.centerReg().drag();
loader.removeFrom();
S.update();
});
// if wanting a save button
const saveButton = new Button({label:"SAVE"})
.pos(10,10,RIGHT,BOTTOM)
.tap(()=>{
loader.save(S); // or some other container... can specify crop bounds too
});
EXAMPLE
// loading multiple pics
const loader = new Loader({
label:"UPLOAD PIC OR DROP PICS HERE",
width:700,
height:400,
corner:50
}).center();
loader.on("loaded", e=>{
loop(e.bitmaps, bitmap=>{
bitmap.centerReg().drag();
});
loader.removeFrom();
S.update();
});
EXAMPLE
// loading a JSON file:
const loader = new Loader({
type:"JSON",
label:"UPLOAD JSON",
width:700,
height:400,
corner:50
}).center();
// choose a test.json file with the following in it:
// {"test":"testing"}
loader.on("loaded", e=>{
zog(e.json.test); // "testing"
loader.removeFrom();
S.update();
});
EXAMPLE
// save a json file
const obj = {a:[1,2,3], b:"hello"};
new Loader().save({content:obj, type:"json"}); // save a json file with obj
EXAMPLE
// save a text file
const textInput = new TextInput().center();
new Button({label:"SUBMIT", wait:"SAVED"}).center().mov(0,100).tap(()=>{
new Loader().save({content:textInput.text, filename:"answer.txt", type:"text"});
});
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
width - (default 250) the width of the button
height - (default 70) the height of the button
label - (default "UPLOAD PIC") ZIM Label or plain text
type - (default "image") set to "text" to receive text or "JSON" to receive a parsed JSON file and "other" for others like MP3
backgroundColor - (default "rgba(0,0,0,.05)") background color of button (any CSS color)
rollBackgroundColor - (default "rgba(0,0,0,.1)") rollover color of button backbground
color - (default "rgba(0,0,0,.5)") text color of button (any CSS color)
rollColor - (default color) rollover text color of button
borderColor - (default rgba(0,0,0,.3)) the color of the border
borderWidth - (default 1) thickness of the border
corner - (default 0) the round of the corner (set to 0 for no corner)
can also be an array of [topLeft, topRight, bottomRight, bottomLeft]
shadowColor - (default "rgba(0,0,0,.3)") set to -1 for no shadow
shadowBlur - (default 14) how blurred the shadow is if the shadow is set
hitPadding - (default 0) adds extra hit area to the button (good for mobile)
gradient - (default 0) 0 to 1 (try .3) adds a gradient to the button
gloss - (default 0) 0 to 1 (try .1) adds a gloss to the button
backing - (default null) a Display object for the backing of the button (eg. Shape, Bitmap, Container, Sprite)
see ZIM Pizzazz module for a fun set of Button Shapes like Boomerangs, Ovals, Lightning Bolts, etc.
https://zimjs.com/bits/view/pizzazz.html
rollBacking - (default null) a Display object for the backing of the rolled-on button
rollPersist - (default false) set to true to keep rollover state when button is pressed even if rolling off
icon - (default false) set to display object to add icon at the center of the button and remove label
https://zimjs.com/bits/view/icons.html
rollIcon - (default false) set to display object to show icon on rollover
toggle - (default null) set to string to toggle with label or display object to toggle with icon or if no icon, the backing
rollToggle - (default null) set to display object to toggle with rollIcon or rollBacking if no icon
there is no rollToggle for a label - that is handled by rollColor on the label
toggleEvent - (default mousedown for mobile and click for not mobile) what event causes the toggle
dashed - (default true) set to false to turn off the dashed for the border
frame - (default the zdf) a reference to the Frame (to scale and position the HTML tag)
multiple - (default true) set to false to let user only upload one file rather than multiple files (with shift or ctrl)
accept - (default null) set to extension / MIME-type to limit types of files the upload dialog will suggest
here are some examples:
"image/*"
"image/jpeg, image/png"
".png, .jpeg, .jpg, .gif"
"image/jpeg, .jpeg, .jpg"
".txt, .json, application/json"
"audio/mpeg, .mp3"
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly
METHODS
resize() - call the resize event if the scale or position of the Loader is changed
this will sync the location of the HTML input tag
resize() is only needed if the scale or x, y of the Loader (or its container) is changed
it is not needed for general window resizing - the Loader handles this
Note: if the Frame itself changes location in the HTML document, call a F.update()
this will then dispatch an update event to the Loader and it will resize()
this is not needed if resizing the window or scrolling - see Frame update() method docs
save(content, filename, x, y, width, height, cached, cachedBounds, type, data, quality) - save a picture or text (supports ZIM DUO)
content - the Display object to be saved such as a Container, Bitmap, etc.
or text (or Label, TextInput, TextArea) or JSON or object for JSON
if text or json, then x, y, width, height, cached, cachedBounds, data, and quality are ignored
filename - (default random) - the text name of the file (with or without extension - also see type)
x, y, width, height - the cropping bounds on that object otherwise defaults to 0,0,W,H
cached - (default false) set to true if the object is currently already cached
cachedBounds - if you are saving a different bounds than was previously cached
setting the bounds here (createjs.Rectangle) will restore the cache to the previous bounds
type - (default "png") set to "jpeg" for jpeg or "txt", "text" or "json"
json will convert the content to JSON if it is not already in JSON format
data - (default false) set to true to save as base64 data
otherwise save returns the object for chaining
quality - (default .92) a number between 0 an 1 representing the quality of the saved image (jpeg)
note, this parameter may be moved to before data in the next version of ZIM
Button methods:
setBacking(type, newBacking) - dynamically set any type of backing for button (if null removes backing for that type)
Backing types are: "backing", "rollBacking", "toggleBacking", "rollToggleBacking", "waitBacking", "rollWaitBacking"
note - all backing will have a pattern property if a pattern is set as a backing
setIcon(type, newIcon) - dynamically set any type of icon for button (if null removes icon for that type)
Icon types are: "icon", "rollIcon", "toggleIcon", "rollToggleIcon", "waitIcon", "rollWaitIcon"
toggle(state) - forces a toggle of label if toggle param is string, else toggles icon if icon is set or otherwise toggles backing
state defaults to null so just toggles
pass in true to go to the toggled state and false to go to the original state
hasProp(property as String) - returns true if property exists on object else returns false
clone() - makes a copy with properties such as x, y, etc. also copied
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection
ALSO
ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO
see the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.
PROPERTIES
type - holds the class name as a String
tag - the HTML input tag of type file - used for uploading
frame - get or set the frame - set this if changing frames
Button properties:
text - references the text property of the Label object of the button
label - gives access to the label
backgroundColor - get or set non-rolled on backing color (if no backing specified)
rollBackgroundColor - get or set rolled on backing color
color - get or set non-rolled on text color (if no icon specified)
rollColor - get or set rolled on text color
backing - references the backing of the button
rollBacking - references the rollBacking (if set)
icon - references the icon of the button (if set)
rollIcon - references the rollIcon (if set)
toggleObj - references the toggle object (string or display object if set)
rollToggle - references the rollToggle (if set)
toggled - true if button is in toggled state, false if button is in original state
enabled - default is true - set to false to disable (the HTML aspect of the Loader will remail - so use loader.removeFrom() or loader.dispose() if you do not need it gain)
rollPersist - default is false - set to true to keep rollover state when button is pressed even if rolling off
focus - get or set the focus property of the Button used for tabOrder
ALSO
see ZIM Container for properties such as:
width, height, widthOnly, heightOnly, draggable, level, depth, group
blendMode, hue, saturation, brightness, contrast, etc.
ALSO
see the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.
ACTIONEVENT
This component is affected by the general ACTIONEVENT setting
The default is "mousedown" - if set to something else the component will act on click (press)
EVENTS
loaded - is dispatched when the files(s) are uploaded - the event object comes with the following properties:
FOR IMAGES (see types array)
e.bitmaps - an array of Bitmap objects of the loaded images
e.bitmap - the first Bitmap to be created from the loaded images
e.lastBitmap - the last Bitmap to be created from the loaded images
e.total - the total Bitmap objects to be created from the loaded images
FOR TEXT (see types array)
e.texts - an array of String objects of the loaded text files
e.text - the first text loaded
e.lastText - the last text loaded
e.total - the total number of texts loaded
FOR JSON (see types array)
e.jsons - an array of JSON objects of the loaded JSON files
e.json - the first JSON object loaded
e.lastJSON - the last JSON object loaded
e.total - the total number of JSON files loaded
FOR OTHER (see types array)
e.others - an array of other objects of loaded files
e.other - the first other object loaded
e.lastOther - the last other object loaded
e.total - the total number of other files loaded
ALSO
see the CreateJS Easel Docs for Container events such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover
CLOSE ▲PAGE ▤CODE ▤VIDS
TextArea
zim class - extends a zim.Container which extends a createjs.Container
DESCRIPTION
TextArea creates an input text field by overlaying an HTML TextArea.
The TextArea is then overlayed with the createjs DOMElement
and scaled and positioned with ZIM code. This can also be used if selectable text is required
Access to the HTML tag is provided with the TextArea tag property.
So CSS Styles can be applied to the HTML tag as with any HTML textarea tag
The TextArea comes with a ZIM Rectangle in behind that you can adjust with parameters
or remove completely if you so desire using the TextArea background property
ie. myTextArea.background.alpha=0; or myTextArea.removeChild(myTextArea.background)
NOTE
due to the HTML tag being overlayed, the TextArea.resize() must be called if it is moved
(This is called automatically when the stage is resized)
It also means that a TextArea in a Window or List is probably not a good thing.
Consider using Label and then toggling a TextArea on mouseover and mouseout.
See https://zimjs.com/snips for an older discontinued example.
NOTE
if the TextArea is placed in a container and the container is removed or added again
the textArea must be manually removed or added again with textArea.removeFrom() or textArea.addTo().
This is so ZIM does not have to keep track of HTML tags each time a container is added or removed.
When using TextArea in a Pane or in Pages this will be automatically handled
only if the TextArea is directly in the Pane or the page (not nested in further Containers)
NOTE
rotation and skewing of TextArea is not supported - although might work with custom CSS transformations
NOTE
because of these limitations, consider the TextEditor or TextInput as a solution.
The TextEditor allows you to use a Label which is a proper part of the Canvas
and then change the label with a pop-up editor that includes a TextArea.
SEE: https://zimjs.com/cat/texteditor.html
TextInput is a one line input text field that is actually part of the canvas
SEE https://zimjs.com/explore/textinput.htmlNOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const textArea = new TextArea(300, 200).center();
const label = new Label({text:""}).pos(20,20);
textArea.on("input", ()=>{
label.text = textArea.text;
S.update();
});
// to set scrollBars on TextArea use CSS on the TextArea tag property:
textArea.tag.style.overflow = "auto"; // etc.
// if manually scaled or positioned (or container is scaled or positioned)
// then the TextArea must be resized with the resize method
textArea.sca(.5).mov(200);
textArea.resize();
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
width - (default 250) the width of the TextArea backing (the textarea field will be that less the padding*2)
height - (default 70) the height of the TextArea backing (the textarea field will be that less the padding*2)
Note: to set scrollBars use CSS: textArea.tag.style.overflow = "auto";
placeholder - (default null) the HTML placeholder for the TextArea
text - (default null) the text of the TextArea - see also the text property
size - (default 20) a Number for the font-size of the TextArea (do not use px on the end)
to change the font, use CSS on the tag property: textArea.tag.style.fontFamily = "courier";
padding - (default 5) the pixels between the backing border and the HTML textarea
color - (default granite) text color (any CSS color)
backgroundColor - (default "rgba(256,256,256,.1)") background color of box
borderColor - (default rgba(0,0,0,.1)) the color of the border
borderWidth - (default 1) thickness of the border
corner - (default 0) the round of the corner (set to 0 for no corner)
can also be an array of [topLeft, topRight, bottomRight, bottomLeft]
shadowColor - (default null) the shadow color (css color) of a drop shadow
shadowBlur - (default null) pixels of how blurred the shadow is if the shadow is set - eg. 10
dashed - (default true) set to false to turn off the dashed for the border
id - (default null) a string id for the HTML textarea tag for CSS styling, etc.
placeholder - (default null) a string that is used for the HTML textarea tag placeholder parameter
readOnly - (default false) set to true to make TextArea read only (still selectable)
spellCheck - (default true) set to false to turn Browser spell check off
password - (default false) set to true to turn the field into a password field - single line only (uses input field type=password and not TextArea)
inputType - (default false) set to "text" to show a text input (one line) - or try other HTML input types - "email", "number", etc.
the various types of HTML inputs are not really tested - would suggest using Tag() instead for these (or preferably ZIM components)
wrap - (default true) set to false to stop the textarea from wrapping (css white-space:pre)
maxLength - (default null) set to a number to limit the number of characters in the textarea
frame - (default the zdf) a reference to the Frame (to scale and position the HTML tag)
expand - (default 20) hit area around background to count as a press on TextArea - handy for dragging as HTML tag area will override mouse on canvas
keyboardShift - (default false) set to true to lift stage at least 1/4 height or up to textArea y/2 to raise textArea above keyboard
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly
METHODS
setFocus(type) - sets the focus of the TextArea tag (thanks Armin for the prompting)
type is a Boolean that defaults to true - set to false to make the TextArea blur (loose focus)
might need timeout 100ms before setting
see also focus property
resize() - call the resize method if the scale or position of the TextArea is changed
this will sync the location of the HTML textarea tag
resize() is only needed if the scale or x, y of the TextArea (or its container) is changed
it is not needed for general window resizing - the TextArea handles this
Note: if the Frame itself changes location in the HTML document, call a F.update()
this will then dispatch an update event to the TextArea and it will resize()
this is not needed if resizing the window or scrolling - see Frame update() method docs
hasProp(property as String) - returns true if property exists on object else returns false
clone() - makes a copy with properties such as x, y, etc. also copied
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection
ALSO
ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO
see the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.
PROPERTIES
type - holds the class name as a String
value - get or set the text content of the TextArea
text - get or set the text value
focus - get or set if the TextArea tag has focus or use setFocus() to set (might need timeout 100ms before setting)
readOnly - set to true to not be able to edit or to false to be able to edit (always can select)
set enabled to false to disable selection
maxLength - get or set the maximum number of characters typed - will not truncate existing characters until typed
tag - the HTML textarea tag - just a regular HMTL form tag which can be styled
background - access to the Rectangle() used for the background
you can remove this with yourTextArea.background.removeFrom(yourTextArea);
or adjust it dynamically with any of the Rectangle properties like color
blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation
keyFocus - get or set the keyboard focus on the component - see also zim.KEYFOCUS
will be set to true if this component is the first made or component is the last to be used
enabled - get or set enabled of TextArea
this will remember last readOnly so any setting of readonly in between enabled settings will have to be reapplied.
frame - get or set the frame - set this if changing frames
ALSO
see ZIM Container for properties such as:
width, height, widthOnly, heightOnly, draggable, level, depth, group
blendMode, hue, saturation, brightness, contrast, etc.
ALSO
see the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.
EVENTS
focus, blur are dispatched when the text area gains and loses focus
input is dispatched when the text area is typed or pasted into
capture the event object data property to see what letter is typed
change is dispatched when the text area is different after losing focus
These are just the html events passed on through - note the difference between input and change!
ALSO
see the CreateJS Easel Docs for Container events such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover
CLOSE ▲PAGE ▤CODE ▤BITS VIDS
cache
zim DisplayObject method overrides CreateJS cache() method with more flexible parameters
https://createjs.com/docs/easeljs/classes/Container.html#method_cacheDESCRIPTION
Turns the object into a bitmap which can be rendered more efficiently, especially on mobile.
Caching may blur the object slightly, most noticable when caching a Label.
Every stage update must re-render objects on the stage.
This can be processor intensive for lots of vectors - such as Labels and Shapes.
Generally, we can build without caching but if better performance is needed, then caching may help.
A cached object can be transformed (scale, rotation, position, skew, alpha)
but if the object inside changes, for instance if the text changes, then updateCache() will need to be called.
Constantly calling updateCache() for instance, an animated blob, will not help performance.
A handy trick is to cache an object before animating and uncaching it after animating
this can improve animation performance and the slight blur of the object is not noticed during animation.
ALSO SEE: updateCache() and uncache()
EXAMPLE
const circle = new Circle(50, red).cache().center();
timeout(1, ()=>{
circle.alpha = .5; // cache does not have to be updated to see alpha change
S.update();
});
timeout(2, ()=>{
circle.color = blue;
circle.updateCache(); // cache must be updated to see color change
S.update();
});
EXAMPLE
// cache text as it is animated
new Label("Cached Text")
.cache() // cache the text so animation is smoother
.alp(0)
.center()
.animate({
props:{alpha:1},
time:2,
call:target=>{
target.uncache(); // uncache the label so it is crisper looking
}
});
PARAMETERS supports DUO - parameters or single object with properties below
** cache dimensions will be set to the bounds of the object if the first two or four parameters are not provided
width||x - (default getBounds().x) the width of the chache - or the x if first four parameters are provided
height||y - (default getBounds().y) the height of the chache - or the y if first four parameters are provided
width - (default getBounds().width) the width of the chache - or null if first two parameters are provided
height - (default getBounds().height) the height of the chache - or null if first two parameters are provided
scale - (default 1) set to 2 to cache with twice the fidelity if later scaling up
options - (default null) additional parameters for cache logic - see CreateJS somewhere for details
also added adjustBounds property for options - set to true to set new bounds and registration point
on cached objects with x,y,width,height different than the original
this appears to NOT be the default with createjs cache() which keeps the original registration point and bounds
automatically fixing this changes lots of things so use the adjustBounds option when needed
for instance when caching parts of a container and requiring hit tests or the part to be draggable, etc.
margin - (default 0) add or subtract a margin from the bounds
eg. margin:10 will make the cache size 10 pixels more on all sides
this can be handy when caching objects with borders - that go half outside the natural bounds
RETURNS obj for chaining
CLOSE ▲PAGE ▤CODE ▤
const circle = new Circle(50, red).cache().center();
timeout(1, ()=>{
circle.alpha = .5; // cache does not have to be updated to see alpha change
S.update();
});
timeout(2, ()=>{
circle.color = blue;
circle.updateCache(); // cache must be updated to see color change
S.update();
});
PARAMETERS
blendMode - (default null) a blendMode (compositeOperation) see ble()
if a blendMode is provided the previous cache is not deleted as the new cache is drawn
RETURNS null
CLOSE ▲PAGE ▤CODE ▤
// cache text as it is animated then uncache
new Label("Cached Text")
.cache() // cache the text so animation is smoother
.alp(0)
.center()
.animate({
props:{alpha:1},
time:2,
call:target=>{
target.uncache(); // uncache the label so it is crisper looking
}
});
on
CreateJS method
https://createjs.com/docs/easeljs/classes/Container.html#method_onDESCRIPTION
Captures events. Similar to addEventListener() in raw JavaScript
but is shorter to write and has a few extra features.
Generally, events are when interactivity occurs or ZIM has a message.
Here are some types:
"click", "dblclick", "mousedown/pressdown", "pressmove", "pressup",
"mousemove", "stagemousemove", "mouseover", "mouseout"
"ready", "complete", "change", "keydown", "keyup"
Note: would suggest using tap() with dbl:true instead of "dblclick" for proper performance on mobile
The events available for ZIM Objects are listed at the bottom of their Doc entry.
Events can also be turned off in a couple ways - see the examples.
To turn the event off the return value of the on() method is used
so DO NOT CHAIN THE ON METHOD
ALSO SEE: off() and tap(), change(), movement(), hov(), hold()
EXAMPLE
// BASIC EVENT
const button = new Button().center();
// the type of event as a string and the function to call
// here we use an arrow function
button.on("click", ()=>{
zgo("https://zimjs.com", "_blank");
});
// alternatively, using an anonymous function
button.on("click", function() {
zgo("https://zimjs.com", "_blank");
});
// alternatively, using a named function
// do not put () after the function name
// that would call the function right away which is not desired
// we want to tell the on() method which function to run when the event happens
button.on("click", doClick);
function doClick() {
zgo("https://zimjs.com", "_blank");
}
EXAMPLE
// EVENT OBJECT
const tile = new Tile(new Rectangle(), 5, 5, 2, 2).center();
tile.on("mousedown", e=>{ // collect the event object in parameter e
// e.target is the object that caused the event (one of the rectangles)
e.target.alpha = 0;
// e.currentTarget is the object on which the event is placed (the tile)
e.target.mov(5);
// do not forget to update stage in events if needed!
S.update();
});
EXAMPLE
// REMOVING EVENT
let keyEvent = F.on("keydown", e=>{
zog(e.keyCode); // will tell code for key pressed
// etc.
});
timeout(2, ()=>{ // time in seconds as of ZIM Cat
// remove the keyEvent
F.off("keydown", keyEvent);
});
// RE-ADDING EVENT
timeout(4, ()=>{
// add the keyEvent back again
// note - the event must be re-assigned to use again
// this leads to a tricky bug if not careful!
keyEvent = F.on("keydown", keyEvent);
});
timeout(6, ()=>{
// remove the keyEvent again
// this only works if we re-assigned the latest event to keyEvent
// which is why we used let rather than const
F.off("keydown", keyEvent);
});
EXAMPLE
// ONE EVENT CALL
// call this function only once when mousing over the stage
// note: "mousemove" would only trigger if moving over an object on the stage
S.on("stagemousemove", ()=>{
pauseAnimate(false); // unpause all animations
}, null, true); // this true means remove the event after calling it once
// REMOVE METHOD
// a remove() method is available on the event object
const circle = new Circle().center();
circle.on("mouseover", e=>{
circle.alpha -= .1;
if (circle.alpha <= .5) e.remove();
S.update();
});
PARAMETERS
type - the type of event as a string - this depends on the object on which the event is being placed
here are some common events - see the EVENTS section of the specific object for more
"click", "dblclick", "mousedown/pressdown", "pressmove", "pressup",
"mousemove", "stagemousemove", "mouseover", "mouseout"
"ready", "complete", "change", "keydown", "keyup"
Note: would suggest using tap() with dbl:true instead of "dblclick" for proper performance on mobile
listener - the function to call when the event happens
this is often an arrow function or an anonymous function but can be a named function
the function will receive an event object as its parameter often collected as e
see https://createjs.com/docs/easeljs/classes/MouseEvent.html for properties, etc.
common event object properties are:
target (what caused the event),
currentTarget (what the event was placed on)
keyCode (for key events)
often used as e.target, e.currentTarget, e.keyCode
scope - (optional) the scope to execute the listener in.
Defaults to the dispatcher/currentTarget for function listeners,
and to the listener itself for object listeners (ie. using handleEvent).
once - (default false) set to true to remove the listener after the first event call
data - (default null) arbitrary data that will be included as the second parameter when the listener is called.
useCapture - (default false) for events that bubble, indicates whether to listen for the event in the capture or bubbling/target phase
RETURNS a reference to use as the second parameter of the off() method to turn the event off (SO DO NOT CHAIN THE ON METHOD)
CLOSE ▲PAGE ▤CODE ▤
// REMOVING EVENT
let keyEvent = F.on("keydown", e=>{
zog(e.keyCode); // will tell code for key pressed
// etc.
});
timeout(2, ()=>{ // time in seconds as of ZIM Cat
// remove the keyEvent
F.off("keydown", keyEvent);
});
// RE-ADDING EVENT
timeout(4, ()=>{
// add the keyEvent back again
// note - the event must be re-assigned to use again
// this leads to a tricky bug if not careful!
keyEvent = F.on("keydown", keyEvent);
});
timeout(6, ()=>{
// remove the keyEvent again
// this only works if we re-assigned the latest event to keyEvent
// which is why we used let rather than const
F.off("keydown", keyEvent);
});
PARAMETERS
type - the string type of the event used in on()
listener - the listener function or object used in on()
useCapture - (default false) the setting for the capture or bubbling/target phase used in on()
RETURNS null
CLOSE ▲PAGE ▤CODE ▤
getBounds
CreateJS method
https://createjs.com/docs/easeljs/classes/Container.html#method_getBoundsDESCRIPTION
Gets bounds data for a Display Object (with bounds set).
This will have x, y, width and height properties.
Imagine the bounds as an invisible rectangle around the object.
The bounds are what dictate the width and height of an object (along with scale).
The bounds will affect how an object is positioned with pos().
The bounds also may affect certain types of hitTests.
Most ZIM DisplayObjects have their bounds set automatically.
Shape() however does not have its bounds set automatically.
ALSO SEE: setBounds()
EXAMPLE
const rect = new Rectangle(100, 100, blue).center();
zog(rect.getBounds()); // {x:0, y:0, width:100, height:100}
const circle = new Circle(100, red).center(); // 100 is the radius
zog(circle.getBounds()); // {x:-100,y:-100,width:200,height:200}
// note that a Circle has its origin (0,0) in the middle
// so half the bounds goes to the left and above
// and the width and height are twice the radius
// Also note that the registration point is completely independent from the bounds
// and independent from the origin. See https://codepen.io/zimjs/pen/qBEjYZV
setBounds
zim DisplayObject method overrides CreateJS setBounds() method with more flexible parameters
https://createjs.com/docs/easeljs/classes/Container.html#method_setBoundsDESCRIPTION
Sets bounds for a Display Object.
Imagine the bounds as an invisible rectangle around the object.
The bounds are what dictate the width and height of an object (along with scale).
The bounds will affect how an object is positioned with pos().
The bounds also may affect certain types of hitTests.
Most ZIM DisplayObjects have their bounds set automatically.
Shape() however does not have its bounds set automatically.
The setBounds() method will override any automatic bounds.
ALSO SEE: getBounds()
EXAMPLE
new Shape().f(red).dr(0,0,100,100).setBounds(100,100).center();
// without bounds set on the shape, it would not center properly
EXAMPLE
// Containers have two options for how bounds are determined
// 1. the size can be passed in to start in which case these bounds will remain unchanged
// 2. or no size can be passed in which means the bounds will grow to the contents
// setting bounds to null will convert a type 1 container into a type 2 container
const holder = new Container(100,100).center();
new Rectangle(200,200).addTo(holder);
// currently the bounds are {x:0,y:0,width:100,height:100}
holder.setBounds(null);
// now the bounds are {x:0,y:0,width:200,height:200}
new Rectangle(300,300).addTo(holder);
// now the bounds are {x:0,y:0,width:300,height:300}
holder.setBounds(100,100);
// now the bounds are back to {x:0,y:0,width:100,height:100}
// this example just demonstrates it would not be very practical
PARAMETERS
width||x||Boundary - (default null) the width of the bounds - or the x if four parameters are provided
or a ZIM Boundary Object {x,y,width,height} - same as CreateJS Rectangle
height||y - (default width) the height of the bounds - or the y if four parameters are provided
width - (default null) the width of the bounds - or null if only the first two parameters are provided
height - (default null) the height of the bounds - or null if only the first two parameters are provided
RETURNS the object for chaining
CLOSE ▲PAGE ▤CODE ▤
localToGlobal
zim DisplayObject method overrides CreateJS localToGlobal() method with adjustment for scaled stage due to retina pixel density
https://createjs.com/docs/easeljs/classes/Container.html#method_localToGlobalDESCRIPTION
Returns a point on the stage for the provided x and y within the object's (container's) coordinate system.
BACKGROUND
Each container has its own x and y coordinate system. The stage is said to be the global coordinate system.
Since containers may be located at different x and y positions and nested inside one another and scaled, rotated or skewed,
finding the matching x and y position within different coordinates can be tricky to calculate.
Traditionally in Interactive Media, three methods have been provided to translate x and y between coordinate systems.
localToGlobal() finds the global x and y of a specified x and y inside the container object
globalToLocal() finds the x and y inside the container object of a specified global x and y
localToLocal() finds the x and y inside an other specified container of a specified x an y inside the container object
SEE: https://zimjs.com/editor/view/Z_N5E7Z
ALSO SEE: globalToLocal() and localToLocal()
EXAMPLE
const holder = new Container(400,400).loc(100,100);
const circle = new Circle.center(holder);
zog(holder.localToGlobal(circle.x, circle.y)); // {x:300, y:300}
// Note: and easier way providing the same result is:
zog(circle.localToGlobal(0,0)); // {x:300, y:300}
PARAMETERS
x - (default null) the x position inside the container
y - (default null) the y position inside the container
RETURNS a Point with x and y properties on the stage (global) that match the provide x and y inside the container
CLOSE ▲PAGE ▤CODE ▤
globalToLocal
zim DisplayObject method overrides CreateJS globalToLocal() method with adjustment for scaled stage due to retina pixel density
https://createjs.com/docs/easeljs/classes/Container.html#method_globalToLocalDESCRIPTION
Returns a point within the object's (container's) coordinate system that matches the provided x and y on the stage (global).
BACKGROUND
Each container has its own x and y coordinate system. The stage is said to be the global coordinate system.
Since containers may be located at different x and y positions and nested inside one another and scaled, rotated or skewed,
finding the matching x and y position within different coordinates can be tricky to calculate.
Traditionally in Interactive Media, three methods have been provided to translate x and y between coordinate systems.
localToGlobal() finds the global x and y of a specified x and y inside the container object
globalToLocal() finds the x and y inside the container object of a specified global x and y
localToLocal() finds the x and y inside an other specified container of a specified x an y inside the container object
SEE: https://zimjs.com/editor/view/Z_N5E7Z
ALSO SEE: localToGlobal() and localToLocal()
EXAMPLE
const rect = new Rectangle(500,500,red).center();
const circle = new Circle(20,purple).center(rect).noMouse(); // noMouse so movement turns off when outside rect
rect.movement(()=>{
circle.loc(rect.globalToLocal(F.mouseX, F.mouseY)); // convert global mouse to x and y point within rect container
S.update();
});
// Note: see Frame cursors property to do this more easily and precisely
PARAMETERS
x - (default null) the x position inside the container
y - (default null) the y position inside the container
RETURNS a Point with x and y properties inside the container that match the provided x and y points on the stage (global)
CLOSE ▲PAGE ▤CODE ▤
localToLocal
zim DisplayObject method overrides CreateJS localToLocal() method with adjustment for scaled stage due to retina pixel density
https://createjs.com/docs/easeljs/classes/Container.html#method_localToLocalDESCRIPTION
Returns a point with x and y positions inside the provided target container's coordinate system
that match the x and y within the object's (container's) coordinate system.
BACKGROUND
Each container has its own x and y coordinate system. The stage is said to be the global coordinate system.
Since containers may be located at different x and y positions and nested inside one another and scaled, rotated or skewed,
finding the matching x and y position within different coordinates can be tricky to calculate.
Traditionally in Interactive Media, three methods have been provided to translate x and y between coordinate systems.
SEE: https://zimjs.com/editor/view/Z_N5E7Z
localToGlobal() finds the global x and y of a specified x and y inside the container object
globalToLocal() finds the x and y inside the container object of a specified global x and y
localToLocal() finds the x and y inside an other specified container of a specified x an y inside the container object
ALSO SEE: globalToLocal() and localToLocal()
EXAMPLE
const wheel = new Circle(300, blue).center().animate({props:{rotation:360}, time:5, loop:true, ease:"linear"});
const level = new Circle(20).loc(0,250,wheel); // will spin around with wheel
const land = new Container(800,800).center();
const player = new Circle(50,purple).center(land).drag(land);
Ticker.add(()=>{
if (player.y < level.localToLocal(0,0,land).y) player.color = red; // if player goes below level
else player.color = purple; // player is above level
});
PARAMETERS
x - (default null) the x position inside the container
y - (default null) the y position inside the container
target - (default null) the target container in which to match the provided x and y positions
RETURNS a Point with x and y properties in the target container that match the provide x and y inside the object container
CLOSE ▲PAGE ▤CODE ▤
clone
zim DisplayObject method overrides CreateJS cache()
https://createjs.com/docs/easeljs/classes/Container.html#method_cloneDESCRIPTION
Makes a copy of the DisplayObject (and children).
The clone() method is particularily handy for making multiple assets from a single asset()
Although new Pic() instead of asset() is automatically cloned to give a new object each new Pic()
ALSO SEE: duplicate() to duplicate custom properties as well
EXAMPLE
const circle = new Circle(100, red).center();
circle2 = circle.clone().pos(100,100,RIGHT,BOTTOM); // make a copy and position at bottom right
EXAMPLE
asset("pic.jpg").center();
asset("pic.jpg").pos(100,100,RIGHT,BOTTOM); // will just move the existing asset to the corner
asset("pic.jpg").clone().pos(100,100,RIGHT,TOP); // will add a copy of the asset at the top
new Pic("pic.jpg").pos(0,100,CENTER); // no need to clone() a new Pic()
PARAMETERS
exact (default false) ZIM VEE (Pick) values are active in clones unless exact is set to true
For instance, if a Container holds a new Circle(20,[blue,green])
then its clone might be blue or green
If exact is set to true then the clone will be whatever color was picked for the original circle
RETURNS the object for chaining
CLOSE ▲PAGE ▤CODE ▤
dispose
zim DisplayObject method
DESCRIPTION
Deletes the DisplayObject from memory.
This means it removes event listeners, stops animations, drags, gestures, transforms, etc.
The references to the DisplayObject must still be set to null for proper garbage collection.
Objects that have references to them may still be saved in memory
and this can lead to memory leaks if many objects are being made.
The average DisplayObject added to the stage and removed does not really need to be disposed()
Only when hundreds or thousands of objects are being made will there be need for dispose()
SEE: https://www.youtube.com/watch?v=aTnNicsLP3A // on memory management
EXAMPLE
const tile = new Tile(new Pic("pic.jpg"), 100, 100).center();
const tilesArray = [tile]; // if we had an array of such tiles
const tilesObject = {fave:tile}; // if we had a reference in an object literal
timeout(10, ()=>{
tile.dispose(); // will recursively dispose all children in Tile (the Bitmaps)
tile = null; // remove the reference to tile
tilesArray[0] = null; // set the array reference to null
delete tilesObject.fave; // delete the property in the object literal
S.update();
});
PARAMETERS
disposing - (default null) pass in true to indicate already started dispose if calling dispose() on the super class from a custom class
otherwise infinite looping can occur (used internally by ZIM)
RETURNS the object for chaining
CLOSE ▲PAGE ▤CODE ▤
--------------ADDING AND REMOVING
EXPAND ▼ obj.addTo(container, index, still)
addTo
zim DisplayObject method
DESCRIPTION
A wrapper function for addChild() / addChildAt() to add the obj to the container.
This allows us to chain more effectively:
var circle = new Circle().addTo(stage).drag();
Also, ZIM has obj.center(container) and obj.centerReg(container) functions
where the obj comes first followed by the container.
So it is a pain to flip things and use container.addChild(obj)
Now, we can use obj.addTo(container) and the object we are adding comes first.
The index parameter is similar to an addChildAt()
We can also use obj.removeFrom() to automatically remove from the container
EXAMPLE
const circle = new Circle(50, red);
circle.addTo(stage); // or just circle.addTo(); // for the default frame's stage
// with chaining - and dragging:
var circle = new Circle(50, red).addTo().drag();
const rect = new Rectangle(100, 100, blue);
rect.addTo(stage, 0); // place on bottom
EXAMPLE
// Changing Coordinates
// An object may appear to change positions
// when you add from one container to another (the stage is a container too).
// This happens because the x and y origin inside the containers may be at different places
// yet the x and y property of the object remains unchanged.
// The "still" parameter converts between the coordinates and updates the x and y
// so that the object does not appear to jump - this defaults to true
const container = new Container().pos(100,100);
const rectangle = new Rectangle(200, 200, yellow).addTo(container);
// we want to drag the container and the circle
// but when the circle is in the container we want to drag the circle independently
// this leads to a tricky situation that can be solved as follows:
rectangle.on("mousedown", function() {container.drag({currentTarget:true});});
rectangle.on("pressup", function() {container.noDrag();});
const circle = new Circle(50, blue).center().drag();
// check to see if the circle is over the container and if so then add the circle
// try settin the third parameter to false to see what would normally happen
circle.on("pressup", ()=>{
if (rectangle.hitTestReg(circle)) { // do not hitTest the container!
circle.addTo(container); // keep position with default true as third parameter
} else {
circle.addTo(stage);
}
S.update();
});
PARAMETERS supports DUO - parameters or single object with properties below
container - (default first frame's stage) the container to add to
index - (default null) if provided will addChildAt the object at the index (0 being bottom)
still - (default true or false if no parent) makes object not move when added from one coordinate space to another
this also may change the objects x and y properties - set to false not to do this
uses localToLocal() to accomplish this
the still parameter is ignored if object currently does not have a parent
RETURNS obj for chaining
CLOSE ▲PAGE ▤CODE ▤BITS VIDS
removeFrom
zim DisplayObject method
DESCRIPTION
A chainable wrapper function for removeChild() that removes the obj from the container
Matches obj.addTo(container)
We have obj.removeFrom(container)
NOTE
do not need to specify container as removeFrom()
will remove the object from its parent.
EXAMPLE
const circle = new Circle(50, red);
circle.addTo(); // adds to stage
// later
circle.removeFrom(); // same as circle.removeFrom(stage)
PARAMETERS
container - (default the object's parent) the container to remove the object from
RETURNS obj for chaining
CLOSE ▲PAGE ▤CODE ▤BITS
added
zim DisplayObject method
DESCRIPTION
Calls callback function when object is added to the stage
CreateJS has an "added" event that triggers when an object is added to another container
but this container may not be on the stage.
added polls several times quickly and then every 100ms to see if the object has a stage property
Once it does then it calls the callback and removes the interval
EXAMPLE
const circle = new Circle(50, red);
circle.added(()=>{zog("has stage");});
PARAMETERS
callback - the function to call when added - will call right away if object is already added
call will receive a reference to the stage and the object as parameters
** these two parameters are depricated as added no longer uses an interval as of ZIM Cat 03 patch
** but rather uses the "added" event and then checks to make sure it was the stage container the target was added to
interval - (default .1) time in seconds to check (also see ZIM TIME constant)
keeps repeating until stage is there or maxTime is reached
maxTime - (default null) time in seconds to keep checking or forever if not provided
RETURNS id of interval so clearInterval(id) will stop added() from checking for stage
CLOSE ▲PAGE ▤CODE ▤
centerReg
zim DisplayObject method
DESCRIPTION
Centers the registration point on the bounds - obj must have bounds set.
Will default to adding the object to the container.
If no container parameter is provided and the object is in a container,
centerReg will center the object in the current container. Thanks Bracer Jack for the suggestion.
If no container and the object is not in a container,
centerReg will center the object on the default frame's stage.
A convenience function for setting both registration points at once.
Also see center() for centering without changing the registration point.
Also see reg(CENTER) for the same effect but without adding to container
SEE: https://zimjs.com/positioningEXAMPLE
const rect = new Rectangle(100, 100, blue)
.centerReg() // centers registration, centers and adds to stage
.animate({obj:{rotation:360}, time:1, ease:"linear", loop:true});
// To just center the registration and not add it to a container
// use rect.centerReg(null, null, false);
// This is different than in the past where leaving out parameters would just center the registration
// The change is to match the default behaviour of addTo() and center() to add to stage without parameters
PARAMETERS supports DUO - parameters or single object with properties below
container - (default object's parent or if none, the first frame's stage) centers the object on and adds to the container
index - (default null) if provided will addChildAt the object at the index (0 being bottom)
will be ignored if the add parameter is false
add - (default true) set to false to only center the object's registration
setting to false will not remove the object if already added to a container
RETURNS obj for chaining
CLOSE ▲PAGE ▤CODE ▤BITS VIDS
center
zim DisplayObject method
DESCRIPTION
Centers the object on the container.
Will default to adding the object to the container.
If no container parameter is provided and the object is in a container,
center will center the object in the current container. Thanks Bracer Jack for the suggestion.
If no container and the object is not in a container,
center will center the object on the default frame's stage.
Also see centerReg() for centering registration point at same time.
SEE: https://zimjs.com/positioningEXAMPLE
var rect = new Rectangle(100, 100, blue)
.center() // centers and adds to stage
// the below animation will be around the registration point at the top left corner
// this is usually not desired - see centerReg() when rotating and scaling
.animate({obj:{rotation:360}, time:1, ease:"linear", loop:true});
PARAMETERS supports DUO - parameters or single object with properties below
container - (default object's parent or if none, the first frame's stage) centers the object on and adds to the container
index - (default null) if provided will addChildAt the object at the index (0 being bottom)
will be ignored if the add parameter is false
add - (default true) set to false to only center and not add the object to the container
setting to false will not remove the object if already added to a container
RETURNS obj for chaining
CLOSE ▲PAGE ▤CODE ▤BITS VIDS
place
zim DisplayObject method
DESCRIPTION
Sets the object to drag and logs to the console the x and y.
Also can use keyboard arrows for moving 1 pixel
and SHIFT keyboard arrows for moving 10 pixels.
This is for when building you can move an object around to position it
then when positioned, look at the console for the positioning code.
In your code, set the reported x and y and delete the place call.
EXAMPLE
circle.place("circle"); // lets you drag circle around - then see console
PARAMETERS
id - (default null) the name of the object so that the log gives you complete code
RETURNS obj for chaining
CLOSE ▲PAGE ▤CODE ▤BITS VIDS
placeReg
zim DisplayObject method
DESCRIPTION
Gives draggable indicator to position a registration point in an object
This is for when building and when positioned, look at the console
for registration code and delete the placeReg call.
EXAMPLE
myContainer.placeReg("myContainer"); // lets you drag an indicator around - then see console
PARAMETERS
id - (default null) the name of the object so that the log gives you complete code
RETURNS obj for chaining
CLOSE ▲PAGE ▤CODE ▤
obj.pos(x, y, horizontal, vertical, container, index, add, reg, regX, regY)
pos
zim DisplayObject method
DESCRIPTION
Chainable convenience function to position an object and optionally add to a container
pos() provides easy positioning around the edges of a container.
pos() has gone through three versions:
VERSION 1 - positioned the registration point and has been replaced with loc()
VERSION 2 - positioned left, right top or bottom with right and bottom being specified with boolean true
VERSION 3 - positions left, right, center, top and bottom with ZIM positioning constants
pos() positions objects from the edges of the container or on the stage if no container provided
This defaults to the left of the object from the left and the top of the object from the top
If the horizontal parameter is set to RIGHT it will position the right of the object from the right of the container
If the vertical parameter is set to BOTTOM it will position the bottom of the object from the bottom of the container
If CENTER is provided, it centers the object on the axis and then moves it the x or y provided
Setting reg (or regX, regY) to true will position to the registration point - also see POSREG constant
SEE: https://zimjs.com/positioningEXAMPLE
// 1. adds circle to default stage moves left and top of circle to 100, 100
circle1.pos(100, 100);
// 2. adds circle to box and positions right and bottom of circle 100 and 200
// from right and bottom of box bounds
circle2.pos(100, 200, RIGHT, BOTTOM, box)
// or
circle2.pos(100, 200, RIGHT, "bottom", box)
// or
circle2.pos(100, 200, true, true, box);
// 3. centers the circle in x and moves 100 and places circle 200 from bottom
circle3.pos(100, 200, CENTER, BOTTOM);
// 4. adds to stage and puts registration point at x=200 and y=0
circle4.pos({x:200, reg:true});
// 5. adds to stage and puts registration point at x=200 and y=radius (not y=0)
circle5.pos({x:200, regX:true});
PARAMETERS supports DUO - parameters or single object with properties below
x - (default null or 0 for right) the x distance in the container to the left or right side of the object
which side, depends on the right parameter
if reg or regX is true then it is the distance to the registration point not the side
y - (default null or 0 for bottom) the y distance in the container to the top or bottom of the object
which one, depends on the bottom parameter
if reg or regY is true then it is the distance to the registration point not the top or bottom
horizontal - (default LEFT) LEFT will position the left side to the left side of the container bounds
set to RIGHT to postion the right side from the right of the container bounds
if reg or regX is true then it is the distance to the registration point not the side
set to CENTER or MIDDLE to center object and move amount provided in x
if reg or regX is true then centers the registration point and moves the amount provided in x
set to START to position LEFT for ZIM DIR constant is "ltr" or RIGHT when DIR="rtl" - END is the opposite
vertical - (default TOP) TOP will position the top side to the top side of the container bounds
set to BOTTOM to postion the bottom side from the bottom of the container bounds
if reg or regY is true then it is the distance to the registration point not the side
set to CENTER or MIDDLE to center object and move amount provided in y
if reg or regY is true then centers the registration point and moves the amount provided in y
container - (default current container or zdf stage) the Container to add the obj to and position
index - (default null) if provided will addChildAt the object at the index (0 being bottom)
add - (default true) add to container - set to false to not add
reg - (default false) set to true to position to the registration point rather than sides, top or bottom
See: POSREG contant - set POSREG=true; to change the default pos() to position the registration point
This is good to adjust legacy code - or if the original pos setting is preferred.
regX - (default reg) set to true to position x to the registration point rather than the sides
will override reg if provided
regY - (default reg) set to true to position y to the registration point rather than the top or bottom
will override reg if provided
PROPERTIES
zimPos - added to the obj and holds an object with the initial pos() parameter values as follows:
{x,y,h,v,i} for x, y, horizontal, vertical and index.
note: to get the container ask for the obj parent property
RETURNS obj for chaining
CLOSE ▲PAGE ▤CODE ▤BITS VIDS
EXPAND ▼ obj.loc(target|x, y, container, index, add, localToLocal)
obj.loc(target|x, y, container, index, add, localToLocal)
loc
zim DisplayObject method
DESCRIPTION
locates obj registration at registration of provided target
or at x and y if numbers are provided
This is like the original pos() where the registration is used
But it a single object with x y properties can be passed as a parameter
Will calculate localToLocal if target is provided
Also can add to container at an index
SEE: https://zimjs.com/positioningEXAMPLE
const circle1 = new Circle().pos(100,100);
const circle2 = new Circle().loc(circle1); // adds on top of circle1
EXAMPLE
new Circle().loc(400, 400); // places reg of circle at 400, 400
// note, this is different than pos(400, 400) which would place left top of circle at 400, 400
PARAMETERS supports DUO - parameters or single object with properties below
target | x - (default null) an object with x and y properties such as any ZIM Display Object (Rectangle, Button, etc)
or a zim Point(100, 100) object or {x:100, y:300}, etc.
or an Array with an x and y value [100,300]
or can be a Number for an x value - in which case, a y value might be expected too
y - (default null) an optional y value
container - (default current container or zdf stage) the Container to add the obj to and position
index - (default null) if provided will addChildAt the object at the index (0 being bottom)
add - (default true) add to container - set to false to not add
localToLocal - (default true) if target is provided, the obj will be placed on the target matching locations across coordiate spaces
RETURNS obj for chaining
CLOSE ▲PAGE ▤CODE ▤
mov
zim DisplayObject method
DESCRIPTION
Move the object over in the x and/or y
Equivalant to obj.x += x and obj.y += y
Pass in 0 for no shift in x if you just want to shift y
Gives chainable relative position
SEE: https://zimjs.com/positioningEXAMPLE
new Circle().center().mov(50); // move to right 50
PARAMETERS supports DUO - parameters or single object with properties below
x - (default 0) the distance in x to move (can be negative)
y - (default 0) the distance in y to move (can be negative)
RETURNS obj for chaining
CLOSE ▲PAGE ▤CODE ▤BITS VIDS
sca
zim DisplayObject method
DESCRIPTION
Chainable convenience function to do scaleX and scaleY in one call.
If you pass in just the scale parameter, it scales both x and y to this value.
If you pass in scale and scaleY then it scales x and y independently.
Also see scaleTo(), fit() and Layout().
EXAMPLE
circle.sca(.5); // x and y scale to .5
circle.sca(.5, 2); // x scale to .5 and y scale to 2
PARAMETERS
scale - the scale (1 being full scale, 2 being twice as big, etc.)
scaleY - (default null) pass this in to scale x and y independently
RETURNS obj for chaining
CLOSE ▲PAGE ▤CODE ▤BITS VIDS
alp
zim DisplayObject method
DESCRIPTION
Chainable convenience function to set the alpha
See also the CreateJS set({prop:val, prop2:val}) method;
See also vis() and visible to keep hitTests as alp(0) does not
EXAMPLE
new Circle(100, red).center().ble("difference");
// note: a blendMode will not work against the background color of the canvas
// if this is desired, add a rectangle onto the stage to start
new Rectangle(W, H, F.color).addTo();
new Circle(100, red).center().ble("difference");
PARAMETERS
blendMode - (default "difference") the blendMode string:
normal, multiply, screen, overlay, darken, lighten
color-dodge, color-burn, hard-light, soft-light
difference, exclusion, hue, saturation, color, luminosity
OR the compositeOperation string:
source-over, source-in, source-out, source-atop,
destination-over, destination-in, destination-out, destination-atop,
copy, xor
RETURNS obj for chaining
CLOSE ▲PAGE ▤CODE ▤
dye
zim DisplayObject method
DESCRIPTION
Chainable convenience function to set the color of a shape
or the backgroundColor of an object with backgroundColor
Also see color and backgroundColor properties
EXAMPLE
circle.dye(red); // same as circle.color = red;
button.dye(blue); // same as button.backgroundColor = blue;
PARAMETERS
color - a ZIM or HTML color - green, "blue", "#333", etc.
RETURNS obj for chaining
CLOSE ▲PAGE ▤CODE ▤
hov
zim DisplayObject method
DESCRIPTION
Chainable convenience function to set the rollover (hover) property of an object
This defaults to alpha if a number and color if a string
But the type of property can also be set - for multiple properties, use a Button
This sets mouseover and mouseout events on the object
It will also set the cursor of the object to "pointer"
This can be changed with the cursor property or the cur() method
EXAMPLE
new Circle().center().alp(.5).hov(.8);
new Rectangle(100,100,blue).center().hov(green);
new Triangle().center().hov(1.5, "scale");
PARAMETERS
value - (default 1) the hover value of the property
if a number, the default property is alpha
if a string, the default property is color
passing in -1 will remove the hover
prop - (default alpha or color as stated above) the property to change to the value on hover
RETURNS obj for chaining
CLOSE ▲PAGE ▤CODE ▤
rot
zim DisplayObject method
DESCRIPTION
Chainable convenience function to set the rotation
See also the CreateJS set({prop:val, prop2:val}) method;
EXAMPLE
new Rectangle().center().rot(180);
PARAMETERS
rotation - (default null) the rotation in degrees
x - (default regX) set an x value to rotate about
y - (default regY) set a y value to rotate about
RETURNS obj for chaining
CLOSE ▲PAGE ▤CODE ▤BITS VIDS
siz
zim DisplayObject method
DESCRIPTION
Chainable convenience function to set width and height in one call.
If you pass in just the width or height parameter, it keeps the aspect ratio.
If you want to set only the width or height, then set only to true.
If you pass in both the width and height then it sets both.
Note: that width and height will adjust the scaleX and scaleY of the object.
Also see width, height, widthOnly, heightOnly.
EXAMPLE
const rect = new Rectangle(100,200,blue).addTo();
rect.siz(200); // sets width to 200 and height to 400
rect.siz(200, null, true); // sets width to 200 and leaves height at 200
rect.siz(200, 100); // sets width to 200 and height to 100
PARAMETERS
width - (default null) the width of the object
setting only the width will set the widht and keep the aspect ratio
unless the only parameter is set to true
height - (default null) the height of the object
setting only the width will set the widht and keep the aspect ratio
unless the only parameter is set to true
only - (default false) - defaults to keeping aspect ratio when one dimension set
set to true to scale only a single dimension (like widthOnly and heightOnly properties)
RETURNS obj for chaining
CLOSE ▲PAGE ▤CODE ▤VIDS
ske
zim DisplayObject method
DESCRIPTION
Chainable convenience function to skewX and skewY (slant)
See also the CreateJS set({prop:val, prop2:val}) method;
EXAMPLE
new Circle().center().ske(20);
PARAMETERS
skewX - (default null) the x skew
skewY - (default null) the y skew
RETURNS obj for chaining
CLOSE ▲PAGE ▤CODE ▤BITS VIDS
reg
zim DisplayObject method
DESCRIPTION
Chainable convenience function to regX and regY (registration point)
The registration point is the point the object is positioned with
and the object scales and rotates around the registration point
See also the CreateJS set({prop:val, prop2:val}) method;
See also centerReg()
NOTE
most rectangular objects have their registration at the top left
whereas most circular objects (not images, though) have their registration point in the center.
But this registration point can be moved anywhere.
See: https://codepen.io/zimjs/pen/qBEjYZVEXAMPLE
new Circle().reg(200, 200).center().outline(); // the circle in the outline() shows the registration point
EXAMPLE
new Rectangle().reg(RIGHT,BOTTOM).center(); // place reg at the bottom right corner
PARAMETERS
regX - (default null) the x registration as a number
or use LEFT, CENTER, RIGHT, START, END (for START and END, see DIR setting)
use CENTER with no regY to center both regX and regY
use CENTER for regX and DEFAULT for regY to only center regX
regY - (default null) the y registration as a number
or use TOP, CENTER, BOTTOM
still - (default false) set to true to move the object to counter the registration change
this will let you set the registration point without moving the object
RETURNS obj for chaining
CLOSE ▲PAGE ▤CODE ▤BITS VIDS
top
zim DisplayObject method
DESCRIPTION
Places object on top layer in container - if in a container
returns the object for chaining
Can also just addTo(container) to re-add to top
NOTE for some situations this will break code
so a safer way is obj.parent.setChildIndex(obj, obj.parent.numChildren-1);
which is what this method uses
EXAMPLE
const circle = new Circle(100, red).center();
new Rectangle(200,200,blue).center();
circle.top(); // brings circle to the top of parent container - in this case, the stage
ord
zim DisplayObject method
DESCRIPTION
Moves object layer order in container - if in a container
returns the object for chaining
EXAMPLE
circle.bot().ord(1); // put circle one layer up from bottom of parent container
circle.top().ord(-2); // put circle two layers down from top (third highest layer)
PARAMETERS
num - (default 0) the number of levels (layers) up or down to move the object
1 will move the object one level higher, -1 will move it one level lower
2 will move the object two levels higher, -2 will be two levels lower, etc.
RETURNS obj for chaining
CLOSE ▲PAGE ▤CODE ▤
cur
zim DisplayObject method
DESCRIPTION
Chainable function that sets the object's cursor to the type provided - same as CSS cursors.
NOTE
if using drag(), it will set its own cursor, so use the dragCursor parameter in that case.
NOTE
there are also custom cursors as the cursors property of Frame.
EXAMPLE
const circle = new Circle(10, red).center().cur(); // "pointer"
circle.on("click", ()=>{zog("yes");});
sha
zim DisplayObject method
DESCRIPTION
Chainable function that sets the object's drop shadow to a CreateJS Shadow indirectly or directly
EXAMPLE
// indirectly set the CreateJS Shadow
// with sha(color, offsetX, offsetY, blur)
const circle = new Circle(10, red).center().sha("rgba(0,0,0,.2)", 10, 5, 5);
// directly set the CreateJS Shadow
// with sha(new createjs.Shadow())
const shadow = new createjs.Shadow("rgba(0,0,0,.2)", 10, 5, 5);
const circle1 = new Circle(10, "pink").center().mov(-30).sha(shadow);
const circle2 = new Circle(10, "yellow").center().mov(30).sha(shadow);
PARAMETERS
color||Shadow (default "rgba(0,0,0,.3)") the CSS color for the shadow - "red", dark, etc.
or pass a single parameter that is a CreateJS Shadow object https://www.createjs.com/docs/easeljs/classes/Shadow.html
pass in -1 to remove a shadow - remember to S.update()
offsetX (default .08 the width or 5 if no width) the distance in the x that the shadow is moved over - can be negatitve
offsetY (default .08 the height or 5 if no height) the distance in the y that the shadow is moved over - can be negatitve
blur (default .16 the width or 10 if no width) the distance the shadow is blurred
RETURNS obj for chaining
CLOSE ▲PAGE ▤CODE ▤VIDS
dep
zim DisplayObject method
DESCRIPTION
A chainable method to set the depth property of a Display object for use with ZIM VR().
When the object is added to VR it will be cloned into two channels and shifted left and right based on its depth.
A depth of 0 will not shift the object and this will appear flat on the screen.
A depth of 20 will shift 20 pixels left and right and appear to come out of the screen.
A depth of -20 will appear to go into the screen.
Depending on the VR parallax settings, depth can also affect parallax.
A negative depth does not unless negativeParallax is set to true in the VR parameters.
EXAMPLE
new Circle().center().dep(10);
PARAMETERS
depth - (default 0) the apparent depth in ZIM VR - or set the depth property
RETURNS obj for chaining
CLOSE ▲PAGE ▤CODE ▤VIDS
nam
zim DisplayObject method
DESCRIPTION
A chainable method to set the name property of a DisplayObject.
The object can then be accessed with object("name") (or zim.object("name") if zns is true)
BACKGROUND
CreateJS provides Containers with a name property and a getChildByName() method
but you have to remember to ask the parent container for the child and it is a little lengthy.
In ZIM Cat 01, nam() and object() were introduced as a global way to handle object names.
Usually, a variable name is used to reference objects but the name offers an alternative.
Note: naming an object with the same name will overwrite earlier names accessible through object()
This will NOT remove the name property from the previous object
So it is possible that the previous object can still be accessed with parent.getChildByName()
parent.getChildByName() will find the first child with that name in the container
object() will find the last named object with that name anywhere
We could remove previous name properties with the same name but we decided not to
Let us know your thoughts at https://forum.zimjs.comEXAMPLE
new Circle().nam("ball").center();
// see what names there are:
zog(object.getNames()); // ["ball"] - if only "ball" has been named
if (mobile()) object("ball").sca(2);
else object("ball").dispose();
zog(object.getNames()); // [] - if only "ball" has been named
object("ball").tap(e=>{
zog(e.target.name); // "ball"
});
PARAMETERS
name - a String to set the name property of the object
RETURNS obj for chaining
CLOSE ▲PAGE ▤CODE ▤
--------------INTERACTIONS, EFFECTS AND PHYSICS
EXPAND ▼ obj.movement(call)
movement
zim DisplayObject method
DESCRIPTION
Chainable convenience method that captures mouse movement over an object.
This triggers when a mouseover is active and stagemousemovement dispatches.
It also triggers when a pressmove dispatches - so good for mobile.
A callback function is called on movement.
NOTE
set an object's noMovement property to true to remove these events
SEE: noMovement() as well
EXAMPLE
tap
zim DisplayObject method
DESCRIPTION
Chainable convenience method that adds a mousedown and mouseup event to the object
that requires the mouse to move less than distance parameter
This is more like a proper click - down up without dragging.
This method works on desktop or mobile, etc. but on mobile, the default tap is mousedown
An optional time parameter is provided if a minimum time is desired.
Note that a click event also works on mobile as a "tap"
but click also allows dragging between down and up presses - so really is a mouseup.
This will automatically add a cursor of "pointer"
which can be changed with the cursor property or cur() method
When dbl is set to true call will be called when a double tap occurs
With this setting, tap also handles either a single or double tap by providing call3 or call4.
call3 will call if a single tap happens regardless of whether there is a double tap or not
call4 will call if a single tap happens and there is no double tap
this means it waits for the double tap time to fail and then calls call4
To give a more responsive single tap it reduces the default dblTime value
NOTE
tap() ignores List titleBar and organizer as to not conflict with tapping on actual list
NOTE
set an object's noTap property to true to avoid activating a hold on an object
SEE: noTap() as well
EXAMPLE
new Circle(50, red).center().tap(e=>{
e.target.alpha = .5;
S.update();
});
EXAMPLE
new Button().center().tap(()=>{
zgo("https://zimjs.com", "_blank"); // open ZIM site in new tab
});
EXAMPLE
// wanting to do one thing on single tap and another thing on double tap on same object
// this will set the default dblTime to .5 seconds (rather than 1 second)
new Rectangle().center().tap({
dbl:true,
call:()=>{
// do double tap code
S.update();
},
call4:()=>{
// do single tap code
S.update();
}
});
PARAMETERS supports DUO - parameters or single object with properties below
call - the function to call when clicked
call will receive the event object as a parameter (with target, currentTarget, etc. properties)
distance - (default 5 or 10 if dbl is true) distance in pixels within which the mouseup must occur for a click to be counted
if dbl is true it will lengthen the default distance to give an easier double tap
time - (default 8) time in seconds within which the mouseup must occur for a click to be counted - also see TIME constant
once - (default false) set to true to capture only one click then auto-remove listeners
dbl - (default false) set to true to capture a double click - this works on mobile where dblclick may not
dblTime - (default 1 or .5 if call4) time in seconds from first pressup to pressup a second time to count as a double tap - also see TIME constant
if call4 is provided it will shorten the default dbl tap time to give a more responsive single tap alternative
call2 - (default null) a function to call on pressup if a tap is not made
call3 - (default null) with dbl set to true, a function to call on single tap regardless of a double tap or not
call4 - (default null) with dbl set to true, a function to call on single tap only if double tap fails
cursor - (default pointer) set to a CSS cursor or false if not wanting to set cursor on tap
mobileUp - (default false) set to true to make tap() work on pressup on mobile - by default tap on mobile works on mousedown
RETURNS obj for chaining
CLOSE ▲PAGE ▤CODE ▤
hold
zim DisplayObject method
DESCRIPTION
Chainable convenience method that adds a press and hold event to the object
The callback function will run after the object is held for a certain time without moving the object
This method can be used on mobile to replace shift keys, etc.
This will automatically add a cursor of "pointer" - although mobile will not see it
which can be changed with the cursor property or cur() method
NOTE
set an object's noHold property to true to avoid activating a hold on an object
SEE: noHold() as well
EXAMPLE
// remove circle if held for 1000 ms (one second)
new Circle(50, red).hold(e=>{
e.target.removeFrom();
S.update();
});
PARAMETERS
call - the function to call after hold time
call will receive the event object as a parameter (with target, currentTarget, etc. properties)
distance - (default 5) distance in pixels within which the mouseup must occur for a hold to be counted
time - (default 1.5) time in seconds before hold is activated
once - (default false) set to true to capture only one click then auto-remove listeners
RETURNS obj for chaining
CLOSE ▲PAGE ▤CODE ▤
change
zim DisplayObject method
DESCRIPTION
Chainable convenience method that adds a change event to the object
This only works for components that dispatch a change event ;-)
SEE: noChange() as well
EXAMPLE
new Tabs().change(e=>{
zog(e.target.text); // the text of the selected tab
});
PARAMETERS
call - the function to call when changed
call will receive the event object as a parameter (with target, currentTarget, etc. properties)
once - (default false) set to true to capture only one click then auto-remove listeners
RETURNS obj for chaining
CLOSE ▲PAGE ▤CODE ▤
drag
zim DisplayObject method
DESCRIPTION
Adds drag and drop to an object with a variety of options.
Handles scaled, rotated nested objects.
Also see draggable property for setting a default drag() and noDrag()
and to indicate whether a drag has been set.
DROP
As if ZIM 017, drop parameters and properties have been added.
These allow List items to be dragged and dropped on targets and ZIM Lists
Also see ZIM List drop parameters
See https://zimjs.com/017/dropping.htmlNOTE
drag() will stop ZIM Swipe() from triggering a swipe event.
Set the overridNoSwipe parameter of ZIM Swipe() to true to capture swipe events.
NOTE
also see the draggable property - set to true for basic drag() and false for noDrag()
EXAMPLE
const radius = 50;
const circle = new Circle(radius, red);
circle.center();
circle.drag();
// OR with chaining
new Circle(radius, red).center().drag();
// OR with ZIM DUO
circle.drag({slide:true});
// BOUNDARY
// circle has its registration point in the middle
// keep registration point within rectangle starting at x=100, y=100
// and drag within a width of 500 and height of 400
const boundary = new Boundary(100,100,500,400);
circle.drag(boundary);
// or keep circle on the stage with the following
const boundary = new Boundary(0,0,W,H).contract(radius);
circle.drag(boundary); // drag within stage
// or by passing the stage (or a Container as a boundary)
circle.drag(S); // drag within stage
EXAMPLE
// dragging only horizontal or vertical at a time
const circle = new Circle(50,red).center().drag();
circle.on("mousedown", ()=>{
const start = {x:circle.x, y:circle.y};
circle.on("pressmove",()=>{
timeout(.01, ()=>{ // works without but this gives a little better feel
let horizontal = Math.abs(circle.x-start.x) >= Math.abs(circle.y-start.y);
let boundary = horizontal?new Boundary(0, start.y, W, 0):new Boundary(start.x, 0, 0, H);
circle.dragBoundary(boundary);
});
}, null, true); // once
});
circle.on("pressup", ()=>{circle.dragBoundary()});
EXAMPLE
// Dropping on targets
// see also https://zimjs.com/017/dropping.html
const rectangles = new Tile(new Rectangle(130,130).reg(CENTER),3,1,50,0).pos(0,100,CENTER,CENTER);
new Tile(new Circle(50,series(red,blue,pink)),3,1,70,0).pos(0,-100,CENTER,CENTER).drag({
dropTargets:rectangles.items,
// dropEnd:false,
// dropCopy:true,
// dropBack:false // and more!
});
PARAMETERS supports DUO - parameters or single object with properties below
boundary - (default null) a ZIM Boundary object for the drag boundary
or a ZIM DisplayObject including stage
If the boundary is a display object then ZIM will keep the shape of the dragged object inside the bounds.
If the boundary object is a Blob then the dragged object will stay within the Blob (experimental).
If the boundary object is a Circle then the registration point of the dragged object will stay within the circle
If the object being dragged is a Pic() then make sure it is preloaded or has dimensions before adding a drag boundary
If the drag is on a container and the "all" parameter is false
then ZIM will call drag methods on each child so the bound calculations are easier.
The drags will be applied after a .05 second delay allowing items to be added directly after.
Alternatively, drag() can be placed on the container AFTER the objects are added
and the immediateBoundary parameter set to true. Or drag() can be applied manually on each child.
a boundary with 0 width will drag vertically. A boundary with 0 height will drag horizontally
or see the axis parameter
note: boundary will only work in 90-degree-rotated containers - as such, do slant Window and List, etc.
If surround is true then it will make sure the obj surrounds the boundary rather than stays within it
This boundary is relative to the stage (global).
If a boundary relative to the object's parent is desired then set the localBoundary parameter to true.
Rectangle, Stage, StageGL - will keep object fully inside the bounds (based on bounds of object when adding drag).
axis - (default BOTH) or HORIZONTAL or VERTICAL - set the axis of the drag
also see the boundary parameter where the width can be set to 0 for vertical dragging with a limit of y and the height
or the height can be set to 0 for horizontal dragging with limit of x and the width
overCursor - (default "pointer") the CSS cursor property as a string for rolling over the object
dragCursor - (default "pointer") the CSS cursor property as a string for pressing and dragging the object
all - (default false) set to true to drag a whole container rather than its parts (was called currentTarget)
eg. container.drag(); will drag any object within the container
container.drag({all:true}) will drag the whole container
See: DRAGALL contant - set DRAGALL=true; to change the default drag to drag a whole container
swipe - (default false) which prevents a swipe from triggering when dragging
localBoundary - (default false) which means the rect is global - set to true for a rect in the object parent frame
onTop - (default true) brings the dragged object to the top of the container - unless Keyboard at top.
// to drag on top of keyboard, set the type property of the keyboard to "LowerKeyboard" - or anything other than Keyboard
surround - (default false) is for dragging a big object that always surrounds the boundary
slide - (default false) will let you throw the object and dispatch a slidestop event when done
slideFactor - (default .9) is the factor multiplied by dragging velocity (1 no slowing, .7 fast slowing)
slideSnap - (default true) lets the object go outside and snap back to bounds - also VERTICAL, HORIZONTAL, and false
slideSnapDamp - (default .1) the damping to snap back to boundary
reg - (default false) when set to true will snap the registration of the object to the mouse position
removeTweens - (default true) will automatically remove any tweens that have an x and y set unless set to false
if, for example, animate() has a rotation and an x set, then both will be canceled
but if an animate() call to rotation and another to x is set then only the x would be canceled and rotation would continue
if after dropping, the animation in x should continue, then a new animate() in x will need to be called
this avoids conflict between dragging and animating position which is very confusing for beginner coders
startBounds - (default true) set to false to ignore bound rect before dragging (sometimes handy when putting drag on container)
rect - (depreciated) same as boundary - kept for backwards compatibility when using config object
currentTarget - (default false) same as the all parameter - kept for backwards compatibility when using config object
offStage - (default false) set to true to be able to drag object off stage (thanks Shammi!)
immediateBoundary - (default false) set to true to add bounds immediately when drag() is set on a Container.
this is normally set to false for a .05 second delay to allow objects to be added to Container before setting bounds.
singleTouch - (default false) set to true to let only one touch operate the drag
also see Frame() singleTouch setting - but setting on drag will only affect that object's drag
dropTargets - an object or an array of objects that can receive a drop
this can be a List or a Container or a single object
if it is a list see the dropListProps as well to set reticle properties and scroll speed
dropCopy - (default false) make a copy of the object as it is being dragged
dropSnap - (default true) snap to the target object
dropBack - (default true) go back to start if not dropped on a target
dropEnd - (default true) once dropped on a target a noMouse() is set on the object
dropFull - (default true) do not drop on a full target
note - if the object is removed from the target then a drop can occur again on that target
dropHitTest - (default "bounds") can also be "reg", "circles", "circle", "rect" - see ZIM HitTests
dropScale - set a scale for the dropped object
dropWidth - set a width for the dropped object - overrides scale
height will keep aspect ratio unless dropHeight is provided
dropHeight - set a height for the dropped object - overrides scale
width will keep aspect ratio unless dropWidth is provided
note: will not update stage if OPTIMIZE is set to true
unless Ticker.update is set to true or you run Ticker.always(stage) see zim.Ticker
PROPERTIES
adds a dragPaused property to get or set the pause of the drag - which allows setting to be kept
see also noDrag() where settings will be removed
*** if dropTargets is set then drag() adds the following properties to the dragged object:
dropTarget - on pressup, what target the object is dropped on (or null)
dropList - which List if any a dropped object has
dropListProps - to be used if planning on dropping object into a List
The dropListProps have the following default values
{
color:white,
thickness:1,
alpha:1,
speed:5
}
These can be changed to set List reticle properties and drop speed
See the ZIM List drop parameters for more information
EVENTS
Adds a "slidestart" event to the drag object that is dispatched when the object starts sliding - if slide is true
Adds a "slidestop" event to the drag object that is dispatched when the object comes to rest after sliding - if slide is true
RETURNS obj for chaining
CLOSE ▲PAGE ▤CODE ▤BITS VIDS
noDrag
zim DisplayObject method
DESCRIPTION
Removes drag function from an object.
This is not a stopDrag function (as in the drop of a drag and drop).
Dropping happens automatically with the drag() function.
The noDrag function turns off the drag function so it is no longer draggable.
EXAMPLE
circle.noDrag();
PARAMETERS
recursive (default true) - turns off drags on children
snapBack (default true) - if outside of bounds will animate back to inside bounds
RETURNS obj for chaining
CLOSE ▲PAGE ▤CODE ▤VIDS
dragBoundary
zim DisplayObject method
DESCRIPTION
Dynamically changes or adds a boundary rectangle to the object being dragged with drag().
NOTE
replaces old ZIM dragRect() method
EXAMPLE
const circle = new Circle().center().drag();
// add (or change) a boundary 5 seconds later
timeout(5, ()=>{
const boundary = new Boundary(100,100,500,400);
circle.dragBoundary(boundary);
});
PARAMETERS
boundary - is a ZIM Boundary object for the bounds - the local / global does not change from the original drag
pass in null to remove the boundary - the boundary while dragging and be removed for next mousedown
to solve this issue while dragging, set a boundary of the stage size or larger...
RETURNS obj for chaining
CLOSE ▲PAGE ▤CODE ▤
mouse
zim DisplayObject method
DESCRIPTION
Sets object's mouseChildren and mouseEnabled properties to true
These are the defaults - used primarily to reverse ZIM noMouse()
which can be used to turn off mouseChildren and mouseEnabled
NOTE
just using mouse() does not add cursors or interactivity
see cur(), hov(), drag(), transform(), gesture(), or various mouse events
EXAMPLE
const circle = new Circle().drag();
timeout(1, ()=>{
circle.noMouse(); // circle cannot not be dragged, etc.
timeout(1, ()=>{
circle.mouse(); // circle can be dragged
});
});
noMouse
zim DisplayObject method
DESCRIPTION
Sets object's mouseChildren and mouseEnabled properties to false
This can be used to save processing on complex objects that do not need interactivity
NOTE
this will prevent interactivity for cur(), hov(), drag(), transform(), gesture()
and any mouse events like mousedown, click, mouseover, etc.
EXAMPLE
const circle = new Circle().drag();
timeout(1, ()=>{
circle.noMouse(); // circle cannot not be dragged, etc.
timeout(1, ()=>{
circle.mouse(); // circle can be dragged
});
});
wire
zim DisplayObject method
DESCRIPTION
The wire() method connects an object (source) property to another object (target) property.
This can be one way (default) or two way with the twoWay parameter set to true.
For instance:
new Slider().center().wire(circle, "scale"); // note the property as string
will change the scale of the circle as the slider's current value changes.
The value (if the object has one) is the default input followed by index.
If the source object has neither value nor index
then the input is the same property as the target property.
For instance:
new Circle().center().wire(circle2, "x", true);
would mean changing either circle's x property would change the other.
Multiple wire() methods can be chained.
For instance:
slider.wire(circle, "x").wire(circle, "y");
slider.wire(circle, "scale").wire(circle2, "scale");
BACKGROUND
The wire system is an alternative to events at 25% the size of traditional JS addEventListener.
It is a single extra conditional in the Ticker that checks to see if a Dictionary list has length.
If it does it cycles through the list to see if input properties have changed
and if so, sets the target property. Updates are batched to a single stage update
This is the same stage update that is used by any Ticker functions including those by drag, animate, etc.
Basically, wire is same system as events but with a more specific format - adds 1.4 k to ZIM file size.
WIRED
There is also a wired() method that can be be put on the target object
and points to a source object to set a specified property.
This just flips the target and the source and calls the wire() function.
The methods MUST go on the second object made - so using either wire() or wired() covers use cases.
There are also noWire() and noWired() methods to remove connections - with various alternatives.
FILTER AND CALLBACK
wire is also similar to ZIM Bind and bind() but binds within ZIM where bind binds outside of ZIM.
Like Bind, wire uses an optional filter and callback function.
For instance:
new Dial().center().wire(tone, "volume", null, filter, call);
will call the filter function before setting the target property (tone.volume).
The filter function will receive the data (the input value) as its parameter
and MUST return data to be passed along but the data can be changed or tested.
The call function will be called after the target property is set.
See: https://zimjs.com/cat/wire.html
See: https://zimjs.com/cat/synth.htmlEXAMPLE
const circle = new Circle(100, pink, dark).center();
new Dial({step:0, min:1, max:3})
.center()
.wire(circle, "scale");
// S.update(); // depending, let the wire() set the stage update
EXAMPLE
// this time the circle (target) starts at a scale of 2
const circle = new Circle(100, pink, dark).sca(2).center();
// so we want the dial (source) to start at 2 as well
// we could use the Dial parameter value:circle.scale
// or we can use the wire setSource to true
new Dial({step:0, min:1, max:3})
.center()
.wire(circle, "scale", null, true); // true for setSource to the target value
// S.update(); // depending, let the wire() set the stage update
EXAMPLE
const rect = new Rectangle(100, 100, blue, dark)
.pos(0,70,CENTER)
.drag(S);
new Slider({min:0, max:W-100, value:rect.x})
.pos(0,100,CENTER,BOTTOM)
.wire(rect, "x", true, null, data=>{
if (data < 100 || data > W-100-100) rect.color = red;
return data; // filter must return data - even if not changing it
}, data=>{
if (data >= 100 && data <= W-100-100) rect.color = blue;
});
// timeout(5, ()=>{
// slider.noWire(); // remove slider rect wire
// });
EXAMPLE
const person = {num:1, hair:red, eyes:blue}
const shirt = {num:1, color:dark, pocket:dark}
wire(person, shirt, "num"); // will wire person num to shirt num
wired({ // or could use wire() - just showing wired()
source:person, // will wire person hair property to shirt color property
input:"hair",
target:shirt,
prop:"color"
});
person.num = 3;
person.hair = blue;
// note: could use addWires(person) to add wire and wired methods to person if desired
timeout(.01, ()=>{ // must wait for Ticker to go
zog(shirt.num); // 3
zog(shirt.color); // blue
});
EXAMPLE
// wire a bunch of on/off components together
STYLE = {
color:blue.darken(.3),
backgroundColor:blue.lighten(.3),
borderColor:blue.darken(.3),
always:true, // for RadioButtons
Toggle:{
backgroundColor:blue.darken(.3),
toggleBackgroundColor:blue.lighten(.3)
}
}
const radio = new RadioButtons(50,["OFF","ON"]).center();
const check = new CheckBox(50,"ON").center().mov(300);
const toggle = new Toggle(100,50,"ON").center().mov(-300)
Style.add({
backgroundColor:blue.toAlpha(.3),
Label:{size:40, backgroundColor:F.color}
});
const selector = new Selector(new Tile({
obj:[new Label("OFF").centerReg(), new Label("ON").centerReg()],
cols:2,
spacingH:30,
spacingV:20,
unique:true
})).center().mov(0,200);
radio
.wire(check, "checked", true, null, convert)
.wire(toggle, "toggled", true, null, convert)
.wire(selector, "index", true);
// convert true/false to 0/1 and visa versa
function convert(data) {
if (data===true) data = 1;
else if (data===false) data = 0;
else if (data===1) data = true;
else if (data===0) data = false;
return data;
}
PARAMETERS supports DUO - parameters or single object with properties below
** the current object is called the source - it will be setting the prop on the target
target - the object that has the property to wire to (and change)
prop (default input)- a String name of the property to change on the target
if no property is provided it assumes the input property if provided
the only time no prop would be useful is to wire together components
like a Slider to a Dial where both will default to index
twoWay (default false) - also have the change in prop on target change the source object's property
setSource (default false) - initially, by default, wire will change the target value to the source value
setting setSource to true will initially set the source value to the target value
this is independent of twoWay - so the twoWay setting does not matter
filter (default null) - a function to call before the prop is changed on the target (or source object if twoWay is true)
this function receives a data parameter that holds the value of the property that will be changed on the target
the prop value can be tested or changed
the filter function MUST return the value whether it is modified or not
call (default null) - a function that is called once the property has been set on the target - receives the value as a parameter
input (default DEFAULTWIRE or "value" or "index" or prop) - an optional source property as a String
wire will usually be used to wire a component to a DisplayObject
and components usually have a value or index property that is changing in a change event, for instance
so wire by default uses these if available and a change event is no longer needed
Set ZIM DEFAULTWIRE constant to a String of the desired input if different than above.
If the source object does not have a value or index property
then the same property name as the target prop is used (unless an input is provided here)
RETURNS obj for chaining
CLOSE ▲PAGE ▤CODE ▤VIDS
noWire
zim DisplayObject method
DESCRIPTION
turns off a wire() on the object - can optionally filter by target, prop and or input
EXAMPLE
if (circle.hitTestBounds(rect)) {
slider.noWire();
// or slider.noWire(circle); // if slider has more than one wire
});
EXAMPLE
timeout(10, ()=>{
noWire(); // turn off all wires
// noWire(null, null, "scale"); // turn off all wires adjusting scale
// noWire({target:mySprite}); // turn off all wires on mySprite
});
wired
zim DisplayObject method
DESCRIPTION
Wires an object's property based on a source - see docs for ZIM wire() for details.
A wiring can be added only if the source object and the target object exist.
For instance we CANNOT do (even if we declare circle first):
new Slider().center().wire(circle, "scale");
var circle = new Circle().center();
OPTION 1:
var circle = new Circle().center();
new Slider().center().wire(circle, "scale");
OPTION 2:
var slider = new Slider().center();
new Circle().center().wired(slider, "scale"); // use wired()
wired() just switches the source and target and calls wired()
See the wire() method for parameters and description
EXAMPLE
const slider = new Slider().center();
new Circle().center().wired(slider, "scale");
bind
zim DisplayObject method
DESCRIPTION
Binds the specified object properties to a Bind object's connection.
This could be a connection to localStorage or a server script to a database.
This will allow a cleaner way to save and retrieve data.
See the docs for the ZIM Bind class for more details and examples
See: https://zimjs.com/ten/bind.htmlEXAMPLE
// LOCALSTORAGE example
const b = new Bind(); // create a Bind object - defaults to localStorage
// b.clear(); // clear localStorage memory
// bind() will get data remembered in localStorage
// and also set up the binding
const c = new Circle().center().bind("circle", ["x","y"]).drag();
// when we want to update the binding call the to() method
c.on("pressup", function () {b.to();});
PARAMETERS
** supports DUO - parameters or single object with properties below
id - a one-word string ID for the bind
this will be used as the JSON key for the data
props - a property to bind as a string or an array of properties, eg. ["x","y"]
or an object literal in the form {prop1:TO, prop2:FROM, prop3:BOTH, prop4:TO, etc.}
by default the property will be bound as BOTH - as in TO and FROM
this means data would be received on bind.to() calls and sent on bind.from() calls
extra (default null) extra information to be sent to the server (not localStorage)
this could be an id or a search term, etc. it will have encodeURI() applied
this can be received in php as $_GET["extra"] or $_POST["extra"] depending on bindType
filter (default null) a function to run before sending and after receiving data
this will receive (data, command, extra) parameters
the function must return the data - see Bind masterFilter parameter for more information
note: the masterFilter if supplied will run as well before the filter
bindObj (default zimDefaultBind) - set to a specific bind object or keep as default
see also ZIM Bind() setDefault parameter and default property
RETURNS obj for chaining
CLOSE ▲PAGE ▤CODE ▤VIDS
noBind
zim DisplayObject method
DESCRIPTION
Removes a binding from an object and its bound data
See: bind() and ZIM Bind();
EXAMPLE
const b = new Bind(); // create a Bind object - defaults to localStorage
const c = new Circle().center().bind("circle", ["x","y"]).drag();
c.on("pressup", ()=>{b.to();});
new Button({label:"REMOVE"}).loc(100,100).tap(()=>{
// binding will be removed
// next refresh, circle will be centered
// but then will be bound again until button is pressed
c.noBind();
});
PARAMETERS
** supports DUO - parameters or single object with properties below
props - (default null) a property or an array of properties for which to remove the bind
leaveing this blank will remove all bindings on the object
removeConnectionData (default true) remove connection data
this will clear removed data from localStorage for LOCALSTORAGE setting
a "remove" property will be sent to the server for GET or POST
with a JSON {id1:["prop1","prop2"], id2:["prop3"]} format of removed items
call is a callback function after the data is sent and received
the callback function will receive a result "success" or "error ..." in its parameter
bindObj - (default zimDefaultBind) a specific bind object to remove from
RETURNS obj for chaining
CLOSE ▲PAGE ▤CODE ▤
transform
zim DisplayObject method
DESCRIPTION
The transform method adds transform controls to a display object.
The controls allow the user to move, scale, stretch, rotate and change the registration point.
Parameters are available to choose which of these transformations are available.
By default, all the transformations are available to use but
only the scale and registration point controls are showing.
The others work as the user rolls over the edges or the outer corners.
You can optionally set these to be visible as boxes on the sides and circles on the outer corners.
NOTE
works with the ZIM TransformManager() class to handle multiple transforms and saving data for persistence.
NOTE
the transformed object will have its mouseChildren set to false.
CLICK turns off and on the controls if allowToggle parameter is set to true (default is true)
If you use the TransformManager for multiple objects, the allowToggle is automatically set to true
SHIFT rotate snaps to 45
Dropping the registration point will snap to corners or center if close enough - unless CTRL is down
CTRL scale will scale about the registration point
CTRL DBLCLICK will reset scale to 1 and rotation to 0
EXAMPLE
rect.transform(); // shows handles for tranformations
EXAMPLE
rect.transform({ // scale and stretch only
move:false,
rotate:false
});
// hide the rectangle's bottom stretch control so only can stretch from top
// note - transform() expects there to be a control so do not remove a control
// also, the controls have a hitArea so setting alpha to 0 will not work
rect.transformControls.stretchYControls.getChildAt(1).sca(0);
// or set its visible to false
rect.transformControls.stretchYControls.getChildAt(1).visible = false;
// Record the transforms and remake transforms when page reloads
// Or see the TransformManager
if (localStorage && localStorage.data) rect.transformControls.setData(localStorage.data, true);
rect.on("transformed", function() {
if (localStorage) localStorage.data = rect.transformControls.recordData(true);
});
// change the color of the controls
var r = new Rectangle(100,100,grey).center().transform({borderColor:blue})
r.transformControls.scaleControls.loop(function (control) {
control.color = blue;
control.updateCache();
});
PARAMETERS supports DUO - parameters or single object with properties below
move - (default true) let user move object
stretchX - (default true) let user stretch object from left and right sides
stretchY - (default true) let user stretch object from top and bottom
scale - (default true) let user scale object from corners - might still be able to stretch from sides - see stretchX and stretchY
rotate - (default true) let user rotate object
allowToggle - (default true) let user hide and show controls with click - set to false not to let user hide controls
visible - (default true) show the controls to start
onTop - (default true) set to false to not move the selected shape to the top of its container
showStretch - (default false - true on mobile) show side boxes for stretching - a cursor will always show if stretchX or stretchY is true
showRotate - (default false - true on mobile) show circles at corners for rotation - a cursor will always show if rotation is true
showScale - (default true) show corner boxes for scaling - a cursor will always show if scale is set to true
showReg - (default true) show round circle for draggable registration point - rotates around registration point
showBorder - (default true) show rectangle border
borderColor - (default brown) any border color (CSS)
borderWidth - (default 1) the width of the border
dashed - (default false) set to true for dashed border
customCursors - (default true - false on mobile) set to false for system cursors (system cursors will not be rotated)
handleSize - (default 20 mobile - 10 desktop) the size of the control squares and circles
regSize - (default 16) the size of the registration point circle
snapDistance - (default 10) registration point will snap to corners and center if within this distance (and CTRL key not down)
snapRotation - (default 5) rotation will snap to angles divisible by this value
holding CTRL will avoid snapping
holding SHIFT will rotate only multiples of 45 degrees
cache (default true) - set to false to not cache the controls and cursors
events (default false) - set to true to receive events while controls are being opertated
otherwise events will only trigger on pressup (not pressmove) - this conserves processing
events are turned on automatically for obj type Tag, TextArea and Loader
ghostColor (default null) - color of outline when transform tools are not showing
ghostWidth (default null) - width of outline when transform tools are not showing
ghostDashed (default true) - dashed of outline if ghostColor or ghostWidth is set
ghostHidden (default false) - set to true to start with ghostHidden
frame (default zimDefaultFrame) - set to proper frame if on different frame
container (default stage) - set to a container to keep transforms within that container
normally leave as default so transforms will stay above other objects
but on occasion such as when using with ZIM TextureActives, a container is required
as the container is cached and used on a texture
minScaleX (default null) - set a min scale in the x for the transform
maxScaleX (default null) - set a max scale in the x for the transform
minScaleY (default null) - set a min scale in the y for the transform
maxScaleY (default null) - set a max scale in the y for the transform
sliceX (default true) - this is for transforming ScaledBitmap objects in x - to use slicesWidth on edges. Set to false to use width.
sliceY (default true) - this is for transforming ScaledBitmap objects in y - to use slicesWidth on edges. Set to false to use width.
PROPERTIES
toggled - adds a read-only Boolean to the object that is true if controls are showing otherwise false
METHODS
toggle(state - default null) - added to the object
shows controls if hidden and hides controls if showing (returns the object for chaining)
or pass in true to show controls or false to hide controls
TRANSFORM CONTROL OBJECT
When tranform() is set on an object, the object receives a transformControls property
This holds the following:
PROPERTIES:
visible - read only whether the controls are visible
ghost - read only as to whether the ghost outline is showing - set with showGhost and hideGhost
ghostEnabled - read only as to whether the ghost outline will be turned on and off - set with addGhost and removeGhost
controls - reference to the Container that holds all the controls
scaleControls - reference to the Container that holds the corner boxes for scaling
stretchXControls - reference to the Container that holds the left and right boxes for stretching
stretchYControls - reference to the Container that holds the top and bottom boxes for stretching
rotateControls - reference to the Container that holds the outer circles for rotating
METHODS:
hide() - hides the controls - returns object for chaining
show() - shows the controls - returns object for chaining
recordData(toJSON) - returns an object with type, x, y, scaleX, scaleY, rotation, skewX, skewY, visible PROPERTIES
if toJSON (default false) is set to true, the return value is a JSON string
setData(data, fromJSON) - sets the properties to match the data object passed in - this should come from recordData()
if fromJSON (default false) is set to true, it will assume a JSON string is passed in as data
returns object for chaining
remove(noHide) - removes the controls - set noHide true if already hidden
add(noShow) - adds the controls back if then have been removed - set noShow true if not wanting to show
allowToggleOn() - sets the show / hide controls on with click
allowToggleOff() - removes the show / hide controls on with click
showGhost() - show the ghost outline - the ghostWidth or ghostColor must be set in initial parameters
hideGhost() - hide the ghost outline
toggleGhost(state) - if ghost is showing will hide ghost and if ghost is hidden will show ghost
or set state to true to show ghost or false to not show ghost
addGhost() - enable ghost outline functionality - the ghostWidth or ghostColor must be set in initial parameters
removeGhost() - disable ghost outline functionality
disable() - may show the controls if visible but cannot use them
enable() - turns the using of the controls back on
resize(dispatch) - call resize if the object is transformed in ways other than with the controls
set dispatch to true to dispatch a "transformed" event - if manually adjusted this will save to TransformManager
dispose() - remove all aspects of transform on object
EVENTS
Adds a "transformed" event to obj that is dispatched when pressup on any of the controls or on click
if the events parameter (or events property on transformControls) is set to true then these happen on pressmove of controls
the transformed event object has a transformType property
the transformType property has values of "select" (if not moved), "size", "move", "rotate", "stretch", "reg" "reset"
the transformed event object also has a pressup property that is true if on pressup and false if from pressmove
events are turned on automatically for obj type Tag, TextArea and Loader
Adds "transformshow" and "transformhide" events for when click to hide or show controls
If TransformManager() is used there are more events available such as "persistset", etc.
RETURNS obj for chaining
CLOSE ▲PAGE ▤CODE ▤VIDS
gesture
zim DisplayObject method
DESCRIPTION
Sets multi-touch pan, pinch and rotate for position, scale and rotation
Handles scaled and rotated containers
Scale and rotation occur from the pinch point (with optional regControl for about the registration point)
Note - gesture() only works on the currentTarget - not a container's children (like drag() can)
ZIM Frame should have touch set to true (which is the default for mobile)
ALSO
see the noGesture() method to remove some or all gestures
ALSO
see the gestureBoundary() method to set or reset the boundary rectangle dynamically
EXAMPLE
rect.gesture(); // move, scale and rotate with no bounds
PARAMETERS supports DUO - parameters or single object with properties below
move - (default true) move the object with average of fingers
scale - (default true) scale the object with first two fingers' pinch
rotate - (default true) rotate the object with first two fingers' rotation
boundary - (default null) ZIM Boundary rectangle with (x,y,w,h) to contain bounds of the object
if surround is true then it will make sure the obj surrounds the boundary rather than stays within it
See circularBounds parameter to keep circular shapes with boundary
minScale - (default null) a minimum scale
maxScale - (default null) a maximum scale
snapRotate - (default 1) degrees to snap rotation to after rotation is finished
localBoundary - (default false) set to true to make rect for bounds local rather than global
slideFactor - (default 5) how much slide with 0 being no slide and then longer slide times and distance like 10, etc.
regControl (default false) set to true to rotate and scale around registration point rather than pinch point
onTop - (default true) brings the object to the top of the container
surround - (default false) is for dragging a big object that always surrounds the rect
must specify a rect and currently not supported unless rotate is false
circularBounds - (default false) set to true if object is circular with center registration
set to true to use radius to calculate rotated object in boundary if boundary is set
rect - (depreciated) same as boundary - kept for backwards compatibility
EVENTS
Adds move, scale and rotate events to obj (when associated gesture parameters are set to true)
If slide is true, obj dispatches a "slidestop" event when sliding stops
RETURNS obj for chaining
CLOSE ▲PAGE ▤CODE ▤VIDS
noGesture
zim DisplayObject method
DESCRIPTION
Removes multi-touch pan, pinch and rotation gestures from an object.
If all three are removed then deletes the zimTouch object and touch events from obj
EXAMPLE
rect.noGesture(); // removes all gestures
// or
rect.noGesture(true, true, false); // would leave rotation
// or with ZIM DUO
rect.noGesture({rotation:false}); // would leave rotation
PARAMETERS supports DUO - parameters or single object with properties below
move - (default true) - set to false not to remove move gesture
scale - (default true) - set to false not to remove scale gesture
rotate - (default true) - set to false not to remove rotate gesture
RETURNS obj for chaining
CLOSE ▲PAGE ▤CODE ▤VIDS
gestureBoundary
zim DisplayObject method
DESCRIPTION
Dynamically changes or adds a boundary rectangle to the object being dragged with gesture().
EXAMPLE
const boundary = new Boundary(100,100,500,400); // x,y,w,h
new Circle().center().gestureBoundary(boundary);
PARAMETERS
boundary - is a ZIM Boundary rectangle - the local / global does not change from the original gesture setting
update - (default true) reset base drag boundary
RETURNS obj for chaining
CLOSE ▲PAGE ▤CODE ▤
effect
zim DisplayObject method
DESCRIPTION
Adds an effect to a DisplayObject such as:
blur, glow, shadow, color and alpha mask effects.
Also see hue, saturation, brightness and contrast convenience effects
that are available as properties directly on the DisplayObject.
SEE: https://zimjs.com/cat/effects.html
BATCHING
Effects are processor heavy. Too many can slow down the application.
ZIM uses effect() to allow multiple effects to be added at once.
These are then internally batched and updated with a single update
rather than making each effect a stand-alone method requiring individual updates.
EFFECTS PROPERTY
The effects added with effect() are stored on the object's effects property.
The effects themselves have properties that can be changed to change the effect.
If an effect is changed the updateEffects() method needs to be called.
ZIM does not do this automatically, allowing the changes to be batched with one call.
See updateEffects() - also see noEffect() to remove effects.
The effect properties and convenience effects can be animated and wiggled.
In this case, the effects will be automatically updated by ZIM.
CREATEJS FILTERS
ZIM Effects wrap the CreateJS filters array and cache/updateCache system.
Using effect() will overwrite manual usage of CreateJS filters array.
The ZIM Effects system remembers effects in the effects property
and overwrites the filters array each time an effect is added or updated.
To update an effect, all the effects need to be re-applied regardless
and all this is automatically handled by ZIM.
EFFECT OBJECTS
The following Effect objects can be passed into effect()
These all have parameters that accept ZIM DUO, VEE and OCT.
See the Doc entries under Controls > Effects.
new BlurEffect() - apply blur
new GlowEffect() - apply glow and knock out - thanks kudox.jp
new ShadowEffect() - apply drop shadows and knock out - thanks kudox.jp
new ColorEffect() - change colors
new MultiEffect() - combination of hue, saturation, brightness, and contrast
new AlphaEffect() - apply alpha mask
EFFECT IDS
The effects are referred to by id and have ids as follows (case insensitve):
blur, glow, shadow, color, multi, alpha
The id is the property name used to identify the effect
in the object's effects property (plural s):
obj.effects.glow.strength = 20; // using the glow id
obj.updateEffects(); // this must be called to see the change
Effect ids are used when animating (and wiggling):
props:{"effects.blur.blurX":200} // no update is needed
To remove effects use noEffect (singular) and use the id as follows:
obj.noEffect(); // remove all effects (except convenience effects - see below)
obj.noEffect("glow"); // remove the glow effect
obj.noEffect(["glow", "color"]); // remove glow and color effects
CONVENIENCE EFFECTS
hue, saturation, brightness, contrast can be used directly on the object
obj.hue = 100; // no need to updateEffects()
// or
obj.hueBatch = 100; // will set the effect
obj.updateEffects(); // but updateEffects must be called to see the change
Convenience effects can also be accessed through the multi id:
obj.effects.multi.hue = 100;
Any of the four properties can be removed by setting them to 0
obj.hue = 0;
Convenience effects can also ALL be removed together with:
obj.noEffect("multi");
The following will NOT remove the convenience effects:
obj.noEffect(); // will not remove hue, saturation, brightness and contrast
NOTE
Effects are quite processor intensive so use sparingly.
Each effect processes every pixel - when animating this results in hundreds of thousands of loops.
ZIM has wrapped the CreateJS filters, filter property, caching and cacheUpdate system
to make accessing filters easy - but apps will slow down if they are over-used.
Keep the quality at 1 for animating filters at a decent framerate.
Consider pre-processing images if effects do not have to be dynamic.
NOTE
when applying effects to rtl fonts make sure the DIR = "rtl" is set.
EXAMPLE
// create a Label with a GlowEffect that shows through to the image below
new Pic("background.jpg").center();
new Label("WOW", 200, "impact")
.center()
.effect(new GlowEffect({
color:red,
blurX:50,
blurY:50,
strength:2,
quality:2,
knockout:true
}));
EXAMPLE
// add a glow and shadow effect
// remove only the glow when pressed
const circle = new Circle(100,blue)
.center()
.effect([ // apply two effects in an array
new GlowEffect({color:purple, blurX:100, inner:true}),
new ShadowEffect(20) // 20 is distance
]);
circle.on("mousedown", ()=>{
// specify type of effect to remove - otherwise removes all
circle.noEffect("glow");
S.update();
});
EXAMPLE
// add a 200 blurX effect and animate it to 0 rewind and looping
STYLE = {blurX:200} // just showing using style...
new Pic("image.png") // preloaded asset
.center()
.effect(new BlurEffect())
.animate({
// the blur effect is stored on the effects property of the object
// and available through the effect id (blur)
// we are animating the blurX of that
// note the quotes around the DOT property format
props:{"effects.blur.blurX":0},
time:.7,
rewind:true,
rewindWait:.5,
loop:true
});
EXAMPLE
// wiggle the saturation of an image asset stored in pic
// so its saturation goes from 50-100 negative or positive in 1-3 seconds
// here we use a convenience effect (hue, saturation, brightness, contrast)
pic.wiggle("saturation", 0, 50, 100, 1, 3);
// This is the same as the following (so may as well use above)
pic.effect(new MultiEffect()).wiggle("effects.multi.saturation", 0, 50, 100, 1, 3);
PARAMETERS
effect - (default null) a ZIM Effect object as detailed above
or an array of ZIM Effect objects.
Effects of a specific type are not compounded.
For example, adding two blur effects will just use the last blur effect added.
x - (default null) the x position of the cache bounds - will cache object bounds by default
y - (default null) the y position of the cache bounds - will cache object bounds by default
width - (default null) the width of the cache bounds - will cache object bounds by default
height - (default null) the height of the cache bounds - will cache object bounds by default
RETURNS obj for chaining
CLOSE ▲PAGE ▤CODE ▤VIDS
updateEffects
zim DisplayObject method
DESCRIPTION
Updates an effect when its property or the object's internals are changed.
For example a Sprite changes frame. Not needed for position, alpha, scale or rotation.
This basically updates the cache on the object so the effects are applied.
Note: setting hue, saturation, brightness and contrast directly on the object will update automatically.
These can be batched by using hueBatch, saturationBatch, etc. which will change but not update
until an obj.updateEffects() is called.
EXAMPLE
// make an object more blurry in x each time it is pressed
const rect = new Rectangle(200,200,red)
.center()
.effect(new BlurEffect(10, 0)); // set to 0 in y otherwise it would take default blurY
rect.on("mousedown", ()=>{
rect.effects.blur.blurX += 20;
rect.updateEffects();
S.update();
});
PARAMETERS
redoCache - (default false) set to true to remake the cache the size of the bounds of the object
if some other size is desired, use obj.cache(width, height) or obj.cache(x,y,width,height) instead of updateEffects()
RETURNS obj for chaining
CLOSE ▲PAGE ▤CODE ▤VIDS
noEffect
zim DisplayObject method
DESCRIPTION
Removes the effects or specified effects from an object.
EXAMPLE
// add a glow and shadow effect
// remove only the glow when pressed
const circle = new Circle(100,blue)
.center()
.effect([ // apply two effects in an array
new GlowEffect({color:purple, blurX:100, inner:true}),
new ShadowEffect(20) // 20 is distance
]);
circle.on("mousedown", ()=>{
// specify type of effect to remove - otherwise removes all
circle.noEffect("glow");
S.update();
});
PARAMETERS
effects - (default null) will remove all effects applied with effect() unless
an effect string or array of effect strings is provided
Effect strings are (case insensitive):
"blur", "glow", "shadow", "multi", "alpha"
alternately, "Effect" can be added such as "BlurEffect"
To remove hue, saturation, brightness and contrast set the object property to 0
for instance obj.hue = 0;
Or to remove all four then can explicitly use obj.noEffect("multi")
cache - (default false) will uncache object if all effects are gone
set to true to leave object cached
RETURNS obj for chaining
CLOSE ▲PAGE ▤CODE ▤VIDS
addPhysics
zim DisplayObject method
DESCRIPTION
Add Physics to a DisplayObject. DisplayObject should have its registration point centered reg(CENTER) or centerReg()
and be on the stage (or in non-transformed Container at 0,0 on stage)
The Physics world can be set up with the ZIM Physics() class in the Controls module.
Box2D and ZIM physics JavaScript helper module need to be imported.
If no physics world has been created, the addPhysics() method will create a default world.
The default world will have a borders around the stage and gravity of 10.
See: https://zimjs.com/physics/NOTE
Adding physics also adds more methods and properties to the DisplayObject
See the Physics() docs for all the details
EXAMPLE
new Circle().center().addPhysics(); // circle will fall with gravity to the floor
EXAMPLE
// usually, we add a Physics object so we can set gravity, drag, etc.
const physics = new Physics().drag(); // turn drag on
// center registration for rectangular objects
const rect1 = new Rectangle(200,100,purple).reg(CENTER).pos(50,50).addPhysics();
const rect2 = new Rectangle(100,200,blue).reg(CENTER).pos(50,50,RIGHT).addPhysics();
// physics.debug(); // uncomment to see debug mode
EXAMPLE
// create a world with no gravity (viewed from top like air-hockey)
const physics = new Physics(0);
// create physics objects using the addPhysics() method
const circle = new Circle(50,blue,grey).center().addPhysics({bounciness:1.1});
// make sure to reg(CENTER) or centerReg() any rectangular objects
const rect = new Rectangle(30,400).reg(CENTER).pos(70,0,LEFT,CENTER).addPhysics(false); // static - do not move
const tri = new Triangle(150,150,150,green,grey).pos(200,0,LEFT,CENTER).addPhysics({linear:10}); // does not slide easily
// turn on dragging
physics.drag(); // note: to add a boundary use the borders parameter of Physics()
EXAMPLE
const physics = new Physics().drag();
// fish shape
// make sure points are clockwise in order - if counterClockwise then use myBlob.reversePoints()
const points = [
[0.5,-29.2,0,0,-79.1,25.5,79.1,-25.5,"mirror"],[182.3,15.9,0,0,-33.9,-59.6,-31.1,55.6,"free"],
[15.4,86.2,0,0,67,10.4,-67,-10.4,"mirror"],[-163.6,73.2,0,0,67.9,-49.9,10.7,-51.8,"free"],
[-165.7,-43.9,0,0,11.9,40.8,70.1,43.6,"free"]
];
const blob = new Blob({
points:points,
interactive:false
})
.addPoints(3) // note we add more points for better physics shape
.center()
.addPhysics(); // As of ZIM 017, Blob shapes can be either or both convex and concave
// zog(physics.validate(blob))
new Circle(50,red).loc(200,200).addPhysics();
PARAMETERS
dynamic - (default true) - set to false to not move the physics body (static)
contract - (default 0) - make the physics body smaller (or bigger with negative) than bounds
shape - (default object shape) - "rectangle" for any object other than Circle, Dial and Triangle
but can specify a "circle" for a Sprite or Bitmap, for instance - to try and match shape
custom polygon bodies can also be made with manual Box2D and then use physics.addMap()
but the only shapes available automatically are "rectangle", "circle", "triangle"
Note - addPhysics() can be placed on a ZIM Blob as well - see Physics.validate() for more details
such as the Blob must have clockwise points - if counterClockwise then use myBlob.reversePoints()
friction - (default .8) - how sticky will the body act - set to 0 to slide.
linear - (default .5) - linear damping which slows the movement - set to 0 for no damping
angular - (default .5) - angular damping which slows the rotation - set to 0 for no damping
density - (default 1) - the density that can affect what happens with collisions
bounciness - (default 0) - how bouncy the object is - 0 is not bouncy 4 is crazy bouncy (was restitution)
maskBits - (default null) - used with categoryBits to determine which bodies will collide with which other bodies
as soon as maskBits is specified, the body will collide only with the categoryBits provided to the maskBits parameter
1 will collide with bodies that do not have categoryBits specified including the borders
to test collision with bodies that have categoryBits specified, use the pipe (|) as follows:
1|2 will also collide with bodies having categoryBits of 2 specified
so if another body has categoryBits of 4 then the bodies would not collide.
1|2|4 would also collide with 4 but not bodies with categoryBits of 8, etc.
2|4 would pass through any bodies without categoryBits of 2 or 4 including the borders
categoryBits - (default 1) - a collision category - by default, bodies are in category 1
use with maskBits to say which bodies will collide with which other bodies
the values are bit fields https://en.wikipedia.org/wiki/Bit_field so can have the following values:
can be 2, 4, 8, 16, 32, 64, 128, 256, etc. up to 15 powers of 2
physics - (default zimDefaultPhysics)
restitution - (default bounciness) - replaced by bounciness - kept for backwards compatibility
sensor - (default false) - set to true to turn object into a sensor - will not interact but will report contact
this is like a Box2D hitTest for non contacting object
see also physics.contact()
RETURNS obj for chaining
CLOSE ▲PAGE ▤CODE ▤VIDS
removePhysics
zim DisplayObject method
DESCRIPTION
Remove Physics from a DisplayObject.
This removes various methods and properties that addPhysics() added
The object can be added back to the physics world with addPhysics()
EXAMPLE
hitTestPoint
zim DisplayObject method
DESCRIPTION
See if shape of obj is hitting the global point x and y on the stage.
EXAMPLE
const circle = new Circle().loc(100,100).drag();
circle.on("pressmove", ()=>{
if (circle.hitTestPoint(W/2, H/2)) {
if (circle.alpha == 1) {
circle.alpha = .5;
S.update();
}
} else {
if (circle.alpha == .5) {
circle.alpha = 1;
S.update();
}
}
});
PARAMETERS
x and y - the point we are testing to see if it hits the shape of the object
boundsCheck (default true) do a bounds check first (faster) but if bounds are wrong - might not work
RETURNS a Boolean true if hitting, false if not
CLOSE ▲PAGE ▤CODE ▤VIDS
hitTestReg
zim DisplayObject method
DESCRIPTION
See if the shape shape of an object is hitting the registration point of object (other).
EXAMPLE
const circle = new Circle(50, red).center().drag();
const rect = new Rectangle(100, 100, blue).loc(100,100);
circle.on("pressmove", ()=>{
if (circle.hitTestReg(rect)) {
S.removeChild(rect);
S.update();
}
})
PARAMETERS
other - the object whose registration point we are checking against
boundsCheck (default true) do a bounds check first (faster) but if bounds are wrong - might not work
RETURNS a Boolean true if hitting, false if not
CLOSE ▲PAGE ▤CODE ▤BITS VIDS
hitTestRect
zim DisplayObject method
DESCRIPTION
See if a shape of an object is hitting points on a rectangle of another object.
The rectangle is based on the position, registration and bounds of object (other).
num is how many points on the edge of the rectangle we test - default is 0.
The four corners are always tested as well as the very middle of the rectangle.
EXAMPLE
const circle = new Circle(50, red).center().drag();
const rect = new Rectangle(100, 100, blue).loc(100,100);
circle.on("pressmove", ()=>{
if (circle.hitTestRect(rect)) {
S.removeChild(rect);
S.update();
}
});
PARAMETERS
other - the object whose bounding rectangle we are checking against
num - (default 0) the number of points along each edge to check
1 would put a point at the middle of each edge
2 would put two points at 1/3 and 2/3 along the edge, etc.
there are always points at the corners
and one point in the middle of the rectangle
boundsCheck (default true) do a bounds check first (faster) but if bounds are wrong - might not work
inside (default false) check if other object is completely inside shape
RETURNS a Boolean true if hitting, false if not
CLOSE ▲PAGE ▤CODE ▤BITS VIDS
hitTestRectPoint
zim DisplayObject method
DESCRIPTION
Uses an equation to see if the bounds of a rectangular object is hitting a point x, y.
This is faster than hitTests on shapes - so will have the speed of hitTestBounds, hitTestCircles and hitTestGrid.
A margin parameter is provided to tweak the hitTest
EXAMPLE
const rect = new Rectangle(50, 50, red).center().drag();
rect.on("pressmove", ()=>{
if (rect.hitTestRectPoint(W/2, H/2)) {
zog("hitting!");
}
});
PARAMETERS
x - the global x for the point to test
y - the global y for the point to test
margin (default 0) pixels the bounds of the rectangle is increased or decreased to effect the hit
RETURNS a Boolean true if hitting, false if not
CLOSE ▲PAGE ▤CODE ▤VIDS
hitTestCircle
zim DisplayObject method
DESCRIPTION
See if the shape of an object is hitting points on a circle of another object.
The circle is based on the position, registration and bounds of object (other).
num is how many points around the circle we test - default is 8
Also checks center of circle hitting.
EXAMPLE
var circle = new Circle(50, red).center().drag();
var triangle = new Triangle(100, 100, 100, blue).loc(100,100);
circle.on("pressmove", function() {
if (triangle.hitTestCircle(circle)) {
S.removeChild(triangle);
S.update();
}
});
PARAMETERS
other - the object whose circle based on the bounding rect we are using
num - (default 8) the number of points evenly distributed around the circle
and one point in the middle of the circle
boundsCheck (default true) do a bounds check first (faster) but if bounds are wrong - might not work
inside (default false) check if other object is completely inside shape
RETURNS a Boolean true if hitting, false if not
CLOSE ▲PAGE ▤CODE ▤BITS VIDS
hitTestCircleRect
zim DisplayObject method
DESCRIPTION
Uses an equation to see if a circlular object is hitting the rectangle of another object.
DO NOT use with a rotated rectangle object - for that use hitTestRect() or hitTestCircle().
This is faster than hitTests on shapes - so will have the speed of hitTestBounds, hitTestCircles and hitTestGrid.
The circle is based on a the object radius if there is one
and if no radius then the average of the width and height divided by two.
A margin parameter is provided to tweak the hitTest
The rect is based on the bounds of the second object projected globally as a rectangle
If the second object bounds are rotated, the global bounds will be bigger to keep parallel to the axes
EXAMPLE
const ball = new Circle(50, red).center().drag();
const box = new Rectangle(100, 100, blue).loc(100,100);
ball.on("pressmove", ()=>{
if (ball.hitTestCircleRect(box)) {
zog("hitting!");
}
});
PARAMETERS
other - the object whose bounds are used to see if circle shape is hitting
margin (default 0) pixels the distance between the circle and the bounds is increased or decreased to effect the hit
RETURNS a Boolean true if hitting, false if not
CLOSE ▲PAGE ▤CODE ▤
hitTestCirclePoint
zim DisplayObject method
DESCRIPTION
Uses an equation to see if a circlular object is hitting a point x, y.
This is faster than hitTests on shapes - so will have the speed of hitTestBounds, hitTestCircles and hitTestGrid.
The circle is based on a the object radius if there is one
and if no radius then the average of the width and height divided by two.
A margin parameter is provided to tweak the hitTest
EXAMPLE
const ball = new Circle(50, red).center().drag();
ball.on("pressmove", ()=>{
if (ball.hitTestCirclePoint(W/2, H/2)) {
zog("hitting!");
}
});
PARAMETERS
x - the global x for the point to test
y - the global y for the point to test
margin (default 0) pixels the bounds of the circle is increased or decreased to effect the hit
RETURNS a Boolean true if hitting, false if not
CLOSE ▲PAGE ▤CODE ▤VIDS
hitTestCircles
zim DisplayObject method
DESCRIPTION
Uses an equation to see if two circles are intersecting.
This is faster than hitTests on shapes - so will have the speed of hitTestBounds and hitTestGrid.
The circles are based on the bounds of the two objects - it does not matter on which object the method is placed.
If the bounds are not square then half the average length of the sides is used as the radius.
A margin parameter is provided to tweak the hitTest
EXAMPLE
const ball = new Circle(50, red).center().drag();
const basket = new Circle(100, blue).loc(100,100);
ball.on("pressmove", ()=>{
if (ball.hitTestCircles(basket)) {
zog("points!");
}
});
PARAMETERS
other - the object whose circle based on the bounding rect we are using
margin (default 0) pixels the distance between circles is increased or decreased to effect the hit
RETURNS a Boolean true if hitting, false if not
CLOSE ▲PAGE ▤CODE ▤VIDS
hitTestBounds
zim DisplayObject method
DESCRIPTION
See if obj.getBounds() is hitting other.getBounds().
Margin can be adjusted to tweak the hitTest.
Pass in a boundsShape shape if you want a demonstration of where the bounds are.
EXAMPLE
const circle = new Circle(50, red).center().drag();
const rect = new Rectangle(100, 100, blue).loc(100,100);
circle.on("pressmove", ()=>{
if (circle.hitTestBounds(rect)) {
S.removeChild(rect);
S.update();
}
});
PARAMETERS
other - another object whose rectanglular bounds we are testing
margin (default 0) shifted distance in pixels before hit is counted - can be positive or negative
boundsShape - (default null) an empty Shape or createjs.Shape
you would need to add the boundsShape to the stage
RETURNS a Boolean true if hitting, false if not
CLOSE ▲PAGE ▤CODE ▤BITS VIDS
hitTestPath
zim DisplayObject method
DESCRIPTION
See if the shape of an object is hitting points on a path of a Squiggle or Blob.
num is how many points between each point on the path we test - default is 2
SEE: https://zimjs.com/hittestpath.htmlEXAMPLE
const path = new Blob().center();
const circle = new Circle(50, purple).pos(100,100).drag();
circle.on("pressmove", ()=>{
if (circle.hitTestPath(path, 3, true)) {
circle.alpha -= .02;
S.update();
}
});
PARAMETERS
other - the path (Squiggle or Blob) to test to see if the object shape is hitting
num - (default 2) the number of points added to the path roughly between each point
this gets totalled - so num*numPoints and then distributed along the path
showPoints (default false) will draw small circles along the path where the hits will be tested
returnPoints (default false) set to true to return an array of {x,y} points that are hitting (or false)
returnPercent (default false) set to true to return a percent along the path the first hit occurs - unless overridden by returnPoints
RETURNS a Boolean true if hitting (or an array of {x,y} points if returnPoints is true), false if not
CLOSE ▲PAGE ▤CODE ▤VIDS
hitTestGrid
zim DisplayObject method
DESCRIPTION
Converts an x and y point to an index in a grid.
If you have a grid of rectangles, for instance, use this to find out which rectangle is beneath the cursor.
This technique will work faster than any of the other hit tests.
EXAMPLE
const tile = new Tile(new Rectangle(100,100),5,4,10,10).center();
const circle = new Circle(10,green).pos(10,10).drag();
circle.on("pressmove", ()=>{
var index = tile.hitTestGrid(tile.width, tile.height, 5, 4, circle.x, circle.y,0,0,10,10);
zog(index);
});
PARAMETERS
width and height - the overall dimensions
cols and rows - how many of each (note it is cols and then rows)
x and y - where you are in the grid (eg. e.stageX and e.stageY)
offsetX and offsetY - (default 0) the distances the grid starts from the origin of the obj
spacingX and spacingY - (default 0) spacing between grid cells
null will be returned if x and y within spacing unless the type is set to "open"
spacing is only between the cells and is to be included in the width and height (but not outside the grid)
local - (default false) set to true to convert x and y to local values
type - (default index) which means the hitTestGrid returns the index of the cell beneath the x and y point
starting with 0 at top left corner and counting columns along the row and then to the next row, etc.
set type to "col" to return the column and "row" to return the row
set to "array" to return all three in an Array [index, col, row]
set to "open" allow x and y to be in spacing and still return Array [index, col, row]
these will report depending on less than half the spacing or more than half the spacing between cells
RETURNS an index Number (or undefined) | col | row | an Array of [index, col, row]
CLOSE ▲PAGE ▤CODE ▤BITS
animate
zim DisplayObject method
powered by createjs.Tween (TweenJS)
DESCRIPTION
Animate object properties in time (s).
You can set various types of easing like bounce, elastic, back, linear, sine, etc.
Handles callbacks, delays, loops, rewinds, relative, series and sequences of animations.
SEE: https://zimjs.com/animation
Shape Animation
ZIM animate() lets you animate one Squiggle to another or one Blob to another
See the props parameter under the convenience properties for shape and blobShift
Advanced Animation
ZIM animate() lets you animate along a path made with a zim Squiggle or Blob
These paths can be edited by the user and the animation will still work
The paths themselves can be animated or wiggled.
Orient and Flipping are available.
Dynamic speed can be set with percentSpeed and tied in to Accelerator and MotionController.
Scrubbing animation and path animation is also supported with percentComplete.
This can be used with a Slider, Dial, MotionController, Parallax or general coding.
Dragging along a path is as easy as setting the drag parameter to true.
This can be done with while animating or with the animation paused.
ZIM EXTRA! provides animation based on animation.
This allows for setting zoom, depth, speed, fade, etc. based on target y value while animating on a path
but EXTRA! also opens up endless possibilities as the input and output does not have to be the target.
This means that animation can also control properties of other objects.
SEE: https://zimjs.com/nio/NOTE
to temporarily prevent animations from starting set ANIMATE to false
NOTE
see pauseAnimate(state, ids) and stopAnimate(ids) for controlling tweens when running
NOTE
set mouseEnabled of target before calling animate as animate itself sets mouseEnabled and then resets to original after a delay
EXAMPLE
const circle = new Circle(50, red)
.center()
.alp(0)
.sca(0)
.animate({alpha:1, scale:1}, .7, null, done);
function done(target) {
// target is circle if params is not set
target.drag();
}
// or with ZIM DUO and from parameter:
const circle = new Circle(50, red)
.center()
.animate({
props:{alpha:0, scale:0},
time:.7,
from:true
});
// note: there was no need to set alpha and scale to 0 before the animation
// because from will animate from property values in props {alpha:0, scale:0}
// to the present set values - which are 1 and 1 for the default scale and alpha.
// This allows you to place everything how you want it to end up
// and then easily animate to this state.
// An extra advantage of this is that you can use the ANIMATE constant to skip animations while building
// See the https://zimjs.com/ornamate.html example
// RELATIVE animation
// rotate the rectangle 360 degrees from its current rotation
rectangle.animate({rotation:"360"});
// pulse circle
var circle = new Circle(50, red)
.center()
// pulse circle from scale 0 - 1 every second (use ZIM DUO)
.animate({
props:{scale:0},
time:.5,
loop:true,
rewind:true,
from:true
});
// toggle pause the circle when stage is pressed
S.on("stagemousedown", ()=>{
circle.pauseAnimate(!circle.paused);
});
EXAMPLE
// using ZIM VEE value:
// this will animate the alpha to between .5 and 1 in either 1 second or 2 seconds
circle.animate({alpha:{min:.5, max:1}}, [1, 2]);
EXAMPLE
// Dynamic Animation
const rect = new Rectangle(200,200,red)
.centerReg()
.animate({
props:{rotation:360},
loop:true,
time:2,
ease:"linear",
dynamic:true,
set:{percentSpeed:0} // no speed to start
});
// example using a Slider to set speed from 0 to 5 times as fast
const slider = new Slider(0,500)
.pos(100, 100)
.change(()=>{
rect.percentSpeed = slider.value;
});
// example using an Accelerator and MotionController
// to set speed from -200 to 200 percent
// depending on mouse position
// multiple targets including Dynamo and Scroller objects can be added to Accelerator
// if adding multiple objects, use an array new Accelerator([rect, otherObject, anotherObject])
new MotionController({
target:new Accelerator(rect),
type:"mousemove",
minPercentSpeed:-200,
maxPercentSpeed:200
});
EXAMPLE
// Series example animating a circle in square formation
// Also showing that the series can include multiple targets
// Click on the stage to pause or unpause the animation
const rect = new Rectangle({color:pink})
.centerReg()
.sca(0); // hiding it to start
const circle = new Circle({color:purple}) // chaining the rest
.pos(400,300)
.animate({ // circle will be the default object for the inner animations
props:[
// an array of animate configuration objects
{props:{x:600, y:300, scale:2}},
{props:{x:600, y:500, scale:1}, call:function(){zog("part way");}},
{props:{x:400, y:500}, time:.5, ease:"quadInOut"},
{target:rect, props:{scale:3}, time:1, rewind:true, ease:"quadInOut"},
{props:{x:400, y:300}}
],
time:1, // will be the default time for the inner animations
ease:"backOut", // will be the default ease for the inner animations
id:"square", // will override any id set in the inner animations
loop:true,
loopCount:3,
// note - no rewind or from parameters
call:() => {zog("done");}
});
var paused = false;
S.on("stagemousedown", ()=>{
paused = !paused;
pauseAnimate(paused, "square");
});
EXAMPLE
// sequence example to pulse two circles
const circles = new Container(W, H).addTo();
const circle1 = new Circle(50, red).center(circles);
const circle2 = new Circle(50, blue).center(circles).mov(70);
circles.animate({
props:{scale:0},
time:.5,
loop:true,
rewind:true,
from:true,
sequence:.5
});
EXAMPLE
// animate() can animate any object property
// just use the animate function and pass in the object as the first parameter:
const obj = {age:10}
animate(obj, {age:20}, 1);
interval(.05, ()=>{
zog(obj.age);
});
// or if you have a THREEJS mesh
// use quotes to animate a dot property:
animate(mesh, {"rotation.y":360*RAD}, 10);
// or to use the ZIM DUO technique with the animate function (not method),
// the normal obj parameter is called target so as not to conflict
// with the old obj parameter which is now props but is kept for legacy purposes ;-)
animate({
target:mesh,
props:{"rotation.y":360*RAD},
time:10,
loop:true,
rewind:true
});
// or CSS properties - see the CSS parameter for setup info
zss("tagID").opacity = 1; // set this even if it is default
animate(zid("tagID"), {opacity:0}, 2); // etc.
// animate across colors
const colors = series("#f0f","#0f0","#00f","#f00","#ff0").mix();
new Rectangle(W,H,colors)
.addTo()
.animate({
props:{color:colors},
loopPick:true,
rewindPick:true
});
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports VEE - parameters marked with ZIM VEE mean a zim Pick() object or Pick Literal can be passed
Pick Literal formats: [1,3,2] - random; {min:10, max:20} - range; series(1,2,3) - order, function(){return result;} - function
props - the object literal holding properties and values to animate
Basic examples: {x:200} or {rotation:360, alpha:0} or {scale:4} or {x:300, y:300, scale:"2"} (relative scale)
There are custom options below including Convenience, ZIM VEE, Relative, and Series properties.
** Before ZIM 7.1, this parameter was called obj - as to not conflict with CreateJS TweenJS props (now renamed cjsProps)
obj is still available as a parameter name for backwards compatibility when using a ZIM DUO configuration object
CONVENIENCE PROPERTIES
scale - for scaleX and scaleY
color - on ZIM shapes for setColorRange() and animate colorRange from 0-1
** this property cannot be run in a series - rather animate in a call function to accomplish a series of color changes
note - animate from one note to another when animating a ZIM Synth tone()
note ("A", "C2", "C#" or "Bf", etc.) is coverted to frequency
shape - animate from one ZIM Squiggle to another or one ZIM Blob to another
for now, the matching Sqiggle or Blob must have the same number of points
to pause or stop a shape tween use the animate id parameter
blobShift - a number of points to shift the points of a Blob in clockwise direction
this is when using a shape tween that is a Blob - can be negative
path - pass in a Blob or Squiggle to animate along path
https://zimjs.com/nio/path.html
If the shape has lockControls set to false (the default) then the animation will be dynamic
and adjust as the shape is changed.
If a set animation path is desired then set the shape's lockControls to true
NOTE: Do not re-amimate an object that is being animated on a path
use a Container and animate the container on the path
and animate the object inside the container - otherwise percentComplete conflicts
startPercent - (default 0) set to a percent for where to start the target animating
ZIM Bead objects will be given a startPercent that matches their start percentage
currently not supported when dragging on path - it is very complicated
percent - (default 100) how much percent to animate from the startPercent
by default, the target will travel once along the path from its start position (startPercent)
this can be less than the startPercent to make animation travel backwards on the path
the percent can also be bigger than 100 as well as less than 0
so a percent:300 will travel three times along the path - and then rewind if rewind is set
and a percent of -150 will travel one and half times backwards along the path from the startPercent
currently not supported when dragging on path - it is very complicated
orient - an object with x and y to aim the target at
https://zimjs.com/nio/orient.html
when a path is used this will default to rotate to orient to path
(for a Sprite, add the Sprite to a Container and animate the Container)
can set to false for no rotation
can set to any object with an x, y point such as a circle on the stage - or {x:0, y:0} or a new zim Point, etc.
flip - default true when orient is true
true will flip the object horizontally when its x direction goes negative
https://zimjs.com/nio/flip.html
this will also work with orient to make sure the target is not upside down
if object is pre-rotated then 90,-90,270 should work as ZIM will swap the the scaleX and scaleY
but any unusual starting angles may not flip as desired - so put these in a Container and animate the container
flipVertical - setting flipVertical to true will flip the object vertically when its y direction goes negative
this will also work with orient to make sure the target is not upside down
EXTRA! - the following convenience properties are available for ZIM EXTRA! (also see extra below)
https://zimjs.com/nio/extra.html
zoom - an array that represents scale proportions based on target's y position
[inputMin, inputMax, outputMin(default 0), outputMax(default H)] the outputs will be constrained to the provided values
zoom:[.5,1.5] scales the target based on its y position - animating y or along a path will show scaling
zoom:10 - is like zoom:[0,10]
zoom:true - is like zoom:[0,1]
zoom:[1,3,H/2-100,H/2+200] would scale from 1 to 3 in this region and stay at 1 or 3 outside this region
speed - an array that represents animation percentSpeed based on target's y position
[inputMin, inputMax, outputMin(default 0), outputMax(default H)] the outputs will be constrained to the provided values
speed:[20,100] sets percentSpeed based on target y position - animating y or along a path will have changing speed
speed:40 - is like speed:[0,40]
speed:true - is like speed:[0,100]
** will set dynamic property to true - as percentSpeed needs dynamic property set to true
layer - an array that represents ratio of layer proportions based on target's y position
[inputMin, inputMax, outputMin(default 0), outputMax(default H)] the outputs will be constrained to the provided values
layer:[0,1] sets current layer based on target y position - animating y or along a path will have changing layers
layer:1 - is like layer:[0,1]
layer:true - is like layer:[0,target.parent.numChildren-1]
fade - an array that represents ratio of alpha based on target's y position
[inputMin, inputMax, outputMin(default 0), outputMax(default H)] the outputs will be constrained to the provided values
fade:[.5,1] sets current alpha based on target y position - animating y or along a path will have changing alpha
fade:1 - is like fade:[0,1]
fade:true - is like fade:[0,1]
fade:[0,1,H/2-100,H/2+200] - would change alpha in this y region
extra - in addition to the convenience properties above, ZIM EXTRA! has a more general and complete format:
Pass in a single EXTRA! object or an array of EXTRA! objects: extra:{} or extra:[{},{},{}]
The object has the following properties - all are optional except the outputProp which is required:
|ZIM VEE| - each object below optionally accepts a ZIM VEE value for Pick.choose() to pick randomly from
inputObj - (default target) - the object with the input property - probably the animation target but could be any object
inputProp - (default "y") - a string of the property name for the input - "x", "rotation", etc.
inputMin - (default 0) - the minimum input value for the calculation - also see constrain
inputMax - (default W if x inputProp else H) - the maximum input value for the calculation - also see constrain
outputObj - (default target) - the object whose output property is being changed - probably the animation target but could be any object
outputProp - (default "scale") - a string of the property name of the output - "scale", "layer", "rotation", etc.
outputMin - (default 0) - the minimum output value for the calculation - also see constrain
outputMax - (default 1) - the maximum output value for the calculation - also see constrain
factor - (default 1) setting factor to -1 will reverse the direction of the animation
outputRound - (default false) set to true to receive rounded output values
constrain - (default true) constrain the output value to outputMin and outputMax
set to false to let values go beyond provided mins and maxes
this is quite usual when a proportion is easily figured at a certain range
and continued increase or decrease is desired outside the range - just turn constrain to false.
EXAMPLES:
extra:{outputProp:"scaleX"} would animate the scaleX of the target from 0-1 over the stage height
extra:{outputObj:circle, outputProp:"alpha"} would animate the alpha of circle based on the animated target's y position
extra:{inputObj:circle, inputProp:"x", inputMax:W, outputProp:"level"} would animate the target's child index as the circle's x goes across the screen
** in the last two examples, circle is a different object than the target of the animation - circle might be animating independently or based on a Slider value, etc.
|ZIM VEE| - each props property value optionally accepts a ZIM VEE value for Pick.choose() to pick randomly from (except the EXTRA! properties which accept ZIM VEE values inside)
these will be picked again if the loopPick parameter is true (default false)
RELATIVE VALUES: you can pass in relative values by putting the numbers as strings
rotation:"360" will animate the rotation of the object 360 degrees from its current rotation
whereas rotation:360 will animate the rotation of the object to 360 degrees
DOT PROPERTIES: you can animate properties on properties using quotes:
Here is animate used as a function to animate a threejs mesh
animate(mesh, {"rotation.y":360*RAD}, 5000);
note that the from parameter is not currently supported with dot properties (difficult bug)
CSS PROPERTIES: animate can animate CSS properties
ZIM's CreateJS 1.3.2 has the CreateJS CSS Pluging installed
Set the css parameter to true and see the CSS parameter for more details
ANIMATION SERIES: if you pass in an array for the props value, then this will run an animation series
The array must hold animate configuration objects:
[{props:{scale:2}, time:1, rewind:true}, {target:different, props:{x:100}}, etc.]
If you run animate as a method on an object then this is the default object for the series
but you can specify a target to override the default
By default, each animation runs after the other, but a negative wait can be set
eg. if wait:-1 is set on the third animation in the series it starts 1 second before the second animation ends
The default time and tween are as provided in the main parameters
but you can specify these to override the default
The id of the main parameters is used for the whole series and cannot be overridden
The override parameter is set to false and cannot be overridden
All other main parameters are available except rewind, sequence and from
(rewind and from are available on the inner tweens - for sequence: the initial animation is considered)
You currently cannot nest animation series
Note: if any of the series has a loop and loops forever (a loopCount of 0 or no loopCount)
then this will be the last of the series to run
Note: color cannot be animated in a series - rather animate in a call function to accomplish a series of color changes
Note: a sequence cannot be seriesed and a series cannot be sequenced
time - |ZIM VEE| (default 1) the time for the tween in seconds (also see ZIM TIME constant)
see also the rate parameter and property to dynamically change the time the animation takes (its speed)
ease - |ZIM VEE| (default "quadInOut") the equation type for easing ("bounceOut", "elasticIn", "backInOut", "linear", etc)
no ease is "linear" or "none"- this is often good for constantly falling or rotating objects
also ZIM preset eases: "snapIn", "snapOut", "snapInOut", "ballisticIn", "ballisticOut", "ballisticInOut", "slowmoIn", "slowmoOut", "slowmoInOut"
** CUSTOM EASE: see https://zimjs.com/ease for custom ease which can be passed in here as a value like so:
ease:zimEase([.2,.4,.6,.8]) // would be linear
ease:zimEase([[1.45,-0.57,0.67,0.55], [0.34,0.44,1.43,-0.31]]) // is the same as "snapInOut"
// see the zimEase() function in the docs for the Code module
see CreateJS easing: https://www.createjs.com/docs/tweenjs/classes/Ease.html
also see easeAmount and easeFrequency parameters to adjust certain eases like back and elastic
call - (default null) the function to call when the animation is done
params - (default target) a single parameter for the call function (eg. use object literal or array)
wait - |ZIM VEE| (default 0) seconds to wait before doing animation
can be negative for series to start animation before previous animation ends
waitedCall - (default null) calls function after wait is done if there is a wait
waitedParams - (default target) parameters to send waitedCall function
loop - (default false) set to true to loop animation
loopCount - |ZIM VEE| (default 0) if loop is true how many times it will loop (0 is forever)
loopWait - |ZIM VEE| (default 0) seconds to wait before looping - will automatically set loop to true
loopCall - (default null) calls function after loop and loopWait (not including last loop)
loopParams - (default target) parameters to send loopCall function
loopWaitCall - (default null) calls function after at the start of loopWait
loopWaitParams - (default target) parameters to send loopWaitCall function
loopPick - (default false) remake any ZIM VEE (Pick) props for the next loop (thanks GSAP)
rewind - |ZIM VEE| (default false) set to true to rewind (reverse) animation (doubles animation time)
rewindWait - |ZIM VEE| (default 0) seconds to wait in the middle of the rewind
rewindCall - (default null) calls function at middle of rewind after rewindWait
rewindParams - (default target) parameters to send rewindCall function
rewindWaitCall - (default null) calls function at middle of rewind before rewindWait
rewindWaitParams - (default target) parameters to send rewindCall function
rewindTime - (default time) set the time in seconds for the rewind portion of an animation
rewindEase - (default null) overwrite the ease for the rewind direction
this assumes that In is at the start of the rewind and Out is at the end of the rewind
so setting rewindEase:"bounceOut" will bounce back at the start of the animation
note - setting ease:"bounceOut" will bounce at the end of the animation
this allows for a normal start with a bounce and then a normal start at rewind and a bounce
startCall - (default null) calls function at the start of actual animation and after any wait (and waitedCall)
this is basically the same as the waitedCall but will also be called at the start of animation when there is no waitedCall
startParams - (default target) parameters to send startCall function
animateCall - (default null) calls function every animation
this runs an alternate Ticker so does not aversely affect animate without an animateCall
alternatively, can set events:true and capture an "animation" event - but that is only for animations on ZIM objects
wherease animateCall will always be available
for instance, if using the animate() function on object literals, HTML/CSS tags or threejs objects, etc.
animateParams - (default target) parameters to send animateCall function
sequence - (default 0) the delay time in seconds to run on children of a container or an array of target animations
with the addition of ZIM VEE object to the target, you must noPick the array
for example, target = container or target = {noPick:[a,b,c]} and sequence = 1
would run the animation on the first child and then 1 second later, run the animation on the second child, etc.
or in the case of the array, on element a and then 1 second later, element b, etc.
If the loop prop is true then sequenceCall below would activate for each loop
For an array, you must use the zim function with a target parameter - otherwise you can use the ZIM 4TH method
Note: a sequence cannot be seriesed and a series cannot be sequenced
Note: for a sequence animate() give the animate() an id and pauseAnimate() or stopAnimate() that id.
sequenceCall - (default null) the function that will be called for each sequence animation
Note: the value of the sequenceCall parameter will be the object that just ended animation unless there is a sequenceParams value
sequenceParams - (default null) a parameter sent to the sequenceCall function
sequenceReverse - |ZIM VEE| (default false) set to true to sequence through container or array backwards
sequenceRatio - (default null) set to a value to adjust the rate based on item ratio property
see https://zimjs.com/016/normalize.html
see Container() ratio property and normalize() method which give a ratio property.
This will automatically set sequence to 0 so that each item in the container (or tile) is animated individually
the sequenceRate value will be multiplied by the item's ratio and then added to the rate (see rate parameter)
So if the sequenceRate is 2 and the rate is the default 1,
then an item with a ratio property of 0 would be at rate 1
and items with a ratio property of .5 would be at rate 1+2*.5 = 2
and items with a ratio property of 1 would be at rate 1+2*1 = 3
ticker - (default true) set to false to not use an automatic Ticker function
cjsProps - (default {override: true}) legacy - allows you to pass in CreateJS TweenJS configuration properties
css - (default false) set to true if there is no Frame
ZIM's CreateJS 1.3.2 has the CreateJS CSS Pluging installed
But other CreateJS versions will need the plugin available here:
https://d309knd7es5f10.cloudfront.net/CSSPlugin01.js
Add that at the top of your code in a script tag
and at the top of the main script install:
createjs.CSSPlugin.install();
<script>
// other versions of CreateJS need to import and install CSS Plugin
// createjs.CSSPlugin.install();
// the property must be set before you can animate
zss("tagID").opacity = 1; // set this even if it is default
animate(zid("tagID"), {opacity:0}, 2); // etc.
// for transform styles use:
zss("tagID").transform = "translate(20px, 30px)"; // set this even if it is default
animate({
target:zid("tagID"),
props:{transform:"translate(100px, 150px)"},
time:2,
loop:true,
rewind:true
});
</script>
protect - (default false) protects animation from being interrupted before finishing
unless manually interrupted with stopAnimate()
protect will default to true if loop or rewind parameters are set
but this can be overriden if protect is set to false
override - (default true) subesequent tweens of any type on object cancel all earlier tweens on object
set to false to allow multiple tweens of same object
from - |ZIM VEE| (default false) set to true to animate from obj properties to the current properties set on target
note that from is not supported with dot properties such as "rotation.x" with threejs (a difficult bug)
set - |ZIM VEE| (default null) an object of properties to set on the target to start (but after the wait time)
id - (default null) set to String to use with pauseAnimate(state, id) and stopAnimate(id) - thanks Sean Berwick for typo catch
series animate gets only one overall id - so no id per animation object
events - (default false) set to true to receive an "animation" event on the target (or Container with a Container sequence)
sequenceTarget - (default null) used internally for processing sequence animations
dynamic - (default false) set to true to turn on dynamic speed animation via the percentSpeed property
setting perecentSpeed (default 100) will adjust the speed of the animation
to change speed with a Slider, Dial, MotionController, Accelerator, etc.
use target.animate({props:{rotation:360}, dynamic:true, set:{percentSpeed:0}}); to start off with no animation
drag - (default false) used with path in props to drag along path
This can be done while animating or while the animation is paused
Setting drag to true will set startPaused to true as well - set startPaused to false to animate and drag
With rewind set, drag lets you change the direction of an animation while animating
To turn drag off use the pause() method that animate() adds to the target
clamp - (default true) used with dynamic and non-looping - set to false to let time pass beyond animation start and end
startPaused - (default false - true if drag is true) Boolean - set to true to start the animation in the paused state
Good for animating manually with the percentComplete property
clean - (default true) set to false to not delete animation ids etc. at end of animate()
Could then use percentComplete to position tween and pauseTween(false) to start animating again
Note... once tween has waited, percentComplete does not include wait period
So clean cannot be used to restart an animation with a wait after the animation has waited
Use the replayTween() method of the target to restart the latest animation on a target
NOTE: clean will be set to true if loop is true (even if loopCount is set)
So to scrub after a loopCount of 2 then remake the animate() in the call callback with a pauseAnimate()
obj - (depreciated) the old version of props - kept for backwards compatibility
seriesWait - (internal) used internally to hold setting relative values in correct series order
sequenceWait - (internal) used internally to tie sequence in to the animation chain for pauseAnimate and stopAnimate
rate - |ZIM VEE| (default 1) change the speed at which the animation runs
set to .5 to run at half the speed and 2 to run at twice the speed
a ZIM VEE here will update each loop if loopPick is set to true
to change the speed (time) of the animation for each loop
pauseOnBlur - (default true) as of ZIM 10.8.0, animate defaults to pause all animations on blur
blur is when the window is reduced or a different tab gains focus on the Browser
animate uses requestAninationFrame which slows down when the window is not in focus
this can cause animations to go out of sync - pauseOnBlur will prevent this
Can also set zim.pauseAnimateOnBlur=false or true to change this at any time
easeAmount - |ZIM VEE| (default null) set to change the tween effect
Ease amounts are as follows:
quad (default 2) - exponent - this is the default ZIM tween
cubic (default 3) - exponent
quart (default 4) - exponent
quint (default 5) - exponent
back (default 1.7) - strength
elastic (default 1) - amplitude - also see easeFrequency
linear/none, bounce, circ, sin - no affect
Note: used mostly with back and elastic (backIn, backOut, backInOut, etc.)
as setting the tween to quadInOut and then easeAmount to 5
would be the same as a quintInOut.
easeFrequency - |ZIM VEE| (default .3 elasticIn and elasticOut or .3*1.5 elasticInOut)
set to change the elastic ease frequency
so tween:"elasticOut", easeFrequency:.2 is a faster elastic
the time may also need to be increased or decreased as desired
also see easeAmount where easeAmount:3 would be a larger elastic
timeUnit - (default TIME) override the TIME setting to "seconds" / "s" or "milliseconds" / "ms"
timeCheck - (default true) set to false to not have animate() warn of potentially wrong time units - see also TIMECHECK
noAnimateCall - (default true) set to false to not call the callback function if ANIMATE is set to false
pathDamp - (default .15) damping for drag along path
rewindPick - (default false) set to true to pick from props as it rewinds
this will be moved to the other rewind parameters in ZIM 019
also see loopPick - using both loopPick and rewindPick will act like a series
where if the property has a series it will animate one after the other
do not use if the property is just a regular value as it will appear to stop the animation.
Can use a series, results of a function, min max or array for random picks
PROPERTIES - zim.animate() adds the following properties to any object it animates:
animating - read-only - true when animating (including when waiting)
see paused (the opposite) and waiting properties
paused - read-only - when animating, paused is set to false
When paused with pauseAnimate() then paused is set to true
When stopped or before animation, paused is undefined or null
There is only one paused property per object so pausing a specific id
on an object with multiple animations will set paused to true
even if other animations are still running.
Pausing multiple objects should work fine.
See the tweenState property to test which ids are animating or paused
For a sequence animate() give the animate() an id and pauseAnimate() or stopAnimate() that id.
waiting - read-only - true when animation is waiting in wait, rewindWait, loopWait
tweenState - an object with tween ids as properties along with an all property (unless no tweens anymore)
these properties are true if animating and false if paused
if all is true then all are animating except for the ids that hold false
if all is false then all are not animating except for the ids that hold true
this is used for pauseAnimateOnBlur to keep track of animations to set back to true when un-blurring
percentSpeed - get or set the percent of the animation speed
100% is regular time, 50% is half as fast, 200% is twice as fast -100% is reverse normal speed, etc.
use target.animate({props:{rotation:360}, dynamic:true, set:{percentSpeed:0}}); to start off with no animation
rate - changes the speed of the animation with 1 as a ratio
so 1 is the default speed (time), .5 would be half the speed, 2 twice the speed, etc.
does what percentSpeed does by changing the CreateJS timeScale property
this does not require dynamic to be set and is probably more efficient
rate might also be affected by sequenceRate
percentComplete - get or set percent complete (0-100) **
this allows you to scrub through an animation with a Slider, Dial, MotionController, etc.
should probably set startPaused parameter of animate() to true
Setting percentComplete to 100 may cause the animation to start at the beginning
but can set rewind:true and then set percentComplete to 50 - this will animate "backwards"
Can use animation event and a test of percentComplete to stop animation at a percentage
see https://zimjs.com/explore/squigglepart.html
** NOTE: As of ZIM 015, percentComplete includes the wait time
and spans across all animations on the object including animation series.
A percentComplete has also been added to the CreateJS tweens for individual control.
The individual tweens can be found in the zimTweens object
or the latestTween will give access to the latest tween running.
So for setting percentComplete on an animation with a wait you can access the latestTween
in the waited call back function.
METHODS - see pauseAnimate() and stopAnimate() under the METHODS module
Also - zim.animate() adds a pause(state, time) method to the target IF dynamic is set to true (or drag is true)
This matches the pause() of Dynamo and Scroller and is used by Accelerator
state - (default true) true pauses and setting the state to false will unpause the dynamic animation
time - (default 0) time in milliseconds to slow the animation down if pausing or speed it up if unpausing
endTween(callType) - stops the animation and sets the target to the properties at the end of the tween - returns target for chaining
callType defaults to "all" which will run the call function and all the call functions in a series
setting callType to "none" will not run the call function and not run any call function in a series
setting callType to "main" will run the call function but not the call functions in a series
note: any remaining rewindCall and loopCall functions will not be called when using endTween()
note: endTween is complicated with ids, multiple animations, series, sequences, etc.
if there is a problem, try adding the target to a Container and controlling separate animations on container and target
resetTween() - sets the target back to the state at the start of the last animate() call - returns target for chaining
note: resetTween is complicated with ids, multiple animations, series, sequences, etc.
if there is a problem, try adding the target to a Container and controlling separate animations on container and target
replayTween() - resets and runs the last animate() on the target - calls the animate function with the same parameters as the last time - returns target for chaining
note: replayTween is complicated with ids, multiple animations, series, sequences, etc.
if there is a problem, try adding the target to a Container and controlling separate animations on container and target
if there is a series with more than one target then replayTween will only work on the main target
instead, store the series in an object literal: const mySeries = {animation object} and call obj.animate(mySeries) and then later call it again obj.animate({mySeries})
EVENTS - zim animate() will add an "animation" event to the target IF the events parameter is set to true (default is false)
alternatively, see the animateCall and animateParams parameters of animate()
or the "animation" event will be added to the Container for a sequence in a Container
or the "animation" event is added to the targets of an animation series
If dynamic is set to true, will dispatch a "pause" event when animate is paused - could be delayed but time passed in to pause()
RETURNS the target for chaining (or null if no target is provided and run on zim with series)
CLOSE ▲PAGE ▤CODE ▤TOUR😊BITS VIDS
stopAnimate
zim function - and Display object function
DESCRIPTION
Stops tweens with the passed in id or array of ids.
If no id is passed then this will stop all tweens.
The id is set when using animate() or a Sprite id parameter.
An animation series will have the same id for all the animations inside.
To stop a Shape tween, set an id in the animate call and use that id to stop the shape tween
this is because the shape tween animation is not on the shape but on its many control points
See also pauseAnimate()
NOTE
for a sequence animate() give the animate() an id and pauseAnimate() or stopAnimate() that id.
NOTE
formerly stopZimAnimate - which still works but is depreciated
NOTE
calling stopAnimate(id) stops tweens with this id on all objects
calling object.stopAnimate(id) stops tweens with this id on the target object
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// We have split the tween in two so we can control them individually
// Set an id parameter to stop or pause
// You can control multiple tweens at once by using the same id (the id is for a tween set)
// Note the override:true parameter
const rect = new Rectangle(200, 200, pink)
.centerReg()
.animate({obj:{scale:2}, time:2, loop:true, rewind:true, id:"scale"})
.animate({obj:{rotation:360}, time:4, loop:true, ease:"linear", override:false});
rect.cur("pointer");
rect.on("click", ()=>{rect.stopAnimate()}); // will stop all tweens on rect
// OR
rect.on("click", ()=>{rect.stopAnimate("scale");}); // will stop scaling tween
stopAnimate("scale") // will stop tweens with the scale id on all objects
stopAnimate(); // will stop all animations
PARAMETERS
ids - (default null) pass in an id or an array of ids specified in animate, move and Sprite
toEnd - (default false) set to true to call endTween() on targets to go to end of tween values
warning: setting to true will make targets to go to the end of all their animations
which could have the effect of ignoring ids for specific animations therefore stopping them as well
PROPERTIES
paused - zim.stopAnimate() will set paused property of stopped objects to null
RETURNS null if run as stopAnimate() or the obj if run as obj.stopAnimate()
CLOSE ▲PAGE ▤CODE ▤BITS VIDS
pauseAnimate
zim function - and Display object function
DESCRIPTION
Pauses or unpauses tweens with the passed in id or array of ids.
If no id is passed then this will pause or unpause all tweens.
The id is set as a animate, move, Sprite parameter.
An animation series will have the same id for all the animations inside.
To pause a Shape tween, set an id in the animate call and use that id to pause the shape tween
this is because the shape tween animation is not on the shape but on its many control points
See also stopAnimate
NOTE
for a sequence animate() give the animate() an id and pauseAnimate() or stopAnimate() that id.
NOTE
formerly pauseZimAnimate - which still works but is depreciated
NOTE
calling pauseAnimate(true, id) pauses tweens with this id on all objects
calling object.pauseAnimate(true, id) pauses tweens with this id on the target object
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const circle = new Circle().center().animate({obj:{alpha:0}, loop:true, rewind:true});
circle.on("mousedown", ()=>{
circle.pauseAnimate(!circle.paused);
});
EXAMPLE
// We have split the tween in two so we can control them individually
// Set an id parameter to stop or pause
// You can control multiple tweens at once by using the same id (the id is for a tween set)
// note the override:true parameter
const rect = new Rectangle(200, 200, pink)
.centerReg()
.animate({obj:{scale:2}, time:2, loop:true, rewind:true, id:"scale"})
.animate({obj:{rotation:360}, time:4, loop:true, ease:"linear", override:false});
rect.cur("pointer");
rect.on("click", ()=>{rect.pauseAnimate()}); // will pause all tweens on rect
// OR
let paused = false;
rect.on("click", ()=>{
paused = !paused;
rect.pauseAnimate(paused, "scale");
}); // will toggle the pausing of the scaling tween
pauseAnimate(false, "scale") // will unpause tweens with the scale id on all objects
pauseAnimate(); // will pause all animations
PARAMETERS
state - (default true) will pause tweens - set to false to unpause tweens
ids - (default null) pass in an id or an array of ids specified in animate, move and Sprite
PROPERTIES
paused - zim.stopAnimate() will set paused property of paused objects to the value of the state parameter
RETURNS null if run as pauseAnimate() or the obj if run as obj.pauseAnimate()
CLOSE ▲PAGE ▤CODE ▤VIDS
wiggle
zim DisplayObject method
DESCRIPTION
Wiggles the property of the target object between a min and max amount to either side of the base amount
in a time between the min and max time.
Uses animate() so to pause or stop the wiggle use pauseAnimate and stopAnimate
either on the object or using an id that you pass in as a parameter
NOTE
calling pauseAnimate(true, id) pauses tweens with this id on all objects
calling target.pauseAnimate(true, id) pauses tweens with this id on the target object
EXAMPLE
const ball = new Circle().centerReg();
ball.wiggle("x", ball.x, 10, 100, .5, 1);
// wiggles the ball 10-100 pixels to the left and right of center taking .5-1 s each time
ball.pauseAnimate(); // will pause the wiggle
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports VEE - parameters marked with ZIM VEE mean a zim Pick() object or Pick Literal can be passed
Pick Literal formats: [1,3,2] - random; {min:10, max:20} - range; series(1,2,3) - order, function(){return result;} - function
NOTE
if using wiggle as a zim function the first parameter is:
target - the object to wiggle
property - the property name as a String that will be width-indicatorLength-edgeLeft-edgeRight
baseAmount - |ZIM VEE| (default the property's current amount) the center amount for the wiggle
wiggle will go to each side of this center unless type is "positive" or "negative"
minAmount - |ZIM VEE| the min amount to change to a side of center
maxAmount - |ZIM VEE| (default minAmount) the max amount to change to a side of center
minTime - |ZIM VEE| (default 1) the min time in seconds to go from one side to the other (also see ZIM TIME constant)
maxTime - |ZIM VEE| (default minTime) the max time in seconds to go from one side to the other (also see ZIM TIME constant)
totalTime - (default forever) the total time in seconds until a stopAnimate is called on wiggle (also see ZIM TIME constant)
adds a wiggleTimeout property to the wiggle target that holds the setTimeout id for cancelation of totalTime
type - (default "both") set to "positive" to wiggle only the positive side of the base or "negative" for negative side (or "both" for both)
ease - (default "quadInOut") the ease to apply to the animation
integer - (default false) tween to an integer value between min and max amounts
id - (default random id) the id to use for pauseAnimate() or stopAnimate()
startType - (default "both") set to "positive" to start wiggle in the positive side of the base or "negative" for negative side (or "both" for either)
ticker - (default true) set to false if wiggling a value other than a Display object property
wait - |ZIM VEE| (default 0) time in seconds to wait between each wiggle - in addition to time set for wiggle
pauseOnBlur - (default true) as of ZIM 10.8.0, animate defaults to pause all animations on blur
blur is when the window is reduced or a different tab gains focus on the Browser
animate uses requestAninationFrame which slows down when the window is not in focus
this can cause animations to go out of sync - pauseOnBlur will prevent this
Can also set zim.pauseOnBlur=false or true to change this at any time
endOnStart - (default true) - set to false to not end at the same property value as the wiggle started - if totalTime is set
EVENTS
if totalTime is set, target will dispatch a wigglestop event when the wiggle stops
RETURNS target for chaining
CLOSE ▲PAGE ▤CODE ▤VIDS
loop
zim DisplayObject method
NOTE
overrides earlier loop function with added container loop
so that we can use earlier loop function without createjs
DESCRIPTION
The loop function (see the CODE module for loop) lets you loop through:
1. If you pass in a Number for obj then loop() does function call that many times
2. If you pass in an Array then loop() loops through the array
3. If you pass in an Object literal or ZIM Dictionary then loop() loops through the object
4. If you pass in an String then loop() loops through the letters
5. If you pass in an HTML NodeList or HTMLCollection then loop() loops through the tags
The loop method lets you loop through a Container
NOTE
you can also pass the container as the first parameter of the loop function
6. The loop method loops through all the children of the container
and does the function for each one passing the child, currentIndex, totalLoops, startIndex, endIndex, obj.
So this is like for(i=0; i<obj; i++) {var child = obj.getChildAt(i);} loop
or for (var i in container.children) {var child = container.children[i];}
NOTE
If you pass in true for reverse, the loop is run backwards counting to 0 (by default)
NOTE
use return to act like a continue in a loop and go to the next loop
NOTE
use return NEXT when in interval mode to go immediately to the next interval - as opposed to return which goes to next but after another interval
NOTE
return a value to return out of the loop completely like a break (and return a result if desired)
EXAMPLE
var container = new Container().alp(.1).addTo();
// LOOP FUNCTION - for more examples see the CODE Module loop() function
loop(1000, i=>{ // gets passed an index i, totalLoops 1000, startIndex 0, endIndex 999, obj 1000
// make 1000 rectangles
new Rectangle().loc(rand(W-100), rand(H-100), container);
});
// LOOP METHOD
// loop through children of the container
container.loop((child, i)=>{ // gets passed the child, index, total, start, end and obj
child.x += i*2;
child.y += i*2;
}, true); // true would reverse - so highest in stack to lowest, with i going from numChildren-1 to 0
EXAMPLE
// looping with the interval setting
// loop through an array every 1 second
loop(10, i=>{zog(i);}, null, 1);
// loop through a Container every .01 seconds
const tile = new Tile(new Rectangle(26,26,[green, blue, pink]), 10, 10, -1, -1)
.reg(CENTER)
.pos(0,100,CENTER,BOTTOM)
.loop(item=>{
item.color = darker;
S.update();
}, null, .01);
PARAMETERS supports DUO - parameters or single object with properties below
call - the function to call
the function will receive (as its final parameters) the index, total, start, end, obj
where the index is the current index, total is how many times the loop will run
start is the start index, end is the end index and obj is the object passed to the loop
the starting parameters vary depending on the type of obj:
if the obj is a number then the first parameter is the index (no extra starting parameters given)
if the obj is an array then the first parameter is the element at the current index
if the obj is an object literal then the first and second parameters are the property name and property value at the current index
if the obj is a string then the first parameter is the letter at the current index
if the obj is a container then the first parameter is the child of the container at the current index
if the obj is an HTMLCollection then the first parameter is the tag
reverse - (default false) set to true to run the loop backwards to 0
interval - (default 0) set to a number of seconds between each loop
use return NEXT to go immediately to the next interval
use return to just leave current interval then wait another interval to continue
return a value (other than NEXT) to exit the loop and clear the inverval
the interval object is provided at the end of the loop function parameters - but will probably not be needed
step - (default 1) each step will increase by this amount (positive whole number - use reverse to go backwards)
start - (default 0 or length-1 for reverse) index to start
end - (default length-1 or 0 for reverse) index to end
immediate - (default true) set to false to not start the loop right away, but rather wait for a first interval
complete (default null) - a callback function to call when complete
completeParams (default null) - paramater to pass complete callback
RETURNS any value returned from the loop - or true if no value is returned from a loop
CLOSE ▲PAGE ▤CODE ▤BITS VIDS
scaleTo
zim DisplayObject method
DESCRIPTION
Scales object to a percentage of another object's bounds and scale
Percentage is from 0 - 100 (not 0-1).
Also see sca(), fit() and Layout().
NOTE
currently supports rotated objects only for FIT mode and not for FILL or FULL.
For rotated objects in FILL or FULL, put the rotated object in a Container
and then scaleTo() the container
WARNING: an error is happening when using scaleTo() in a resize event in FULL mode.
Use the simple:true parameter to avoid errors - but may not work with rotated nested objects
EXAMPLE
circle.scaleTo(stage, 50); // scale to half the W
circle.scaleTo(stage, 10, 20); // fit within these scalings of the stage
PARAMETERS - supports DUO - parameters or single object with properties below
boundObj - the object that we are scaling to with percents below
percentX - (default no scaling) the scale in the x
percentY - (default no scaling) the scale in the y
if both percentX and percentY are missing then assumes 100, 100 for each
and type defaults to FILL rather than FIT
type - (default FIT or FILL if no percent is provided) the scaling to match bounds
Note: as of ZIM Cat 04 the constant FIT or the string "fit", etc. can be used
Note: as of ZIM NFT the default is FILL if no percent and FIT if a percent is provided
FIT: to keep proportion (aspect ratio) and fit within bounds (formerly "smallest")
FILL: to keep proportion (aspect ratio) and fill the bounds (formerly "biggest")
FULL: match bounds dimensions - may stretch object (formerly "both" or "stretch")
boundsOnly - (default false) set to true to scale to the boundObj's bounds only - ignoring current boundObj scale
simple - (default false) set to true to avoid errors specifically in resize event
RETURNS obj for chaining
CLOSE ▲PAGE ▤CODE ▤BITS VIDS
fit
zim DisplayObject method
DESCRIPTION
Scale an object to rectangular dimensions and center it.
Actually scales and positions the object.
Object must have bounds set (setBounds()).
EXAMPLE
circle.fit(100, 100, 200, 300); // fits and centers in these dimensions
PARAMETERS supports DUO - parameters or single object with properties below
left, top, width, height - (default stage dimensions) the rectangle to fit
type - (default FIT) the scaling to match rectangle dimensions
Note: as of ZIM Cat 04 the constant FIT or the string "fit", etc. can be used
FIT: to keep proportion (aspect ratio) and fit within rectangle
FILL: to keep proportion (aspect ratio) and fill the rectangle
FULL: match rectange dimensions - may stretch object
RETURNS an Object literal with the new and old details (bX is rectangle x, etc.):
{x:obj.x, y:obj.y, width:newW, height:newH, scale:scale, scaleX:scaleX, scaleY:scaleY, bX:left, bY:top, bWidth:width, bHeight:height}
CLOSE ▲PAGE ▤CODE ▤BITS
boundsToGlobal
zim DisplayObject method
DESCRIPTION
Returns a createjs Rectangle of the bounds of object projected onto the stage.
Handles scaling and rotation.
If a ZIM Boundary object (or CreateJS Rectangle) is passed in then it converts this rectangle
from within the frame of the obj to a global rectangle.
If flip (default false) is set to true it goes from global to local rect.
Used by drag() and hitTestBounds() above - probably you will not use this directly.
EXAMPLE
zog(circle.boundsToGlobal().x); // global x of circle
PARAMETERS
rect - (default null) a ZIM Boundary() object or CreateJS Rectangle inside an object which you would like mapped to global
flip - (default false) make a global rect ported to local values
inside - (default false) [NOT WORKING YET] make a rectangle from smallest projection rather than largest
globalObj - (default stage) project rectangle into a Container other than the stage
RETURNS a createjs Rectangle of the bounds of object projected onto the stage
CLOSE ▲PAGE ▤CODE ▤
resetBounds
zim DisplayObject method
DESCRIPTION
Pass in no parameters to reset the bounds to calculated bounds
Pass in width and height to set bounds to (0,0,width,height)
Pass in x, y, width and height to set bounds to (0,0,width,height)
NOTE
a container made with new Container() has auto calculated bounds
so the bounds (and width and height) adapt to surround any new children's bounds
A container set with bounds to start: new Container(100, 200) has static bounds
so the bounds (and width and height) will not change as new children are added
Calling container.resetBounds() with no parameter sets dynamic calculated bounds
Or you can reset the static bounds with parameters.
EXAMPLE
const container = new Container();
const rect = new Rectangle(500,300).addTo(container);
zog(container.width, container.height); // 500, 300 dynamic bounds
// OR
const container = new Container(100, 100);
const rect = new Rectangle(500,300).addTo(container);
zog(container.width, container.height); // 100, 100 static bounds
container.resetBounds();
zog(container.width, container.height); // 500, 300 dynamic bounds
container.resetBounds({margin:20});
zog(container.bounds); // -20, 20, 540, 340 static with margin
container.resetBounds(200, 200);
rect.removeFrom();
zog(container.width, container.height); // 200, 200 static bounds
PARAMETERS supports DUO - parameters or single object with properties below
width - (default null) null will set dynamic bounds and the object will take on bounds of children if a Container
setting a number for the width will set static bounds that do not change as objects are added
height - (default width) the height of the bounds
if there is a width supplied but no height then the height is set to the width
setting these run obj.setBounds(boundsX,boundsY,width,height);
OR if four parameters are set:
boundsX - (default 0) the x of the bounds
boundsY - (default 0) the y of the bounds
width - (default null) the width of the bounds
height - (default width) the height of the bounds
if there is a width supplied but no height then the height is set to the width
setting these run obj.setBounds(boundsX,boundsY,width,height);
margin - (default 0) add margin to increase (or decrease if negative) bounds
if used, this makes the bounds static rather than dynamic.
RETURNS object for chaining
CLOSE ▲PAGE ▤CODE ▤
copyMatrix
zim DisplayObject method
DESCRIPTION
Copies the transformation properties from the source to the obj
(x, y, rotation, reg, scale and skew)
NOTE
used internally by animate() and setMask() for copying transform of shapes to mask
also used in addDisplayMembers for clone() method
EXAMPLE
circle.copyMatrix(circle2);
// circle will now match circle2 in x, y, rotation, scale and skew properties
PARAMETERS
source - object from which the transform properties are being copied
RETURNS obj for chaining
CLOSE ▲PAGE ▤CODE ▤
expand
zim DisplayObject method
DESCRIPTION
Adds a createjs hitArea to an object with an extra padding of padding.
Good for making mobile interaction better on labels, buttons, etc.
Note: this will make the whole object a hitArea so objects inside will not dispatch mouse events.
If that is required then use "holder" container that holds the expanded object
and put the other target object on top of the expanded object but inside the holder container.
EXAMPLE
const circle = new Circle(10, red)
.center()
.expand(); // makes hit area bigger
circle.on("click", ()=>{zog("yes");});
PARAMETERS - accepts ZIM DUO - regular parameters or a single configuration object
** one parameter for all padding
** two parameters for left/right and top/bottom
** four parameters for left/top/right/bottom with any blank to receive default 20
padding - (default 20) how many pixels to expand bounds
paddingV - (default null) the vertical padding (making padding for horizontal)
paddingRight - (default null) the right padding - if set then padding parameter is the leftPadding
paddingBottom - (default null) the bottom padding - if set then paddingV parameter is the paddingTop
RETURNS obj for chaining
CLOSE ▲PAGE ▤CODE ▤BITS
setSwipe
zim DisplayObject method
DESCRIPTION
Sets whether we want to swipe an object or not using ZIM Swipe.
Recursively sets children to same setting.
EXAMPLE
circle.setSwipe();
PARAMETERS
swipe - (default true) set to false to not swipe object
RETURNS obj for chaining
CLOSE ▲PAGE ▤CODE ▤
setMask
zim DisplayObject method
DESCRIPTION
Specifies a mask for an object - the object can be any display object.
The mask can be a ZIM (or CreateJS) Shape or a ZIM Rectangle, Circle, Triangle or Blob.
Masking must be done with a Shape and the ZIM shapes are actually containers with Shape objects in them.
So setMask() takes care of all the arrangements and updates the mask when using the following ZIM features:
drag(), animate(), gesture(), transform() and using the Bezier curves, etc. with Blob.
NOTE
to skew and rotate a mask, put the mask in a Container - then skew the mask and rotate the container.
That works better with skew anyway as rotation of a skewed object changes the skew.
NOTE
a Bitmap can be used for masking using the ZIM AlphaEffect
See https://zimjs.com/docs.html?item=AlphaEffectNOTE
the mask you pass in can still be seen but you can set its alpha to 0
just watch, if you want to interact with the mask it cannot have 0 alpha
unless you provide a hit area with expand() for instance (use 0 for padding)
You can also set the alpha to .01
NOTE
before ZIM 6.7.1, setMask could not be chained - but now it can
EXAMPLE
const rect = new Rectangle(200, 100, clear)
.center();
var label = new Label("BIG", 200, null, white)
.center()
.setMask(rect);
NOTE
to drag something, the alpha cannot be 0
so we can use expand(rect, 0) to assign a hit area
then we can drag even if the alpha is 0 (or set the alpha to .01)
EXAMPLE
const label = new Label("BIG", 200, null, white).center();
const rect = new Rectangle(200, 100, black)
.expand(0)
.center()
.alp(0)
.drag();
label.setMask(rect);
NOTE
animate(), drag(), gesture() and transform() work specially with zim shapes to make this work
otherwise, if you want to reposition your mask then set the dynamic parameter to true
or use a zim.Shape() or createjs.Shape directly to avoid this issue
EXAMPLE
// masking with a Blob
const image = new Pic("pic.jpg").centerReg();
const blob = new Blob({color:faint}).center(); // this is draggable by default
image.setMask(blob);
PARAMETERS supports DUO - parameters or single object with properties below
mask - the object whose shape will be the mask
dynamic - (default false) set to true if mask is being moved
Blobs and shapes with drag(), transform(), gesture() and animate() will auto set dynamic to true if dynamic parameter is left empty
Setting dynamic to false for these will remain with a setting of dynamic false and the mask will not move once set
NOTE
use obj.setMask(null) to clear the mask
RETURNS the object for chaining
Older versions returned the mask shape - the mask shape can now be accessed by obj.zimMask or mask.zimMask
CLOSE ▲PAGE ▤CODE ▤BITS VIDS
outline
zim DisplayObject method
DESCRIPTION
For testing purposes.
Draws a rectangle around the bounds of obj (adds rectangle to the objects parent).
Draws a cross at the origin of the object (0,0) where content will be placed.
Draws a circle at the registration point of the object (where it will be placed in its container).
These three things could be in completely different places ;-)
NOTE
warning - the outline is added to the object's container so this can affect the container's numChildren, etc.
NOTE
will not subsequently be resized unless called again in Ticker, pressmove event, etc.
ZIM could update this outline automatically in drag and animate
but since the outline() is used for testing, it is not a good idea to waste processing
EXAMPLE
const circle = new Circle(50, red);
circle.center();
// show registration and origin at center and bounding box around outside
circle.outline();
// When applying outline() in a loop - loop in reverse
// as outlines are added to the object's container
const tile = new Tile(new Rectangle(), 5, 4, 10, 10).center();
tile.loop(item=>{
item.outline();
}, true); // reverse loop
PARAMETERS supports DUO - parameters or single object with properties below
color - (default brown) the color of the outline
size - (default 2) the stroke size of the outline
boundsOnly - (default false) set to true to see only rectangle bounds
PROPERTIES
adds a ZIMoutlineShape and ZIMoutlineShapeC to object
adds an outlineToggled read only property that is true if showing and false if not showing outline
METHODS
adds an outlineToggle(state) method to the object that toggles the outline when called
or can pass in true to show outline or false to not show outline
note - method does not update the stage
returns object for chaining
RETURNS the obj for chaining;
CLOSE ▲PAGE ▤CODE ▤BITS VIDS
blendmodes
zim DisplayObject method
DESCRIPTION
For testing purposes.
Cycles through blendmode (composite operation) settings.
Click the object to toggle the cycling.
SEE: ble() for modes and how to set the blendmode
EXAMPLE
new Rectangle(W, H, red).addTo();
new Circle(200, blue).blendmodes(); // will cycle through blend modes
PARAMETERS
time - (default 1) seconds to see each blendmode
basic - (default true) set to false to include extra compositions like source-over, destination-out, xor, etc.
RETURNS the obj for chaining;
CLOSE ▲PAGE ▤CODE ▤
STYLE
zim constant and static Class
Also GLOBALSTYLE zim constant
DESCRIPTION
STYLE can be used to set any parameter on a DisplayObject and many of the Controls.
For instance: Circle, Blob, Button, Pane, Bitmap, Sprite, Tile, Pen, Emitter, Scroller, etc.
These are applied at the time the objects are made.
They are cascading with each level overriding the previous level:
1. GENERAL: any style can be specified in general
corner:30 will make all corners default to 30
2. TYPE: styles for object type can be set to override the general styles
Button:{corner:0} will make all button corners default to 0
3. GROUP: styles for a group can be set to override the type styles
homePage:{corner:20} will make all objects of that group default to 20
4. OBJECT: styles applied as parameters to the object override all other styles
new Button({corner:40}) will make this button have a corner of 40
See: https://zimjs.com/style.html for an example
And: https://zimjs.com/test/styles.html for Control Styles
NOTE
As of ZIM 018, GLOBALSTYLE has been added.
GLOBALSTYLE can be used like STYLE and any styles in GLOBALSTYLE will be added to STYLE.
GLOBALSTYLE is only active after it is set and it can be cleared with GLOBALSTYLE = {} or null.
GLOBALSTYLE properties that are the same as STYLE properties will be overwritten by STYLE properties
including all of type and group styles, ie. if both have Button styles only the STYLE Button styles will be applied.
GLOBALSTYLE makes it easier to keep common styles across multiple specific STYLE changes.
NOTE
As of ZIM Cat, a Style class has been added with the static methods to manage styles.
STYLE is an object so all of these are just a couple lines to make it easier to update the object.
These include methods such as clear(), add(), remember(), addType(), addGroup(), etc.
See the Style entry down below for a complete listing and description.
NOTE
As of ZIM Cat 03, Direct Object styles are supported - adding DisplayObjects to a type {} is no longer required.
STYLE = {Button:{width:500}} // will be automatically converted to STYLE = {type:{Button:{width:500}}}
NOTE
As of ZIM ZIM 01, Direct Group styles are supported - adding a group to a group {} is no longer required.
The group must start with a lowercase letter.
STYLE = {big:{width:500}} // will be automatically converted to STYLE = {group:{big:{width:500}}}
NOTE
As of ZIM 016, group styles for an object will be used even if style for the object is set to false
this will ignore all styles except those made by a group
EXAMPLE
STYLE = {
corner:20,
backgroundColor:pink,
type:{
Button:{width:{min:100, max:500}, corner:0, centerReg:true, move:{y:series(-150, -50, 50, 150)}},
Dial:{add:true, x:800, y:600, backgroundColor:red, scale:2, outline:true},
Pane:{corner:IGNORE, color:white, draggable:true, width:300, label:"HI!"},
ProgressBar:{add:true, x:200, y:600, barType:"rectangle", transform:true},
Tabs:{add:true, x:100, y:100}
},
group:{
homePage:{corner:30}
}
}
new Button(); // will have a corner of 0 and be pink
new Button({group:"homePage"}); // will have a corner of 30 and be pink
new Button({corner:10, group:"homePage"}); // will have a corner of 10 and be pink
new Button({corner:IGNORE}) // will have a corner of its default 20 and be pink
new Button({style:false}).pos(700,100); // will have original default styles
new Dial(); // will be red and scaled twice as big and have an outline
new Tabs(); // will have a corner of 20 and selection will be pink
var p = new ProgressBar({corner:15}); // will be a bar with transform tools, corner 15
p.percent = 25;
new Pane().show(); // will ignore corner 30 and use its original 20 - it will say HI! in white and be draggable
EXAMPLE
// Lazy Objects - as of ZIM Cat 03
STYLE = {
Circle:{color:red} // all circles made from now on are red
}
// This will be automatically converted by ZIM to:
STYLE = {
type:{
Circle:{color:red}
}
}
Style.add({Circle:{color:red}}); // Lazy Objects with Style would do the same
Style.addType("Circle",{color:red}); // the traditional Style way also works
new Circle(50).center();
EXAMPLE
// Lazy Groups - as of ZIM ZIM 01
// note: these must be lowercase so not confused with Lazy Objects
STYLE = {
alert:{color:red} // all objects with group alert made from now on are red
}
// This will be automatically converted by ZIM to:
STYLE = {
group:{
alert:{color:red}
}
}
Style.add({alert:{color:red}}); // Lazy Groups with Style would do the same
Style.addGroup("alert",{color:red}); // the traditional Style way also works
new Circle({group:"alert"}).center();
EXAMPLE
// using once to run a STYLE on only the next object
STYLE = {color:red, once:true}
new Circle().center(); // this will be red
new Circle().center().mov(20); // this will be black
EXAMPLE
STYLE = {
borderColor:dark,
borderWidth:5,
Rectangle:{
// color:red,
color:[red, pink, purple], // pick a random color from here
centerReg:true,
animate:{props:{rotation:360}, time:.5, ease:"linear", loop:true},
move:{x:series(-200, 0, 200)}
}
}
// make three spinning rectangles
loop(3, ()=>{new Rectangle();});
EXAMPLE
// this makes all objects be cached at their width and height
STYLE = {cache:true}
// specify width and height for any Label
STYLE = {
Label:{
cache:{width:20, height:20} // or also pass in x and y
}
}
EXAMPLE
// have Circle ignore red but use percent - groupOnly
STYLE = {color:red, wonder:{percent:50}};
new Circle({style:false, group:"wonder"}).center();
EXAMPLE
GLOBALSTYLE = {font:"courier"};
STYLE = {size:50}
new Label("hello").center(); // courier and size 50
STYLE = {size:20}
new Label("goodbye").center().mov(0,50); // courier and size 20
STYLE = {font:"lidia", size:30}
new Label("ciao").center().mov(0,150); // lucidia and size 30
STYLE = {size:20}
new Label("bella").center().mov(0,180); // courier and size 20
GLOBALSTYLE = null;
new Label("greets").center().mov(0,-100); // default font size 20
GLOBALSTYLE = {Button:{corner:0}}; // can reset a GLOBALSTYLE
STYLE = {font:"courier"};
new Button().pos(100,100,RIGHT,BOTTOM); // courier with 0 corner
STYLE = {Button:{font:"courier"}}; // this will override all Button styles in GLOBALSTYLE
new Button().pos(100,100,RIGHT,BOTTOM); // courier with default corner
EXAMPLE
// Note: these commands are on the Style class not STYLE - but they operate on STYLE
// Also remember that ZIM STYLE only gets applied to new objects
// changing a STYLE will not change objects already created - this is different than CSS
// add a general color red style overwriting any previous color setting
Style.add({color:red});
// remove the general style for color
Style.remove("color");
// add styles for a Dial - overwriting all previous Dial styles
Style.addType("Dial", {useTicks:false, backgroundColor:yellow});
// remember current style using a "default" id
Style.remember();
// new Dials will use ticks and not be yellow
Style.addType("Dial", {useTicks:true});
// bring back the remembered styles so new Dials will have no ticks and be yellow
Style.recall();
// remember current STYLE to an id
Style.remember("myID");
// add styles for a group (existing objects are not changed - new ones will be)
Style.addGroup("big", {size:100});
the STYLE at the time myID was remembered will be active from now on
Style.recall("myID");
TRANSFORM STYLES
Transformations can also be applied (all are numbers - visible is a Boolean):
x, y, rotation, alpha, scale, scaleX, scaleY, regX, regY, skewX, skewY, visible
a bounds style has a value of {x:Number, y:Number, width:Number, height:Number}
where x and y are optional
RANDOM, RANGES, AND SERIES STYLES
Any property value can be a ZIM VEE value to make use of ZIM Pick see https://zimjs.com/docs.html?item=Pick
color:[red, green, blue] will pick a random color for each object for which the style is applied
x:series(100,200,300) will place subsequent objects at these locations
width:{min:100, max:500} will make objects with a width within this range
corner:{noPick:[0,40,0,40]}; will set corners - note we have to noPick this otherwise it would pick a number from the array for the corner value
See Docs on ZIM Pick() and ZIM series() for more information
Use the delayPick:true style to pass a PICK object to a control
See: https://zimjs.com/explore/circleArcs.html
WARNING - if applying a ZIM VEE value for a property in the general style scope
it will be activated for every object made even if that object does not have that property.
This will affect a series for instance. If three Sliders with useLabels turned on are made
and the STYLE = {max:series(8,9,10)} this will not work as expected
as the labels trigger the series steps as well.
So use STYLE = {Slider:{max:series(8,9,10)}} instead so the series triggers only for Slider objects.
ONCE
Set a once property to true to run the STYLE setting on only the next object made.
Once will delete the STYLE after the next object is made
regardless of the whether the style is applied.
STYLE = {color:red, once:true}
new Circle().center(); // this will be red
new Circle().center().mov(20); // this will be black
Set a once property to a type such as "Label" and the STYLE will be cleared after a label has been made
Note: some objects like an Arrow is made from a Button which has a label so this sometimes can be tricky.
If it does not work, just turn the STYLE = {} or Style.clear() manually.
FUNCTION STYLES
The following functions have been added:
addTo, loc, pos, center, centerReg, reg, transform, drag, gesture,
tap, change, hold, outline, bounds, mov, animate, wiggle, expand, cache, and mouse
Values of true will give default functionality for all but tap, change, mov, animate and wiggle
ZIM DUO configuration objects can be set as a value for any of these
example: drag:true; or drag:{onTop:false}
For animate and wiggle, [] can be put around multiple configuration objects
to wiggle in the x and y for instance or run multiple animate calls on the object
The tap, change and hold events are only what function to call - no extra parameters are available
They can be turned off with noTap, noChange and noHold styles.
Note: ZIM will run faster if non-interactive objects have their noMouse set.
CONVENIENCE STYLES
add:true - has been provided to add to the stage (use addTo for other containers)
move:{x:value, y:value} or move:x - mirrors the mov Function style (just adding the e)
pos: has corner convenience values: "left", "right", "top", "bottom", "rightbottom" or "bottomright", "center" and "centerReg"
blendMode:"difference", etc. see ble()
cursor:true for pointer or use any CSS cursor type. Gets passed into cur() for the object
shadow:{color:value, offsetX:value, offsetY:value, blur:value} to apply a shadow
uppercase:true - to set text to uppercase if object has a label or a text property
mouse:false - set the object to noMouse() - no point in ever setting this to true as true is the default
visible:false - visible false
style:false - will turn off all styles for the selector
EXCLUSION
A value of IGNORE can be used to exclude any earlier styles and return to the original default.
IGNORE is a ZIM global variable.
Setting style:false will exclude the object from all styles
All DisplayObjects have a style parameter (default true). Set to false to ignore styles.
GROUPS
All DisplayObjects have a group parameter.
This parameter accepts a string or a comma delimited string of multiple groups.
The group of components can then be targeted in the Group section of STYLE
or as of ZIM ZIM 01, just the Lazy Group can be used to put just the group name (must start with lowercase letter)
A group can contain just one component and act like an ID in CSS.
INHERIT
Objects can inherit styles from their parent
Eg. setting a color font property on List will pass that to Tabs which pass it to Button which passes it to Label
This was initially set up manually but a new inherit parameter was created for a better system
If any styles are not being applied as expected or as desired, let us know at https://forum.zimjs.com and we can adjust!
The inherit property on the Components can be used to pass an object literal of styles to the component directly as well
STYLES FOR CUSTOM CLASSES
EXAMPLE
// 1. collect parameters: style, group, inherit
// 2. after calling super constructor add these:
this.type = "Classname";
this.group = group;
var DS = style===false?{}:zim.getStyle(this.type, this.group, inherit);
// 3. collect parameters like so:
if (radius==null) radius = DS.radius!=null?DS.radius:100; // where 100 is default
// 4. call styleTransforms at bottom of class:
if (style!==false) zim.styleTransforms(this, DS);
// 5. use styles in your app code:
STYLE = {
Classname:{
radius:200
}
}
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
Style() - ZIM class
Style provides static methods (on the class directly) to make changes to STYLE
These are very small - the techniques are provided as a comparison
Note: these affect only new objects - objects already created will not be changed
Style.clear() - clears the STYLE
same as: STYLE = {};
Style.clearTypes() - clears the types
same as: delete STYLE.types;
Style.clearGroups() - clears the groups
same as: delete STYLE.groups
Style.remembered - property for holding remembered styles
same as: remembered = {};
Style.remember(id) - stores a copy of the current style in memory at an id or "default"
same as: remembered[id||"default"] = zim.copy(STYLE); // makes a copy and clones cloneable objects
Style.clearRemembered(id) - clears all remembered styles
same as: delete remembered[id||"default"];
Style.recall(id) - sets the current style to a remembered STYLE
same as: STYLE = remembered[id];
Style.add(obj) - adds general styles in form {newStile:val, newStyle2:value}
same as: STYLE.newStyle = val; STYLE.newStyle2 = val;
can also pass in Lazy Object style: Style.add({Object:{newStyle:value}});
or use Style.addType() below
Style.addType(typeName, obj) - adds a type along with its styles - overwrites the same type
same as: STYLE.type.typeName = obj;
Style.addGroup(groupName, obj) - adds a group along with its styles - overwrites the same group
same as: STYLE.group.groupName = obj;
Style.remove(styleName) - removes a single general style specified as a string - same as delete STYLE.styleName
same as: delete STYLE.styleName;
Style.removeType(typeName) - removes a type as string
same as: delete STYLE.type.typeName
Style.removeGroup(groupName) - removes a group as a string
same as: delete STYLE.group.groupName
CLOSE ▲PAGE ▤CODE ▤VIDS
PATH
zim global variable
DESCRIPTION
PATH is used by lazy-loaded assets (not using Frame assets parameter or loadAssets() method).
This will be set by default to the latest path parameter in Frame or in loadAssets().
NOTE
if an lazy-loaded asset has a path in it (as in a /) then the PATH will be ignored.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// inside a ZIM Frame where no assets or path are provided:
new Pic("image.png").center(); // will look in local directory
new Pic("images/image.png").center(); // will look in images/ directory
PATH = "assets/";
new Pic("image.png").center(); // will look in assets/ directory
new Pic("sound.mp3").play(); // will look in assets/ directory
new Pic("test/image.png").center(); // will look in test/ directory
EXAMPLE
// inside a ZIM Frame with assets parameter of "image.png" and path parameter of "assets/"
new Pic("image.png").center(); // will look in the assets/ directory
new Pic("other.png").center(); // will look in the assets/ directory
PATH = null;
new Pic("image.png").center(); // will look in assets/ directory
new Pic("other.png").center(); // will look in local directory
const load = F.loadAssets("test.png", "test/");
load.on("complete", ()=>{
new Pic("test.png").center(); // will look in test/ directory
S.update();
});
new Pic("new.png").center(); // will look in test/ directory
TIME
zim global variable
DESCRIPTION
Set to "seconds" or "s" (default) or to "milliseconds" or "ms" to adjust how time is used in ZIM
This will affect all time input in functions such as:
animate()
wiggle()
timeout()
interval()
Sprite()
Emitter()
and various minor settings in
Swiper(), Tip(), Pen(), Marquee(), Button(), ProgressBar(), Stepper(), Pages(), Accessibility(), Frame()
animate(), timeout() and interval()
also have a timeUnit parameter that will override the TIME setting
NOTE
before ZIM Cat, all time was in milliseconds.
As of ZIM Cat, time defaults to seconds.
This was primarily to make animation times a little simpler for coders, especially youth
It also matches the units of industry animate engines such as GreenSock
Once animate() was adjusted, it made sense to change globally
The one question was timeout and interval which is based on JS setTimeout and setInterval
The order of the parameters are already switched (and other features are added)
so a simpler time adds additional incentive to use ZIM timeout and interval
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// default time is in seconds
new Circle().center().animate({x:0}, 2); // in 2 seconds
TIME = "milliseconds"; // go back to ms as in pre ZIM Cat.
new Circle().center().animate({x:W}, 2000); // 2000 ms
new Circle().center().animate({
props:{y:0},
time:2, // back to 2 seconds because timeUnit override
timeUnit:"seconds"
});
TIMECHECK
zim global variable
DESCRIPTION
Check to see if time is in right units - default false (false as of ZIM Cat 04)
logs a warning if ((TIME=="seconds" && time>10) || (TIME=="milliseconds" && time<9))
Set TIMECHECK = true to turn on check if desired
for instance when converting an old file to ZIM Cat and want to check for milliseconds
NOTE
as of ZIM Cat - time is in seconds rather than milliseconds
the TIMECHECK helps catch any conversion issues
See also the TIME constant if milliseconds is preferred
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// default time is in seconds
// setting TIMECHECK to true will test for any time over 10 as that may be ms
TIMECHECK = true;
new Circle().center().wiggle("x", 100,200, 2000, 4000); // will give warning in console about time not being in ms
DIR
zim global variable
DESCRIPTION
Sets the direction to "ltr" or "rtl" (left-to-right or right-to-left)
This means the using START and END constants will affect certain positions and alignments as follows:
For pos():
horizontal will be LEFT for START if DIR is "ltr" and RIGHT if DIR is "rtl"
horizontal will be RIGHT for END if DIR is "ltr" and LEFT if DIR is "rtl"
For Label(), LabelLetters(), List()
align will be LEFT for START if DIR is "ltr" and RIGHT if DIR is "rtl"
align will be RIGHT for END if DIR is "ltr" and LEFT if DIR is "rtl"
for LabelLetters, lineAlign is affected rather than align
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
DIR = "rtl";
new Circle().pos(100,0,START,TOP); // will pos 100 from the right
EXAMPLE
DIR = "rtl";
new Label({
text:"Will this wind be so mighty as to lay low the mountains of the earth?",
labelWidth:200,
align:START
}).center(); // will align the text to the right and then center label
SEEDRAND
zim global variable
DESCRIPTION
WARNING - currently, this does not work - see seedRandom() in CODE module.
If set, the ZIM rand() function will be seeded with its value.
This means that rand() will repeat in order its random results.
See also the seed parameter of rand() to customize which rand() calls repeat.
See also SEEDRANDCOUNT to change the seed order - for instance set to 0 to start over.
This allows, for instance, a generative art piece to be the same for a certain user.
Or in conjunction with SEEDRANDCOUNT lets a player replay a same random game level.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
SEEDRAND = 20;
zog(rand(10,100)); // each time the app is run, this will be the same random number between 10 and 100
zog(rand(10,100)); // this will probably be a different random number than the first - but the same each time
zog(rand()); // and this will be the same random number between 0 and 1 not including 1.
EXAMPLE
// Remember the seed for a user with localStorage (like a cookie)
SEEDRAND = rand(100000000);
if (localStorage) {
if (localStorage.seed) SEEDRAND = localStorage.seed;
else localStorage.seed = SEEDRAND;
}
new Circle(100, [red, green, blue]).center();
// the user will always have the same random color
// unless no localStorage or localStorage is cleared
SEEDRANDCOUNT = 0; // or SEEDRANDCOUNT--;
// below, will make another circle the same color as the first
new Circle(100, [red, green, blue]).center().mov(0,300);
SEEDRANDCOUNT
zim global variable
DESCRIPTION
WARNING - currently, this does not work - see seedRandom() in CODE module.
but there is no equivilant to SEEDRANDOMCOUNT yet - we are working on it.
The current order number used for rand() if SEEDRAND is set or the rand() seedRand parameter is set
This starts at 0 and increases each time rand() is used internally or in the app.
See also SEEDRAND and the seed parameter of rand().
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
SEEDRAND = 10000;
zog(rand(100)); // a first random number
zog(rand(100)); // a second random number
SEEDRANDCOUNT = 0;
zog(rand(100)); // the first random number again
zog(rand(100)); // the second random number again
SEEDRANDCOUNT--;
zog(rand(100)); // the second random number again
SEEDRAND = null;
zog(rand(100)); // an unseeded random number
SEEDRAND = 10000; // same seed as before
zog(rand(100)); // a third random number (as SEEDRANDCOUNT was not changed)
SEEDRANDCOUNT = 1;
zog(rand(100)); // the second random number again (index 1)
SEEDRAND = 200;
zog(rand(100)); // a new random number but at index 2 as SEEDRANDCOUNT does NOT reset when SEEDRAND changes
ANIMATE
zim global variable
DESCRIPTION
Set to false to stop animate() calls from working.
Handy for testing your app so you do not have to wait for animations every time!
To animate things in you can place everything in their final positions
and then set the "from" parameter to true to animate from starting positions
like x or y offstage, scale or alpha of 0, etc.
Then to avoid waiting for animations to complete, you can just set ANIMATE = false
and all your objects will be in their final locations and you don't wait for animations
When you are ready to run your animations for a final version, etc. just delete the line
or set ANIMATE to true.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
ANIMATE = false;
// without the line above, the circles will animate in
// we would have to wait for them every time we load the app
// sometimes animations are even longer and this can waste development time
// when we add the line above, the circles are on stage right away
// this is easier and safer than commenting out all your animations
const circle1 = new Circle(200, green);
circle1.center();
circle1.x -= 110;
circle1.animate({props:{alpha:0, scale:0}, time:.7, from:true});
const circle2 = new Circle(200, pink);
circle2.center();
circle2.x += 110;
circle2.animate({props:{alpha:0, scale:0}, time:.7, wait:.7, from:true});
OPTIMIZE
zim global variable
DESCRIPTION
A setting that relates to how S.update() is used by the components.
Default is false which means some components will update the stage automatically:
the Slider will update the stage so that you can see the knob slide;
the CheckBox and RadioButtons when checked will update the stage;
the Tabs change button colors and then update the stage;
closing of a Pane will update the stage
the Stepper also updates as does changing color of a button, label, etc.
However, concurrent S.update() calls can slow down mobile performance.
So if you are making content for mobile you should set OPTIMIZE = true;
Then you will have to S.update() in the change event handlers
but you were probably doing things in these events and updating anyway!
Just be careful - you might be testing a checkbox and it won't check...
So it takes some getting used to running in optimized mode.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// add this to the top of your script
OPTIMIZE = true;
const slider = new Slider();
slider.center();
// will not see the slider operate (aside from rolling over button)
// unless you call S.update() in the change event
slider.on("change", ()=>{
// do your code
S.update(); // now will see the slider operate
});
components affected by OPTIMIZE:
Label, Button, Checkbox, RadioButton, Pane, Stepper, Slider, Tabs
OPTIMIZE set to true also affects the ZIM Ticker
for functions like animate, drag, Scroller, Parallax
See zim.Ticker as you may have to set Ticker.update = true;
CLOSE ▲PAGE ▤CODE ▤
ACTIONEVENT
zim global variable
DESCRIPTION
a setting that specifies the event type to trigger many of the components
default is "mousedown" which is more responsive on mobile
setting the constant to anything else, will cause the components to use "click"
for instance, with the default settings, the following components will act on mousedown
CheckBox, RadioButtons, Pane, Stepper and Tabs
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// put this at the top of your code
ACTIONEVENT = "click";
new CheckBox().center();
// note it now operates on mouseup (click)
// the default ACTIONEVENT is mousedown
DEFAULTWIRE
zim global variable
DESCRIPTION
The default setting for wire() and wired() source input type (the input parameter).
wire will usually be used to wire a component to a DisplayObject
and components usually have a value or index property that is changing in a change event, for instance
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// put this at the top of your code
DEFAULTWIRE = "index";
const selector = new Selector(someTile).center();
new ColorPicker().center().wire(selector, "index");
// the ColorPicker has a value which would normally be the default for wire()
// but here we override this with the DEFAULTWIRE so the index is used instead
// alternatively, the input parameter could be set to "index"
// but perhaps there are many of these so the constant is provided for convenience
KEYFOCUS
zim global variable
DESCRIPTION
A global variable that stores the DisplayObjects that will receive keyboard focus.
This is a system for all DisplayObjects with keyboard controls (set to active).
Eligible DisplayObjects are:
Squiggle, Blob, Stepper, Slider, Dial, Tabs, ColorPicker, TextArea
The first eligible DisplayObject made will set KEYFOCUS to itself.
Anytime an eligible DisplayObject is used it sets KEYFOCUS to itself.
Eligable DisplayObjects have a keyFocus property that can be manually set.
There is only one DisplayObject with key focus
so setting removes key focus from the last key focused component.
NOTE
if tabbing from one component to the next is needed, consider using ZIM Accessibility()
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const slider = new Slider().center().mov(0, -100);
const stepper = new Stepper().center().mov(0, 100);
// arrows will control the slider as it is the first component made
// if the stepper is used then arrows will control the stepper
// if stepper.keyFocus = true is set to start then the stepper would have key control
// alternatively, KEYFOCUS = stepper; would give the stepper key control
// setting KEYFOCUS = null; would make no component have key control (until the component is pressed)
POSREG
zim global variable
DESCRIPTION
A global variable that stores the desired setting for the reg parameter of pos()
pos() had traditionally positioned based on registration point
Now it defaults to position to the sides or the top and bottom
Setting POSREG = true; will make pos() default to positioning at the registration
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
POSREG = false; // default
new Rectangle().pos({x:10, right:true}); // will position right side 10 pixels from right
POSREG = true;
new Rectangle().pos({x:10, right:true}); // will position registration point 10 pixels from right
DRAGALL
zim global variable
DESCRIPTION
A global variable that stores the desired setting for the all parameter of drag()
By default, drag() will drag individual items in a container (currentTarget = false)
This is handy to quickly drag a bunch of things.
But some developers are used to dragging the whole container by default.
Setting DRAGALL=true will change drag calls to default to the whole container (currentTarget = true)
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
DRAGALL = false; // default
containerOfMonsters.drag(); // will drag individual monsters
DRAGALL = true;
containerOfMonsters.drag(); // will drag all the monsters at once
MOBILE
zim global variable
NOTE
for making mobile apps - see https://zimjs.com/mobile.html
and the PWA entry in Docs https://zimjs.com/docs.html?item=PWANOTE
this is the MOBILE constant not the mobile() function.
The mobile function detects if your app is on mobile
If searching for mobile press GO to go find mobile()
DESCRIPTION
A global variable that overrides ZIM mobile()
There are a half-dozen settings in ZIM that use ZIM mobile() to adjust default parameters
and various interactions - some examples are:
Squiggle() / Blob()
// handleSize = mobile?20:10;
// some interactions with controls
Button()
// toggleEvent = mobile?"mousedown":"click";
transform()
// customCursors = mobile?false:true;
// handleSize = mobile?20:10;
Accessibility()
// application = mobile?false:true;
Emitter()
// cache = mobile?false:true;
VR()
// swiper = mobile?false:true;
These settings will follow the value set by setting:
MOBILE = false;
or
MOBILE = true;
The default setting for MOBILE is "default";
If left as default, then ZIM uses the results from mobile();
WARNING: setting MOBILE will result in that value being returned from mobile();
To get an actual value from mobile() set MOBILE = "default" and run mobile();
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
MOBILE = false;
new Squiggle().center();
// will have smaller desktop Bezier handles even on mobile
// but will also set the Ticker framerate to 60, etc.
// unless MOBILE, at some point, is set back to default:
MOBILE = "default";
MOBILE = true;
new Blob().center();
// will have bigger mobile Bezier handles even on desktop
// but will also set the Ticker framerate to 30, etc.
// unless MOBILE, at some point, is set back to default:
MOBILE = "default";
Ticker
zim static class
DESCRIPTION
A static class to let ZIM use a requestAnimationFrame with a single stage update.
Used by ZIM animate, drag, parallax, scrollers, etc. but any function can be added.
If a function has been added to the Ticker queue then it will run in the order added
along with a single stage update after all functions in queue have run.
There are settings that can adjust when the Ticker updates so see Usage notes below.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const circle = new Circle(50, red).center();
Ticker.add(()=>{
circle.x++;
}); // can also pass in a specific stage
// to be able to remove the function:
Ticker.add(tryMe);
function tryMe() {circle.x++;}
Ticker.remove(tryMe);
// OR with function literal, use the return value
var tickerFunction = Ticker.add(()=>{circle.x++;});
Ticker.remove(tickerFunction);
// Check to see if a function is in the Ticker for that stage:
zog(Ticker.has(tickerFunction)); // false at the moment until added again
USAGE
if OPTIMIZE is true then the Ticker will not update the stage (it will still run functions)
however, OPTIMIZE can be overridden as follows (or with the always() method):
METHODS (static)
** As of ZIM 5.1.0, stage is optional and will default to the stage of first Frame object made
** WARNING - if you are in a second Frame you should pass stage as a parameter so it does not point to the first Frame's stage
** NOTE - if no stage is provided, the Ticker will update the stage of the zdf - ZIM default frame (usually the first Frame made)
Ticker.always(stage) - overrides OPTIMIZE and always runs an update for the stage even with no function in queue
Ticker.alwaysOff(stage) - stops an always Ticker for a stage
Ticker.add(function, stage) - adds the function to the Ticker queue for a given stage and returns the function that was added
the function will receive a CreateJS tick object with delta, time, timeStamp, etc. properties
Ticker.remove(function) - removes the function from the Ticker queue
Ticker.removeAll([stage]) - removes all functions from the Ticker queue (optionally per stage)
Ticker.isUpdating(stage) - returns true if Ticker is updating for the stage or false if not
Ticker.has(function, stage) - returns a Boolean true if function is currently added to the Ticker for the stage - or false if not currently added
Ticker.setFPS(60, 60) - (mobile, pc) default is set at natural requestAnimationFrame speed - this seems to be the smoothest
Note: as of ZIM Cat 04, mobile default speed is 60fps - previous to ZIM Cat 04 mobile default speed was 30fps
Ticker.getFPS() - get the current frames per second - using createjs.Ticker.getMeasuredFPS();
Ticker.setTimingMode(mode) - (default "raf") RAF uses RequestAnimationFrame without framerate synching - gets screen synch (smooth) and background throttling
set to "synched" for framerate synching - but will add some variance between updates
set to "timeout" for setTimeout synching to framerate - no screen synch or background throttling (if RAF is not supported falls back to this mode)
see CreateJS docs: https://www.createjs.com/docs/tweenjs/classes/Ticker.html
Ticker.raw(function) - a stand-alone direct call to RequestAnimationFrame for maximum speed
Example: https://zimjs.com/raw/
Does not use Dictionary lookup that the add() uses so provides ultimate speed for generative art, etc.
Returns function as id so can use Ticker.removeRaw(id)
function will receive a single parameter that is a DOMHighResTimeStamp
raw() does not automatically update the stage so put a S.update() in the function
raw() is for when you want to run one function much like the draw() in Processing, the animate() renderer in ThreeJS, etc.
add() is for when you want to run multiple functions with a single globally coordinated S.update()
Ticker.removeRaw(id) - remove the raw function based on the return value of the var id = Ticker.raw(function)
Ticker.dispose([stage]) - removes all functions from the queue removes and removes the list (optionally per stage)
PROPERTIES (static)
Ticker.update = true - overrides OPTIMIZE and forces an update if a function is in the queue
Ticker.update = false - forces no update regardless of OPTIMIZE
Ticker.update = null (default) - only updates if there is a function in queue and OPTIMIZE is false
Ticker.list - a ZIM Dictionary holding arrays with the functions in the Ticker queue for each stage
Ticker.list.objects - the array of stages in the Ticker
Ticker.list.values - the array holding an array of functions for each stage in the Ticker
Ticker.framerate - read only - use setFPS() to set
the Ticker is used internally by zim functions like animate(), drag(), wire(), Scroller(), Parallax()
you are welcome to add functions
USAGE
1. if you have your own ticker going, just set OPTIMIZE = true and don't worry about a thing
2. if you do not have your own ticker going but still want OPTIMIZE true to avoid components updating automatically,
then set OPTIMIZE = true and set Ticker.update = true
this will run a single update only when needed in zim Ticker for any zim functions
3. if you want a ticker with a single update going all the time (with OPTIMIZE true or false) then
run Ticker.always([stage]); // optionally per stage
4. if for some reason (can't think of any) you want no ticker updates for zim but want component updates
then set OPTIMIZE = false and then set Ticker.update = false
5. if you want maximum speed use Ticker.raw(function) which flows directly through to a RequestAnimationFrame
CLOSE ▲PAGE ▤CODE ▤VIDS
Pages
zim class - extends a zim.Container which extends a createjs.Container
DESCRIPTION
Pages handle going between pages.
Make a Pages object and add it to the stage.
All your pages from then on are added to and manipulated inside the Pages object.
Pages allows you to set the destination pages for swipe events.
Other events like buttons can call the go(page, direction) method.
Consider using HotSpots() to efficiently handle multiple buttons.
ZIM Cat introduces the ZIM Page() class that makes a Container with a background Rectangle.
This can be used as a page or any Container or other DisplayObject can be used as a page.
Transitions with ZIM Emitter were also added in ZIM Cat.
See https://zimjs.com/cat/page.html
ZIM Cat 03 intruduces the ZIM Arrow() class for an easy previous/next button system.
See https://zimjs.com/survey.html
ZIM 017 added continuous pages
See https://zimjs.com/017/continuous.html
As of ZIM ZIM 02 a GlobalManager will be added to handle Pages resize for cached transitions.
NOTE
if you have a TextArea, Tag or Loader on a page, ZIM will automatically add and remove it.
but if the TextArea, Tag or Loader is in a Container on the page then it must be manually added and removed.
See https://zimjs.com/test/textareapages.html for an example
NOTE
if using a ZIM List in Pages then update the list after transitioning:
pages.on("pagetransitioned", ()=>{
list.update();
});
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// make pages (these can have content added to them)
const page1 = new Page(W, H, blue);
new Label("Swipe sideways").center(page1);
const page2 = new Page(W, H, green, pink); // makes a gradient
const page3 = new Page(W, H, yellow);
new Pages([page1, page2, page3], "slide").addTo();
EXAMPLE
// PAGES WITH ARROWS
const page1 = new Page(W, H, green);
const page2 = new Page(W, H, purple, pink);
const page3 = new Page(W, H, yellow);
const pages = new Pages([page1, page2, page3], "bubbleZIM", 1).addTo();
new Arrow({pages:pages, direction:LEFT})
.rot(180)
.pos(50,50,LEFT,BOTTOM);
new Arrow({pages:pages}).pos(50,50,RIGHT,BOTTOM);
EXAMPLE
// CUSTOM SWIPING
const home = new Page(W, H, blue);
new Label("Swipe up and down").center(home);
const hide = new Page(W, H, green, pink);
const find = new Page(W, H, yellow);
// If swipe is not specified Pages will automatically swipe horizontally
// to the next page to the last page and backwards to the first page
// Here we override this with swipe arrays
const pages = new Pages({
pages:[
// imagine pages to the left, right, up and down
// swipe:["to page on left", "to page on right", etc.s]
{page:home, swipe:[null,"info",hide,find]},
{page:hide, swipe:[null,null,null,home]},
{page:find, swipe:[null,null,home,null]}
],
transition:"slide",
speed:1 // slower than usual for demonstration
}).addTo();
// handle any events inserted into the swipe arrays
pages.on("info", ()=>{zog("info requested")});
// handle any custom requirements when arriving at a page
// the event gives you the page object
// so add a name properties just make it easier to manage
home.name = "home";
hide.name = "hide";
find.name = "find";
pages.on("page", ()=>{
zog(pages.page.name); // now we know which page we are on
})
// you can manually go to pages as well
// we will make a little triangle to click:
const back = new Triangle({color:red});
back.center(find); // add triangle to find page
// not really supposed to add things to zim shapes
// they default to mouseChildren false
// we want to click on the back button
// so we have to set the mouseChildren of find to true
find.mouseChildren = true;
back.cur();
back.on("click", ()=>{pages.go(home, UP)});
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
pages - (default null) an array of pages or page objects - for example:
[home, hide] assuming home and hide Page or Container objects are made
an optional swipe array holds mappings to swipe events [RIGHT, LEFT, DOWN, UP] or ["right", "left", "down", "up"]
these could be pages to the left, right, top and bottom of the current page
or they can be call commands as strings that will dispatch events with that name
if no page has swipe data, then pages will swipe horizontally to each other by default with no wrap unless continuous is true
if swipe data is desired then use page object format:
[{page:home, swipe:[null,"info",hide,find]},{page:hide, swipe:[null,null,null,home]}]
set swipe:[] to not swipe the page
just setting one page with swipe:[] and leaving the rest blank, will mean no swiping
transition - (default "none") the type of transition "none", "reveal", "slide", "fade", "clear", "black", "white", "fan"
A ZIM Emitter() can also be passed in as a transition.
If the emitter has vertical or horizontal set to true then the emitter will sit above a slide transition
otherwise the emitter will sit above a fade transition.
The following built in emitter transitions are provided:
"pixelDark", "pixelLight", "pixelZIM",
"bubbleDark", "bubbleLight", "bubbleZIM",
"lineDark", "lineLight", "lineZIM"
"explodeDark" "explodeLight" "explodeZIM"
NOTE: if using pages that are smaller than the stage, use a Rectangle() as the holder
and the transition effects will be automatically masked by the rectangle.
speed - (default .2) speed in seconds of the transition if set (see also ZIM TIME constant)
transitionTable - (default "none") an array to override general transitions with following format:
[[fromPage, toPage, "transition", seconds(optional)], etc.]
holder - (default the default stage) where are we putting the pages (used for setting transition properties)
If using pages that are smaller than the stage
set the holder to a zim Rectangle with the desired dimensions and location
and the pages and transition effects will be masked by the shape of the rectangle.
The rectangle will have a mouse() added so it is interactive inside.
Set the color of the rectangle to clear if desired.
arrowDisableColor - (default grey) the disabled backgroundColor of the ZIM Arrow buttons
when there is no next/prev page for that button
set to clear to hide the Arrow button completely
false will not change the color but the button will not go anywhere when pressed
continuous - (default false) when default swiping is on, set to true to make pages continuous
so last page goes forward to first page and first page goes backwards to last page
METHODS
** these return the Pages object for chaining unless another value is specified
addPage(page, swipeArray) - lets you alternatively add pages after you create the object
removePage(page) - lets you remove a page (if on this page, call a go() first and remove on the page event)
setSwipeArray(page, swipeArray) - lets you set the swipe array for a page
go(newPage, direction, trans, speed) - lets you go to a page for events other than swipe events
newPage can be a reference to the page or an index matching the pages array order
direction is which way the newPage is relative to the current page
trans and speed are optional and will override any previously set transitions (speed in s)
resize() - call to resize transitions - not the pages themselves (use layouts)
pause() - pauses a transition before it starts (call from swipe event)
unpause() - unpauses a paused transition (unless another go() command is called)
puff(time) - adds all the pages behind the currentPage (adding time (s) will auto call settle)
settle() - removes all pages except the currentPage
setArrows(index) - disables or enables Arrow buttons held in arrows property - called automatically by Arrow buttons
disable() - stops swipe from activating and sets active = false
enable() - enables swipe action and sets active = true
dispose() - clears listeners and pages - returns true if successful
PROPERTIES
type - holds the class name as a String
speed - of transitions in seconds (see also ZIM TIME constant)
transitionTable - [[fromPage, toPage, "transition", seconds(optional)], etc.] overrides default transition
page - the current page object (read)
index - the index of the current page in pages (read)
pages - the page array - in format: [{page:page1, swipe:[leftPage, rightPage, upPage, downPage]},{page:page2, swipe:[leftPage, rightPage, upPage, downPage]}]
this may be adjusted if just an array of pages is passed which creates default swipe array
and will be adjusted for pages added or removed with addPage or removePage methods
lastPage - the last page before transition (read)
direction - direction of transition (read)
transitioning - read only Boolean as to whether the pages are transitioning
arrows - object with LEFT, RIGHT, DOWN, UP properties each holding an array of ZIM Arrow buttons if created
arrowDisableColor - the disable color of the Arrow buttons if created
active - default true, boolean to have swipes active (good for layered Pages objects)
swipe - the ZIM Swipe object used for pages (can tweak distance to percentage if rescaling)
ALSO
see ZIM Container for properties such as:
width, height, widthOnly, heightOnly, draggable, level, depth, group
blendMode, hue, saturation, brightness, contrast, etc.
ALSO
see the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.
EVENTS
Pages dispatches a "page" event when the page changes (to a page in the swipe array)
myPages.on("page",function(e){...})
with myPages.page being set to the new page (e.target.page)
and myPages.lastPage being set to the old page (e.target.lastPage)
myPages.direction gets the direction of the transition (e.target.direction)
if there is a string in the swipe array like "info"
then the Pages() object dispatches an event equivalent to the string
for the data example above, myPages.on("info",function(e){...});
would trigger when the home page is swiped to the left
Pages dispatches a "swipe" event before changing pages if swiped
you can then get pages.page, pages.nextPage and pages.direction
you can pause() if needed the transition to handle data, etc. and then unpause()
you do not need to handle going to another page when swiping - that is handled automatically
so you probably will not use the swipe event unless handling data between pages
Pages also dispatches a "pagetransitioned" event when a transition is complete
you will have the same properties available as with the page event
USAGE
the first page object is the start page
for the data above, swiping the home page down automatically goes to the hide page
if the home page is swiped up it automatically goes to the find page
you can add pages with the addPage() method
it will not show until you swipe or go to it - unless it was the first page added
1. if the holder is the stage then add the pages object to the stage
2. if the holder is another container then add pages object to the holder
and add the holder to the stage (read this twice to make sure you got it!)
in the second case, you will have to mask the holder so you do not see transitions
DO NOT add the pages to the stage or holder - let Pages do it for you
sometimes you need a page to be on the stage to operate on it
if this is the case, call puff() and make adjustments
call settle() when done - or pass in a time in ms to puff to auto settle after that time
you can define multiple pages objects add and remove pages objects as needed
CLOSE ▲PAGE ▤CODE ▤BITS VIDS
Arrow
zim class - extends a zim.Button which extends a zim.Container which extends a createjs.Container
DESCRIPTION
Makes an Button with an arrow backing of different designs - see types parameter - default is a Triangle.
By default it faces right - you can use .rot(180) to make it face left and .rot(-90) or .rot(90) for up and down.
WITH ZIM PAGES
If you pass in a ZIM Pages object then the Arrow is set to automatically go from page to page.
You must pass in a pages object to use and which direction you want to go.
The button will call the Pages go() method for whatever page listed in the pages array at the current page and direction
In other words, if page is page1 and the pages array says page1 swipes right to page2
then passing in RIGHT would make pressing the Arrow button to to page2.
The order of the pages in the pages pages array may be different than their swipe targets
although if just an array of pages is passed into Pages then the order will match.
If a page has no page listed for the direction then the Arrow will automatically remove itself.
This means that PageArrow for a direction will be registered with the Pages object
So that the button can be added back again if a new page needs it.
These can be embedded on the pages themselves or used in interface outside the pages.
SEE https://zimjs.com/survey for an example.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// a fat arrow with a stick - also "thin", "angle" (no stick) and "triangle" (default)
new Arrow({type:"thick"}).pos(30,30,RIGHT,BOTTOM).tap(next);
EXAMPLE
const page2 = new Page(W,H,orange);
const page3 = new Page(W,H,yellow);
const pages = new Pages([page1,page2,page3], "slide").addTo();
const left = new Arrow({
pages:pages,
direction:LEFT
}).rot(180).pos(50,50,LEFT,BOTTOM);
const right = new Arrow({
pages:pages,
direction:RIGHT
}).pos(50,50,RIGHT,BOTTOM);
PARAMETERS supports DUO - parameters or single object with properties below
backgroundColor - (default blue) the background color of the arrow (can STYLE anything Button style)
rollBackgroundColor - (default blue.lighten(.2)) the rollBackground color of the arrow
pages - (default null) a ZIM Pages object - if null then this is just an arrow button
if set to Pages object then will atomatically work to change pages - see also direction
direction - (default RIGHT) a direction RIGHT, LEFT, UP, DOWN to the page the button will lead to
type - (default "triangle") the type of the arrow as follows:
"triangle" is a triangle (default)
"thick" is a fat arrow
"thin" is a thin arrow
"angle" is an angle bracket
These are icons and rollIcons added to a ZIM Button with clear backgroundColor
Can also set backing and rollBacking properties, etc. with STYLE
newPage - (default null) specify a new page
by default the page will go to the next page if direction is RIGHT or DOWN
by default the page will go to the prev page if direction is LEFT or UP
trans - (default Pages default transition) the type of transition "none", "reveal", "slide", "fade", "clear", "black", "white", "fan"
A ZIM Emitter() can also be passed in as a transition.
If the emitter has vertical or horizontal set to true then the emitter will sit above a slide transition
otherwise the emitter will sit above a fade transition.
The following built in emitter transitions are provided:
"pixelDark", "pixelLight", "pixelZIM",
"bubbleDark", "bubbleLight", "bubbleZIM",
"lineDark", "lineLight", "lineZIM"
"explodeDark" "explodeLight" "explodeZIM"
speed - (default Pages default speed) speed in seconds of the transition if set
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly
METHODS
activate(state, offColor) - turn on or off the Arrow button with state true or false and a color for offColor
returns object for chaining
All ZIM Button methods
PROPERTIES
setDisabled - set to true or false in ZIM Pages "page" event function to override Arrow button setting
or just manually adjust the Pages pages swipe array - which is better as disables or enables swipe and Arrow button setting
All ZIM Button properties - including icon and rollIcon which access the ZIM Triangle for the arrow
ACTIONEVENT
This component is affected by the general ACTIONEVENT setting
The default is "mousedown" - if set to something else the component will act on click (press)
EVENTS
Arrow automatically adds a "mousedown" or "click" event to go to the desired page
The event will call the go() method of ZIM Pages
Additional "mousedown", "click" or other button events can be added if desired
CLOSE ▲PAGE ▤CODE ▤
HotSpot(obj, x, y, width, height, call, callOver, callOut, local, talk)
HotSpot
zim class - extends a zim.Container which extends a createjs.Container
DESCRIPTION
HotSpot adds an invisible button to a container object (often think of this as the page).
If you want multiple spots it is more efficient to use the HotSpots class above
which manages multiple HotSpot objects (otherwise you end up with multiple event functions).
The spot is a pixel rect with an alpha of .01 and then uses a hitArea of a backing shape.
The spot will get a cursor of "pointer".
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const hs = new HotSpot(S, 100, 100, 50, 50, myFunction);
function myFunction() {
zog("activation!");
}
// hs.show(); // uncomment this to see rectangle hotSpot
PARAMETERS supports DUO - parameters or single object with properties below
holder - container object in which to place the hotspot (stage for instance)
x, y, width and height - of the rectangle for the hotspot
call - the function to call when the spot is pressed
local - (default true) hotSpot rect is based on local coordinates of the container
use when the element scale independently from the stage
if set to false then you pass in global coordinates and hotSpot will convert them
talk - (default "hotspot") text for ZIM Accessibility screen reader
METHODS
show() - helps when creating the spot to see where it is
hide() - hides the hotspot
dispose() - removes the listener and the spot
PROPERTIES
type - holds the class name as a String
spot - the actual hotSpot object that gets added to the container can be accessed with the spot property
eg. hs.spot
ACTIONEVENT
This component is affected by the general ACTIONEVENT setting
The default is "mousedown" - if set to something else the component will act on click (press)
CLOSE ▲PAGE ▤CODE ▤VIDS
HotSpots
zim class - extends a zim.Container which extends a createjs.Container
DESCRIPTION
HotSpots allow you to create multiple hotSpot objects on multiple pages.
A hotSpot is an invisible click area (like an image map in HTML).
You can alternatively specify an object and it will turn that into a hotSpot.
HotSpots lets you control many or all of your interactions in one place.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// our first hotSpot will be a 50 pixel square at 100, 100
// then we will add hotSpots to these items as well
const circle = new Circle(60, red).center();
const button = new Button().pos(100,100,RIGHT,BOTTOM);
// make the hotSpots object
// these are all on the same page
// gets really handy when you have multiple pages with Pages
const hs = new HotSpots([
{page:S, rect:[100,100,50,50], call:()=>{zog("hot!");}},
{page:S, rect:circle, call:()=>{zog("circle!");}},
{page:S, rect:button, call:()=>{zog("button!");}},
]);
// hs.show(); // uncomment this to see rectangle hotSpots
PARAMETERS supports DUO - parameters or single object with properties below
spots (default null) - an array of hotspot data objects with the following format:
[{page:home, rect:[190,50,260,260], talk:"screen reader content", call:someFunction, callOver:optionalFunction, callOut:optionalFunction},
{page:home, rect:[70,405,500,150], talk:"screen reader content", call:someOtherFunction, callOver:optionalFunction, callOut:optionalFunction}]
the page should be a Container
the rect is the [left, right, width, height] of a rectangle relative to the stage
talk (optional) will provide text for screen reader if ZIM Accessibility() is turned on
call is the callback function to call when a hotSpot is clicked
callOver and callOut will add mouseover and mouseout event functions to the hotSpot
instead of a rect array you can pass an object that must have setBounds() set
[{page:home, rect:submitButton, call:function(){//code}}]
the hotSpot will then use the button position and bounds as the rectangle
note - in this case, HotSpots will actually add a mousedown or click event to the button
null can be left here and then hotSpots added with add()
local (default true) hotSpot rect is based on local coordinates of the container
use when the element scale independently from the stage
if set to false then you pass in global coordinates and hotSpot will convert them
mouseDowns (default false) stops mousedown events on a button that is used as a hotSpot
prevents users from activating a swipe on a button (when using ZIM Swipe)
METHODS
show() - shows the hotspots for testing during authoring time
hide() - hides the hotspots
add(page,rect,call) - can dynamically add hotSpots
remove(page,rect) - rect is optional - so can remove all spots on a page or by the rect
dispose() - removes listeners
PROPERTIES
type - holds the class name as a String
hotSpots - an array of HotSpot objects
ACTIONEVENT
This component is affected by the general ACTIONEVENT setting
The default is "mousedown" - if set to something else the component will act on click (press)
NOTE
the class does actually add rectangle shapes to your page
the spot is a pixel rect with an alpha of .01 and then uses a hitArea of a backing shape
this could have been done with "math" alone but rollover cursor would be a pain
the class creates HotSpot objects - see the class underneath this one
CLOSE ▲PAGE ▤CODE ▤VIDS
Guide Class
extends a zim.Container which extends a createjs.Container
DESCRIPTION
Guide shows a guideline to help layout assets with code.
Cursor x and y in pixels or percentage are shown along edges
as a distance from the guide.
You only need one guide per axis because you measure from the guide to your cursor.
Use the G key to toggle guide visibility.
Use the P key to toggle pixels and percent.
Make sure you remove the guide for your final version (dispose).
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// simple form for a vertical guide
// use the distance from the guide to your cursor to measure
// so you only need one vertical guide for horizontal measurement
const guide = new Guide();
// better to add guides to a GuideManager
const manager = new GuideManager();
manager.add(new Guide(stage));
manager.add(new Guide(stage, false));
// or with percent
// manager.add(new Guide(stage, true, false));
// manager.add(new Guide(stage, false, false));
// then you can remove all guides with
// manager.dispose();
// handy with guides on multiple Pages
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
obj - (default the default stage) object to add guide to for example a Container
vertical - (default true) set to false for horizontal guide
pixels - (default true unless Frame is in FULL mode) set to false to show percent
hideKey - (default G) key to press to hide guide
pixelKey - (default P) key to press to swap pixels and percent
METHODS
resize() - resizes the guide if the container size changes - not needed now with global manager
toggle(state - default null) - toggle() will show controls if they are hidden or hide controls if they are showing
alternatively, pass in true to show controls or false to hide controls
note - method does not update the stage
dispose() - removes keyboard event listeners and guide
PROPERTIES
type - holds the class name as a String
toggled - boolean - read only true if controls are showing or false if controls are hidden
pixels - boolean - set to true to change to pixels, false to go to percent
CLOSE ▲PAGE ▤CODE ▤
Grid
zim class - extends a zim.Container which extends a createjs.Container
DESCRIPTION
A Grid shows gridlines to help layout assets with code (pixels is default).
Cursor x and y percentage or pixels are shown along edges.
Use the G key to toggle grid visibility.
Use the P key to toggle pixels and percent.
Make sure you remove the grid for your final version (dispose).
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const grid = new Grid();
// better to add grids to a GridManager
const manager = new GridManager();
manager.add(new Grid());
// or with percent
// manager.add(new Grid(null, null, false));
// then you can remove all grids with
// grid.dispose();
// handy with guides on multiple Pages
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
obj - (default the default stage) the object to add grid to (for example a Container)
color - (default black) the color of the grid
pixels - (default true unless Frame is in FULL mode) set to false to show percent
hideKey - (default G) key to press to hide grid
pixelKey - (default P) key to press to swap percent and pixels
allowToggle - (default true) set to false to not allow grid to toggle between percent and pixels with key
cache - (default true) cache the grid
numbers - (default true) show numbers on grid
METHODS
resize() - resize the grid if the container changes size - not needed now with global manager
toggle(state - default null) - toggle() will show controls if they are hidden or hide controls if they are showing
alternatively, pass in true to show controls or false to hide controls
note - method does not update the stage
returns object for chaining
dispose() - clears keyboard events and grid
PROPERTIES
type - holds the class name as a String
grid - access to grid Container
numbersX - access to horizontal numbers
numbersY - access to vertical numbers
toggled - boolean - read only true if controls are showing or false if controls are hidden
pixels - boolean - set to true to change to pixels, false to go to percent
CLOSE ▲PAGE ▤CODE ▤BITS VIDS
Wrapper
zim class - extends a zim.Container which extends a createjs.Container
DESCRIPTION
A Wrapper wraps its content to the next row at a given width
The Wrapper is similar to the CSS Flexbox with the following:
ALIGNMENTS:
It has left, center/middle right then top, center/middle bottom alignments
for whole rows and columns and then for inside the rows and columns.
These may or may not be active depending on the wrapper type below
WRAPPER TYPES:
The types are spacing (default), spread, stretch, or column
A colSize is available for the column type
A rowSize is available that works with any of the above types
SETTINGS:
There are also flip, reverse, bottomFull and col/row void settings.
MARGINS:
ZIM display objects can have margins left, top, right, bottom
that will shift objects relatively inside the Wrapper
without affecting other objects in the wrapper.
WRAPPER WITH WINDOW AND LAYOUT
The Wrapper is resized automatically when added to a ZIM Window.
Set the Window resizeHandle parameter to true to let the user resize.
The Wrapper resizes and scales as a region in the ZIM Layout class.
The Window also resizes - so a Wrapper can go in a Window in a Layout object.
WRAPPER VS TILE
The Tile is locked in to rows and columns and does not wrap content
The Tile also has many responsive settings to squeeze, stretch, align, etc.
Consider the Wrapper like FlexBox perhaps Grid with ColSize set - and the Tile like a Table
WRAPPER VS LABEL
The Label can wrap text using the labelWidth/lineWidth parameters (they are the same).
The Wrapper is used to wrap objects - perhaps including a Label object.
See https://zimjs.com/ten/wrapper.htmlNOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const win = new Window({
width:500,
height:400,
titleBar:"Wrapper",
titleBarBackgroundColor:yellow,
scrollBarDrag:true,
fullSize:true,
resizeHandle:true,
backgroundColor:lighter,
padding:10
})
.center()
.add(new Wrapper({
items:[
new Circle(), new Rectangle(), new Triangle(),
new Circle(), new Rectangle(), new Triangle(),
new Circle(), new Rectangle(), new Triangle(),
new Circle(), new Rectangle(), new Triangle(),
new Circle(), new Rectangle(), new Triangle(),
new Circle(), new Rectangle(), new Triangle()
],
spacingH:10,
spacingV:10,
wrapperType:"spread"
}));
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports VEE - parameters marked with ZIM VEE mean a zim Pick() object or Pick Literal can be passed
Pick Literal formats: [1,3,2] - random; {min:10, max:20} - range; series(1,2,3) - order, function(){return result;} - function
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
items - (default null) - an Array of items (or a single item) to add to the wrapper - also see add() addAt() and remove() methods
the wrapper is a ZIM Container so any ZIM add and remove methods can be used and then a resize() method called
width - |ZIM VEE| (default 300) set to a width to wrap items at this width (see resize(w,h) method to change width)
spacingH - (default 0) a spacing between items - ignored if colSize is set
spacingH does not get ZIM VEE - the results are jiggly when wrapping
spacingV - |ZIM VEE| (default 0) a spacing between rows - ignored if rowSize is set
wrapperType - (default "spacing") changes how the wrapper lays out the items as follows:
"spacing" - places each item spaced at the spacingH from the next item
"spread" - places equal spacing around edges and items horizontally (min the spacingH)
"stretch" - places equal spacing between objects horizontally with no spacing at edges (min the spacingH)
"column" - uses colSize parameter to determine spacing (spacingH is ignored)
align - |ZIM VEE| (default LEFT) set to CENTER, MIDDLE, RIGHT
this aligns the whole row - see also alignInner for aligning inside columns
align:series(LEFT, RIGHT) will toggle rows aligning left and right
valign - |ZIM VEE| (default TOP) set to CENTER, MIDDLE, BOTTOM
this aligns the rows at the top, middle or bottom only when a height is provided (rare)
see also valignInner for vertical aligning within rows (common)
alignInner - |ZIM VEE| (default LEFT) set to CENTER, MIDDLE, RIGHT
aligns the items when colSize is set only - see also align for aligning whole rows horizontally
valignInner - |ZIM VEE| (default BOTTOM) set to TOP, CENTER, MIDDLE
aligns the items in vertically in their row (common) - see also valign for aligning whole rows vertically (rare)
flip - |ZIM VEE| (default false) set to true to flip the order of the rows
flip:series(false, true) would read left to right then right to left then left to right, etc.
reverse - |ZIM VEE| (default false) set to true to reverse all the items so the first is (probably) at the bottom right
bottomFull - |ZIM VEE| (default false) set to true to fill the Wrapper at the bottom
does not reverse but rather leaves potentially fewer items at the top
colSize - |ZIM VEE| (default null) set to number to hard code column width
this is ignored if the wrapperType is not set to "column"
use colSize:series(100, 200, 100, 400) to set specific sizes
this will also the only setting for which alignInner works
rowSize - |ZIM VEE| (default null) set to number to hard code row height
this ignores spacingV but can be used with any wrapperType
use a series(100, 200, 100, 400) to set specific sizes
height - (default null) does not really set the height of the wrapper
the height is always determined by the width and the items as they wrap
(both the width and height cannot be used together without scaling and the wrapper does not scale items)
the height will have no effect when the valign parameter is set to TOP (default)
The height will place the bottom of the wrapper at the height when the valign is BOTTOM
The height will place the wrapper in the middle of the height when the valign is CENTER/MIDDLE
Note: in the all cases the bounds will still be the bounds around the wrapper
just the positioning of the wrapper is changed.
This allows the wrapper to be placed at the bottom and grow to the top
or placed in the middle and grow from the middle
which would not be possible otherwise aside from repositioning after each resize
minSpreadNum - (default 2) spread would always center a single item on a row
and can look weird spreading two or even three final items
a wrapper with wrapperType:"spread" will spread items if there are at least minSpreadNum items
if there is less than minSpreadItems then it will align the items according to align
minStretchNum - (default 3) stretch would always center a single item on a row
and can look weird stretching two or even three final items
a wrapper with wrapperType:"stretch" will stretch items if there are at least minStretchNum items
if there is less than minStretchItems then it will align the items according to align
this will not stop the first line from stretching unless minStretchFirst parameter is set to false
percentVoidH - |ZIM VEE| (default 0) set a percent horizontal space between items default in center
offsetVoidH - |ZIM VEE| (default 0) set a percent (or negative percent) to offset the void from the center horizontally
percentVoidV - |ZIM VEE| (default 0) set a percent vertical space between rows default in center
offsetVoidV - |ZIM VEE| (default 0) set a percent (or negative percent) to offset the void from the center vertically
minStretchFirst - (default true) set to false to avoid stretching the first line if less than minStretchNum is set and met
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly
METHODS
add(items) - add an item or an array of items to the wrapper - will call a resize() - returns the wrapper for chaining
addAt(items, index) - insert an item or an array of items at an index - will call a resize() - returns the wrapper for chaining
remove(items) - removes an item or items (pass in an array) - will call a resize() - returns the wrapper for chaining
setProps(properties) - sets provided properties (as {prop:val, prop:val}) for each item
the values accept ZIM VEE - dynamic parameters - see ZIM Pick()
returns object for chaining
resize(width, height) - resize the wrapper passing an optional width and height - returns wrapper for chaining
most of the properties below resize the wrapper automatically
hasProp(property as String) - returns true if property exists on object else returns false
clone() - makes a copy of the Wrapper
dispose() - removes listeners and deletes object
ALSO
ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO
see the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.
PROPERTIES
type - holds the class name as a String
items - an array of the wrapper items
items2D - read only array of rows each containing an array of columns of items
** see the parameter for descriptions of the following
** setting each will resize the wrapper at the current width and height
** all these properties accept ZIM VEE (except spacingH) for instance: flip:series(false,true)
spacingH
spacingV
wrapperType
align
valign
alignInner
valignInner
flip
reverse
bottomFull
colSize
rowSize
percentVoidH
offsetVoidH
percentVoidV
offsetVoidV
ALSO
see ZIM Container for properties such as:
width, height, widthOnly, heightOnly, draggable, level, depth, group
blendMode, hue, saturation, brightness, contrast, etc.
ALSO
see the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.
CLOSE ▲PAGE ▤CODE ▤VIDS
Tile
zim class - extends a zim.Container which extends a createjs.Container
DESCRIPTION
Tile has two main uses:
1. ART
Creates a tile with an object for the columns and rows specified - a mirror effect is available too.
By default the object is cloned.
A ZIM VEE value can be passed to tile multiple types of objects
2. LAYOUT
Set the unique parameter to true to pass in an array of unique objects
** Pre ZIM Cat, a series() would be used with the count set if required and clone set to false to keep object events
Now this is handled by ZIM with the unique parameter, simplifying the process.
The array could be thumbnail pictures, interface bars, content sections on a page, etc.
Horizontal and vertical spacings can be set
Setting colSize and rowSize will override spacings and force grid dimensions
align and valign parameters can be used - or set with STYLE
setting a width or height will spread the items - and override the colSize and rowSize
In both dimensioned and non dimensioned modes,
the rows and columns can be squeezed together and aligned as a group
So a variety of layouts can be accommodated.
See: three videos on laying out with Tile
https://www.youtube.com/watch?v=J1dwD_wd_-U - components - using unique parameter
https://www.youtube.com/watch?v=pjWxhqSSdww - custom widths - series
https://www.youtube.com/watch?v=-eSVkCOshE8 - leader board example
See: https://zimjs.com/tile.html for a dynamic example
NOTE
ZIM Layout() is also available to layout content that is scaled into regions
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const circle = new Circle();
const tile = new Tile(circle, 20, 10).center();
EXAMPLE
// tile 10 rectangles spaced out across the stage
const tile = new Tile({obj:new Rectangle(), cols:10, spacingH:30, width:W*.9}).center();
EXAMPLE
// tile two rows with a Dial and a Slider in each
const tile = new Tile({
obj:[new Dial(), new Slider(), new Dial(), new Slider()],
unique:true, // as of ZIM Cat
cols:2, rows:2,
spacingH:30, spacingV:30,
valign:CENTER
}).center();
// use tile.getChildAt(0) to access first Dial - or:
tile.items[0].on("change", ()=>{zog("changing dial 1")});
// See next example if events are already on items
EXAMPLE
// Like the previous example but with events specified before Tile is made
// Using the change() method which is chainable because it returns the object
// (Do not chain an on() method for the event as it does not return the object)
const d1 = new Dial().change(()=>{zog("changing dial 1")});
const d2 = new Dial();
const s1 = new Slider();
const s2 = new Slider();
const tile = new Tile({
obj:[d1, s1, d2, s2],
// with unique true, it uses objects in order
// without picking randomly and without cloning
unique:true,
cols:2, rows:2,
spacingH:30, spacingV:30,
valign:CENTER
}).center();
// or after
s2.change(()=>{zog("changing slider 2")});
// set the regX and regY for every tile item be the center of the tile
const tile = new Tile(new Rectangle(10, 10, red), 20, 20, 5, 5).normalize("reg", CENTER).center();
// make the central tile items be bigger than the edges (by 1.5 times in center)
tile.loop(t=>{t.sca(1+t.ratio*.5);});
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports VEE - parameters marked with ZIM VEE mean a zim Pick() object or Pick Literal can be passed
Pick Literal formats: [1,3,2] - random; {min:10, max:20} - range; series(1,2,3) - order, function(){return result;} - function
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
obj - |ZIM VEE| (default new Circle()) the display object to tile
note: put rotated objects in a container (unless rotated 180 degrees) and tile the container
If obj is a String then the object will be turned into an asset(obj).centerReg({add:false}).clone() so a clone of the asset with id of obj.
If the unique parameter is set then an array of objects can be used here (ZIM VEE will be turned off)
If the obj is a ZIM VEE function (not array, object literal or series) then the Tile clone parameter will default to false
cols - (default 1 - if no cols and rows then 3) the columns to tile
rows - (default 1 - if no cols and rows then 3) the rows to tile
spacingH - |ZIM VEE| (default 0 - if no cols and rows then 3) a spacing between columns - ignored if colSize is set
spacingV - |ZIM VEE| (default 0 - if no cols and rows then 3) a spacing between rows - ignored if rowSize is set
unique - (default false) - set to true if tiling unique items like components with events set or objects with custom properties
1. this will turn off ZIM VEE for the obj parameter which will accept an array of unique objects
2. the count parameter will be set to the length of the array
3. and the clone parameter will be set to false
width - (default null) set to a width to spread items in rows evenly out to width (see resize() method)
colSize and mirrorH are ignored if width is set
height - (default null) set to a height to spread items in columns evenly out to height (see resize() method)
rowSize and mirrorV are ignored if height is set
squeezeH - (default false) how to handle positioning within rows
when width is not set:
false - will not compress tiles beyond max calculated width for column including spacingH
true - will treat all rows independently and fill spaces - align will align rows to widest row
when width is set:
false - will not compress past longest row including spacingH
true - will compress all rows - align will then align rows to widest row
"full" - will continue to compress always keeping each row to the width (may cause overlap)
squeezeV - (default "none") how to handle positioning within columns
when height is not set:
false - will not compress tiles beyond max calculated height for column including spacingV
true - will treat all columns independently and fill spaces - valign will align columns to highest row
when height is set:
false - will not compress past longest column including spacingV
true - will compress all columns - valign will then align columns to longest column
"full" - will continue to compress always keeping each column to the height
colSize - |ZIM VEE| (default item size) set to number to hard code column width (ignores spacing)
ignored if width is set
use a series(100, 200, 100, 400) to set specific sizes
if using in STYLE then set delayPick:true as well
rowSize - |ZIM VEE| (default item size) set to number to hard code row height (ignores spacing)
ignored if height is set
use a series(100, 200, 100, 400) to set specific sizes
if using in STYLE then set delayPick:true as well
align - |ZIM VEE (non-squeezed only)| (default LEFT) set to CENTER, MIDDLE, RIGHT
this is a basic align and may not work with rotated objects
add these to a container perhaps for best results
valign - |ZIM VEE (non-squeezed only)| (default TOP) set to CENTER, MIDDLE, "bottom"
count - (default cols*rows - obj array length if unique is true) optional total number of items to tile
if count is set to 0 then count is ignored and a warning message is provided in console
mirrorH - (default false) flip alternating objects horizontally (works with top left registration point)
mirrorV - (default false) flip alternating objects vertically (works with top left registration point)
snapToPixel - (default true) sets the stage to snapToPixelEnabled and snaps to pixels to avoid small gaps when Tile is repositioned
clone - (default true - or false if unique is true or false if obj is ZIM VEE function) set to false to prevent Tile from cloning objects
also see unique parameter
events - (default false) Boolean - set to true to receive change events from elements of Tile
this allows using one change event (or change() method) for a set of components in the Tile
exact - (default false) Boolean - set to true to exactly clone the obj rather than let ZIM VEE Pick values activate
scaleToH - |ZIM VEE| (default null) set to scale item in percentX - see ZIM scaleTo() - also see scaleToType
scaleToV - |ZIM VEE| (default null) |ZIM VEE| set to scale item in percentY - see ZIM scaleTo() - also see scaleToType
scaleToType - |ZIM VEE| (default FIT if scaleToH or scaleToV) |ZIM VEE| type of scaleTo() used when scaleToH or scaleToV is provided
this is applied once after Tile is made in a natural way - either making cols and row sizes based on items or colSize and rowSize
backgroundColor - |ZIM VEE| (default null) set this to add a background color (Rectangle) behind each item
the background rectangles are added first below all items then the items on top
the backgrounds property will be an array of the background rectangles
the items property will hold the actual items - but watch when looping the tile itself it will be any backdropColorRect, backdropRect, backgrounds, backings then items
** the background rectangles have their style turned off but styles can be applied to the group "background"
STYLE = {background:{corner:20, borderWidth:2, borderColor:purple}} will add only these styles to the backgrounds
backgroundPadding - (default 0) set the padding of the backgroundColor Rectangles - this will adjust the bounds of the Tile accordingly
backgroundPaddingH - (default backgroundPadding) set the horizontal padding of the backgroundColor Rectangles
backgroundPaddingV - (default backgroundPadding) set the vertical padding of the backgroundColor Rectangles
backing - |ZIM VEE| (default null) set this to clone a backing DisplayObject beneath all items
backing objects are not scaled and are placed based on align and valign
the backing objects are added as a set above the backgrounds (if there are backgrounds) and below the items
the backing objects have style turned off during cloning so style the backing ahead of time if desired
the backings property will be an array of backing objects
the items property will hold the actual items - but watch when looping the tile itself it will be any backdropColorRect, backdropRect, backgrounds, backings then items
backdropColor - (default null) will add a backdrop colored backdropColor underneath all tile objects
the backdrop will affect the bounds of the tile
** the backdrop will have its style turned off but style can be applied to the group "backdrop"
STYLE = {background:{corner:20, borderWidth:2, borderColor:purple}} will add only these styles to the backdrop
backdropPadding - (default spacingH) set the padding of the backdropColorRect - this will adjust the bounds of the Tile accordingly
backdropPaddingH - (default backdropPadding) set the horizontal padding of the backdropColorRect
backdropPaddingV - (default backdropPadding) set the vertical padding of the backdropColorRect
mat - (default null) a ZIM DisplayObject to be added above a backdrop and below any backgrounds, backings and items
the alignment of this will always be centered - it can have scaleTo() applied and be moved afterwards
the mat will not affect the bounds of the tile even if it is bigger than the tile
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly
METHODS
itemUnderPoint(x, y, ignoreSpacing) - gets the item under a global point - (within item's col and row dimensions)
** will not work properly with squeeze and gets original items - so not items that are moved
x and y are F.mouseX, F.mouseY for example.
ignoreSpacing defaults to true and is a bigger selection space if there is spacing (can also be set to HORIZONTAL or VERTICAL to ignore only one direction)
setProps(properties) - sets provided properties (as {prop:val, prop:val}) for each item
the values accept ZIM VEE - dynamic parameters - see ZIM Pick()
returns object for chaining
setSpacing(h,v) - set arrays of horizontal and vertical spacing
ZIM Tile() makes spacing arrays for horizontal and vertical spacing based on ZIM VEE calculations from the spacingH and spacingV parameters
to change spacing afterwards, new arrays can be provided to setSpacing()
the arrays must have col-1 and row-1 items - although h or v can be left null or undefined to keep existing spacing
remake(items, newSpacingH, newSpacingV, newCount) - pass in an array of items to tile - see items property for editing current list - returns tile for chaining
can also change rows and cols and remake()
optionally pass in new spacing parameters and/or a newCount
Note: if the items length is different than the previous items length then the count will be automatically made cols*rows - unless newCount is provided
resize(width, height) - resize the tile with new width and/or height if the width and/or height parameters were set - returns tile for chaining
hasProp(property as String) - returns true if property exists on object else returns false
clone(exact) - makes a copy with properties such as x, y, etc. also copied
exact (default false) ZIM VEE (Pick) values are active in clones unless exact is set to true
For instance, if a Tile is made with new Circle(20,[blue,green])
then its clone will have random blue or green circles that will differ from the original
If exact is set to true then the clone will the same colors as the original
dispose() - removes listeners and deletes object
ALSO
ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO
see the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.
PROPERTIES
type - holds the class name as a String
items - read only array of the original tile items - or use tile.getChildAt() or tile.loop(function (item) {})
items2D - read only array of rows each containing an array of columns of items
items2DCols - read only array of columns each containing array of rows of items
** the current properties work for equal column size and equal row size
** although the row and column size can be different
current ** - a read only array of the current order of tile items - if items have been scrambled
current2D ** - read only array the current order of rows each containing an array of columns of items
current2DCols ** - read only array the current order of columns each containing array of rows of items
tileNum - this property is added to each object in the tile to give its number in the tile
tileCol - this property is added to each object in the tile to give its column number in the tile
tileRow - this property is added to each object in the tile to give its row number in the tile
backgrounds - an array of ZIM Rectangle objects set by the backgroundColor parameter
backings - an array of DisplayObjects set by the backing parameter
backdrop - a ZIM Rectangle set by the backdropColor parameter
mat - a DisplayObject set by the mat parameter
These properties can be changed by calling remake()
items - an array of items the tile uses
modify this and pass in to remake(items) to update the Tile with new items
cannot modify count - count will become the length of the array passed to remake()
cols - number of columns - can modify - need to call remake() to see changes
rows - number of rows - can modify - need to call remake() to see changes
These properties can be changed by calling resize(width, height) - set width or height to 0 for no spreading
squeezeH - horizontal compression - can modify - need to call resize() to see changes
squeezeV - vertical compression - can modify - need to call resize() to see changes
align - (not with ZIM VEE) horizontal alignment - can modify - need to call resize() to see changes
valign - (not with ZIM VEE) vertical alignment - can modify - need to call resize() to see changes
mirrorH - horizontal mirroring - can modify - need to call resize() to see changes
mirrorV - vertical mirroring - can modify - need to call resize() to see changes
NOTE: spacingV and spacingH can be adjusted with setSpacing() method
ALSO
see ZIM Container for properties such as:
width, height, widthOnly, heightOnly, draggable, level, depth, group
blendMode, hue, saturation, brightness, contrast, etc.
ALSO
see the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.
EVENTS
dispatches a change event if items inside tile dispatch a change event
the change event object has an item property (e.item)
that refers to the item that caused the change event - for instance a Slider, Dial, etc.
note: the item is not the event object target - as that is the tile
CLOSE ▲PAGE ▤CODE ▤TOUR😊VIDS
Pack
zim class - extends a zim.Container which extends a createjs.Container
DESCRIPTION
Pack scales objects so they are packed within a width and height.
This means that some objects will scale more than others.
Pack works with the rectangular bounds of the objects.
The Pack will most likely not fit exactly in the dimensions provided
but it can be aligned or valigned within the dimensions and padding and backgroundColor set.
The dragOrder parameter can be set to true to allow objects to be sorted.
And the pack can be added to a TransformManager to remember the order on refresh.
There are lots of subtle options with the main ones described below:
FLATTEN
If flatten is true (default) then Pack will integrate any trailing items so the Pack is completely rectangular.
It may integrate at the start (default) or at the end - and it does so in two rows (or columns) to minify the effect.
The effect will be that these two rows or columns will have somewhat bigger items.
If flatten is false then the left over items can be aligned with lastAlign.
Note that align and valign is for the placements of the whole pack in the dimensions provided.
DIRECTION
Direction HORIZONTAL (default) will order the items horizontally to fill a row then go to the next row (like a Tile).
This will leave horizontal seams but will not necessarily fill the horizontal space - see LOCK below.
Direction VERTICAL will order the items vertically along rows and when the column is done then go to the next column.
This will leave vertical seams but will not necessarily fill the vertical space - see LOCK below.
There is also a reverse parameter that will order these in the opposite direction (right to left or bottom to top).
LOCK
Lock HORIZONTAL will make the pack fit to the side edges - probably leaving a gap in the vertical.
Lock VERTICAL will make the pack fit to the vertical top and bottom - probably leaving a gap in the horizontal.
Lock can be set to AUTO to pick the best fit between these based on the largest area of the pack.
ORDER
There is a dragOrder parameter (default false) that can be set to true to let users drag items to change the order.
This will repack each time. There are also getOrder() and setOrder() methods to record the order
and pass it back in to the order parameter of Pack.
This allows the app/content creators to try out different views and choose one.
The pack can also be passed into a ZIM TransformManager() along with a persist ID to let users save their order.
See: https://zimjs.com/zim/pack.html - pictures and saving
See: https://zimjs.com/zim/pack2.html - in a resizeable window
NOTE
ZIM Tile() has squeeze which can squeeze the items in horizontally or vertically.
ZIM Wrapper() will wrap items to fit best in rows or columns
but both of these will not scale its items and the results will be ragged edges.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
new Pack(rand(200,600), rand(200,600)).center(); // packs three default rectangles
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
width - (default 500) the outer width of the pack object which will define the backgroundColor and enclose the content
use the outerWidth property to change once the pack is made as the width property will just scale the pack.
height - (default 500) the outer height of the pack object which will define the backgroundColor and enclose the content
use the outerHeight property to change once the pack is made as the width property will just scale the pack.
items - (default three colored Rectangles) set to an array of items to pack - can be pictures or any DisplayObject - even interactive
the items property will reference this array as originally ordered (plus any items added or removed with addAt() or removeAt())
there is also a currentItems property that has the same items but in the latest order based on dragOrder or the order property
spacingH - (default 10) set the horizontal spacing between the items - this is almost exact but may be a little less if direction horizontal and lock is vertical
spacingV - (default 10) set the vertical spacing between the items - this is amost exact but may be a little less if direction vertical and lock horizontal
flatten - (default true) merge any left-over items into the previous two rows to make the end flat
direction - (default HORIZONTAL) order the items horizontally or vertically - this will create seams in the chosen direction
lock - (default AUTO) set to VERTICAL to fit content from top to bottom (less padding) or HORIZONTAL to fit content to sides (less padding)
set to AUTO to pick the direction that gives the largest content area.
note: that this setting is independent of the direction
the pack may not fit perfectly in the dimensions provided (probably not) so this setting specifies which side to lock to
the align and valign parameters then can be used to align the content in the provided width and height
backgroundColor - (default clear) set this to show a background rectangle behind the content dimensioned to the width and height
align - (default CENTER) horizontal alignment of the content in the provided dimensions - if lock is vertical (also LEFT and RIGHT)
valign - (default CENTER) vertical alignment of the content in the provided dimensions - if lock is horizontal (also TOP and BOTTOM)
lastAlign - (default LEFT/TOP) if flatten is false the the alignment of the left over items
use LEFT, CENTER, RIGHT for direction HORIZONTAL or TOP, CENTER, BOTTOM for direction VERTICAL
paddingH - (default 0) the horizontal space between the outer dimension and the content
paddingV - (default 0) the vertical space between the outer dimension and the content
dragOrder - (default false) set to true to let users (or authors) drag the items to new positions
this will re-pack the pack and possibly shift items to new columns or rows or even shift lock orientation if lock is AUTO
dragColor - (default white) the color of the ghost rectangle and beacon diamond - also see ghost and beacon properties
dragThickness - (default 2) the thickness of the ghost and beacon
dragDashed - (default true) the dashed of the ghost
reverse - (default false) set to true to reverse the pack order
funnel - (default false) set to true to add fewer items to the edges causing a larger to smaller look when flatten is true
showPacking - (default false) set to true to show packing steps at an interval of 1 second - for interest only
order - (default null) set to an array of order data - see getOrder() get the array after dragging and setOrder() to dynamically set an order
the format is [index, index, index, etc.] for each item where index is the new desired index for each original item
also see TransformManager(pack, "id") to automatically save the current order and remake the pack in the last order on refresh
container - (default stage) a container that holds the Pack - just used to place the beacon in the container
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly
METHODS
getOrder(popup) - get the current order of the pack if dragOrder is set to true - pass in true to see order in a ZIM Pane
this can then be copied and pasted into the Pack() order parameter to start the pack at the desired order
setOrder(order) - pass in an array of desired order - see the Pack() order parameter for more info - returns the object for chaining
addAt(items, index) - pass a single or an array of items to add to the pack at the provided index (or at the end if no index) - returns the object for chaining
removeAt(number, index) - remove the specified number of items at the provided index (or at the end if no index) - returns the object for chaining
clone() - make a copy of the pack
dispose() - removes listeners and deletes object
ALSO
ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO
see the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.
PROPERTIES
type - holds the class name as a String
items - get the original items array passed to the pack (including addAt() and removeFrom() changes)
currentItems - get the array of items in the current order (this may be different if dragOrder is true)
cols - get the current number of columns
rows - get the current number of rows
iterations - get the number of times the pack was made to optimize its size
flatten - get or set the flatten - see the Pack() flatten parameter
direction - get or set the direction - see the Pack() direction parameter
lock - get or set the lock - see the Pack() lock parameter
order - get or set the current order of the pack - also see getOrder() and setOrder()
dragOrder - get or set whether the items can be dragged to new positions
outerWidth - remake the pack at this width - note: width just scales the pack like any DisplayObject
outerHeight - remake the pack at this height - note: width just scales the pack like any DisplayObject
spacing - get or set the spacing - will do both horizontal and vertical
backing - a reference to the ZIM Rectangle used for the backgroundColor
ghost - a reference to the ZIM Rectangle if dragOrder is true that is used to show dragging
beacon - a reference to the ZIM Rectangle (at 45 rotation) if dragOrder is true that is used to show the inser point
ALSO
see ZIM Container for properties such as:
width, height, widthOnly, heightOnly, draggable, level, depth, group
blendMode, hue, saturation, brightness, contrast, etc.
ALSO
see the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.
EVENTS
dispatches a change event if items are re-ordered
CLOSE ▲PAGE ▤CODE ▤
Beads
zim class - extends a zim.Container which extends a createjs.Container
DESCRIPTION
Beads adds objects around a Squiggle or Blob path.
Different objects can be specified with ZIM VEE (Pick) values
to put random or sequenced objects around path.
The objects should have center registration for the most part.
Although animating, wiggling or customizing the registration can be cool.
The count of the object and the start and end percents can be specified
Beads can be used to make dotted borders or bead-like art.
The path can be any Squiggle or Blob - see https://zimjs.com/paths/ for example
The beads property holds the beads and can be animated in sequence
See https://zimjs.com/ten/beads.html for a mini-site of examples
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const sun = new Beads({
path:new Blob({color:yellow}), //.radialGradient([yellow,orange],[.2,.8],0,0,0, 0,0,100),
obj:new Triangle(60, 60, 60, series(orange,yellow,red)).reg(null, 60),
interactive:false,
count:9
}).center().drag({all:true});
// here we animate the beads property of Beads - which holds only the beads (not the path)
// sequence is automatically set to 0 to animate each bead individually
// to animate all the beads, animate on the main beads object
// You can still set a sequence to a value to run a sequence
sun.beads.animate({
props:{scaleY:1.7},
time:{min:1.5, max:2},
rewind:true,
loop:true,
// sequence:200
});
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports VEE - parameters marked with ZIM VEE mean a zim Pick() object or Pick Literal can be passed
Pick Literal formats: [1,3,2] - random; {min:10, max:20} - range; series(1,2,3) - order, function(){return result;} - function
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
path - (default new Blob({borderColor:blue})) a ZIM Squiggle or Blob on which to place the objects
obj - |ZIM VEE| the display object to place along the path - or use [] or series() for alternatives - also, see clone()
count - (default 10) the number of objects to place
angle - (default null) set to a specific angle such as 0 to keep all objects upright
the default of null will align the objects normal (out from) the curve (at 90 degrees from the tangent at its placement point)
startPercent - (default 0) a start percent around the path starting from the first point of the Blob or Squiggle
endPercent - (default 100 or 100-spacing for Blob) an end percent for the last object
can be smaller than startPercent to wrap around past 100
percents - (default null) an array of percent spacings to override default evenly spaced percents (also see percents property)
onTop - (default false) set to true to let the blob or squiggle come to the top of the bead object when manipulated
showControls - (default false) set to true to start off with the controls showing (also see interactive)
visible - (default true) set to false to not see the Blob or Squiggle path
interactive - (default true) set to false to not interact with the Blob or Squiggle path
clone - (default true) set to false to prevent Beads from cloning objects - good for series if events or custom properties are placed on each object
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly
METHODS
resize() - call resize if programatically changing the Squiggle or Blob path
this will be done automatically when using path controls
hasProp(property as String) - returns true if property exists on object else returns false
clone(exact) - makes a copy with properties such as x, y, etc. also copied
exact (default false) ZIM VEE (Pick) values are active in clones unless exact is set to true
For instance, if Beads is made with new Circle(20,[blue,green])
then its clone will have random blue or green circles that will differ from the original
If exact is set to true then the clone will the same colors as the original
dispose() - removes listeners and deletes object
ALSO
ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO
see the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.
PROPERTIES
type - holds the class name as a String
path - the Squiggle or Blob path on which the bead objects are placed
beads - a ZIM Container holding all the bead objects - this has a type of "BeadContainer"
this can be looped through for hitTests, etc
or can be animated and will automatically have a sequence of 0ms set
other sequence values can be set to animate beads in sequence
Each bead has the following properties added:
beadNum - the index number of the bead when created
items - an array of the bead items for convenience - also see the beads property
count - get the number of beads
percents - get the array of percent spacings - see also percents parameter
ALSO
see ZIM Container for properties such as:
width, height, widthOnly, heightOnly, draggable, level, depth, group
blendMode, hue, saturation, brightness, contrast, etc.
ALSO
see the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.
CLOSE ▲PAGE ▤CODE ▤VIDS
Layout
zim class - extends a createjs.EventDispatcher
DESCRIPTION
Layout arranges objects on the page by fitting (scaling) them in regions.
Make a layout object for each page if desired
and even nest layout objects inside regions.
Fixed aspect ratio content is fit into regions.
Layout is good for flexive design where you anchor titles and navigation.
Layout handles any number of regions vertically or horizontally.
It is useful for full scale mode for different devices or browser window scale.
NOTE
As of ZIM ZIM 02, a GlobalManager will be used to resize any Layout objects.
SPECIAL:
** If the object in a region is a Wrapper, the wrapper will be scaled
to fit the region width of a vertical Layout and the height of a horizontal Layout
See: https://zimjs.com/ten/wrapper.html
** If the object in a region is a Window, the window will be scaled to the region.
** If the object is given a type="Region" then it will have its bounds set to the region size.
This allows for another Layout to be nested within a region and scale to the inner region.
For example:
var content = new Container(500,500);
content.type = "Region"; // this now will have its bounds set to the region size
If the object is a Container (usual choice) then it must be given a starting width and height
which will be reset to the region size and resized to continue to match the region size.
SEE: https://zimjs.com/explore/layouts.html
SEE: https://zimjs.com/cat/layout.html
SEE: https://zimjs.com/pages
SEE: https://codepen.io/zimjs/pen/oMRprjNOTE
ZIM Tile is available to lay out non-scaled content
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// these would be containers with your content
// make sure that bounds are set on containers
// you may want to hard code bounds for clarity
const header = new Rectangle(500, 200, blue);
const content = new Rectangle(600, 500, green);
const footer = new Rectangle(500, 200, blue);
S.addChild(header, content, footer);
// make a vertical Layout - more useful for FULL scale mode
const layout = new Layout({
holder:S,
regions:[
{obj:header, marginTop:10, maxWidth:80, minHeight:10, valign:TOP},
{obj:content, marginTop:5, maxWidth:90}, // note, middle gets no minHeight
{obj:footer, marginTop:5, maxWidth:80, height:10}
],
lastMargin:5
});
// As of ZIM ZIM 02, A GlobalManager will automatically be added
// to resize any Layout objects
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
holder - object to hold layout (stage, container, etc) that must have bounds set
regions - an array of region DisplayObjects with specific properties for each region
(or array of DisplayObjects for defaults)
Example VERTICAL region objects - all dimensions are percents
[{obj:title, marginTop:10, maxWidth:80, minHeight:20, align:LEFT, valign:TOP},
{obj:content, marginTop:5, maxWidth:90}, // note, middle gets no minHeight
{obj:nav, marginTop:5, maxWidth:80, height:20, backgroundColor:red}]
note: no minHeight for middle regions - but heights on any region
align defaults to middle for the regions
valign defaults to top and bottom for the top and bottom region and middle for the others
backgroundColor applies a backing color to the region
only vertical GradientColor and centered RadialColor are supported at this time
so use new GradientColor([blue,green]) or new GradientColor([orange, yellow])
Example HORIZONTAL region objects
[{obj:col1, marginLeft:10, maxHeight:80, width:20, valign:"bottom"},
{obj:col2, marginLeft:5, maxHeight:90, align:MIDDLE}, // note, middle gets no minWidth
{obj:col3, marginLeft:5, maxHeight:80, minWidth:20, align:LEFT, valign:TOP}]
align defaults to left and right for the outer regions and middle for the inside regions
valign defaults to top for all the regions
** See the SPECIAL section above in the description for Wrapper, Window and Region objects
lastMargin - (default 0) the margin at the bottom (vertical) or at the right (horizontal)
lastMarginMin - (default 0) the minimum margin at the bottom (vertical) or at the right (horizontal)
backgroundColor - (default null) background color for the whole holder
only vertical GradientColor and centered RadialColor are supported at this time
so use new GradientColor([blue,green]) or new GradientColor([orange, yellow])
vertical - (default true) set to false for horizontal layout
showRegions - (default null) show boundaries of regions (formerly regionShape)
can toggle on and off with B key if this is set to true
scalingObject - (default holder) an object used as the bounds of the region scaling
setting a scalingObject will also set the bounds of the holder to the scalingObject bounds
it does not scale the holder - only scales the region objects inside
hideKey - (default B) is the hot key for hiding and showing the bounds
METHODS
resize() - resize based on new bounds of the holder (or scalingObject)
toggle(state - default null) - toggle() will show controls if they are hidden or hide controls if they are showing
alternatively, pass in true to show controls or false to hide controls
note - method does not update the stage
addShape(shape) - adds a bounding shape dynamically
removeShape() - permanently removes the bounding shape
disable() - disables all the layout (shape and sizing)
enable() - enables all the layout (shape and sizing)
dispose() - removes backgroundColors and bounds key event
to get rid of the objects in the layout call dispose on those objects in the app
PROPERTIES
type - holds the class name as a String
regions - the regions object - if changed will have to call resize() manually
backing - the Shape that holds all the background colors
toggled - read-only Boolean as to whether the controls are showing or hidden
DESCRIPTION OF FLEXIVE DESIGN
here described with vertical layout - horizontal is similar but rotated 90
the content in the middle will try and expand against the top and bottom
until it forces the top and bottom to their minimum percents
if the content hits its maximum width percent first then the top and bottom
will fill up the rest of the height until they reach their maximum widths
CLOSE ▲PAGE ▤CODE ▤BITS VIDS
Accessibility
zim class - extends a createjs.EventDispatcher
DESCRIPTION
Adds Screen Reader accessibility to the canvas for TAB key or Swipe (mobile) highlighting of ZIM objects
Some objects can be activated using the ENTER key and adjusted using the ARROW keys
Default or custom titles can be set to be read by the Screen Reader
The objects and the order in which the objects recieve focus can be set with a tabOrder array
A text message can be passed to the talk() method and it will be read by a Screen Reader
NOTE
Instructions to activate a screen reader on desktop or laptop computers
On Windows, you can type Narrator into Cortana and run it - it is really easy
Scan mode must be turned off (Caps Lock - spacebar)
On Mac, under Accessibility choose Voice Over
On Android, under Accesibility choose Voice and turn on TalkBack
Windows worked at ZIM 6, Apple worked at 6.1.0, Android worked at 6.1.0 aside from Slider, Dial, Stepper and ColorPicker
Custom readers were not tested
NOTE
For Enter Key interactivity, use on("mousedown", f) or on("click", f) events - DO NOT use tap(f)
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const button = new Button().center(); // DO NOT use tap()
button.on("mousedown", ()=>{
zgo("https://zimjs.com");
});
const dial = new Dial().center().mov(200);
const accessibility = new Accessibility();
// NOTE - on Narrator, scan mode must be turned off (Caps Lock - spacebar)
// this will automatically read in all objects on the stage and give default messages for the Screen Reader
// ENTER key events will be added to objects that will translate to mousedown and click events on the object
// Tab (swipe on mobile) to focus on the Button and press enter (double tap on mobile) to go to the ZIM site
// The Dial can use arrows to increase and decrease its value (up and right increase, down and left decrease)
// On mobile, double tapping the Dial brings up a select box with options (as does Slider, Stepper, and ColorPicker)
// OR
const accessibility = new Accessibility("Second Example");
accessibility.tabOrder = [
dial,
{obj:button, title:"Press ENTER to go to ZIM site"}
];
// this will start and end the app with "Second Example" being read (rather than default, "application")
// the dial will be the first item to tab to
// the button has a tabOrder object so it will have the title read rather than the default button message
// You could also provide a tabOrder object for the dial as well
NOTE
Please see https://zimjs.com/screenreader for a detailed example
NOTE
Please see https://zimjs.com/accessibility for a more examples
PARAMETERS supports DUO - parameters or single object with properties below
appName - (default "application") read in screen reader when application receives or loses focus
tabOrder - (default an array of all ZIM Display Objects on stage) an array of zim Display Objects
These will be given TAB key control (and ENTER and ARROWS) and will work with Screen Readers
Or given swipe left/right and double tap on mobile
*** Alternatively, an array of tabOrder objects with an obj property and a title property can be used
The obj is the Dispay Object and the title is what is read by the Screen Reader
eg. {obj:button, title:"Press Enter Key to start game"}
Can also specify tabOrder as a property of Accessibility
*** The tabOrder may change compared to the array that is initially provided
*** as RadioButtons, Picker, Tabs, and Pad components are split into separate items
*** For objects not on the stage including a Pane, Waiter, etc. do not rely on the auto adding, use the parameter specified array instead.
tabIndex - (default -1) - a starting index for focus - or can set tabIndex property after object is made
cycle - (default false) set to true to keep tab order inside application rather than leaving application when an end is reached
decimals - (default 2) number of decimals max to read for screen reader
frame - (default currentFrame) the frame
application - (default true - false on mobile) set to false to set role of buttons as buttons rather than application - may cause problems with NVDA unless set to forms mode
alwaysHighlight - (default false) screen readers will add their own highlights - but this will set highlight to true even if there is no screen reader
Set to true to place a rectangle around the object being put into focus by pressing the tab key or swipe on mobile
This will replace screen reader highlights (eg. for Windows Narrator) except for when aria is true (eg. Apple Voice Over)
The rest of the parameters relate to the alwaysHighlight - meaning highlight even if there is no screen reader
AHTime - (default .7) seconds to show the alwaysHighlight (also see ZIM TIME constant)
AHColor - (default brown) - the color of the alwaysHighlight rectangle
AHBorderWidth - (default 3) thickness of border
AHBorderPadding - (default 5) distance from object bounds outward towards border
AHAlpha - (default .8) alpha of the alwaysHighlight
AHObject - (default null) set to a display object - including animated objects - to override the rectangle as a alwaysHighlight object
AHObjectScale - (default .8) scale the AHObject relative to the object with tab focus
METHODS
tab(dir) - set dir to 1 (default) to emulate tab forward or -1 to emulate shift tab
changeTitle(target, title, activate) - change a title for the Screen Reader
target - the tabObject (eg. button) or the tabIndex of the item in the tabOrder to change
*** The tabOrder may change compared to the array that is initially provided
*** as RadioButtons, Picker, Tabs, and Pad components are split into separate items
title - the new title that will be read to the screen reader
If no title is provided any component passed will just update to its value or index
activate (default false) - set to true to set focus of item at index and send to Screen Reader
talk(words) - tell the Screen Reader to read the words provided (does not affect focus)
resize(target) - target is the object or index of the object to update - or do not pass a target to update all
This needs to be done if the object is moved, scaled, or removed from / re-added to the stage
Accessibility works by placing HTML tags behind the canvas where the ZIM objects exist - so resize() handles this
Use the Frame resize event and optionally, the ResizeManager()
dispose() - removes listeners and sets tabOrder to []
PROPERTIES
type - holds the class name as a String
tabOrder - get or set an array with the order in which display objects will receive focus with tab and shift tab (swipe on mobile)
tabIndex - get or set the index of the tabOrder (also see currentObject)
Setting works only if object at the index is on the stage
Returns -1 if no tabOrder object has the focus
currentObject - get or set the object in the tabOrder that has focus
Objects have the following Accessibility properties added:
zimAccessibility - the accessibility object
zimTabIndex - the index in the tabOrder
zimTabTag - the HTML tag that is used to represent the object to the screen reader
zimTabParent - the parent of an object for RadioButtons, Tabs, and Pads (for others, the zimTabParent is the object)
tabIndex - the index of the tag in tabParent (if there is a parent)
type - the type of object. If there is a zimTabParent (that is not itself), the type is RadioButton, TabsButton or PadButton
activatedObject - get the object in the tabOrder that was last clicked or had the ENTER key pressed on
startAppTag - get the HTML tag that announces application start
endAppTag - get the HTML tag that announces application end
cycle - (default false) set to true to keep tab order inside application rather than leaving application when an end is reached
decimals - (default 2) number of decimals max to read for screen reader
frame - (default currentFrame) the frame
alwaysHighlight - Boolean to use a alwaysHighlight rectangle
AHTime - seconds to show the hightlight (also see ZIM TIME constant)
AHColor - the color of the alwaysHighlight rectangle
AHBorderWidth - thickness of border
AHBorderPadding - (default 5)distance from object bounds outward towards border
AHAlpha - alpha of the alwaysHighlight
AHObject - set to a display object - including animated objects - to override the rectangle as a alwaysHighlight object
AHObjectScale - scale the AHObject relative to the object with tab focus
enabled - default is true - set to false to disable
EVENTS
Dispatches a "change" event when the screen reader is about to talk
This is when the talk() method runs or the tabIndex is changed (from click, swipe, tab, changeTitle - with activate true)
The event object has a title property that holds the words the screen reader will say
Several change events can happen at the same time so what is said is usually the last
but the talk() method takes priority as it runs in alert mode so focus is not lost
The Enter key dispatches mousedown and click events from object with focus
The event object has a fromEnter property which is true if from an enter key on the object
This could trigger a button press for instance
CLOSE ▲PAGE ▤CODE ▤VIDS
TextureActive
zim class extends a zim Page which extends a ZIM Container which extends a createjs Container
DESCRIPTION
A TextureActive object is a Container that can be used as a CanvasMaterial in three.js.
This allows ZIM to be mapped onto any material and mesh in three.js.
For instance, ZIM can be used as interface panels in virtual reality.
Any material can be made interactive so games and puzzles could be on walls, or any models.
This has world-wide wonderful applications!
NOTE
used with three.js
WORKINGS
The TextureActive object can be passed into a ZIM TextureActives() object to be made interactive.
The TextureActives object uses raycasting on the three.js material to provide CreateJS x and y coordinates.
The three.js mesh must be passed to the TextureActives addMesh() method.
The ZIM CreateJS 1.4.0 and later must be used as there are two settings:
createjs.remotePointers and createjs.remoteQueue
These prepare CreateJS to receive x and y from three.js and update TextureActive cache and material needsUpdate flag.
SEE:
https://zimjs.com/015/textureactive.html - panel with various components
https://zimjs.com/015/textureactive_raw.html - same but without ZIM Three
https://zimjs.com/015/textureactive2.html - first person interactive cylinders
https://zimjs.com/015/textureactive3.html - model with scrambler
https://zimjs.com/015/textureactive4.html - HUD, Noise, Synth
https://zimjs.com/015/textureactive5.html - Physics
https://zimjs.com/015/textureactive_hud.html - HUD affecting three object
https://zimjs.com/015/textureactive_hud_raw.html - same but without ZIM Three
XR
TextureActive will detect if XR (AR/VR) is being used and will use the suitable Raycaster
Additional classes are provided with the ZIM Three helper library for controllers, movement and teleport
SEE:
https://zimjs.com/015/vr.html - for example with Three and controllers (trigger), movement (sticks and squeeze) and teleport (B and Y buttons)
EXAMPLE
import zim from "https://zimjs.org/cdn/015/zim_three";
new Frame(FIT, 1024, 768, darker, purple, ready);
function ready() {
// PANEL
const panel = new TextureActive({
width:W,
height:H,
color:white.toAlpha(.8),
corner:20
});
const circle = new Circle(100,red).center(panel).drag();
// BACK OF PANEL
const backing = new TextureActive({
width:panel.width,
height:panel.height,
color:black,
corner:20,
animated:false,
interactive:false
});
TextureActive.makeBacking(backing.width, backing.height).addTo(backing); // CANVAS WINDOW
const three = new Three({
width:window.innerWidth,
height:window.innerHeight,
cameraPosition:new THREE.Vector3(0,0,500),
textureActive:true
});
const renderer = three.renderer;
const scene = three.scene;
const camera = three.camera;
const controls = new OrbitControls(camera, three.canvas);
const textureActives = new TextureActives([panel, backing], THREE, three, renderer, scene, camera, controls, 1, 0, 1500);
// can capture raydown, raymove, rayup, rayover and rayout
textureActives.on("raymove", e=>{
// zog(e.intersect.distance);
});
const canvasWindow = three.makePanel(panel, textureActives);
scene.add(canvasWindow);
// BACK OF PANEL
const canvasWindowBacking = three.makePanel(backing, textureActives, true, .5) // transparent and alpha
scene.add(canvasWindowBacking);
canvasWindowBacking.rotation.y = 180*RAD; // flip it around the other way
// // IGNORE LIST
// // The ignoreList is handy if you want to interact with TextureActives through objects on the same layer
// // uncomment below to see an example of ignoring the red plane mesh so raycast will go right through to menu
// // note, this would be simpler to test if we did not apply the layer of 1 to the TextureActives
// // because if we did not set the mesh on layer 1 then it would already be ignored ;-)
// // keep the ignoreList commented to see that the red plane does not let the raycast past
// // and therefore activates the orbit controls.
// const geometry = new THREE.PlaneGeometry(100, 100, 1, 1);
// const material = new THREE.MeshBasicMaterial({
// color:0xcc0000
// });
// const way = new THREE.Mesh(geometry, material);
// scene.add(way);
// camera.layers.enable(1);
// way.layers.set(1);
// way.position.z = 50;
// textureActives.ignoreList = [way];
} // end ready
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
width - (default zimDefaultFrame.width) the width of the TextureActive
but backing is sized to screen.width if no width is provided
height - (default zimDefaultFrame.height) the height of the Page
but backing is sized to screen.height if no height is provided
color - (default zim.light) the color of the TextureActive
color2 - (default null) a second color which would form a zim.GradientColor() as the color
angle - (default 90) the angle for the gradient if there is a gradient
borderColor - (default null) the stroke color
borderWidth - (default 1 if stroke is set) the size of the stroke in pixels
corner - (default 0) the round of corner
can also be an array of [topLeft, topRight, bottomRight, bottomLeft]
inside this array can be arrays of [horizontal, vertical] which skews each corner
can also be a combination array of values and skew arrays
[topLeft, [horizontal, vertical], bottomRight, [horizontal, vertical]]
interactive - (default true) set to false to not be interactive
interactive will use raycasting in the TextureActives object
to provide x and y to CreateJS which is then used by ZIM
animated - (default true) set to false if no animation is necessary
note that the animation will be true if interactive is true
this tells ZIM to update the cache of the TextureActive every stage update
backingOrbit - (default true) set to false to not allow oribitControls to rotate when pressed on backing
pattern - (default null) a DisplayObject that will be added to the TextureActive above the backing
For instance, import zim_pizzazz and use:
makePattern("slants", series(grey,dark), 20, 52, 40).alp(.2)
scalePattern - (default "fill") scale the pattern so it fills the window (formerly "bigger" or "outside")
set to false for no scaling or:
FIT or "fit" fits inside the TextureActive keeping proportion (formerly "smallest")
FILL or "fill" fills the TextureActive keeping proportion (formerly "biggest" or "outside")
FULL or "full" keeps both x and y scales - may stretch object (formerly "both")
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly
METHODS
clone() - makes a copy with properties such as x, y, etc. also copied - note, contents are not cloned
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection
ALSO
ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO
see the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.
STATIC METHODS
makeLogo(shade, mouse) - make the ZIM TextureActive logo
shade is "light" (default) or "dark" and mouse is true or false (default) to receive interactivity
used on the class like so: TextureActive.makeLogo().pos(0,50,CENTER,TOP,textureActive)
See the top of the https://zimjs.com/015/textureactives.html panel
makeBacking(width, height, text, color) - make a ZIM icon for the backing of a panel
width and height default to 800 x 600
the text defaults to "CANVAS WINDOW"
and the color defaults to light.
See the back of the https://zimjs.com/015/textureactives.html panel
PROPERTIES
type - holds the class name as a String
interactive - get whether the TextureActive is interactive
animated- get whether the TextureActive is animated
backingOrbit - get and set whether the TextureActive backing is controlled by orbit controls
ALSO
See ZIM Page for properties such as:
backing, pattern, color
ALSO
see ZIM Container for properties such as:
width, height, widthOnly, heightOnly, draggable, level, depth, group
blendMode, hue, saturation, brightness, contrast, etc.
ALSO
see the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.
EVENTS
See the CreateJS Easel Docs for Container events such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover
CLOSE ▲PAGE ▤CODE ▤VIDS
TextureActives
zim class extends a createjs EventDispatcher
DESCRIPTION
The ZIM TextureActive system allows ZIM to be used within three.js
as a CanvasTexture for any material in any mesh.
This can be animated and interacted with.
For instance, ZIM can be used as interface panels in virtual reality.
Any material can be made interactive so games and puzzles could be on walls, or any models.
This has world-wide wonderful applications!
TextureActives applies the interactivity to TextureActive objects
and has an addMesh() method to register three.js meshes with their TextureActive
A TextureActives object must be made after the TextureActive objects are made
and after a three.js renderer, scene, camera and controls are made.
But it can be made before the meshes that use the TextureActive objects are made.
Then either a Three.makePanel() or a textureActives.addMesh() method can be used to add TextureActive objects.
NOTE
used with three.js
WORKINGS
The TextureActive object can be passed into a ZIM TextureActives() object to be made interactive.
The TextureActives object uses raycasting on the three.js material to provide CreateJS x and y coordinates.
The three.js mesh must be passed to the TextureActives addMesh() method.
The ZIM CreateJS 1.4.0 and later must be used as there are two settings:
createjs.remotePointers and createjs.remoteQueue
These prepare CreateJS to receive x and y from three.js and update TextureActive cache and material needsUpdate flag.
SEE:
https://zimjs.com/015/textureactive.html - panel with various components
https://zimjs.com/015/textureactive_raw.html - same but without ZIM Three
https://zimjs.com/015/textureactive2.html - first person interactive cylinders
https://zimjs.com/015/textureactive3.html - model with scrambler
https://zimjs.com/015/textureactive4.html - HUD, Noise, Synth
https://zimjs.com/015/textureactive5.html - Physics
https://zimjs.com/015/textureactive_hud.html - HUD affecting three object
https://zimjs.com/015/textureactive_hud_raw.html - same but without ZIM Three
SEE:
TextureActive Studio
https://zimjs.com/studio
XR
TextureActive will detect if XR (AR/VR) is being used and will use the suitable Raycaster
Additional classes are provided with the ZIM Three helper library for controllers, movement and teleport
NOTE
for XR, a layer must be set so the controllers do not get in the way of interactivity
so in the TextureActives() set layer:1 and when adding meshes use addMesh(mesh, 1)
SEE:
https://zimjs.com/015/vr.html - for example with Three and controllers (trigger), movement (sticks and squeeze) and teleport (B and Y buttons)
EXAMPLE (not XR)
import zim from "https://zimjs.org/cdn/015/zim_three";
new Frame(FIT, 1024, 768, darker, purple, ready);
function ready() {
// PANEL
const panel = new TextureActive({
width:W,
height:H,
color:white.toAlpha(.8),
corner:20
});
const circle = new Circle(100,red).center(panel).drag();
// BACK OF PANEL
const backing = new TextureActive({
width:panel.width,
height:panel.height,
color:black,
corner:20,
animated:false,
interactive:false
});
TextureActive.makeBacking(backing.width, backing.height).addTo(backing); // CANVAS WINDOW
const three = new Three({
width:window.innerWidth,
height:window.innerHeight,
cameraPosition:new THREE.Vector3(0,0,500),
textureActive:true
});
const renderer = three.renderer;
const scene = three.scene;
const camera = three.camera;
const controls = new OrbitControls(camera, three.canvas);
const textureActives = new TextureActives([panel, backing], THREE, three, renderer, scene, camera, controls, 1, 0, 1500);
// can capture raydown, raymove, rayup, rayover and rayout
textureActives.on("raymove", e=>{
// zog(e.intersect.distance);
});
const canvasWindow = three.makePanel(panel, textureActives);
scene.add(canvasWindow);
// BACK OF PANEL
const canvasWindowBacking = three.makePanel(backing, textureActives, true, .5) // transparent and alpha
scene.add(canvasWindowBacking);
canvasWindowBacking.rotation.y = 180*RAD; // flip it around the other way
// // IGNORE LIST
// // The ignoreList is handy if you want to interact with TextureActives through objects on the same layer
// // uncomment below to see an example of ignoring the red plane mesh so raycast will go right through to menu
// // note, this would be simpler to test if we did not apply the layer of 1 to the TextureActives
// // because if we did not set the mesh on layer 1 then it would already be ignored ;-)
// // keep the ignoreList commented to see that the red plane does not let the raycast past
// // and therefore activates the orbit controls.
// const geometry = new THREE.PlaneGeometry(100, 100, 1, 1);
// const material = new THREE.MeshBasicMaterial({
// color:0xcc0000
// });
// const way = new THREE.Mesh(geometry, material);
// scene.add(way);
// camera.layers.enable(1);
// way.layers.set(1);
// way.position.z = 50;
// textureActives.ignoreList = [way];
} // end ready
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
actives - a ZIM TextureActive object or an array of ZIM TextureActive objects
also see the add() method
these will be tiled in ZIM and used to be mapped as a CanvasTexture onto three.js materials for meshes
see https://zimjs.com/docs.html?item=TextureActive
threejs - reference to the three.js namespace
zimThree - (default null) reference to the ZIM Three object if the Three helper module is used (saves lots of lines!)
renderer - reference to the three.js renderer (if using Three, then three.renderer)
scene - reference to the three.js scene (if using Three, then three.scene)
if using more than one scene then make more than one TexureActives object
camera - reference to the three.js camera (if using Three, then three.camera)
if using more than one camera then make more than one TexureActives object
controls - (default null) a three.js OrbitControls or FirstPersonControls
other controls may work but are not directly accomodated
layers - (default 0) a layer number from 0 to 31 or an array of layers
this will instruct the raycaster to look at only the provided layers
it is a good idea to specify 1 for instance and add TexureActive meshes to layer 1
the addMesh() method has a layer parameter that should match the layer number used here
the Three makePanel() method will automatically add the panel mesh to the layer specified for the TextureActives object
NOTE: for XR, layers must be set so the controls do not get in the way of interactivity
near - (default undefined) - the start of the distance-from-camera range for the object to be interactive
far - (default undefined) - the end of the distance-from-camera range for the object to be interactive
ignoreList - (default null) - a mesh or array of meshes to ignore if between the camera and the TextureActive mesh
by default, meshes on the same layer will prevent interactivity if between the camera and the TextureActive mesh
if the mesh is not on the same layer then it will be ignored by default
toggleKey - (default t) the key to toggle to or from the ZIM canvas and the three.js canvas
this can be used to directly interact with the ZIM objects - good for testing
the ZIM objects are tiled horizontally with a slider or swiping to pan across them
the toggle can be deactivated by setting it to -1
or any time by setting the textureActives.manager.toggleKey to -1
the ZIM canvas and toggling is handled by the ZIM TextureActivesManager
which is automatically made as soon as one TextureActives object is made
color - (default darker) the color for the ZIM stage (when the toggle key is pressed)
outerColor - (default black) the color of off the ZIM stage (when the toggle key is pressed)
damp - (default .2) the damping of the TextureActivesManager - set to false for no damping
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly
METHODS
add(actives) - add a ZIM TextureActive object or an array of ZIM TextureActive objects
or see the actives parameter of TextureActives
remove(actives) - remove a ZIM TextureActive object or an array of ZIM TextureActive objects
addMesh(mesh, layer) - add a three.js mesh to TextureActives at the optional layer - see the layer parameter of TextureActives
also see the ZIM Three helper module makePanel() method to easily make a three.js Plane mesh with a TextureActive
dispose() - removes event listeners - must still set outside references to null for garbage collection
PROPERTIES
type - holds the class name as a String
interactive - get whether there are interactive TextureActive objects
animated - get whether there are animated TextureActive objects
manager - the ZIM TexureActivesManager object that handles toggling between the three.js canvas and the ZIM canvas
this is used to interact directly with ZIM for testing, etc.
and can be used to toggle between states and change or remove the key for toggling
ignoreList - get or set the array of three.js meshes to ignore - see the ignoreList parameter of TextureActives
raycaster - a reference to the three.Raycaster object if the TextureActives is interactive
this is responsible for geting x and y coordinates on TextureActive materials and sending them to CreateJS
where they replace the regular DOM mouse or pointer events
raycast - get or set whether the raycaster is operational
renderer - the three.js renderer
layers - get an array of layers used by the raycaster
actives - get an array of ZIM TextureActive objects currently being used - see add() and remove()
threeMeshes - get an array of three.js meshes currently being used - see addMesh() and add() and remove()
EVENTS
raydown - dispatched when mouse is down on a ZIM TextureActive material
raymove - dispatched when mouse is moving on a ZIM TextureActive material
rayup - dispatched when mouse is up on a ZIM TextureActive material
rayover - dispatched when mouse is moves over a ZIM TextureActive material
rayout - dispatched when mouse is moves out from a ZIM TextureActive material
CLOSE ▲PAGE ▤CODE ▤VIDS
TextureActivesManager
zim class extends a createjs EventDispatcher
DESCRIPTION
The TextureActivesManager is added automatically when a TextureActives object is made.
There is only one TextureActivesManager made.
It tiles all TextureActive objects across the ZIM stage (and beyond to the right).
It adds a slider and swiper to view the objects.
It adds a key (default t) and toggle() method to toggle between the three.js canvas and the ZIM canvas.
SEE the TextureActive and TextureActives examples
PARAMETERS
stage (default the ZIMDefaultFrame's stage) the stage to operate on - provided internally
toggleKey (default "t") the key to toggle the viewer - will be the key set by the FIRST TextureActives object made
can be set with the toggleKey property to a different key or -1 to disable
textureActives.manager.toggleKey = -1; // where textureActives is any TextureActives object
damp (default .2) the damping of the Swiper (1 being no damping)
METHODS
toggle(state) - toggles objects - leave state off for toggle or pass in true to see or false to hide
also see the toggle property
and show() and hide()
show() - show the ZIM canvas and hide the three.js canvas - also see toggle()
hide() - hide the ZIM canvas and show the three.js canvas - also see toggle()
dispose(obj) - disposes objects in the manager
PROPERTIES
type - holds the class name as a String
toggled - whether the ZIM canvas is showing (true) or the three.js canvas is showing (false)
also see the toggle() method
toggleKey - get or set the key to toggle the TextureActives - default is "t"
set to -1 to remove toggling with the key
this would be expected for final versions
also see toggleKey parameter of TextureActives
tile - the tile containing the ZIM TextureActive objects
objects - a ZIM Dictionary of the TextureActives objects provided that holds their textureActive objects
color - get or set the color of the stage for the ZIM Canvas
outerColor - get or set the color outside the ZIM Canvas
backing - the backing rectangle used for the swiper - this has a faint color
nav - access to the ZIM Panel for the nav
slider - access to the ZIM Slider for the nav
swiper - access to the ZIM Swiper for swiping the panel - note, only works outside the TextureActive
CLOSE ▲PAGE ▤CODE ▤
DEPRECATED - as of ZIM ZIM 02, a GlobalManager is added to handle any resizing
Manager
zim class
DESCRIPTION
used internally to make ResizeManager, GridManager and GuideManager
and in future perhaps OutlineManager
METHODS
** all methods return the manager for chaining except dispose which returns true
add(obj) - registers a object or array of objects with the manager
** the following methods will operate on all objects in manager if the object parameter is left empty
** if a specific object or an array of objects is provided then the methods will operate on those objects
remove(obj) - removes objects from the manager
resize(obj) - resizes objects in the manager
toggle(state, obj) - toggles objects - leave state off for toggle or pass in true to see or false to hide
dispose(obj) - disposes objects in the manager
CLOSE ▲PAGE ▤CODE ▤
DEPRECATED - as of ZIM ZIM 02, a GlobalManager is added to handle any resizing
ResizeManager
zim class extends zim.Manager abstract class
DESCRIPTION
Add objects with a resize() method to a ResizeManager object and call a single resize() on the ResizeManager object
This will most likely go in a resize event on the Frame
Works with objects such as Layout, Pages, Grid, Guide, Accessibility, Loader and TextArea
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const resizeManager = new ResizeManager();
resizeManager.add([pages, layout, accessibility]);
// where these three objects have already been made
// *** Note that the Loader and TextArea are already resized if added to an Accessibility object that is resized
F.on("resize", ()=>{
resizeManager.resize(); // without ResizeManager you would make three different resize() calls
})
METHODS
add(obj) - adds object or an array of objects to the ResizeManager - returns the manager for chaining
*** Note that the Loader and TextArea are already resized if added to an Accessibility object that is resized
remove(obj) - removes object or an array of objects from the ResizeManager - returns the manager for chaining
resize() - calls the resize() method of any object in the ResizeManager - returns the manager for chaining
dispose() - disposes the objects in the ResizeManager and the ResizeManager itself
PROPERTIES
type - holds the class name as a String
items - get or set an array of objects currently in the Manager
CLOSE ▲PAGE ▤CODE ▤
TransformManager
zim class extends CreateJS EventDispatcher
DESCRIPTION
Manages multiple objects with transform() methods set.
Can use to show, hide, hideAll, add, remove and resize transform controls.
Also works with Squiggle(), Blob(), Layer(), Connectors() and Pack().
Can be used to automatically save any transforms and reload them again on refresh of Browser / App.
This uses localStorage.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const rect = new Rectangle(300, 200, green)
.centerReg()
.mov(-200)
.transform();
const circ = new Circle(100, red)
.centerReg()
.mov(200)
.transform();
const tm = new TransformManager([rect, circ], "sample");
// or use methods:
// tm.add([rect, circ]);
// tm.persist("sample"); // or add later to save transforms
PARAMETERS
objects - (default null) adds the object(s) to the Transform Manager
pass in a single object or an array of multiple objects
persistID - (default null) String id to make ZIM remember transforms of objects (uses localStorage)
METHODS
add(obj) - adds object or an array of objects to the TransformManager
remove(obj) - removes object or an array of objects to the TransformManager
show(obj) - show controls for an object that has a transform() set
hide(obj) - hides controls for an object that has a transform() set - still available with click
hideAll() - hides all controls - still available with click
resize() - calls the resize() method of any object in the ResizeManager
persist(id) - save data after every change and reload transforms when done - must provide an id
clearPersist(id) - clear persisting data - do this before adding shapes - must provide an id
savePersist() - with persist() already set, this will force a saving even without a transform event being captured
if resize() after non-transform movement is called, then this is not needed
stopPersist() - no longer save data
dispose(removePersist, removeControls) - default just removes manager - keeps the data
set removePersist to true to remove the persist data
set removeControls to true to remove the transforms and beziers of all the items
PROPERTIES
type - holds the class name as a String
items - get or set (set not recommended) an array of objects currently in the TransformManager
currentObject - the last item to get transform tools if it still has the transform tools active
persistData - gets the persist data if it exists
EVENTS
Dispatches a "transformed" event when pressup on any of the controls or on click
transformed event object has transformObject and transformType properties
the transformType property has values of:
FOR TRANSFORM: "select" (if not moved), "size", "move", "rotate", "stretch", "reg" "reset"
FOR BLOB, SQUIGGLE: "move", "bezierPoint", "bezierHandle", "bezierSwitch"
FOR CONNECTORS: "connection"
FOR PACK: "change"
Adds "transformshow" and "transformhide" events for when click to hide or show controls
these have a transformObject property to indicate what was shown or hidden
Dispatches, on each object, a "persistset" event when persist data is ready - could be delayed 50ms due to Layer being created
Dispatches a "persistcomplete" event when all persist data has been set + 100ms for layers to be set before applying controls
CLOSE ▲PAGE ▤CODE ▤VIDS
DEPRECATED - as of ZIM ZIM 02, a GlobalManager is added to handle any resizing
GuideManager
zim class - extends the ZIM Manager abstract class
DESCRIPTION
Add Zim Guide objects to a GuideManager object and update or remove all guides at once.
Guides are handy to use but perhaps annoying to update and remove if you have many.
GuideManager keeps track of the guides and lets you update or dispose of them on command.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const manager = new GuideManager();
manager.add(new Guide());
manager.add(new Guide(false));
// or with pixels
// manager.add(new Guide(true, false));
// manager.add(new Guide(false, false));
// then you can remove all guides with
// manager.dispose();
// handy with guides on multiple Pages
// and in frame resize event we can resize all guides:
F.on("resize", ()=>{manager.resize();})
PROPERTIES
type - holds the class name as a String
items - an array of all Guide objects added with add()
METHODS
add(guide) - registers a guide with the GuideManager
remove(guide) - removes guide from register
resize() - resizes all the guides in the GuideManager (ie. if stage changes)
toggle(state - default null) - toggle() will show controls if they are hidden or hide controls if they are showing
alternatively, pass in true to show controls or false to hide controls
note - method does not update the stage
dispose() - disposes all guides and the GuideManager
NOTE
to just hide guides, you use the G key
and to toggle percent and pixels use the P key
you can dispose guides individually or use this class to dispose all
disposing will remove the G, P key listener and the guide
CLOSE ▲PAGE ▤CODE ▤
DEPRECATED - as of ZIM ZIM 02, a GlobalManager is added to handle any resizing
GridManager
zim class - extends a zim.Manager
DESCRIPTION
Add Zim Grid objects to a GridManager object and update or remove all grids at once.
Grids are handy to use but perhaps annoying to update and remove if you have many.
GridManager keeps track of the grids and lets you update or dispose of them on command.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const manager = new GridManager();
manager.add(new Grid());
// or with pixels
// manager.add(new Grid(null, false));
// then you can remove all grids with
// grid.dispose();
// handy with guides on multiple Pages
// and in frame resize event we can resize all grids:
F.on("resize", ()=>{manager.resize();})
METHODS
add(grid) - registers a grid with the GridManager
remove(grid) - removes grid from the register
resize() - resizes all the grids in the GridManager (ie. if stage changes)
dispose() - disposes all grids and the GridManager
NOTE
to just hide grids, you use the G key
and to toggle percent and pixels use the P key
you can dispose grids individually or use this class to dispose all
disposing will remove the G key listener and the grid
PROPERTIES
type - holds the class name as a String
items - an array of all Grid objects added with add()
CLOSE ▲PAGE ▤CODE ▤
DEPRECATED - as of ZIM ZIM 02, a GlobalManager is added to handle any resizing
LayoutManager
zim class - extends a zim.Manager
DESCRIPTION
Add Zim Layout objects to a LayoutManager object and update them all at once.
You can remove all layout region bound shapes at once
as well as remove the B key to show the region bound shapes.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// these would be containers with your content
// make sure that bounds are set on containers
// you may want to hard code bounds for clarity
const header = new Rectangle(500, 200, blue);
const content = new Rectangle(600, 500, green);
const footer = new Rectangle(500, 200, blue);
S.addChild(header, content, footer);
// make the Layout - more useful for FULL scale mode
const layout = new Layout({
holder:stage,
regions:[
{obj:header, marginTop:10, maxWidth:80, minHeight:10, valign:TOP},
{obj:content, marginTop:5, maxWidth:90}, // note, middle gets no minHeight
{obj:footer, marginTop:5, maxWidth:80, height:10}
],
lastMargin:5
});
// add to LayoutManager to resize or dispose all layouts together
const manager = new LayoutManager();
manager.add(layout);
F.on("resize", ()=>{
manager.resize();
S.update();
});
S.update();
METHODS
** all methods return the manager for chaining
add(layout) - registers a layout or array of layouts with the manager
** the following methods will operate on all layouts in manager if the layout parameter is left empty
** if a specific layout or an array of layouts is provided then the methods will operate on those layouts
remove(layout) - removes layouts from the manager
resize(layout) - resizes layouts in the manager
toggle(state, layout) - toggles layout region bounds - leave state off for toggle or pass in true to see or false to hide
dispose(layout) - disposes layouts in the manager - including backgroundColors but not objects in the layouts
NOTE
to just hide bounds, you use the B key
PROPERTIES
type - holds the class name as a String
items - an array of all Layout objects added with add()
CLOSE ▲PAGE ▤CODE ▤
SelectionSet
zim class
DESCRIPTION
Keeps track of selected objects or indexes, etc.
Just a wrapper for array manipulation:
Uses isSelected instead of indexOf()>=0
Uses remove() instead of splice(index, 1), etc.
Handles multiple select, matching other SelectionSet objects for add and remove, etc.
Use with a SelectionManager to control multiple Selection Set objects at once.
See: https://zimjs.com/explore/selectionTest.htmlNOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const selectedTriangles = new SelectionSet();
const triangles = new Tile(new Triangle(), 5, 1, 50).center().mov(0,-200).cur();
triangles.on("click", e=>{
selectedTriangles.toggle(e.target, F.ctrlKey); // multiple if ctrl down
// need to loop through all to update
triangles.loop(triangle=>{
triangle.color = selectedTriangles.isSelected(triangle)?pink:black;
});
S.update();
});
PARAMETERS
selections - (default []) an array of selected items or indexes, etc.
METHODS
clear() - clear selections
isSelected(item) - returns true if item is selected else false
toggle(item, multiple, match, unmatch) - toggle the item which calls add or remove below
this is probably the most handy method - see parameter description below
add(item, multiple, match, unmatch) - add an item
multiple will not remove other selected items
match - pass in another SelectionSet to add the same item or index
unMatch - pass in another SelectionSet to remove the same item or index if there
remove(item, multiple, match, unmatch) - remove an item
multiple will not remove other selected items
match - pass in another SelectionSet to remove the same item or index
unMatch - pass in another SelectionSet to add the same item or index if there
dispose() - clears list and sets to null
PROPERTIES
type - holds the class name as a String
items - an array of all Layout objects added with add()
CLOSE ▲PAGE ▤CODE ▤
SelectionManager
zim class extends a CreateJS EventDispatcher
DESCRIPTION
Add Zim SelectionSet objects to a SelectionManager object and control multiple selection sets.
Used internally to control Squiggle and Blob point selections for multiple drags and mousemoves
Also provides key events along with undo event
See: https://zimjs.com/explore/selectionTest.htmlNOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// manage two sets of SelectionSet objects:
const selectedCircles = new SelectionSet();
const selectedRects = new SelectionSet();
// add SelectionSet objects to manager and set ctrl to be multiple select
const selectionManager = new SelectionManager([selectedCircles, selectedRects], "ctrl");
const circles = new Tile(new Circle(), 5, 1, 50).center().cur();
const rects = new Tile(new Rectangle(), 5, 1, 50).center().mov(0,100).cur();
circles.on("click", e=>{
// toggle current selected - SelectionManager will handle multiple select
selectedCircles.toggle(e.target);
setColors();
});
rects.on("click", e=>{
selectedRects.toggle(e.target);
setColors();
});
// need to loop through all objects to make sure their color did not change
function setColors() {
circles.loop(circle=>{
circle.color = selectedCircles.isSelected(circle)?red:black;
});
rects.loop(rect=>{
rect.color = selectedRects.isSelected(rect)?red:black;
});
S.update();
}
PARAMETERS
sets - (default null) a ZIM SelectionSet object or an array of SelectionSet objects to manage
multipleKey - (default null) a key ("shift", "ctrl", "meta", etc.) to use for multiple select (only within a SelectionSet)
multipleSets - (default true) set to false to only allow one set at a time to be selected on
METHODS
clear() - clears all SelectionSet objects in the SelectionManager
setCurrent(set) - sets the privided SelectionSet to the currentSet and clears the others
dispose() - removes key events
PROPERTIES
type - holds the class name as a String
sets - an array of all the SelectionSet objects
multipleKey - the key provided for multiple select ("shift", "ctrl", etc) - do not add "Key" as in "shiftKey"
multiple - true if the multipleSelect key is being pressed otherwise false
ctrlKey - true if the ctrlKey key is being pressed otherwise false
shiftKey - true if the shiftKey key is being pressed otherwise false
metaKey - true if the metaKey key is being pressed otherwise false
EVENTS
dispatches an "undo" event if a CTRL or META plus the U key is pressed
CLOSE ▲PAGE ▤CODE ▤
Bind
zim class
DESCRIPTION
Binds DisplayObject properties to data, for instance localStorage or server data
The property values can be any JSON valid data such as Number, String, Array or Object Literal
NOTE
see bind() methods of DisplayObjects like Containers, ZIM Shapes, Shapes, Bitmap, etc.
NOTE
see ZIM Base() in PHP for database access https://zimjs.com/php/base.zipNOTE
see ZIM Skool Data lesson 09 https://zimjs.com/skool/lesson09.html
And asociated videos here https://zimjs.com/learnjavascript.html#lesson09
Bind has to() and from() methods that can be used to update data and properties as desired.
to() saves data and from() gets data and sets object properties.
These have filters to specify on which ids, objects or properties to act.
LOCALSTORAGE, POST and GET is supported as are these global ZIM constants.
The data has JSON.strigify() applied and will be sent as a data property
Bind has a master parameter that will be sent with all to() and from() calls
to() and from() calls will send a command property of either "to" or "from"
There is also an extra property that can be used to send an id, search term, etc.
These can be collected, for instance in PHP, as follows depending on the bindType
$_GET["data"], $_GET["master"], $_GET["command"], $_GET["extra"], $_GET["unique"] or
$_POST["data"], $_POST["master"], $_POST["command"], $_POST["extra"], $_POST["unique"]
Separating the data from the master, command and extra more readily allows JSON storage
GET uses ZIM asnyc() which is JSONp based and overcomes Cross Origin security issues
GET has a limit of 2048 - some servers are more but some are not
POST uses ZIM Ajax() which will work with the same server or one with CORS set accordingly
POST has a limit of roughly the computer memory
LOCALSTORAGE is also supported which stores the data on the user's computer
See: https://zimjs.com/ten/bind.htmlNOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// LOCALSTORAGE example - synchronous so do not need callback
const b = new Bind();
// b.clear(); // clear localStorage memory
// circle's location will be remembered
const c = new Circle().center().bind("circle", ["x","y"]).drag();
c.on("pressup", ()=>{b.to();});
// TextArea's text will be remembered
const t = new TextArea().center().mov(0,-100).bind("text", ["text"]);
t.on("input", ()=>{b.to();});
EXAMPLE
// A GET example - POST is the same - see comments in PHP template...
// get unique user id from components, etc.
// this could be added to the url for get
// but we will pass it in as master data which works for get or post
// to tell the to() and from() methods to always pass this master variable
var uid = "bindTest";
var url = "https://zimjs.com/ten/bind.php";
// from() will get any data from the url and store in Bind as data
// this will then be used as each object is bound
const b = new Bind(url, GET, uid).from(()=>{
const c = new Circle(100,red)
.loc(rand(W), rand(H))
// the bind will also set properties to existing Bind data
.bind("circle", ["x","y","level"])
.drag();
c.on("pressup", function() {
// to() will send data to the server
b.to();
});
const r = new Rectangle(200,200,blue)
.loc(rand(W-200), rand(H-200))
.bind("rect", {x:BOTH, y:BOTH, level:BOTH, alpha:TO})
.drag();
r.on("pressup", ()=>{
b.to();
});
// b.to(); // would store random locations to start
// would clear bindings and data
// b.removeAllBindings(true, function (response) {
// zog(response);
// });
S.update();
});
// A PHP Template for GET with notes for POST
// See: https://zimjs.com/ten/bind.html for a full example with MySQLi database code
// Also: https://zimjs.com/base.html for easy binding to PHP
<?php
// ZIM Bind as of ZIM 10.9.0
// ZIM supports data binding of JSON ready properties on objects
// here is an example of the structure for binding to a database with GET
// GET uses ZIM async() which uses JSONp rather than AJAX
// POST uses ZIM ajax() and is similar - use for larger data
// SEE: https://zimjs.com/base.html for simplified PHP
header('Content-type: text/javascript');
// ZIM Bind sends the following variables
// in this case, master is an id
// data is the JSON data to store
// command will be "to" or "from" to store or retrieve data
// extra could be a search term, etc. but not used in this example
// for POST - change these to $_POST["master"], etc.
$master = isset($_GET["master"]) ? $_GET["master"] : "";
$data = isset($_GET["data"]) ? $_GET["data"] : "";
$command = isset($_GET["command"]) ? $_GET["command"] : "";
$extra = isset($_GET["extra"]) ? $_GET["extra"] : "";
if ($command == "to") {
// ZIM Bind.to() will send a data property in JSON format:
// '{"id1":{"prop1":"value", "prop2":"value"}, "id2":{"prop3":"value"}}'
// the JSON string can be stored at the id in the database
// or separate fields can be stored by parsing the JSON data
// looping and filling specific fields
// check for master id
if ($master=="") {echo "async.callbackTo('error: no id')"; exit;}
// put data into database at id using MySQLi or PDO, etc.
// then echo success or error in the following async format
echo "async.callbackTo('success')";
// echo "success"; // FOR POST
} else if ($command == "from") {
// Bind from() requests the information
// If all the data is requested then the data will be the string 'full'
// so return the JSON string stored at the id for instance.
// requests might also be provided in the following format:
// '{"id":["prop1","prop2"], "id2":["prop3"]}'
// and then return the data for the fields requested as a JSON string:
// '{"id1":{"prop1":"value", "prop2":"value"}, "id2":{"prop3":"value"}}'
// check for master id
if ($master=="") {echo "async.callbackFrom('error: no id')"; exit;}
// get data from database using MySQLi or PDO, etc.
// return data in the following async format - for example:
$json = '{"circle":{"x":200,"y":200},"rect":{"x":300,"y":300,"alpha":1}}';
echo "async.callbackFrom($json)";
// echo $json; // FOR POST
} else if ($command == "removeAll") {
// if we want to reset the data the Bind object's removeAllBindings
// can be called - the removeConnectionData defaults to true
// and a command of "removeAll" will be called on the server
// check for id
if ($master=="") {echo "async.callbackRemoveAll('error: no id')"; exit;}
// delete data from database using MySQLi or PDO, etc.
echo "async.callbackRemoveAll('success')";
// echo 'success'; // FOR POST
}
?>
PARAMETERS
** supports DUO - parameters or single object with properties below
connection - (default "zimBind") a localStorage string "example" or a URL to a server script
bindType - (default LOCALSTORAGE) or set to GET or POST
For GET and POST a GET variable called type will be sent with either "get" or "post" value
This is captured by ZIM Base() on the PHP side and used to manage variables and responses.
LOCALSTORAGE - stores data in localStorage on the users computer
and is syncronous so all data is automatically stored on to() and from()
GET - sends data to a server script such as PHP or node using ZIM async() and JSONp
as such, this should work from local computers and across different domains
extra information can be placed on the URL in CGI format ?prop=value&prop=value
the values (only) should be encodeURI() if spaces or special characters
there is a limit of approximately 2048 characters
POST - sends data to a server using an object which gets JSON.stringify applied
this object can be retrieved via $_POST["data"] in PHP, etc.
extra information can be placed on the URL in CGI format ?prop=value&prop=value
the values (only) should be encodeURI() if spaces or special characters
there is virtually no limit to the amount of data
files will need to be on the same server or a CORS header set up
master - (default null) information to send with each server call (not localStorage)
this could be an id, etc. and will have encodeURIComponent() applied
eg. in php it can be received as $_GET["master"] or $_POST["master"] depending on bindType
masterFilter - (default null) a function to run before TO and after FROM
this will receive the data (plus command and extra)
command will be "to", "fromTo", "from", or "remove" - see to(), from(), remove() for details
and must return the data - but the function can operate on the data
eg. if data.id = "1_a" the filter function can set data.id = data.id.split("_").join("");
The function must return data - this will modify before sending and after receiving
If only one direction is desired use the command parameter in a conditional
eg. if (command=="to") {etc.} - make sure to return the data in all cases
couple - (default false) - set to true to turn nested JSON into a single layer
The object will have _ between the id and the property name
eg. {"circle":{"x":"10", "y":"20"},"count":{"value":"0"}}
is: {"circle_x":"10", "circle_y":"20", "count_value":"0"}
This allows data to be JSON decoded on the server
and put more directly into table fields of the database
The data will be automatically decoupled back to a double layer object on retrieval
smartDecimals - (default true) numbers > 1 have 1 decimal, numbers < 1 have two decimals
report - (default false) set to true to receive console Bind reports of each bind result
setDefault - (default null) by default the first Bind object is the zimDefaultBind object
The zimDefaultBind is what DisplayObject bind() method will use unless bindObj is specified.
Set the setDefault parameter to true to override any previous Bind objects as the default bind object.
See also the default property
METHODS
** all methods return the object for chaining
add(id, obj, props, extra, filter) - adds a DisplayObject (Container, Bitmap, Circle, etc.) to the Bind object
or use bind(id, props, filter, bindObj) method of DisplayObjects
will also set properties to current Bind properties for GET and POST
or get latest data for LOCALSTORAGE
id - a string identifier - one id per object
obj - a DisplayObject (display objects can have more than one id)
props - an property as a string or an array of properties as strings
extra (default null) extra information to be sent to the server (not localStorage)
this could be an id or a search term, etc. it will have encodeURI() applied
this can be received in php as $_GET["extra"] or $_POST["extra"] depending on bindType
filter - (default null) a function to run before sending and after receiving data
this will receive (data, command, extra, process) parameters
command will be "to", "fromTo", "from", or "remove" - see to(), from(), remove() for details
calling process.stop() will stop the current to() or from() call from proceeding
the function must return the data - see Bind masterFilter parameter for more information
note: the masterFilter if supplied will run as well before the filter
remove(targets, props, extra, filter, removeConnectionData, call) - remove a bind
targets (default null) an object or id or an array of ids or objects to remove binds
props (default null) a property or an array of properties to remove binds on only those properties
or pass both targets and props to remove only properties on provided id or objects
extra (default null) extra information to be sent to the server (not localStorage)
this could be an id or a search term, etc. it will have encodeURI() applied
this can be received in php as $_GET["extra"] or $_POST["extra"] depending on bindType
filter (default null) a function to run before removing
this will receive (data, command, extra, process) parameters - command will be "remove"
calling process.stop() will stop the current to() or from() call from proceeding
the function must return the data - see Bind masterFilter parameter for more information
note: the masterFilter and the bind filter if supplied will run as well before the filter
removeConnectionData (default true) remove connection data
this will clear removed data from localStorage for LOCALSTORAGE setting
a "remove" property will be sent to the server for GET or POST
with a JSON {id1:["prop1","prop2"], id2:["prop3"]} format of removed items
call is a callback function after the data is sent and received
the callback function will receive a result "success" or "error ..." in its parameter
from(call, targets, props, extra, filter) - get bind data from the connection (localStorage or database)
** accepts ZIM DUO normal parameters or configuration object literal with parameter names as propterties
from() will also send to the server a command property with the value "from" (not for localStorage)
in php this can be received as $_GET["command"] or $_POST["command"] depending on bindType
call is a callback function after the data is received
the callback function will receive data in its parameter of the data set
the properties of the objects are set automatically by bind
** the targets and props must have already been bound by bind.add() or obj.bind()
targets (default null) is an object or id or array of objects or ids to receive the data
props (default null) properties to receive the data
or both targets and properties for properties of the targets to receive the data
extra (default null) extra information to be sent to the server (not localStorage)
this could be an id or a search term, etc. it will have encodeURI() applied
this can be received in php as $_GET["extra"] or $_POST["extra"] depending on bindType
filter (default null) a function to run before sending and after receiving data
this will receive (data, command, extra, process) parameters
command will be "fromTo" when sending data to server (requesting data)
command will be "from" when receiving data from the server
calling process.stop() will stop the current to() or from() call from proceeding
the function must return the data - see Bind masterFilter parameter for more information
note: the masterFilter and the bind filter if supplied will run as well before the filter
to(targets, props, extra, filter, smartDecimals, call) - send bind data to the connection (localStorage or database)
** accepts ZIM DUO normal parameters or configuration object literal with parameter names as propterties
to() will also send to the server a command property with the value "to" (not for localStorage)
in php this can be received as $_GET["command"] or $_POST["command"] depending on bindType
** the targets and props must have already been bound by bind.add() or obj.bind()
targets (default null) is an object or id or array of objects or ids to send the data
props (default null) properties to send the data
or both targets and properties for properties of the targets to send the data
extra (default null) extra information to be sent to the server (not localStorage)
this could be an id or a search term, etc. it will have encodeURI() applied
this can be received in php as $_GET["extra"] or $_POST["extra"] depending on bindType
filter (default null) a function to run before sending data
this will receive (data, command, extra) parameters - command will be "to"
calling process.stop() will stop the current to() or from() call from proceeding
the function must return the data - see Bind masterFilter parameter for more information
note: the masterFilter and the bind filter if supplied will run as well before the filter
smartDecimals (default bind smartDecimals) override the bind smartDecimals
set to true to send numbers > 1 with 1 decimal or numbers < 1 with 2 decimals
call is a callback function after the data is sent and received
the callback function will receive a result in its parameter
often with a success or error property or string
toUnique(targets, props, extra, filter, smartDecimals, call) - send bind data to the connection along with a unique=true variable
This is the same as to() but sends a unqiue=true variable
The unique variable can be tested for on the server
and an appropriate resonse can be returned
For instance, return false if the extra variable is being used as a key and it is not unique
In normal binding, we would want to then update
but is some cases, we might be trying to add a unqique object to bind to in the future
toLock(targets, props, extra, filter, smartDecimals, call) - like a to() but prevents old data from being stored
A filter with command=="from" must be used to adjust data - see below for more.
Use when multiple people are appending to or updating the same JSON data object.
Do not use if users are simply overwriting all the data - just use a to() for that.
SCENARIO:
Imagine that there is a bind to a TextArea() filled with user comments
Traditionally, each comment would be stored as a record (row) in the database table
With binding, it is easier to store these as a JSON string in one record
If two users have the JSON object at the same time and one updates the JSON object,
the second user will not receive this update so their JSON object will be out of date
When the second user sends their JSON object it will overwrite the first user's update
The first user's update will be lost
SENARIO:
Imagine that there is a five star system that stores total stars and total voters in a JSON object
It would be bad for a user to initially collect this data and then twenty minutes later,
write to this data without getting the latest data.
SOLUTION:
toLock() solves this by fetching the latest data just before a user wants to update.
This data is available in a filter when command=="from".
The DATA MUST BE MODIFIED in the filter. Then return the modified data and
toLock() sends the modified data to the server.
-- SERVER
-- ZIM Base should be used in the PHP code - see https://zimjs.com/base/
-- the database table should have a field called lockid of type varchar
-- in the $command=="from" the record should be locked as follows:
-- if ($lockid) $base->setLock("table_name", $id, $lockid);
-- this assumes you are updating a record with an id - this can adjusted - see ZIM Base.
** accepts ZIM DUO normal parameters or configuration object literal with parameter names as propterties
** the targets and props must have already been bound by bind.add() or obj.bind()
targets (default null) is an object or id or array of objects or ids to send the data
props (default null) properties to send the data
or both targets and properties for properties of the targets to send the data
extra (default null) extra information to be sent to the server (not localStorage)
this could be an id or a search term, etc. it will have encodeURI() applied
this can be received in php as $_GET["extra"] or $_POST["extra"] depending on bindType
filter (default null) a function that will run three times during the process
this will receive (data, command, extra) parameters
the commands for the three times will be:
command "fromTo" before the from request for current data is sent and the record is locked
command "from" current data is received but before bound properties are set with current data
it is here that new data can be added to or updated in the filter data object
as the data object is about to be used to update the bound properties
command "to" before new properties are sent to be stored and the record unlocked
calling process.stop() will stop the current to() or from() call from proceeding
the function must return the data - see Bind masterFilter parameter for more information
note: the masterFilter and the bind filter if supplied will run as well before the filter
smartDecimals (default bind smartDecimals) override the bind smartDecimals
set to true to send numbers > 1 with 1 decimal or numbers < 1 with 2 decimals
call is a callback function after the data is sent and received
the callback function will receive a result in its parameter
often with a success or error property or string
stop() - stops current to() or from() from running any further - sets the stopped property to true
there are also process parameters provided to each filter function
a safer way of stopping a specific bind is calling stop() on the process - process.stop()
report() - logs to the console a snapshot of the current bind data as Bind {DATA} Report:
note: normally, the console shows updated data rather than static data - for instance at log time
report() logs a zim.copy(data) which will not change in the console if the data is updated
toggleReport(state - default null) - turns on or off reports - see Bind report parameter
or pass in true to show reports or false to hide reports
applyData() - used internally to set object properties based on current bind data
updatefilter(id, func) - update a bind filter at an id - set func to null to remove bind filter
note: the masterFilter can be adjusted with the masterFilter property
clear() - for LOCALSTORAGE, clear the localStorage[connection]
removeAllBindings(removeConnectionData, call) - removes bind data
removeConnectionData (default true) remove connection data
this will clear localStorage for LOCALSTORAGE setting
or send variable "removeAll" to connection for GET and POST
call is a callback function after the data is sent and received
the callback function will receive a result "success" or "error ..." in its parameter
PROPERTIES
type - holds the class name as a String
data - the latest data held by bind - might not be all data depending on the last from() call parameters
connection - the localStorage string or the url for GET or POST
bindType - the type of connection LOCALSTORAGE, GET or POST
master - get or set the master data being sent with to() or from()
masterFilter - get or set the masterFilter function
note: to update the filter for a bind, noBind() and bind() with a new function
couple - get or set whether the data is coupled as sent and uncoupled as received - see couple parameter
smartDecimals - if true numbers > 1 will have 1 decimal and numbers < 1 will have 2 decimals
default - get or set whether this is the zimDefaultBind
the zimDefaultBind is what DisplayObject bind() method will use unless bindObj is specified
see also the Bind setDefault parameter
stopped - setting will stop the current bind process - see stop() and filter process.stop()
note: this is stopped - not stop - stop() is the method
ajax - if type is POST then this is a reference to the ZIM Ajax object being used
** the following info objects are available but relate to one another
** so adjust with care - would suggest add() and remove() to adjust
bindings - a bind info object in the format
{id:{obj:object, props:["prop1", "prop2"]}, id2:etc.}
ids - an array of all ids
objIDs - a ZIM Dictionary of objects that holds an array of ids for each object
toIDs - an object of to() properties in the form {prop1:[id1, id2], prop2:[id3]}
fromIDs - an object of from() properties in the form {prop1:[id1, id2], prop2:[id3]}
CLOSE ▲PAGE ▤CODE ▤VIDS
Swipe
zim class - extends a createjs.EventDispatcher
DESCRIPTION
Sets up capturing swipes on objects.
Dispatches a "swipe" event on swipe left, right, up, down.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
PARAMETERS supports DUO - parameters or single object with properties below
obj - the object you want to swipe on
distance - (default 30) the distance in pixels to activate swipe
might want to pass in a pixel distance based on percentage of stage
duration - (default .08) time in seconds to travel that distance (also see ZIM TIME constant)
try https://zimjs.com/swipe.html for testing distance and time (speed)
isometric - (default false) set to true to rotate swiping test by 30 degrees
for swiping on ZIM game Board({isometric:true})
left-right is from top left to bottom right (cols)
top-bottom is from top right to bottom left (rows)
overrideNoSwipe - (default false) set to true to override any ZIM noSwipe settings
for example, a Slider has zimNoSwipe set on its elements so swiping the list does not swipe a page in Pages
METHODS
enable() - set swipe to active (by default it is)
disable() - set swipe to inactive (sets active to false and does not dispatch)
PROPERTIES
type - holds the class name as a String
distance - the distance needed for swipe to activate
duration - the time from mousedown a swipe is measured for distance
direction - the direction of the last swipe (left, right, up, down or none)
obj - the object that was last swiped
active - Boolean true for dispatching swipes and false for not
EVENTS
dispatches a "swipe" event on every pressup (even if swipe failed and direction is none)
when a swipe event triggers
the Swipe event object has a swipeX and swipeY property that is -1,0, or 1
for left, none, or right OR up, none, down
the event object has an obj property as well for what object was swiped
also dispatches a "swipedown" event for convenience on a mousedown
LEGACY
the Swipe object provides a direction property of LEFT, RIGHT, UP, or DOWN
the Swipe object provides an obj property of what object was swiped on
for instance if e is the event object
then e.target is the Swipe object so use e.target.direction
did not dispatch a custom event due to lack of support in early IE
Swipe also dispatches a direction of "none" if the mouse movement is not a swipe
this can be used to snap back to an original location
CLOSE ▲PAGE ▤CODE ▤BITS VIDS
Swiper
zim class - extends a createjs EventDispatcher
DESCRIPTION
Swiper lets you change a property of any object (with damping) by swiping.
In a sense, it is like an invisible Slider.
You pass in the DisplayObject to swipe on - stage, Container, Bitmap, etc.
You pass in which object holds the property to animate and the property name.
Then Swiper will change this property with damping based on a sensitivity you set.
You can use horizontal or vertical but to do both, you need to make two Swiper objects.
Originally made for controlling 3D objects like rotation and scale
based on swiping a rectangle beneath the 3D object that is the same color as the stage.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const circle = new Circle(100, green).center();
// will move circle twice as fast as swipe
const swiper = new Swiper(S, circle, "x", 2);
EXAMPLE
const man = new Rectangle(50, 100, brown).center();
// will move man up an down slowly within vertical bounds of stage
const swiper = new Swiper(man, man, "y", .5, false, 0, H-man.height);
PARAMETERS supports DUO - parameters or single object with properties below
swipeOn - the DisplayObject to swipe on such as the stage or a Rectangle or Bitmap, etc.
target - the object that holds the property that you want to change
property - the property name as a String to change when swiping
Note: the Swiper will stop if the property value is less than .5 - this handles motion and rotation well
but if swiping for scale or alpha, etc. this may stop too soon
so set the min and max and the swiper will adjust to be one thousandth the difference between the two
sensitivity - (default 1) the change in property is equal to the change in distance times the sensitivity
set to 2 to change the property twice as fast as the swipe
set to .5 to change the property half as fast as the swipe
set to .001 to change the property very little while swiping
set to -1 to go the opposite way (or -2, -.5, -.001, etc.)
swiperType - (default HORIZONTAL) or set to VERTICAL or RADIAL
min - (default null) if specified, the property value will not go below this number
set min and max if swipe property is a small range - like for alpha or scale
max - (default null) if specified, the property value will not go above this number
set min and max if swipe property is a small range - like for alpha or scale
damp - (default .1) the damp value with 1 being no damping and 0 being no movement
integer - (default false) set to true to round the property value
factor - (default 1) is going the same direction and -1 is going in opposite direction
loop - (default false) set to true to loop the property within the min and max values
pauseTime - (default .2) time in seconds to call swipepause event (also see ZIM TIME constant)
triggers if no swipe motion and swipeOn is pressed
otherSwiper - (default null) pass in a second Swiper object
if the change in pixels is more on the other swiper then this swiper is not used
if the change in pixels is more on this swiper then this swiper is used
METHODS
immediate(val) - set the damping immediately to this value to avoid damping to value
dispose() - remove listeners and Ticker
PROPERTIES
type - holds the class name as a String
target - get or set the target for the property that you are changing
property - get or set the String property name that is being damped
desiredValue - the current value that the swiper is damping towards
sensitivity - get or set the sensitivity - see sensitivity parameter
min - read only get the min
max - read only get the max
damp - get or set the damp of the Swiper
enabled (default true) - set to false to disable the Swiper and visa versa
EVENTS
dispatches a "swipedown" event when swipe is started
dispatches a "swipemove" event when swipe is moving
dispatches a "swipeup" event when swipe is ended
dispatches a "swipepause" event when finger is not swiping but still down - see pauseTime parameter
dispatches a "swipestop" event when swipeup has happened and value has stopped changing (delay is due to damp)
CLOSE ▲PAGE ▤CODE ▤
MotionController
zim class - extends a createjs EventDispatcher
DESCRIPTION
MotionController lets you control an object (target) in a container (like the stage)
with "mousedown", "mousemove", "pressmove", "keydown", "gamebutton", "gamestick", "manual", etc. modes (types)
For instance, you can control a player in a game or a butterfly in field
SEE: https://zimjs.com/controller for more examples
SEE: https://zimjs.com/explore/sidescroller.html for keyboard work with Scroller, Sprite, Dynamo, Accelerator
SEE: https://zimjs.com/pen or https://zimjs.com/genpen (complex example)
SEE: https://zimjs.com/018/tileObj.html for moving on tile squares
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const circle = new Circle(40, green).center();
const controller = new MotionController(circle); // circle moves to mouse press position with damping
EXAMPLE
const rect = new Rectangle(50, 30, green).centerReg();
const controller = new MotionController({
target:rect,
type:"keydown",
diagonal:true,
damp:.1,
rotate:true
});
EXAMPLE
new MotionController({
target:new Pen().addTo(),
type:"pressmove",
damp:.5, // pen has damp too so can up this number
speed:20
});
EXAMPLE
F.loadAssets(["beach02.jpg", "playbeachball.png"], "https://zimjs.org/assets/"); // or load in Frame()
F.on("complete", ()=>{
const background = new Pic("beach02.jpg").scaleTo().center();
const ball = new Pic("playbeachball.png").siz(100).centerReg();
const scroller = new Scroller(background);
const accelerator = new Accelerator(scroller);
// control speed of Accelerator with MotionController
new MotionController({
target:accelerator,
type:"mousemove", // or "pressmove"
axis:HORIZONTAL,
// the Scroller makes two backings - backing1 and backing2
// allow pressing on both backings and ball to control scroller
mousedownIncludes:[scroller.backing1, scroller.backing2, ball],
speed:30,
minPercentSpeed:-1000,
maxPercentSpeed:1000,
boundary:new Boundary(0,0,W,0) // setting a boundary and speed will balance the control
});
// control position of ball with MotionController
new MotionController({
target:ball,
type:"mousemove",
// allow press on Scroller backings
mousedownIncludes:[scroller.backing1, scroller.backing2],
speed:10
});
});
PARAMETERS supports DUO - parameters or single object with properties below
target (default null) - the object you want to control
example a circle to move across the stage
can also be an Accelerator() to control percentSpeed
if you only want data from the MotionController you can leave the target parameter as null (don't include it)
can be a Pen() - both pen and motionController have damp parameter so probably adjust one or the other to 1
type - (default "mousedown") by default will move to where you press in the container
set to "mousemove" to have the target follow the mouse movement
set to "pressmove" to have target jump to mousedown position then follow while pressing - good for Pen
set to "pressdrag" to have target follow mouse if pressed on and then dragged (dedicated to Shan Ruan)
set to "keydown" to use keys to control the target (see map parameter)
set to "gamebutton" to use gamepad buttons to control the target (see map parameter)
set to "gamestick" to use gamepad stick(s) to control the target (see map parameter)
set to "swipe" to use swipe to control the target
set to "follow" to mousedown and hold and use F.follow() to keep moving towards mouse or press position
set to "manual" to set your own with myController.convert() or myController.x and myController.y properties
set to a ZIM DPad object to use the DPad to control the motion
speed - (default 7 or 20 if type is pressmove) pixels it will move each tick, keypress buttonpress, swipe, etc.
axis - (default BOTH or HORIZONTAL if target is Accelerator) or HORIZONTAL or VERTICAL (see diagonal parameter)
boundary - (default null) a ZIM Boundary object for the boundary
the registration point of the target will stay within this boundary
this boundary is relative to the stage (global)
if the boundary object is a Blob, the target will stay within the Blob
if a boundary relative to the object's parent is desired then set the localBoundary parameter to true
the boundary is automatically added to mousedownIncludes
ignored when target is Accelerator - use minPercentSpeed and maxPercentSpeed instead
map - (default null) an Array with left, right, up, down values (or array of values) as outlined below
- (default [[65,37], [68,39], [87,38], [83,40]] when type == "keydown") these are ADWS and arrows
- (default [14, 15, 12, 13] when type == "gamebutton") these are DPAD_LEFT, DPAD_RIGHT, DPAD_UP, DPAD_DOWN on a gamepad
- (default [14, 15, 7, 6] when type == "gamebutton" and firstPerson == true) these are DPAD_LEFT, DPAD_RIGHT, RT, LT on a gamepad
- (default [0, 0, 1, 1] when type == "gamestick") these are LSX, LSX, LSY, LSY on a gamepad
- (default [[0,2], [0,2], [1], [1]] when type == "gamestick" and firstPerson == true) turn with left or right stick X, advance with left stick Y
use [[0,2], [0,2], [1,3], [1,3]] for both sticks (first stick motion overrides second stick)
Note: MotionController will only use the 0 and the 2 index for speed as the sticks use -1 to 1 values
so you could not go only left with one stick and only right with another
Note: stick values may exceed -1 and 1 on occasion (see also stickThreshold)
diagonal - (default true) set to false to lock movement to horizontal or vertical only
damp - (default .1 or .5 if type is pressmove) the damp value with 1 being no damping and 0 being no movement
flip - (default null) set to HORIZONTAL, VERTICAL or BOTH to flip the target when in negative direction
flip will not work if the target starts rotated - so make the target a container and add a rotated object to the container
orient - (default false) set to true to face the direction of motion. Start direction is 0 which is to the right.
for example, a default ZIM Triangle points up so use triangle.rot(90)
before adding to the motionController to make it point to the right
Note that a target that is rotated will not pay attention to the flip parameter - see flip for solution.
constant - (default false) set to true to remove keyup or gamebutton up and always move in direction last key or button press
firstPerson - (default false) set to true for keydown, gamebutton and gamecontroller to go to first person mode
in firstPerson, the direction starts facing up and by default up arrow is speed forward and left and right change rotation
speed will be damped by damp parameter - also, map parameter changes if in firstPerson mode - see map parameter
turnSpeed - (default speed*.4) - the speed for turning in firstPerson mode - will be damped but damp parameter
moveThreshold - (default 5) pixels negative or positive to treat damped motion as stopped
stickThreshold - (default .2, default .8 with tileObj) gamepad stick axes values are from -1 to 1 but there is a lot of noise
so consider within +- stickThreshold as no motion 0
container - (default zimDefaultFrame stage) the Container the target is in - the stage is most likely fine
if container is specified, it must be on the stage when the MotionController is made
localBoundary - (default false) which means the boundary is global - set to true for a boundary in the object parent frame
mouseMoveOutside - (default true) set to false to not allow mouse movement outside the stage to affect motion
mousedownIncludes - (default null) a single object or array of objects (aside from the stage) to activate with mousedown
For mousedown and pressmove types, the mousedown will activate on the stage only
The controller assumes everything in the container will not activate the mousedown
This lets you activate interface elements without moving to them ;-)
If for instance, a backing is used other than the stage, just pass in the backing to this parameter
See also the mousedownIncludes property
The boundary is automatically added to mousedownIncludes
If the container is provided and it has a backing property, this is added automatically to the mouseDownIncludes at the start
The backing can be removed from the mousedownIncludes property with mc.mousedownIncludes.splice(mc.mousedownIncludes.indexOf(mc.container.backing, 1));
minPercentSpeed - (default 0) if target is an Accelerator, the percentSpeed at the left or top of the stage (depending on axis)
minPercentSpeed - (default 100) if target is an Accelerator, the percentSpeed at the right or bottom of the stage (depending on axis)
dampKeyup - (default .3) damping applied to slow down Accelerator with keydown
rotate - (depreciated) the same as orient - kept for backwards compatibility as of ZIM Cat 01
mouseOutside - (default false) if a container or boundary is provided, set to true to start motion if pressing outside container or boundary
tileObj - (default null) an object to direct the target to move on a theoretical board with tiles
works with type keydown, dPad, gamebutton and gamestick - for press tile movement see ZIM GameBoard and EasyStar path finding
note: the target must be initially placed properly on a tile to start
and if this is not the 0,0 tile then set the startCol and startRow properties
moves are then calculated based on original target position, the w, h, spacingH and spacingV
tileObj properties are as follows:
time (default .2, or .3 for type gamestick, or .4 for dPad) - the time between moves or to animate to next move
animate (default true) - set to false to not animate the target to the new tile
cols (default 5) - the number of columns of the tile (not used if there is a moves property)
rows (default 5) - the number of rows of the tile (not used if there is a moves property)
w (default 50) - the width of a tile (not the whole board but just a tile and not including spacing)
h (default 50) - the height of a tile (not the whole board but just a tile and not including spacing)
spacingH (default 3) - the spacing horizontal between each tile
spacingV (default 3) - the spacing vertical between each tile
startCol (default 0) - the column index on which the target starts (must still place target at the right location)
startRow (default 0) - the row index on which the target starts (must still place target at the right location)
moves (default null) - set to an array of rows each with array of columns
for allowed moves use 1 and for not-allowed moves use 0
to move anywhere on 5x3 grid except the corners and the middle
moves:[
[0,1,1,1,0],
[1,1,0,1,1],
[0,1,1,1,0]
]
note: this will override the cols and rows values
METHODS
pause(state, time) - state defaults to true and pauses the motionController (sets speed to 0)
set state to false to unpause the motionController (sets speed to speed before pausing)
set the time (default 0) to the seconds to take while slowing the motionController to 0 speed (also see ZIM TIME constant)
immediate(x, y) - set the damping immediately to this value to avoid damping to value - returns object for chaining
convert(x, y) - for manual mode, pass in x and y and damping and rotation will be calculated
dispose() - remove listeners and Ticker, Swiper and GamePad, where applicable
PROPERTIES
type - holds the class name as a String
target - the target that you are controlling
target.x and target.y will give you damped x and y
x - the desired x position of the target before damping is applied (use this for manual input - or convert() method)
y - the desired y position of the target before damping is applied (use this for manual input - or convert() method)
dirX - the x direction the player is moving (-1,0,1)
dirY - the y direction the player is moving (-1,0,1)
rotation - read only rotation of the player in degrees
scaleX - read only scaleX of player (to get flip data if only using controller for data)
scaleY - read only scaleY of player (to get flip data if only using controller for data)
dampX - reference to the horizonal Damp object
dampY - reference to the vertical Damp object
dampKeyup - get or set keyup damping for when using an accelerator
paused - read only - true if paused and false if not - must be set with pause() method
speed - the speed setting which will be multiplied by direction
turnSpeed - the turn speed for firstPerson mode
axis - the axis (horizontal, vertical or both);
moving - get Boolean as to whether the target is moving (within moveThreshold)
movingX - get Boolean as to whether the target is moving in x direction (within moveThreshold)
movingY - get Boolean as to whether the target is moving in y direction (within moveThreshold)
boundary - get or set the Boundary object
gamepad - reference to GamePad object if applicable - allows you to use this for more events like jumping, shooting, etc.
moveThreshold - the maximum value (+-) within which movement is considered stopped
stickThreshold - the maximum value (+-) within which the gamepad stick axes values are considered 0
mousedownIncludes - an array of objects that the mousedown will work on - along with the stage
note: if manually setting this and there is a boundary then add the boundary to the mousedownIncludes as well
moveGrid - get or set the moves of a provided tileObj - see the tileObj parameter
note: this will not reposition the target if changed
enabled - set to false to disable or true to enable MotionController - can toggle with enabled = !enabled
ALSO
adds a motionController property to target referencing the MotionController object
EVENTS
dispatches a "change" event for changes in direction with dir as property of event object
that will hold LEFT, RIGHT, UP, DOWN, null (no direction)
dispatches a "mousedown" event if type is "mousedown" or "pressmove"
dispatches a "pressing" event if type is "pressmove" - note, this dispatches even if not moving
dispatches a "moving" event if target is moving and "startmoving" and "stopmoving" events
CLOSE ▲PAGE ▤CODE ▤VIDS
GamePad
zim class - extends a createjs EventDispatcher
DESCRIPTION
GamePad connects to Game Controllers as inputs using the HTML navigator.getGamepads API
Dispatches buttondown and buttonup events for the following common buttons:
"A","B","X","Y", (or for Triangle, Circle, Cross and Square)
"LB","RB","LT","RT", (for left bumper, right bumper, left trigger, right trigger)
"BACK","START",
"LS","RS", (for left stick press, right stick press)
"DPAD_UP","DPAD_DOWN","DPAD_LEFT","DPAD_RIGHT"
The event object will have a button property telling which button is pressed using the string values above
Dispatches a "data" event constantly to get axes data for the sticks (and constant data for the buttons)
The event object in this case will have axes and buttons properties
The axes property is an array of four numbers for the left and right stick's x and y properies (-1 to 1)
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const gamepad = new GamePad();
gamepad.on("buttondown", e=>{
// only fires once per button press (unlike constant keydown event)
zog(e.button); // LT for instance for Left trigger
if (e.button == "LT") {
zog("left trigger is down");
}
zog(e.buttonCode); // 6
if (e.buttonCode == GamePad.LT) {
zog("another way to do catch left trigger down");
}
});
gamepad.on("buttonup", e=>{
zog(e.button); // LT for instance for Left trigger
}
gamepad.on("data", e=>{
// fires constantly in a requestAnimationFrame
zog(e.axes[0]); // left stick x or horizontal data from -1 to 1 (lots of decimal noise)
zog(e.axes[GamePad.LTX]); // another way of accessing left stick x
zog(e.buttons[9]); // true or false depending on if the START button is pressed
zog(e.buttons[GamePad.START]); another way to find if the START button is pressed
});
METHODS
dispose() - removes all listeners and cancels requestAnimationFrame
PROPERTIES
type - holds the class name as a String
connected - Boolean true if connected and false if not connected (may need to press key, etc)
currentIndex - get or set the index of the controller
gives multiple controller support - make two GameController objects and set different indexes
data - object that holds buttons (raw data - slightly different than buttons below) and axes properties
buttons - an array of Booleans as to whether the button is pressed
the order of the buttons match the order of the constants below
constants: A,B,X,Y,LB,RB,LT,RT,BACK,START,LS,RS,DPAD_UP,DPAD_DOWN,DPAD_LEFT,DPAD_RIGHT
GamePad.A == 0
GamePad.B == 1, etc. up to
GamePad.DPAD_RIGHT == 15
axes - an array of four stick values from -1 to 1
for left x and y and right x and y values (or horizontal and vertical values)
constants: LSX,LSY,RSX,RSY
GamePad.LSX == 0
GamePad.LSY == 1
GamePad.RSX == 2
GamePad.RSY == 3
EVENTS
dispatches a "gamepadconnected" and gamepaddisconnected when connected and disconnected
these have an event object with index and id properties - the index and id may not work in chrome
dispatches a "buttondown" event with button and buttonCode properties
dispatches a "buttonup" event with button and buttonCode properties
dispatches a "data" event with axes and buttons array properties
these can be handled as outlined in the description and examples
CLOSE ▲PAGE ▤CODE ▤VIDS
Portal
zim class - extends a CreateJS EventDispatcher
Dedicated to Stephen Hawkings - may he be portal on!
DESCRIPTION
Turn an object into a portal that lets the user enter the portal to change lands, etc.
The portal works based on mouseover (or press for mobile)
The lands need to be stacked in a Container with the first land at the top.
Portal will pass users throught the lands and loop at the end back to the first land.
Alternatively, if loop is turned to false, Portal will backtrack the user through the lands
Pass the container of lands into the lands parameter - most often you will have two lands, but more are fine too!
Alternatively, the portal can be used without lands - and you can customize what you want to happen with portal events.
The object will be used as a mask to show the next land.
You can set the alpha of the object to any value above .01 to hide the object and show the land (do not use 0)
If your object is a ZIM shape, you can use rgba(0,0,0,.01) as the color and still have an opaque borderColor
SEE: https://zimjs.com/portal/NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
F.loadAssets(["researchbuilding.jpg", "jungle.jpg"]);
F.on("complete", ()=>{
const lands = new Container(W, H).addTo();
const jungle = new Pic("jungle.jpg")
.scaleTo(lands)
.center(lands);
const researchBuilding = new Pic("researchbuilding.jpg")
.scaleTo(lands)
.center(lands);
const portalObject = new Circle(118, faint, pink, 16, true)
.addTo(stage)
.pos(580, 470)
.animate({obj:{rotation:"360"}, time:70, ease:"linear", loop:true});
const portal = new Portal(portalObject, lands);
portal.on("enter", function() {
// play a sound here!
});
// use enabled to turn on and off portal
timeout(1, ()=>{portal.enabled = false; portalObject.pauseAnimate(true);});
timeout(5, ()=>{portal.enabled = true; portalObject.pauseAnimate(false);});
S.update();
}); // assets loaded
PARAMETERS supports DUO - parameters or single object with properties below
obj - the Display Object that will be the portal
lands - (default null) optional container of "lands" or display objects to portal through
The Display Objects in the lands container (lands) should be on the stage
The lands are adjusted by Portal so the currentLand is the second child and the nextLand is the first child.
This is due to how the masking works.
Inserting new lands or removing lands below an index of lands.numChildren-2 is okay
Use addTo(lands, index) or removeFrom(lands).
If you adjust either of the top two lands in the container, this will affect what is see on stage.
METHODS
dispose() - remove the events - the obj and lands will be left as is - manually remove these if needed
PROPERTIES
type - holds the class name as a String
portal - a reference to the portal obj
enabled - Boolean as to whether the portal is active or not
currentLand - get or set the active land if lands is provided
nextLand - get (read only) the next land to go to if lands is provided
EVENTS
dispatches an enter event on mouseover of the portal and an exit event on mouseout
CLOSE ▲PAGE ▤CODE ▤VIDS
Physics
zim module
** MUST import zim_physics - see https://zimjs.com/es6.html#MODULESDESCRIPTION
The Physics class provides a wrapper for the Box2D physics engine.
Both Box2D and the ZIM physics JavaScript files must be imported after ZIM.
Once installed, physics can be turned on for ZIM DisplayObjects such as:
Rectangle, Circle, Triangle, Blob, Squiggle, Bitmap, Label, Sprite, Shape, etc.
NOTE
The DisplayObjects used in Physics should have center registration and be on the stage
or in a non-transformed Container at 0,0 on the stage.
Use the DisplayObject's addPhysics() method to add the object to a physics world.
This will also add more methods and properties to the DisplayObject.
The physics world can be set up ahead of time with new Physics()
or if a world is not already created the addPhysics() method will make a default world.
The default world will have a boundary of the frame and gravity of 10 (normal gravity).
SHAPES
By default the physics body shape will be a rectangle that matches the bounding box of the DisplayObject.
However, a Circle will be have a physics circle and a Triangle will have a physics triangle.
"circle", "rectangle" or "triangle" can be passed in to the addPhysics() method to override the actual shape.
The expand parameter can be used to make the physics object bigger or smaller than the bounds.
Blob and Squiggle objects receive a polygon at each point and as of ZIM 017 can now be concave (a previous limitation)
The polygon cannot cross itself and points must be in clockwise order
Also see the ZIM outlineImage() and simplifyPoints() functions https://zimjs.com/017/outline.html
PHYSICS
Objects have impulse(), force(), spin() and torque() methods to push them around and spin them.
impulse() is a one time push like shooting a pool ball
force() is a force over time like gravity or wind and is applied in a Ticker, keydown, etc.
spin() is a one time spin of the object around its center
torque() will rotate the object over time and is applied in a Ticker, keydown, etc.
The physics class has a join() method that can join objects in a variety of physics joints.
The physics class has a drag() method to specify which objects are draggable.
There is a debug() method to see the physics world behind ZIM.
The world can be set up to be bigger than the frame and follow() an object.
Objects are given a control() method to use keyboard keys to move the object.
Contact can be tested for with contact() and contactEnd()
each which receive a callback function that is provided with the other contacting body
BOX2D
https://box2d.org/documentation or
https://www.box2dflash.org/docs/2.0.2/manual
Box2D has many other features that can be accessed as well.
Note that the ZIM Physics makes much of this easier
so start with ZIM and use the Box2D docs and manuals for custom requirements.
The Physics class has a world poperty that refers to the Box2D world.
Each ZIM DisplayObject with physics() turned on has a body property
that refers to the Box2D body and a physics property that refers to its Physics object.
See the properties listed below for more information.
SEE: https://zimjs.com/physics/ for examples
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
new Circle().center().addPhysics(); // circle will fall with gravity to the floor
EXAMPLE
// usually, we add a Physics object so we can set gravity, drag, etc.
const physics = new Physics().drag(); // turn drag on
// center registration for rectangular objects
const rect1 = new Rectangle(200,100,purple).reg(CENTER).pos(50,50).addPhysics();
const rect2 = new Rectangle(100,200,blue).reg(CENTER).pos(50,50,RIGHT).addPhysics();
// physics.debug(); // uncomment to see debug mode
EXAMPLE
// create a world with no gravity (viewed from top like air-hockey)
const physics = new Physics(0);
const circle = new Circle(50,blue,grey).center().addPhysics({bounciness:.7});
// make sure to reg(CENTER) or centerReg() any rectangular objects
const rect = new Rectangle(30,400).reg(CENTER).pos(70,0,LEFT,CENTER).addPhysics(false); // static - do not move
const tri = new Triangle(150,150,150,green,grey).pos(200,0,LEFT,CENTER).addPhysics({linear:10}); // does not slide easily
physics.drag(); // note: to add a boundary use the borders parameter of Physics()
// test to see if circle hits rectangle
// contact callback function receives ZIM object (and physics body as next param)
// a ZIM border will have a type = "Border" and a side = LEFT, RIGHT, TOP, "bottom"
// but it is not really a ZIM Rectangle but just an object literal placeholder
circle.contact(obj=>{
if (obj == rect) {
rect.color = red;
timeout(.3, ()=>{
rect.color = black;
// circle.noContact(); // could only check once...
})
}
});
EXAMPLE
// control a ball with a DPad - better than keys for mobile
const physics = new Physics(0);
const ball = new Circle().center().addPhysics();
const dPad = new DPad().pos(40,40,LEFT,BOTTOM);
ball.control(dPad, 80);
EXAMPLE
// attach a physics object to a ZIM object
// this is like a mousejoint similar to drag() but attached to an object rather than the mouse
// so a physics object can follow a ZIM drag() or animate() or wiggle(), etc.
// the original distance between the objects is maintained like a distance joint
// see https://zimjs.com/valentines/puppets.html
// see https://zimjs.com/valentines/puppets2.html
const physics = new Physics(0);
const control = new Triangle().center().mov(0,-100).drag(); // or animate() or wiggle()
const ball = new Circle().center().addPhysics();
physics.attach(control, ball); // physics ball will be moved by triangle
EXAMPLE
import zim from "https://zimjs.org/cdn/017/zim_physics"; // or latest version
new Frame(FIT, 1024, 768, light, dark, ready, "cathead.png", "https://zimjs.org/assets/");
function ready() {
const pic = new Pic("cathead.png").center();
const physics = new Physics().drag();
const blob = new Blob({
points:simplifyPoints(outlineImage(pic), 10), // 10 is the default tolerance
color:faint,
interactive:false
}).loc(pic).addPhysics();
pic.addTo(blob);
zog(physics.validate(blob)); // check validation
new Circle(50,black).pos(0,100,CENTER).addPhysics();
}
EXAMPLE
new Physics();
const circle = new Circle(20,red)
.center()
.wiggle("x", null, 100,200,1,2)
.wiggle("y", null, 100,200,1,2); // note - no physics
const ring = new Circle(100,clear,purple,2)
.center()
.addPhysics()
.puppet(circle); // ring will follow circle
new Rectangle(100,100,purple)
.reg(CENTER)
.center()
.mov(50,50)
.addPhysics(false); // static
PARAMETERS - FOR PHYSICS
** supports DUO - parameters or single object with properties below
gravity - (default 10) the gravity force in the downward direction
borders - (default the frame bounds) a ZIM Boundary() object or object literal with x, y, width and height properties
this makes physics body rectangles around the physics world
pass in "none" for no borders
you can remove border bodies afterwards with physics.remove(physics.borderTop)
and then borderLeft, borderRight and borderBottom
scroll - (default false) set to true to be able to scroll the stage x an y
This will let you follow a physics object - see follow() method
frame - (default zdf) the zim.Frame object
METHODS - FOR PHYSICS - see also OBJECT METHODS and BODY METHODS below
borders(boundary) - (default frame bounds) a ZIM Boundary() object or an object literal {} with x, y, width and height
pass in "none" for no borders - also see borders parameter
will remove old borders bodies before making new
drag(array) - drag all physics objects (with dynamic set to true)
array - (default null) pass in an object or an array of objects to drag
Note: physics dragging is applied on the Physics class to not overwrite traditional ZIM drag() on DisplayObjects
noDrag(array) - stop dragging all physics objects or pass in an array
array - (default null) pass in an object or an array of objects to stop dragging
pause(type) - pauses physics if type is true (default), resumes physics if type is false
join(obj1, obj2, point1, point2, minAngle, maxAngle, type) - creates and returns a physics joint
** supports DUO - parameters or single object with properties below
obj1 - the first ZIM DisplayObject (with physics turned on) to join together
obj2 - the second ZIM DisplayObject (with physics turned on) to join together
point1 - (default center of object) the anchor point of the joint on the first object
point2 - (default center of object) this is only needed on a distance joint
minAngle - (default null) the minimum angle the joint can make from its starting angle
maxAngle - (default null) the maximum angle the joint can make from its starting angle
type - (default "weld") the type of joint
set to "distance" to keep the same distance between two object anchors
set to "revolute" to rotate objects around a fixed point relative to the first object
set to "weld" to fix the objects together
break(joint) - break a joint created with join()
to use, store the result of the join() method in a variable and pass that variable in to break()
attach(control, obj) attach a physics object (obj) to a ZIM object (control) to like a mousejoint to the ZIM object not the mouse
the control can then be animated, wiggled, dragged and the physics object will follow it
returns an id to be able to unattach
const id = physics.attach(triangle, circle);
timeout(2, ()=>{physics.unattach(id)});
unattach(id) unattach a physics object from the ZIM object based on the stored id from attach();
buoyancy(height, denisity, linear, angular) returns a Box2D buoyancy controller. Then need to add() or remove() objects
height - (default H/2) is pixels from bottom of the stage
density - (default 3) density of fluid - the higher the more an object floats
linear - (default 4) linear damping to reduce movement
angular - (default 4) angular damping to reduce rotation
the buoyancy controller will have the following methods:
add(obj) - add object with physics or an array of objects with physics to buoyancy controller
returns buoyancy object for chaining
remove(obj) - remove object or an array of objects from buoyancy controller
returns buoyancy object for chaining
clear() - remove all objects from buoyancy controller
returns buoyancy object for chaining
dispose() - deletes buoyancy controller
debug() - activates the debugging - returns object for chaining
updateDebug() - updates the debug canvas if the frame has been scaled (put in frame resize event)
removeDebug() - removes the debug canvas - you can add it again later (or toggle, etc.)
// FOR BODIES ONLY (legacy - but may not need a visual ZIM object)
makeRectangle(width, height, ... all addPhysics() params) - makes a Box2D body in the shape of a rectangle - see parameters
makeCircle(radius, ... all addPhysics() params) - makes a Box2D body in the shape of a circle - see parameters
makeTriangle(a, b, c, ... all addPhysics() params) - makes a Box2D body in the shape of a triangle
all three add x, y and rotation properties to body (use at start)
all three support ZIM DUO single parameter as an object using param names as keys
remove(body) - removes a physics body - use on border bodies, for instance
this is for physics bodies only - use obj.removePhysics() to remove physics from ZIM DisplayObjects
addMap(body, asset) - sets x, y, rotation of ZIM asset to Box2D body
this can be automatically done by using the physics() method on the ZIM DisplayObject
removeMap(body) - removes mapping (then probably will want to remove body and removeChild)
see the removePhysics() method of a ZIM DisplayObject
separate(body, fixtureDef, verticesAry, scale) - uses an additional b2Separate() class by Antoan Angelov
used internally by Blob and includes validate() method below:
validate(obj) - tests to see if Blob or an array of {x,y} points is a valid polygon
returns the following:
0 if the vertices can be properly processed
1 If there are overlapping lines
2 if the points are not in clockwise order
3 if there are overlapping lines and the points are not in clockwise order
dispose() - stops the update, removes debug if there - you still need to remove ZIM assets
a delay of 50 ms might be needed before disposing children to let the physics dispose
*** also see zim.Ticker below for methods to add and remove functions from update function
PROPERTIES - FOR PHYSICS - see also OBJECT PROPERTIES and BODY PROPERTIES below
world - the Box2D world that is made
frame - the Frame the physics is operating on
see: https://zimjs.com/expand/physics.html for example
note: will have to call drag() again if changing frames
note: may have to redo borders if frame has different dimensions
scale (read only) scale used in world (constant 30)
step (read only) step used in world (constant 20)
timeStep - 1/step - set to 0 to pause physics but also see paused() method
could animate this property to slow down or speed up physics
gravity - get or set gravity used in world
paused (read only) whether physics has been paused with pause() method
scroll - get or set the scroll of the physics world
see the Physics scroll parameter and the follow() method of objects
Ticker - gives access to update function to add your own functions:
physics.Ticker.add(function, after)
after defaults to true for after world step and force clear
set after to false to run function before world step
physics.Ticker.remove(function)
controlObj - the ZIM DisplayObject being controlled by the obj.control() method
followObj - the ZIM DisplayObject being followed by the obj.follow() method
borderTop - the top border physics body of the world if it exists
borderBottom - the bottom border physics body of the world if it exists
borderLeft - the left border physics body of the world if it exists
borderRight - the right border physics body of the world if it exists
METHODS - FOR OBJECTS - also see BODY METHODS below
** the ZIM DisplayObject comes with an addPhyics() method
** for reference, here are the docs for the addPhysics() method
** all the methods below addPhysics are the methods added to the DisplayObject
addPhysics(dynamic, contract, shape, friction, linear, angular, density, bounciness, maskBits, categoryBits, physics, restitution, sensor)
** supports DUO - parameters or single object with properties below
dynamic - (default true) - set to false to not move the physics body (static)
contract - (default 0) - make the physics body smaller (or bigger with negative) than bounds
shape - (default object shape) - "rectangle" for any object other than Circle, Dial and Triangle
but can specify a "circle" for a Sprite or Bitmap, for instance - to try and match shape
custom polygon bodies can also be made with manual Box2D and then use physics.addMap()
but the only shapes available automatically are "rectangle", "circle", "triangle"
friction - (default .8) - how sticky will the body act - set to 0 to slide.
linear - (default .5) - linear damping which slows the movement - set to 0 for no damping
angular - (default .5) - angular damping which slows the rotation - set to 0 for no damping
density - (default 1) - the density that can affect what happens with collisions
bounciness - (default 0) - how bouncy the object is - 0 is not bouncy 4 is crazy bouncy
maskBits - (default null) - used with categoryBits to determine which bodies will collide with which other bodies
as soon as maskBits is specified, the body will collide only with the categoryBits provided to the maskBits parameter
1 will collide with bodies that do not have categoryBits specified including the borders
to test collision with bodies that have categoryBits specified, use the pipe (|) as follows:
1|2 will also collide with bodies having categoryBits of 2 specified
so if another body has categoryBits of 4 then the bodies would not collide.
1|2|4 would also collide with 4 but not bodies with categoryBits of 8, etc.
2|4 would pass through any bodies without categoryBits of 2 or 4 including the borders
categoryBits - (default 1) - a collision category - by default, bodies are in category 1
use with maskBits to say which bodies will collide with which other bodies
the values are bit fields https://en.wikipedia.org/wiki/Bit_field so can have the following values:
can be 2, 4, 8, 16, 32, 64, 128, 256, etc. up to 15 powers of 2
physics - (default zimDefaultPhysics)
restitution - (default bounciness) - replaced by bounciness - kept for backwards compatibility
sensor - (default false) - set to true to make object not interact but still trigger contact() and contactEnd()
this is like the Box2D hitTest for non interaction
removePhysics() - lets you remove the DisplayObject from the physics world
to add back to the physics world, use the addPhysics() method
impulse(x, y, targetX, targetY) - add a one-time force on the object like a hitting a pool ball
x - (default 0) the force in the x direction
y - (default 0) the force in the y direction
targetX - (default center of object) the x location on the object where the force acts
targetY - (default center of object) the y location on the object where the force acts
force(x, y, targetX, targetY) - add a force over time on the object like a gravity or wind
this is applied in a new Ticker or on keydown, etc. many times
just applying the force once will not do anything - use an impulse() for that
x - (default 0) the force in the x direction
y - (default 0) the force in the y direction
targetX - (default center of object) the x location on the object where the force acts
targetY - (default center of object) the y location on the object where the force acts
spin(amount) - add a one time turning force to an object
torque(amount) - add a turning force over time on the object
this is applied in a new Ticker or on keydown, etc. many times
just applying the torque once will hardly do anything - use an spin() for that
setLinearVelocity(x, y) - set the linear velocity - this overrides current forces
so might look unnatural as setLinearVelocity(0,0) will stop the object moving
setAngularVelocity(amount) - set the angular velocity - this overrids current forces
so might look unnatural as setAngularVelocity(0) will stop the object spinning
sleep() - puts object to sleep so no physics calculations are done
wake() - wakes up object from sleep so physics calculations are done
follow(damp, dampY, leftOffset, rightOffset, upOffset, downOffset, offsetDamp, offsetDampY, horizontal, vertical, borderLock, borderOriginal)
moves stage to to follow ZIM object
set the scroll parameter of Physics to true
pass in null for obj to stop following - then can position stage with x and y
** supports DUO - parameters or single object with properties below
damp - (default .05) the damping of the motion of the stage - 1 moves faster, 0 not at all
dampY - (default damp) can set to damp vertical movement at a separate rate
leftOffset - (default 0)
rightOffset - (F.width)
the object will try and move to leftOffset when moving right and rightOffset when moving left
this counters the damping so that the user can see in the direction of motion
when the object is not being controled it moves to the average between left and right offsets
upOffSet - (default 0)
downOffSet - (default F.height)
same as offsets above but in the y direction
offsetDamp - (default .02) the damping for moving the object to the offset
offsetDampY - (default offsetDamp) - damping for moving the object to the y offset if desired to be different than x
horizontal - (default true) set to false to not follow horizontally
vertical - (default true) set to false to not follow vertically
borderLock - (default true) locks follow to borders if borders are not "none"
borderOriginal - (default false) set to true to lock follow to original borders even if removed
control(type, speed, speedY, horizontal, vertical) - control object with arrows
see noControl() to turn off object control
** supports DUO - parameters or single object with properties below
type - (default "both") or set "wasd" or "arrows" or a ZIM DPad object
speed - (default 200) the speed of the object motion (also speed property on object)
speedY - (default speed) or set to specify a different y speed than the x speed (also speedY property on object)
horizontal - (default true) set to false to not control horizontal motion
vertical - (default true) set to false to not control vertical motion
customControl(dir, speed, speedY) - available only if control() is set.
pass in LEFT, RIGHT, UP, DOWN and optional speed (otherwise uses control() speed)
for operating object with buttons or accelerometer for instance
these will then take the place of keys or DPad
noControl() - remove control for an object set with control()
contact(call) - run the call function when object's body contacts another body
the callback function receives three parameters
the other ZIM object being hit
the other ZIM object being hit's Physics body
the original ZIM object that the contact method is on
a border will have a type = "Border" and a side = LEFT, RIGHT, TOP, "bottom"
but it is not really a ZIM Rectangle but just an object literal placeholder
Also see sensor parameter to trigger contact but with no physics interaction
contactEnd(call) - run the call function when object's body ends contacts with another body
the callback function receives three parameters
the other ZIM object being hit
the other ZIM object being hit's Physics body
the original ZIM object that the contact method is on
a border will have a type = "Border" and a side = LEFT, RIGHT, TOP, "bottom"
but it is not really a ZIM Rectangle but just an object literal placeholder
Also see sensor parameter to trigger contact but with no physics interaction
noContact() - remove contact call
noContactEnd() - remove contactEnd call
puppet(o) - make object go to the x and y of the object passed into to the o parameter.
this will make the equivilant of a mouseJoin so physics is not broken
so that physics objects can be joined to ZIM objects
and controlled with animate(), wiggle(), zim drag(), gesture(), transform(), etc.
note: it is the x and y property only, not rotation or scale.
see https://zimjs.com/018/puppet.html
noPuppet() - stop the object from being a puppet
PROPERTIES - FOR OBJECTS - see also BODY PROPERTIES below
dynamic - set to true for dynamic and false for static
there is also kinematic that can be set using the obj.body.SetType(1)
speed - get or set the speed of an object that is controlled by control()
speedY - get or set the speedY of an object that is controlled by control()
puppetJoint - get the puppetJoint if puppet is set - will be null if puppet is not set
** normal x, y, rotation or pos(), loc(), rot() will not work with physics!
** see the BODY loc(x,y) METHOD and the rotation PROPERTY below
** these should really not be set at all in the physics world
** but rather let the forces, etc. work them out
** it is best to set traditional properties before calling physics()
METHODS - FOR BODY (a physics engine body)
loc(x,y) - generally, we should not manually adjust x and y but rather use forces - returns body for chaining
but for resetting things, etc. use zimObj.body.loc(x, y)
Do not use zimObj.loc() or zimObj.x or zimObj.y - these will only work BEFORE adding physics
rot(angle) - set the rotation property of the body of the phsyics object - returns body for chaining
Do not use zimObj.rot() or zimObj.rotation - these will only work BEFORE adding physics
** for scale, another object will need to be made
** the ZIM DisplayObject body property provides access to the following Box2D methods (note, all start with uppercase):
** commonly used methods are handled through ZIM wrapper methods on the DisplayObject
** see https://www.box2dflash.org/docs/2.1a/reference/ for very basic docs
Advance() ApplyForce() ApplyImpulse() ApplyTorque() CreateFixture() CreateFixture2() DestroyFixture()
GetAngle() GetAngularDamping() GetAngularVelocity() GetContactList() GetControllerList() GetDefinition()
GetFixtureList() GetInertia() GetJointList() GetLinearDamping() GetLinearVelocity()
GetLinearVelocityFromLocalPoint() GetLinearVelocityFromWorldPoint() GetLocalCenter() GetLocalPoint(
GetLocalVector() GetMass() GetMassData() GetNext() GetPosition() GetTransform() GetType() GetUserData()
GetWorld() GetWorldCenter() GetWorldPoint() GetWorldVector() IsActive() IsAwake() IsBullet() IsFixedRotation()
IsSleepingAllowed() Merge() ResetMassData() SetActive() SetAngle() SetAngularDamping() SetAngularVelocity()
SetAwake() SetBullet() SetFixedRotation() SetLinearDamping() SetLinearVelocity() SetMassData() SetPosition()
SetPositionAndAngle() SetSleepingAllowed() SetTransform() SetType() SetUserData() ShouldCollide()
Split() SynchronizeFixtures() SynchronizeTransform() b2Body() connectEdges()
PROPERTIES - FOR BODY (a physics engine body)
zimObj - the ZIM Object that the body is mapped to
** traditional properties should be set before calling phyics()
** but the following properties are provided
x - deprecated - please use the BODY's loc(x, y) method - note: zimObj.body.loc() is not the same as the zimObj.loc() method
y - deprecated - please use the BODY's loc(x, y) method - note: zimObj.body.loc() is not the same as the zimObj.loc() method
rotation - the rotation of the body (degrees) - setting this will also rotate the ZIM DisplayObject
Also see obj.body.SetFixedRotation() to stop the physics body from rotating https://zimjs.com/zapp/print/Z_C6SBW
And the counter rotation technique here: https://zimjs.com/data/
GLOBAL VARIABLES
** Making a new Physics() or using physics() on a ZIM DisplayObject
** gives global shortcut access to the following Box2D classes:
** these all have methods and properties https://www.box2dflash.org/docs/2.1a/reference/
b2Vec2 = Box2D.Common.Math.b2Vec2;
b2BodyDef = Box2D.Dynamics.b2BodyDef;
b2Body = Box2D.Dynamics.b2Body;
b2FixtureDef = Box2D.Dynamics.b2FixtureDef;
b2Fixture = Box2D.Dynamics.b2Fixture;
b2World = Box2D.Dynamics.b2World;
b2PolygonShape = Box2D.Collision.Shapes.b2PolygonShape;
b2CircleShape = Box2D.Collision.Shapes.b2CircleShape;
b2MouseJointDef = Box2D.Dynamics.Joints.b2MouseJointDef;
b2DistanceJointDef = Box2D.Dynamics.Joints.b2DistanceJointDef;
b2RevoluteJointDef = Box2D.Dynamics.Joints.b2RevoluteJointDef;
b2WeldJointDef = Box2D.Dynamics.Joints.b2WeldJointDef;
b2AABB = Box2D.Collision.b2AABB;
b2DebugDraw = Box2D.Dynamics.b2DebugDraw;
b2BuoyancyController = Box2D.Dynamics.Controllers.b2BuoyancyController;
b2ContactListener = Box2D.Dynamics.b2ContactListener;
CLOSE ▲PAGE ▤CODE ▤VIDS
TimeLine
zim class extends zim Container which extends a createjs Container
DESCRIPTION
Automatically adds a ZIM Silder that scrubs through animations added to the Timeline.
There is a play and pause and a menu with speed, labels, loop, trails and color settings.
This will most-likely be used for learning - for testing animations, etc.
The pop-up menu button can be removed with timeline.menu.removeFrom();
The menu can be cleared with timeline.pane.contentContainer.removeAllChildren();
Or the menu can customized with timeline.pane.add(someObject);
SEE: https://zimjs.com/015/timeline.htmlNOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const icon = F.makeIcon({box:clear })
.reg(CENTER)
.loc(150,450)
.alp(0)
.sca(0)
.animate({
props:[
{props:{scale:2, alpha:1, x:300}},
{props:{x:850}, time:2},
{props:{rotation:360, scale:1, alpha:0}}
]
});
new Rectangle().reg(CENTER).pos(70,100,LEFT,BOTTOM).animate({
props:{rotation:90},
rewind:true,
loop:true
});
const path = new Squiggle({showControls:false}).transformPoints("scale", 2).pos(0,100,CENTER);
new Circle(50,red).addTo().rot(90).animate({path:path},4)
new Timeline(); // note, the Timeline will be automatically added at the bottom
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
objects - (default all objects on stage with animations) an object or array of objects with animations
width - (default stage width / 2) the width of the Timeline
startPaused - (default false) set to true to start paused
barColor - (default tin) the color of the slider bar
buttonColor - (default light) the icon color of the buttons
themeColor - (default purple) the backgroundColor of the buttons and the menu pane
corner - (default 5) set the corner of the Timeline - can use and array too
ticks - (default false) set to true to add ticks and labels to the slider
damp - (default false) set to true or a number between 0 and 1 like .2 with lower numbers being more damping
loop - (default true) set to false to not loop the animations
noLoop - (default false) set to true to prevent individual objects from looping as Timeline is played
call - (default false) callback function to call when done or looping
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly
METHODS
setThemeColor(color) - set the theme color - does not have to be the colors in the menu
dispose() - get rid of all events and objects - the animations will still work.
ALSO See the CreateJS Easel Docs for Filter methods, such as: getBounds()
PROPERTIES
type - holds the class name as a String
backing - access to the backing rectangle
shade - access to the left backing
shade2 - access to the right backing
slider - access to the slider
controls - access to the left button
menu - access to the right button
pane - access to the menu pane
title - access to the title in the menu
icon - access to the ZIM icon in the menu
list - access to the list in the menu
themeColor - get the current theme color
CLOSE ▲PAGE ▤CODE ▤
BlurEffect
zim class extends createjs BlurFilter
DESCRIPTION
Blurs a DisplayObject in the x and/or y direction with a quality
Can be passed in to effect() method to apply effect.
Properties can be changed and updated and then updateEffects() called.
Properties can be animated and wiggled.
Use noEffect("blur") to remove blur effect.
SEE: https://zimjs.com/cat/effects.htmlNOTE
Effects are quite processor intensive so use sparingly.
Each effect processes every pixel - when animating this results in hundreds of thousands of loops.
ZIM has wrapped the CreateJS filters, filter property, caching and cacheUpdate system
to make accessing filters easy - but apps will slow down if they are over-used.
Keep the quality at 1 for animating filters at a decent framerate.
Consider pre-processing images if effects do not have to be dynamic.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// add a blur effect then remove it after 2 seconds
const rect = new Rectangle()
.center()
.effect(new BlurEffect(20, 20));
timeout(2, ()=>{
rect.noEffect();
// // or if other effects to keep use:
// rect.noEffect("blur");
// // or to update effect use:
// rect.effects.blur.blurY = 200;
// rect.updateEffects();
// // can also store effect in variable and access properties on the variable
// // rather than on the effects property of the object
S.update();
});
EXAMPLE
// add a 200 blurX effect and animate it to 0 rewind and looping
STYLE = {blurX:200} // just showing using style...
new Pic("image.png") // preloaded asset
.center()
.effect(new BlurEffect())
.animate({
props:{"effects.blur.blurX":0},
time:.7,
rewind:true,
rewindWait:.5,
loop:true
});
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports VEE - parameters marked with ZIM VEE mean a zim Pick() object or Pick Literal can be passed
Pick Literal formats: [1,3,2] - random; {min:10, max:20} - range; series(1,2,3) - order, function(){return result;} - function
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
blurX - |ZIM VEE| (default 10) the blur in the x
blurY - |ZIM VEE| (default 10) the blur in the y
quality - |ZIM VEE| (default 1) the number of effect iterations
A value of 2 will produce a smoother effect, but take twice as long to run, etc.
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly
METHODS
clone(exact) - clone the effect - set exact to true to match the ZIM VEE values exactly on cloning
ALSO See the CreateJS Easel Docs for Filter methods, such as: getBounds()
PROPERTIES
** a reference to the effect object is also avalailable as obj.effects.blur
** after setting these properties call obj.updateEffects()
** animate() and wiggle() do this automatically
blurX - the blur in the x
blurY - the blur in the y
quality - the number of effect iterations
veeObj - an object with ZIM VEE original parameters:value allowing the ZIM VEE values to be referenced
for instance, obj.prop = Pick.choose(obj.veeObj.prop); will reset the the prop to the result of the original ZIM VEE value
CLOSE ▲PAGE ▤CODE ▤VIDS
GlowEffect
zim class extends createjs BlurFilter
Originally from https://github.com/u-kudox/Filters_for_EaselJS
and https://github.com/sky0014/Filters_for_EaselJS - with thanks
DESCRIPTION
Adds a glow around or inside a DisplayObject.
Can be passed in to effect() method to apply effect.
Properties can be changed and updated and then updateEffects() called.
Properties can be animated and wiggled.
Use noEffect("glow") to remove glow effect.
SEE: https://zimjs.com/cat/effects.htmlNOTE
Effects are quite processor intensive so use sparingly.
Each effect processes every pixel - when animating this results in hundreds of thousands of loops.
ZIM has wrapped the CreateJS filters, filter property, caching and cacheUpdate system
to make accessing filters easy - but apps will slow down if they are over-used.
Keep the quality at 1 for animating filters at a decent framerate.
Consider pre-processing images if effects do not have to be dynamic.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// add a glow effect with knockout then remove it after 2 seconds
const rect = new Rectangle()
.center()
.effect(new GlowEffect({color:pink, blurX:50, blurY:50, knockout:true}));
timeout(2, ()=>{
rect.noEffect();
// // or if other effects to keep use:
// rect.noEffect("glow");
// // or to update effect use:
// rect.effects.glow.blurY = 200;
// rect.updateEffects();
// // can also store effect in variable and access properties on the variable
// // rather than on the effects property of the object
S.update();
});
EXAMPLE
// add a 200 blurX effect then animate it to 0 rewind and looping
STYLE = {blurX:200} // just showing using style...
new Pic("image.png") // preloaded asset
.center()
.effect(new GlowEffect())
.animate({
props:{"effects.glow.blurX":0},
time:.7,
rewind:true,
rewindWait:.5,
loop:true
});
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports VEE - parameters marked with ZIM VEE mean a zim Pick() object or Pick Literal can be passed
Pick Literal formats: [1,3,2] - random; {min:10, max:20} - range; series(1,2,3) - order, function(){return result;} - function
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
color - |ZIM VEE| (default white) the color of the effect
alpha - |ZIM VEE| (default 1) the alpha of the effect
blurX - |ZIM VEE| (default 30) the blur in the x
blurY - |ZIM VEE| (default 30) the blur in the y
strength - |ZIM VEE| (default 1) the strength is how thickly the effect is applied
quality - |ZIM VEE| (default 1) the number of effect iterations
A value of 2 will produce a smoother effect, but take twice as long to run, etc.
inner - |ZIM VEE| (default false) set to true to add the effect to the inside of the object
knockout - |ZIM VEE| (default false) set to true to cut out where the object is (including the effect)
hideObject - |ZIM VEE| (default false) set to true to hide the object but leave effect beneath
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly
METHODS
clone(exact) - clone the effect - set exact to true to match the ZIM VEE values exactly on cloning
ALSO See the CreateJS Easel Docs for Filter methods, such as: getBounds()
PROPERTIES
** a reference to the effect object is also avalailable as obj.effects.glow
** after setting these properties call obj.updateEffects()
** animate() and wiggle() do this automatically
color - the color of the effect
alpha - the alpha of the effect
blurX - the blur in the x
blurY - the blur in the y
strength - the strength is how thickly the effect is applied
quality - the number of effect iterations
inner - boolean whether to add the effect to the inside of the object
knockout - boolean whether to cut out where the object is (including the effect)
hideObject - boolean whether to true to hide the object but leave effect beneath
veeObj - an object with ZIM VEE original parameters:value allowing the ZIM VEE values to be referenced
for instance, obj.prop = Pick.choose(obj.veeObj.prop); will reset the the prop to the result of the original ZIM VEE value
CLOSE ▲PAGE ▤CODE ▤VIDS
ShadowEffect
zim class extends createjs BlurFilter
Originally from https://github.com/u-kudox/Filters_for_EaselJS
and https://github.com/sky0014/Filters_for_EaselJS - with thanks
DESCRIPTION
Makes a drop shadow on a DisplayObject - more customizable than ZIM sha()
Can be passed in to effect() method to apply effect.
Properties can be changed and updated and then updateEffects() called.
Properties can be animated and wiggled.
Use noEffect("shadow") to remove shadow effect.
SEE: https://zimjs.com/cat/effects.htmlNOTE
ZIM sha() wraps a CreateJS Shadow() which seems to put shadow on borders too
The ShadowEffect() does not put shadows on borders - which is good.
NOTE
Effects are quite processor intensive so use sparingly.
Each effect processes every pixel - when animating this results in hundreds of thousands of loops.
ZIM has wrapped the CreateJS filters, filter property, caching and cacheUpdate system
to make accessing filters easy - but apps will slow down if they are over-used.
Keep the quality at 1 for animating filters at a decent framerate.
Consider pre-processing images if effects do not have to be dynamic.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// add a shadow effect when dragging and remove on pressup
const rect = new Rectangle()
.center()
.drag();
rect.on("mousedown", ()=>{
rect.effect(new ShadowEffect());
S.update();
});
rect.on("pressup", function () {
rect.noEffect("shadow");
S.update();
});
EXAMPLE
// add a 200 blurX effect then animate the angle rewind and looping
STYLE = {blurX:200} // just showing using style...
new Pic("image.png") // preloaded asset
.center()
.effect(new ShadowEffect())
.animate({
props:{"effects.shadow.angle":90},
time:.7,
rewind:true,
rewindWait:.5,
loop:true
});
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports VEE - parameters marked with ZIM VEE mean a zim Pick() object or Pick Literal can be passed
Pick Literal formats: [1,3,2] - random; {min:10, max:20} - range; series(1,2,3) - order, function(){return result;} - function
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
distance - |ZIM VEE| (default 10) the distance of the effect
angle - |ZIM VEE| (default 45) the angle of the effect
color - |ZIM VEE| (default black) the color of the effect
alpha - |ZIM VEE| (default .4) the alpha of the effect
blurX - |ZIM VEE| (default 15) the blur in the x
blurY - |ZIM VEE| (default 15) the blur in the y
strength - |ZIM VEE| (default 1) the strength is how thickly the effect is applied
quality - |ZIM VEE| (default 1) the number of effect iterations
A value of 2 will produce a smoother effect, but take twice as long to run, etc.
inner - |ZIM VEE| (default false) set to true to add the effect to the inside of the object
knockout - |ZIM VEE| (default false) set to true to cut out where the object is (including the effect)
hideObject - |ZIM VEE| (default false) set to true to hide the object but leave effect beneath
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly
METHODS
clone(exact) - clone the effect - set exact to true to match the ZIM VEE values exactly on cloning
ALSO See the CreateJS Easel Docs for Filter methods, such as: getBounds()
PROPERTIES
** a reference to the effect object is also avalailable as obj.effects.blur
** after setting these properties call obj.updateEffects()
** animate() and wiggle() do this automatically
distance - the distance of the effect
angle - the angle of the effect
color - the color of the effect
alpha - the alpha of the effect
blurX - the blur in the x
blurY - the blur in the y
strength - the strength is how thickly the effect is applied
quality - the number of effect iterations
inner - boolean whether to add the effect to the inside of the object
knockout - boolean whether to cut out where the object is (including the effect)
hideObject - boolean whether to true to hide the object but leave effect beneath
veeObj - an object with ZIM VEE original parameters:value allowing the ZIM VEE values to be referenced
for instance, obj.prop = Pick.choose(obj.veeObj.prop); will reset the the prop to the result of the original ZIM VEE value
CLOSE ▲PAGE ▤CODE ▤VIDS
ThresholdEffect
zim class extends createjs Filter
DESCRIPTION
Applies a color for above a value and below a value for each color channel.
Channels or pass and fail can be turned off with -1
SEE: https://zimjs.com/016/threshold.htmlNOTE
Effects are quite processor intensive so use sparingly.
Each effect processes every pixel - when animating this results in hundreds of thousands of loops.
ZIM has wrapped the CreateJS filters, filter property, caching and cacheUpdate system
to make accessing filters easy - but apps will slow down if they are over-used.
Keep the quality at 1 for animating filters at a decent framerate.
Consider pre-processing images if effects do not have to be dynamic.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// html red for colors above half intensity (128/256) and html blue for colors below half intenstity
new Pic("file.jpg").center().effect(new FilterEffect(128, 128, 128, "red", "blue"));
EXAMPLE
// lots of black but save real colors if above 180 in all channels - but will probably want to play with settings.
new Pic("file.jpg").center().effect(new FilterEffect(180, 180, 180, -1, "black"));
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports VEE - parameters marked with ZIM VEE mean a zim Pick() object or Pick Literal can be passed
Pick Literal formats: [1,3,2] - random; {min:10, max:20} - range; series(1,2,3) - order, function(){return result;} - function
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
redValue - |ZIM VEE| (default 128) the threshold amount on the red channel
channels have values from 0-255 so 128 is in the middle (50%)
set to 0 pass all this channel so more pass color will be shown where red is
if the pass color is turned off then the red channel will show
set to 255 to fail all this channel so more fail color will be shown where red is
if the fail color is turned off then this value will not affect the final image
set to -1 to keep all the red channel color and not include the red channel in the threshold
greenValue - |ZIM VEE| (default 128) the threshold amount on the green channel - see redValue for more info
blueValue - |ZIM VEE| (default 128) the threshold amount on the green channel - see greenValue for more info
passColor - |ZIM VEE| (default white) the color for above the threshold - set to -1 to keep original color where above the threshold
failColor - |ZIM VEE| (default black) the color for below the threshold - set to -1 to keep original color where below the threshold
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly
METHODS
clone(exact) - clone the effect - set exact to true to match the ZIM VEE values exactly on cloning
ALSO See the CreateJS Easel Docs for Filter methods, such as: getBounds()
PROPERTIES
** a reference to the effect object is also avalailable as obj.effects.blur
** after setting these properties call obj.updateEffects()
** animate() and wiggle() do this automatically
redValue - get or set the red channel threshold - must use obj.updateEffects()
redValue - the red channel threshold - must use obj.updateEffects()
redValue - the red channel threshold - must use obj.updateEffects()
passColor - the color for above the threshold - must use obj.updateEffects()
failColor - the color for above the threshold - must use obj.updateEffects()
veeObj - an object with ZIM VEE original parameters:value allowing the ZIM VEE values to be referenced
for instance, obj.prop = Pick.choose(obj.veeObj.prop); will reset the the prop to the result of the original ZIM VEE value
CLOSE ▲PAGE ▤CODE ▤
ColorEffect
zim class extends createjs ColorFilter
DESCRIPTION
Changes the colors in a DisplayObject including Shapes and Bitmaps.
BACKGROUND
Bitmaps are made up of four channels - red, green, blue and alpha (transparency).
Each channel has 256 values from 0 to 255.
O is dark and 255 is light.
If we multiply the blue channel by 0 we would get no blue colors.
If we multiply the blue channel by .5 we would get half as bright blue colors
and multiplying by 1 would leave the blue colors as they are.
Offsetting the colors negative makes them darker and positive makes them lighter.
SEE: hue, saturation, brightness and contrast DisplayObject properties as well
SEE: the keyOut() method of Bitmap(), Pic() and SVG() that has a replacement color parameter
SEE: color property of Shapes or backgroundColor property of Components
to change colors directly including animating color from one color to another with animate()
Can be passed in to effect() method to apply effect.
Properties can be changed and updated and then updateEffects() called.
Properties can be animated and wiggled.
Use noEffect("color") to remove color effect.
SEE: https://zimjs.com/cat/effects.htmlNOTE
Effects are quite processor intensive so use sparingly.
Each effect processes every pixel - when animating this results in hundreds of thousands of loops.
ZIM has wrapped the CreateJS filters, filter property, caching and cacheUpdate system
to make accessing filters easy - but apps will slow down if they are over-used.
Keep the quality at 1 for animating filters at a decent framerate.
Consider pre-processing images if effects do not have to be dynamic.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// animate an image so it has no red and green (leave it the blue) rewind and loop
new Pic("image.png") // preloaded asset
.center()
.effect(new ColorEffect())
.animate({
props:{"effects.color.redMultiplier":0, "effects.color.redMultiplier":0},
time:.7,
rewind:true,
rewindWait:.5,
loop:true
});
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports VEE - parameters marked with ZIM VEE mean a zim Pick() object or Pick Literal can be passed
Pick Literal formats: [1,3,2] - random; {min:10, max:20} - range; series(1,2,3) - order, function(){return result;} - function
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
redMultiplier - |ZIM VEE| (default 1) the amount to multiply the red channel of the object
greenMultiplier - |ZIM VEE| (default 1) the amount to multiply the green channel of the object
blueMultiplier - |ZIM VEE| (default 1) the amount to multiply the blue channel of the object
alphaMultiplier - |ZIM VEE| (default 1) the amount to multiply the alpha channel of the object
redOffset - |ZIM VEE| (default 0) the amount to Offset the red channel of the object - between -255 and 255
greenOffset - |ZIM VEE| (default 0) the amount to Offset the green channel of the object - between -255 and 255
blueOffset - |ZIM VEE| (default 0) the amount to Offset the blue channel of the object - between -255 and 255
alphaOffset - |ZIM VEE| (default 0) the amount to Offset the alpha channel of the object - between -255 and 255
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly
METHODS
clone(exact) - clone the effect - set exact to true to match the ZIM VEE values exactly on cloning
ALSO See the CreateJS Easel Docs for Filter methods, such as: getBounds()
PROPERTIES
** a reference to the effect object is also avalailable as obj.effects.blur
** after setting these properties call obj.updateEffects()
** animate() and wiggle() do this automatically
redMultiplier - the amount to multiply the red channel of the object
greenMultiplier - the amount to multiply the green channel of the object
blueMultiplier - the amount to multiply the blue channel of the object
alphaMultiplier - the amount to multiply the alpha channel of the object
redOffset - the amount to Offset the red channel of the object - between -255 and 255
greenOffset - the amount to Offset the green channel of the object - between -255 and 255
blueOffset - the amount to Offset the blue channel of the object - between -255 and 255
alphaOffset - the amount to Offset the alpha channel of the object - between -255 and 255
veeObj - an object with ZIM VEE original parameters:value allowing the ZIM VEE values to be referenced
for instance, obj.prop = Pick.choose(obj.veeObj.prop); will reset the the prop to the result of the original ZIM VEE value
CLOSE ▲PAGE ▤CODE ▤VIDS
MultiEffect
zim class extends createjs ColorMatrixFilter
DESCRIPTION
Sets the hue, saturation, brightness and contrast of a DisplayObject.
CONVENIENCE EFFECTS
ZIM provides hue, saturation, brightness and contrast properties for DisplayObjects:
obj.hue = 100;
These are easier to use than the MultiEffect class directly.
Can be passed in to effect() method to apply effect.
Properties can be changed and updated and then updateEffects() called.
Properties can be animated and wiggled.
Use noEffect("hue") to remove hue effect.
SEE: https://zimjs.com/cat/effects.htmlNOTE
Effects are quite processor intensive so use sparingly.
Each effect processes every pixel - when animating this results in hundreds of thousands of loops.
ZIM has wrapped the CreateJS filters, filter property, caching and cacheUpdate system
to make accessing filters easy - but apps will slow down if they are over-used.
Keep the quality at 1 for animating filters at a decent framerate.
Consider pre-processing images if effects do not have to be dynamic.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// change hue, saturation, brightness and contrast of image then change back
new Pic("image.png") // preloaded asset
.center()
.effect(new MultiEffect(20, -50, -20, 10));
timeout(2, ()=>{
rect.noEffect();
// // or if other effects to keep use:
// rect.noEffect("multi");
// // or to update effect use:
// rect.effects.multi.amount = 200;
// rect.updateEffects();
// // can also store effect in variable and access properties on the variable
// // rather than on the effects property of the object
S.update();
});
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports VEE - parameters marked with ZIM VEE mean a zim Pick() object or Pick Literal can be passed
Pick Literal formats: [1,3,2] - random; {min:10, max:20} - range; series(1,2,3) - order, function(){return result;} - function
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
hue - |ZIM VEE| (default 0) the hue (color tint) of the effect (-180 to 180)
saturation - |ZIM VEE| (default 0) the saturation (how much color) of the effect (-100 to 100)
brightness - |ZIM VEE| (default 0) the brightness (lightness) of the effect (-255 to 255)
contrast - |ZIM VEE| (default 0) the contrast (light versus dark) of the effect (-100 to 100)
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly
METHODS
adjustColor(hue, saturation, brightness, contrast) - adjust all or some colors at once - parameters support |ZIM VEE|
clone(exact) - clone the effect - set exact to true to match the ZIM VEE values exactly on cloning
ALSO See the CreateJS Easel Docs for Filter methods, such as: getBounds()
PROPERTIES
** a reference to the effect object is also avalailable as obj.effects.blur
** after setting these properties call obj.updateEffects()
** animate() and wiggle() do this automatically
hue - the hue (color tint) of the effect (-180 to 180)
saturation - the saturation (how much color) of the effect (-100 to 100)
brightness - the brightness (lightness) of the effect (-255 to 255)
contrast - the contrast (light versus dark) of the effect (-100 to 100)
veeObj - an object with ZIM VEE original parameters:value allowing the ZIM VEE values to be referenced
for instance, obj.prop = Pick.choose(obj.veeObj.prop); will reset the the prop to the result of the original ZIM VEE value
CLOSE ▲PAGE ▤CODE ▤VIDS
AlphaEffect
zim class extends createjs AlphaMaskFilter
DESCRIPTION
Applies an alpha mask to a DisplayObject
BACKGROUND
Images have an alpha channel with values from 0-255
with 0 being completely see through and 255 completely opaque.
A regular mask shows the masked object through the mask
where the mask has any alpha greater than 0.
And a regular mask in ZIM needs to be a Shape.
When the AlphaEffect() is applied to a target object
it sets the alpha of the target object
to the alpha of the mask passed in to the effect.
It replaces the alpha channel of the object with the alpha channel of the mask.
The mask can be a PNG with varying levels of alpha
or a shape with a gradient alpha using an rgba() color.
This means we can fade the edges of the image!
Can be passed in to effect() method to apply effect.
Properties can be changed and updated and then updateEffects() called.
Properties can be animated and wiggled.
Use noEffect("alpha") to remove alpha effect.
NOTE
This works best if the object and the mask are in the same location
and have the same bounds. Beware, circles have negative x and y bound positions.
So if masking a circle, put the circle in a dimensioned Container(radius*2, radius*2)
then add the effect(new AlphaEffect()) to the container.
SEE:
https://zimjs.com/explore/alphaeffect.htmlhttps://zimjs.com/explore/alphaMask.htmlhttps://zimjs.com/explore/mask.htmlhttps://zimjs.com/cat/effects.htmlNOTE
Effects are quite processor intensive so use sparingly.
Each effect processes every pixel - when animating this results in hundreds of thousands of loops.
ZIM has wrapped the CreateJS filters, filter property, caching and cacheUpdate system
to make accessing filters easy - but apps will slow down if they are over-used.
Keep the quality at 1 for animating filters at a decent framerate.
Consider pre-processing images if effects do not have to be dynamic.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// add alpha mask effect with a transparent background png
// ** preload the pic.png in the Frame call or with F.loadAssets()
const tile = new Tile(new Circle(10, purple), 20, 20)
.center()
.effect(new AlphaEffect(new Pic("pic.png")))
.drag({all:true});
EXAMPLE
// add alpha mask as a gradient crop for an image
// ** preload the pic.png in the Frame call or with F.loadAssets()
const pic = new Pic("pic.png").center();
const gradient = new RadialColor(
[clear,black],[.3,.5], // colors and ratios
pic.width/2,pic.height/2,Math.max(pic.width/2,pic.height/2), // start x, y and radius (or use Math.min())
pic.width/2,pic.height/2,0 // end x, y and radius
);
pic.effect(new AlphaEffect(new Rectangle(pic.width, pic.height, gradient)));
EXAMPLE
// mask a Circle with a Container containing animated Rectangles
// add Circle to dimensioned Container otherwise negative x and y bounds of Circle breaks cacheCanvas
const mask = new Container(300,200).center();
// animating first rectangle in negative so start it moved in the container
// so it will not animate less than 0 in the container
new Rectangle().loc(50,0,mask).animate({props:{x:"-50"}, rewind:true, loop:true});
new Rectangle().loc(150,100,mask).animate({props:{x:"50"}, rewind:true, loop:true});
// make the container the same size as above
// with the same registration point - just makes things easier
const c = new Container(300,200).center();
new Circle(100,red).center(c);
c.effect(new AlphaEffect(mask, true))
Ticker.add(()=>{c.updateEffects();});
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports VEE - parameters marked with ZIM VEE mean a zim Pick() object or Pick Literal can be passed
Pick Literal formats: [1,3,2] - random; {min:10, max:20} - range; series(1,2,3) - order, function(){return result;} - function
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
mask - |ZIM VEE| a ZIM Bitmap (or Canvas object) that will be the mask for the object
or can be any ZIM DisplayObject - this will be cached and use the cacheCanvas as the mask
so for instance, could use a Rectangle with a GradientColor or RadialColor for a gradient mask
dynamic - (default false) set to true if mask is changing - also need to updateEffect() on object
boundary - (default null) add a ZIM Boundary() if the mask is changing size - see dynamic
note: this Boundary should start at 0,0 as a negative value causes problems with the cacheCanvas. See the last example above.
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly
veeObj - an object with ZIM VEE original parameters:value allowing the ZIM VEE values to be referenced
for instance, obj.prop = Pick.choose(obj.veeObj.prop); will reset the the prop to the result of the original ZIM VEE value
METHODS
clone(exact) - clone the effect - set exact to true to match the ZIM VEE values exactly on cloning
ALSO See the CreateJS Easel Docs for Filter methods, such as: getBounds()
CLOSE ▲PAGE ▤CODE ▤VIDS
Pixel
zim class extends ZIM Bitmap which extends CreateJS Bitmap
DESCRIPTION
Uses raw canvas processing to pixilate a Display Object.
This is not a pixel by pixel process like the ZIM Effects (BlurEffect, GlowEffect, etc.)
So the speed is very fast.
The Display Object is cached, scaled down and scaled back up with image smoothing disabled.
The scaling proceedure is actually faster than scaling with image smoothing turned on.
This effect has been available on the canvas all along, ZIM Pixel makes it easier to use.
SEE:
https://zimjs.com/zim/pixel.htmlhttps://zimjs.com/zim/pixel2.htmlNOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// pixelate a Circle
const circle = new Pixel(new Circle(200,red)).center().drag();
EXAMPLE
F.color = darker;
function makePixel() {
return new Pixel(new Circle(40,[pink,blue,purple]),.3)
.alp(.5)
.reg(CENTER);
}
new Emitter({
obj:makePixel,
force:{min:.5, max:2},
gravity:0,
life:3,
shrink:false,
layers:BOTTOM,
animation:{
props:{rotation:[-360, 360]},
time:{min:1,max:10},
ease:"linear",
loop:true
}
}).center();
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports VEE - parameters marked with ZIM VEE mean a zim Pick() object or Pick Literal can be passed
Pick Literal formats: [1,3,2] - random; {min:10, max:20} - range; series(1,2,3) - order, function(){return result;} - function
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
obj - |ZIM VEE| (default Tile of Circles) the object to pixilate - the original will still exist.
in theory, this can be any DisplayObject such as a Circle(), Button(), Container(), Pic(), etc.
amount - |ZIM VEE| (default .5) the amount to pixelate from 0-1.
the granularity depends on the amountFactor which is also from 0-1.
at a lower amountFactor, the 0-1 amount will focus on smaller pixilations.
at a higher amountFactor, the 0-1 amount will focus on bigger pixilations.
if an amountY is set then this will be the amountX
amountY - |ZIM VEE| (default 0) the amount to pixelate in the vertical. Also see amount.
blur - |ZIM VEE| (default 0) the amount to blur (0-1) the image before pixilating (this is a scaling blur so fast)
also see blurFactor
set blurFacter low to concentrate blur on smaller amounts
set blurFactor high to concentrate blur on larger amounts
dynamic - (default false) set to true if changing the object the original object that is being pixelated
blendmode - |ZIM VEE| (default null) the blendmode to apply when updating Pixel
boundary - (default obj.getBounds()) the boundary for the caching - use a ZIM Boundary() object, etc.
expand - (default 0) an amount of pixels to expand the boundary by (or contract if negative)
can be a number for all sides, an array of [left/right, top/bottom] or [left,top,right,bottom]
amountFactor - |ZIM VEE| (default .6) the range (0-1) to concentrate the amount parameter on
a lower value will concentrate amount on smaller pixels
a higher value will concentrate amount on larger pixels
blurFactor - |ZIM VEE| (default .6) the range (0-1) to concentrate the blur parameter on
a lower value will concentrate blur on smaller amounts
a higher value will concentrate blur on larger amounts
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly
METHODS
update() - update the Pixel Bitmap if the object changes
if dynamic parameter is set to true there is no need to update()
clone(exact) - clone the effect - set exact to true to match the ZIM VEE values exactly on cloning
dispose() - clear any update Ticker and dispose the Bitmap
ALSO
ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO
see the CreateJS Easel Docs for Bitmap methods, such as:
on(), off(), getBounds(), setBounds(), dispatchEvent(), etc.
PROPERTIES
type - holds the class name as a String
amount - get or set the amount to pixelate (also see amountFactor)
amountX - get or set the amountX to pixelate (also see amountFactor)
amountY - get or set the amountY to pixelate (also see amountFactor)
amountFactor - get or set the concentration for the amount (see amount parameter for more info)
blur - get or set the amount to blur (also see blurFactor)
blurFactor - get or set the concentration for the blur (see blur parameter for more info)
veeObj - an object with ZIM VEE original parameters:value allowing the ZIM VEE values to be referenced
for instance, obj.prop = Pick.choose(obj.veeObj.prop); will reset the the prop to the result of the original ZIM VEE value
ALSO
see ZIM Bitmap for properties such as:
width, height, widthOnly, heightOnly, draggable, level, depth, group
blendMode, hue, saturation, brightness, contrast, etc.
ALSO
see the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.
CLOSE ▲PAGE ▤CODE ▤VIDS
Parallax
zim class
DESCRIPTION
Takes objects as layers and sets properties based on an input,
for instance, each layer could move a different x based on position of mouseX
or each layer could scale a different amount based on scroll of y.
The types of input are mouseX, mouseY, scrollX, scrollY or custom.
The types of properties to change could be x, y, scaleX, scaleY, rotation, alpha, frameNumber, etc.
Parallax allows scale to be a property which scales scaleX and scaleY together.
Parallax allows frame to be a property and calls gotoAndStop() on a Sprite frame.
Parallax really just manages multiple ProportionDamp objects.
For proper parallax, the objects closer move more than the objects farther back.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// make assets to move around
// these could be pictures, shapes, containers, etc.
const backing = new Rectangle(800, 200, "yellow").center();
const mid = new Rectangle(400, 200, "green").center().mov(0,20);
const front = new Circle(60, red).center().mov(0,80);
// make Parallax object - here we move with stage mouseX and mouseY
const parallax = new Parallax([
{obj:backing, prop:"x", propChange:50}, {obj:backing, prop:"y", propChange:40, input:"mouseY"},
{obj:mid, prop:"x", propChange:100}, {obj:mid, prop:"y", propChange:80, input:"mouseY"},
{obj:front, prop:"x", propChange:150}, {obj:front, prop:"y", propChange:100, input:"mouseY"}
], .1);
S.update();
EXAMPLE
// interact outside a stage
// this example has a small stage in the middle of the HTML page
// see https://zimjs.com/explore/parallax.html
const parallax = new Parallax({mouseMoveOutside:true, startPaused:true});
const colors = series(black, white);
new Rectangle(W, H).center()
loop(10, (i, total)=>{
var rect = new Rectangle(W*(1-i/10), H*(1-i/10), colors()).center();
parallax.addLayer({
obj:rect,
input:"mouseX", // default so don't need...
prop:"x", // default so don't need...
propChange:40*i,
inMin:-1000,
inMax:W+1000
});
parallax.addLayer({
obj:rect,
input:"mouseY",
prop:"y",
split:true,
propChange:40*i,
inMin:-500,
inMax:H+500
});
});
// starting the parallax paused so this will unpause when mouse is over stage
S.on("stagemousemove", e=>{
if (S.mouseInBounds) { // now that state is set to move outside...
// go immediately to the target input - needs to be done for each layer
var targets = [];
loop(10, function (i) {
targets.push(e.stageX, e.stageY)
});
parallax.immediate(targets); // pass in the array
parallax.pause(false); // start the parallax
e.remove(); // end event
}
});
PARAMETERS supports DUO - parameters or single object with properties below
layers - (default null) an array of layer objects, the format as below
Example: to move an obj 200 px in the x as the window scrolls from 100 to 300 px in the y
[{obj:obj, prop:"x", propChange:200, input:"scrollY", inMin:100, inMax:300, factor:1, integer:false}, etc.]
obj - the object whose property is being changed
prop - the property that is being changed
propChange - how much you want the property to change
input - (default mouseX) but can also be mouseY, scrollX, scrollY
inMin - (default 0) minimum input range
inMax - (default W (for x prop) H (for y prop)) maximum input range
factor - (default 1) set factor to -1 to change in the opposite direction
integer - (default false) set to true to round the value to an integer
split - (default true for mouseX, false for others) centers input so half output is on one side and half on the other
immediate - (default null) set to a value to set property immediately take that value without damping from current property value
Example 2: a traditional mouse move parallax for one object
[{obj:obj, prop:"x", propChange:100}, {obj:obj, prop:"y", propChange:50, input:"mouseY"}, etc.]
you would probably have more objects to follow
or you can add these one at a time with the p.addLayer({layer object properties});
damp - (default .1) the damp value with 1 being no damping and 0 being no movement
auto - (default true) uses the specified input
if auto is set to false, you must make your own new Ticker and use the step(input) method
stage - (default the default frame's stage) the stage - specify this if multiple stages
startPaused - (default false) set to true to start parallax paused - set paused(false) to unpause it
mouseMoveOutside - (default true) set to false to not allow mouse movement outside the stage to affect motion
clamp - (default true) set to false to allow range outside min and max
NOTE
ticker and fps parameters have been removed - see zim.Ticker to set
METHODS
addLayer({layer object properties}) - adds a layer - returns object for chaining
removeLayer(index) - removes a layer based on order added - returns object for chaining
step(input) - used when auto is false to send in custom input data - returns object for chaining
immediate([]) - an array of inputs for each layer used to immediately set the target value with no damping - returns object for chaining
pause(state) - pauses or unpauses the parallax - state defaults to true - see also startPaused - returns object for chaining
dispose() - removes listeners
PROPERTIES
type - holds the class name as a String
damp - allows you to dynamically change the damping
paused - read-only boolean whether the parallax is paused - see pause() and startPaused property
CLOSE ▲PAGE ▤CODE ▤BITS VIDS
Flipper
zim class - extends a zim.Container which extends a createjs.Container
DESCRIPTION
Flipper lets you flip between two DisplayObjects.
It has a back and a front that can be any display object. You press it and it flips.
The flip() method allows you to programmatically flip it or pass in true or false to flip on or off.
A flipped property tells you if it is flipped.
There is a "flip" event for when it starts to flip and a "flipped" event for when it is done flipping.
See: https://zimjs.com/cat/flipper.html
See: https://zimjs.com/elearning/match.html
See: https://codepen.io/zimjs/pen/LYRxprKNOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
STYLE = {borderColor:dark, borderWidth:2};
const front = F.makeIcon().sca(2.5);
const back = new Page(front.width, front.height, blue, green, 1);
const label = new Label("ZIM Flipper").center(back);
const card = new Flipper(front, back).center();
EXAMPLE
const page1 = new Page(400,600,red,purple);
// Find emoji and paste from here
// https://emojipedia.org/clockwise-vertical-arrows/
// or use Pizzazz_02 https://zimjs.com/bits/view/icons.html
new Emoji("\ud83d\udd03", 60, true)
.expand()
.ble("darken")
.pos(20,20,RIGHT,TOP,page1)
.tap(() => {flipper.flip();});
const page2 = new Page(400,600,yellow,orange)
new Emoji("\ud83d\udd03", 60, true)
.expand()
.ble("darken")
.pos(20,20,RIGHT,TOP,page2)
.tap(() => {flipper.flip();});
const flipper = new Flipper({
front:page1,
back:page2,
reverse:true,
interactive:true,
frontPress:false, // optional
backPress:false // optional
}).center();
// add after card is in place so can set drag boundary
const circ = new Circle().center(page1).drag(page1);
// set drag after card has been flipped to set drag boundary
const rect = new Rectangle().center(page2);
flipper.on("flipped", ()=>{
rect.drag(page2);
}, null, true); // once
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
front - (default F.makeIcon().sca(2)) a DisplayObject for the front (this will be centerReg() in Flipper)
back - (default new Page(front.width, front.height, dark)) a DisplayObject for the back (this will be centerReg() in Flipper)
interactive - (default false) set to true if items in front or back need to be interactive
which will add default mousedown flip events on backing if there is a backing (like on a ZIM Page) or on whole side
if interactive is true then mouseChildren properties of the sides are automatically set to false
time - (default .2) the time in Seconds for flipping (also see ZIM TIME constant)
vertical - (default false) set to true to make card flip vertically
flipped - (default false) start the card flipped
easeRoot - (default "quad") the type of easing like "back", "elastic", "bounce" but just the root - not the "In" or "Out" part
frontPress - (default true) set to false to make the card NOT flip on mousedown of the front
backPress - (default true) set to false to make the card NOT flip on mousedown of the back
reverse - (default false) set to true to flip in the opposite direction
continuous - (default false) set to true to flip continously in the same direction
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly
METHODS
flip(state, time) - flip the card or specify a true or false for first parameter to either go to flipped or non-flipped
time defaults to the Flipper() time parameter
clone() - makes a copy with properties such as x, y, etc. also copied
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection
ALSO
ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO
see the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.
PROPERTIES
type - holds the class name as a String
flipped - true if showing back or false if showing front
front - the front DisplayObject
will be given an other property to the back DisplayObject
will be given an flipper property to the flipper object
back - the back DisplayObject
will be given an other property to the front DisplayObject
will be given an flipper property to the flipper object
ALSO
see ZIM Container for properties such as:
width, height, widthOnly, heightOnly, draggable, level, depth, group
blendMode, hue, saturation, brightness, contrast, etc.
ALSO
see the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.
ACTIONEVENT
This component is affected by the general ACTIONEVENT setting
The default is "mousedown" - if set to something else the component will act on click (press)
EVENTS
dispatches a "flip" event when the fipper starts the flip
dispatches a "flipped" event when the fipper ends the flip
ALSO
see the CreateJS Easel Docs for Container events such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover
CLOSE ▲PAGE ▤CODE ▤VIDS
Book
zim class - extends a zim.Container which extends a createjs.Container
DESCRIPTION
Creates a book with pages that flip like a real book.
The user can flip pages by dragging the pages or using the arrows.
The pages can be turned with code using nextPage() and prevPage() methods
and specific pages can be turned to with the gotoPage() method.
The pages are passed in as an array and can include interactivity.
Book is different than ZIM Pages which have transitions and do not "flip".
See: https://zimjs.com/cat/book.html
See: https://zimjs.com/five/book.html - for a simple book of images made in five minutes!
See: https://zimjs.com/darklo - an example with SLam DarkLo pottery.
NOTE
Book might need a last page on the right to work properly
if that is the case just add an extra blank page with F.color if needed.
NOTE
Using horizontal pages currently makes the page turning glitchy - will look into it soon - Feb 23, 2023
NOTE
do not use transparent pages or the book workings will be revealed
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// The pages in the book can be fully interactive
// but here is an example of just loading images into the book
// note - import ZIM and CreateJS in a script file above
// copy the template from https://zimjs.com/code.html
const path = "covers/"; // the folder with the images
const assets = ["build.jpg", "castle.jpg", "ganymede.jpg", "lastyear.jpg", "martian.jpg"];
new Frame(FIT, 1024, 768, darker, darker, ready, assets, path);
function ready() {
// get one picture to find the size of the book
const pic = new Pic("build.jpg");
new Book(pic.width*2, pic.height, assets).center();
} // end of ready
EXAMPLE
STYLE = {width:W/2, color:series(blue, pink, yellow, green)};
// add anything you want to each of these Pages
const page1 = new Page();
const page2 = new Page();
const page3 = new Page();
const page4 = new Page();
const pages = [page1, page2, page3, page4];
// 0 (default) will show only page 0 at right - like a cover
// 1 will show page 0 and page 1 to start - like an open book
new Book(W, H, pages, 1).addTo();
EXAMPLE
// to remove interactivity remove the stage and frame events
// these get added in a slight delay, so remove them in a slight delay
timeout(.1, ()=>{
S.off("stagemousedown", book.stageEvent);
F.off("keydown", book.keydown);
});
// to add the interactivity again use:
book.stageEvent = S.on("stagemousedown", book.stageEvent);
book.keydown = F.on("keydown", book.keydown);
// (note, the events are reassigned to the properties)
PARAMETERS
** supports DUO - parameters or single object with properties below
width - (default zimDefaultFrame width) the width of the book (including both sides)
height - (default zimDefaultFrame height) the height of the book
pages - an array of DisplayObjects to show as pages
or pass in an asset string - for instance an image to show an image
these images can be preloaded with the asset parameter of Frame
do not use transparent pages or the book workings will be revealed
startPage - (default 0) 0 will start with a "cover" at right.
setting this to 1 will start with no "cover" but rather a left page and a right page showing
setting to 2 will have a "cover" but initially show page 1 and 2 (not the cover), etc.
rollUp - (default 1) seconds before showing a corner hint - set to false to not show the corner
radius - (default false) pages will use full page to drag unless a radius is set
then the drag corner will be available at the radius distance from the bottom corners
backgroundColor - (default clear) the backing color of the book (if first or last page is a single page)
arrows - (default true (.2 seconds)) set to true or the number of seconds for arrows to turn page. See also ZIM TIME constant
handleHTML - (default true) set to false to not automatically remove and add the HTML overlays for Loader, TextArea or Tag objects
METHODS
nextPage(time) - animate the page to the next page at provided time in seconds (default .1). See also ZIM TIME constant
prevPage(time) - animate the page to the previous page at provided time in seconds (default .1). See also ZIM TIME constant
gotoPage(num, time) - animate to a page at provided time in seconds (default .1). See also ZIM TIME constant
changeFrame(frame) - use this method if book is moved to another frame
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection
ALSO
ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO
see the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.
PROPERTIES
type - holds the class name as a String
page - get or set the index number of page - will animate at a .1 speed (see gotoPage())
when asked for this will be the right hand page index
pageNext - get the next page if rollPress has triggered (see rollPress event)
the next page is the right hand page index
so if going right, not actually the next page but one more
directPage - get or set the index number of a page - will NOT animate in going to the page
note: the book must be on the stage (or in a container on the stage) before using this property
direction - get the direction the page is animating to - either LEFT or RIGHT
or if asked for on roll events will tell LEFT or RIGHT side
lastPage - get the index number of the page that was just animated (available in page event)
note: pages may skip by 2
pages - read only array of pages - this are the original pages array passed in
note: at this time, the Book must be remade to add or remove pages
peel - the peel ZIM Shape
backPrev - read only page behind the right side peel roll corner
backNext - read only page behind the left side peel roll corner
moving - get whether the page is being animated
handleHTML - get or set whether to automatically handle HTML overlays for Loader, TextArea or Tag objects
ALSO
see ZIM Container for properties such as:
width, height, widthOnly, heightOnly, draggable, level, depth, group
blendMode, hue, saturation, brightness, contrast, etc.
ALSO
see the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.
EVENTS
dispatches a "page" event when the page is turned
dispatches a "pageanimate" event when the page starts to animate to new page
dispatches a "pageturn" event when gotoPage() or page property starts to turn a page (not user dragged page)
dispatches a "pagedone" event when gotoPage() or page property finishes animating its last page (not user dragged page)
dispatches a "rollup" event when corner starts to roll up if rollup is true
dispatches a "rollpress" event when page (or corner when radius) is pressed for rolling up - see page and direction properties
dispatches a "rolldown" event when corner finishes rolling down
ALSO
see the CreateJS Easel Docs for Container events such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover
CLOSE ▲PAGE ▤CODE ▤VIDS
Scrambler
zim class - extends a zim.Container which extends a createjs.Container
DESCRIPTION
Takes a ZIM Tile and scrambles its items allowing the items to be dragged to unscramble.
Works on horizontal, vertical or grid versions of Tile (as in one column, one row or multiples)
Dispatches a "complete" event when done.
Can pass in an optional keys array that must match key properties
or an existing property of type keyType.
This allows, for instance, matching duplicate letters or colors.
See: https://zimjs.com/cat/scrambler.htmlNOTE
if using Adobe Animate then use the latest ZIM version of CreateJS - see https://zimjs.com/cdn/NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// tile a rectangle with a color series, a dark border of width 3
// 4 columns and 1 row with a spacingH of 10
const tile = new Tile(new Rectangle(100,100,series(orange, green, blue, pink)), 4, 1, 10);
// add the tile to the Scrambler - by default it scrambles
const scrambler = new Scrambler(tile).center();
// when the tile is unscrambled it calls the complete function
scrambler.on("complete", ()=>{
zogg("Yay!");
});
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
tile - an ZIM Tile
keys (default null) - An optional array of values that the order of the tile must match
Without keys, Scrambler will match the exact starting order
but sometimes there are multiple answers like two letter Ts or three color blues
To solve this issue, a keys array can be provided
Each tile should be given a key property to match the desired keys array
For instance if keys = ["big", "small", "big", "small", "medium"]
then each tile item should be given a item.key = "big", etc.
The "complete" event will be dispatched when the tile key properties are in the order of the keys
Also see keyProperty below for an alternative.
keyProperty (default null) - An optional tile item property to use to match the keys array (must have a keys array)
For example, if keys = ["L", "O", "V", "E", "L", "Y"]
There are two "L" items so matching the starting order is not necessary
as the L items could be swapped and still be a correct answer
If the items are ZIM Label objects (use the Label backing property to make tiles)
then set the keyProperty to "text" and this will be used to match the keys array
Another example - if keys = [blue, green, blue, red]
then set keysArray to "color" if a set of Rectangles are tiled with these colors
scramble (default true) - set to false to not scramble the tile - see also the scramble() method
time (default null) - if scramble is set, this is the time in seconds to animate the scramble - see also ZIM TIME constant
wait (default null) - if scramble is set, this is the time in seconds to wait to scramble - see also ZIM TIME constant
num (default 1) - the number of times it will scramble within the time given if a time is given otherwise always just one
this is good to scramble a small number of things - for instance set to 3 to visibly scramble 4 things...
shadowColor - (default rgba(0,0,0,.3)) set to -1 for no shadow
shadowBlur - (default 5) how blurred the shadow is if the shadow is set
swap - (default false) set to true to not automatically shift tiles and swap the dragged tile with the tile that is dropped on
swapLock - (default false) set to true to lock tiles that are in the right spot - will set swap to true
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly
METHODS
scramble(time, wait, num) - scramble the tile - this is done by default when making the Scrambler
but the default can be set to false and scramble called manually - or to rescramble, etc.
time and wait default to 0 and are the seconds to animate and wait to animate - also see ZIM TIME constant
num is how many times to scramble within the time - set to 3 for instance to scramble a small number of items
note that the tiles cannot be dragged from when called to when done scrambling
note a Scrambler will not scramble() if already scrambling
so scramble() chained on to new Scrambler() or run right away will be ignored unless the Scranbler scramble parameter is false
Just use the time, wait and num parameters of the Scrambler instead
returns object for chaining
solve(time, wait, disable) - solve the tile - so arrange the tile in the start order
time and wait default to 0 and are the seconds to animate and wait to animate - also see ZIM TIME constant
disable defaults to true and will stop the tile items from being draggable after solved
this uses a noMouse() so mouse() can be called on each tile item at a later point if desired
test() - returns true if tiles match starting orientation or keys if keys provided
testItem(item, index) - test a specific item in the Scrambler to see if correct - index is optional otherwise it will calculate it
note - there is a "complete" event and complete property so usually there is no need to test an item
update() - if the Scrambler is moved in its container, call update() to reset drag boundary
clone() - makes a copy with properties such as x, y, etc. also copied
dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection
ALSO
ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO
see the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.
PROPERTIES
type - holds the class name as a String
tile - reference to the ZIM Tile used
complete - get whether the Scrambler is complete - also see the "complete" event
starts - an array of start indexes (will be [0,1,2,3...])
order - get or set an array of the current index order (will be the scrambled order - eg. [3,2,0,1...])
ALSO
see ZIM Container for properties such as:
width, height, widthOnly, heightOnly, draggable, level, depth, group
blendMode, hue, saturation, brightness, contrast, etc.
ALSO
see the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.
EVENTS
dispatches a "complete" event when the tile changes to the same order as the start order
dispatches a "scrambled" event when the tile is finished scrambling
ALSO
see the CreateJS Easel Docs for Container events such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover
CLOSE ▲PAGE ▤CODE ▤VIDS
Scroller
zim class extends a createjs.EventDispatcher
DESCRIPTION
Scroller animates a backing either horizontally or vertically (not both).
The Scroller object will create a clone of the backing
and animate and swap the backgrounds when needed.
NOTE
A scroller can be added to a Accelerator object
this will allow the percentSpeed to be synched with other Scroller and Dynamo objects
See https://zimjs.com/zide/ - full scene
See https://zimjs.com/zapp/E_EPRSP - Flinstones
See https://zimjs.com/zapp/Z_6EEB5 - beach
See https://zimjs.com/zapp/Z_ZCDQN - spaceguy
See https://zimjs.com/zapp/Z_UC7DN - keyboard
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const one = new Rectangle(1100, 400, red).center();
F.makeCircles().center(one);
const scroller = new Scroller(one,20);
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
backing - an object to animate (make start and end edges match to be seemless)
speed - (default 1) how fast in pixels per second the animation is going
direction - (default 1) set to -1 for left or down
horizontal - (default true) set to false to animate vertically
you can adjust the speed and direction properties dynamically
you cannot adjust the backings and horizontal dynamically
to change your animation, dispose() of the Scroller object and make a new one
disposing just removes the ticker - you have to remove the backings
NOTE: the gapFix and ticker parameters have been removed - see zim.Ticker
gapFix - (default 0) if a thin line appears when changing speed - try setting to 1 or 2
stage - (default background.stage) if the background is not on the stage then need to pass the stage it will be on
container - (default stage) what bounds are used for wrapping the background
METHODS
pause(state, time) - state defaults to true and pauses the scroller (sets speed to 0)
set state to false to unpause the scroller (sets speed to speed before pausing)
set the time (default 0) to the seconds to take while slowing the scroller to 0 speed (also see ZIM TIME constant)
dispose() - get rid of the event listeners - you need to remove the backings (see backing properties)
PROPERTIES
type - holds the class name as a String
backing1 - the original backing passed in
backing2 - the cloned backing made from the original backing
speed - how fast the animation is going in pixels per frame
baseSpeed - the scroller speed when it was first made (or can override)
used to determine percentage speed for percentSpeed property
percentSpeed - get or set the percentage of the baseSpeed - eg. 100 is at the baseSpeed
this allows you to animate multiple scrollers relative to one another
See ScrollerManager class
percentComplete - get or set the percentage the scroller has moved
the percentage is the distance/width*100 for horizontal or distance/height*100 for vertical
direction - 0 for no direction, either left (-1) or right (1) if horizontal or up (-1) or down (1) if not horizontal
paused - read only - true if paused and false if not - must be set with pause() method
EVENTS
Dispatches a "pause" event when paused is complete (sometimes a delay to slow to pause)
CLOSE ▲PAGE ▤CODE ▤BITS VIDS
Dynamo
zim class - extends a createjs EventDispatcher
DESCRIPTION
A Dynamo can run any Sprite animation at varying speeds
You pass in an optional label, or start and end frames to define the animation frames
You can animate a Dynamo using speed or percentSpeed
percentSpeed is handy for animating at speeds relative to other animations and scrollers
You can control Dynamo speeds with mouse position - or in a Parallax object
A Dynamo loops automatically - you can pause it (with optional slowing or optional frame) and unpause it (with optional quickening)
You can also get or set its frame property at which point, it will loop from there (unless paused)
A Dynamo dispatches a "change" event every time the frame changes
and a loop event every time it loops to the start and a paused event when paused
NOTE
A Dynamo requires constant S.update() to run the Sprite
A Ticker.add(function () { // speed Code}) or just new Ticker.always() will provide the update
NOTE
A Dynamo can be added to a Accelerator object (and then to a MotionController)
this will allow the percentSpeed to be synched with other Scroller and Dynamo objects
See https://zimjs.com/zide/
See https://zimjs.com/explore/sidescroller.htmlNOTE
Dynamo is an alternative to a Sprite.run() where you provide a set time for animation
but you can pause a Dynamo and then use run() and then unpause the Dynamo when the run is done
If you are controlling the Dynamo in a new Ticker.add() function,
then make sure to remove() the new Ticker function when the Dynamo is paused
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// *** the Sprite will not run with a Dynamo unless there is a constant S.update()
// The new Ticker will provide a constant S.update() so that is good!
// we have a sprite of a guy and it has a "walk" animation
// we can make this run faster and slower with an accelerator:
// we pass in a speed of 30 fps and this becomes the baseSpeed
const dynamo = new Dynamo({sprite:sprite, speed:30, label:"walk", reversible:false});
Ticker.add(()=>{
// the sprite will run at 0 speed when the cursor is at the left of the stage
// and get faster as the cursor moves to the right
// at the middle it will be 30 fps and at the right it will be 60 fps
dynamo.percentSpeed = F.mouseX/W*100*2;
});
// Here we apply damping and make the sprite play backwards at the left of half stage
var dynamo = new Dynamo(sprite, 30, "walk");
Ticker.add(()=>{
// will play backwards at 30 fps at left and forwards at 30 fps at right
// it will stop at half the stage width
// reversible false means it will not walk backwards
// but rather it will flip and walk in the left direction when the speed is negative
dynamo.percentSpeed = F.mouseX/W*200 - 100;
});
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
sprite - the sprite to control
speed - (default 30) the frames per second at which to animate the sprite
label - (default null) the label of the sprite to play (see Sprite)
startFrame - (default 0) the frame to start the animation (ignored if a label is provided)
endFrame - (default sprite.totalFrames) the frame to end the animation (ignored if a label is provided)
update - (default false) set to true to update the stage (only do this if you are not already updating the stage!)
reversible - (default true) will allow percentSpeed to be negative and reverse the animation. Set to false to use absolute value.
flip - (default true if reversible is false) will flip the scaleX of the sprite if speed is negative and reversible is set to false.
the pairing of reversible false and flip true will make a Sprite turn and walk the other way if the speed is negaitive
Note: also see the scaleX property
flipVertical - (default false) flip the Sprite in the vertical if the speed is negative (note also see the scaleY property)
METHODS
pause(state, time, frame) - the way to pause or unpause a Dynamo affecting the sprite animating
state - (default true) true pauses and setting the state to false will unpause the animation
time - (default 0) time in milliseconds to slow the animation down if pausing or speed it up if unpausing
frame - (default null) which frame to pause on - overrides time (unless you want to do the calculation...)
dispose() - cancels the requestAnimationFrame
PROPERTIES
type - holds the class name as a String
frames - an array of frame numbers the Dynamo is acting on according to label, or startFrame, endFrame
frame - the current frame of the Dynamo - this is sequential relative to frames
whereas the actual Sprite frame may be different as labels can specify non-consecutive frame numbers
totalFrames - the total frames in frames (may be different than the Sprite's total frames)
percentSpeed - get or set the percentage of the baseSpeed - eg. 100 is a the baseSpeed
this is what you should animate to speed up and slow down the sprite
this allows you to set the speed relative to other Sprites and Scrollers
speed - get or set the speed of the sprite in frames per second
baseSpeed - the start speed given in frames per second unless changed with this property
this affects the percentSpeed so usually it is not adjusted - but it can be
paused - read only - whether the Dynamo is paused or not (by using the pause() method)
scaleX - starts with the original scaleX of the Sprite
if you flip the sprite and are scaling the Sprite manually, then also set the scaleX of the dynamo to match
scaleY - starts with the original scaleY of the Sprite
if you flip the sprite and are scaling the Sprite manually, then also set the scaleY of the dynamo to match
EVENTS
dispatches a "change" event when the Dynamo changes frame
dispatches a "loop" event when the Dynamo loops (possibly in reverse)
dispatches a "pause" event when the Dynamo is paused - could be delayed
CLOSE ▲PAGE ▤CODE ▤VIDS
Accelerator
zim class extends a createjs.EventDispatcher
DESCRIPTION
An Accelerator lets you set percentSpeed properties of multiple objects
such as Scroller and Dynamo (Dynamic Sprite) objects
or an object animating with animate() and the dynamic parameter set
All these have a percentSpeed property
which can be set by the Accelerator to operate the speeds.
They can also be paused and paused over time.
An Accelerator object lets you control these from one place
See: https://zimjs.com/explore/sidescroller.htmlNOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const rect = new Rectangle()
.centerReg()
.animate({props:{rotation:360}, ease:"linear", dynamic:true});
const accel = new Accelerator(rect);
// adjust speed of the animation by mousedown
// 0% at left, 50% in middle, 100% at right, etc.
new MotionController(accel);
// or
new MotionController({target:accel, type:"mousemove", minPercentSpeed:-200, maxPercentSpeed:200});
// will change speed from -200% to 200% as cursor is moved across screen
EXAMPLE
// assuming we have scroller1, scroller2 and a sprite
// each of these would have a speed set so the scene animates nicely
const accelerator = new Accelerator([scroller1, scroller2, sprite]);
// here we increase the speed then decrease the speed of the whole scene:
animate({target:accelerator, obj:{percentSpeed:200}, time:1, rewind:true, ticker:false});
// here we change the speed of the whole scene based on the x position of the mouse
// at the very left, the speed is -200 percent and at the right the speed is 200 percent
// in the center, the speed is 0 - damping is optional but always looks better!
const damp = new Damp(accelerator.percentSpeed);
Ticker.add(()=>{
var newSpeed = (F.mouseX-W/2)/(W/2)*100*2;
accelerator.percentSpeed = damp.convert(newSpeed);
});
PARAMETERS
objects - (default null) registers Scroller or Dynamo objects the Accelerator
pass in a single object or an array of multiple objects
METHODS
add(objects) - registers Scroller or Dynamo objects with the Accelerator
pass in a single object or an array of multiple objects
returns the Accelerator object for chaining
remove(objects) - unregisters a Scroller or Dynamo
pass in a single object or an array of multiple objects
returns the Accelerator object for chaining
pause(state, time, frameNumber) - pause (default) or unpause all the objects added to the Accelerator
state - (default true) set to false to unpause the objects added to the Accelerator
time - (default 0) time in milliseconds to slow down to a speed of 0 and pause
the pause event and paused property will be set after the time has passed
time is ignored if a frameNumber is provided
frameNumber - (default null) get sprites to animate to the frameNumber (probably good for one sprite!)
setting this will make the scene ignore the time parameter above
dispose() - calls dispose() on all the objects
PROPERTIES
type - holds the class name as a String
percentSpeed - adjusts the speed relative to the baseSpeed of each items in the Accelerator - eg. 100 is at the baseSpeed
this can be dynamically changed to change all speeds relatively
paused - (read only) whether the Accelerator is paused or not - only tracks if the pause() method is used
items - an array of all objects added with add()
CLOSE ▲PAGE ▤CODE ▤VIDS
Emitter
zim class - extends a zim.Container which extends a createjs.Container
DESCRIPTION
A particle emitter - so this makes and animates display objects like shapes or bitmaps
Particle emitters are often used for things like fireworks, fire, smoke, sparks, falling objects, etc.
The Emitter is filled with options so have a look at the doc parameters
Here are some examples:
https://zimjs.com/particles/NOTE
consider the Emitter as somewhat experimental and pushing the bounds of the canvas
In future versions we will look into adding CreateJS StageGL (WebGL) examples / support (it might work already)
The Emitter certainly can make excellent and workable effects
But it can also bog the browser if pushed to extremes or sometimes if left going
This possibly means there are memory leaks - we have been doing our best to track things down
The Emitter is reporting an expected number of children so any leaks might be beyond ZIM control
NOTE
each particle starts at the center of the container width and height
If the trace parameter is true then the particle is put in a container that does not move
and the particle moves inside that container as the container is cached with the source-over composite operation
The currentParticle property and all the event objects' particle parameter is the moving particle
However, the children of the Emitter, will be slightly different in each case:
when trace is false, the children of the Emitter container are any active particles
when trace is true, the children of the Emitter container are the containers that hold the active particles
If you have moved, scaled or rotated the Emitter or its container,
then you will want to use var point = myEmitter.localToGlobal(particle.x, particle.y)
and get point.x and point.y to find the location of the particle relative to the stage coordinates
PARTICLES CONTAINER
By default, the Emitter will make a Container and place it beneath itself when added to the stage.
by separating the particles from the emitter, it allows the emitter to be moved without all the particles moving
the container will be given a type of "Particles"
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// make a bunch of spewing pink circles affected by gravity
const emitter = new Emitter(new Circle(5, pink))
.centerReg();
EXAMPLE
// use a sink to attract the particles
const sink = new Circle(10, pink).centerReg().alp(0);
// make one of three types of particles and randomize the colors
const particles = new Emitter({
obj:[
new Circle(20,null,darker,2),
new Rectangle(30,30,null,darker,2),
new Triangle(40,40,40,null,darker,2)
],
random:{color:[blue, green, pink, yellow, orange]},
interval:.02, // default
life:5,
decayTime:1, // default
sink:sink,
sinkForce:.5,
gravity:0,
force:1,
cache:mobile(), // default
})
.centerReg()
.sca(2);
EXAMPLE
// use warm:true to start with rings already emitted
const emitter = new Emitter({
obj:new Circle({
radius:10,
borderColor:white,
borderWidth:30,
strokeObj:{ignoreScale:true}
}),
warm:true,
force:0,
gravity:0,
shrink:false,
fade:false,
life:3,
interval:.5,
animation:{props:{scale:40}, time:3, ease:"linear"}
}).center();
emitter.particles.setMask(new Rectangle(400,400).center().alp(0));
EXAMPLE
// use a StageGL Frame and createjs.SpriteSheetBuilder for circles:
new Frame({ready, scale:FIT, width:1024, height:768, gpu:true});
function ready() {
// if we pass in just a Circle then we would have to turn on cache
// and cache on WebGL counts as an image for each one
// whereas a SpriteSheet just counts as an image for all of the particles
// so build a SpriteSheet from the Circle
var builder = new createjs.SpriteSheetBuilder();
builder.addFrame(new Circle(50, purple));
builder.build();
const emitter = new Emitter({
obj:new Sprite({spriteSheet:builder.spriteSheet}),
num:10, // ten Sprites made every .02 seconds for about 1000 particles per second
life:2,
interval:.02,
gravity:0,
force:2
}).centerReg();
}
// see more examples at https://zimjs.com/particles
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports VEE - parameters marked with ZIM VEE mean a zim Pick() object or Pick Literal can be passed
Pick Literal formats: [1,3,2] - random; {min:10, max:20} - range; series(1,2,3) - order, function(){return result;} - function
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
obj - |ZIM VEE| (default blue, green, pink Circles) a display object to clone - eg. new Circle(10, green);
can also specify a shape config object with the following properties to draw inside a shape as an alternative to the trace property
{type:"shape", s:white, ss:1, f:red, sd:{noPick:[20, 10]}, offset:3}
the parameters accept ZIM VEE values except the type and sd as it requires an array as a final value
type:"shape" is required. s is setStroke, ss is setStrokeStyle, sd and offset are setStrokeDash in CreateJS
line thickness (ss) is currently not staying in the latest CDN CreateJS - this is working in the NEXT build
width - (default 300) the width of the Emitter container - used as cache bounds for trace if trace is true
height - (default 300) the height of the Emitter container - used as cache bounds for trace if trace is true
these dimensions will affect performance if the trace parameter is true so use carefully
also see the traceShiftX and traceShiftY to specify the caching rectangle position
interval - |ZIM VEE| (default .02) the time in seconds between emitting particles
num - |ZIM VEE| (default 1) the number of particles emitted each interval
life - |ZIM VEE| (default 1) the time in seconds the particle will exist (also see ZIM TIME constant - same for all times)
fade - (default true) Boolean to fade the particle (alpha 0) - set to false to not fade out the particle over the decayTime
shrink - (default true unless trace is true) Boolean to shrink the particle (scale 0) - set to false to not shrink the particle over the decayTime
warm - (default null) set true to make particles ahead of time to look like the emitter has been running
set to true to use life/duration as from then on there would be repeat - or set to a desired number of particles
this will temporarily turn off the pooling to make the warmed particles
decayTime - (default 1) time in seconds to fade and / or shrink the particle - ends animation at the life time unless decayStart is set
decayStart - (default null) time in seconds to start the decayTime otherwise decay (fade and shrink) ends at the end of life time
trace - (default false) Boolean set to true to leave trails by caching each particle with source-over composite operation
traceFadeTime - (default decayTime) time in s to fade out traced particle to 0 alpha at the end of the particle life time
traceShiftX - (default 0) x amount to shift the cache rectangle for the traced particle
traceShiftY - (default 0) y amount to shift the cache rectangle for the traced particle
the particle starts centered in the width and height of the Emitter container
if you have particles falling - for instance fireworks, you can shift the cache rectangle down to see more trails
and then place the Emitter up higher on the stage
angle - |ZIM VEE| (default {min:0, max:360}) the angle the particle will emit (0 is along the positive x axis)
if you want to shoot particles in one direction just use angle = 20
if you want something shooting up on either side of the y axis you can use:
angle = {min:-90-20, max:-90+20}; this may be easier to visualize
if you want to emit at 45 or 90 then use [45, 90]
force - |ZIM VEE| (default 5) the force for the emitter to shoot the partice at an angle
if you want to shoot a variety use force = {min:2, max:10} etc.
gravity - (default 9.8) the force of gravity going down - can be negative to make particles float up
wind - (default 0) a force you can apply in the horizontal direction either negaitive for left or positive for right
layers - (default TOP) where to place the current particle being emitted - values are TOP, BOTTOM, and RANDOM
animation - |ZIM VEE| (default null) a zim animate config object to apply to the particle
This is the whole zim DUO object to pass to animate - including a props parameter that holds the animation object
To pass in two or more animations on the same particle then use {noPick:[{animation1}, {animation2}, {etc.}]}
random - (default null) an object holding properties to animate, each property holding a ZIM VEE Value object for Pick.choose() to pick from per particle
eg: {color:[red, white, green], scale:{min:1, max:2}} // scale is a convienence property for both scaleX and scaleY
horizontal - (default false) start the particles across the emitter's width at the top of the emitter (unless vertical is set to true)
vertical - (default false) start the particles across the emitter's height at the left of the emitter (unless horizontal is set to true)
sink - (default null) an object with x and y properties (can be a display object) that the particles will be pulled to (or pushed if sinkForce is negative)
sinkForce - |ZIM VEE| (default 10 if sink) the force particles are moved towards the sink location
cache - (default mobile() or false if gpu) Boolean to cache each particle - helpful if complex shape or text
Bitmap, Pic, Sprite will not be cached.
events - (default false) Boolean - set to true to receive events from Emitter
startPaused - (default false) Boolean - set to true to start the Emitter in the paused state
pool - (default true) Boolean if true, makes as many particles as it needs before recycling particles
this improves performance as new particles do not need to be made and old ones remove
see also the clearPool() method to start collecting a new type of particle, etc.
poolMin - (default 0) a minimum number of pooled particles before new particles are no longer made (if pool is true)
eg. setting poolMin to 100 would make 100 particles and then start reusing these particles for performance
if you set pool to true and do not specify a poolMin then ZIM will calculate the needed number to properly recycle
but you can override this number if you want a larger pool for more selection
particles - (default null) a container for the particles
by default, the Emitter will make a Container and place it beneath itself when added to the stage.
by separating the particles from the emitter, it allows the emitter to be moved without all the particles moving
the container will be given a type of "Particles"
focusWarm - (default true) if Emitter window pauses on blur and comes back in focus Emitter will warm (see warm parameter)
can set to a number or false or leave as true to use life/interval as the number of particles to instantly create
this parameter is independent of the warm parameter - so will run even if warm is null
METHODS
spurt(num, time, restart) - shoots particles (usually would pause Emitter before doing this)
supports ZIM DUO config object
num - |ZIM VEE| (default null) number of particles to emit according to Emitter settings
time - |ZIM VEE| (default null) alternatively, time in seconds to emit particles according to Emitter settings
if both num and time are provided the faster one will stop the emitting
dispatches three different spurt events - see events
restart (default false) set to true to restart the particles when spurted (removes old particles)
pauseEmitter(state, restart, freeze, immediate) - pause or unpause the Emitter
state (default true) will pause the emitter or set to false to unpause the emitter
this will set the read only paused property to true or false accordingly
restart (default false) set to true to restart the particles when unpaused
otherwise continues the particles from where they were
freeze (default false) set to true to freeze the particles
othewise pause just stops emitting and existing particles continue their life
immediate (default false) set to true to emit right away after unpausing
otherwise just emits on normal schedule
clearPool() - clear the pool of particles - use if you change the obj or its properties (no effect if pool parameter is false)
resize(width, height) - resizes the Emitter container and any cache bounds for new particles
hasProp(property as String) - returns true if property exists on object else returns false
clone() - makes a copy with properties such as x, y, etc. also copied
all current properties will be cloned except for startPaused for which the initial parameter value is cloned
dispose() - removes event listeners from Window and content and removes any new Ticker functions
ALSO
ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO
see the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.
PROPERTIES
type - holds the class name as a String
** All the PARAMETERS are available as PROPERTIES to get and set (except for the force and cache parameters - and width and height act differently)
emitterForce - get and set force - do not use force property - due to conflict with physics force
emitterPaused - read only Boolean as to whether the Emitter is paused or not - see also pauseEmitter() method
particles - a reference to the Container that holds the particles
particles has noMouse() set to if interaction is desired use emitter.particles.mouse()
this container will be given a type of "Particles"
currentParticle - the latest particle emitted
if trace is false then this is myEmitter.getChildAt(myEmitter.numChildren-1);
if trace is true then this is myEmitter.getChildAt(myEmitter.numChildren-1).getChildAt(0);
particlesEmitted - the number of particles that have been made / emitted
spurtNum - total number of particles to spurt (when spurt() is called)
spurtCount - number of particles spurted so far (when spurt() is called)
zimInterval - the interval used to create particles
zimTicker - the ticker used to animate particles
** CHILD PROPERTIES - each child has a particle (if trace is true) or is a particle (if trace is false)
particle - a reference to the particle for the child (could be to itself)
particleNormal - true or false if particle is not decaying or fizzing
particleDecaying - true or false if decaying - particle is currently animating to either scale 0 or alpha 0
particleFizzing - true or false if fizzing - trace container is currently animating to alpha 0
ALSO
see ZIM Container for properties such as:
width, height, widthOnly, heightOnly, draggable, level, depth, group
blendMode, hue, saturation, brightness, contrast, etc.
ALSO
see the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.
EVENTS
** the below events all have a particle property that gives access to the particle (not the particle container for a traced particle - ask for the particle.parent for that)
dispatches a "spurted" event once the spurt() method is finished emitting particles
dispatches a "spurtdecayed" event once the last spurted particle decays (fade / shrink)
dispatches a "spurtfizzed" event once the last spurted particle's life ends
** the below events only trigger if the events parameter is set to true (default is false for slight performance edge)
dispatches an "emitted" event when a particle is made
dispatches a "decayed" event when the particle's decayStart + decayTime ms has elapsed
dispatches a "fizzed" event when the particle's life ms has elapsed
ALSO
see the CreateJS Easel Docs for Container events such as:
added, click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover
CLOSE ▲PAGE ▤CODE ▤VIDS
Generator
zim class - extends a ZIM Container which extends a CreateJS Container
DESCRIPTION
Used for dynamic drawing such as generative art or visualizations.
Generator provides a set of RELATIVE drawing commands
that primarily match the traditional absolute drawing commands for shapes on the canvas.
Rather than add all these commands to the Shape class they have been added to the Generator class.
This optimizes the Shape class which is used for all components and ZIM shapes.
HOW IT WORKS
The arrangement is similar to Processing (or P5js for a JS version).
There is one Shape that gets drawn into and code can be put in three different callback functions:
setup - happens once at the start (similar to Processing)
draw - happens at the framerate (similar to Processing)
stamp - loops all at once (different that Processing?)
SETUP
The optional setup runs once before the draw or stamp functions run.
This function will not be used as much as in Processing because ZIM has a Frame().
Also, things can be set up before the Generator code is called.
And the Generator class has parameters for color, strokeColor and strokeWidth.
Generator defaults to start at the center of the stage - so in the setup,
translate(-W/2, -H/2) could be used to start at the top left.
Setup can be run again with resetup()
DRAW
The optional draw function runs at the framerate and receives count, total and shape parameters.
This will have the affect of animating the drawing as it "processes" the code
By default, this will pause and unpause when the screen or the spacebar is pressed.
Draw can be drawn again with redraw()
STAMP
The optional stamp function runs inside a loop and produces the final drawing at once.
The function receives count, total, shape and stampNum parameters.
You can switch between the stamp and draw function with the same code inside.
The end product will be the same.
Stamps can be stamped again with restamp()
RELATIVE
The draw and stamp work the same way, running the code inside for each count.
The magic happens because the commands are relative.
Even g.rectangle().rotate(5) is beautiful.
Each new rectangle after the first will be rotated 5 degrees
In absolute space, the corner points would have to be calculated with sine and cosine - ew.
Generator does the matrix calculations to avoid this.
Each new command starts where the last command left off.
But each command also has an x and y value to translate if desired.
This x and y value is relative to the current rotation and scale.
Often, the x and y is left at 0, 0.
We considered removing them as parameters because translate() can be called
but we left them in to be the same as Processing.
COUNT, PAUSE AND STEP
The count parameter of draw or stamp suplies the current count.
This provides ways to modify commands.
for instance circle(0,0,count*10); will draw circles that get bigger.
This can also be used to set the rate of change - often by using smaller factors such as count*.01, etc.
Count can also be used to pause or do something different at certain places in the drawing
Pause also has an optional number of seconds to pause or a ZIM interval() and pause(false) can be used.
Generator has a count property which can be set to go forward or back to a certain count.
Step calls a step - usually used when pause is true - an interval could then be used for steps
PUSH AND POP
There is also push() and pop() as in Processing.
These remember the position, rotation, scale and skew when push() is used
and then return the generator to these settings when pop() is used.
Multiple pushes can be set and then popped back.
These can be used to make fractals with recursive branching.
CLEAR AND RESET
The clear() method will clear the image but keep the transforms
The reset() method will reset the transforms, set to startX and startY and reset color, strokeColor and strokeWidth
These can also be called through resetup(), redraw() and restamp()
EXPORT
Generator() can export frames as images that can then be compiled into a video.
Set the output parameter to true or a file prefix string (otherwise the prefix will be gen).
This will make Generator() use draw (even if stamp is set)
at 6 frames per second so the Browser can handle file saves.
The files will be saved with 6 numbers: gen_000000.png, gen_000001.png, etc.
They will be saved in your Browser's default downloads so MOVE them into a folder of their own.
See the note at bottom about enabling Browser Automatic Downloads.
NOTE
the canvas background color does not show up
if desired, add a new Rectangle(W, H, F.color).addTo().bot();
NOTE
Generator() will output the first image before it starts drawing.
You can delete the first image if you want the video to start at the first drawn frame.
NOTE
FFmpeg is suggested but there are other options such as https://github.com/spite/ccapture.js
Or screen capture software such as OBS - if just posting to Twitter and quality does not matter.
Instructions to make a video from saved image series:
Download FFmpeg: https://zimjs.org/cdn/ffmpeg.zip, UNZIP it and put it INTO the image folder.
Open a command line. On PC, type "command" into the Windows search box then on the command line type:
cd \path\to\images or to change drive use /d like cd /d E:\path\to\images
Once in the directory with your images type (or paste) something like:
ffmpeg -r 60 -f image2 -s 1024x768 -i gen_%06d.png -vcodec libx264 -crf 25 -pix_fmt yuv420p final.mp4
You can read about these at https://www.ffmpeg.org/ffmpeg.html (but would not bother)
-r framerate (fps)
-f canonical form (image2 to work with image sequences)
-s resolution
-i file name to find with %06 representing 6 decimal placeholder
-vcodec codec
-crf quality - the lower the better... 10-30 is fine
-pix_fmt pixel format
final.mp4 the output video
NOTE
to enable Multiple File Downloads in Chrome "simply" go to
menu > Settings > Privacy & Security > Site Setting >
Permissions > Addtional Permissions > Automatic Downloads > turn Ask ON
We found that ADD site: file:///path/ to local file did not seem to prevent Chrome from asking.
And part way through Chrome asked again for permission to download but the process still worked.
Alternatively, we could look at saving Blobs (data) of the images but the download process works.
GENERAL EXAMPLES
SEE: https://zimjs.com/cat/generator.html
SEE: https://zimjs.com/codepen/bloob.html // for animating stamps with noise
NOTE
The drawing uses matrix transforms on Shape which takes the shape out of traditional positioning.
A drawing property is available on the Generator that points to a Container that holds the drawing.
This container can be moved, dragged, etc. so use this to manipulate the drawing in a traditional manner.
The generator has a shape property which can be used to access the raw shape for absolute drawing for instance.
NOTE
The drawing container is automatically added to the default stage as the Generator is created
NOTE
if manually caching generator.shape or generator.drawing,
there is a slight time delay before shape is drawn so cache when the "complete" event is called
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// Draw a line from the center of the stage to 100 pixels to the right
// usually we draw inside a draw or stamp function
const g = new Generator();
g.line(0,0,100,0);
EXAMPLE
// draw an octagon - stop at 8 lines
const g = new Generator({draw:gen});
function gen(count) {
g.line(0,0,100,0).rotate(45);
if (count == 8) g.stop();
}
// or use maxCount:
const g = new Generator({draw:gen, maxCount:8});
function gen(count) {
g.line(0,0,100,0).rotate(45);
}
// make a Blob with points of drawing
// could set interactive:false on Blob for just filled in picture
// lines will not fill in Generator
// shapes fill and curves fill themselves but not collectively
const g = new Generator({stamp:gen, maxCount:8, recordLinePoints:true});
function gen(count) {
g.line(0,0,100,0).rotate(45);
}
g.on("complete", makeBlob);
function makeBlob() {
new Blob({points:g.linePoints, color:red}).addTo();
g.drawing.removeFrom()
S.update();
}
EXAMPLE
// draw a fan of lines always going back to 0,0
const g = new Generator({draw:gen, maxCount:360/5});
function gen(count) {
g.line(0,0,200,0).translate(-200).rotate(5);
}
// or stamp the fan of lines:
const g = new Generator({stamp:gen, maxCount:8});
function gen(count) {
g.line(0,0,100,0).rotate(45);
}
// make random color lines with a hole in the middle and draggable
const g = new Generator({stamp:gen, strokeColor:[red,pink,purple], strokeWidth:2, maxCount:360/5});
function gen(count) {
g.line(50,0,200,0).translate(-250).rotate(5);
}
g.drawing.drag();
// make a series of color lines with a hole in the middle and draggable
// using push() and pop() to not think about how to reset!
// so... draw a line, go back to how it was before drawing, rotate, then draw a line, etc.
// each time it draws the line it chooses the next ZIM VEE value in the series
const g = new Generator({stamp:gen, strokeColor:series(yellow,green,orange), strokeWidth:5, maxCount:360/5});
function gen(count) {
g.push().line(50,0,200,0).pop().rotate(5);
}
// add a circle to the end
const g = new Generator({stamp:gen, strokeColor:series(yellow,green,orange), strokeWidth:5, maxCount:360/5});
function gen(count) {
g.push().line(50,0,200,0).circle(15,0,5).pop().rotate(5);
}
// removing circle stroke and adding fill the same color as the stroke
// note, do not remove the stroke first or the currentColor will be null
// currentColor is the applied color from the ZIM VEE value
const g = new Generator({draw:gen, strokeColor:series(yellow,green,orange), strokeWidth:5, maxCount:360/5});
function gen(count) {
g.push()
.line(50,0,200,0)
.fill(g.currentStrokeColor)
.noStroke()
.circle(15,0,5)
.pop()
.rotate(5);
}
EXAMPLE
// using ZIM VEE series to adjust stroke color and width
const g = new Generator({draw:gen, maxCount:360/2, strokeColor:green});
const s = series({min:1, max:4}).step(.1).bounce(); // stroke sizes
const c = series(blue,pink,green).every(12); // color change
function gen(count, total, g) {
g
.rectangle(0,0,200,200)
.stroke(g.currentStrokeColor.toColor(c,.3), s) // blend color change
.rotate(2);
}
EXAMPLE
// Clone example
const g1 = new Generator({draw:gen, maxCount:360/10});
function gen(count, total, g) {
// note: we have three generators calling this function
// so collect and use the generator g that is calling gen()
g.rectangle(0,0,100,100).rotate(10);
}
const g2 = g1.clone();
g2.drawing.mov(100);
const g3 = g1.clone();
g3.drawing.mov(-100);
EXAMPLE
// draw rectangles that get smaller and translate like a starfish
const g = new Generator({
draw:gen,
color:series(yellow,green,orange),
strokeColor:white,
strokeWidth:3,
maxCount:100/.3
});
function gen(count, total) {
var mod = count*.3
g.rectangle(mod, mod, 100-mod, 100-mod, 0).rotate(30);
}
EXAMPLE
// common processing tree
const g = new Generator({
strokeColor:green,
strokeWidth:2,
setup:gen
});
function gen() {
var length = 150;
g.translate(0, H/2);
branch(150, 5);
// recursive function - not stamp or draw
function branch(length, thickness) {
g.line(0,0,0,-length);
if (length > 4) {
g.push().rotate(30);
branch(length*.75);
g.pop().push().rotate(-30);
branch(length*.75);
g.pop();
}
}
}
EXAMPLE
// Using restamp to animate Generator
// Radial Animation and Noise - also see:
https://codepen.io/danzen/pen/ExgQRjWhttps://codepen.io/zimjs/pen/XWjrmoQhttps://codepen.io/zimjs/pen/jOMZjOy
const segments = 30; // how many lines
const delta = 360/segments; // angle between each line
const inner = 100; // inner radius
const outer = 300; // outer radius
const variation = outer-inner; // maximum noise
let c = 1; // curve factor
let s = .02; // speed factor
let t = 0; // time
// The ZIM Generator() works somewhat like Processing / P5js.
// Setting stamp instead of draw will draw all generations immediately
// rather than one generation at a time.
const g = new Generator({
stamp:gen,
strokeWidth:2,
maxCount:segments
});
function gen(count) {
let angle = delta*count*RAD; // (0-360 degrees in radians)
// use sin and cos to make noise values join back at same place
let noise = g.noise(c*Math.sin(angle), c*Math.cos(angle), t);
let radius = inner+variation*noise;
g.push()
g.push().line(0,0,radius,0).pop().line(radius,-5,0,10);
g.pop()
g.rotate(delta); // rotate delta each time
}
Ticker.add(()=>{
t+=s; // set the speed through the noise
g.restamp();
});
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports VEE - parameters marked with ZIM VEE mean a zim Pick() object or Pick Literal can be passed
Pick Literal formats: [1,3,2] - random; {min:10, max:20} - range; series(1,2,3) - order, function(){return result;} - function
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
color - |ZIM VEE| (default null) the fill color of shapes and individual curves (lines do not fill like in normal shape drawing)
strokeColor - |ZIM VEE| (default white) the color of the stroke or shape border
strokeWidth - |ZIM VEE| (default 1) the thickness of the stroke or shape border
draw - (default null) an optional function to call within an internal ZIM new Ticker that runs at the frame rate
draw will receive count, maxCount and generator parameters
will result in the same drawing as the stamp function but animates the drawing
stamp - (default null) an optional function to call within an internal ZIM loop
stamp will receive count, maxCount and generator parameters
will result in the same drawing as the draw function but happens right away (or within syncronous processing time)
setup - (default null) an optional function to call before the stamp or call functions run
setup will receive count (0), maxCount and generator parameters
maxCount - (default 1000) the maximum number of times the stamp or draw functions will run
boundary - (default null) the drawing size if cache is true
drawCount - (default 1) the count per draw. Set to a higher number to slow down the drawing (2 is twice as long)
drawPause - (default true) set to false to not pause the draw function on stage mousedown
will dispatch "generatorpaused" and "generatorunpaused" events
note the pause() method as well to handle pauses manually
drawSpacebarPause - (default true) set to false to not pause the draw function when the spacebar key is pressed
will dispatch "generatorpaused" and "generatorunpaused" events
note the pause() method as well to handle pauses manually
startX - (default S.width/2) set to 0 to start at stage left, etc.
startY - (default S.height/2) set to 0 to start at stage top, etc.
cache - (default false) set to true to cache image and boost performance - especially when dragging a complex drawing afterwards
if you notice performance issues then set cache to true
setting cache to true will be a little blurry
NOTE: if manually caching shape, there is a slight time delay before shape is drawn so use the "complete" event to applying cache()
recordLinePoints - (default false) set to true to record the end points of line() commands
set to "nonzero" to also record non-zero start points
set to "zero" to also record 0,0 start points (and non-zero start points (and end points)))
see the linePoints property to retrieve the array as [[x,y], [x,y], [x,y], etc.]
frame - (default zimDefaultFrame) change to another frame if not drawing in the zimDefaultFrame
seed - (default null) a specific seed for the Generator Noise - otherwise random
output - (default null) set to true to export frames as images
set to a string to change the prefix of the file names to something other than "gen"
output will export a series of images with six digits.
The images can be compiled into a video
SEE the EXPORT section at the bottom of the Generator() docs description.
Also see outputType
outputType - (default "png") or set to "jpeg" - the file type used if the output parameter is set to true
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly
METHODS
** ALL PARAMETER BELOW SUPPORT |ZIM VEE|
** These are relative shape commands similar to traditional shape commands (see Shape on Docs)
** Note that the curves also include an x and y as the first two parameters
** Methods return the generator for chaining (unless otherwise specified)
fill(color) - sets the color or no fill if left empty or null is passed in
also see lighten(), darken(), toColor()
stroke(color, size) - sets the stroke color and / or stroke size
leaving one empty or null will not adjust that parameter - see noStroke() to remove stroke
also see lighten(), darken(), toColor(), thicken()
noStroke() - turn the stroke off
translate(x, y) - move the location relatively
if the shape is rotated then translate(100) will move along the rotation angle
rotate(degrees) - relatively rotate future drawing by this angle - does not affect previously drawn shapes
setScale(x, y) - relatively scale future drawing by this amount - does not affect previously drawn shapes
leaving y out will scale both x and y the same
** scale(x, y) is DEPRECATED - it works for now, but might be removed as it conflicts with DisplayObject.scale property
skew(x, y) - relatively skew future drawing by this angle - does not affect previously drawn shapes
leaving y out will NOT skew the y
line(x1, y1, x2, y2) - draw a line from the start x and y to the end x and y
this will be oriented to the current rotation and scaled and skewed to the current scale and skew settings
arc(x, y, radius, startAngle, endAngle, anticlockwise) - an arc that will be adjusted to current transform settings
curve(x1, y1, cpx, cpy, x2, y2) - a quadratic curve that will be adjusted to current transform settings
x1 and y1 - the start point - note the Shape qt() or CreateJS graphics.curveTo() do not include this start point
cpx and cpy - control point adjusted relatively to current transform settings
x2 and y2 - the final point adjusted relatively to current transform settings
bezier(x1, y1, cp1x, cp1y, cp2x, cp2y, x2, y2) - a cubic bezier curve that will be adjusted to current transform settings
x1 and y1 - the start point - note the Shape bt() or CreateJS graphics.bezierTo() do not include this start point
cp1x and cp1y - control point for the first point's Bezier handle adjusted relatively to current transform settings
cp2x and cp2y - control point for the second point's Bezier handle adjusted relatively to current transform settings
x2 and y2 - the final point adjusted relatively to current transform settings
rectangle(x, y, w, h, a, b, c, d) - a rectangle if x, y, w, h are provided
a, b, c, d are for rounding the corners
if only a is provided then all corners will round to a
otherwise they start at the top left and go clockwise to bottom left
a: topLeft, b:topRight, c:bottomRight, d:bottomLeft
circle(x, y, radius, percent, percentClose) - a circle
with percent like the ZIM Circle() - to make a semicircle
and percentClose (default true) to close the path of the semicircle
oval(x, y, w, h) - an oval specified by with width and height which will be adjusted relative to current transform settings
poly(x, y, radius, sides, pointSize, angle) - a polygon like the ZIM Poly() but with x,y and angle parameter
radius - (default 50) the radius (from the center to the edge or half the diameter) ;-)
sides - (default 5) the number of sides
pointSize - (default 0) a factor that will indent or outdent the sides to form stars
0 is no indent - 1 is a complete indent - which will have no fill and if there is a border will look like a stick figure
beyond 1 is cool - it overlaps on itself and makes multiple patterns
angle - (default 0) along the relative x axis - different than Poly() which rotates negaitve 90 to start
** ALL PARAMETERS ABOVE SUPPORT |ZIM VEE|
push() - remember the current transform properties (x,y,rotation,scale,skew) and color and stroke properties
see pop() to return to these remembered property settings
note push() can be used any number of times before pop() is used, effectively nesting remembered states
pop() - return to the remembered transform properties (x,y,rotation,scale,skew) and color and stroke properties
see push() to set remembered properties
note push() can be used any number of times before pop() is used, effectively nesting remembered states
step() - advance the draw function one time - good for when the generator is paused to then step through calculations
blit() - write to drawing cache - if cache is true - done automatically if using draw, stamp or setup
pause(state, time) - pause or unpause the generator with optional time in seconds (see ZIM TIME constant)
will dispatch a "paused" and "unpaused" event - different than the "generatorpaused" and "generatorunpaused" for stage mousedown and spacebar key
stop() - stops the Generator at which point it cannot be started - just make a new one
noise(a,b,c,d) - ZIM Noise simplex method 1,2,3,4 depending on number of parameters
returns a value from 0 to 1 as opposed to the simplex methods which return from -1 to 1
see also the seed parameter for Generator which will seed this Noise
see https://zimjs.com/codepen/bloob.html for a good explanation and example of using Noise with Generator
clear() - clears the shape
reset() - sets the transforms back to 0 (rotation, scale, skew) and sets the x and y to startX and startY
also sets the color, strokeColor and strokeWidth back to original values
resetup(clear) - resets and calls the setup function again
clear defaults to true - set to false to not clear the drawing
redraw(clear, setup) - redraw starting from count 0
clear and setup default to true
set to false to not clear or not call setup
restamp(clear, setup) - restamp starting from count 0
clear and setup default to true
set to false to not clear or not call setup
calling restamp increases the stampNum property - also available as the fourth parameter in stamp
this can be used to animate stamps for instance adjusting a noise input
https://zimjs.com/codepen/bloob.html
clone() - create another generator with the same settings
The clone will call the same setup, draw and stamp functions,
so use the generator parameter in these functions to draw into the specific generator drawings
eg. draw(count, total, g) {g.rectangle(0,0,100,100).rotate(5)}
To make a copy of generator output, clone() the generator.drawing
dispose() - stops and disposes the Generator - the drawing may still need to be removed
ALSO ZIM 4TH adds all the methods listed under Container (see above), such as:
** THESE NEED to be used on the Generator drawing property
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO See the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.
PROPERTIES
type - holds the class name as a String
drawing - reference to the ZIM Container that holds the drawing shape
automatically added to the stage when new Generator() is made
** use this for applying ZIM methods and properties to the drawing
shape - reference to the ZIM Shape object being draw into
** because of the matrix being used, this does not respond to position methods or properties
see the drawing property above to drag, animate, loc, etc.
count - the current count in the draw or stamp loop
maxCount - the number the draw or stamp loop will loop to
drawCount - how many counts go by until the draw function runs - default is 1 for each count
setting to 2 will draw twice as slow, 10 will draw ten times as slow, etc.
stampCount - how many times the stamp function has been called with restamp()
this is also passed in as the fourth parameter to the stamp function
color - |ZIM VEE| get the current color - will set too but not until the next draw - use the fill() method
this could be a ZIM VEE value - also see currentColor for the color actually being applied (after ZIM VEE is picked)
currentColor - the actual color being applied (after ZIM VEE is picked)
strokeColor - |ZIM VEE| get the current strokeColor - will set too but not until the next draw - use the stroke() method
this could be a ZIM VEE value - also see currentStrokeColor for the color actually being applied (after ZIM VEE is picked)
currentStrokeColor - the actual stroke color being applied (after ZIM VEE is picked)
strokeWidth - |ZIM VEE| get the current strokeWidth - will set too but not until the next draw - use the stroke() method
this could be a ZIM VEE value - also see currentStrokeWidth for the color actually being applied (after ZIM VEE is picked)
currentStrokeWidth - the actual stroke width being applied (after ZIM VEE is picked)
currentX - get the current x value
currentY - get the current y value
linePoints - if the recordLinePoints parameter is true then this is an array of [x,y] values
paused - read only as to the pause state of the Generator - see also pause() method
stack - current array of push() remembered transforms stored as a matrix
colorStrokeStack - current array of push() remembered color, strokeColor, strokeWidth, currentColor, currentStrokeColor and currentStrokeWidth properties
ALSO See the CreateJS Easel Docs for Container properties, such as:
** THESE NEED to be used on the Generator drawing property
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.
EVENTS
dispatches a "drawing" event each time the draw function is called - not used for stamp function
dispatches a "complete" event when maxCount has been reached - not dispatched if stop() is called
dispatches "paused" and "unpaused" events when pause() is used (and time of time parameter has finished)
dispatches "generatorpaused" and "generatorunpaused" events when stage mousedown or space key is pressed
and drawpause or drawSpacebarPause parameters are true
CLOSE ▲PAGE ▤CODE ▤VIDS
Pen
zim class - extends a ZIM Container which extends a CreateJS Container
DESCRIPTION
Handles dynamic drawing with a set of different penTypes
You can drag() or gesture() pen, move it with a MotionController(),
animate() it, animate() it along a Squiggle or Blob path, etc.
Holding down the CTRL key will allow the pen to move without drawing
SEE: https://zimjs.com/pen.htmlNOTE
the pen adds either a Bitmap (if cache is true) or a Shape (if cache is false)
to the container the pen is added to. This is layered directly under the pen.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const pen = new Pen({penType:"kitetail", nib:new Circle(10,pink)}).center().drag();
EXAMPLE
// use a MotionController
const pen = new Pen().center();
const motionController = new MotionController({
target:pen,
type:"pressmove",
speed:60,
damp:.5,
mouseMoveOutside:true
});
// if later, animation along a path is desired
// the motionController needs to be disabled
// and the pen set to write
motionController.enabled = false;
pen.write = true;
// position the pen at the start of the path
// and set its damping to start there too...
const path = new Squiggle().loc(100,100).alp(.1);
pen.loc(path.pointControls[0]);
pen.immediate(pen.x, pen.y);
// if animating along a path more than once
// make sure the percentComplete is reset to 0
// (this is a tricky one!)
pen.animate({
// set:{percentComplete:0},
props:{path:path},
time:1,
call:()=>{
// to use the motionController again:
pen.write = false;
motionController.enabled = true;
}
})
EXAMPLE
// A Pen used on two different Pages with ZIM Pages
// See https://zimjs.com/zapp/Z_VKB33
const page1 = new Page(W,H,orange,red);
page1.paper = new Container(W,H).addTo(page1);
const page2 = new Page(W,H,pink,purple);
page2.paper = new Container(W,H).addTo(page2);
const pages = new Pages([page1, page2]).addTo();
pages.active = false; // so drawing does not accidentally swipe pages
STYLE = {
Arrow: {
type:"angle",
pages:pages,
direction:series(RIGHT, LEFT),
trans:"fan",
rotation:series(0,180)
}
}
const next = new Arrow().pos(50,50,RIGHT,BOTTOM);
const prev = new Arrow().pos(50,50,LEFT,BOTTOM);
const pen = new Pen({
paper:page1.paper,
size:20,
color:series(white,black)
}).addTo();
// switch papers
pages.on("page", ()=>{
pen.paper = pages.page.paper;
});
new MotionController({
target:pen,
type:"pressmove",
speed:40,
mousedownIncludes:[pages] // so will track mouse on pages
});
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports VEE - parameters marked with ZIM VEE mean a zim Pick() object or Pick Literal can be passed
Pick Literal formats: [1,3,2] - random; {min:10, max:20} - range; series(1,2,3) - order, function(){return result;} - function
** supports OCT - parameter defaults can be set with STYLE control (like CSS)
size - |ZIM VEE| (default depends on penType) the pen size
color - |ZIM VEE| (default depends on penType) the pen color
damp - (default .5) the damping for the pen - 0 is no movement, 1 is no damping
usually, set to 1 or false for following animate paths
penType - (default "line") a String of "line","kitetail","barbwire","grass","hair","city", or "splatter"
spread - |ZIM VEE| (default depends on penType) some pens use this like the splatter to determine how much the circles spread
borderColor - |ZIM VEE| (default depends on penType) a line down the middle of the pen drawing
borderWidth - |ZIM VEE| (default depends on penType) the thickness of a line down the middle of the pen drawing
end - (default "butt") the cap type as a String "butt", "square", "round" - from CreateJS
paper - (default null) a ZIM Container to hold the drawing - or Pen will make a Container to use
see also the paper property to change containers - for layers in a drawing for instance
nib - (default null) an optional DisplayObject that will be used as the pen - would suggest reg(CENTER) for this
cache - (default true) caches drawing in a Bitmap (improves performance) - set to false to not cache - the paper property points to the Bitmap or the Shape depending
ctrlKey - (default true) turns off drawing when CTRL key is being pressed. Set to false to not turn off drawing when the CTRL key is pressed
cropScale - (default 1) number times stage dimensions image will be cropped
if dragging or shifting shape and paper, may want to set to 3 times the stage size for instance
NOTE: keep this at 1 for iOS to avoid oversize canvas issues. Set to cropScale:mobile()=="ios"?1:3
undo - (default 0) number of undo levels for example 30
undo will be automatically recorded when each drawing stops
undo will also be recorded if dragging a segment(s) with SHIFT or CTRL SHIFT or deleting a segment with delete()
undoKeys - (default true - if undo is > 0) use CTRL Z for undo and CTRL Y or CTRL SHIFT Z for redo - set to false to handle manually
move - (default true) set to false to not be able to drag segments or SHIFT drag all
onTop - (default true) - when dragging, does the selected line come to the top in the current paper
deleteable - (default true) - set to false to not be able to delete segments with CTRL click or all segments with CTRL SHIFT click
doubleClickDelete - (default true) - set to false to not use dblclick to delete segment
holdDelete - (default true) - set to false to not use hold (without moving) to delete segment
immediateStop - (default true) - if pressup is used (drag or MotionController) then stop drawing immediately when press is up
set to false to keep drawing until damping is finished.
lineAlpha - (default 1) the alpha for each line drawn
lineBlendMode - (default "normal") the blendMode for each line drawn () - such as "difference", "multiply", etc. same as CreateJS compositeOperation
frame - (default zdf or zimDefaultFrame) the frame in which the pen will operates
dashed - (default null) set to true for a dash of 3 otherwise set to an array [size, space]
but since the pen is made up of smaller parts, the space unless small will not work and can be set to 100 or some large number.
pullColor - (default null) add a little line that pulls the pen
when there is damping around .1 or so, the pen can seem to be behind the cursor or finger
adding a pullLine can help the user understand this
pullThickness - (default 1) the thickness of the pull line - the pullColor must be set
style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults
group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class)
inherit - (default null) used internally but can receive an {} of styles directly
METHODS
setPen(newPen) - sets the pen and resets the default properties for the pen
immediate(x, y) - set the pen to this location without damping
clear() - clears the drawing
stop() - stops drawing and saves segment - may start drawing right away again if pen is moving...
see infinite property to make sure drawing continues as one segment until stop() is called
infinite is automatically set to true when animating pen along a path
and stop() is called when animating along a path is complete (or paused)
saveState(obj, startLayer, endLayer) - record an undo state for the paper or a line segment if it is transformed - for an undo()
use after manually resizing, positioning, rotating, setting alpha and skewing the paper or a line segment
saveState() is not needed for dragging a line segment with SHIFT, CTRL SHIFT or if dragState or dragAllState is true
startLayer and endLayer are for if the layer level of the shape changes
undo() - go back one undo state (called automatically by CTRL Z if undoKeys is true - default)
redo() - go forward one undo state (called automatically by CTRL Y or CTRL SHIFT Z if undoKeys is true - default)
deleteSegment(object) - delete a line segment object
use: pen.paper.on("mousedown", e => {
pen.deleteSegment(e.target); // for instance
})
clone() - clone the pen (note there is no exact clone)
dispose(all) - all defaults to true to dispose all listeners, the pen and the current paper
set to false to remove all listeners and the pen but not the current paper (the container and its shape)
ALSO ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO See the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.
PROPERTIES
type - holds the class name as a String
drawX - a reference to the approximate current drawing x position
needed because pen.x will give the location of the pen but not the drawing location because of damping
drawY - a reference to the approximate current drawing y position
needed because pen.y will give the location of the pen but not the drawing location because of damping
paper - the Container that holds the drawing which are Bitmap objects if cache is true or Shape objects if cache is false
the paper is centered on the stage and may be bigger or smaller depending on the cropScale setting
the paper can be changed to a different Container or swapped back and forth for layer type control
paper has shape, bitmap and paperNum properties
clear() and dispose() will clear the current paper - not other papers - keep a reference to those and use dispose() on them if needed
lastSegment - gets the last segment drawn when pen has stopped - for instance use in a stop event function to get the line last drawn
this will be a Bitmap (if cache is true) or a Shape (if cache is false)
all segments have a paper property referring to its paper (which is also the segment's parent property)
lastSelected - gets the last selected segment - perhaps a segment was dragged, etc.
nib - get a reference to the specified nib - often not used
end - get or set the type of end for the pen - "butt", "round", "square"
write - get or set whether the pen is writing to the paper
drawing - read only Boolean as to if the pen is drawing as in moving
size - |ZIM VEE| get or set the size of the pen
sizeFactor - (default 1) get or set a factor to multiply the size of the pen (after being picked from ZIM VEE)
works independent of sizeScale
sizeScale - (default 1) get or set scaling on the size of the pen (after being picked from ZIM VEE)
works independent of sizeFactor
spread - |ZIM VEE| get or set the spread of the pen
spreadFactor - (default 1) get or set a factor to multiply the spread of the pen (after being picked from ZIM VEE)
works independent of spreadScale
spreadScale - (default 1) get or set scaling on the spread of the pen (after being picked from ZIM VEE)
works independent of spreadFactor
color - |ZIM VEE| get or set the color of the pen
pullColor - get or set the pullColor of the pen - see pullColor parameter
pullThickness - get or set the pullThickness of the pen the pullColor must be set
borderColor - |ZIM VEE| get or set the borderColor of the pen
borderWidth - |ZIM VEE| get or set the borderWidth of the pen
dampX - the ZIM Damp object for x position - change by using dampX.damp = value
dampY - the ZIM Damp object for y position - change by using dampY.damp = value
penType - get or set the type of pen - this will NOT set default properties like setPen()
undoLevels - get or set the number of undo levels
undoKeys - get or set if CTRL Z and CTRL Y / CTRL SHIFT Z are used for undo and redo
immediateStop - get or set how drawing segments ends - "both", "pressup", "mousemove" and "either" are options (see parameter for more info)
infinite - boolean to keep recording until stop() is called
ALSO See the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.
EVENTS
dispatches a "drawing" event when drawing - note lastSegment is assigned when the drawing is stopped
dispatches a "start" event when pen motion starts (mousedown)
dispatches a "stop" event when pen motion stops
If the immediateStop parameter is BOTH (default) then the pen must also be UP to trigger the stop
This is if drag() or motionController({type:"pressmove"}) is being used.
If the immediateStop parameter is "mousemove" then the stop will trigger when the motion stops - regardless of the pen being up or down
This setting may cause small drawing segments at corners of lines or if the pen is held down and moved slowly
If the immediateStop is either then either the pressup or mousemove stopping - which ever comes first - will end segment
dispatches a "change" event for when the drawing has a new segment (or on undo / redo)
dispatches a "paperChange" event when undo or redo changes paper objects
The pen switches papers just before the paperChange is dispatched but before the change event is dispatched
dispatches a "paperMove" event when the paper moves with CTRL drag
dispatches a "recordUndo" when any type of undo is recorded - new segment, delete, drag, clear
dispatches an "undo" and a "redo" whenever undo and redo happens
CLOSE ▲PAGE ▤CODE ▤VIDS
SoundWave
zim class - extends a CreateJS EventDispatcher
DESCRIPTION
Receives a sound input and calculates frequency data using HTML AudioContext createAnalyser()
The input can be the mic, a Synth tone(), play() or the result of a asset("someSound").play() or an <audio> tag
You can specify the number of data points and then use the calculate() method to animate to sound
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// the app may need to be interacted with before calling this
// in a Button mousedown event or Pane close event for instance.
const soundWave = new SoundWave(50, "mic");
soundWave.on("ready", ()=>{
Ticker.add(()=>{
let data = soundWave.calculate();
// data is an array with 50 frequency amplitudes from low to high based on Microphone input
})
});
// or pass in a sound instance:
// before loading the sound with F.loadAssets() use the following:
// this forces CreateJS to use an <audio> tag format
// we are trying to get things to work with WebAudio and will remove this message when we do!
createjs.Sound.registerPlugins([createjs.HTMLAudioPlugin]);
// later when we the loading is complete and after interacting with app
const soundWave = new SoundWave(50, new Aud("mySound.mp3").play());
// or pass in an <audio> tag reference:
const soundWave = new SoundWave(50, zid("tagID"));
zid("tagID").play();
// see more examples at
// https://zimjs.com/soundwave/bars.html
// https://zimjs.com/soundwave/circles.html
// https://zimjs.com/soundwave/mouth.html
PARAMETERS supports DUO - parameters or single object with properties below
num - (default 120) Number of data points returned by the calculate() method
input - (default "mic") the input for the sound:
A. the mic
B. the result of a ZIM Synth play() or tone()
C. the results of a new Aud("someSound").play() or asset("someSound").play()
D. an <audio> tag reference zid("tagID") make sure to zid("tagID").play()
include - (default 120/1024 = .117) a decimal range to include (0-1) - the full range (1) includes 90% very high frequencies
smoothing - (default .85) a decimal range for smoothing with 0 being choppy and .9 being slow to respond, etc.
min - (default -80 mic -100 song) minimum decibel number to pick up
max - (default -40 mic -10 song) maximum decibel number to pick up
operation - (default function below) a function that is applied to each result in the original bufferLength (1024)
the natural results are very bass heavy with roughly a straight line heading down as frequency gets higher
the default function reduces the bass by half and slowly rises towards the original values for higher frequency
function(amplitude, i) {
return amplitude * (.5+i*1/Math.pow(SoundWave.bufferLength, .95));
}
you can pass in a different function to take the place of the default function
the function receives the original amplitude and index as parameters
you can use SoundWave.bufferLength to get the total number of values in the original data (1024)
Note: the data returned by the calculate() method will be only the included range - eg. .117 of the total original values (starting at low frequency)
baseline - (default 30) removes this amount of amplitude from each data point (after operation is applied)
magnify - (default 5) multiplies the data point by this much (after the baseline is removed)
by removing the baseline amount and multiplying what's left the difference in wave data is increased
reduce - (default 0) subtracts this amount from each data point (after magnified)
adjust - (default 5) seconds to adjusts the max value used for calculate(normalized)
a maximum is found over this amount of time and used to normalize the rest of the frequencies
setting this to 1 second would basically keep maximum output - but loses drop offs in sound
channel - (default null) null will be both channels - set to 0 for left or 1 for right
if 0 or 1 is set then will output only that channel as sound
for both channels independently, use two SoundWave() objects one with channel:0 and one with channel:1
METHODS
calculate(normalize) - returns an array of amplitudes at various frequencies from low to high
the array will have a length that matches the num parameter
the range of frequencies used will be 1024 multiplied by the include factor - eg. .117 = 120
this 120 will be divided by the num parameter and average results over the range will be used
this means the num parameter must be less than the 1024 times the range otherwise there is a warning
normalize (default true) gets frequency numbers between 0-1 - set to false to get general numbers
this is controlled by the SoundWave adjust parameter which gets a maximum over time
the frequencies are divided by the maximum
setInput() - change the input to another sound
dispose(context) - disposes the analyser. Disposes the audioContext too if context is true (default false)
the new Ticker function used in the app will need to be removed - see new Ticker.remove()
and any animated DisplayObject will need to be removed, etc.
PROPERTIES
type - holds the class name as a String
num - read only num of frequency data
input - get the current input of the SoundWave - see setInput() to set the input
smoothing - a decimal range for smoothing with 0 being choppy and .9 being slow to respond, etc.
analyser - the HTML analyser object https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode
with minDecibels, maxDecibels, smoothingTimeConstant and some others - see link
baseline - removes this amount of amplitude from each data point (after operation is applied)
magnify - multiplies the data point by this much (after the baseline is removed)
reduce - subtracts this amount from each data point (after magnified)
adjust - change the seconds that SoundWave adjusts for normalization
EVENTS
dispatches a "ready" event when the sound source is connected and the calculate() method is ready
CLOSE ▲PAGE ▤CODE ▤VIDS
Synth
zim class - extends a CreateJS EventDispatcher
DESCRIPTION
Synth has two main methods play() and tone().
PLAY
Synth will play generated sounds based on seventeen inputs.
The code library used is ZzFX from Frank Force at https://github.com/KilledByAPixel/ZzFX
Thanks Frank, amazing library - nice and small too!
Sounds can be created with the interface here: https://zzfx.3d2k.com
Then just paste the resulting code into a ZIM Synth play() method.
TONE
https://zimjs.com/cat/synth.html
Tone will play a tone at a given note forever or a duration of time.
The tone() method returns a Tone object and additional notes can be added.
The tone has effects: wah, tremelo (pitch / frequency) and vibrato (gain / volume)
All the settings of the tone - volume, frequency and the effects properties
can be animated with ZIM animate() and wiggle() - controlled with MotionController
and any general interactivity on components like dials, sliders, steppers, selectors, etc.
This uses the native JS Web Audio API to make oscillators with frequency and gain.
The API is fairly complicated and cumbersome so this makes it easier.
tone() plays a note "A", "Bb", "C#", "A4", etc.
The low notes are "C0" then each number increase goes up an octavet to "G8".
New constants are provided: SINE, SQUARE, TRIANGLE, SAW, ZAP for wave shapes.
tone() also plays WaveTables - of 50 different sounds available on the ZIM CDN
See https://zimjs.com/cat/synthpad.htmlNOTE
as of ZIM 015 play() and tone() each have a pan parameter
See https://zimjs.com/015/pan.htmlNOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// play() example -
// ****** note, the app must be interacted with before sound can play
const synth = new Synth();
new Button({label:"START"}).center().tap(()=>{
synth.play(0,...[,0,-1500,.3,.3,1.15,,1.01,2.37,-7.65,1100,.05,2,,-0.1,.07,5e-4]); // magical arrival
});
// This code came from here: https://zzfx.3d2k.com
// Note - it will have zzfx() and you want synth.play() - so copy what is in the brackets.
// **** but put a 0 for pan of 0 first
// zzfx(0,...[,0,-1500,.3,.3,1.15,,1.01,2.37,-7.65,1100,.05,2,,-0.1,.07,5e-4]);
// Note - above is ES6 - otherwise in ES5:
synth.play(0,null,0,-1500,.3,.3,1.15,null,1.01,2.37,-7.65,1100,.05,2,null,-0.1,.07,5e-4); // magical arrival
EXAMPLE
// play() example with event for complete
const synth = new Synth();
const circle = new Circle(50,blue).center().tap(function () {
var synthSound = synth.play(0,...[,,229,.04,.04,.47,,.84,7.85,,,,,.2,,.05]);
synthSound.on("complete", ()=>{
circle.removeFrom();
S.update();
});
});
EXAMPLE
// tone() example:
// ****** note, the app must be interacted with before sound can play
const pane = new Pane("START").center();
pane.on("close", ()=>{
const synth = new Synth();
const tone = synth.tone(.5, "A"); // A is same as A3 (third octave up)
timeout(1, ()=>{
tone.addNote(.5, "A2");
});
});
EXAMPLE
// tone() example:
// ****** note, the app must be interacted with before sound can play
const pane = new Pane("START").center();
pane.on("close", ()=>{
const synth = new Synth();
const tone = synth.tone({
volume:1,
note:"A1",
shape:SQUARE,
wahAmount:1000,
wahRate:1,
wahShape:SINE, // default
wahThroat:5
});
});
EXAMPLE
// ****** note, the app must be interacted with before sound can play
const pane = new Pane("START").center();
pane.on("close", ()=>{
const synth = new Synth();
const tone = synth.tone({
volume:.7,
note:"A2",
shape:SQUARE,
wahAmount:2000,
wahRate:.2, // LFO
wahThroat:10,
vibratoAmount:10,
vibratoRate:15,
vibratoShape:SQUARE
});
});
EXAMPLE
// ****** note, the app must be interacted with before sound can play
const pane = new Pane("START").center();
pane.on("close", ()=>{
const synth = new Synth();
const tone = synth.tone({
volume:.2,
shape:SINE,
tremeloAmount:.2,
tremeloRate:12,
tremeloShape:SINE,
})
notes = series("C3", "C4", "C3", "C5");
interval(.8, ()=>{
tone.note = notes();
}, null, true); // true - start interval right away
});
EXAMPLE
// ****** note, the app must be interacted with before sound can play
const synth = new Synth();
const circle = new Circle(100).center().tap(()=>{
synth.tone({
note:"C2",
shape:SQUARE,
wahAmount:3000,
wahThroat:5,
wahShape:ZAP,
wahRate:.5,
duration:2
});
circle.animate({scale:0}, 2, "backIn")
});
PARAMETERS (Synth)
volume (default .3) - the default volume of sounds - will be overwritten by first parameter of play() or tone()
frequency (default 220) - the default frequency (Hz) of sounds - will be overwritten by first parameter of play() or tone()
METHODS (Synth)
play(see parameters below) - plays a sound - see https://zzfx.3d2k.com to create data
Returns a SynthSound object that dispatches a complete event when the sound is done
The SynthSound has the following properties and methods:
audioContext - the JS AudioContext
gain - the JS WebAudio GainNode
duration - the duration of the sound in seconds
loop(num, offset) - see repeat below - same method.
repeat(num, offset) - repeat the sound forever or pass in a num - returns object for chaining
offset is a value to add to the duration so 2 would wait 2 seconds before repeating
this accepts ZIM VEE so {min:-1, max:1} might overlap or delay slightly
or series(1,2,3,4) would increase delay in repeating - see ZIM Pick()
stop() - stop the sound
play() - play the sound again - will need to call repeat() if desired
Currently, there is no way to pause, pan or change volume once the sound is playing
although if one really needed to change the volume, synthSound.gain.gain.value would do it - sigh (JS WebAudio...)
PARAMETERS (play)
** all parameters support - |ZIM VEE| a zim Pick() object or Pick Literal can be passed
** Pick Literal formats: [1,3,2] - random; {min:10, max:20} - range; series(1,2,3) - order, function(){return result;} - function
pan (default = 0) - The pan with 0 in middle, -1 at left, 1 at right and anything in between
note: this is added before the zzfx() parameters often provided as ...[rest of parameters]
volume (default = .3) - Volume scale (ratio)
randomness (default = .05) - How much to randomize frequency (ratio Hz)
frequency (default = 220) - Frequency of sound (Hz)
attack (default = 0) - Attack time, how fast sound starts (seconds)
sustain (default = 0) - Sustain time, how long sound holds (seconds)
release (default = .1) - Release time, how fast sound fades out (seconds)
shape (default = 0) - Shape of the sound wave
0-sine, 1-triangle, 2-sawtooth, 3-tan, 4-noise, 5-square (duty sweep)
shapeCurve (default = 1) - Squarenes of wave (0=square, 1=normal, 2=pointy)
slide (default = 0) - How much to slide frequency (kHz/s)
deltaSlide (default = 0) - How much to change slide (kHz/s/s)
pitchJump (default = 0) - Frequency of pitch jump (Hz)
pitchJumpTime (default = 0) - Time of pitch jump (seconds)
repeatTime (default = 0) - Resets some parameters periodically (seconds)
noise (default = 0) - How much random noise to add (ratio)
modulation (default = 0) - Frequency of modulation wave, negative flips phase (Hz)
bitCrush (default = 0) - Resamples at a lower frequency in (samples*100)
delay (default = 0) - Overlap with itself for reverb and flanger effects (seconds)
sustainVolume (default = 1) - Volume level for sustain (ratio)
decay (default = 0) - Decay time, how long to reach sustain after attack (seconds)
tremelo (default = 0) - Trembling effect, rate controlled by repeat time (ratio)
tone(see parameters below) - play a tone or tones continuously or for a duration
returns a Synth Tone object - see methods and properties underneath parameters
PARAMETERS (tone)
** supports DUO - parameters or single object with properties below
** supports VEE - all parameters support ZIM VEE - a zim Pick() object or Pick Literal can be passed
** Pick Literal formats: [1,3,2] - random; {min:10, max:20} - range; series(1,2,3) - order, function(){return result;} - function
volume (default 1) - volume is all over the map with tones and effects
Volume 1 is actually volume .1 as overall gain is dropped to 1/10 default JS Web Audio gain=1
The overally gain is run through a JS compressor - see compressor property
and filters can be appied - see insertComponent() but - good luck!
note (default "A" - Synth default frequency 220) - letter notes (string) or frequency notes (number)
"C0" is the lowest note with each octave the next number up to "G8" being a very high note (ew)
Middle notes do not need a number and are octave 3 so a "C" is the same as "C3".
Sharps are with a "#" so "C#" or "C2#" or "C#2" or "#C" or "#C####" etc. order does not matter
Flats are with a "b" (the lowercase letter b) so "Bb" or "Ab2", etc.
shape (default SINE) - the wave form or type as a constant below - or a WaveTable JSON or custom shape
constants: (each is the same as a lowercase string - eg. SINE is "sine")
SINE - a sine wave for a smooth sound - not good with Wah effect
SQUARE - an up and down wave -1/1 with a growly sound - good for wah!
TRIANGLE - a triangle shaped wave between a SINE an SQAURE
SAW (SAWTOOTH) - an increase and then sudden drop - a little jagged sounding
ZAP (reverse SAW) - a loud noise followed by a slow drop to 0 repeating - pew pew
WaveTable shapes - 50 custom sounds see https://zimjs.com/cat/waves.html
if loading JSON from file pass in asset("wavename.json") to the shape param (not just the file name)
CUSTOM - an object {real, imag} with real and imag properties
the real and imag properties should be Float32Array objects
but ZIM will convert arrays such as the arrays found in the WaveTables
ZIM will run a createPeriodicWave() on the object and callsetPeriodicWave()
https://developer.mozilla.org/en-US/docs/Web/API/PeriodicWave
pan (default 0) - the pan from -1 (left) to 1 (right) with 0 in the middle
duration (default 0) - forever - the seconds the sound will play (see also startTime) - and stop() method - also see ZIM TIME constant
attack (default .02) - seconds to ramp up sound - sound that starts or stops right away pops (crackles)
release (default .05) - seconds to ramp down sound at end
WAH - makes a wah sound! Like a Wah Pedal... applies an LFO (low frequency oscillator)
A wah is made with a bandpass filter - that reduces sounds at high and low frequencies
The JS bandpass filter used is available as the filter property of the tone object
Changing the middle frequency of the bandpass will move the range up and down
We call the middle frequency the wahNote and it is the most fun to change!
The range between the high and low frequency we call wahThroat (it is a Q value - quality)
The range does not exactly cut off but rather compresses the sound - so a smaller throat sounds squeezed
This also reduces the volume and can make the tone sound almost wet or like a resonance
Note: other effects are done with JS Web Audio Oscillator Wah uses a ZIM Synth Oscillator
As well as the parameters, setting any wah property (tone see properties) will turn on the wah and there is a stopWah() method
wahAmount (default 1000) - how much (amplitude) the wah moves up and down across notes
wahRate (default 1) - the oscillations per second the wah moves up and down across notes
wahShape (default SINE) - the wave form (type) the oscillations take - SINE smooth, SQUARE bee boo bee boo + SAW, TRIANGLE, ZAP
wahThroat (default 5) - the low to high range of the wah (Q) usually from .1 to 20 - will compress sound and reduce volume
wahNote (default note) - the center note (frequency) of the wah - changing / animating this will make the most wah effect
the farther away the wahNote is from the note the more wah
but if the wah moves too much it can cut off the sound - try within -200 and 3000 ;-)
VIBRATO - oscillates frequency (pitch)
When vibrato is used, a JS Oscillator (vibrato property) is used
to adjust a JS Gain (vibratoGain property) connected to the main note frequency to make a warble
As well as the parameters, setting any vibrato property (tone see properties) will turn on the vibrato and there is a stopVibrato() method
vibratoAmount (default 10) - the frequency range to warble
vibratoRate (default 1) - the oscillations per second to change the frequency
vibratoShape (default SINE) - the the wave form (type) the oscillations take - SINE smooth, SQUARE bap bap + SAW, TRIANGLE, ZAP
TREMELO - oscillates gain (volume)
When tremelo is used, a JS Oscillator (tremelo property) is used
to adjust a JS Gain (tremeloGain property) to make a warble
As well as the parameters, setting any tremelo property (tone see properties) will turn on the tremelo and there is a stopTremelo() method
tremeloAmount (default the tone volume * hush) - matching volumes makes a balanced wobble
adding volumes gets really loud so reduce volume when applying tremelo
tremeloRate (default 1) - the oscillations per second to change the gain
tremeloShape (default SINE) - the the wave form (type) the oscillations take - SINE smooth, SQUARE doop doop + SAW, TRIANGLE, ZAP
startTime (default 0) - in seconds - times the note start time very accurately - also see ZIM TIME constant
generally, sequencers should use startTime and run all the notes at the start
then the start times will play the note
this avoids inconsistencies in interval() and animate()
But... it depends on the application
pauseOnBlur (default false) - set to true to pause sound when window is reduced or another tab gains focus
METHODS (Tone)
ramp(volume, time) - set a volume with optional fade time
there is a volume property but ramp() tends to avoid crackle and pop
so would recommend using volume only for animating
stop(releaseTime) - stop the tone and fade an optional releaseTime in seconds
note: to stop a tone at a given time use the duration parameter (or a stop in a timeout)
pause(state) - not really a pause but turns volume down and up
state defaults to true for pause - set to false to unpause
addNote(volume, note, shape, toWah, toVibrato, startTime) add a new note to the tone - returns a Note() object
** also see notes property of tone() for array of notes - and removeNote() below
volume (default 1) - the volume of the note - 1 will be fine even if main volume is .1 for instance...
note (default "A") - the letter note (or frequency) of the note
shape (default SINE) - the type of wave - see tone() wave parameter for more details
toWah (default true) - set to false to not add the note to the wah effect (if wah is on)
toVibrato (default false) - set to true to add note to vibrato effect (if vibrato is turned on)
adds note automatically to tremelo - to not add note to tremelo, make a new tone()
PROPERTIES (Note)
type - holds the class name as a String (Note)
volume - ramp the gain of the gainNode attached to the Oscillator
note - get or set the note - will ramp the Oscillator frequency
oscillator - a reference to JS OscillatorNode used for note
gain - reference to JS GainNode used for note
removeNote(noteObject or toneObject) - remove a note object or pass in tone to remove that note
removeWah() - removes the wah effect
removeVibrato() - removes the vibrato effect
removeTremelo() - removes the tremelo effect
animate() - allows for tone to be animated like animate on a DisplayObject
animate has added note convenience property - to convert to frequency from letter notes
could animate with animate() function - but adding method makes it easier (and it is just a few lines)
wiggle() - allows tone to be wiggled like a DisplayObject
could wiggle with wiggle() function - but adding method makes it easier (and it is just a few lines)
wire() - wire property values to another object. See wire() in Docs under DisplayMethods for parameters
noWire() - turn off wire
wired() - set tone to have property values set by another object. See wire() in Docs under DisplayMethods for parameters
noWired() - turn off wired
PROPERTIES (Tone)
type - holds the class name as a String (Tone)
volume - the main volume - use this for animation
warning, use ramp(volume) for setting a one-time volume to avoid crackle
note - ramps the tone to the provided note ("A", "Bb", "C1", "D#", etc.) - or frequency
frequency - ramps main frequency (note) to given value (see also note)
shape - Wave form SINE, SQUARE, TRIANGLE, SAW, ZAP - see parameters for details
pan - the pan from -1 (left) to 1 (right) with 0 in the middle
duration - get the duration of the tone if any (to set use duration parameter of Tone)
currentTime - gets the current time in seconds since the start of the tone
attack - seconds to ramp up volume or note
release - seconds to ramp down volume or note
hush - ratio of overall reduction of volume number - defaults to .1 so 10% JS gain=1 setting
audioContext - reference to the JS Web Audio context being used - with the Web Audio nodes below
WEB AUDIO NODES
https://developer.mozilla.org/en-US/docs/Web/API/AudioNode
The following are the JS Web Audio nodes used to create tone (for advanced users)
Other Web Audio nodes can be inserted (patched) into the chain using disconnect() and connect()
The connection order is: oscillator - filter - gain - compressor - audioContext.destination
oscillator - reference to JS OscillatorNode created with audioContext.createOscillator()
this can be directly manipulated but may want to use ZIM properties and methods
filter - reference to JS BiQuadFilter of type "bandpass" made with audioContext.createBiquadFilter()
gain - reference to JS GainNode made with audioContext.createGain()
compressor - reference to JS DynamicsCompressor made with audioContext.createDynamicsCompressor()
Compressor settings are as follows - these can be overridden:
compressor.threshold.setValueAtTime(-50, audioContext.currentTime);
compressor.knee.setValueAtTime(40, audioContext.currentTime);
compressor.ratio.setValueAtTime(12, audioContext.currentTime);
compressor.attack.setValueAtTime(0, audioContext.currentTime);
compressor.release.setValueAtTime(0.25, audioContext.currentTime);
notes - an array of notes including the main note (see addNote())
EFFECTS PROPERTIES
setting these will start the effect if not already going
see tone() parameters for definitions (aside from wahAdjust - below)
wahAmount
wahRate
wahShape
wahThroat
wahNote
wahAdjust - wahNote is adjusted up 200 hz - set to 0 to start exactly at main note
vibratoAmount
vibratoRate
vibratoShape
tremeloAmount
tremeloRate
tremeloShape
oscillator(frequency, gain, shape, offset) - returns a ZIM Synth Oscillator object
this gives an amplitude (plus offset) in time following the form (wave type) at the frequency
used internally by wah effects as an offset was needed
could not figure how to get JS Oscillator to offset frequency - or gain attache to oscillator
see: https://stackoverflow.com/questions/61666671/how-do-you-offset-gain-attached-to-an-oscillator-using-javascript-web-audio
PARAMETERS (Oscillator)
frequency (default 1) - how fast in HZ the oscillator goes up and down on the wave
gain (default 10) - the height of the wave (amplitude) - and negative gain to the lowest amount
shape (default SINE) - the type of wave - SINE, SQUARE, TRIANGLE, SAW, ZAP (no custom)
offset (default 0) - an amount added to the gain so 10 would make gain go from 10 to 20 (for gain of 10)
PROPERTIES (Oscillator)
all the parameters as properties - supports ZIM VEE
type - holds the class name as a String (Oscillator)
ticker - a reference to the ZIM new Ticker that runs the oscillator
METHODS (Oscillator)
pause(state) - pause or unpause the oscillator
state defaults to true - set to false to unpause oscillator
STATIC METHODS
Synth.setShape(oscillator, shape) - sets a new wave on a JS OscillatorNode
used internally by classes and methods with shape parameter
oscillator - a JS OscillatorNode
shape (default SINE) - the type of wave - see tone() shape parameter for details
Synth.getNote (frequency, semitoneOffset) - provided by ZzFX to handle semitones
returns a new frequency a number of semitones from the provided frequency
frequency - the frequency in HZ - eg. 220 - middle A
semitoneOffset - semitones (think consecutive piano keys) to offset the frequency
Synth.note(note) - gets a frequency at a musical note
used internally by classes and methods with note parameter
Synth.wave(a,b) - prepares a WaveTable or wave data for Tone shape
a - JSON object with WaveTable - if loading a file pass in asset("wave.json")
b - if a and b are provided then assumes a custom object {real, imag}
see tone() shape parameter for details
Synth.drawWave(shape, color, thickness, backgroundColor, borderColor, borderWidth, corner, padding, paddingV)
returns a ZIM Container holding a little picture of the wave type with an optional backing square
shape (default SINE) the type of wave SINE, SQUARE, TRIANGLE, SAW, ZAP
the rest of the parameters as expected
has shape and backing properties - shape is a ZIM Shape and backing is a ZIM Rectangle
also has a type property that matches the shape - SINE, SQUARE, etc.
STATIC PROPERTIES
Synth.notes = ["C",,"D",,"E","F",,"G",,"A",,"B"] - major notes skipping sharps and flats
Synth.major = ["C","D","E","F","G","A","B","C4"] - major notes
Synth.minor = ["C","D","Eb","F","G","Ab","B","C4"] - minor notes
Synth.shapes = ["sine","square","triangle","sawtooth","saw","zap","tan","noise"]
the last two are for ZzFX play() only which has no "saw" (only "sawtooth") and no "zap"
PROPERTIES (Synth)
volume - get or set the default volume - will be overwritten by first parameter of play() or tone()
frequency - get or set the default frequency - will be overwritten by frequency parameter of play() or tone() (or note parameter of tone())
EVENTS (Synth)
the result of the play() or tone() method will dispatch a "complete" event when the sound is done
CLOSE ▲PAGE ▤CODE ▤VIDS
VR
zim class - extends a ZIM Container which extends a CreateJS Container
NOTE
Also see the ZIM Three Helper Module for XR controllers, movement and teleport in three.js
with ZIM TextureActive (this VR() class is much simplified and not related to TextureActive)
See: https://zimjs.com/three - for proper 3D
DESCRIPTION
Copies the content and displays a left and right channel (side-by-side) to be viewed with a VR helmet.
Content can be made to shift side to side as the head turns. Parallax is also an option.
Works with Google Cardboard & Daydream, Samsung Gear VR, Carl Zeiss VR, Merge VR, View-Master VR
And costing around $20-$30 these are fine: Utopia 360, VRIT VR, ETVR, etc.
Provides a ZIM Swiper for testing on desktop to emulate turning the head.
DETAILS
Make a content Container (with registration point at 0,0) that holds all the content.
Set a depth property on any children in the content container that you want to look 3D
or use the chainable dep() method to apply the depth property.
ZIM VR will copy the content and its depths into left and right containers and mask it.
The content can be accessed via contentLeft and contentRight properties.
The x values of the content that has depth properties set will be shifted according to the depth.
This gives a sense of 3D coming out of the screen for positive depths and into the screen for negative depths.
Device orientation can also be used to move the content as the head is turned and the headset and device moves.
Currently the horizontal movement is built in as that is the trickiest with the 3D effect.
Supply a motion angle (angle) and a motion distance (distance) about which the user will turn their head to see the content.
Optional arrows are provided to map the boundaries of rotation and available as borderLeft and borderRight properties.
You can manually apply vertical shift based on the ZIM Frame deviceOrientation event about the x axis
Horizontal Parallax is provided if desired and will be based on the head rotation if no motion angle is provided
or based on the distance of the object from the center of view if a motion angle is provided.
You can set the parallax details as well like the magnitude, angle, damping, and negative parallax.
Negative values of depth will not produce parallax unless negativeParallax is set to true (this looks funny).
You can make your own vertical parallax if desired using ZIM Parallax and the deviceOrientation event about the x axis.
NOTE
moving content in the x direction should not be done manually.
Rather, use the position() method of VR to properly place both channels and reset the vrStartX positions required.
NOTE
To add or remove content please use the register() and remove() methods.
Any new content should be added to the initial content container.
Do this first, then set the desired depths, then register the new content.
This will clone the new content to the right side channel
and set the shift in x based on depths for both channels.
NOTE
Any modifications afterwards to other properties like alpha, color, y, registration, etc.
must be made manually to both channels - use the contentLeft and contentRight properties.
The contentLeft is the original content (also available as the content property).
You can use the vrMatch property of any content objects to get its other channel partner.
So if you have a label variable for the Label in the original content,
you can access the label in the right hand channel with label.vrMatch
The right channel objects also have vrMatch properties so label.vrMatch.vrMatch is the label ;-)
SEE: https://zimjs.com/vr.html
SEE: https://zimjs.com/vr/sample.htmlNOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// Prepare content inside one container
const content = new Container(W/2, H);
// This background tile has no depth or is at "screen" depth
// There will be no depth shift and no parallax
new Tile(new Rectangle(10,10,light), 20, 1, 10).center(content);
// These rectangles are given depth using the dep() method - or set the depth property
// The rectangles will be shifted in the x by VR
// centerReg the objects for proper parallax
const box = new Rectangle(50,50,green).centerReg(content).dep(10);
new Rectangle(70,70,clear,blue,5).centerReg(content).dep(12);
// 1. this just shows content in 3D with no motion:
// const vr = new VR(content).addTo(stage);
// 2. this will move when the head is turned (device is rotated) but with no parallax:
// const vr = new VR(content, 160, 400).center();
// 3. this shows parallax when the head is turned but with no positional movement:
// const vr = new VR(content, 0, 400, 2, 60).center();
// 4. this shows motion and parallax as the head is turned:
const vr = new VR(content, 160, 400, 2, 60).center();
// this will change the color of the box after it has been added to VR:
// box.color = pink; // the left side
// box.vrMatch.color = pink; // the right side
// this would fade in and out the outer rectangles:
// var obj = {obj:{alpha:0}, loop:true, rewind:true};
// vr.contentLeft.getChildAt(2).animate(obj);
// vr.contentRight.getChildAt(2).animate(obj);
// this would remove the outer rectangle:
// vr.remove(vr.content.getChildAt(2));
// this would remove the right hand border marker
// which shows when angle is != 0 and borderMarkers is set to true (default)
// vr.remove(vr.borderRight);
// this shows an inter-ocular adjuster when the stage is pressed
S.on("stagemousedown", ()=>{
vr.showAdjuster();
});
// the above works fine, but really should remove the event when stage is pressed
// because all presses using the adjuster would be calling showAdjuster
// then add the event again when the adjuster is closed
// but ZIM makes sure that adjuster does not re-open if it is already open.
// Here is what that code would look like:
// var adjusterEvent = S.on("stagemousedown", ()=>{
// vr.showAdjuster();
// }, null, true); // run once
// vr.on("close", function() {
// adjusterEvent = S.on("stagemousedown", adjusterEvent);
// });
// this code turns the stage yellow if device is rotated beyond the angle parameter value
var adjusterEvent = vr.on("boundaryout", e=>{
zog(e.boundary); // would be LEFT or RIGHT
F.color = yellow;
});
// this code changes the stage color back to the original when rotated back in bounds of the angle parameter
vr.on("boundaryin", e=>{
zog(e.boundary); // would be LEFT or RIGHT
F.color = lighter;
});
// this would load stereoscopic images to the left and right content (no need to registser)
// F.loadAssets(["stairsRight.jpg", "stairsLeft.jpg"]);
// F.on("complete", ()=>{
// new Pic("stairsLeft.jpg").center(vr.contentLeft);
// new Pic("stairsRight.jpg").center(vr.contentRight);
// });
PARAMETERS supports DUO - parameters or single object with properties below
content - a ZIM Container with registration point at the top left that holds the content
The content will be placed in the left VR Channel (Container) and cloned to the right VR Channel (Container)
Set the depth property (or use dep()) of any children (recursive) of the content to be viewed in 3D
The higher the depth, the more it comes out of the screen which is at 0 depth
A negative depth will go into the screen but will not have parallax (see negative parallax)
The left and right content are available as contentLeft and contentRight properties of VR
Each child of content has a vrMatch property that refers to itself in the other channel
angle - (default 0) the angle in degrees the head can turn to see VR move (half to left, half to right)
Currently, there is a small glitch in the transition at 360 degrees as damping rewinds and reverses position
And there is no affordance for wrapping - so content at this location is not recommended
A fix for this might be provided some time in the future
distance - (default 100) the pixels the content will move over the angle (half to left, half to right)
OR if there is no angle and there is parallax, the distance the parallax will move over the parallaxAngle
parallax - (default 0) the percentage of the depth it will move for each degree of motion up to the parallaxAngle
parallaxAngle - (default 60) the degree range that parallax will operate (half on one side and half on the other)
damp - (default .5) the damping for motion if angle is provide - quicker than normal for more response turning
parallaxDamp - (default .1) the damping for parallax - smaller number goes slower towards desired position
startAngle - (default 0) the angle to start the viewing
negativeParallax - (default false) set to true to make parallax work for negative depth (looks funny)
boundaryMarkers - (default true) set to false to remove arrow markers at angle boundaries if angle is set
swiper - (default false) set to true to use swiping if not on mobile device - for testing
If on mobile, swiper is set to false so it does not conflict with the rotation of the device
The swiper works from -330 to +330 and then stops
Currently, there is no wrapping system so the limits prevent a glitchy transition
holder - (default zimCurrentFrame stage) set to a Container with bounds set if desired - usually, the stage (default)
METHODS
register(item) - content is usually passed in initially to the content parameter of VR
but an item (a display object) can be added at any time - to remove items, see remove().
Set the desired depth property for the item with 0 being the default for the screen depth.
Add the item to content (contentLeft) with addTo(), center(), centerReg() before registering.
Do not add the item to contentRight as register() will clone the new item and its children recursively
to the right side VR Channel and set its depth and parallax.
NOTE: to add stereoscopic images, one to the left chanel and one to the right channel,
just add the images using addTo(), center() or centerReg() to contentLeft and contentRight - no need to register()
returns the item
remove(item) - removes item (and children) from the content of VR - do not manually remove from left and right channels
returns the item
position(item, x, y) - positions item in VR in both left and right channels - do no manually position left and right
returns the item
showAdjuster() - shows a panel to set interocular distance - this is saved across app loads
The panel container can be accessed with adjuster property of VR
The adjuster property has backing, label, strip, slider, close, zero and ok properties for formatting
The adjuster sets the regX property of the content to shift the two channels to the desired distance appart
Generally, this should be the distance between the eyes, but experimentation shows that a smaller distance works well
This is provided primarily for tablet or desktop where the distance may be too big for the cross-eyed viewing technique
returns the VR object
hideAdjuster() - hides the adjuster - but the close and ok buttons will do this as well - also see VR events...
returns the VR object
resize() - call the resize() method to resize VR if the holder size changes - VR can be added to the ResizeManager
returns the VR object
PROPERTIES
type - holds the class name as a String
angle - read only - the angle provided to the VR parameters
currentAngle - read only - the angle at which the device has been rotated since the start of the app
content - the original content provided to the VR parameters
contentLeft - the content - this shows in the left VR Channel
The following read-only property is provided on all children of the content:
vrMatch - a reference to the matching child in the other VR Channel
The following read-only properties are provided to children of the content that have a depth property
These are given for content passed in to the content parameter and also to items passed in to the register() mehtod:
vrChannel - LEFT or RIGHT
vrStartX - the starting x position before depth effect or parallax is added (could be changed if manually setting x position)
vrParallaxDistance - the shift in x due to parallax
vrParallaxDamp - the ZIM Damp object to handle parallax if VR angle is != 0
contentRight - the cloned content - this shows in the right VR Channel (also see contentLeft info)
left - the container that holds the left VR Channel
right - the container that holds the right VR Channel
adjuster - the adjuster panel - see showAdjuster() method for details
swiper - the ZIM Swiper if swiper parameter is set to true to test the motion if not on device
boundaryLeft - the left boundary container if boundary parameter is true
boundaryRight - the right boundary container if boundary parameter is true
EVENTS
boundaryout - dispatched when rotated past a boundary region - the event object provides a boundary property with LEFT or RIGHT values
boundaryin - dispatched when rotated into the boundary region - the event object provides a boundary property with LEFT or RIGHT values
saved - dispatch when OK button on adjuster panel is pressed to set the interocular distance
closed - dispatches when X and OK button is pressed to close the adjuster panel
CLOSE ▲PAGE ▤CODE ▤VIDS
chop
zim function
DESCRIPTION
Breaks up any DisplayObject into a grid of cols and rows and returns Tile or an array of Bitmap objects.
Handy to pass to a Scrambler().
See https://zimjs.com/explore/chop.html
See https://zimjs.com/cat/scrambler.htmlNOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// A chopped Circle animating like pixels
chop(new Circle(200,red),20,20)
.center()
.noMouse()
.animate({
props:{alpha:0},
time:{min:.1, max:.4},
rewind:true,
loop:true,
sequence:.02
});
EXAMPLE
// preload the pic in Frame() or F.loadAssets() assets parameter
new Scrambler(chop(new Pic("pic.jpg"),4,4)).center();
PARAMETERS
obj - a ZIM DisplayObject like an asset() or Circle(), etc.
cols - the number of cols to break object into
rows - the number of rows to break object into
tile - (default true) return a Tile - set to false to return an array of Bitmaps
margin - (default 0) add a margin to image - will be outside bounds
scale - (default 1) set the scale - will scale vectors as caching to preserve quality
RETURNS a Tile or an array of Bitmaps depending on tile parameter
CLOSE ▲PAGE ▤CODE ▤
shuffle
zim function
DESCRIPTION
Randomly shuffles elements of an array.
Actually changes the original array (and also returns it).
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const array = ["happy", "sad", "spooked"];
const randomFromArray = shuffle(array)[0];
// this will be randomized each time it is run
// or use ZIM pluck()
EXAMPLE
const array = shuffle(["happy", "sad", "spooked"]);
loop(array, feeling=>{zog(feeling);});
// this will get random and unique elements of the array
PARAMETERS
array - the Array to shuffle - or pass in any number of parameters which will be turned into an array and shuffled
different - (default false) set to true to make sure the resulting array is different in some way from the original
note: make sure to pass in an array for the first parameter
RETURNS the modified Array
CLOSE ▲PAGE ▤CODE ▤BITS
pluck
zim function
DESCRIPTION
Returns a random element from an array.
Same as array[Math.floor(Math.random()*array.length)].
Or if remove is true (default is false) then returns and removes random element from array.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const colors = [orange, green, red];
zog(pluck(colors)); // orange, green or red
const answer = pluck(colors, true); // if this were red, red would be removed from array
PARAMETERS
array - an array of objects - or pass in any number of parameters to pick from
remove - (default false) set to true to remove the selected item from the array (original array must be provided)
RETURNS a random item from an array
CLOSE ▲PAGE ▤CODE ▤
rand
zim function
DESCRIPTION
Returns a random integer between and including a and b if integer is true.
Returns a random number (with decimals) including a and up to b but not b if integer is false.
b is optional and if left out will default to 0 (includes 0).
integer is a boolean and defaults to true.
If a and b are 0 then just returns Math.random().
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const speed = rand(10,20); // 10, 11, 12... 18, 19 or 20
const colors = [blue, yellow, green];
const color = colors[rand(colors.length-1)]; // note the length-1
// the equivalent of:
const color = colors[Math.floor(Math.random()*colors.length)];
// OR a technique often used without using rand():
const color = shuffle(colors)[0];
// here we get a speed that is either from 5 to 10 or -5 to -10
const speed = rand(5,10,null,true);
PARAMETERS
a - the first Number for the range
if a and b are not provided, rand() acts like Math.random()
if parameter b is not provided, rand will use range 0 to and including a
b - (default 0) second Number for the range
it does not matter if a>b or a<b
integer - (default true) set to false to include decimals in results
if false, range will include decimals up to but not including the highest number
if a or b have decimals this is set to false
negative - (default false) includes the negative range as well as the positive
RETURNS a Number
CLOSE ▲PAGE ▤CODE ▤BITS
seedRandom
zim function
DESCRIPTION
Makes Math.random() work from a seed.
If set then ZIM rand() and ZIM VEE values will also be seeded with its value.
This means that rand() will repeat in order of its random results.
This allows, for instance, a generative art piece to be the same for a certain user.
Or lets a player replay a same random game level if the seedRandom() is set again with the same seed.
Setting the seedRandom() with no parameter returns to regular rand(), Math.random(), etc.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
seedRandom("hello");
zog(rand(10,100)) // each time the app is run, this will be the same random number between 10 and 100
zog(rand(10,100)) // this will probably be a different random number than the first - but the same each time
zog(rand()) // and this will be the same random number between 0 and 1 not including 1.
EXAMPLE
// Remember the seed for a user with localStorage (like a cookie)
let seed = rand(100000000);
if (localStorage) {
if (localStorage.seed) seed = localStorage.seed;
else localStorage.seed = seed;
}
seedRandom(seed);
new Circle(100, [red, green, blue]).center();
// the user will always have the same random color
// unless no localStorage or localStorage is cleared
seedRandom(seed);
// below will make another circle the same color as the first
new Circle(100, [red, green, blue]).center().mov(0,300);
seedRandom(); // clears the seed
// below will be a random color each time
new Circle(100, [red, green, blue]).center().mov(200,300);
PARAMETERS
seed - (default null) add any string or number to seed the Math.random()
and subsequently, ZIM rand() and ZIM VEE values from [] and {min, max}
passing in nothing or null will use/reset to regular Math.random()
RETURNS the seed
CLOSE ▲PAGE ▤CODE ▤
odds
zim function
DESCRIPTION
Returns true if random percent is within (less than or equal to) the percent parameter provided.
So, odds(20) would be if Math.random() <= .2
and odds(80) would be if Math.random() <= .8
and odds(50) would be half the time.
NOTE
odds(20) is the same as rand() <= .2 but just a little easier to remember and read.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
if (odds(20)) new Rectangle().center(); // 20% the time there will be a Rectangle
if (odds()) new Aud("yay.mp3").play(); // half the time play yay otherwise play boo
else new Aud("boo.mp3").play();
PARAMETERS
percent - (default 50) odds() will return true if random percent is less than or equal to this percent
RETURNS a Boolean
CLOSE ▲PAGE ▤CODE ▤
rarity
zim function
DESCRIPTION
Receives an object with properties each having a number value as to their frequency.
Returns an array with these properties multiplied by their frequency.
The array is shuffled so get any element such as the first to pick randomly from the weighted array.
Or pass in to any ZIM VEE value to pick in a weighted manner.
Can also pass into a series() to pick them in order.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const radius = rarity({10:5, 20:2, 30:1});
// The properties are 10, 20 and 30.
// The frequencies are 5, 2 and 1.
// The frequency numbers do not need to add to 100
// These add to 8 - so there is a 5/8 chance the radius is 10
// and 2/8 chance it is 20 and 1/8 chance it is 30
// radius is an array such as [20,10,10,30,10,10,20,10]
// or some such scrambled array
// An array is a ZIM VEE value
// and the radius will be picked randomly from the array
new Circle(radius, red).center();
// instead, a series might be desired:
radius = series(radius);
// this would tile radii of 20,10,10,30,10,10,20,10
new Tile(new Circle(radius, red), 4,2).center()
EXAMPLE
STYLE = {color:rarity(red:99,black:1)}
loop(100, ()=>{
// probably 1 black circle - but very well could be more or less
new Circle(50).loc(rand(W), rand(H));
});
EXAMPLE
// payload array example to easily set scale
// remember that rarity is shuffled automatically so [0] is a random item
const size = rarity({Big:[1,5], Med:[10,1], Small:[1,.5]})[0];
// the first item of each array above is the frequency
// the second item of each array above is the payload
const circle = new Circle(100,red).center().sca(size.payload); // 5, 1 or .5
new Label(size + " Circle").center(circle); // matching "Big", "Med" or "Small"
// otherwise this is the alternative
const size = rarity({Big:1, Med:10, Small:1})[0];
const lookup = {Big:5, Med:1, Small:.5};
const circle = new Circle(100,red).center().sca(lookup[size]); // 5, 1 or .5
new Label(size + " Circle").center(circle); // matching "Big", "Med" or "Small"
EXAMPLE
// ZIM VEE
// the payload example with a range of scales for each size
// and picking randomly from a one of two sets of colors
const size = rarity({
Big:[1,{min:4, max:6}], // ZIM VEE range
Med:[10,{min:.5, max:1.5}],
Small:[1,{min:.2, max:.4}]
})[0];
const color = rarity({
Grey:[1,[grey,light,tin,silver,moon,fog]], // ZIM VEE random from array
Colored:[20,[pink,purple,blue,red]]
})[0]; // either Grey or Colored
const circle = new Circle(100,color.payload) // will pick from payload array
.center()
.sca(size.payload); // a scale picked from range
new Label(color + " " + size + " Circle").center(circle);
EXAMPLE
// ZIM VEE without dynamicPayload (default)
const damage = rarity({large:[50,{min:20,max:30}], small:[50, {min:5,max:10}]})[0];
// imagine large is picked
zog(damage.payload) // imagine 25.5 is picked
zog(damage.payload) // so this will be 25.5
zog(damage.payload) // this will still be 25.5
// ZIM VEE with dynamicPayload parameter set to true
const damage = rarity({large:[50,{min:20,max:30}], small:[50, {min:5,max:10}]}, null, null, true)[0];
// imagine large is picked
zogr(damage.payload) // imagine 25.5 is picked
zogr(damage.payload) // this picks again - so it could be 22.4
zogg(damage.payload) // and this could be 29.0
damage.dynamicPayload = false; // turn off picking
zogg(damage.payload) // this will be 29.0
zogg(damage.payload) // this will be 29.0
damage.dynamicPayload = true; // back to picking
zogr(damage.payload) // this could be 21.3
zogr(damage.payload) // this could be 28.8
PARAMETERS
weights - (default null) an object literal with options (property name) and frequencies (property value)
or the property value can be an array with [frequency, payload] (see further down)
eg. {green:70, blue:20, red:10} or {10:2, 20:2, 30:1}
The frequencies should be whole numbers
The frequencies can add to 100 to easily visualize percentage
but they can add up to any number and this will be used
to calculate the pick ratio for each one using frequency/total frequency
For instance with {10:2, 20:2, 30:1} the frequencies add up to 5
so the the chances of being picked are 2/5 for 10, 2/5 for 20 and 1/5 for 30
If an array with [frequency, payload] is provided then the frequency is used as the frequency
the payload is any object that will be added as a payload property to the option string
(the option is converted from a primative string to a String object so it can hold the payload)
This arrangement replaces the need for a look-up table (see examples)
| ZIM VEE |
The payload can be any object but will also be processed by ZIM VEE (Pick)
So if an array or object literal is desired use {noPick:[]} or {noPick:{}}
Also see dynamicPayload parameter
ZIM VEE literal types are:
[1,3,2] - random; {min:10, max:20} - range;
series(1,2,3) - order, function(){return result;} - function
shuffle - (default true) shuffle the resulting array
zimColors - (default true) set to false to not convert "blue" property value to ZIM blue
dynamicPayload - (default false) only pick once from ZIM VEE value in payload
or set to true to continue to pick from ZIM VEE value in payload each time property is accessed
note: at any time after rarity() is called, this can be set to true or false
RETURNS an array of properties repeated according to frequency
these properties may have a payload property if payloads are used
CLOSE ▲PAGE ▤CODE ▤
repeats
zim function
DESCRIPTION
Returns the number of repeats in an array.
By default, this will be the max number of repeats - not the total repeats.
The number of repeats often offers a rarity feature.
NOTE
this does not determine the repeated value - this is not needed for rarity.
NOTE
a repeat is one less than the number of objects that are the same.
So if no objects are the same the repeats are 0.
If two objects are the same the repeats are 1.
If three objects are the same the repeats are 2, etc.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const colors = [orange, green, red, orange, orange, green];
zog(repeats(colors)); // 2 - note, one less than the number of objects that repeat
zog(repeats(colors, false)) // 3 - two repeats with orange, one repeat with green
PARAMETERS
array - an array of objects
total - (default false) set to true to return the total repeats
RETURNS the max number of repeats in an array or 0 if no objects are the same, one if two objects are the same, etc.
if total is true then returns all the repeats - possibly from different sets
CLOSE ▲PAGE ▤CODE ▤
series
zim function
DESCRIPTION
Returns a function that will return each value passed as a parameter (or an Array) in order
or an object literal with min and max.
This goes in sequence each time the function is called.
Use this to pass a series in to any ZIM VEE value so a looping series is obtained.
NOTE
was called makeSeries() which is now depricated
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// note - do not call the variable name series
const colors = series(red, green, blue);
colors(); // red
colors(); // green
colors(); // blue
colors(); // red, etc.
// or
const colors = [red, green, blue];
const s = series(colors);
s(); // red
s(); // green
s(); // blue
s(); // red, etc.
new Tile(new Rectangle(10,10,[blue, red]), 10, 10).center(); // would randomize colors
new Tile(new Rectangle(10,10,series(blue, red)), 10, 10).center(); // would alternate colors
// ten rectangles getting higher by 20 each time
const s = series({min:10, max:200}).step(20);
loop(10, i=>{
new Rectangle(10, s, red).sca(1,-1).loc(100+i*20, 400);
});
EXAMPLE
// added functionality as of ZIM 10.9.0
// start at index 3, reverse and don't go past 0
const nums = series(0, 1, 2, 3, 4).jump(3).reverse().constrain();
loop(5, ()=>{
zogb(nums()); // 3,2,1,0,0 (blue in console)
});
nums.reverse(false); // go forward - note, still starting at index 0
zogg(nums()); // 0 (green in console)
zogg(nums()); // 1
zogg(nums()); // 2
nums.bounce(); // go back and forth rather than default loop
loop(5, ()=>{
zogy(nums()); // 3,4,3,2,1 (yellow in console)
});
nums.step(3); // sitting at 0 then increase the step to 3
loop(5, ()=>{
zogr(nums()); // 0,3,2,1,4 (red in console)
// 3->6 bounces off 4 with two back to 2
// 2->-1 bounces off 0 with one forward to 1
// tricky but correct
});
zogp(nums.index); // 1 - coming back 3 steps from 4 to 1 as current index
EXAMPLE
// make a checkerboard
const colors = series(black,white,black,white,black,white,black,white).flip();
const board = new Tile(new Rectangle(80,80,colors),8,8,1,1).center();
PARAMETERS
array|item1|{min,max,step} - the first item - or an array of results that will be called in order as the resulting function is called
or an object with min, max and step properties to make a series of numbers from and including min and max (step defaults to 0)
this will make an array of values and then it is just like an array was entered initially.
when used with ZIM VEE - the values may be further ZIM VEE values (including more series values)
item2 - the second item if the first is not an array
item3 - the third item, etc. to as many items as needed
METHODS
step(num) - num defaults to 1 - the number of items to move the index - or use index property
every(num) - num defaults to 0 - steps to wait before moving to the next index - remain on blue for five, then go to yellow for five, etc.
jump(index) - jump to an index but do not run it - the next call to the series will run here
reverse(boolean) - boolean defaults to true - reverses direction - or pass in false to cancel reverse
bounce(boolean) - boolean defaults to true - back and forth between 0 and length-1 - or pass in false to cancel bounce
flip(boolean) - boolean defaults to true - go to the end then go in reverse - will do last one and first one twice - or pass false to cancel flip
constrain(boolean) - boolean defaults to true - keeps index between 0 and length-1 - or pass in false to cancel constrain
random(boolean) - boolean defaults to true - randomizes order of series each time it finishes - or pass in false to cancel random
mix(boolean) - boolean defaults to true - randomizes order of series but avoids duplicating on ends - or pass in false to cancel mix
shuffle(boolean) - boolean defaults to true - shuffles order of series but then will repeat with same order - or pass in false to cancel shuffle
PROPERTIES
type - a string of the type of object in this case, "series"
array - an array of items passed in to the function
length - the length of the series
index - get or set the current index of the series - what will run next
original - a copy of the original order
RETURNS a function that can be called many times - each time returning the next value in the series
CLOSE ▲PAGE ▤CODE ▤
loop
zim function
DESCRIPTION
1. If you pass in a Number for obj then loop() does function call that many times
and passes function call the currentIndex, totalLoops, startIndex, endIndex, obj.
By default, the index starts at 0 and counts up to one less than the number.
So this is like: for (let i=0; i<obj; i++) {}
There are step, start and end index parameters - start cannot be negative
2. If you pass in an Array then loop() loops through the array
and passes the function call the element in the array, currentIndex, totalLoops, startIndex, endIndex and the array.
So this is like: for (let i=0; i<obj; i++) {element = array[i];}
3. If you pass in an Object literal or ZIM Dictionary then loop() loops through the object
and passes the function call the property name, value, currentIndex, totalLoops, startIndex, endIndex, obj
So this is like: for (let i in obj) {property = i; value = obj[i];}
Note: a Dictionary uses a copy of its objects and values to provide name and value
this is because setting Dictionary values while looping will change the order of the arrays while looping
4. If you pass in an String then loop() loops through the letters
and passes the function call the letter, currentIndex, totalLoops, startIndex, endIndex, obj.
So this is like: for (let i=0; i<obj.length; i++) {letter = obj[i];}
5. If you pass an HTML NodeList or HTMLCollection then loop() loops and gives each tag in the NodeList or HTMLCollection
see ZIM zet() for an example of getting a NodeList (like the $() in JQuery)
6. If you pass in a Container then loop() loops through all the children of the container
and does the function for each one passing the child, currentIndex, totalLoops, startIndex, endIndex, obj.
So this is like for(let i=0; i<obj; i++) {let child = obj.getChildAt(i);}
or for (let i in container.children) {let child = container.children[i];}
** the ZIM loop method can also be used for looping through a Container as follows:
container.loop(item=>{}); // see loop under the Methods Module.
NOTE
If you pass in true for reverse, the loop is run backwards counting to 0 (by default)
NOTE
use return to act like a continue in a loop and go to the next loop
NOTE
use return NEXT when in interval mode to go immediately to the next interval - as opposed to return which goes to next but after another interval
NOTE
return a value to return out of the loop completely like a break (and return a result if desired)
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const container = new Container().alp(.1).addTo();
loop(1000, i=>{ // gets passed an index i, totalLoops 1000, startIndex 0, endIndex 999, obj 1000
// make 1000 rectangles
new Rectangle().loc(rand(W-100), rand(H-100), container);
});
// to continue or break from loop have the function return the string "continue" or "break"
loop(10, i=>{
if (i%2==0) return; // skip even
if (i>6) return "break"; // quit loop when > 6
zog(i);
});
loop(10, i=>{
zog(i); // 9-0 in console
}, true);
loop(10, i=>{
zog(i); // 5-9
}, null, 1, 5)
// the start parameter cannot be less than 0
// to get negative values for i subtract a desired value inside the loop
const colors = [green, yellow, pink];
loop(colors, (color, index, start, end, array)=>{ // do not have to collect all these
zog(color); // each color
});
const array = [0,0,0,1,0,0,0];
const pass = loop(array, val=>{
if (val!=0) return false;
});
// below will log failed
if (pass) zog("passed"); // by default loop returns true (as of ZIM 10.6.1)
else zog("failed"); // false inside loop gets assigned to pass
const person = {name:"Dan Zen", occupation:"Inventor", location:"Dundas"}
const result = loop(person, (prop, val, index, total, start, end, object)=>{ // do not have to collect all these
zog(prop, val); // each key value pair
if (val == "criminal") return "criminal"; // this would return out of the loop to the containing function
});
if (result == "criminal") alert("oh no!");
const tags = zet(".heading").tags; // get an NodeList of tags styled with heading class
loop(tags, (tag, i)=>{
tag.innerHTML = i + ". " + tag.innerHTML; // add an index number in front
});
EXAMPLE
// LOOP THROUGH A CONTAINER
// LOOP FUNCTION
loop(container, child => { // gets passed the child, index, total, start, end and obj
child.alp(rand(.2, .9)); // set each child to a random alpha
});
// LOOP METHOD
container.loop(child => { // gets passed the child, index, total, start, end and obj
child.alp(rand(.2, .9)); // set each child to a random alpha
});
// backwards through a Container when removing
container.loop(child => {
if (odds(20)) child.removeFrom();
}, true); // true would reverse - important if removing children in loop
EXAMPLE
// looping with the interval setting
// loop through an array every 1 second
loop(10, i=>{zog(i);}, null, 1);
// loop through a Container every .01 seconds
const tile = new Tile(new Rectangle(26,26,[green, blue, pink]), 10, 10, -1, -1)
.reg(CENTER)
.pos(0,100,CENTER,BOTTOM)
.loop(item=>{
item.color = darker;
S.update();
}, null, .01);
PARAMETERS supports DUO - parameters or single object with properties below
obj - a Number of times to loop or an Array or Object, String, NodeList or Container to loop through
for looping through a Container also note the loop method: container.loop((child)=>{});
call - the function to call
the function will receive (as its final parameters) the index, total, start, end, obj, intervalObj (if interval is set)
where the index is the current index, total is how many times the loop will run
start is the start index, end is the end index and obj is the object passed to the loop
the starting parameters vary depending on the type of obj:
if the obj is a number then the first parameter is the index (no extra starting parameters given)
if the obj is an array then the first parameter is the element at the current index
if the obj is an object literal then the first and second parameters are the property name and property value at the current index
if the obj is an string then the first parameter is the letter
if the obj is an HTMLCollection then the first parameter is the tag
if the obj is a Container then the first parameter is the child
reverse - (default false) set to true to run the loop backwards to 0
interval - (default 0) set to a number of seconds between each loop
use return NEXT to go immediately to the next interval
use return to just leave current interval then wait another interval to continue
return a value (other than NEXT) to exit the loop and clear the inverval
the interval object is provided at the end of the loop function parameters - but will probably not be needed
step - (default 1) each step will increase by this amount (positive whole number - use reverse to go backwards)
start - (default 0 or length-1 for reverse) index to start
end - (default length-1 or 0 for reverse) index to end
immediate - (default true) set to false to not start the loop right away, but rather wait for a first interval
complete (default null) - a callback function to call when complete
completeParams (default null) - paramater to pass complete callback
RETURNS any value returned from the loop - or true if no value is returned from a loop
CLOSE ▲PAGE ▤CODE ▤BITS VIDS
getTIME
global function
Checks for TIME and timeUnit
Used internally by interval, timeout, animate and others
returns the time unit as "s" or "m"
~~~~~~~~~~~~~~
checkTIME = function(time, timeChar, minWarning, maxWarning)
checkTIME
globalFunction
Tests to see if time is in expected units - timeChar is "s" or "m" for seconds or milliseconds
logs a warning if ((timeChar="s" && time>minWarning) || (timeChar=="m" && time<maxWarning))
Set TIMECHECK = false to turn off check if desired - for instance if getting false positives
CLOSE ▲PAGE ▤CODE ▤
timeout
zim function
DESCRIPTION
Calls a function after the time delay - like window.setTimeout()
This calls ZIM interval() with a total of 1.
NOTE
as of ZIM Cat time is in seconds not milliseconds.
Set TIME = "milliseconds"; to set all ZIM time to milliseconds
or pass in "milliseconds" to the timeUnit parameter for a specific override.
NOTE
setTimeout has the time parameter last, timeout has it first
so that it is consistent with loop() and the CreateJS on() method
NOTE
to clear a timeout you use returnID.clear() - different than window.clearTimeout(returnID)
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
timeout(1, ()=>{
circle.x += 100;
S.update();
});
// moves the circle 100 pixels after one second
// GAME to press button within one second:
const id = timeout(1, ()=>{
zog("you lose!");
button.enabled = false;
});
const button = new Button().center();
button.on("click", ()=>{
zog("you win!");
id.clear();
});
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports VEE - parameters marked with ZIM VEE mean a zim Pick() object or Pick Literal can be passed
Pick Literal formats: [1,3,2] - random; {min:10, max:20} - range; series(1,2,3) - order, function(){return result;} - function
time - |ZIM VEE| seconds to wait until function is called
see TIME global constant (defaults to "seconds") can also override with timeUnit parameter set to "milliseconds"
call - function to call when the time passes - will receive the id object as a single parameter
pauseOnBlur - (default false) set to true to pause timeout when window is reduced or another tab gains focus
timeUnit - (default TIME) set to "milliseconds" for traditional JavaScript milliseconds
also see TIME constant which defaults to "seconds"
timeUnit will override the TIME constant
RETURNS a ZIM timeoutObject to pause and clear the timeout with the following methods and properties:
METHODS - of ZIM timeoutObject
pause(state, immediate, reset) - (default true) will pause the timeout - set to false to unpause the timeout at the time remaining
immediate (default false) set to true to make the timeout function run right away when unpausing (no effect when pausing)
reset (default false) set to true to set the timeout back to 0 time passed when unpausing (no effect when pausing)
clear() - will clear the timeout
PROPERTIES - of ZIM timeoutObject
time - the time that has lapsed (in the timeUnit)
paused - the paused state of the timeout
done - true if finished
timeUnit - get the timeUnit used at start
CLOSE ▲PAGE ▤CODE ▤BITS
interval
zim function
DESCRIPTION
Calls a function after each time delay - like window.setInterval().
Can pass in an Array of two times to set random time delays each interval.
Can pass in how many times you want to run the function and whether it runs right away.
NOTE
as of ZIM Cat time is in seconds not milliseconds.
Set TIME = "milliseconds"; to set all ZIM time to milliseconds
or pass in "milliseconds" to the timeUnit parameter for a specific override.
NOTE
setInterval has the time parameter last, interval has it first
so that it is consistent with loop() and the CreateJS on() method
NOTE
to clear a interval you use intervalObj.clear() - different than window.clearInterval(returnID)
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
interval(1, ()=>{
circle.x += 100;
S.update();
});
// every second the circle will move 100 pixels
// if you want smooth movement, use:
Ticker.add(()=>{
circle.x += 100; // no need for S.update()
});
interval(1, obj=>{
zog("counting " + obj.count); // starts counting at 1
if (obj.count == 10) obj.clear(); // will now log 1 to 10
});
// OR better:
interval(1, obj=>{
zog("counting " + obj.count); // starts counting at 1
}, 10); // now will log 1 - 10 with total parameter set to 10
// IMMEDIATE:
interval(1, obj=>{
zog("counting " + obj.count); // starts counting at 0
}, 10, true); // now will log 0 - 9 with immediate parameter set to true
// EXTERNAL control:
const inter = interval(1, ()=>{
zog("counting " + inter.count); // starts counting at 1
});
const button = new Button({label:"STOP", toggle:"START"}).center();
button.on("click", ()=>{inter.pause(button.toggled);});
// RANDOM intervals with ZIM Pick() literals
interval({min:.2, max:.8}, dropBombs); // bombs will fall at different rates between 200ms and 800ms
interval([1, 2], dropBombs); // bombs will fall at either 1 or 2 s
let count = 1;
function increase() {return ++count}
interval(increase, dropBombs); // bombs will fall at 1 second, then again after 2 more seconds and 3 seconds more after that, etc.
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports VEE - parameters marked with ZIM VEE mean a zim Pick() object or Pick Literal can be passed
Pick Literal formats: [1,3,2] - random; {min:10, max:20} - range; series(1,2,3) - order, function(){return result;} - function
time - |ZIM VEE| (default 1) seconds for the interval (delay until the function runs - again and again)
see TIME global constant (defaults to "seconds") can also override with timeUnit parameter set to "milliseconds"
call - function to call when the interval passes
Will be passed a ZIM intervalObject as a single parameter
This is the same as the return object from animate()
See the Returns section below for methods and properties of the intervalObject
total - (default null - infinite) the number of times the function is called
note: the count property counts intervals but the total property is based on function calls.
The total will be equal to the end count with the immediate parameter set to false (default)
but the total will be one less than the count if the immediate parameter is true (like an Array index and length)
immediate - (default false) set to true to call the function right away (and then still call every interval)
This will not increase the count in the intervalObject because count counts intervals not function calls
Use the provided parameter of the call function to access the intervalObject inside the call function
pauseOnBlur - (default false) set to true to pause interval when window is reduced or another tab gains focus
timeUnit - (default seconds) set to "milliseconds" for traditional JavaScript milliseconds
also see TIME constant which defaults to "seconds"
timeUnit will override the TIME constant
complete (default null) - a callback function to call when complete if total is set
completeParams (default null) - paramater to pass complete callback
RETURNS a ZIM intervalObject to pause and clear the interval with the following methods and properties:
METHODS - of ZIM intervalObject
pause(state, immediate, reset) - (default true) will pause the interval - set to false to unpause the interval with time left
immediate (default false) set to true to make the interval function run right away when unpausing (no effect when pausing)
reset (default false) set to true to set the interval back to 0 time passed when unpausing (no effect when pausing)
next() - calls the interval again immediately, count goes up
clear() - will clear the interval but the count stays as it was
PROPERTIES - of ZIM intervalObject
time - |ZIM VEE| get or set the time for the interval (see time parameter)
count - get or set the number of times the interval has run (if immediate is true, the first count is 0)
total - get or set the number of times the interval will run if the total parameter is set - otherwise -1 for infinite
paused - get the paused state of the interval (see pause() method)
pauseTimeLeft - if paused, get how much time is left once unpaused
CLOSE ▲PAGE ▤CODE ▤BITS
async
zim function
DESCRIPTION
A way to send data back and forth to a server script without reloading the HTML page.
(like AJAX but without the bother)
Uses a dynamic script call with an optional callback (cross domain calls are okay)
also known as JSON-P pattern but JSON is unnecessary - note, no JSON in two of the examples below.
Pass a url to the server script (ie. php or node page)
and an optional callback function that you define in your code (cannot be an anonymous function).
async will automatically add a random number to the end of your script call to defeat cache.
NOTE
async uses GET so data is limited to GET length (as of ZIM 10 - this is 2K to 8K depending on Browser)
If more data is required, use an AJAX library
NOTE
async uses an r CGI key to send a random number to defeat cache.
Do not send an r property
SEE: https://codepen.io/danzen/pen/gNKQYY for a full example
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// existing JSONp service:
// assuming that we have a callback function called test as shown below
async("https://ip-api.com/json?callback=async.test",test);
function test(data) {zog(data.country);}
// note that the callback we pass the service is async.test not just test
// this allows zim to handle scope issues and garbage collect the dynamic script when done
EXAMPLE
// existing JSON service:
// if the service just returns JSON - then pass through a JSONp wrapper:
const api = "https://zimjs.com/codepen/ranker.php"; // not JSONp - just JSON
async("https://zimjs.org/cdn/jsonp.php?api="+api+"&callback=async.getData", getData);
function getData(data) {
zog(data); // data will be the JSON parsed object
}
// Here is the jsonp.php code if you would like to host:
<?php
$api = $_GET["api"];
if (!preg_match('/^http/i', $api)) exit;
$callback = $_GET["callback"];
header('Content-Type: application/javascript');
$data = file_get_contents($api);
echo $callback."(".$data.")";
?>
EXAMPLE
// CLIENT - your own server script:
// assuming we have a callback function called myFunction as shown below
async("https://yourserver.com/script.php?id=72&name=dan", myFunction);
function myFunction(data){
zog(data.test); // wow - assuming you have the PHP file below (JSON is automatically parsed)
zog(data.score[1]); // 2
}
// SERVER - your script must output the following format as a string:
// "async.myFunction(somedata)"
// in the php file we would use the following to return JSON:
<?php
header('Content-type: text/javascript');
$data = [test=>"wow", score=>[1,2,3]];
echo "async.myFunction(".JSON_encode($data).")";
?>
// or to just echo a string:
<?php
header('Content-type: text/javascript');
echo "async.myFunction('success')"; // your data parameter in myFunction would be "success"
?>
// to return an object literal with nodejs express for example, you would use:
res.send('async.myFunction({list:[1,2,3], name:"whatever"})');
// the data parameter in the myFunction function defined earlier would be an object literal
// we could then do zog(data.list[0]) to log the value 1, etc.
PARAMETERS
url - url to the server script (ie. php or node page)
Note: async uses an r CGI key to send a random number to defeat cache - do not send an r property
callback - (default null) callback function that you define in your code (cannot be an anonymous function)
callbackString - (default null) a string name matching the function in case the file is minified
maxTime - (default 2 seconds) how long to wait for server response before triggering an error
may still trigger callback if callback comes later unless maxCancel is set to true
see also ZIM TIME constant
If maxTime is up without calling back the function
async will return two arguments to the callback function:
"asyncError" and either "timeout" or "cancelled"
maxCancel - (default false) set to true to have maxTime cancel a late callback response
calling the return function on async does two things:
1. it handles scope issues so we can find your callback function
2. it handles garbage collection to remove the dynamic script tag that was used
if you do not specify a callback function then just send "" back from your server script
NOTE
we have experienced duplicate script calls if nothing is sent back
NOTE
if more than one async() with the same named call function is run at the same time
then a queue of callbacks is created
if the data comes back in a different order, the wrong call could be called
if there is danger of this happening (rare) then use ZIM Ajax
RETURNS undefined
CLOSE ▲PAGE ▤CODE ▤BITS VIDS
couple
zim function
DESCRIPTION
Turns a nested JSON object into a single layer JSON object
The object will have _ between the id and the property name
eg. {"circle":{"x":"10", "y":"20"},"count":{"value":"0"}}
is: {"circle_x":"10", "circle_y":"20", "count_value":"0"}
This allows data to be JSON decoded on the server
and put more directly into table fields of the database
See also ZIM decouple()
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// note the two levels of nesting - this is the format of ZIM Bind data for instance
const test = JSON.stringify({circle:{x:10, y:20},count:{value:0}});
zog(couple(test)); // {"circle_x":"10", "circle_y":"20", "count_value":"0"}
PARAMETERS
json - a JSON string in the nested form of:
{"obj1":{"prop1":"val", "prop2":"val"},"obj2":{"prop3":"val"}}
RETURNS a JSON string with one less level of objects in form of:
{"obj1_prop1":"val", "obj1_prop2":"val", "obj2_prop3":"val"}
CLOSE ▲PAGE ▤CODE ▤
decouple
zim function
DESCRIPTION
Turns a flat coupled JSON object into a nested layer JSON object
The object will remove _ from between the id and the property name
eg. {"circle_x":"10", "circle_y":"20", "count_value":"0"}
is: {"circle":{"x":"10", "y":"20"},"count":{"value":"0"}}
This allows data from table fields of the database
to be more easily dealt with as objects with their own properties
See also ZIM couple()
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// note the two levels of nesting - this is the format of ZIM Bind data for instance
const test = {circle:{x:10, y:20},count:{value:0}};
const test2 = JSON.stringify(test);
const test3 = couple(test);
// {"circle_x":"10", "circle_y":"20", "count_value":"0"}
// send this to server to store in fields
// receive back similar coupled data from fields
// decouple the data:
const test4 = decouple(test3);
// {"circle":{"x":"10", "y":"20"},"count":{"value":"0"}}
const test5 = JSON.parse(test4); // similar object to test!
// {circle:{x:10, y:20},count:{value:0}};
PARAMETERS
json - a JSON string in the coupled form of
{"obj1_prop1":"val", "obj1_prop2":"val", "obj2_prop3":"val"}
RETURNS a JSON string with one less level of objects in the form of:
{"obj1":{"prop1":"val", "prop2":"val"},"obj2":{"prop3":"val"}}
the original JSON string will be returned if the initial JSON string is not coupled
CLOSE ▲PAGE ▤CODE ▤
convertColor
zim function
DESCRIPTION
Converts color to HEX - for example: "#333333"
Converts color to HEX NUMBER - for example: 819
Converts color to HEX STRING - for example: "0xff333333"
Or converts color to HTML string - for example: "red"
Or converts color to RGB - for example: "rgb(0,0,0)"
Or converts color to RGBA - for example: "rgba(0,0,0,.5)"
Or converts color to hsl array - for example: [degrees, percent, percent]
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
let color;
color = convertColor("red"); // result is "#ff0000"
color = convertColor("rgb(255,0,0)")); // result is "#ff0000"
color = convertColor("rgb(0,0,255)", "string"); // result is "blue"
color = convertColor("rgb(0,0,20)", "string"); // result is "#000014" - no matching string color
color = convertColor("#ff0000", "string"); // result is "red"
color = convertColor("f00", "string"); // result is "red" - note missing # okay and can use three digits
color = convertColor(blue, "rgba", .5); // result is "rgba(80,196,183,0.5)"
color = convertColor("rgb(256,256,0)", "rgba", .3); // result is "rgba(256,256,0,.3)"
color = convertColor("rgba(0,0,0,.2)", "rgba", .5); // result is "rgba(0,0,0,.5)"
color = convertColor("rgba(0,0,0,.2)", "hex", .5); // result adds alpha to hex "#00000080"
color = convertColor("red", "hexnumber"); // result is 16467800
color = convertColor("red", "hexstring"); // result is "0xff0000"
color = convertColor("rgba(0,0,0,.2)", "array"); // result is [0,0,0,.2]
color = convertColor(blue, "hsl"); // result is [173.28,49.57,54.12] // first is angle then two percentages
color = convertColor(0x00FF00); // result is "#00FF00";
PARAMETERS
color - (default black) the HTML string or HEX color (case insensitive) or HEX number starting with 0x
HEX can be a # followed by 6, 3, 8 or 4 characters (3 or 4 characters will be duplicated to 6 or 8)
toColorType - (default "hex") or use "string", "rgb", "rgba", "array", "hsl" (different than "hsv") "zim", "hexnumber", "hexstring"
if "string" and color does not match existing HTML string color
then will return HEX as string
zim will convert zim rgb to zim string like "blue"
hexnumber is the color.parseInt(16) - similar to 0x format
hexstring is the 0x format as a string
array will give [r,g,b,a] as array
hsl will give [degree, percent, percent] - note, hsv and hsl are similar but only the hue is the same
alpha - (default 1) the alpha used for the "rgba" and "hex" toColorType
for hex color type, the hex number is an 8 character result (after the #)
RETURNS a String with the converted color
CLOSE ▲PAGE ▤CODE ▤
colorRange
zim function
DESCRIPTION
Gets the color in a range between two colors based on a ratio from 0-1
Used internally by setColorRange() method and colorRange property of ZIM shapes
including animating color from current color to a new color
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
zog(colorRange(green, blue, .5)); // #7ecb7c
const rect = new Rectangle(100,100,red).center().setColorRange(purple);
rect.colorRange = .1; // will change color to #f1455e (closer to red than purple)
rect.animate({color:purple}, 1); // will animate color to purple in one second
rect.wiggle("colorRange", .5, .2, .5, 1, 5); // wiggles the color in the range
PARAMETERS
** supports VEE - parameters marked with ZIM VEE mean a zim Pick() object or Pick Literal can be passed
Pick Literal formats: [1,3,2] - random; {min:10, max:20} - range; series(1,2,3) - order, function(){return result;} - function
color1 - |ZIM VEE| (default null) the first color as an HTML string or hex color (case insensitive)
color2 - |ZIM VEE| (default black) the second color as an HTML string or hex color (case insensitive)
ratio - (default .5) the ratio where 0 is the first color and 1 the second color
RETURNS a hex color string
CLOSE ▲PAGE ▤CODE ▤
lighten
zim function
DESCRIPTION
Lightens the color by a ratio from 0 to 1
A shortcut for ZIM colorRange(color, white, ratio);
A shortcut method is also added to the JavaScript String
for instance:
red.lighten(.2); // lightens ZIM red color
"red".lighten(.2); // lightens HTML red color
"#cc0000".lighten(.2); // lightens HTML Hex color
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// make a slightly lighter than ZIM blue circle
new Circle(100, lighten(blue, .2)).center();
// or use the String method directly
new Circle(100, blue.lighten(.2)).center();
PARAMETERS
color - the color as an HTML string or hex color (case insensitive)
can be ZIM colors as they are just references to hex colors
not used with color String method
ratio - (default .5) the ratio where 0 is the color and 1 white
RETURNS a hex color string
CLOSE ▲PAGE ▤CODE ▤
darken
zim function
DESCRIPTION
Darkens the color by a ratio from 0 to 1
A shortcut for ZIM colorRange(color, black, ratio);
A shortcut method is also added to the JavaScript String
for instance:
red.darken(.2); // darkens ZIM red color
"red".darken(.2); // darkens HTML red color
"#cc0000".darken(.2); // darkens HTML Hex color
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// make a slightly darker than ZIM blue circle
new Circle(100, darken(blue, .2)).center();
// or use the String method directly
new Circle(100, blue.darken(.2)).center();
PARAMETERS
color - the color as an HTML string or hex color (case insensitive)
can be ZIM colors as they are just references to hex colors
not used with color String method
ratio - (default .5) the ratio where 0 is the color and 1 black
RETURNS a hex color string
CLOSE ▲PAGE ▤CODE ▤
toColor
zim function
DESCRIPTION
toColor the color by a ratio from 0 to 1
A shortcut for ZIM colorRange(color, white, ratio);
A shortcut method is also added to the JavaScript String
for instance:
red.toColor(blue, .2); // moves ZIM red color towards ZIM blue color
"red".toColor("blue", .2); // moves HTML red color towards HTML blue color
"#cc0000".toColor("#0000cc", .2); // moves HTML Hex red color towards HTML Hex blue color
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// make a ZIM blue circle be partway to ZIM pink
new Circle(100, toColor(blue, pink, .2)).center();
// or use the String method directly
new Circle(100, blue.toColor(pink, .2)).center();
PARAMETERS
color - the color as an HTML string or hex color (case insensitive)
can be ZIM colors as they are just references to hex colors
not used with toColor String method
targetColor - the target color as an HTML string or hex color (case insensitive)
can be ZIM colors as they are just references to hex colors
ratio - (default .5) the ratio where 0 is the color and 1 targetColor
RETURNS a hex color string
CLOSE ▲PAGE ▤CODE ▤
toAlpha
zim function
DESCRIPTION
Set the alpha of a the color by a ratio from 0 to 1
A shortcut for ZIM convertColor(color, "rgba", ratio);
A shortcut method is also added to the JavaScript String
for instance:
red.toAlpha(.2); // sets ZIM red color to .2 alpha
"red".toAlpha(.2); // sets HTML red color to .2 alpha
"#cc0000".toAlpha(.2); // sets HTML Hex red color to .2 alpha
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// make a ZIM blue circle be partway to ZIM pink
new Label({text:"HELLO", backgroundColor:blue.toAlpha(.5)}).pos(0,50,CENTER,BOTTOM);
PARAMETERS
color - the color as an HTML string or hex color (case insensitive)
can be ZIM colors as they are just references to hex colors
not used with toAlpha String method
ratio - (default .5) the ratio where 0 is the color and 1 targetColor
RETURNS a hex color string
CLOSE ▲PAGE ▤CODE ▤
toBW
zim function
DESCRIPTION
Returns either black or white depending on which will have better contrast on the provided hex color
If the color is not hex then use ZIM convertColor() first.
Thanks - Mark Ransom on GitHub
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const invertedColor = invertColor(red);
const swatch = new Rectangle(300, 200, invertedColor).center();
new Label(invertedColor, 50, null, toBW(invertedColor)).center(swatch);
// the toBW() chooses black or white which ever will have highest contrast on color
PARAMETERS
color - a hex color - use ZIM convertColor() if not a hex color
RETURNS either "#000000" or "#ffffff" depending on which has more contrast against the provided color
CLOSE ▲PAGE ▤CODE ▤
invertColor
zim function
DESCRIPTION
Inverts a color (converts to RGB and subtracts the color from black)
Used in ZIM "invert" theme.
Thanks - Onur Yildirim on GitHub
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const invertedColor = invertColor(red);
const swatch = new Rectangle(300, 200, invertedColor).center();
new Label(invertedColor, 50, null, toBW(invertedColor)).center(swatch);
// the toBW() chooses black or white which ever will have highest contrast on color
PARAMETERS
color - a hex color - use ZIM convertColor() if not a hex color
RETURNS a hex color string of inverted color
CLOSE ▲PAGE ▤CODE ▤
zimEase
zim function
DESCRIPTION
Easing is used in animation usually to slow down or speed up as the animation starts or ends.
ZIM animate() has built in eases that handle the common types of easing - so look there first!
https://zimjs.com/docs.html?item=animate under the ease parameter.
The zimEase() function provides for custom easing beyond the built in eases and
returns an easing function to pass in to ZIM animate() - or CreateJS TweenJS
The points to pass in to zimEase() can be created at https://zimjs.com/ease
At the top of the app there are default easing functions
but just use the built in easing function for most of these such as "quadOut", etc.
SEE: https://zimjs.com/ease for the zimEase tool
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// go to https://zimjs.com/ease use the sliders and TEST the motion
// then press SAVE and copy the zimEase() code into ZIM animate()
// this example makes very big forward, back, forward motion
new Circle().loc(200,200).animate({
props:{x:400},
ease:zimEase([2.5,-0.5,-1,1]),
time:1.5
});
EXAMPLE
// passing an array of two arrays will play the first for the first half
// and the second for the second half
// so here we pass an array of two arrays for a snapInOut effect
// this is cool so it is now a set of eases: "snapIn", "snapOut", "snapInOut" - cheers GreenSock!
new Circle().loc(200,200).animate({
props:{x:400},
ease:zimEase([[1.45,-0.57,0.67,0.55], [0.34,0.44,1.43,-0.31]]),
// ease:"snapInOut", // or use the new ZIM ease
time:2
});
PARAMETERS
points - (default [.2,.4,.6,.8]) an array of 4 points to feed the equation - or an array of two arrays
use the tool at https://zimjs.com/ease and press SAVE to get these
the two ends are anchored at 0 and 1 and are the input to the quintic Bezier formula
If an array of two arrays is provided the first array is used for the first half of the tween (In)
and the second array is used for the second half of the tween (Out)
polynomials - (default null) an array of 5 points that are the results of the quintic Bezier formula
linear would be [0,0,0,0,1] - use this if you are given the polynomials - who knows!
otherwise see points.
mirror - (default false) will duplicate the ease equation and reverse the second copy all within the provided time
reverse - (default false) reverses the ease equation (does not work with mirror)
lockEnds - (default true) this snaps the start and end to the real values - set to false to draw curve based on data, for instance.
PROPERTIES
** The function result is an object that holds the easing equation in a noPick property
** this allows it to bypass the dynamic setting of ZIM VEE ease parameter.
** Also in this object are the additional properties
points - the array of points or the array of arrays of points
polynomials - the array of final values or an array of arrays of final values
RETURNS an easing function for ZIM animate() or CreateJS TweenJS
CLOSE ▲PAGE ▤CODE ▤VIDS
spline
zim function
DESCRIPTION
Makes a curve along given points.
Pass in a ZIM Shape and spline will draw the curve.
Or pass return value into a ZIM Squiggle or Blob as the points parameter
for an interactive curve or path for animation.
For a Blob, set the close parameter to true.
Thanks https://github.com/georgedoescodeNOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const shape = new Shape().addTo().s(red).ss(3);
spline([[10,10],[50,20],[30,200],[230,100]], 1, true, shape);
EXAMPLE
const points = spline([[10,10],[50,20],[30,200],[230,100]], 1, true);
new Blob({
borderColor:purple,
borderWidth:2,
controlType:"mirror", // otherwise default is free
points:points
}).center();
PARAMETERS
points - an array of {x,y} or [x,y] points to draw a curve through
tension - (default 1) the smoothness of the curve with 0 being angulars
close - (default false) set to true to close the curve
shape - (default null) pass in an optional shape to draw the curve in
must set the s(), ss() or f() before passing in the shape
removeLast - (default close) for ZIM Blob and Squiggle
this removes the duplicate last point
only for the return values - will not affect a shape version
RETURNS an SVG path that can be passed into Squiggle or Blob
CLOSE ▲PAGE ▤CODE ▤
getPointAtPercent
zim function
DESCRIPTION
Gets a new Point along the straight line from x1,y1 to x2,y2 at a percentage of the length
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// A ZIM line() is not needed but here we place a circle 30% along the length of the line
const line = new Line(500).rot(45).center();
new Circle(20,red).loc(getPointAtPercent(line.startX, line.startY, line.endX, line.endY, 30));
PARAMETERS
x1 - (default 0) - the start x of the line
y1 - (default 0) - the start y of the line
x2 - (default 0) - the end x of the line
y2 - (default 0) - the end y of the line
percent - (default 50) - the percentage along the line straight for the return point
RETURNS an ZIM Point() with x an y at the percentage along the straight line
CLOSE ▲PAGE ▤CODE ▤
pointAlongCurve
zim function
DESCRIPTION
Finds a point along a cubic Bezier curve - such as that used in Blob and Squiggle
as well as the Shape.graphics.bezierCurveTo() or tiny api bt()
Used internally for animating along Blob and Bezier curves
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
PARAMETERS
points - an array of point objects (or objects with an x and y property)
for a cubic Bezier - point1, control1, control2, point2
ratio - (default .5) the ratio where 0 is at the first point and 1 is at the second point
getAngle - (default false) request a calculated angle of tangent at point
even - (default false) use modified cubic equation for even spacing for percentages
even is used by Beads but not by placing a point along a path
RETURNS a point object with x and y properties on the curve at the ratio
as well as an angle property for the tangent if getAngle is true
CLOSE ▲PAGE ▤CODE ▤
distanceAlongCurve
zim function
DESCRIPTION
Finds approximate distance along a cubic Bezier curve - such as that used in Blob and Squiggle
as well as the Shape.graphics.bezierCurveTo() or tiny api bt()
Used internally for animating along Blob and Bezier curves
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
PARAMETERS
points - an array of point objects (or objects with an x and y property)
for a cubic Bezier - point1, control1, control2, point2
RETURNS an approximate distance along the curve
CLOSE ▲PAGE ▤CODE ▤
closestPointAlongCurve
zim function
DESCRIPTION
Finds the closest point along a cubic Bezier curve before the given point.
Blob and Squiggle use cubic Bezier as does the Shape.graphics.bezierCurveTo() or tiny api bt()
Used internally for adding points to a Blob and Bezier curves
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const blob = new Blob().center();
const points = blob.segmentPoints;
S.on("stagemousedown", ()=>{
const point = blob.globalToLocal(F.mouseX, F.mouseY)
zog(closestPointAlongCurve({x:point.x, y:point.y}, points))
// gives index of point on curve before mouse location
});
PARAMETERS
point - an object with an x and y property
this could be {x:100, y:140} or circle, etc.
the results tell which segment to add the point to
the segment starting with the returned index
segmentPoints - an array of cubic Bezier point data
each being an array of points for a cubic Bezier
in the format of [point1, control1, control2, point2]
Note, this is not the same as Blob or Squiggle points
but rather use the segmentPoints property of Blob and Squiggle
num - (default 10) the number of points per segment used to calculate answer
interpolate - (default false) will return closest test point - not index of closest existing point
percentage - (default false) will return percent (0-100) the nearest point is on the path (overrides interpolate)
RETURNS the index of the closest point in segmentPoints before the given point
or if interpolate is true, will return the closest testPoint (use higher num for better result)
or if percentage is true, will return percent (0-100) the nearest point is on the path (overrides interpolate)
CLOSE ▲PAGE ▤CODE ▤
transformPoints
zim function
DESCRIPTION
Scales, rotates, or moves points about provided x and y - or 0, 0 if x and y are not provided
Used internally by Squiggle and Blob transformPoints method
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// or used with Squiggle:
const points = [[0,75,0,0,-150,150,150,-150],[300,75,0,0,0,0,0,0,"none"]];
const squiggle = new Squiggle({points:points}).transformPoints("scale", 2).center();
// a squiggle with points twice as big as before
PARAMETERS
points - an array of points in the Squiggle and Blob format (controlType is left as is)
[[controlX, controlY, circleX, circleY, rect1X, rect1Y, rect2X, rect2Y, controlType], [etc]]
transformType - String any of: "scale", "scaleX", "scaleY", "rotation", "x", "y"
amount - the amount to transform
x, y - (default 0, 0) the x and y position to transform about
RETURNS an array of points with numbers transformed
CLOSE ▲PAGE ▤CODE ▤
trimEndPoints
zim function
DESCRIPTION
Take outside Bezier rectangles off end points of Squiggle
Modifies the points but then will have to make Squiggle from modified points
Used internally, but might want to create a Squiggle from half the points or every other point
this function would make sure ends are clean.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const s = new Squiggle();
const p = copy(s.points).slice(1); // take off the first point
s.points = trimEndPoints(p);
s.center(); // a Squiggle with the first point gone
PARAMETERS
points - an array of points in the Squiggle format
RETURNS an array of points with with the first point having no left control and the last point having no right control
CLOSE ▲PAGE ▤CODE ▤
reversePoints
zim function
DESCRIPTION
Reverses Squiggle formatted points
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const s = new Squiggle();
const p = reversePoints(s.points);
const path = new Squiggle({points:p, interactive:false}).center();
new Circle(20,red).addTo().animate({path:path}, 10); // will go right to left
// also see reversePoints() on Squiggle and Blob
PARAMETERS
points - an array of points in the Squiggle format to reverse
RETURNS an array of points that is in reverse order to the input points
CLOSE ▲PAGE ▤CODE ▤
appendPoints
zim function
DESCRIPTION
Adds a set of Squiggle points to after an original set of Squiggle points
The joining point is merged with the provided optional controlType
** appendPoints() expects the first point on points (the second parameter)
to be at the last point of the original (the first parameter)
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const s = new Squiggle(); // not added
// appendPoints expects the first point on points (the second parameter)
// to be at the last point of the original (the first parameter)
const s2 = appendPoints(s.points, [s.points[s.points.length-1], [350,50]]);
// an array with an extra points added at the end - the joining point is merged
new Squiggle({points:s2}).center();
PARAMETERS
original - an array of points in the Squiggle format
points - an array of points in the Squiggle format to add to the end of the original
controlType - (default "straight") one of four String values as follows:
none - there are no control rectangles (they are actually set at 0,0). This makes a corner at the circle point.
mirror - the control rectangles reflect one another about the point circle - lengths are kept even
straight - the control rectangles keep a straight line through the point circle but length is independent
free - the control rectangle moves independently from the other control rectangle
RETURNS the original array of points with the points added to the end
CLOSE ▲PAGE ▤CODE ▤
prependPoints
zim function
DESCRIPTION
Adds a set of Squiggle points to before an original set of Squiggle points
The joining point is merged with the provided optional controlType
** prependPoints() expects the last point on points (the second parameter)
to be at the first point of the original (the first parameter)
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const s = new Squiggle(); // not added
// prependPoints expects the last point on points (the second parameter)
// to be at the first point of the original (the first parameter)
const s2 = prependPoints(s.points, [[-50,50], s.points[0]]);
// an array with an extra points added to the start - the joining point is merged
new Squiggle({points:s2}).center();
PARAMETERS
original - an array of points in the Squiggle format
points - an array of points in the Squiggle format to add to the start of the original
controlType - (default "straight") one of four String values as follows:
none - there are no control rectangles (they are actually set at 0,0). This makes a corner at the circle point.
mirror - the control rectangles reflect one another about the point circle - lengths are kept even
straight - the control rectangles keep a straight line through the point circle but length is independent
free - the control rectangle moves independently from the other control rectangle
RETURNS the original array of points with the points added to the beginning
CLOSE ▲PAGE ▤CODE ▤
splitPoints
zim function
DESCRIPTION
Splits Squiggle points into two sets of Squiggle points
Also used by Squiggle splitPoints() and Blob makeSquiggle()
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const s = new Squiggle();
const split = splitPoints(s.points, 2); // two arrays of three points each
// also see Squiggle.splitPoints(2) // which splits squiggle into two squiggles
PARAMETERS
points - an array of points in the Squiggle format
index - (default floor of half points length) the index at which to split the points into two sets
the first set gets the index
trimEnds - (default false) take ending Bezier sticks off split ends
RETURNS an array if the first and second set of points
CLOSE ▲PAGE ▤CODE ▤
outlineImage
zim function
DESCRIPTION
Returns points [[x,y],[x,y]...] around an image - the image should be transparent.
Uses the Marching Squares technique adapted by @sakri.
The image can be any ZIM DisplayObject most likely a Pic()
It should have one solid shape as opposed to separate blobs.
NOTE
will return thousands of points so will want to use ZIM simplifyPoints()
before sending points to a ZIM Blob() for instance
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
import zim from "https://zimjs.org/cdn/017/zim_physics"; // or latest version
new Frame(FIT, 1024, 768, light, dark, ready, "cathead.png", "https://zimjs.org/assets/");
function ready() {
const pic = new Pic("cathead.png").center();
const physics = new Physics().drag();
const blob = new Blob({
points:simplifyPoints(outlineImage(pic)),
color:faint,
interactive:false
}).loc(pic).addPhysics();
pic.addTo(blob);
zog(physics.validate(blob)); // check validation
new Circle(50,black).pos(0,100,CENTER).addPhysics();
}
PARAMETERS
image - a DisplayObject with transparency sunch as a Pic() of a png
the image should have one single solid area
RETURNS an array [[x,y], [x,y]...] points (probably thousands) outlining the solid area
most likely use the ZIM simplifyPoints() function to reduce these greatly
CLOSE ▲PAGE ▤CODE ▤
simplifyPoints
zim function
DESCRIPTION
Takes in an array of points [[x,y],[x,y]...] and simplifies them to less points based on a tolerance
This is the performant simplify-js library by Vladimir Agafonkin https://mourner.github.io/simplify-js/
Use this with the ZIM outlineImage() function to reduce points
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
import zim from "https://zimjs.org/cdn/017/zim_physics"; // or latest version
new Frame(FIT, 1024, 768, light, dark, ready, "cathead.png", "https://zimjs.org/assets/");
function ready() {
const pic = new Pic("cathead.png").center();
const physics = new Physics().drag();
const blob = new Blob({
points:simplifyPoints(outlineImage(pic), 10), // 10 is the default tolerance
color:faint,
interactive:false
}).loc(pic).addPhysics();
pic.addTo(blob);
zog(physics.validate(blob)); // check validation
new Circle(50,black).pos(0,100,CENTER).addPhysics();
}
PARAMETERS
points - an array of points in [[x,y],[x,y]...] format - possibly from ZIM outlineImage()
tolerance - (default 10) the amount of simplification (in pixels)
highestQuality - (default false) highest quality simplification but runs ~10-20 times slower
removeLast - (default true) removes last point which is like first point and can lead to overlap physics issues
RETURNS an array [[x,y],[x,y]...] simplified x and y points
these points can be passed into a ZIM Blob() to make a shape
CLOSE ▲PAGE ▤CODE ▤
makeID
zim function
DESCRIPTION
makes a random letter, number or mixed id of specified length
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const id1 = makeID(); // five random letters and numbers (starts with letter)
const id2 = makeID("strings"); // five random uppercase letters
const id3 = makeID("numbers", 10); // ten random numbers
const id4 = makeID(["Z", "I", "M", 1, 2, 3, 4, 5, "-"], 5); // random five characters from array (possibly repeating)
PARAMETERS
type - (default "mixed") set to "letters" or "numbers" as well
note: no O, 0, 1, I or L due to identification problems
pass in an array of characters to make an id from only those characters
length - (default 5) the length of the id
letterCase - (default uppercase) - set to "lowercase" or "mixed" as well
RETURNS a String id (even if type is number)
CLOSE ▲PAGE ▤CODE ▤
makeSyllable
zim function
DESCRIPTION
makes a syllable from random consonants and vowels in alternating order.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
zog(makeSyllable()); // "aru" or "bal", etc.
EXAMPLE
let word = "";
loop(3, ()=>{
word += makeSyllable();
});
zog(word); // a three syllable word
PARAMETERS
length - (default 3) the length of letters in the syllable
firstVowel - (default true 30%) set to true for the first letter being a vowel
set to consonant for a consonant - null will choose a vowel 30% of the time
RETURNS a String syllable of the length
CLOSE ▲PAGE ▤CODE ▤
makePrimitive
zim function
DESCRIPTION
Convert any new String(), new Number(), new Boolean() values to string, number and boolean primitives.
Recursively handles arrays and object literals. All other objects left the same.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
let o = new String("Dan Zen");
o = makePrimitive(o); // o is now "Dan Zen"
// this is the same as o = String(o);
EXAMPLE
let o = {age:new Number(7), name:new String("Dan Zen")};
o = makePrimitive(s); // o is now {age:7, name:"Dan Zen"}
EXAMPLE
let o = [new Number(7), new String("Dan Zen")];
o = makePrimitive(s); // o is now [7, "Dan Zen"];
// also works with combinations of arrays and object literals
PARAMETERS
obj - the object to convert
RETURNS the object with String, Number and Boolean objects converted to primitives
CLOSE ▲PAGE ▤CODE ▤
makeMath
zim function
DESCRIPTION
Adds all Math static methods to window as global variables
There are not as many as we might think... 43 at the time of writing this
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
swapProperties
zim function
DESCRIPTION
Pass in a property as a string and two object references
and this function will swap the property values.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// exchanges the x position of two ZIM circles
swapProperties("x", circle1, circle2); S.update();
PARAMETERS
property - a String of the property to swap values eg. "alpha"
objA, objB - the objects on which to swap properties
RETURNS Boolean indicating success
CLOSE ▲PAGE ▤CODE ▤BITS
setProps
zim function
DESCRIPTION
Sets the props of an object literal {} on the provided object or array
Each value can be a ZIM VEE value - see docs for ZIM Pick()
Thanks Pettis Brandon and Joseph Diefenbach for the thoughts on this
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const c = new Circle().addTo();
setProps(c, {x:100, y:200}); // can also use CreateJS set() method for this
// Set props for each object in array
const a = [new Circle().loc(100,100), new Rectangle().loc(300,100)];
setProps(a, {color:red, borderColor:blue}); // cannot use CreateJS set() method for this
// Use the setProps() method of a Tile - just calls the setProps() function
// The method is available on Tile, Wrapper, LabelLetters, LabelWords, LabelOnPath, LabelOnArc, etc.
new Tile().center().setProps(color:[red, orange, yellow])
PARAMETERS
obj - an object or an array of objects
props - an object literal {} of properties and values to set on the object or objects in an array
the value can be ZIM VEE values - see docs for ZIM Pick()
CLOSE ▲PAGE ▤CODE ▤
mobile
zim function
NOTE
for making mobile apps - see https://zimjs.com/mobile.html
and the PWA entry in Docs https://zimjs.com/docs.html?item=PWANOTE
as of ZIM version ZIM 01, a global variable M is provided if the Frame is run
that just stores the result of mobile(). mobile() was needed for each Button... so made it global
DESCRIPTION
Detects if app is on a mobile device - if so, returns the mobile device type:
android, ios, blackberry, windows, other (all which evaluate to true) else returns false.
orientation defaults to true and if there is window.orientation then it assumes mobile
BUT this may return true for some desktop and laptop touch screens
so you can turn the orientation check off by setting orientation to false.
If orientation is set to false the check may miss non-mainstream devices
The check looks at the navigator.userAgent for the following regular expression:
/ip(hone|od|ad)|android|blackberry|nokia|opera mini|mobile|phone|nexus|webos/i
Microsoft mobile gets detected by nokia, mobile or phone.
NOTE
See also the ZIM MOBILE constant - this can be set to true or false to override mobile() (but not the M global)
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
if (mobile()) {
const pane = new Pane("Desktop Only");
pane.show();
}
// alternatively, for ZIM version ZIM 01 and on:
if (M) {
const pane = new Pane("Desktop Only");
pane.show();
}
PARAMETERS
orientation - (default true) uses window.orientation property to determine mobile
this may call certain touch screens mobile
but setting to false uses a test on mobile names which could be incomplete
RETURNS a String or false
CLOSE ▲PAGE ▤CODE ▤BITS
vee
zim function
DESCRIPTION
Determines if obj is a ZIM Pick() object or a Pick Literal - used by ZIM VEE parameters
Pick Literal format is [], {min:a, max:b}, function(){}, {noPick:x} or a function(){}
See https://zimjs.com/docs.html?type=Pick
ZIM Pick is a way to pass in dynamic parameters or style properties
This is very handy to pass in a series() function or an array for random pickings, etc.
Used to create dynamic particles with the Emitter or tile specific items in order, etc.
Pick.choose() accepts any value and if not in ZIM Pick format, will just return the object
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const color = [red, green, blue];
// ternary operator - if in Pick format, add "random" else ""
new Label((vee(color)?"random ":"") + "colors").center();
PARAMETERS
obj - an object to pass in to test whether it is in ZIM VEE (Pick) format
RETURNS a Boolean true if Pick format or false if not (such as just a number, string, new Circle, etc.)
CLOSE ▲PAGE ▤CODE ▤
extend
zim function - modified CreateJS extend and promote utility methods
DESCRIPTION
For ES5 - place after a sub class to extend a super class.
Extending a super class means that the sub class receives all the properties and methods of the super class.
For example, a ZIM Container() extends a CreateJS Container and then adds more methods and properties
but all the CreateJS Container methods and properties are still there too like x, y, addChild(), etc.
For ES6 - do not use zim.extend() but rather use the built in ES6 structures as follows:
EXAMPLE
// ES6 - do NOT use zim.extend()
class Person() {
constructor () {
zog("I am a person");
}
}
class Woman extends Person { // use JS6 extends keyword
constructor () {
super(); // use JS6 super() to call the Person constructor - will do the zog()
// Woman code
}
}
// ES6 to extend a zim Container for example (do NOT use zim.extend() in ES6)
class ChineseCoin extends Container { // use JS6 extends keyword
constructor () {
super(); // must call the zim Container before using keyword this
new Circle(100, "gold").addTo(this); // this will be the zim Container
new Rectangle(100, 100, "brown").center(this);
}
}
var coin = new ChineseCoin().center(); // coin is a zim Container with Circle and Rectangle inside
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// ES5 examples using functions to make classes
// ES5 has no extends keyword and no super keyword so we use zim.extends()
function Person() {
this.talk = function() {
zog("I am a person");
}
}
function Woman() {
this.super_constructor(); // part of the zim.extend() system
}
extend(Woman, Person); // here is the zim.extend() for ES5
var woman = new Woman();
woman.talk();
NOTE
CreateJS display objects require their constructor to be called otherwise it is like quantum entanglement (seriously)
extend() adds access to the super class constructor so it can be called in the subclass as follows:
this.super_constructor();
It also provides access to super class methods that are overridden
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// ES5 example - see the ES6 set of examples for ES6 ;-)
// make a Collection class that will extend a Container
// the Collection class will call the Container constructor
// and override the the ZIM Container center method in the class body
// and override the CreateJS Container addChild method in the prototype
// either method would work in either place - it is often a matter of preference
// but you might need to use a method in the class body to access local variables
// The ZIM extend() method parameter values need to change depending on where you override
// see the comments inline for the instructions
var Collection = function() {
// for CreateJS the super constructor must be run
this.super_constructor();
// override the zim center() method
// methods in the function call that override must be passed in as an array of strings
// to the override parameter of extend() to be able to access the super_method
this.center = function(where) {
this.super_center(where);
this.y -= 50;
}
}
// override the super class addChild() that comes from the CreateJS Container
// methods on the prototype that override are automatically provided a super_method
// unless the prototype parameter of extend() is set to false (default is true)
Collection.prototype.addChild = function(c) {
this.super_addChild(c); // call the super class addChild
zog("added a child to Collection");
}
// make the Collection extend a Container()
// it will receive all the properties and methods of the Container plus its own
extend(Collection, Container, CENTER); // or pass an array of overridden methods
// use the Collection
var c = new Collection();
c.addChild(new Rectangle(100, 100, green)); // zogs "added a child to Collection"
c.center(); // centers the collection but then offsets it 50 pixels up
NOTE
the superclass constructor is always available as this.prefix_constructor() no matter the override or prototype settings
NOTE
this.prefix_constructor(); should be called at the top of the subclass to avoid problems when multiple copies of object
NOTE
to extend a class that already extends a ZIM class then change the prefix to a unique name:
EXAMPLE
// if we already had the Collection example above and we want to extend that
// then we must use a new prefix when using extend()
var Records = function() {
this.Collection_constructor();
}
extend(Records, Collection, null, "Collection");
// you will still have this.super_center(), this.super_addChild() if needed
// plus any newly overridden methods available as this.Collection_methodName() etc.
var r = new Records();
r.addChild(new Circle(20, pink));
r.super_center(); // call the original center (without vertical shift)
// to extend again, use yet another prefix - for example: "Records"
var Jazz = function() {
this.Records_constructor();
}
extend(Jazz, Records, null, "Records");
PARAMETERS supports DUO - parameters or single object with properties below
NOTE
do NOT use zim.extend() with ES6 - see ES6 examples at top instead
subclass - the class to extend
superclass - the class to extend from (an existing class)
override - (default null) an Array of methods (as Strings) to override.
You can override any function by just defining that function in the subclass
the override parameter gives you access to the overridden function in the superclass prototype
only methods on the superclass prototype can be accessed once overridden - not methods in the superclass body
if there is only one method being overridden then a single string is fine ("test" or ["test"] is fine)
any methods passed to this parameter will be given prefix_methodName() access on the sub class (this.prefix_methodName())
where the prefix is below (note, the prototype setting has no bearing on these manual overrides)
this list is only needed for methods in the subclass body
methods assigned to the prototype of the subclass that override are automatically given prefixes
prefix - (default "super") a prefix that will be followed by "_" and then the overridden method name
by default this.super_constructor() would call the super class constructor
if prefix is set to "Person" then this.Person_constructor() would call the super class constructor
the same system is used to call overridden files in override or prototype
prototype - (default true) will search the subclass prototype for overriding methods
the overridden methods are then available as this.prefix_methodName()
set to false to avoid searching the super class for methods overridden by the sub class prototype
just quickens the code minutely if there is no need
NOTE
extend() is included in Distill if DISPLAY, METHODS or FRAME Module classes are used (otherwise NOT included)
RETURNS the subclass
CLOSE ▲PAGE ▤CODE ▤BITS VIDS
copy
zim function
DESCRIPTION
Copies arrays and basic objects:
modified https://stackoverflow.com/users/35881/a-levy
If you have var obj = {prop:"val"};
and then try and copy obj to obj2 like so: obj2 = obj;
then obj2 and obj refer to the same object.
This means that after obj.prop = "new"; both obj.prop and obj2.prop would be "new".
copy(obj) returns a new object so both will work independently
and after obj.prop = "new"; obj2.prop would still be "val".
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const obj = {hair:blue, cars:["audi", "honda"]};
const cop = copy(obj);
cop.hair = "green";
zog(obj.hair, obj.cop); // blue, green
obj.cars.push("vw");
zog(obj.cars.length, cop.cars.length); // 3, 2
// copy with clone for cloneable objects
// without the second parameter as true these obj2[0] and obj3[0] would be the same
// and when we do the second addTo it would just move the circle to the second position
const obj2 = [
new Circle(20,green),
new Rectangle(30,30,green),
new Triangle(40,40,40,green)
];
const obj3 = copy(obj, true); // copy and clone
obj2[0].addTo(stage).pos(100, 200);
obj3[0].addTo(stage).pos(300, 400);
PARAMETERS
obj - the object to copy
clone - (default false) set to true to clone any cloneable object while copying
cloneContainers - (default true if clone true) set to false to not copy objects with type="Container"
RETURNS a new Object
CLOSE ▲PAGE ▤CODE ▤
merge
zim function
DESCRIPTION
Merges any number of objects {} you pass in as parameters.
Overwrites properties if they have the same name.
Returns a merged object with original objects kept intact.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const one = {food:"chocolate"};
const two = {drink:"milk"};
const tri = merge(one, two);
zog(tri.food, tri.drink); // chocolate, milk
PARAMETERS
objects - a list of objects (any number) to merge together
RETURNS a new Object
CLOSE ▲PAGE ▤CODE ▤
sortObject
zim function
DESCRIPTION
Sorts an Object with inner objects by a property of the inner object
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
PARAMETERS
obj - an object with inner objects all having similar property names
property - the property (as a string) of the inner object on which to sort
reverse - (default false) set to true to reverse the sort
RETURNS a new Object with sorted properties - the original object is left as is
CLOSE ▲PAGE ▤CODE ▤
arraysEqual
zim function
DESCRIPTION
Finds out if arrays are same (including nested arrays).
Works for arrays with strings and numbers (not necessarily other objects).
(Slightly modified Evan Steinkerchnerv & Tomas Zato)
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const one = [1,2,"wow",[3,4]];
const two = [1,2,"wow",[3,4]];
zog(arraysEqual(one, two)); // true
one[3][1] = 5;
zog(arraysEqual(one, two)); // false
PARAMETERS
a, b - the arrays to check to see if they are equal
strict - (default true) set to false so order in arrays does not matter
RETURNS a Boolean
CLOSE ▲PAGE ▤CODE ▤
arrayMinMax
zim function
DESCRIPTION
Returns an object with {min, max} for min and max values of an array.
Or null for value if not a number.
(Thanks Lior Elrom from StackOverflow)
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
zog(arrayMinMax([1,22,2,10]).max); // 22
PARAMETERS
arr - a linear array with numbers
RETURNS an object with min and max properties
CLOSE ▲PAGE ▤CODE ▤
isEmpty
zim function
DESCRIPTION
returns whether an object literal is empty
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
isPick
zim function
DESCRIPTION
Returns whether an object is a SPECIAL Pick literal
of type [], {min:val, max:val}, {noPick:val} or function that returns a value
If any other object is passed to Pick, it just gets passed through
So in theory, all objects are in Pick literal format
but isPick() returns true if object operated on, not just passed through
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
zog(isPick(1)); // false
zog(isPick([1,2,3])); // true
zog(isPick({age:10})); // false
zog(isPick({min:10,max:20})); // true
zog(isPick({noPick:[1,2,3]})); // strange but true
zog(isPick(function(){})); // false
zog(isPick(function(){return 20;})); // true
const s = series(1,2,3);
zog(isPick(s)); // true
// important that the isPick() does not run the series to test if ZIM VEE
// so it checks the array property of series rather than checking for a function return value
zog(s()); // 1
PARAMETERS
obj - the string to test
RETURNS a Boolean as to whether obj is SPECIAL ZIM Pick literal
CLOSE ▲PAGE ▤CODE ▤
isJSON
zim function
DESCRIPTION
returns whether a string is a JSON string
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const s = '{"age":7,"name":"Dan Zen"}';
zog( isJSON(s) ); // true
const b = "hello";
zog( isJSON(b) ); // false
parseJSON
zim function
DESCRIPTION
receives a JSON string or a "close-to" JSON string and returns the parsed object
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const badJSON = `{
"inner":{
// comments can be added
prop:"note prop and prop2 are missing quotes",
// another comment
prop2:"note the comma on the end will be ok",
}
}`;
// zog(JSON.parse(badJSON)); // would cause error
zog(parseJSON(badJSON)); // will log a valid object
PARAMETERS
str - the JSON or "close-to" JSON string
this can be missing the "" around the property names
and can have comments between lines
and trailing commas will not cause a problem
RETURNS an object
CLOSE ▲PAGE ▤CODE ▤
decimals
zim function
DESCRIPTION
Rounds number to the number of decimal places specified by places.
Negative number places round to tens, hundreds, etc.
If addZeros is set to a number it adds 0 in empty spaces up to that many places after the decimal
If addZerosBefore is set to a number it adds 0 in empty spaces up to that many places before the decimal
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
PARAMETERS
num - the Number to operate on
places - (default 1) how many decimals to include (negative for left of decimal place)
addZeros - (default 0) set to number of places to fill in zeros after decimal (and return String)
addZerosBefore - (default 1) set to number of places to fill in zeros before decimal (and return String)
includeZero - (default true) set to false to always have zero just be 0 without any extra zeros
time - (default false) a swap of : for . to handle minutes and seconds (not hours)
take time in seconds and divide by 60 and pass that in for num
RETURNS a rounded Number or a String if addZeros, addZerosBefore or time is true
CLOSE ▲PAGE ▤CODE ▤
countDecimals
zim function
DESCRIPTION
Counts the number of decimals in a number
Provided by Matthew Layton, A. Wolff - Stack Overflow
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const num1 = countDecimals(1.234); // num1 is 3
const num2 = countDecimals(22); // num2 is 0
PARAMETERS
num - the Number for which to count decimals
RETURNS the number of decimal places
CLOSE ▲PAGE ▤CODE ▤
sign
zim function
DESCRIPTION
returns -1, 0 or 1 depending on whether the number is less than, equal to or greater than 0
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
constrain
zim function
DESCRIPTION
returns a number constrained to min and max
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const cirle.x = constrain(circle.x, circle.radius, W-circle.radius);
// circle.x will not be smaller than the radius or bigger than W-radius
const speed = constrain(speed, minSpeed, maxSpeed, true);
// will confine the speed between minSpeed and maxSpeed if speed is positive
// and confine the speed between -maxSpeed and -minSpeed if the speed is negative
PARAMETERS
num - the number to be constrained
min - (default 0) the minimum value of the return number
max - (default Number.MAX_VALUE) the maximum value of the return number
negative - (default false) allow the negative range of min and max when num is negative
RETURNS num if between min and max otherwise returns min if less or max if greater (inclusive)
RETURNS num between -max and -min if num is negative and negative parameter is set to true
CLOSE ▲PAGE ▤CODE ▤
dist
zim function
DESCRIPTION
Calculates the distance between two points.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// using point values for each
const p1 = new Point(100, 100); // or {x:100, y:100}
const p2 = new Point(200, 200);
zog(dist(p1, p2)); // 141.42...
EXAMPLE
// using x and y values for each
const distance = dist(W/2, H/2, F.mouseX, F.mouseY);
// distance of mouse from center of stage
PARAMETERS
a - first Point - any object with x and y values - eg. a zim Container or zim Point or {x:10, y:30}
or if four parameter values, an x value of the first point
b - second Point - any object with x and y values
or if four parameter values, a y value of the first point
c - (default null) an x value of a second point - if using x and y values
d - (default null) a y value of a second point - if using x and y values
RETURNS a positive Number that is the distance (could be on an angle)
CLOSE ▲PAGE ▤CODE ▤
rectIntersect
zim function
DESCRIPTION
Returns true if two rectangles are intersecting - this is a very fast but exact calculation
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// using point values for each
const r1 = {x:100, y:100, width:300, height:200}
const r2 = new Boundary(50,200,100,100);
zog(rectIntersect(r1, r2)); // true
PARAMETERS
a - first rectangle with x, y, width and height properties - such as a bounds or Boundary
make sure that these are in the same coordinate systems - use ZIM boundsToGlobal for instance
b - second rectangle with x, y, width and height properties
margin - (default 0) positive value adds margin (more likely to intersect) and negative subtracts (less likely to intersect)
RETURNS a Boolean as to whether rectangles are intersecting
CLOSE ▲PAGE ▤CODE ▤
boundsAroundPoints
zim function
DESCRIPTION
Returns a rectangle {x,y,width,height} around an array of points {x,y}
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const blob = new Blob();
const points = blob.interpolate();
zog(boundsAroundPoints(points)); // {x:-100, y:-100, width:200, height:200}
// could call this after resizing the blob to get the rough bounds of the blob (or squiggle)
// interpolate defaults to 1 so setting 5 would be even more precise, etc.
PARAMETERS
points - an array of points with x and y properties.
RETURNS an object with x, y, width and height properties
representing the rectangle around the points provided
CLOSE ▲PAGE ▤CODE ▤
angle
zim function
DESCRIPTION
Calculates the angle between two points
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const angle = angle(W/2, H/2, W/2+100, H/2+100); // 45
// angle from center of stage to 100, 100 to the right and down from the center of the stage
const angle2 = angle(W/2, H/2, W/2-100, H/2+100); // 135
const angle3 = angle(W/2, H/2, W/2+100, H/2-100); // 315
EXAMPLE
// make an orange orthographic pipe with a red end
const circle1 = new Circle(20,orange).center();
const circle2 = new Circle(20,red).loc(600,500);
new Rectangle(20,20,orange)
.reg(LEFT,CENTER)
.loc(circle1)
.bot()
.siz(dist(circle1, circle2), circle1.width)
.rot(angle(circle1, circle2));
PARAMETERS
a - first Point - any object with x and y values - eg. a zim Container or zim Point or {x:10, y:30}
or if four parameter values, an x value of the first point
b - second Point - any object with x and y values
or if four parameter values, a y value of the first point - see also **
c - (default null) an x value of a second point - if using x and y values
d - (default null) a y value of a second point - if using x and y values
** if there is only one point provided, then a first point of 0,0 is assumed
and the the point provided becomes the second point
RETURNS a positive Number that is the angle between first and second point
CLOSE ▲PAGE ▤CODE ▤
TAU, DEG, RAD, PHI
zim constants
DESCRIPTION
ZIM degrees and radian constants
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.
PHI is the golden ratio or Math.pow(5,.5)*.5+.5 or 1.6180339887…
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
Math.sin(TAU/4); // sin of 90 degrees (1)
// is same as
Math.sin(90*RAD);
// is same as
Math.sin(90*Math.PI/180);
// and
Math.asin(1)*DEG; // is 90
smoothStep
zim function
DESCRIPTION
smoothStep takes an input value and outputs a value between 0 and 1
that represents a transition between the min and max with easing at both ends.
If you want the easing to be more pronounced, then reduce difference between min and max.
If the value falls outside the min or max then it is set to the min or max.
Remember the return value is between 0 and 1 so you can multiply by max-min and add it to min
to get a value at the original scale.
Used to make blobs with Noise(): https://zimjs.com/noise/blobs.htmlNOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// here we use smoothStep to make a gradient between black and white
// not an even one right across but a gradient across a transition zone of 40-100
// create an empty Bitmap size 200, 200 and center it on the stage
const bmp = new Bitmap(null, 200, 200).center();
// we need to loop and get a value for each pixel
// normally we loop across the rows and then do each column
// but here we are making a horizontal gradient
// so we will loop across the x and get the desired value
// then when we loop across the y in the inner loop, we just use that same value
for (let x = 0; x < bmp.width; x++) {
// making gradient in x only so calculate smoothStep here
// x will be from 0 to the width of 200
// we pass in a min of 40 and a max of 100
// the result of smoothStep is between 0 and 1
// so from 0 to 40 the return of smoothStep will be 0
// and from 100 to 200 the return of smoothStep will be 1
// In between, the return value starts off close to 0, then speeds up
// and then slows down to 1 in a curve that is somewhat like the letter f
// When we multiply by 255 and apply that result to each color,
// we get black and then a range of greys and then white
const value = smoothStep(x, 40, 100)*255;
// now we loop down the column for the x position
for (let y = 0; y < bmp.height; y++) {
// imageData is four values per pixel
// the red, green, blue and alpha
// in one big long array - each value will be constrained to between 0 and 255
// this i value will increase by 4 each time
// then we write the same value for red, green, blue to get a shade of grey
let i = (x + y * bmp.width) * 4;
bmp.imageData.data[i] = value; // red (0-255)
bmp.imageData.data[i + 1] = value; // green (0-255)
bmp.imageData.data[i + 2] = value; // blue (0-255)
bmp.imageData.data[i + 3] = 255; // alpha (0-255)
}
}
bmp.drawImageData(); // draw the imageData to the Bitmap
PARAMETERS
num - the input value with respect to min and max
min - the lower edge for smoothStep (often termed edge0) - anything smaller will be set to min
max - the upper edge for smoothStep (often termed edge1) - anything bigger will be set to max
RETURNS a number between 0 and 1 that represents a transition factor
CLOSE ▲PAGE ▤CODE ▤
unicodeToUTF
zim function
DESCRIPTION
unicodeToUTF() converts unicode to UTF format.
This is used internally by ZIM Emoji and EmojiPicker.
Unicode can be pasted into text but can cause problems in scripts
when writing to databases - like ZIM Zap and ZIM Kids Slate.
There is a converter here: https://zimjs.com/emoji
if the MORE button is pressed. This is the code that handles that conversion.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
zog(unicodeToUTF("Paste unicode Slightly Smiling Face U+1F642 here")); // \ud83d\ude42
PARAMETERS
val - the unicode emoji/character (not the unicode)
RETURNS a UTF string matching the unicode
CLOSE ▲PAGE ▤CODE ▤
capitalizeFirst
zim function
DESCRIPTION
Capitalize the first letter of a String.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
let name = "roger";
name = capitalizeFirst(name); // remember to assign back to string
zog(name); // Roger
PARAMETERS
string - the string to capitalize the first letter
RETURNS the string with the first letter capitalized
CLOSE ▲PAGE ▤CODE ▤
Ajax
zim class
DESCRIPTION
An AJAX class to send data back and forth to a server without reloading the page
NOTE
also see ZIM async() to send data back and forth as JSONp
using async can avoid various security issues with cross domain access
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// GET - note: GET is limited to approximately 2048 characters
const ajax = new Ajax();
new Button().center().tap(()=>{
ajax.get("https://yourserver/ajax.php?record=pressed");
});
<?php
$record = isset($_GET["record"]) ? $_GET["record"] : "";
// $record would now hold the string "pressed"
?>
EXAMPLE
// GET with user input and server response
const query = new TextArea(300,90).center();
new Button({label:"SUBMIT", corner:5}).sca(.7).pos(0,100,CENTER,CENTER)
.tap(()=>{
new Ajax().get("https://yourserver/ajax.php?query="+encodeURI(query.text), callback);
});
function callback(data) {
query.text = "Date: " + data.date + "\nAnswer: " + data.answer;
}
<?php
$query = isset($_GET["query"]) ? $_GET["query"] : "";
// probably get info from database
$array = [];
$array["date"] = "March 10, 2020";
$array["answer"] = "yes, of course!";
echo json_decode($array);
?>
EXAMPLE
// POST - virtually unlimited size
const ajax = new Ajax();
new Button().center().tap(()=>{
var data = {name:"Dr Abstract", occupatio:"creator"};
// data will automatically have JSON.stringify() applied
var id = "AB234";
ajax.post("https://yourserver/ajax.php", data, "add", id, callback);
});
function callback(data) {
zog(data.name); // "Dr Abstract"
}
<?php
// ZIM Ajax POST the data is received as a data property:
$data = isset($_POST["data"]) ? $_POST["data"] : "";
// a command can be sent for add, select, update, delete, etc.
$command = isset($_POST["command"]) ? $_POST["command"] : "";
// extra information can be collected such as an id, etc.
$extra = isset($_POST["extra"]) ? $_POST["extra"] : "";
// add $data to database as JSON string for the id in the $extra
if ($command == "add") {}
// The data can be decoded too
$array = json_decode($data, true);
// here we "round-trip" to show it can be done
// send back encoded info from Database
echo json_encode($array);
?>
EXAMPLE
// put - sends data in body of content
// same as POST but no command and receive in PHP as follows:
<?php
// ZIM Ajax put receive as follows:
$array = json_decode(file_get_contents('php://input'), true);
?>
PARAMETERS
master - data to be sent with every get() or post() (not put())
this can be collected in php, for example, as $GET_["master"] or $POST_["master"]
couple - (default false) - set to true to turn nested JSON into a single layer
** for POST only - use ZIM couple() and decouple() manually with GET and PUT
see ZIM couple() and decouple() for more information
data for POST will be coupled when sent and uncoupled when received
lock - (defualt null) send an optional lock id - would need to be processed on the server
unique - (defualt null) send an optional unique=true - would need to be processed on the server
METHODS
get(url, callback) - send and receive based on GET (approximate limit 2048 characters)
the url will have parameters in cgi format to send information
for example: "server.php?name="+encodeURI("Dr Abstract")+"&occupation=creator";
in PHP access these with $_GET["name"], $_GET["occupation"], etc.
callback is the function to call and will receive (data, error) as parameters
the data will automatically have JSON.parse() applied if in JSON format
post(url, data, command, extra, callback) - send and receive based on POST
** accepts the ZIM DUO technique of regular parameters or a configuration object with properties matching parameters
url is the url to a server script such as php or node
the url will not need parameters but rather use the data, command and extra
data will automatically have JSON.stringify() applied
in PHP access this with $data = $_POST["data"];
often, we might store this directly as JSON in the database
but it can be split up and put in fields as follows
$assoc = json_decode($data, true); // true for assoc array if desired
command is what to do with the data and will be encodeURI sent as variable command
so for instance receive $command = $_POST["command"];
this could have a value of "select", "add", "update", "delete", etc.
extra is any extra filter information and will be encodeURI sent as variable extra
so for instance receive $extra = $_POST["extra"];
this could be an id or a search term
callback is the function to call and will receive (data, error) as parameters
the data will automatically have JSON.parse() applied if in JSON format
put(url, data, call) - send and receive based on PUT
put sends data in the body of the file
the url will not have parameters but rather use the data
the data will automatically have JSON.stringify() applied
in PHP access this with: $array = json_decode(file_get_contents('php://input'), true);
call is the function to call and will receive (data, error) as parameters
the data will automatically have JSON.parse() applied if in JSON format
PROPERTIES
master - get or set the master data being sent with each get() or post() (not put())
couple - get or set whether the POST data is coupled when sent and uncoupled when received (not get() and put())
lock - get or set the lock data being sent with each get() or post() (not put())
CLOSE ▲PAGE ▤CODE ▤
Noise
zim class
DESCRIPTION
Noise creates OpenSimplex Noise: https://en.wikipedia.org/wiki/OpenSimplex_noise
Converted from https://www.npmjs.com/package/open-simplex-noise
See examples at https://zimjs.com/noise/
In general, this is special noise where the pixels relate to one another in a complex way.
This connection, lets us do things like create terrains or blobs, etc. that look organic.
There is 1D, 2D, 3D, and 4D noise where we pass in one value, two values, three values and four values.
We always get back a number between -1 and 1 and this result relates to the results around it.
1D - we can plot 1D by drawing line segments across the stage (x) and setting the y value to the result of simplex1D(x)
This makes a 2D mountain-like terrain across the stage
2D - if we keep the plot from the 1D but use 2D and change the second parameter, we can animate the line.
We just need to adjust the second parameter by a very small amount each time such as .005.
Or we can plot put the return value of simplex2D onto its x,y matching location in a Bitmap
mapping it to a greyscale to make a traditional noise pattern.
We can adjust the "size" of the noise by dividing the x and y values (frequency).
If we use the ZIM smoothStep() function we can smoothen these to make blobs.
We can also use the return value as height for 3D terrain.
3D - if we keep the traditional noise/blob pattern from the 2D but use simplex3D and animate the third parameter,
we can animate the 2D noise in time which looks great when we animate blobs!
This plotting is thousands of computations and will bog the computer if too big.
4D - will allow us to animate 3D values, etc.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// 1D Noise to make a jagged line across the stage
const noise = new Noise();
const shape = new Shape(W, H)
.addTo().s("black").ss(2).mt(0, H/2);
loop(W/50, i=>{
shape.lt((i+1)*50, H/2 + noise.simplex1D(i)*200);
});
// the above can be animated by using simplex2D and animating the second number by small amounts
EXAMPLE
// 2D noise
// create a Noise object:
const noise = new Noise();
// create an empty Bitmap size 200, 200 into which to draw the noise
const bmp = new Bitmap(null, 200, 200).center();
// we fill the bitmap starting from top left going across in the inner loop,
// then down, then across, etc. until we get to bottom right.
for (let y = 0; y < bmp.height; y++) {
for (let x = 0; x < bmp.width; x++) {
// the noise methods return a number from -1 to 1
// by adding 1 we get a number between 0 and 2 and we divide by 2 to get 0-1
// and we multiply this by 255 to get a number between 0 and 255
let value = (noise.simplex2D(x,y)+1)/2 * 255;
// imageData is one big array with four values per pixel
// the red, green, blue and alpha
// each value will constrained to between 0 and 255
// the i value is how many on the current row plus the columns from the previous rows
// and we set it to increase by 4 each time giving us a place for each color and alpha
// We write the same value for red, green, blue to get a shade of grey
let i = (x + y * bmp.width) * 4;
bmp.imageData.data[i] = value; // red (0-255)
bmp.imageData.data[i + 1] = value; // green (0-255)
bmp.imageData.data[i + 2] = value; // blue (0-255)
bmp.imageData.data[i + 3] = 255; // alpha (0-255)
}
}
bmp.drawImageData(); // this draws the imageData to the Bitmap
// Here is the same example to get blobs using smoothStep:
const f = 25; // try changing this number around
for (let y = 0; y < bmp.height; y++) {
for (let x = 0; x < bmp.width; x++) {
let value = (noise.simplex2D(x/f, y/f)+1)/2; // 0-1
// smoothStep sets less than .3 to 0 and greater than .35 to 1
// and transitions between using an easing formula in the shape of an f
value = smoothStep(value, .3, .35) * 255;
let i = (x + y * bmp.width) * 4;
bmp.imageData.data[i] = value; // red (0-255)
bmp.imageData.data[i + 1] = value; // green (0-255)
bmp.imageData.data[i + 2] = value; // blue (0-255)
bmp.imageData.data[i + 3] = 255; // alpha (0-255)
}
}
bmp.drawImageData();
PARAMETERS
seed - (default Math.random()*1000000) keeping the same seed can remake a pattern the same
METHODS
simplex1D(x) - returns a noise value between -1 and 1
In each method, the noise value relates to its neighbor rather than a completely random value
simplex2D(x,y) - returns a noise value between -1 and 1
simplex3D(x,y,z) - returns a noise value between -1 and 1
simplex4D(x,y,z,w) - returns a noise value between -1 and 1
PROPERTIES
seed - read only - the seed that was used for the Noise object
CLOSE ▲PAGE ▤CODE ▤
Point
zim class extends a createjs.Point
DESCRIPTION
Stores x, y, z, q, r, s, t, u, v, w properties.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const point = new Point(100, 100);
zog(point.x, point.y); // 100, 100
PARAMETERS
x - (default 0) the x value of the point
y - (default 0) the y value of the point
z - (default 0) the z value of the point - probably not used
q - (default 0) the q value of the point - very probably not used
r - (default 0) the r value of the point - very probably not used
s - (default 0) the s value of the point - very probably not used
t - (default 0) the t value of the point - very probably not used
u - (default 0) the u value of the point - very probably not used
v - (default 0) the v value of the point - very probably not used
w - (default 0) the w value of the point - very probably not used
METHODS - thanks nycjoseph
** only when using the ZIM version of CreateJS
subtract(point) - subtracts the provided point from original point
returns the resulting point
add(point) - adds the provided point to original point
returns the resulting point
angle(point) - gets an angle to the provided point
returns the angle in degrees
length() - gets the length from 0,0 to the point
returns the length from 0,0 to the point
distance(point) - gets the distance to the provided point
returns the resulting distance
project(angle, length) gets a point at an angle (degrees) and distance
returns the resulting point
interpolate(point, number) gets a point at a ratio to the provided point
returns the resulting point
average(point) - gets a point half way to the provided point
returns the resulting point
** these have been added to ZIM's CreateJS but in Radians
also see CreateJS docs for setValues, copy and clone
PROPERTIES
x - the x value of the point
y - the y value of the point
z - the z value of the point - probably not used
q - the q value of the point - very probably not used
r - the r value of the point - very probably not used
s - the s value of the point - very probably not used
t - the t value of the point - very probably not used
u - the u value of the point - very probably not used
v - the v value of the point - very probably not used
w - the w value of the point - very probably not used
CLOSE ▲PAGE ▤CODE ▤
Bezier
zim class
DESCRIPTION
Creates data for a Cubic Bezier to give x and y at a ratio of the curve
Also gives mx and my for a modified x and y that is more evenly spaced
Thanks Ivo Wetzel - StackExchange
Used internally by zim.getCurvePoint() used by Squiggle, Blob, Beads, and animate() in path
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const a = {x:100, y:100}; // start point
const b = {x:400, y:100}; // control point for start point
const c = {x:100, y:300}; // control point for end point
const d = {x:300, y:300}; // end point
const bezier = new Bezier(a,b,c,d);
new Shape().s(black).mt(a.x,a.y).bt(b.x,b.y, c.x,c.y, d.x,d.y).addTo();
loop(10, i=>{
// original spacing
// new Circle(5).loc(bezier.x(i/10), bezier.y(i/10));
// modified spacing to be more even
new Circle(5).loc(bezier.mx(i/10), bezier.my(i/10));
});
PARAMETERS
// all parameters are points with x and y properties {x:val, y:val}
a - start point of Bezier curve
b - control point for the start point
c - control point for the end point
d - end point
METHODS
x(r) - the x position of a point at ratio r (0-1) on the curve
y(r) - the y position of a point at ratio r (0-1) on the curve
mx(r) - the evenly-spaced x position of a point at ratio r (0-1) on the curve
my(r) - the evenly-spaced y position of a point at ratio r (0-1) on the curve
PROPERTIES
a, b, c, d - the points passed in - each having x and y properties
CLOSE ▲PAGE ▤CODE ▤
Boundary
zim class
DESCRIPTION
Stores the data for a rectangle with x, y, width and height.
Can be used with ZIM drag(), gesture() for boundaries
and the Physics module for world boundary.
NOTE
A createjs.Rectangle or an object {} with x, y, width and height properties can also be used
Boundary was introduced to reduce confusion over having a ZIM Rectangle (Shape) and a CreateJS Rectangle (data)
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
new Circle(100, blue)
.center()
.drag(new Boundary(0,0,W,H));
// note: drag and gesture used to have rect parameters
// these have now been depreciated and replaced with boundary parameters
// CONTRACT
// the drag() boundary contains the registration point
// note: the gesture() boundary contains the whole shape of the object
// here, we keep the circle inside the stage by contracting the Boundary by the radius
var radius = 100;
new Circle(radius, red)
.center()
.drag(new Boundary(0,0,W,H).contract(radius));
PARAMETERS
x|bounds - the x position of the Boundary
or pass in an object with {x,y,width,height} - such as obj.getBounds()
this allows manipulation with contract if desired
at which point, the other parameters are ignored
y - the y position of the Boundary
width - the width of the Boundary
height - the height of the Boundary
PROPERTIES
x - the x position of the Boundary
y - the y position of the Boundary
width - the width of the Boundary
height - the height of the Boundary
METHODS
contract(number|x, y, width, height) - number of pixels to make the Boundary smaller
passing in a single number will contract this on all sides
passing in two numbers will contract from horizontal and vertical accordingly
passing in four numbers will contract from the sides accordingly (left, top, right, bottom)
note: to expand pass in a negative number
returns object for chaining
CLOSE ▲PAGE ▤CODE ▤
GradientColor
zim class
DESCRIPTION
Creates data for a Linear Gradient that can be used to color ZIM Shapes
like Circle, Rectangle, Triangle, Squiggle, Blob, Flare
and therefore all ZIM component background colors, etc.
Also see ZIM RadialColor and BitmapColor classes
NOTE
the base ZIM Shape class will need gradients applied as usual
NOTE
The chainable methods for linearGradient() and radialGradient() are depricated
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// linear gradient from pink to purple across whole gradient
// with the start at 0,0 and end at 0,500 - so from top to bottom
new Rectangle(1000, 500, new GradientColor([pink,purple], [0,1], 0,0, 0,500)).addTo();
// alternatively, a short version is provided
// this makes the gradient across the object at 90 degrees - so pointing down as 0 points to the right
new Rectangle(1000, 500, new GradientColor([pink,purple],90)).addTo();
EXAMPLE
// linear gradient with 30% pink transitioning to green at half way then to 30% pure pink
// along a horizontal path from 0 to 1000 in width
// could also go diagonal for instance 0,0,1000,500
new Rectangle(1000, 500, new GradientColor([pink,green,purple], [.3,.5,.7], 0,0, 1000,0)).addTo();
// alternatively, a short version is provided
// this makes the gradient across the object at the default 0 degrees - so pointing right
// so the angle can be provided instead of the the ratios as in the previous example
// or the angle can be provided after the ratios to replace the x and y values
new Rectangle(1000, 500, new GradientColor([pink,green,purple], [.3,.5,.7], 0).addTo();
// or better yet as the default angle is 0:
new Rectangle(1000, 500, new GradientColor([pink,green,purple], [.3,.5,.7]).addTo();
PARAMETERS
colors - an Array of colors for the gradient, can be more than two
ratios|angle - an Array of 0-1 numbers reprenting the start position of transitions for the colors above
or an angle with 0 (default) goes from left to the right
20 would angle down slightly from left to right
-20 would angle up slightly from left to right
90 would point straight down
180 would go from right to left
270 or -90 would go from the bottom to the top
if an angle is provided then x0,x1,y0,y1 is ignored
and the size of the object's bounds is used to scale the gradient
if no value or an angle is provided the ratios will be divided evenly across the colors
x0|angle - the x position to start the gradient
if no further parameter values are provided then this will be the angle
see the ratios|angle parameter for information on angle
y0 - the y position to start the gradient
x1 - the x position to end the gradient
y1 - the y position to end the gradient
PROPERTIES
type - the type of color as a String
** the above parameters are all available as properties
** but will not change objects with their color already set
CLOSE ▲PAGE ▤CODE ▤
RadialColor
zim class
DESCRIPTION
Creates data for a Radial Gradient that can be used to color ZIM Shapes
like Circle, Rectangle, Triangle, Squiggle, Blob, Flare
and therefore all ZIM component background colors, etc.
Also see ZIM GradientColor and BitmapColor classes
NOTE
the base ZIM Shape class will need gradients applied as usual
NOTE
The chainable methods for linearGradient() and radialGradient() are depricated
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// radial gradient from pink in center to purple at edge
// with the start at 0,0,0 and end at 0,0,200 - so from radius to center
new Circle(200, new RadialColor([pink,purple], [0,1], 0,0,0, 0,0,200)).center();
// or a shortened version is provided:
new Circle(200, new RadialColor([pink,purple])).center();
// this shortened version also works
new Circle(200, new RadialColor([pink,green,purple], [0,.2,1])).center();
// this shortened version will apply the gradient out to the corners of the rectangle
new Rectangle(200, 400, new RadialColor([pink,purple])).center();
EXAMPLE
// radial gradient from dark to light with alpha reduced
// start fading the light right away to 30% the gradient then use the dark
// move the center of the dark right and up and bigger than radius
// move the center of the light right and up and at 0
// this makes a moon with the dark shade at the bottom left
new Circle(100, new RadialColor(
["rgba(0,0,0,.2)","rgba(255,255,255,.2)"],[0,.3], 50,-30,120, 40,-40,0)
).center()
PARAMETERS
colors - an Array of colors for the gradient, can be more than two
ratios - an Array of 0-1 numbers reprenting the start position of transitions for the colors above
if not provided, the ratio will be divided evenly across the provided colors
** the below parameters are optional and will be the center to the edge of the object if not provided
x0 - the x position to start the gradient
y0 - the y position to start the gradient
r0 - the radius at the start of the gradient
x1 - the x position to end the gradient
y1 - the y position to end the gradient
r1 - the radius at the end of the gradient
PROPERTIES
type - the type of color as a String
** the above parameters are all available as properties
** but will not change objects with their color already set
CLOSE ▲PAGE ▤CODE ▤
BitmapColor
zim class
DESCRIPTION
Creates data for a Bitmap fill from a loaded asset
that can be used to color ZIM Shapes
like Circle, Rectangle, Triangle, Squiggle, Blob, Flare
and therefore all ZIM component background colors, etc.
Also see ZIM GradientColor and RadialColor classes
See: https://youtu.be/xgXVRSVVJTw?t=861NOTE
the base ZIM Shape class will need a bitmap fill applied as usual
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const assets = "flecks.jpg";
const path = "https://zimjs.org/assets/";
new Frame(scaling, width, height, color, outerColor, ready, assets, path);
function ready() {
new Rectangle(W, H, new BitmapColor("flecks.jpg")).addTo();
// or use new Pic("flecks.jpg") instead of string "flecks.jpg" - but ZIM will figure it out
}
PARAMETERS
image - a ZIM Bitmap() such as available with Pic() or asset()
when asset is loaded with ZIM Frame or F.loadAssets()
also accepts the string name of an asset that would go in the new Pic() or asset()
may accept url to html image but image needs to be loaded first
so would recommend usual ZIM asset loading
repetition - (default "repeat") the repeat of the Bitmap fill
also "repeat-x", "repeat-y" or "no-repeat"
matrix - a transformation matrix to apply to the Bitmap
PROPERTIES
type - the type of color as a String
** the above parameters are all available as properties
** but will not change objects with their color already set
CLOSE ▲PAGE ▤CODE ▤
Damp
zim class
DESCRIPTION
Damping emulates things slowing down due to friction.
The movement heads towards the right value and looks organic.
This is similar if not the same as easing out when tweening.
Create your Damp object outside an interval or Ticker
then inside an interval or ticker call the convert method.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const d = new Damp(parameters);
setInterval(()=>{
dampedValue = d.convert(desiredValue);
}, 100);
you would then apply that desired value to a property such as x or y or scale
if you want to do both x and y then you need two Damp objects
and two convert calls (you can do both in one interval or ticker)
EXAMPLE
const circle = new Circle();
circle.center();
const dampX = new Damp(circle.x);
const dampY = new Damp(circle.y);
// start moving once mouse enters stage
// this event will only run once (the last parameter is true)
S.on("stagemousemove", start, null, true);
function start() {
Ticker.add(()=>{
circle.x = dampX.convert(F.mouseX);
circle.y = dampY.convert(F.mouseY);
});
}
PARAMETERS supports DUO - parameters or single object with properties below
startValue - (default 0) start object at this value and then start damping
damp - (default .1) the damp value with 1 being no damping and 0 being no movement
METHODS
convert(value) - converts a value into a damped value
immediate(value) - immediately goes to value and returns the Damp object
PROPERTIES
damp - can dynamically change the damping (usually just pass it in as a parameter to start)
lastValue - setting this would go immediately to this value (would not normally use)
CLOSE ▲PAGE ▤CODE ▤BITS VIDS
Proportion
zim class
DESCRIPTION
Proportion converts an input value to an output value on a different scale.
(sometimes called a map() function)
For instance, like a slider controlling the scale of an object or sound volume.
Make a Proportion object and then in an interval, ticker or event,
convert the base value to the target value using the convert method.
SEE: https://zimjs.com/test8/clamp.htmlNOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
F.loadAssets("mySound.mp3");
F.on("complete", ()=>{
// must have also interacted with app before playing sound
const sound = new Aud("mySound.mp3").play();
const p = new Proportion(0, 10, 0, 1);
const dial = new Dial(); // default range of 0 to 10
dial.value = 10;
dial.on("change", ()=>{
sound.volume = p.convert(dial.value);
}); // end of dial change
}); // end sound loaded
PARAMETERS supports DUO - parameters or single object with properties below
baseMin - min for the input scale (say x value)
baseMax - max for the input scale (say x value)
targetMin - (default 0) min for the output scale (say volume)
targetMax - (default 1) max for the output scale (say volume)
factor - (default 1) is going the same direction and -1 is going in opposite direction
targetRound - (default false) set to true to round the converted number
clamp - (default true) set to false to let results go outside min and max range
also see clampMin and clampMax to adjust ends individually
clampMin - (default clamp) set to true or false to let results go outside min range
clampMax - (default clamp) set to true or false to let results go outside max range
METHODS
convert(input) - will return the output property (for instance, a volume)
NOTE
the object always starts by assuming baseMin as baseValue
just call the convert method right away if you want it to start at a different baseValue
for instance, if your slider went from 100 to 500 and you want to start at half way
make the object and call p.convert(300); on the next line
CLOSE ▲PAGE ▤CODE ▤BITS
ProportionDamp
zim class
DESCRIPTION
ProportionDamp converts an input value to an output value on a different scale with damping.
Works like Proportion Class but with a damping parameter.
Damping needs constant calculating so do not put in mousemove event.
The below example scales the circle based on the mouse height.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const circle = new Circle(50, red);
circle.center(); // center method added in ZIM 4TH
const pd = new ProportionDamp(0, H, 0, 5, .2);
Ticker.add(()=>{
circle.sca(pd.convert(S.mouseV)); // scale method added in ZIM 4TH
}, stage);
PARAMETERS supports DUO - parameters or single object with properties below
baseMin - min for the input scale (say x value)
baseMax - max for the input scale (say x value)
targetMin - (default 0) min for the output scale (say volume)
targetMax - (default 1) max for the output scale (say volume)
damp - (default .1) the damp value with 1 being no damping and 0 being no movement
factor - (default 1) is going the same direction and -1 is going in opposite direction
targetRound - (default false) set to true to round the converted number
clamp - (default true) set to false to let results go outside min and max range
also see clampMin and clampMax to adjust ends individually
clampMin - (default clamp) set to true or false to let results go outside min range
clampMax - (default clamp) set to true or false to let results go outside max range
METHODS
convert(input) - converts a base value to a target value
immediate(input) - immediately uses the input to set the target value (no damping) and returns the ProportionDamp object
immediateValue(input) - immediately sets the target value (no damping) and returns the ProportionDamp object
dispose() - clears interval
PROPERTIES
damp - can adjust this dynamically (usually just pass it in as a parameter to start)
NOTE
the object always starts by assuming baseMin as baseValue
if you want to start or go to an immediate value without easing then
call the pd.immediate(baseValue) method with your desired baseValue (not targetValue)
CLOSE ▲PAGE ▤CODE ▤BITS
Dictionary
zim class
DESCRIPTION
An object that uses objects as keys to give values.
Similar to an object literal with properties except the property names are objects instead of strings.
JavaScript currently does not have a dictionary, but other languages do.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const o = {test:"test"};
const f = function(w) {zog(w)};
const c = new Circle();
const d = new Dictionary();
d.add(o, 1); d.add(f, 2); d.add(c, f);
zog(d.at(o)); // 1
zog(d.at(f)); // 2
d.at(c)("hello"); // hello
d.remove(o); // to clear o
zog(d.length); // 2
EXAMPLE
const d = new Dictionary();
d.add(circle, "one");
d.add(circle, "two");
zog(d.at(circle)); // two - just the latest but "one" is still there
for (let i=0; i<d.length; i++) {
if (d.objects[i] == circle) zog(d.values[i]); // one then two
}
// note, loop backwards to clear values at a key
EXAMPLE
// with unique property add(key, val) removes the last val at that key
const d = new Dictionary(true);
d.add(circle, "one");
d.add(circle, "two");
zog(d.at(circle)); // two - and now only two is there
for (let i=0; i<d.length; i++) {
if (d.objects[i] == circle) zog(d.values[i]); // two
}
// note, now d.remove(key) removes that unique entry for the key
PARAMETERS
unique (default false) - set to true to only accept a single entry (the last added) for a key
METHODS
add(object, value) - adds a value that can be retrieved by an object reference
if unique is false, this will not overwrite previous entries at the object key
if unique is true, this will overwrite previous entries at the object key
value is optional and will default to true
at(object) - retrieves the last value stored at the object (or returns null if not there)
remove(object) - removes the last value at the object from the Dictionary returns boolean success
clear() - removes all objects from Dictionary - returns object for chaining
dispose() - deletes Dictionary object
PROPERTIES
type - the type of the object as a string
length - the number of items in the Dictionary
unique - whether the dictionary will overwrite values (going from false to true will not delete previous values)
objects - array of keys
values - array of values synched to keys
CLOSE ▲PAGE ▤CODE ▤
Hierarchy
zim class
DESCRIPTION
A hierarchy is a nested structure for organized data (like XML).
For instance, Hierarchy manages the accordion feature of ZIM List()
where the list can be expanded and collapsed to show nested sections.
HOW IT WORKS
There are two formats that can be used as input.
Each will create a data property in final hierarchy format.
A. The SIMPLE input is an easier format to write but
has a limitation in that identifiers must be strings.
The Hierarchy replaces the identifiers with sequential ids
and stores the original identifiers as an obj property.
B. The COMPLEX input starts off like the final hierarchy data
which has the advantage of storing any type of object in the hierarchy.
The disadvantage is the ids must be hand coded and it is longer.
The Hierarchy will add level, open and opened properties
and create the data property in final hierarchy format.
STRATEGY
The complex format is tricky.
One way to deal with it is to pass in a SIMPLE string version.
Then replace the strings with final objects in the data property.
The Hierarchy class is used internally by ZIM so may not be needed.
However, it will help for custom tree menus, mindmaps, etc.
As of ZIM 014 Hiearchy data can be edited
using insertBefore(), insertAfter(), replaceItem() and removeItem()
If used for a List, then the List can be recreated with the new data
See: https://zimjs.com/014/hierachy.htmlNOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE - SIMPLE INPUT
let simple;
// 1. Here is linear input as an array - a boring tree - more like grass!
simple = [1,2,3,4]; // so we would probably not use Hierarchy for this.
// 2. To hold nested data we use an object literal.
// The properties can hold linear arrays as values
// but if any of the values need to hold more values then use an object literal:
simple = {
"linear":[1,2,3,4], // an array is okay as all items are leaf nodes (end nodes)
"nested":{ // an object literal is required as one or more items hold other items
"A":[], // this holds nothing (a leaf node) but still needs an empty array
"B":["one", "two", "three"], // this holds a linear list - all leaf nodes
"C":{ // this holds another nested list where at least one item holds more
"LEAF":[],
"LINEAR":[1,2,3,4],
"LEAF":[]
}
}
}
// If EXTRA info is desired this can be handled like so:
// Set the values as a list property of an object and add any extra properties desired
// The extra property does not have to be called extra and there can be multiple extra properties
// Avoid calling the properties list, obj, level, open or opened.
// The extra properties will be added to the complex data objects (see below)
simple = {
"linear":{list:[1,2,3,4], extra:"val"},
"nested":{list:{ // an object literal is required as one or more items hold other items
"A":[], // this holds nothing (a leaf node) but still needs an empty array
"B":["one", "two", "three"], // this holds a linear list - all leaf nodes
"C":{ // this holds another nested list where at least one item holds more
"LEAF":[],
"LINEAR":[1,2,3,4],
"LEAF":[]
}
}, extra:"val"}
}
// pass the object into the input parameter:
const hierarchy = new Hierarchy(simple);
const data = hierarchy.data;
// data will be the following - note it is a more complex format
// but also a form that could hold any type of data as a value
// note the level matches the indent and all values have an id
data = {
id0:{obj:"linear", level:0, open:false, opened:false, list:{
id1:{obj:1, level:1},
id2:{obj:2, level:1},
id3:{obj:3, level:1},
id4:{obj:4, level:1}
}, extra:"val"},
id5:{obj:"nested", level:0, open:false, opened:false, list:{
id6:{obj:"A", level:1},
id7:{obj:"B", level:1, open:false, opened:false, list:{
id8:{obj:"one", level:2},
id9:{obj:"two", level:2},
id10:{obj:"three", level:2}
}},
id11:{obj:"C", level:1, open:false, opened:false, list:{
id12:{obj:"LEAF", level:2},
id13:{obj:"LINEAR", level:2, open:false, opened:false, list:{
id14:{obj:1, level:3},
id15:{obj:2, level:3},
id16:{obj:3, level:3},
id17:{obj:4, level:3}
}},
id18:{obj:"LEAF", level:2}
}}
}, extra:"val"}
}
EXAMPLE - COMPLEX INPUT
// Here is a sample of passing in the more complex format.
// level, open, opened properties are not required
// they will be added by the Hierarchy.
// Note that there are no arrays in this data format so that each item has an id.
// This could be passed in to the data property of List
// to show an expandable hierarchy of objects rather than strings converted to buttons
const complex = {
id0:{obj:new Rectangle(), list:{
id1:{obj:new Triangle()},
id2:{obj:new Triangle()},
id3:{obj:new Triangle()}
}},
id4:{obj:new Circle(), list:{
id5:{obj:new Button()},
id6:{obj:new Button(), list:{
id7:{obj:new CheckBox()},
id8:{obj:new CheckBox()},
}},
id9:{obj:new Button(), list:{
id10:{obj:new Label("Leaf")},
id11:{obj:new Label("Nest"), list:{
id12:{obj:1},
id13:{obj:2},
id14:{obj:3},
id15:{obj:4},
}},
id16:{obj:new Label("Leaf")}
}}
}}
};
const hierarchy = new Hierarchy(complex);
const list = new List({list:hierarchy.data, align:CENTER}).center();
PARAMETERS
input (default null) - a simple formated input - see the examples
this will be turned in to a more complex object literal available as the data property
OR input a complex formated input - similar to the data property output
but only ids, obj and list properties are required.
The main purpose of Hierarchy is to create the complex data object
but passing in a complex format allows objects other than strings to be used.
METHODS
processSimple(input) - enter simple input - returns a Hierarchy data object literal
this is what the Hierarchy does when a simple input is provided to make its data property
the input must be in the simple format as described in the SIMPLE example.
processComplex(input) - enter complex input - returns a Hierarchy data object literal
this is what the Hierarchy does when complex data is provided to make its data property
processComplex will add level, open, and opened properties to the data
otherwise data must be in the same format as the final data property - see COMPLEX example
getLinearList(list) - enter final list from the data format, to get a linear list of top level objects
and all open list objects within according to the open property
getLinearIds(list) - enter final list from the data format, to get a linear list of top level ids
and all open lists ids within according to the open property
getData(id) - find the final data format for a given Hierarchy ID - eg. id0, id12, etc.
pass the data.list to the getLinearList() and getLinearIDs() methods
getNextSibling(id) - gets the id of the next sibling - skipping ids of any children
will find parents next sibling if last child in parent
or undefined if last child in hierarchy
getPrevSibling(id) - gets the id of the previous sibling - skipping ids of any children
will find the parent if first child in parent
or undefined if first child in hierarchy
getParent(id) - gets the parent object of the item at the id or null if no parent
insertBefore(items, id, innerItems) - insert item or an array of items before an id with optional children
this will insert at the same level as the id - also see insertAfter()
can pass in an array for items such as ["TEST", "TEST2"]
can pass in a third parameter for children of a single item
The third parameter can also be an array but if there is a third parameter
and if the first parameter is a list then it only uses the first item in the list
as the parent for the third parameter.
insertAfter(items, id, innerItems) - insert item or an array of items after an id with optional children
this will insert at the same level as the id - also see insertBefore()
can pass in an array for items such as ["TEST", "TEST2"]
can pass in a third parameter for children of a single item
The third parameter can also be an array but if there is a third parameter
and if the first parameter is a list then it only uses the first item in the list
as the parent for the third parameter.
replaceItem(item, id) - replace the current item at the id with the provided item
removeItem(id) - remove the item at the id
PROPERTIES
data - a hierarchy formated object literal with ids that hold object literals
ids are in the format of id0, id1, id2, etc. numbered in order of creation (top to bottom)
the object literals have obj, level, open, opened and list properties
leaf nodes (end nodes) will have {} as its list property value
length - read only total length of all nodes
CLOSE ▲PAGE ▤CODE ▤
Pick
zim class
HISTORY
Pick was originally zik() and ZIM VEE (introduced in ZIM 5) throughout the ZIM documentation
It was so handy that a general (non ZIM centric) name has been given to a class
that can be used by other libraries and languages.
See https://github.com/danzen/Pick for the complete general code and description
DESCRIPTION
Pick() provides a system to handle dynamic parameters.
It does so by providing formats for options and a choose() method to pick from the options.
For example, a particle emitter has an obj parameter to receive what type of particle to emit.
If a particle were randomly chosen from a rectangle, circle or triangle and passed into obj
then the emitter would only emit the randomly chosen particle - say, a bunch of triangles.
What is desired is that the emitter emit rectangles, circles and triangles randomly.
Pick() provides a way to pass in all three shapes and have the emitter choose each time it emits.
FORMATS
The Pick() formats handle:
1. a random selection: [blue, green, yellow] - array format
2. a random range: {min:10, max:30} - range object format (plus integer and negative)
3. a series: series(10,20,30) - series format also Pick.series()
4. a function result: function(){return new Date().minutes} - function format
5. a normal value: 7 or "hello" - single-value format
6. a noPick object: {noPick:["real", "array"]} - escape format
7. a combination: [{min:10, max:20}, 30, 40] - combination format (recursive)
NOTE
the range format gets passed to ZIM rand() directly so see docs there
there are also integer and negative parameters both defaulting to false
PICK LITERAL
Formats are passed in to a Pick() object and the Pick object can be passed to a class or function parameter
In ZIM, the formats may be passed directly into the class or function parameter (as a Pick literal)
new Circle(new Pick([10,20]), red); // Pick()
new Circle([10,20], red); // Pick Literal
** The literal can run into conflicts such as for a ZIM corner parameter which accepts an array []
This would be avoided with a system always using Pick() and never the literal.
But... ZIM started off without the formalized Pick - and the literal is shorter ;-)
The conflict can be resolved by using {noPick:[]} and then the array is not picked from.
NOTE
Pick is used internally by by zim.interval, zim.animate, zim.Emitter, zim.Pen, etc.
as well as ZIM STYLE and ZIM Shape basic parameters handy for cloning with Tile, Emitter, etc.
EXAMPLE
let loopCount, choice;
loopCount = new Pick([1,2,3]);
choice = Pick.choose(loopCount); // 1, 2, or 3
loopCount = [1,2,3]; // Pick literal
choice = Pick.choose(loopCount); // 1, 2, or 3
choice = Pick.choose([1,2,3]); // 1, 2, or 3
const rotation = {min:10, max:20, integer:false, negative:true};
// an example of a Range object - this will give values between -20 and -10 or 10 and 20
// rotation now holds an object as to how to pick its value
// this can be passed into a ZIM Emitter() for instance
// which will make multiple copies and rotate them based on Pick.choose()
// or this can be passed into an animation object
// and then into Emitter() for the animate parameter
const emitter = new Emitter({
obj:new Rectangle(),
random:{rotation:rotation} // the emitter will use Pick.choose() to pick a rotation for each particle
}).center();
function age() {
// assuming user.age is some input value that exists
if (user.age >= 18) return ["a", "b", ["c","d"]];
else return ["e", "f"];
}
// below will be a, b, c or d if user is 18+ with a and b having more of a chance
// or e or f if not over 18
const show = Pick.choose(age);
// below we randomize the tile colors in the first example
// and make them in color order for the second example
new Tile(new Rectangle(10,10,[blue, red]), 10, 10).center(); // would randomize colors
new Tile(new Rectangle(10,10,series(blue, red)), 10, 10).center(); // would alternate colors
// here we pass an array through without processing the array:
Pick.choose({noPick:[1,2,3,4,5]}); // result is [1,2,3,4,5]
// a range between one and three seconds - repeating after 3 choices
const pick = new Pick({min:1, max:3}).num(3);
interval(pick, function () {console.log("calling");}); // eg. 2.5s, 2.7s, 1.2s, 2.5s, 2.7s, 1.2s, etc.
PARAMETERS
choices - any of the ZIM Pick formats:
1. an array of choices to choose from randomly
2. a range object with min and max (integer and negative) properties
3. a zim.series() or Pick.series() to pick objects in order
4. a function that returns a result
5. a single not one of the above that passes through
6. an escape object with a noPick property
7. any combination of the above to pick recursively
METHODS
num(number) - a chainable method to limit the number of options until Pick.choose() will repeat like a series
loop(number, call(value, index, total)) - a way to loop through options
number is the number of times to loop
call is a callback function that gets called each loop
the callback will recieve a value (the choice), the index of the loop and the total (the number parameter)
inside the function a return is like a continue and a return of any value is like a break in traditional for loops.
STATIC METHODS
Pick.choose(Pick Object or Pick Literal) - gets a value from the Pick object or Pick Literal
so chooses from a random array, or range, or gets the next in the series, etc.
Pick.rand(a, b, integer, negative) - gets a random number - same as zim.rand()
a - the first Number for the range
if a and b are not provided, rand() acts like Math.random()
if parameter b is not provided, rand will use range 0 to and including a
b - (default 0) second Number for the range
it does not matter if a>b or a<b
integer - (default true) set to false to include decimals in results
if false, range will include decimals up to but not including the highest number
if a or b have decimals this is set to false
negative - (default false) includes the negative range as well as the positive
Pick.series(array|item1, item2, item3, etc.) - same as zim.series()
returns a function that can be called many times each time returning the next value in the series (eventually looping)
array|item1 - the first item - or an array of results that will be called in order as the resulting function is called
item2 - the second item if the first is not an array
item3 - the third item, etc. to as many items as needed
Pick.getMinMax(ZIM VEE value) - returns a {min:val, max:val} object
with the min and max values the ZIM VEE value can return
or null, null if not numbers or the ZIM VEE is a function
This will work for a range object {min, max}, an array of number [] or a series() of numbers
PROPERTIES
type - the type of object as a String
choices - a reference to the choices object provided as the Pick(choices) parameter
CLOSE ▲PAGE ▤CODE ▤
BitmapData
createjs class - DOES NOT extend a DisplayObject
DESCRIPTION
This class and supporting classes (BitmapDataChannel, ColorTransform), come from Adobe Flash .
They were ported here: https://github.com/u-kudox/BitmapData_for_EaselJS (thanks u-kudox).
These docs come from: https://airsdk.dev/reference/actionscript/3.0/ (thanks Adobe).
Under ALL CLASSES select BitmapData - note that each property and method can be selected for information and examples.
The BitmapData class lets you work with the data (pixels) of a Bitmap object bitmap image.
You can use the methods of the BitmapData class to create arbitrarily sized transparent or opaque bitmap images and manipulate them in various ways at runtime.
You can also access the BitmapData for a bitmap image that you load with the flash.display.Loader class.
This class lets you separate bitmap rendering operations from the internal display updating routines.
By manipulating a BitmapData object directly, you can create complex images without incurring the per-frame overhead of constantly redrawing the content from vector data.
The methods of the BitmapData class support effects that are not available through the filters available to non-bitmap display objects.
A BitmapData object contains an array of pixel data. This data can represent either a fully opaque bitmap or a transparent bitmap that contains alpha channel data.
Either type of BitmapData object is stored as a buffer of 32-bit integers.
Each 32-bit integer determines the properties of a single pixel in the bitmap.
Each 32-bit integer is a combination of four 8-bit channel values (from 0 to 255) that describe
the alpha transparency and the red, green, and blue (ARGB) values of the pixel.
(For ARGB values, the most significant byte represents the alpha channel value, followed by red, green, and blue.)
The four channels (alpha, red, green, and blue) are represented as numbers
when you use them with the BitmapData.copyChannel() method or the DisplacementMapFilter.componentX and DisplacementMapFilter.componentY properties,
and these numbers are represented by the following constants in the BitmapDataChannel class:
BitmapDataChannel.ALPHA
BitmapDataChannel.RED
BitmapDataChannel.GREEN
BitmapDataChannel.BLUE
SEE:
https://zimjs.com/zapp/Z_ADQEH - simple version
https://zimjs.com/zapp/Z_X4PYD - coloring a Pic
https://zimjs.com/zapp/Z_XMT78 - coloring a Tile
https://github.com/u-kudox/BitmapData_for_EaselJS/tree/master/examplesEXAMPLE
// this is a shortened version of the examples below using internal code
// the addBitmapData() will create take the current Bitmap and pass it to a BitmapData object
// then take that BitmapData object and create a new Bitmap from the BitmapData
// this is then returned by the addBitmapData()
// the color() then applies a floodFill() internally saving a half dozen lines of code
const assets = "ai_coloring_groovy.png";
const path = "https://zimjs.org/assets/";
new Frame(FIT, 1481, 745, light, dark, ready, assets, path);
function ready() {
const pic = new Pic("ai_coloring_groovy.png");
const bitmap = new Bitmap(pic)
.addBitmapData()
.scaleTo()
.cur()
.center();
const color = series(red, orange, blue, green, yellow);
bitmap.on("mousedown", ()=>{
bitmap.color(color); // or get from ColorPicker()
S.update();
});
}
EXAMPLE
// coloring a pic with floodFill()
new Frame(FIT, 1024, 768, "ai_coloring_groovy.png", "https://zimjs.org/assets/", ready)
function ready() {
// cache the pic to get a cacheCanvas for the BitmapData
const pic = new Pic("ai_coloring_groovy.png").cache();
// pic.contrast = 30; // might need to increase contrast
// pic.updateCache();
// Make a new createjs.BitmapData - needs a canvas
const bitmapData = new createjs.BitmapData(pic.cacheCanvas);
// Just a normal ZIM ColorPicker
STYLE = {shadowColor:-1, circles:true};
const picker = new ColorPicker(300, [red,orange,green,yellow,purple,blue,white], 7)
.pos(0,30,CENTER,BOTTOM);
// Make a Bitmap to show the bitmapData.canvas
const bitmap = new Bitmap(bitmapData.canvas)
.scaleTo(S,100).center().cur();
bitmap.on("mousedown", ()=>{
// convert our mouse point to a point on the bitmap
const point = bitmap.globalToLocal(F.mouseX, F.mouseY);
// avoid pressing on the same color or the border color
const currentColor = bitmapData.getPixel(point.x, point.y);
if (
currentColor == convertColor(picker.selectedColor, 'hexnumber') ||
currentColor < convertColor(dark, "hexnumber") // towards black
) return;
// get the colorPicker color as hexstring - needed for floodFill
const newColor = convertColor(picker.selectedColor, 'hexstring');
// do a floodFill from the point with the new color
bitmapData.floodFill(point.x, point.y, newColor);
S.update();
});
} // end ready
EXAMPLE
// coloring a Tile with floodFill()
// cache the tile to get a cacheCanvas for the BitmapData
STYLE = {color:white, borderColor:black, borderWidth:3, backdropColor:white, backdropPadding:20};
const tile = new Tile([new Circle(50), new Rectangle(100,100)],5,4,20,20).cache();
// Create a new createjs.BitmapData - needs a canvas
const bitmapData = new createjs.BitmapData(tile.cacheCanvas);
// Just a normal ZIM ColorPicker
STYLE = {shadowColor:-1};
const picker = new ColorPicker(250, [red,orange,green,yellow], 4)
.pos(0,30,CENTER,BOTTOM);
// Make a Bitmap to show the bitmapData.canvas
const bitmap = new Bitmap(bitmapData.canvas).center().cur();
bitmap.on("mousedown", ()=>{
// convert our mouse point to a point on the bitmap
const point = bitmap.globalToLocal(F.mouseX, F.mouseY);
// avoid pressing on a dark color
const currentColor = bitmapData.getPixel(point.x, point.y);
if (currentColor<convertColor(dark, "hexnumber")) return;
// get the colorPicker color as hexstring - needed for floodFill
const newColor = convertColor(picker.selectedColor, 'hexstring');
// do a floodFill from the point with the new color
bitmapData.floodFill(point.x, point.y, newColor);
S.update();
});
PARAMETERS
width - the width of the bitmap image in pixels.
height - the height of the bitmap image in pixels.
transparent (default true) - Boolean that defines whether the bitmap image supports per-pixel transparency.
fillColor (default 0xffffffff) - the fill color as a HEX Number.
METHODS
** see also https://airsdk.dev/reference/actionscript/3.0/
** search under ALL CLASSES for BitmapData - press on methods for details
** note - none of these support ZIM DUO as this is a createjs class and methods
applyFilter(sourceBitmapData:BitmapData, sourceRect:Rectangle, destPoint:Point, filter:BitmapFilter):void
Takes a source image and a filter object and generates the filtered image.
clone():BitmapData
Returns a new BitmapData object that is a clone of the original instance with an exact copy of the contained bitmap.
colorTransform(rect:Rectangle, colorTransform:ColorTransform):void
Adjusts the color values in a specified area of a bitmap image by using a ColorTransform object.
compare(otherBitmapData:BitmapData):Object
Compares two BitmapData objects.
convertColorProfile(source:Screen, destination:Screen):BitmapData
Create a copy of the image data, converting between color profiles based on the provided Screen objects.
copyChannel(sourceBitmapData:BitmapData, sourceRect:Rectangle, destPoint:Point, sourceChannel:uint, destChannel:uint):void
Transfers data from one channel of another BitmapData object or the current BitmapData object into a channel of the current BitmapData object.
copyPixels(sourceBitmapData:BitmapData, sourceRect:Rectangle, destPoint:Point, alphaBitmapData:BitmapData = null, alphaPoint:Point = null, mergeAlpha:Boolean = false):void
Provides a fast routine to perform pixel manipulation between images with no stretching, rotation, or color effects.
copyPixelsToByteArray(rect:Rectangle, data:ByteArray):void
Fills a byte array from a rectangular region of pixel data.
decode(data:ByteArray):BitmapData
[static] Decompresses encoded image data (PNG/GIF89a/JPEG) into a new BitmapData object using data provided in a ByteArray.
dispose():void
Frees memory that is used to store the BitmapData object.
draw(source:IBitmapDrawable, matrix:Matrix = null, colorTransform:ColorTransform = null, blendMode:String = null, clipRect:Rectangle = null, smoothing:Boolean = false):void
Draws the source display object onto the bitmap image, using the Flash runtime vector renderer.
drawWithQuality(source:IBitmapDrawable, matrix:Matrix = null, colorTransform:ColorTransform = null, blendMode:String = null, clipRect:Rectangle = null, smoothing:Boolean = false, quality:String = null):void
Draws the source display object onto the bitmap image, using the Flash runtime vector renderer.
encode(rect:Rectangle, compressor:Object, byteArray:ByteArray = null):ByteArray
Compresses this BitmapData object using the selected compressor algorithm and returns a new ByteArray object.
fillRect(rect:Rectangle, color:uint):void
Fills a rectangular area of pixels with a specified ARGB color.
floodFill(x:int, y:int, color:uint):void
Performs a flood fill operation on an image starting at an (x, y) coordinate and filling with a certain color.
generateFilterRect(sourceRect:Rectangle, filter:BitmapFilter):Rectangle
Determines the destination rectangle that the applyFilter() method call affects, given a BitmapData object, a source rectangle, and a filter object.
getColorBoundsRect(mask:uint, color:uint, findColor:Boolean = true):Rectangle
Determines a rectangular region that either fully encloses all pixels of a specified color within the bitmap image (if the findColor parameter is set to true) or fully encloses all pixels that do not include the specified color (if the findColor parameter is set to false).
getPixel(x:int, y:int):uint
Returns an integer that represents an RGB pixel value from a BitmapData object at a specific point (x, y).
getPixel32(x:int, y:int):uint
Returns an ARGB color value that contains alpha channel data and RGB data.
getPixels(rect:Rectangle):ByteArray
Generates a byte array from a rectangular region of pixel data.
getVector(rect:Rectangle):Vector.<uint>
Generates a vector array from a rectangular region of pixel data.
histogram(hRect:Rectangle = null):Vector.<Vector.<Number>>
Computes a 256-value binary number histogram of a BitmapData object.
hitTest(firstPoint:Point, firstAlphaThreshold:uint, secondObject:Object, secondBitmapDataPoint:Point = null, secondAlphaThreshold:uint = 1):Boolean
Performs pixel-level hit detection between one bitmap image and a point, rectangle, or other bitmap image.
lock():void
Locks an image so that any objects that reference the BitmapData object, such as Bitmap objects, are not updated when this BitmapData object changes.
merge(sourceBitmapData:BitmapData, sourceRect:Rectangle, destPoint:Point, redMultiplier:uint, greenMultiplier:uint, blueMultiplier:uint, alphaMultiplier:uint):void
Performs per-channel blending from a source image to a destination image.
noise(randomSeed:int, low:uint = 0, high:uint = 255, channelOptions:uint = 7, grayScale:Boolean = false):void
Fills an image with pixels representing random noise.
paletteMap(sourceBitmapData:BitmapData, sourceRect:Rectangle, destPoint:Point, redArray:Array = null, greenArray:Array = null, blueArray:Array = null, alphaArray:Array = null):void
Remaps the color channel values in an image that has up to four arrays of color palette data, one for each channel.
perlinNoise(baseX:Number, baseY:Number, numOctaves:uint, randomSeed:int, stitch:Boolean, fractalNoise:Boolean, channelOptions:uint = 7, grayScale:Boolean = false, offsets:Array = null):void
Generates a Perlin noise image.
pixelDissolve(sourceBitmapData:BitmapData, sourceRect:Rectangle, destPoint:Point, randomSeed:int = 0, numPixels:int = 0, fillColor:uint = 0):int
Performs a pixel dissolve either from a source image to a destination image or by using the same image.
scroll(x:int, y:int):void
Scrolls an image by a certain (x, y) pixel amount.
setPixel(x:int, y:int, color:uint):void
Sets a single pixel of a BitmapData object.
setPixel32(x:int, y:int, color:uint):void
Sets the color and alpha transparency values of a single pixel of a BitmapData object.
setPixels(rect:Rectangle, inputByteArray:ByteArray):void
Converts a byte array into a rectangular region of pixel data.
setVector(rect:Rectangle, inputVector:Vector.<uint>):void
Converts a Vector into a rectangular region of pixel data.
threshold(sourceBitmapData:BitmapData, sourceRect:Rectangle, destPoint:Point, operation:String, threshold:uint, color:uint = 0, mask:uint = 0xFFFFFFFF, copySource:Boolean = false):uint
Tests pixel values in an image against a specified threshold and sets pixels that pass the test to new color values.
unlock(changeRect:Rectangle = null):void
Unlocks an image so that any objects that reference the BitmapData object, such as Bitmap objects, are updated when this BitmapData object changes.
PROPERTIES
** see also https://airsdk.dev/reference/actionscript/3.0/
** search under ALL CLASSES for BitmapData - press on properties for details
width - read-only - The width of the bitmap image in pixels.
height - read-only - The height of the bitmap image in pixels.
rect - read-only - The rectangle that defines the size and location of the bitmap image.
transparent - read-only - Boolean that defines whether the bitmap image supports per-pixel transparency.
CLOSE ▲PAGE ▤CODE ▤
BitmapDataChannel
createjs static class
DESCRIPTION
This class is a supporting class for CreateJS BitmapData. It comes from Adobe Flash.
They were ported here: https://github.com/u-kudox/BitmapData_for_EaselJS (thanks u-kudox).
These docs come from: https://airsdk.dev/reference/actionscript/3.0/ (thanks Adobe).
Under ALL CLASSES select BitmapDataChannel
The BitmapDataChannel class is an enumeration of constant values that indicate which channel to use: red, blue, green, or alpha transparency.
When you call some methods, you can use the bitwise OR operator (|) to combine BitmapDataChannel constants to indicate multiple color channels.
PROPERTIES
ALPHA: uint = 8
[static] The alpha channel.
BLUE: uint = 4
[static] The blue channel.
GREEN: uint = 2
[static] The green channel.
RED: uint = 1
[static] The red channel.
CLOSE ▲PAGE ▤CODE ▤
ColorTransform
createjs class
DESCRIPTION
This class is a supporting class for CreateJS BitmapData. It comes from Adobe Flash.
They were ported here: https://github.com/u-kudox/BitmapData_for_EaselJS (thanks u-kudox).
These docs come from: https://airsdk.dev/reference/actionscript/3.0/ (thanks Adobe).
Under ALL CLASSES select ColorTransform
The ColorTransform class lets you adjust the color values in a display object.
The color adjustment or color transformation can be applied to all four channels: red, green, blue, and alpha transparency.
When a ColorTransform object is applied to a display object,
a new value for each color channel is calculated like this:
New red value = (old red value * redMultiplier) + redOffset
New green value = (old green value * greenMultiplier) + greenOffset
New blue value = (old blue value * blueMultiplier) + blueOffset
New alpha value = (old alpha value * alphaMultiplier) + alphaOffset
If any of the color channel values is greater than 255 after the calculation, it is set to 255. If it is less than 0, it is set to 0.
You can use ColorTransform objects in the following ways:
In the colorTransform parameter of the colorTransform() method of the BitmapData class
As the colorTransform property of a Transform object (which can be used as the transform property of a display object)
You must use the new ColorTransform() constructor to create a ColorTransform object before you can call the methods of the ColorTransform object.
PARAMETERS
** see also https://airsdk.dev/reference/actionscript/3.0/
** search under ALL CLASSES for ColorTransform - press on properties for details
alphaMultiplier : Number
A decimal value that is multiplied with the alpha transparency channel value.
alphaOffset : Number
A number from -255 to 255 that is added to the alpha transparency channel value after it has been multiplied by the alphaMultiplier value.
blueMultiplier : Number
A decimal value that is multiplied with the blue channel value.
blueOffset : Number
A number from -255 to 255 that is added to the blue channel value after it has been multiplied by the blueMultiplier value.
color : uint
The RGB color value for a ColorTransform object.
greenMultiplier : Number
A decimal value that is multiplied with the green channel value.
greenOffset : Number
A number from -255 to 255 that is added to the green channel value after it has been multiplied by the greenMultiplier value.
redMultiplier : Number
A decimal value that is multiplied with the red channel value.
redOffset : Number
A number from -255 to 255 that is added to the red channel value after it has been multiplied by the redMultiplier value.
METHODS
** see also https://airsdk.dev/reference/actionscript/3.0/
** search under ALL CLASSES for ColorTransform - press on methods for details
colorTransform(redMultiplier:Number = 1.0, greenMultiplier:Number = 1.0, blueMultiplier:Number = 1.0, alphaMultiplier:Number = 1.0, redOffset:Number = 0, greenOffset:Number = 0, blueOffset:Number = 0, alphaOffset:Number = 0)
Creates a ColorTransform object for a display object with the specified color channel values and alpha values.
concat(second:ColorTransform):void
Concatenates the ColorTranform object specified by the second parameter with the current ColorTransform object
and sets the current object as the result, which is an additive combination of the two color transformations.
toString():String
Formats and returns a string that describes all of the properties of the ColorTransform object.
PROPERTIES
** see also https://airsdk.dev/reference/actionscript/3.0/
** search under ALL CLASSES for ColorTransform - press on properties for details
See the parameters - which are all properties
CLOSE ▲PAGE ▤CODE ▤
scrollX
zim function
DESCRIPTION
This function gets or sets how many pixels from the left the browser window has been scrolled.
If num is provided then the function scrolls the window to this x position.
If num and time are provided it animates the window to the x position in time milliseconds.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// hide the logo if the page is scrolled left more than 200 pixels
if (scrollX < -200) zss("logo").display = "none";
PARAMETERS
num - (default null) optional scroll position to go to (probably negative)
time - (default 0) time in seconds to take to go to the num position (also see ZIM TIME constant)
RETURNS a Number
CLOSE ▲PAGE ▤CODE ▤
scrollY
zim function
DESCRIPTION
This function gets or sets how many pixels from the top the browser window has been scrolled.
If num is provided then the function scrolls the window to this y position.
If num and time are provided it animates the window to the y position in time milliseconds.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// animate the scroll position down 100 pixels in half a second
scrollY(scrollY()-100, .5);
PARAMETERS
num - (default null) optional scroll position to go to (probably negative)
time - (default 0) time in seconds to take to go to the num position (also see ZIM TIME constant)
RETURNS a Number
CLOSE ▲PAGE ▤CODE ▤
windowWidth
zim function
DESCRIPTION
Returns the width of a window.
(window.clientWidth or window.innerWidth)
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
if (windowWidth() < 500) zss("related").display = "none";
windowHeight
zim function
DESCRIPTION
Returns the height of a window.
(window.clientHeight or window.innerHeight)
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
browserZoom
zim function
DESCRIPTION
Returns the browser zoom relative to starting zoom.
For example, will return 2 if zoomed twice as big as starting zoom
and will return .5 is zoomed half as big as starting zoom.
Note: this always returns 1 at the start regardless of the starting browser zoom.
This is changed by CTRL+, CTRL-, CTRL scroll wheel or the zoom menu, etc.
It is really just comparing the difference of the devicePixelRatio.
The function is used internally by ZIM Tag(), TextArea() and Loader().
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
Ticker.add(()=>{
zog(browserZoom()); // 1 at start then changes depending on browser zoom
});
getQueryString
zim function
DESCRIPTION
Turns the HTML query string into a object.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// an array of values is created if a query string has multiple properties with the same name:
const collection = getQueryString("type=dog&age=10&age=20&age=30");
zog(collection.age); // [10,20,30]
PARAMETERS
string - (default null) null will get string from end of HTML page after ?
set the key value pairs (without question mark) to parse a custom string
eg. party=true&toys=many
RETURNS an object literal with properties matching the keys and values matching the values (or undefined if no query string)
CLOSE ▲PAGE ▤CODE ▤
swapHTML
zim function
DESCRIPTION
Pass in two tag ids as strings and this function will swap their innerHTML content.
The content (including nested tags) will be swapped.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// exchanges the content of two divs called question and answer
swapHTML("question","answer");
PARAMETERS
idA, idB - String names of the tag id with which to swap innerHTML values
RETURNS Boolean indicating success
CLOSE ▲PAGE ▤CODE ▤
urlEncode
zim function
DESCRIPTION
Matches PHP urlencode and urldecode functions
for passing data on end of URL.
NOTE
only encode values of key=value pairs (not keys and not both keys and values)
NOTE
JSON automatically encodes and decodes - except maybe &
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const motto = "good = life & life = now";
zgo("submit.php?motto="+urlEncode(motto));
PARAMETERS
string - a value to URL encode (space to plus, etc.)
RETURNS a String
CLOSE ▲PAGE ▤CODE ▤
urlDecode
zim function
DESCRIPTION
Matches PHP urlencode and urldecode functions
for receiving raw data from a source that URLencodes.
NOTE
JSON automatically encodes and decodes
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
setCookie
zim function
DESCRIPTION
Sets an HTML cookie to remember some user data your site has set over time.
If no days, it will be a session cookie (while browser is open).
NOTE
cookies may not work unless files are on a server
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
PARAMETERS
name - a String name for your cookie
value - a String value that you want to store
days - (default 0) for how many days do you want to store the cookie
ALSO
see getCookie and deleteCookie
RETURNS a Boolean indicating success
CLOSE ▲PAGE ▤CODE ▤
getCookie
zim function
DESCRIPTION
Gets an HTML cookie that you have previously set.
NOTE
cookies may not work unless files are on a server
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
PARAMETERS
name - the String name of your stored cookie
ALSO
see setCookie and deleteCookie
RETURNS a String or undefined if not found
CLOSE ▲PAGE ▤CODE ▤
deleteCookie
zim function
DESCRIPTION
Deletes an HTML cookie.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
deleteCookie("visits"); // clears the cookie
PARAMETERS
name - the String name of your stored cookie to delete
ALSO
see setCookie and getCookie
RETURNS a Boolean indicating success
CLOSE ▲PAGE ▤CODE ▤
zog
global function
DESCRIPTION
Short version of console.log()
to log the item(s) to the console.
Use F12 to open your Browser console.
zog is dedicated to Pragma (Madeline Zen) who was coding with Dr Abstract (Dan Zen) from the start
Also comes in seven ZIM colors:
zogg("green");
zogp("pink");
zogb("blue");
zogr("red");
zogy("yellow");
zogo("orange");
zogs("salmon");
Note: If zon (comments on) is set to false before ZIM runs, then all zog() commands are turned off
EXAMPLE
zog("hello"); // logs hello to the console
EXAMPLE
const circle = new Circle().center();
zogb(circle); // logs the circle object to the console with a blue Z marker
EXAMPLE
const x = 10;
const y = 20;
zogo(x, y); // 10 20 with an orange Z marker
PARAMETERS
item1, item2 (optional), etc. - items (expressions) to log to the console
RETURNS items it is logging separated by a space if more than one
CLOSE ▲PAGE ▤CODE ▤BITS
zss
global function
DESCRIPTION
Short version of document.getElementById(string).style
to access the style property of an HTML tag by the tag id.
EXAMPLE
zss("logo").margin = "10px";
PARAMETERS
string - the id of the tag whose style you are wanting to access
RETURNS style property of HTML tag with id of string or undefined if not found
CLOSE ▲PAGE ▤CODE ▤
EXPAND ▼ zgo(url, target, width, height, fullscreen, modal) ~ go
zgo(url, target, width, height, fullscreen, modal) ~ go
zgo
global function
DESCRIPTION
Short version of either window.location.href or window.open
to open a link in the same window or a specified window.
EXAMPLE
zid("logo").addEventListener("click", ()=>{zgo("https://zimjs.com");});
// with a ZIM object:
const button = new Button();
button.center();
button.on("click", ()=>{zgo("https://zimjs.com");});
EXAMPLE
// all on one line and open url in new tab
new Button().center().tap(()=>{zgo("https://zimjs.com", "_blank");})
PARAMETERS
url - the link to use (Absolute, Relative or Virtual)
target - (default null) the string name of a window (tab) _blank for new window each time
width - (default null) width of window (use with fullscreen true)
height - (default null) height of window (use with fullscreen true)
fullscreen - (default null) not really full screen but rather opens in a new window not tab
modal - (default false) set to true to force user to close window
RETURNS null if opening in same window or reference to the window otherwise
CLOSE ▲PAGE ▤CODE ▤BITS
zum
global function
DESCRIPTION
Takes the units off a string number.
Converts "10px" string from styles to number 10, for instance.
If there is no value then this will return 0.
EXAMPLE
// in HTML
<div id="logo" style="position:relative; left:10px">LOGO</div>
// in JavaScript
let left = zum(zss("logo").left); // converts 10px to the Number 10
left += 20; // adds 20 to 10
zss("logo").left = left + "px"; // assigns 30px to left style
PARAMETERS
string - the string representation of a number eg. "10px"
RETURNS a Number
CLOSE ▲PAGE ▤CODE ▤
zot
global function
DESCRIPTION
Test to see if value has no value (value must exist as var or parameter)
or if value has been set to null.
Good for setting function defaults.
Really just asking if the value == null.
Often we forget exactly how to do this - it is tricky:
value === null, value == undefined, value == 0, !value DO NOT WORK.
EXAMPLE
if (zot(width)) width = 100;
// equivalent to
if (width == null) width = 100;
PARAMETERS
value - a variable or parameter you want to see if there is no value assigned
RETURNS Boolean true if value does not exist
CLOSE ▲PAGE ▤CODE ▤BITS
zop
global function
DESCRIPTION
Stop event propagation to subsequently added existing listeners.
Must pass it e || window.event from your event function.
NOTE
this is not canceling the default action -
to cancel default action use e.preventDefault();
EXAMPLE
zid("button").addEventListener("click", e=>{
// do something
zop(e||window.event);
});
PARAMETERS
e - the event object from your event function
collect the event object as e and then pass in e || window.event
RETURNS null
CLOSE ▲PAGE ▤CODE ▤
zil
global function
DESCRIPTION
Stop keys from moving content - arrows, spacebar, pgup, pgdown, home, end.
Stop scroll wheel from moving content - scrolling the canvas for instance.
ZIM Frame does this in the full, fit and outside scale modes.
If not using Frame, then you can do this once at the start of your code.
Returns an array of references to three listeners: [keydown, wheel and DOMMouseScroll].
Use these to removeEventListeners.
Also stores these on Window at window.zilK, window.zilW, window.zilS.
The arrows, etc, still work but just not their default window behaviour.
EXAMPLE
// at the top of your code
let listenersArray = zil();
// key and mousewheel arrows, spacebar, etc.
// will have their default actions stopped until you remove the listeners:
// window.removeEventListener("keydown", listenersArray[0]); // etc.
zet
global function
DESCRIPTION
Uses document.querySelectorAll() to get a list of tags.
Returns a ZIM Zet object which can be used to add events or styles to the set.
EXAMPLE
zet(".class").on("click", ()=>{}); // would add function event to all tags with the class
zet("p").css("color", "goldenrod"); // would make the text of all paragraphs goldenrod
zet("#test").css({color:"red", "background-color":"blue", paddingLeft:"20px"});
// set a custom open property on all section bars to false
zet("section .bar").prop("open", false);
// set the custom open property on all section bars to true and set the innerHTML to CLOSE
zet("section .bar").prop({open: true, innerHTML: "CLOSE"});
PARAMETERS
selector - a CSS query selector such as a class, id, tag, or multiple selectors separated by commands
can also be complex selectors suchs as ".class img"
first - get the first occurance only of the set
METHODS (on the returned Zet object)
zet(selector).on(type, function) - a shortcut for addEventListener() and will be added to all tags matching the selector
zet(selector).off(type, function) - a shortcut for removeEventListener() and will be remove from all tags matching the selector
zet(selector).css(property, value) - gets and sets styles
- gets the first programmatic property if a single string property is passed
- sets the property to the value on each of the Zet's tags from the selector passed to zet()
- if an object of properties and values is passed as the single parameter then sets all these properties
- NOTE: style names do not need quotes unless the dash is used - so camelCase does not require quotes
- NOTE: remember that commas are used for objects - not the semi-colon as in CSS
zet(selector).prop(property, value) - gets or sets a property on a set of tags
- if an object of properties and values is provided as a single parameter, then sets all these on the set
- else if no value is set then returns an array of the set tags values for the property
- else if value is a single value then sets the property of the tags in the set to the value
PROPERTIES (on the returned Zet object)
tags - an HTML NodeList tag list
RETURNS Zet object with on(), off(), css() methods and tags property (NodeList tag list)
CLOSE ▲PAGE ▤CODE ▤BITS
zob
global function
DESCRIPTION
A system to build functions or classes that allow traditional parameters
or a configuration object passed in as a single parameter.
The configuration object has property names that match the function arguments.
To use zob on your own functions, pass in a function and the function's arguments
and insert zob into first line of your function as shown below.
Replace yourFunction with a reference to your function but keep arguments as is.
NOTE
in ES6 classes when extending a ZIM class,
do not use ZIM DUO when passing in parameters to super()
or else the methods might be obscured.
EXAMPLE
function test(a,b,c){
let duo; if (duo = zob(test, arguments)) return duo;
};
test(1,null,3); // traditional parameters in order
test({a:1,c:3}); // configuration object with zob
NOTE
if you are running the function as a constructor with the new keyword
then you need to pass in this (keyword) as the last parameter (sig can be null)
this allows zob() to test to see if we need to rerun the function as a constructor
EXAMPLE
let duo; if (duo = zob(yourFunction, arguments, sig, this)) return duo;
NOTE
if using an ES6 Class or minifying the file then you need to do an extra step
add a string version of the signature of your function above the duo call
then pass the signature in as a parameter to zob()
EXAMPLE
class Test extends Container {
constructor(a=1,b=2,c=3) {
super();
const sig = "a,b,c";
let duo; if (duo = zob(Test, arguments, sig, this)) return duo;
}
}
many of the ZIM functions and classes use this "DUO" technique
the documentation for parameters will tell you if they support DUO
works also with JS6 default parameter values
PARAMETERS
func - reference to the function you want to use params or a config object with
args - reference to the arguments property of the function (literally, use "arguments" with no quotes)
sig - (default null) a string listing of the parameters just how they are in the () not including the ()
required if you are minifying the file as minifying changes the signature
scope - (default null) reference to this (litterally, use "this" without the quotes)
required if the function is being run with the new keyword
RETURNS um... a Boolean
CLOSE ▲PAGE ▤CODE ▤BITS
zik
global function
DESCRIPTION - DEPRECIATED as of ZIM 10
Has now been replaced with ZIM Pick() class which formalizes zik() and ZIM VEE into a more general class.
See ZIM Pick() under the Code module Classes.
CLOSE ▲PAGE ▤CODE ▤VIDS
zta
global function
DESCRIPTION
Short version of console.table()
to log the Arrays or Objects to the console as a table
Use F12 to open your Browser console.
Note: if zon (comments on) is set to false before ZIM runs then all zta() commands will be turned off
EXAMPLE
zta(["will", "this", "wind"]); // logs as a table
PARAMETERS
item1, item2 (optional), etc. - Arrays or Objects to log to the console
RETURNS items it is logging
CLOSE ▲PAGE ▤CODE ▤
zor
global function
DESCRIPTION
picks the first non-null defined item so WILL pick a 0
EXAMPLE
const a = 0;
const x = zor(a,10); // x is 0
const y = zor(x,10); // y is 0
// note:
const z = a||10; // z is 10
const c;
const w = zor(c,a,20); // w is 0
PARAMETERS
item1, item2 (optional), etc. - objects to test in order
RETURNS first non-null defined item or undefined if no valid items
CLOSE ▲PAGE ▤CODE ▤
distill
zim constant
DESCRIPTION
Distill allows you to track which functions you are using in your app
and create a custom minified js file with just those functions.
Set DISTILL to true to record which functions your are using in your app -
default is false. While running your app, call the distill() function
take the results to https://zimjs.com/distill to create a minified distilled file.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// at the start of your code
DISTILL = true;
// at the end of your code (once everything has run)
// this means we may have to wait for events to happen, etc.
distill();
// this will log to the console a series of numbers
// separated by spaces representing the functions used
1 6 81 81 79 75 77 75 55 54 52 53 55 54 52 53 55 54 52
53 42 80 74 46 46 46 80 74 46 46 46 55 54 52 53 55 54
52 53 55 54 52 53 42 80 74
// copy these into the zim DISTILL form field
// to get the minified JavaScript for these functions
// NOTE: Distill will not duplicate the functions
// data duplication is left in for statistical purposes
distill
zim function
DESCRIPTION
Call the distill function to display which zim functions you are using in your app.
You must set DISTILL constant to true before using (set at the start of your app).
After running through your app, call distill() and see the console (F12).
Take the results to https://zimjs.com/distill to create a minified distilled js file.
You would then host this js file yourself or include it in your mobile files, etc.
NOTE
distill() only records functions that have been used
so you may have functions still to be used in your app.
You will want to make sure you call distill() after you have used all your functions,
for instance, on a restart event, etc.
NOTE
distill() will not be available from your distilled file.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// at the start of your code
DISTILL = true;
// at the end of your code (once everything has run)
// this means we may have to wait for events to happen, etc.
distill();
// this will log to the console a series of numbers
// separated by spaces representing the functions used
1 6 81 81 79 75 77 75 55 54 52 53 55 54 52 53 55 54 52
53 42 80 74 46 46 46 80 74 46 46 46 55 54 52 53 55 54
52 53 55 54 52 53 42 80 74
// copy these into the zim DISTILL form field
// to get the minified JavaScript for these functions
// NOTE: Distill will not duplicate the functions
// data duplication is left in for statistical purposes
parseAudioSprite
zim function
DESCRIPTION
Converts an AudioSprite data file from a popular AudioSprite Creation Tool: https://github.com/tonistiigi/audiosprite
To a CreateJS AudioSprite data format to use with Frame loadAssets().
NOTE
only gets the first file from the output and ignores loop and autoplay properties
To loop a sound, use new Aud(id).play({loop:-1});
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// loading JSON data for audio is two step process.
// load the JSON then load the Audio with the converted loaded JSON data
// NOTE - do not have two frame complete events active at the same time!
// unless you assign the loadAssets() to a variable (ZIM Queue) and put the complete events on the variable
F.loadAssets("audioSprite.json", "assets/");
F.on("complete", init, null, true); // run this complete event only once (the true)
function init() {
// convert imported data to CreateJS AudioSprite data:
const audioSpriteData = parseAudioSprite(asset("audioSprite.json"));
// load the audio using the converted data
F.loadAssets(audioSpriteData, "assets/");
F.on("complete", ()=>{
// now all the AudioSprite ids are available
new Aud("start").play();
});
}
PARAMETERS
audioSpriteData - an object (not JSON) made from parsed JSON data from https://github.com/tonistiigi/audiosprite example:
{"resources": ["audiosprite.mp3"],
"spritemap": {
"blackball": {"start": 1.041, "end": 2.475, "loop": false},
"bounce": {"start": 3.567, "end": 4.232, "loop": false}
}}
outputAudioSprite - (default false) output to the console the converted CreateJS AudioSprite data
NOTE: this is in JSON format so will have to JSON.parse() the console text - wrap it in single quotes as they are stripped by the console
RETURNS - a CreateJS AudioSprite data object
CLOSE ▲PAGE ▤CODE ▤VIDS
previewAudioSprite
zim function
DESCRIPTION
Creates a ZIM Tabs object with all the audioSprite sounds in each tab sound names are shortened to numLetters
Assumes that the AudioSprite is loaded - see docs on F.loadAssets()
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
var zimAudioSpriteData = {
src:"audiosprite.mp3",
audioSprite:[
// [id, startime(s), endtime(s)]
// prefer this when making audioSprites by hand in Premiere or Audition
['noStar', 1.041, 2.475],
['bounce', 3.567, 4.232],
['deleted', 5.396, 9.315],
['click', 10.373, 10.499],
['noLove', 11.607, 14.254],
['happy', 15.672, 17.081],
['draw', 18.354, 19.163],
['heart', 20.151, 23.594],
['star', 24.931, 27.673],
['warning', 28.632, 29.351],
['navChange', 30.640, 32.323]
]
}
F.loadAssets(zimAudioSpriteData, "assets/");
F.on("complete", ()=>{
// will show tabs at top of stage - press to play audio
previewAudioSprite(zimAudioSpriteData, 2);
S.update();
});
PARAMETERS
audioSpriteData - an AudioSprite object of ZIM, CreateJS or from JSON parsed https://github.com/tonistiigi/audiosprite format
numLetters - (default 3) how many letters from the sound name to put on each tab
frame - (default zdf) the frame into which the AudioFile is loaded
RETURNS - a ZIM Tab which is automatically added to the frame's stage
CLOSE ▲PAGE ▤CODE ▤
svgToBitmap
zim function
DESCRIPTION
Function to convert SVG to ZIM Bitmap
NOTE
as of ZIM Cat 04, svg passed into the assets parameter of Frame or loadAssets()
will be converted to a Bitmap automatically and available as an asset()
prior to ZIM Cat 04 it was available as SVG as an asset and would need to be converted with svgToBitmap()
The original SVG is available as an svg property on the Bitmap asset.
SEE: SVG() under Frame module for new way to load SVG files.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// svg can be a reference to an svg tag on the page zid("svgTagID")
// or an svg string starting with for example:
// var svg = '<svg id="vector" width="500" height="500" xmlns:rdf="https://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="https://www.w3.org/2000/svg" xmlns:cc="https://web.resource.org/cc/" xmlns:dc="https://purl.org/dc/elements/1.1/" xmlns:svg="https://www.w3.org/2000/svg" viewBox="0 0 312 521" version="1.0">
// SEE: https://zimjs.com/svg for an example
svgToBitmap(svg, bitmap=>{
bitmap.center().transform();
S.update()
});
PARAMETERS
svg - an SVG tag or SVG string
callback - function to call when creation is done
width - (default null) - force a width of the Bitmap
height - (default null) - force a height of the Bitmap
params - (default null) pass an object literal of values, etc. for callback to receive after bitmap
RETURNS - null
CLOSE ▲PAGE ▤CODE ▤VIDS
makeContent
zim function
DESCRIPTION
Function that returns ready-made content for Pane(), Window() and Panel()
or can call and add anywhere.
Primarily used for confirmation or submission dialogs.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
PARAMETERS
content - the content to make - using one of three formats:
a string or number to add a ZIM Label (also see color parameter and property)
a ZIM DisplayObject such as a Circle or a Container with more objects, etc.
a content configuration object {} with the following properties - any are optional:
header - a ZIM DisplayObject for the top of the content
message - text that will put into a ZIM Label default color white
display - a ZIM DisplayObject for beneath the message
buttons - an array of ZIM Button objects or configuration objects {} as follows:
{label, color, rollColor, backgroundColor, rollBackgroundColor, call}
with call being a callback function for when the button is pressed
buttonScale - the scale for the buttons
color - the color of the message
spacingH - horizontal space between the buttons (default 20xbuttonScale)
spacingV - vertical space between the content areas (default 20)
scrollBar - set to true if a default scrollBar is present in Window or a number if custom
align - default CENTER, or use LEFT or RIGHT
maxWidth - (default null) pass in a maximum width to keep scale the content to
color - message color - also see color as property of content config object {}
PROPERTIES
*** if the content is a content configuration object then the following properties are added the created content
config - the content configuration object provided
header - a ZIM DisplayObject from the top if provided
message - a ZIM Label from the message if provided
text - the text of the message if provided
display - a ZIM DisplayObject for beneath the message if provided
buttons - an array of ZIM Button objects or configuration objects {} as follows:
{label, color, rollColor, backgroundColor, rollBackgroundColor, call}
with call being a callback function for when the button is pressed
all if provided
RETURNS - a Label if a string or number is passed as content, a Container if a content config {} is passed or the content if something else is passed
CLOSE ▲PAGE ▤CODE ▤
zimify
global function
DESCRIPTION
Function to add display methods like drag, hitTests, move, animate, center, etc. to an object.
Also adds width, height, widthOnly and heightOnly properties.
The term "members" is used because we are adding both methods and properties.
All the ZIM 4TH display objects come with these members
BUT... the native CreateJS display objects do not.
When we import assets from Adobe Animate, these are native CreateJS objects.
So we can use zimify() to add these members to a CreateJS Shape, Container, etc.
NOTE
this was formerly zim.addDisplayMembers (which has been replaced by zimify)
ZIM uses zimify internally to add the members
to the ZIM shapes and components (Rectangle, Circle, Triangle, Label, Button, etc.)
as applied through the ZIM Container inheritance
as well as to the ZIM wrappers for CreateJS Container, Shape, Sprite, MovieClip objects.
The display methods call the original ZIM functions
passing the object parameter as the first parameter
or if DUO is being used then adds the object to the configuration object.
Also adds common ZIM DisplayObject properties such as:
width, height, widthOnly, heightOnly, level, depth, blendMode
draggable, name, hue, saturation, brightness, contrast
hueBatch, saturationBatch, brightnessBatch, contrastBatch
and perhaps more - see zim.displayBase()
EXAMPLE
const cjsShape = new lib.Shape1(); // include the js from Adobe Animate
zimify(cjsShape, 200, 300); // or 0,0,200,300, for x, y, width, height of bounds
cjsShape.center();
cjsShape.drag();
// otherwise would have to use:
zim.center(cjsShape, stage);
zim.drag(cjsShape); // etc.
EXAMPLE
const shape = new createjs.Shape();
shape.graphics.beginFill(red).drawRect(0,0,200,200);
// need to either setBounds() or pass in dimensions
zimify(shape, 200, 200); // add methods like center, drag, etc.
shape.center(); // ZIM 4TH method format
S.update();
// note: even without using zimify()
// we can use the traditional zim.center() function
var shape = new createjs.Shape();
shape.graphics.beginFill(red).drawRect(0,0,200,200);
shape.setBounds(0,0,200,200); // need to set bounds to center
zim.center(shape, stage); // use the zim function rather than the method
S.update();
// of course we can just use a zim.Shape
// then the methods like center, drag, etc. are already added
var shape = new Shape(200, 200).f(red).dr(0,0,200,200).center();
S.update();
// in this case, we may have well used a Rectangle ;-)
var shape = new Rectangle(200, 200, red);
shape.center();
S.update();
PARAMETERS
obj - the object to add the methods and properties to (probably a CreateJS display object)
a,b,c,d - optional bounds - if the bounds are not already set then provide them here
if only a and b are provided then these are width and height with x, y at 0
if a, b, c, d are provided then these are x, y, width, height of the bounds
note: on Adobe Animate MovieClips, the objects are stored in a container
and zimify() will automatically zimify the container and set its width and height to stage width and height
and bring the container to the top()
list - Boolean used internally by zimplify to exclude zim methods (makes zimify return list of methods)
RETURNS - obj for chaining
CLOSE ▲PAGE ▤CODE ▤BITS VIDS
zimplify
global function
DESCRIPTION
By default, ZIM runs zimplify() so that the zim namespace is not needed.
This can be prevented by setting the global variable zns = true before calling ZIM.
Then if desired zimplify() can be run manually after ZIM is called.
Calling zimplify() removes requirement to use the zim namespace in code
Puts the ZIM code, display and controls into the global namespace
Does not put methods in the namespace as using methods as functions is discouraged
With the exception of loop, stopAnimate, pauseAnimate, animate, wiggle
NOTE
By default the CDN version of ZIM stores all ZIM classes globally.
This will overwrite the JavaScript Blob and Window class.
To prevent this, zns can be set to true in a script before zim is imported.
Then import zim and at the top of the app script run zimplify(["Window", "Blob"]);
at which point ZIM Window and ZIM Blob would need the zim namespace
but the other classes would need no namespace
and the JavaScript Window and Blob would be available as Window and Blob like usual.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// before calling the ZIM script we set the zim namespace to true
// note, by default, zns=false and no zim namespace is needed
<script>zns=true;</script>
// then in the script we would have to use the namespace
const circle = new zim.Circle(50, green);
// calling zimplify() will avoid that:
zimplify();
const circle2 = new Circle(50, green);
// and we can use zim functions directly
const random = rand(500);
// note - do not use:
const rand = rand(500); // as you will overwrite the rand() reference
PARAMETERS
exclude - (default null) a String command or an array of command strings to not remove the zim namespace
CLOSE ▲PAGE ▤CODE ▤
fastFrame
Function
DESCRIPTION
It is recommended to use a ZIM Frame or if using Adobe Animate to use the ZIM Shim
but if you are just wanting to use some ZIM features and are working primarily with CreateJS
or legacy CreateJS code - then just call fastFrame() before using ZIM code.
Pass the createjs namespace and the current stage into fastFrame().
fastFrame() will create and return a very light placeholder frame as a zdf
and will handle various scaling settings due to ZIM Retina.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// fastFrame is not needed with ZIM Frame or with ZIM Shim
// imagine that CreateJS is imported as createjs - or cjs, etc.
const stage = new createjs.Stage("demoCanvas");
fastFrame(createjs, stage);
new Circle().center().drag(); // center will now default to centering on stage
PARAMETERS
createjs - (default null) a reference to the CreateJS namespace
stage - (default null) a reference to the CreateJS stage
CLOSE ▲PAGE ▤CODE ▤
addWires
Function
DESCRIPTION
Add wire(), noWire(), wired(), noWired() methods to any object
See the methods in docs under DiplayObject methods
These can be added to custom objects to wire properties.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const slider = new Slider().center();
const tabs = new Tabs({tabs:["summer", "fall", "winter", "spring"]}).pos(0,0,TOP,RIGHT);
const data = {size:10, season:"summer"};
// addWires returns the object data - which will now have the wired method
// now, when the slider or tabs change the data object will be updated
// note: we want the slider to be set to the object's start value so set the setSource to true
// note: we want the text of the tabs not the default index so need to provide input property
addWires(data).wired(slider, "size", null, true).wired({source:tabs, prop:"season", input:"text"});
S.on("stagemouseup", ()=>{zog(data);});
PARAMETERS
obj - the object to receive the wire and wired methods
RETURNS - obj for chaining
CLOSE ▲PAGE ▤CODE ▤
setBlurDetect
Function
DESCRIPTION
Function to detect browser Window being reduced or set to another tab.
Used by animate, interval and timeout to optionally pause these on blur and activate on focus
animate uses zim.pauseAnimateOnBlur and the interval and ticker use a zim.pauseOnBlur array
As of ZIM Cat 02 (patched) animate uses the target object tweenStates object to determine which animations to start again on focus
Used internally by ZIM - if an object has a pause(type) method then can add it to zim.pauseOnBlur array
to pause the object on window blur and unpause the object on focus
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// will count when window is not seen
const test = interval(1, obj=>{
zog(obj.count);
});
EXAMPLE
// will NOT count when window is not seen
const test = interval(1, obj=>{
zog(obj.count);
}, null, null, null, true);
EVENTS
adds a "tabblur" event to the ZIM Default Frame when blurred
and a "tabfocus" event to the ZIM Default Frame when focused
CLOSE ▲PAGE ▤CODE ▤
ZIMONON (note the extra ON at the end of ZIMON - so ZIMONON)
ZIM constant
*** this just turns ZIMON on - see docs for ZIMON next!
DESCRIPTION
Default is false - set to true to record arguments needed for ZIMON.stringify()
If not using ZIMON.stringify() then do not set this to true
See also Docs for Static Class ZIMON
BACKGROUND
Arguments are the values passed in to parameters.
These are stored in a LOCAL variable called arguments that belongs to the object
For ZIMON to stringify an object, it needs to have access to the arguments
So ZIMON requires objects to keep a PUBLIC record in an arguments property
This can add up in memory when the app has hundreds or thousands of objects
For instance, every rectangle, circle and line in a blob control would keep a record of its arguments
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
ZIMONON = true
new Frame({ready});
function ready() {
const circle = new Circle(100, blue);
const c = ZIMON.stringify(circle);
// store string c in localStorage or send to database
// ZIMON would only make a default circle if ZIMONON were not true
// we can parse a ZIMON string without needing ZIMONON set to true
// so if the app only read in a ZIMON string
// then there would be no reason to set ZIMONON to true
const cc = ZIMON.parse(cc).center(); // centers a blue circle
}
ZIMON
zim static class
DESCRIPTION
ZIMON stands for ZIM Object Notation
It turns any prepared** object to a string using ZIMON.stringify(object)
It turns a ZIMON string back into and object using ZIMON.parse(string)
The object can be inside an array [] or an object literal {}
These can be nested and filled with any type of object (that is prepared**)
See https://zimjs.com/zimon/ for an example
NOTE
must set ZIMONON=true at START of app to record arguments (note the extra ON)
it is not that much extra data but it is prudent to conserve memory when not using ZIMON
ZIMONON is needed only to stringify(), for parse() it does not matter
KEY
An optional key object can be used to specify the scope of the class
and to specify which properties to store for objects made from a class.
The scope must be a string accessible from where you stringify - it can contain dots (.)
The key can be passed as the second parameter to ZIMON.stringify().
The key is sent in the ZIMON string and nothing extra is needed when parsing.
PURPOSE
The purpose is similar to JSON - to save to localStorage or databases or share between languages.
Indeed, the final ZIMOM format is JSON.
Like JSON, ZIMON can be used outside of ZIM and outside JavaScript if implemented in another language.
See https://github.com/danzen/zimon/ for generic JS code to port to other languages.
** PREPARED OBJECTS
Any objects NOT supported by JSON must be prepared
so objects other than string, number, array, object literal, boolean or null
need to have the following:
1. A type property that matches the class name as a string
2. An arguments property that holds an array of the arguments passed to make the object
The ZIM Objects are already prepared - so no extra work is required
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const objects = [new Rectangle(100,100,red), new Circle(50, blue)];
const zimon = ZIMON.stringify(objects); // could save in localStorage or send to database
const newObjects = ZIMON.parse(zimon); // makes a Rectangle and Circle in a []
newObjects[0].center();
newObjects[1].center().animate({scale:.5}, 1);
zog(newObjects[0].color); // #fb4758 zim red
EXAMPLE
// pass a key for any properties to remember
const objects = [new Rectangle(100,100,red).alp(.5), new Circle(50, blue).sca(2).loc({x:200,y:200,add:false})];
const key = {Rectangle:{props:["alpha"]}, Circle:{props:["scale", "x", "y"]}};
const zimon = ZIMON.stringify(objects, key); // could save in localStorage or send to database
const newObjects = ZIMON.parse(zimon); // makes a Rectangle and Circle in a []
newObjects[0].center(); // would have alpha .5
newObjects[1].addTo().animate({scale:.5, x:W/2, y:H/2}, 1); // would start at scale 2 and x,y of 100,100
EXAMPLE
// To prepare custom objects:
Custom = function(a, b, c) { // ** global scope
this.type = "Custom"; // ZIMON uses a type property that matches the class name
// best to take copy of arguments and turn them into array
// otherwise any changes to argument values (setting defaults, etc) will be needlessly recorded
// when ZIMON.stringify() is eventually called
this.arguments = Array.prototype.slice.call(arguments);
this.write = function() {console.log(a, b, c);}
}
const c = new Custom("one", "two", "three");
const c2 = ZIMON.stringify(c);
const c3 = ZIMON.parse(c2);
c3.write(); // logs one two three
// ** or save in some namespace or on an object
F.Custom = function(a, b, c) {// same as above}
const c = new F.Custom("one", "two", "three");
// then use key as second parameter to specify scope
const c2 = ZIMON.stringify(c, {Custom:{scope:"frame"}}); // key
const c3 = ZIMON.parse(c2);
c3.write(); // logs one two three
EXAMPLE
// a built-in JavaScript Object:
const date = new Date(1982, 0, 10);
date.type = "Date"; // add date
date.arguments = [1982, 0, 10]; // and manual arguments
const d = ZIMON.stringify(date);
const d2 = ZIMON.parse(d);
zog(d2.getYear()); // 82
STATIC METHODS
stringify(obj, key) - supply an object to convert to a ZIMON string
the object can be any JSON ready object - string, number, array, object literal, boolean or null
the object can be any ZIM DisplayObject - Circle, Blob, Button, Tile, Emitter, etc.
the object can be a prepared custom or built in object
with a type property of the class name
with an arguments property of the arguments - see ** PREPARED OBJECTS above
Or any combination of these - ZIMON is recursive so checks parameters, etc.
the optional key can be used to specify scope for the class if not in global scope
and used to specify which properties should be recorded
the key has the following format:
{ClassName:{scope:"inScope.nested.etc", props:["prop1", "prop2", "etc"]}, ClassName2:{}, etc.}
stringify returns a ZIMON string in JSON format
eg.'{"obj":{"zimon":"Rectangle","args":[30,30,"#e472c4"]},"props":[0.3,212,184]},"key":{"Tile":{"props":["alpha","x","y"]}},"zimon":1,"info":"https://zimjs.com/zimon/"}';
parse(string) - pass in the ZIMON string to turn back into an object (or objects within objects)
CLOSE ▲PAGE ▤CODE ▤VIDS
Wonder
zim class
DESCRIPTION
Wonder sends counts, times, and orders to a server for user testing or statistical purposes.
Go to https://zimjs.com/wonder/ to get a Wonder ID (wid) and set up Wonder stats with ZIM
or make up your own wid and use your own server script to collect data.
See the zim Wonder site for the data fields that are sent.
NOTE
all records at ZIM are archived NEW YEARS DAY and kept for a year after that.
Service is provided as is and ZIM and Dan Zen are not responsible for lost data.
USAGE
count will count things like app loads, button clicks within an app, how many monsters they killed
time will tell you the time the user took to do something - like solve a puzzle, or locate the witch
order will record the order items were done - which section did they go to first, second, third, etc.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// make a Wonder object
// wonderID is e-mailed to you when you sign up
// client is your client's name that you provide
// app is the app for which you are recording data
// you can also pass an optional note
var wonder = new Wonder("wonderID", "client", "app");
// COUNT EXAMPLE
// for this example we count times a button is pressed
const button = new Button("CLICK").center();
button.on("click", ()=>{
// records an entry for this keyword in your stats
// along with date, time, session, etc.
wonder.count("wow");
});
// TIME EXAMPLE
// assuming we have our Wonder object from above
// (you only need one Wonder object)
// start the timer counting for a keyword called "test"
// this will record nothing until you timeEnd()
// or you timeStart() again
// you can also timePause() and timeUnpause()
// see DOCS for more functionality and information
wonder.timeStart("test");
// add the circle
const circle = new Circle(100, red).center().drag();
circle.on("pressup", function(){
if (circle.hitTestRect(square)) {
// if the shapes are hitting then end the timer
// this will send data to your Wonder report
wonder.timeEnd("test");
}
});
// add the square to a random location on stage
const square = new Rectangle(100, "yellow").loc(rand(W-square.width), rand(H-square.height));
// ORDER EXAMPLE
// assuming we have our Wonder object from above
// (you only need one Wonder object)
// make tabs
const tabs = new Tabs(400, 40, ["MOUSE", "CAT", "MONKEY"]);
tabs.index = -1; // start with no selection
let count = 0; // perhaps get the first four presses
tabs.center().change(()=>{
// record which tab was pressed
// this gets stored under keyword animal
wonder.order("animal", tabs.text);
count++;
// turn the order recording off for "animal"
if (count == 4) wonder.orderOff("animal");
});
PARAMETERS supports DUO - parameters or single object with properties below
wid - string with your company wonder ID for example z14i46m3z29
this is the ID you are e-mailed when you sign up or sign in with your company name
this is NOT your company name that you log into Wonder with
NOTE: recording to a non-registered wid on the ZIM server will not work and there is no error message
client - the client the app is for - if it is for your company, just put your company
app - the app or site the Wonder stats are for
notes - (default null) any extra notes like any user data (limit 256 characters as it is stored each record)
server - a server with zim Wonder running
Note: the default value for the server parameter has been removed as it risks being out-of-date
If you have signed up for ZIM Wonder at https://zimjs.com/wonder/ then
import https://zimjs.org/cdn/zimserver_urls.js in your code (script tag up top)
this gives a global zimWonderURL variable for you to pass into the server parameter
the zimserver_url.js script will always hold the latest domain:port for the zim server
METHODS
count(keyword) - sends a line to the server script with the given keyword as well as date and time
timeStart(keyword) - starts timing for the specified keyword (nothing sent to server yet)
timePause(keyword) - pauses the timing for this keyword
timeUnpause(keyword) - unpauses the timing for this keyword
timeEnd(keyword) - ends timing for the specific keyword and sends the time to the server
NOTE: if the user exits the app (or leaves page) nothing gets sent to the server
due to unreliable beforeUnload events in the HTML world (otherwise all this would be batched)
order(keyword, item) - sends a line to the server for this item along with a unique order id for the keyword for the user
countOff(keyword) - prevents counts from being sent for this keyword
countOn(keyword) - allows counts from being sent for this keyword (default)
timeOff(keyword) - prevents sending time to the server for this keyword
timeOn(keyword) - allows sending time to the server for this keyword (default)
orderOff(keyword) - prevents sending orders to the server for this keyword
orderOn(keyword) - allows sending orders for this keyword (default)
dispose() - clear any event listeners, etc.
CLOSE ▲PAGE ▤CODE ▤
VERSION
zim constant
DESCRIPTION
The version of the ZIM code that is running.
The version is considered the file name after the CDN and before the .js or _doc.js.
For example, the first version of ZIM Cat is cat/00/zim for both the docs version and the minified version
See also the ZIM getLatestVersions() function for the latest versions of ZIM and other ZIM related files.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// the latest versions are on the CDN
// getLastestVersions will access them with ZIM async()
// and provide an versions object in the parameter of the callback function
getLatestVersions(function(versions) {
if (VERSION == versions.zim) zogg(VERSION + " is the latest version");
else zogy(VERSION + " is not the latest version");
});
getLatestVersions
zim function
DESCRIPTION
Gets the latest versions of ZIM and other ZIM related files.
A version is considered the file name after the CDN and before the .js or _doc.js.
For example, the first version of ZIM Cat is cat/00/zim for both the docs version and the minified version.
The versions for CreateJS on ZIM CDN might be 1.3.0/createjs and for Pizzazz 3 is pizzazz_03
Also see the ZIM VERSION constant for the current version
NOTE
also see the top of the Docs for all the latest files
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// the latest versions are on the CDN
// getLastestVersions will access them with ZIM async()
// and provide an versions object in the parameter of the callback function
getLatestVersions(function(versions) {
if (VERSION == versions.zim) zogg(VERSION + " is the latest version");
else zogy(VERSION + " is not the latest version");
});
PARAMETERS
call - a callback function with a versions object is provided to the parameter
the version object has version properties for the following:
zim, createjs,
pizzazz01, pizzazz02, pizzazz03,
physics, three, game, socket,
threejs, orbitcontrols, box2d, socketio, easystar
CLOSE ▲PAGE ▤CODE ▤
PWA
zim class extends a CreateJS EventDispatcher
DESCRIPTION
Class to insert a message for the user to add the app
to their mobile device home screen.
PWA
Progressive Web Apps (PWA) are a way to run Web apps similar to native apps.
These are used primarily for mobile so the app runs without the Browser interface
and also can run without the Internet, if a proper service worker is set up.
See https://zimjs.com/mobile
ZIM ZAPPS
There are a few requirements and files that need to be set up for PWA.
See the ZIM Zapps PWA page at https://zimjs.com/zapps.html
The extra PWA files can be made with a tool at https://zimjs.com/zapps
The PWA class inserts a message into a ZIM app if both the following are true:
1. the app is on mobile
2. the app is not being launched already from the device home screen
The message encourages the user to add the file to the home screen (A2HS).
https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Add_to_home_screen
HOW IT WORKS
Make a new PWA() object and pass it an optional function that runs your app.
In either case, an invite the user to add to the home screen message will pop up
if the app is on mobile running from a browser - otherwise there will be no message.
A. If there is no function then the pane can be closed and that is it.
If you want the pane to show up on top then add new PWA() at the end.
B. If a function is provided - eg. new PWA(init); then
when the pane is closed it will call the init function.
If there is no need for a message then PWA() calls the init function right away.
NOTE
the ZIM Zapps tool will insert a PWA call - which can be adjusted if necessary.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
function ready() { // Frame ready callback
// PWA will show a message if user is on mobile and launching from a browser
// The app will wait until the message is closed then start
// or will run right away if there is no message needed
// such as when not on mobile or already launching from home screen on mobile
// to test the app on desktop, use new PWA(init).show();
new PWA(init);
function init() {
// your app code
// init is a common function name to start an app
// but the function can be called whatever you want
// such as startApp, playGame, etc.
}
} // end ready
EXAMPLE
function ready() { // Frame ready callback
// Here we run the app and just add a PWA message on top
// only if user is on mobile and launching from a browser
// no message would appear if not on mobile or already running from home screen on mobile
// add app code here
new PWA(); // add at end to pop on top of app
} // end ready
EXAMPLE
function ready() { // Frame ready callback
// like the last example but may want to start the app
// when the user closes the message or if there is no message
// add app code here
// etc.
// function to start animation, for example
function startAnimation() {
}
const pwa = new PWA(); // add at end to pop on top of app
// this event will fire if there is no message or when message is closed
pwa.on("ready", startAnimation);
} // end ready
PARAMETERS supports DUO - parameters or single object with properties below
call - (default null) the function to call to start the app
if left out then nothing will happen when the PWA closes (also see ready event)
label - (default "Please add to home screen as an app") along with an icon at left
can add different words here or add a custom ZIM Label
backgroundColor - (default yellow) background color of pane (any CSS color)
color - (default black) font color of label on pane (any CSS color)
backdropColor - (default "rgba(0,0,0,.2)") the color of the background that fills the stage
pane - (default null) can specify a custom Pane instead of the last four parameters
this will be scaled to the 105% the stage width unless noScale is set to true (see below)
noScale - (default false) set to true to not scale the Pane (see pane parameter for custom pane)
METHODS
show() - test the PWA message on desktop for instance - remember to remove the show!
EVENTS
dispatches a ready event if the pane is closed or if there was no pane
but usually, just pass the callback as the first parameter
CLOSE ▲PAGE ▤CODE ▤VIDS
QR
zim class extends a ZIM Bitmap which extends a CreateJS Bitmap
DESCRIPTION
Class to make a QR Code Bitmap from a QRCode library by David Shim
NOTE
must import https://zimjs.org/cdn/qrcode.js in a script tag
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
PARAMETERS supports DUO - parameters or single object with properties below
url - (default "https://zimjs.com") url string the QR code will open
color - (default black) the darker color
backgroundColor - (default white) the lighter color
size - (default 256) the width and height of the QR code
clickable - (default true) set to false to not click the QR code to go to the URL
correctLevel - (default 2) numbers from 0(M), 1(L), 2(H), 3(Q) corresponding to density
Info from: https://blog.qrstuff.com/2011/12/14/qr-code-error-correction
The lower the error correction level, the less dense the QR code image is, which improves minimum printing size.
The higher the error correction level, the more damage it can sustain before it becomes unreadabale.
Level L or Level M represent the best compromise between density and ruggedness for general marketing use.
Level Q and Level H are generally recommended for industrial environments where keeping the QR code clean or un-damaged will be a challenge.
CLOSE ▲PAGE ▤CODE ▤
const gif = new GIF("path/file.gif", 200, 100).center();
timeout(1, ()=>{
gif.reset(); // goes back to start and would play from start
// to pause on reset seems to need a little time...
timeout(.05, ()=>{
gif.pause();
timeout(1, ()=>{
// start again
gif.pause(false);
});
});
});
PARAMETERS supports DUO - parameters or single object with properties below
file - url string to the animated gif
also see ZIM PATH global variable as will get added to the start of the file
and is also automatically set if a path is added to Frame() or loadAssets() parameters
width - (default 100) the width to show the gif
height - (default 100) the height to show the gif
startPaused - (default false) set to true to startPaused
also see the pause() method - but do not use the method to start paused
METHODS
pause(state) - pause or unpause the gif
state defaults to true, set to false to unpause the gif
see also the startPaused parameter
stop() - stop the gif (same as dispose())
keyout(color, tolerance, replacement) - remove color from Bitmap and a tolerance between 0-1
the default color is "#389b26" which is a medium dark green
the default tolerance is .1 - the higher the tolerance the less sensitive the keying process - so more colors will be removed similar to the provided color
color and tolerance can be an array of colors and tolerances (or just one tolerance if all are the same)
replacement (default clear) a color to replace the keyed out color with or an optional array to match the colors array if an array is used
reset() - restarts the GIF
dispose() - delete the GIF and remove Ticker
ALSO see the gifler property to access the Gifler object and its methods
at https://themadcreator.github.io/gifler/
ALSO see ZIM Bitmap for properties such as:
width, height, widthOnly, heightOnly, draggable, level, depth, group
blendMode, hue, saturation, brightness, contrast, etc.
PROPERTIES
type - holds the class name as a String
paused - get whether the animated gif is paused - see pause() to change
ticker - the ZIM Ticker function that is updating the stage
gifler - the Gifler object - see https://themadcreator.github.io/gifler/
animator - the Gifler animator
CLOSE ▲PAGE ▤CODE ▤
Rive
zim class extends the Rive class
DESCRIPTION
Rive lets you make interactive graphics and animations. See https://rive.app/
Rive is an animation tool similar to Adobe Animate (Flash) but with a special StateMachine
that has a connector node system to guide animation states.
Many Rive animations can be done in ZIM with animate() and call back functions.
The interactivity provided by Rive listeners, can be events in ZIM.
The benefit of embedding Rive apps in ZIM is that there are many Rive animators making animations.
Rive also has a bone system that will offer more flexible animations
somewhat like animating points of Blob and Squiggle, but the points are connected by a spine (bones)
Adobe Animate has all these things too (except for a StateMachine) so keep that in mind.
Rive apps can be displayed in ZIM using one of two classes
Rive() which handles animation, input and nodes
RiveListener() which is for when a listener is assigned in Rive like pressmove, pressdown or pressup
The listener version takes a few seconds to load the WASM code and then is quick.
NOTE
Must import https://unpkg.com/@rive-app/canvas@2.17.3.js or newer in a script tag
USAGE: If you make your own Rive files, we would recommend using inputs NOT listeners.
This allows you to use Rive() rather than RiveListener()
and the inputs can be operated with ZIM events.
This will make load time faster and give you integrated control.
The only time you might need listeners is if you have many animated objects in one Rive file
as opposed to a single object animation.
ZIM cannot apply events on individual objects in a Rive scene
so in this case, you would need to add Rive listeners and use RiveListener().
USAGE: The Rive object is NOT a ZIM DisplayObject but rather a Rive object.
So it will have the methods and properties of a Rive object as outlined here:
Rive API (parameters, methods and properties)
https://rive.app/community/category/web-js-runtime/sgq3f0LKKP2X
From: https://rive.app/community/doc - press Getting Started then Web (JS)
USAGE: The Rive object has a display property that IS a ZIM DisplayObject
This is a dynamic Bitmap and is what you add to ZIM and operate on just like any other DisplayObject
with center(), loc(), pos(), reg(), sca(), animate(), wiggle(), tap(), etc.
Keeping the rive file bigger in dimensions, then scaling down in ZIM may lead to better quality
NOTE
if using Rive and Blobs, sometimes Rive apps use embedded images that need the JavaScript Blob()
ZIM disables Blob until the Rive app is loaded. Possibly this could conflict with a ZIM Blob
being made at the same time as the Rive app. In that case, use zim.Blob() for the blob.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
SEE: https://zimjs.com/rive/animate.html
SEE: https://zimjs.com/rive/input.html
SEE: https://zimjs.com/rive/node.htmlEXAMPLE
const r = new Rive({
src: "test.riv",
width: 500,
height: 500,
autoplay: true,
stateMachines: "StateMachine 1",
artboard: "Artboard", // optional
});
// add the display property of the Rive object to the stage (not the Rive object itself)
r.display.sca(.5).centerReg();
PARAMETERS supports DUO - parameters or single object with properties below
** These parameters come from Rive - except width and height which are used to make a canvas
** Rive documentation is a tricky to track down - start here: https://rive.app/community/doc - press Getting Started then Web (JS)
** This information comes from https://rive.app/community/category/web-js-runtime/sgq3f0LKKP2X
width - (default 500) the width of the canvas that ZIM Rive() will make - or see canvas parameter for an existing canvas
Keeping the rive file bigger in dimensions, then scaling down in ZIM may lead to better quality
ZIM Rive() only - for actual Rive, a canvas needs to be provided, with ZIM Rive() we make the canvas
height - (default 500) the height of the canvas that ZIM Rive() will make - or see canvas parameter for an existing canvas
ZIM Rive() only - for actual Rive, a canvas needs to be provided, with ZIM Rive() we make the canvas
src - the URL to the .riv file. Below is the information from the Rive site:
There are two optional ways to use src: either via URL to the .riv file, or a path to the public .riv asset to use. One of src or buffer must be provided.
URL - If you are hosting your .riv on some publicly accessible bucket/CDN (i.e. AWS, GCS, etc.), you can pass in the URL here.
Alternatively, with ES6, you may import the .riv file as a data URI.
Depending on your bundle loader, you may need to use a plugin (i.e url-loader for Webpack) to properly parse and load in .riv files as a data URI string.
stateMachines - Name of state machines to load.
artboard - Name of the artboard to use.
animations - Name or list of names of animations to play.
autoplay - If true, the animation will automatically start playing when loaded. Defaults to false.
layout - Layout object to define how animations are displayed on the canvas.
buffer - ArrayBuffer containing the raw bytes from a .riv file. One of src or buffer must be provided.
file - Lets you reuse a previously loaded Rive runtime file object without needing to fetch it again from the src URL or reload it from the buffer.
This can improve performance by eliminating redundant network requests and loading times, especially when creating multiple Rive instances from the same source.
Unlike the buffer and src parameters, which still require parsing under the hood to create a runtime file object, the file parameter uses an already parsed object, including any loaded assets.
useOffscreenRenderer - Boolean flag to determine whether to use a shared offscreen WebGL context rather than create its own WebGL context for this instance of Rive.
This is only relevant for the @rive-app/webgl package.
If you are displaying multiple Rive animations, it is highly encouraged to set this flag to true. Defaults to false.
enableRiveAssetCDN - Allow the runtime to automatically load assets hosted in Rive's CDN. Enabled by default.
shouldDisableRiveListeners - Boolean flag to disable setting up Rive Listeners on the <canvas> element,
thus preventing any event listeners from being set up on the element.
Rive Listeners by default are not set up on a <canvas> element if there is no playing state machine, or a state machine without any Rive Listeners set up on the state machine
isTouchScrollEnabled - For Rive Listeners, allows scrolling behavior to still occur on canvas elements when a touch/drag action is performed on touch-enabled devices.
Otherwise, scroll behavior may be prevented on touch/drag actions on the canvas by default.
automaticallyHandleEvents - Enable Rive Events to be handled by the runtime. This means any special Rive Event may have a side effect that takes place implicitly.
For example, if during the render loop an OpenUrlEvent is detected, the browser may try to open the specified URL in the payload.
This flag is false by default to prevent any unwanted behaviors from taking place.
This means any special Rive Event will have to be handled manually by subscribing to EventType.RiveEvent
onLoad - Callback that gets fired when the .riv file loads.
onLoadError - Callback that gets fired when an error occurs loading the .riv file.
onPlay - Callback that gets fired when the animation starts playing.
onPause - Callback that gets fired when the animation pauses.
onStop - Callback that gets fired when the animation stops playing.
onLoop - Callback that gets fired when the animation completes a loop.
onStateChange - Callback that gets fired when a state change occurs.
onAdvance - Callback that gets fired every frame when the Artboard has advanced.
assetLoader - Callback that gets invoked for every asset detected in a Rive file (whether included or excluded).
The callback is passed a reference to a Rive FileAsset and associated bytes for the file (if the asset is embedded in the file).
In this callback, you'll determine whether or not to load the asset in your app yourself, or have Rive do it for you.
canvas - an existing canvas, in which case, the width and height are ignored
METHODS
play(names, autoplay) - Plays a specified linear timeline animation(s) or state machine via the passed-in name or array of names
Useful if you have either programmatically called pause() or stop() or set autoplay: false when instantiating Rive.
If no name is passed in, it plays all instantiated timeline animations or state machines (or the default animation if neither is instantiated).
pause(names) - Pauses a specified linear timeline animation(s) or state machine via the passed-in name or array of names.
Useful if you want to programmatically pause the playing animation and pause the render loop.
You may want to use this API too if the associated Rive instance's <canvas> element is scrolled offscreen.
If no name is passed in, it pauses all instantiated timeline animations or state machines.
stop(names) - Stops a specified linear timeline animation(s) or state machine via the passed-in name or an array of names.
Useful if you want to programmatically stop the playing animation and render loop.
You may want to use this API too if the associated Rive instance's state machine is "done," or in an exit state.
If no name is passed in, it stops all instantiated timeline animations or state machines.
scrub(animationNames, seconds) - Scrubs through (a) linear timeline animation(s) by a specified amount of seconds.
This will not do anything if you are playing through a state machine. This only applies if you are using instantiated animations through the animations property.
reset(params) - Resets the Rive Artboard, linear timeline animations, and/or the state machine from the start (or entry state) based on the parameters passed in.
Implicitly, this method will also cleanup any existing instances (Artboard, Animation, and/or State Machine) created already before creating new ones.
The instantiated timeline animation or state machine will play immediately depending on the autoplay property passed in.
on(type, function) - Similar to the Web API's addEventListener functionality on DOM elements, you can subscribe to specific "events"
in a render loop cycle via providing an EventType enum and a callback for the runtime to invoke with different parameters depending on the event you want to subscribe to.
See events, below.
off(type, function) - Similar to the Web API's removeEventListener functionality on DOM elements, you can unsubscribe to specific "events"
in a render loop cycle via providing an EventType enum and the callback reference that was registered via the on() API.
removeAllEventListeners() - This effectively removes all event listening subscriptions for a single particular EventType that may have been added via the on() API.
stateMachineInputs() - Returns a list of state machine input objects from the given state machine name passed in (if the state machine has been instantiated).
Use these state machine inputs to drive the state machine forward.'
dispose() - dispose the Rive object
** more methods and properties at https://rive.app/community/doc/rive-parameters/docHI9ASztXP
cleanup(), cleanupInstances(), load(), resizeToCanvas(), resizeDrawingSurfaceToCanvas(), stopRendering(), startRendering()
getTextRunValue(), setTextRunValue(), resolveAnimationFrame(), enableFPSCounter(), disableFPSCounter()
PROPERTIES
type - holds the class name as a String
display - a ZIM Bitmap that is constantly updated with the Rive animation - this is what gets added to the stage, etc.
canvas - the canvas used (and hidden)
content - contents is just a property on the Rive instance you can log to the console to see an object hierarchy of what was loaded in from the Rive file.
This is useful to see what Rive file was loaded in, all the artboards associated with the file, animations and state machines, state machine inputs, and more.
It's also useful if you don't have access to the file to inspect in the Rive editor directly.
source - get the src attribute in the Rive instance
activeArtboard - get the name of the active artboard
animationNames - get an array of all animation names on the loaded in Artboard (even if the animations are not specified at instantiation)
stateMachineNames - get an array of all state machine names on the loaded in Artboard (even if the state machine(s) are not specified at instantiation)
playingAnimationNames - get an array of all active playing timeline animation names on the Rive instance (if you are playing a state machine, this will not return the currently active state timeline animations)
playingStateMachineNames - get an array of all active playing state machine names on the Rive instance
pausedAnimationNames - get an array of all active paused timeline animation names on the Rive instance (if you are playing a state machine, this will not return the currently active state timeline animations)
pausedStateMachineNames - get an array of all active paused state machine names on the Rive instance
isPlaying - returns true if any animation is playing
isPaused - returns true if all instanced animations are paused
isStopped - returns true if no instanced animations are playing or paused
bounds - returns the bounds of the Artboard
layout - get or set a Rive Layout
EVENTS
load - dispatched when Rive has successfully loaded in the Rive file
loaderror - dispatched when Rive cannot load the Rive file
play - dispatched when Rive plays an entity or resumes the render loop
pause - dispatched when Rive pauses the render loop and playing entity
stop - dispatched when Rive stops the render loop and playing entity
loop - (Singular animations only) dispatched when Rive loops an animation
advance - dispatched when Rive advances the animation in a frame
statechange - dispatched when a Rive state change is detected
riveevent - dispatched when a Rive Event gets reported
CLOSE ▲PAGE ▤CODE ▤VIDS
RiveListener
zim class extends a CreateJS EventDispatcher
DESCRIPTION
Some Rive files have Rive Listeners to capture pointerdown, pointerup, pointermove, etc.
RiveListener() is like Rive() - see Docs on Rive() - but lets ZIM trigger these listeners.
The system to do so is fairly complex, involving using the Rive advanced-canvas with WASM.
One draw-back is the WASM takes 5-10 seconds to load the first time - then it is fast.
ZIM must run the render loop and take care of artboards and stateMachines.
USAGE: If you make your own Rive files, we would recommend using inputs NOT listeners.
This allows you to use Rive() rather than RiveListener()
and the inputs can be operated with ZIM events.
This will make load time faster and give you integrated control.
The only time you might need listeners is if you have many animated objects in one Rive file
as opposed to a single object animation.
ZIM cannot apply events on individual objects in a Rive scene
so in this case, you would need to add Rive listeners and use RiveListener().
NOTE
Need to import Rive canvas-advanced (may need to match WASM version) and set RiveCanvas on window for ZIM to use
import RiveCanvas from "https://unpkg.com/@rive-app/canvas-advanced@2.20.0";
window.RiveCanvas = RiveCanvas;
SEE: Rive() in the docs for general methods and properties of the Rive object
SEE: https://zimjs.com/rive/listen.htmlEXAMPLE
const stasher = new zim.RiveListener("https://public.rive.app/community/runtime-files/12127-23059-stasher-character.riv");
stasher.on("ready", ()=>{
stasher.display.scaleTo().center();
});
const button = new RiveListener("https://public.rive.app/community/runtime-files/12375-23478-switcher.riv");
button.on("ready", ()=>{
button.display.sca(.5).pos(0,0,RIGHT,BOTTOM);
button.on("pointerup", e=>{
// Original Rive way:
// stasher.pauseMove = !e.stateMachine.input(0).asBool().value // sigh
// or use e.input for first input (input is an event object property added by ZIM RiveListener)
// pauseMove, pauseUp, pauseDown are properties added by ZIM RiveListener to disable/enable the listeners
stasher.pauseMove = !e.input.asBool().value; // or !button.input.asBool().value
});
// button.stateMachines[0].input(0).asBool().value = true;
// or use input as default first stateMachine input
button.input.asBool().value = true;
});
PARAMETERS supports DUO - parameters or single object with properties below
src - URL to the .riv file with Listeners
damp - (default .2) damps the pointermove data - set to 1 to not damp.
canvas - an optional canvas to place Rive - not needed as ZIM makes the canvas (and hides it)
wasm - (default "https://unpkg.com/@rive-app/canvas-advanced@2.20.0/rive.wasm") the version of canvas-advanced wasm
this may need to match the version of Rive canvas-advanced imported at top of app
METHODS
** See Rive() for Rive methods on the rive property
dispose() - dispose the RiveListener object and parts
PROPERTIES
type - holds the class name as a String
display - a ZIM Bitmap that is constantly updated with the Rive animation - this is what gets added to the stage, etc.
canvas - the canvas used (and hidden)
rive - the Rive object made - see Rive() in Docs for methods and properties of the Rive object
renderer - the Rive renderer
file - gives access to artboards loaded via artboardByIndex(), artboardByName(), artboardCount() and defaultArtboard()
artboards - an array of artboards
animations - an array of animations
stateMachines - an array of stateMachines
input - the first input of the default stateMachine
pauseMove (default false) set to true to not dispatch pointermove events
pauseDown (default false) set to true to not dispatch pointerdown events
pauseUp (default false) set to true to not dispatch pointerup events
EVENTS
complete / ready - the rive app is ready
pointerdown - dispatches a pointerdown event when pointer is down
with event object stateMachine and input (first input) properties
pointerup - dispatches a pointerup event when pointer is up
with event object stateMachine and input (first input) properties
** use a riveListener.display.on("mousemove", ()=>{}) to get pointermove
CLOSE ▲PAGE ▤CODE ▤VIDS
THEME
zim static class
DESCRIPTION
ZIM Theme changes the ZIM colors to themed sets of colors
and it can set darkness (and lightness with negative) and tint as well.
Use the class directly like: Theme.set("themeName");
This affects everywhere a ZIM color is used AFTER the theme is set.
This includes default colors for components like Button colors, etc.
but not some interface colors like Squiggle and Blob control colors.
Use Theme.set("zim") to go back to traditional ZIM colors.
This will go back to ZIM colors for anything made afterwards
but will not change objects that are already made.
To change colors of objects already made, use Theme.apply("themeName");
Warning: using Theme.apply() will reload the page.
To apply new theme colors to objects already made without reloading the page
use Theme.set() and then adjust button.backgroundColor = red; etc.
A read-only THEME global object is set when a theme is set or applied.
An applied theme will be re-applied when the page is reloaded.
Use Theme.clear() to reload the page with no theme set.
COLORS AND SHADES
Themes will work on the following built in ZIM colors and shades (no quotes):
red, orange, yellow, green, blue, purple, pink, brown, interstellar
black, licorice, darker, dark, charcoal, grey, granite, tin, pewter, silver, fog, mist, light, moon, lighter, white
Note: the shades are #000, #111, etc. to #eee, #fff
THEMES
There are colors and greys (including white and black).
"zim" - the original ZIM colors and greys
"html" - the colors are replaced with HTML version so blue is "blue". Greys left the same.
"future" - the colors and greys are taken from AI visions of the future.
"invert" - the colors and the greys are inverted - as in a difference against white.
"greyscale" - the colors are set to greys.
"neon" - even more vibrant than ZIM colors! Greys are set towards white and black.
"seventies" - check out the shag on my app - greys are adjusted too.
"warm" - lovely mediterranean colors... mmm - greys are adjusted too.
CUSTOMIZE
An object literal with colors and values can be passed to set() or apply() as the first parameter
And a lightness ratio from -1 to 1 can be applied with negative making the colors darker
So Theme.set("zim", .3); would lighten all the regular ZIM colors and greys by 30% for objects made after setting.
Theme.apply("future", -.2); would reload the page and apply a future colors and greys 20% darker.
The 3rd and 4th parameters are for tint and tintRatio - just like ZIM toColor().
So Theme.set("zim", 0, red, .5) would make all ZIM colors and greys be half way to red.
The last parameter is exceptions which can be one color or an array of colors to not apply the theme to.
Special "colors" and "greys" strings can be used to not include all colors or all greys.
So Theme.set("zim", 0, red, .5, "greys"); would redden only the colors.
Theme.set("future", .2, null, null, ["yellow", "white"]); would except yellow and white.
See: https://zimjs.com/zim/theme.htmlNOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// This will make three buttons, two with zim theme and one with greyscale theme
new Button().loc(100,100); // will be ZIM colors
Theme.set("greyscale");
new Button().center(); // will be in greyscale
Theme.set("zim");
new Button().pos(100,100,RIGHT,BOTTOM); // will be ZIM colors
EXAMPLE
F.color = darker;
new Tile(new Circle(30, [blue, green, red, orange, yellow]), 12, 5, 20, 20).center();
const button = new Button({label:THEME.name=="neon"?"ZIM":"NEON"}).pos(0,30,CENTER,BOTTOM).tap(()=>{
if (button.text=="NEON") Theme.apply("neon"); // will reload page as neon
else Theme.apply("zim"); // will reload page as zim
});
EXAMPLE
Theme.set("zim", .1, red, .2, "greys");
// anything that gets made from now on will have slightly lighter zim colors tinted a little red
// but the greys will remain default
EXAMPLE
Theme.set("zim", -.5, null, null, "colors");
// anything that gets made from now on will have darker greys
METHODS
set(name, lightenRatio, tint, tintRatio, exclude) |ZIM DUO| - set a theme to be used after setting
name (default "zim") one of "zim", "html", "future", "invert", "neon", "seventies", "warm"
lightenRatio (default null) set between -1 and 1 to darken (to black) if negative or lighten (to white) if positive
this works like ZIM lighten()
tint (default null) a color to tint to
this works like ZIM toColor(tint, ratio)
tintRatio (default 0) set between 0-1 to apply a ratio of tint
exclude (default none) a color or array of colors to exclude - these will stay ZIM default colors
convenience colors: "colors" and "greys" can also be used to exclude all colors or all greys
apply(name, lightenRatio, tint, tintRatio, exclude) |ZIM DUO| - relaod the app with the applied theme
see the parameters for set() above
clear() - reloads the page with no theme set
to stop applying a theme going forward, use set("zim") for the default ZIM colors
CONSTANTS
THEME - a Theme object literal with name, lightnessRatio, tint, tintRatio and exclude properties - see set() method parameters
CLOSE ▲PAGE ▤CODE ▤
LeaderBoard
zim class - extends a zim.Container which extends a createjs.Container
** MUST import zim_game - see https://zimjs.com/es6.html#MODULESDESCRIPTION
Shows leaders in a game. Allows player to enter initials if in top players as set by the total parameter (default 10)
For the data parameter you can set an ID for ZIM data storage - get the ID at https://zimjs.com/leaderboard/
Or you can set the data parameter to "localStorage" for device only or "manual" for data from a custom database
See the ZIM ZONG game example for putting a LeaderBoard in a zim.Pane https://zimjs.com/zong/
NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const lb = new LeaderBoard({
data:"E-MAILED CODE FROM zimjs.com/leaderboard/",
corner:0,
backgroundColor:dark,
titleColor:light
}).center();
// then to record a score at some point later:
lb.score(500);
PARAMETERS supports DUO - parameters or single object with properties below
data - (default "localStorage") localStorage will let a user keep their high score on a computer
set data to an ID that is provided at https://zimjs.com/leaderboard/ to use the free ZIM data service
set data to an Array of score objects: [{player:"RAJ", score:20}, {player:"DAN", score:18}] for manual database usage
title - (default null) - set to a String to create a title above the board
width - (default 400) - the width of the board
height - (default 600) - the height of the board
corner - (default 20) - the rounded corner of the board - set to 0 for no corner
backgroundColor - (default white) - the backing color of the board
titleColor - (default licorice) - the title text color if a title is provided
colors - (default the object detailed below) - an object literal that sets the colors of the boxes and texts
the object holds rank, name and score backing colors, font colors, and current colors for each
whatever properties you provide will overwrite the default color - but you do not have to provide them all
Note: that darker is just a ZIM shortcut to #111111, etc. you can use any CSS style color like "green", etc.
{
rankColor: light,
rankBackgroundColor: darker,
currentRankColor: white,
currentRankBackgroundColor: pink,
nameColor: darker,
nameBackgroundColor: lighter,
currentNameColor: darker,
currentNameBackgroundColor: "#f0d2e8",
scoreColor: darker,
scoreBackgroundColor: light,
currentScoreColor: darker,
currentScoreBackgroundColor: "#f0d2e8"
}
total - (default 10) the number of rows to show
scoreWidth - (default 300) the width of the score field (the whole grid will be scaled to fit inside the width and height)
scorePlaces - (default 6) the maximum number of digits expected
scoreZeros - (default false) set to true to fill in zeros up to the scorePlaces- ie. 00023
spacing - (default 10) the spacing between the fields (the whole grid will be scaled to fit inside the width and height)
arrows - (default false) set to true to show arrows above and below the name when the player enters their name
borderColor - (default null) the border color
borderWidth - (default null unless borderColor then default 2) the border thickness
shadowColor - (default rgba(0,0,0,.3)) the shadow color - set to -1 for no shadow
shadowBlur - (default 14) set to 0 for no shadow
reverse - (default false) put smallest score at top
allowZero - (default false) allow a zero score - good for when reverse is set
font - (default courier) the font for the store name and score
fontSize - (default 60) the font size
nameShift - (default 0) vertical shift for the name if the font is off center
scoreShift - (default 0) vertical shift for the score if the font is off center
rankShift - (default 0) vertical shift for the rank if the font is off center
METHODS
score(score) - set a score - will allow user to enter initials - returns a position number
save() - this method is automatically done by save button when initials are filled in
cancel() - this method is automatically called when the user presses off the board without saving
startTime() - start timing the game - if a points per minute was provided during ZIM LeaderBoard setup (not for localStorage or manual)
stopTime() - stop timing the game - if a points per minute was provided during ZIM LeaderBoard setup (not for localStorage or manual)
redraw(newData, newWinner) - this method is automatically done at various points to redraw the grid with new data
newData is in an array with score objects like so: [{player:"RAJ", score:20}, {player:"DAN", score:18}]
newWinner is an optional index of the winner - who will then be able to enter their id
leave out the newWinner to show the board with current scores set (no blanks for entering name)
dispose() - remove event listeners - you need to remove the LeaderBoard from the stage
NOTE
if you are using manual data then you can use any of these methods manually
NOTE
the leaderBoard extends a zim.Container so also has all container methods
PROPERTIES
winner - the index of the current winner if there is one (name getting entered) otherwise null
place - the index of the player's score even if not on the LeaderBoard
backing - reference to the zim.Rectangle used for the backing
backdrop - reference to the zim.Rectangle used for the backdrop to press off the LeaderBoard
filled - true if the winner name is filled in with three characters else false
grid - reference to the zim.Container used for the grid
the grid has row containers and each row has a rank stepper, three name steppers and a score Label
access these with:
var score2 = grid.getChildAt(1).getChildAt(4);
or to loop through all:
zim.loop(grid, function(row, i) {
var rank = row.getChildAt(0);
var name1 = row.getChildAt(1);
var name2 = row.getChildAt(2);
var name3 = row.getChildAt(3);
var score = row.getChildAt(4);
});
titleText - reference to the zim.Label used for the title if the title parameter is provided
dataSource - get the data used as a string: database (using an ID), localStorage or manual (custom)
NOTE: if there is a problem with your data ID then this will revert from database to localStorage
You can tell when you save a score / name the save button says LOCAL if localStorage and SENT if database or manual
key - the ID (from https://zimjs.com/leaderboard/) if provided
NOTE
the leaderBoard extends a zim.Container so also has all container properties
EVENTS
dispatches a change event for each time the name letters are changed changed
dispatches a press event for when the save button is pressed
dispatches a save event for when the data is saved in localStorage or database (key) mode but not manual mode
dispatches a close event only when the board is closed by pressing off the board
dispatches an error event if data connection is not made properly
dispatches a cancel event when a new score is requested before an older score is saved
CLOSE ▲PAGE ▤CODE ▤VIDS
Meter
zim class - extends a zim.Label
** MUST import zim_game - see https://zimjs.com/es6.html#MODULESDESCRIPTION
A meter that shows measured FPS in a text label
NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const meter = new Meter(stage, TOP, LEFT); // adds to stage at top left - default bottom left
PARAMETERS supports DUO - parameters or single object with properties below
stage - the stage
vertical (default "bottom") set to TOP for top - no middle
horizontal (default LEFT) set to RIGHT for right - no middle
color (default green) color of backing
textColor (default black) color of text
padding (default 20) the distance from Meter to edge
decimals (default 0) the number of decimals to show
alpha (default .6) the alpha of the Meter
skew (default 10) the skewX of the Meter
METHODS
position(vertical, horizontal) - reset the position - returns object for chaining
dispose()
PROPERTIES
text - the text of the meter
Plus all the methods and properties of a Label
CLOSE ▲PAGE ▤CODE ▤
Board
zim class - extends a zim.Container which extends a createjs.Container
** MUST import zim_game - see https://zimjs.com/es6.html#MODULESDESCRIPTION
Creates a square tiled board with num columns and rows.
This can be either isometric (default) or top view.
The info for the board can be for any number of rows and columns
that is the same size or bigger than the num for the board.
The info does not need to have the same number of columns and rows
The info holds data, color, icon and items properties
and is an outer array of rows and inner arrays for columns.
The info array can be specified as a parameter
or adjusted as a property later with array manipulations
but board.update() must be called to view the changes.
Board offers many properties and methods
to add and remove items, set colors, icons and data per square,
move the board and move items along paths, etc.
There is a powerful filter parameter that uses subsets of the info
This can be used to find random tiles with certain info
or to allow key presses only to certain tiles.
The filter is positive and negative to include or not include the following:
data, notData, color, notColor, icon, notIcon, info, notInfo, col, notCol, row, notRow
in each case it can be a single value or an array of values
for instance board.getRandomTile({data:"x", notItem:[tree, bush, rock]}); etc.
See: https://zimjs.com/iso/ for a full example
Note: as of game 2.0, the zim namespace is not required unless zns is true
EXAMPLE
// for a more complete example see https://zimjs.com/iso/
const board = new Board().center();
const person = new Person();
board.add(person, 5, 5);
const tile = board.getTile(2,3);
board.setColor(tile,red);
board.setData(tile,"0");
board.addKeys(person,"arrows",{notData:"0"});
PARAMETERS supports DUO - parameters or single object with properties below
size - (default 50) the square tile size in pixels
cols - (default 8) the number of visible columns on the board
rows - (default cols) the number of visible rows on the board
backgroundColor - (default lighter) the square color of the board
see the info parameter/property and setColor() to set individual colors
rollBackgroundColor - (default fog) the rollover square color of the board
borderColor - (default darker) the border color of the squares
borderWidth - (default 2) the border width of the squares
icon - (default null) the default DisplayObject to clone add to each tile
set the icon.type property to be included in filters - eg. icon.type = "poisonivy"
see the info parameter/property and setTile() to set individual tiles
isometric - (default true) set to false to see a top view
isometric is rotating the board 45 and scaling the container by 2 in the width
indicatorColor - (default black) the indicator shows a path with showPath()
indicatorBorderColor - (default darker) the border color of the indicator
indicatorBorderWidth - (default 8) the width of the border
indicatorSize - (default 2)
indicatorType - (default "circle") set to "circle" or "square" for the whole tile
arrows - (default true) show (auto) arrows if info is larger than board view
arrows will move the "camera" rather than move the board
so pressing right will move the board to the left, etc.
arrowColor - (default "rgba(0,0,0,.4)") the arrow color
arrowRollColor - (default white) the arrow roll color
swipe - (default true) set to false to not swipe on the board to move the board (like arrows)
info - (default null) set to an array of rows and cols in the following format:
Rows are the outer array and cols are the inner arrays with {} being the info
[[{data:"x", color:blue, items:[new Person()]},{},{},,,,,], [,,],,,,,,,,,,,,,,,]
data (default "x"): any data desired - could be data for path finding or an array, etc.
color (default backgroundColor): the color of the tile on the board when showing this info
items (default []): a list of items to display on the tile when showing this info
The info will be automatically filled in so just commas will do as placeholders
The max length of the inner arrays will be used for all inner arrays
The final length of rows and cols will be available as numCols and numRows
See also the methods for ways to add data, color, icon and items
Or use the board.info property any time to change the info - may need to board.update() after
The info may be bigger than the board size and does not have to be square like the board
labels - (default false) set to true to display the data from info in tiles - for debugging
color - (default granite) color of the labels
scaleMin - (default 1.2) the minimum items will be scaled when farther (top) from user
scaleMax - (default 1.8) the maximum items will be scaled when closer (bottom) to user
buffer - (default 3) nudge camera when moving item is this many tiles from the edge
applies when info is larger than board and keys or path is used to move item
set to 0 to not nudge camera
METHODS
**FILTER - some methods have an optional filter parameter
this will limit the method to work on a subset of the info array or tiles
the filter parameter is an object {} with any number of the following properties:
Note: for convenience, these also work in plural - for instance colors, notItems, cols, etc.
data - a value or array of data the info/tile must have
notData - a value or array of data the info/tile must NOT have
color - a value or array of color the info/tile must have
notColor - a value or array of color the info/tile must NOT have
icon - a value or array of the icon's type property the info/tile must have
notIcon - a value or array of the icon's type property the info/tile must NOT have
item - a value or array of items the info/tile must have
notItem - a value or array of items the info/tile must NOT have
col - a value or array of cols (in visible board) the info/tile must be in
notCol - a value or array of cols (in visible board) the info/tile must NOT be in
row - a value or array of rows (in visible board) the info/tile must be in
notRow - a value or array of rows (in visible board) the info/tile must NOT be in
positionBoard(i, j) - move the board to show data from info at j row and i col
see also startCol and startRow properties and moveRow() below
moveCamera(dir) - moves the camera LEFT, RIGHT, UP or DOWN
this moves the board the opposite direction by one tile
used internally by arrows and swiping
addCol(index) - add a column of default data at the given index (optional - at end of info if not provided)
addRow(index) - add a row of default data at the given index (optional - at end of info if not provided)
update() - updates data, colors and pieces for currently visible board
call this if the info is manually updated with array manipulation
getTile(col, row) - get the tile at a given col and row
isometric has cols from top to right and rows from top to left
getRandomTile(filter**) - get a random tile
or a random tile within a filtered set - see **FILTER at top of METHODS
getIndexes(tile) - get an object with col and row properties for tile
isometric has 0,0 is at top of board with cols going to right and rows going to left
getPoint(a,b) - get tile point (x, y) in items container
a is either tile (leave b blank) or pass in i and j info indexes
getGlobalPoint(a,b) - get the tile point (x, y) on global stage
a is either tile (leave b blank) or pass in i and j info indexes
getInfo(a,b) - get the info object for a tile {data:data, color:color, items:[items]}
a is either tile (leave b blank) or pass in i and j info indexes
getData(a,b) - get the data for a tile
a is either tile (leave b blank) or pass in i and j info indexes
getColor(a,b) - get the color for a tile
a is either tile (leave b blank) or pass in i and j info indexes
getIcon(a,b) - get the icon for a tile
a is either tile (leave b blank) or pass in i and j info indexes
getItems(a,b) - get the items array for a tile
a is either tile (leave b blank) or pass in i and j info indexes
getAllItems(filter**) - get an array of all items
or pass in a filter to get a filtered set - see **FILTER at top of METHODS
getTilesAround(a,b) - get an array of tiles around a tile [8 items clockwise from top]
a is either tile (leave b blank) or pass in i and j info indexes
setData(tile, value) - set the data for a tile
setColor(tile, color) - set the color of a tile
for setting items on the board use add() method
for setting items off the board or for setting the info
use board.info[j][j] = {data:data, color:color, items:[item, item, etc.]}
setIcon(tile, icon) - set the icon for the tile - also see icons parameter
clearInfo(filter**) - clear all the info or a filtered set - see **FILTER at top of METHODS
clearData(filter**) - clear all the info data or a filtered set - see **FILTER at top of METHODS
clearColors(filter**) - clear all the colors (to default color) or a filtered set - see **FILTER at top of METHODS
clearIcons(filter**) - clear all the icons (to default icon) or a filtered set - see **FILTER at top of METHODS
clearItems(filter**) - clear all the items or a filtered set - see **FILTER at top of METHODS
setArrows() - sets arrows to handle moving camera
these will automatically be show when needed (info is bigger than cols or rows)
removeArrows() - remove arrows
setArrowHover() - update hover - ZIM will do this automatically
setDepth() - set the stacking order of an item in items - ZIM will do this automatically
add(obj, col, row, data, color, icon) - add a DisplayObject to the board
this adds the object to the items container - and adds various properties (so do not addTo manually)
data is additional data - for instance that could be used in path finding
icon is any DisplayObject that will be centered in the Rectangle of the tile
set icon.type to be included in the filters - for instance, icon.type = "stone", icon.type = "trap"
remove(obj) - removes an object from the board
position(obj, col, row) - position an item at the col and row on the board
to position an object off the board remove the object and use board.info[j][i].items.push(obj);
the board will add the object when it needs to be shown
move(obj, cols, rows, time) - (relative) animates or places object a certain number of rows or cols on the board
time (default .5s) is the seconds to move ONE square! Also see ZIM TIME constant
moveTo(obj, col, row, time) - (absolute) animates or places object to a certain row or col on the board
time (default .5s) is the seconds to move ONE square! Also see ZIM TIME constant
showPath(path, time) - shows path indicators for a path
path has a format of [[x,y],[x,y]] or [{x:col, y:row}, {etc.}, {etc.}]
This accommodates an EasyStar path - see https://zimjs.com/iso/
time is in seconds. Also see ZIM TIME constant
clearPath() - clears the path
followPath(obj, path, time, animation, buffer) - animates object along a provided path
path has a format of [[x,y],[x,y]] or [{x:col, y:row}, {etc.}, {etc.}]
time (default .6s) is how long to take from one step to the next. Also see ZIM TIME constant
animation (default .3s) is how long to animate to get to the next step. Also see ZIM TIME constant
buffer (default 0) how many tiles from the edge before the camera is nudged
a buffer of 0 will not nudge the camera
but if the camera is moved, the path could lead the item off the board
which is fine - if that is what is desired
stopFollowPath() - stops animation along path
shiftPath(lastStartX, startX, lastStartY, startY, obj) - move the path
lastStartX is board startX before shifting and startX is the new board startX - same for y
As the camera or board moves, the path coordinates need to change too
ZIM does this automatically when using arrows or swiping and a path is visible
addKeys(obj, type, filter**) - add keyboard control to item - type is "arrows" or "wasd"
optionally pass in a filter object - see **FILTER at top of METHODS
to limit the parts of the board the item can be keyed to
for instance, {data:["x", "g"]} allows moving to tiles with info data of "x" or "g" but not anything else
Note: followPath() can only follow data so to sync these use the data filter
Note: to change the filter, use removeKeys() and then addKeys() with a different filter
removeKeys(type) - remove the keyboard controls for a certain type - "arrows" or "wasd"
NOTE
the Board extends a zim.Container so also has all container methods
PROPERTIES
type - a reference to the type of object as a string
tiles - a reference to the ZIM Tile object that makes the board
pieces - a reference to the ZIM Container that holds all items on the board
num - a read only number of rows and cols in the board
size - a read only width and height of the tile (before isometrics applied)
info - the info array of rows and cols - see the info parameter for more... info
when making an update to info, the update() method will be needed to see a change in the board
note: using the arrows or swiping will automatically update so items off screen do not need updating
data - an array of rows and cols that represents the info's data property of the current board squares
this can be passed in to path finding such as EasyStar to find a path on the board
note: this is info data only for the tiles, not all of the info data from the info array
numCols - the total number of columns in the info (not the board)
numRows - the total number of rows in the info (not the board)
startCol - the index of the info to place at the left of the board
this is one way to move the board and is used by the arrows and swiping
also see the positionBoard(col, row) method
startRow - the index of the info to place at the top of the board
buffer - get or set how many squares moving item is from edge before camera is nudged
arrows - Boolean to get or set the arrows - if true, arrows will be applied when needed
isometric - get or set the isometric (true) or flat (false) view of the board
the board is scaled up 20% going from iso to flat and down 20% going from flat to iso
this just helps it visually appear similar in size
currentTile - a reference to the selected tile
lastTile - a reference to the tile selected before the current selected tile
path - a reference to the visible path if there is one showing
PROPERTIES for Tile
boardCol - the visible column index of the tile
boardRow - the visible row index of the tile
PROPERTIES for item
boardCol - get the visible column index of the tile (negative if left of board)
boardRow - get the visible column index of the tile (negative if right of board)
moving - get whether the item is moving (also moving event on board)
nextCol - after movingstart event, get the next visible column index of the tile (negative if left of board)
nextRow - after movingstart event, get the visible column index of the tile (negative if right of board)
boardTile - get the tile under the item
square = a string of "row-col" - so "0-0", "0-1", "0-2", etc. and "3-2" is third row, second column
NOTE
the Board extends a zim.Container so also has all container properties
EVENTS
dispatches a "change" event on board for each time a different tile is selected or rolled over
dispatches a "positioned" event on item when item is finally placed on a tile
dispatches a "movingstart" event on item when item starts being animated from tile to tile
dispatches a "moving" event on item when item is being animated from tile to tile
dispatches a "movingdone" event on item when item is finished being animated (500ms delay)
CLOSE ▲PAGE ▤CODE ▤
Person
zim class - extends a zim.Container which extends a CreateJS Container
** MUST import zim_game - see https://zimjs.com/es6.html#MODULESDESCRIPTION
A very generic person in isometric view sized to work with ZIM Board
See: https://zimjs.com/iso/ for a full example
EXAMPLE
const board = new Board().center();
board.add(new Person(), 5, 4); // random person
// or specify:
board.add(new Person(green,brown,dark), 4, 5);
PARAMETERS supports DUO - parameters or single object with properties below
shirt - (default random ZIM color) the shirt color - any CSS color is fine "gold", "#C33", etc.
pants - (default random ZIM color) the pants color
head - (default random skin color) the head color
outline - (default dark) the outline color for the head
player - (default false) set to true if main player - then type="Me" not "Player"
cache - (default false) probably only cache if lots of players
PROPERTIES
type - either "Person" or "Me" if player parameter is true
** If added to ZIM Board receives these properties:
boardCol - get the visible column index of the tile (negative if left of board)
boardRow - get the visible column index of the tile (negative if right of board)
moving - get whether the item is moving (also moving event on board)
boardTile - get the tile under the item
square = a string of "row-col" - so "0-0", "0-1", "0-2", etc. and "3-2" is third row, second column
Plus all the methods and properties of a ZIM Container and CreateJS Container
Note: if added to a ZIM Board, use the Board methods to manipulate
CLOSE ▲PAGE ▤CODE ▤
Orb(radius, color, color2, accentColor, accentColor2, flat, alpha, time, delay)
Orb
zim class - extends a zim.Container which extends a CreateJS Container
DESCRIPTION
A very generic orb with two styles - flat and shaded
** MUST import zim_game - see https://zimjs.com/es6.html#MODULES
See: https://zimjs.com/iso/ for a full example
EXAMPLE
const board = new Board().center();
board.add(new Orb(), 2, 2); // flat
// or shaded with pulse:
board.add(new Orb({flat:false, color2:pink, accentColor2:white, delay:5000}), 4, 2);
PARAMETERS supports DUO - parameters or single object with properties below
radius (default 16 flat or 22 not) - the radius of the orb
color (default blue flat or purple not) - the color of the orb - any CSS color is fine too
color2 (default darker flat or null (color) not) - core color if flat, pulse color if shaded
accentColor (default null flat or pink not) - border color if flat, highlight color if shaded
accentColor2 (default null) - border color of core if flat, highlight color of pulse if shaded
flat (default true) - set to false to see shaded orb
alpha (default .5) - the alpha to animate the color to if flat (keeps core) or the pulse to if shaded
time (default 1s) - the time to animate the pulse (shaded only). Also see ZIM TIME constant
delay (default 1s) - the delay until the animation of the pulse happens (shaded only). Also see ZIM TIME constant
PROPERTIES
type - "Orb"
** If added to ZIM Board receives these properties:
boardCol - get the visible column index of the tile (negative if left of board)
boardRow - get the visible column index of the tile (negative if right of board)
color - the color of the orb
color2 - the color2 of the orb
moving - get whether the item is moving (also moving event on board)
boardTile - get the tile under the item
square = a string of "row-col" - so "0-0", "0-1", "0-2", etc. and "3-2" is third row, second column
Plus all the methods and properties of a ZIM Container and CreateJS Container
Note: if added to a ZIM Board, use the Board methods to manipulate
CLOSE ▲PAGE ▤CODE ▤
Tree
zim class - extends a zim.Container which extends a CreateJS Container
** MUST import zim_game - see https://zimjs.com/es6.html#MODULESDESCRIPTION
A very generic tree in isometric view sized to work with ZIM Board
See: https://zimjs.com/iso/ for a full example
EXAMPLE
const board = new Board().center();
board.add(new Tree(), 6, 6);
PROPERTIES
type - "Tree"
** If added to ZIM Board receives these properties:
boardCol - get the visible column index of the tile (negative if left of board)
boardRow - get the visible column index of the tile (negative if right of board)
moving - get whether the item is moving (also moving event on board)
boardTile - get the tile under the item
square = a string of "row-col" - so "0-0", "0-1", "0-2", etc. and "3-2" is third row, second column
Plus all the methods and properties of a ZIM Container and CreateJS Container
Note: if added to a ZIM Board, use the Board methods to manipulate
CLOSE ▲PAGE ▤CODE ▤
Timer
zim class - extends a zim.Label which extends a CreateJS Container
** MUST import zim_game - see https://zimjs.com/es6.html#MODULESDESCRIPTION
A timer that can count up or down and be set to isometric
See: https://zimjs.com/iso/ for a full example
EXAMPLE
const timer = new Timer({
time:60,
borderColor:dark,
isometric:LEFT // isometric for left side of board
}).loc(100,100);
PARAMETERS supports DUO - parameters or single object with properties below
time - (default 60) time in seconds to start the timer
step - (default 1) step in s to show a change in timer
colon - (default false) add colon and seconds eg. 1:30 instead of 90 seconds
down - (default true) set to false to count up
isometric - (default null) set to LEFT or RIGHT to position an isometric timer
startPaused - (default false) set to true to start the timer paused - then use timer.start(num)
size - (default 36) the size of the font in pixels
font - (default arial) the font or list of fonts for the text
color - (default black) color of font (any CSS color)
backgroundColor - (default yellow) color of background (any CSS color)
borderColor - (default null) the color of the border
borderWidth - (default null) thickness of the border
align - ((default CENTER) text registration point alignment also LEFT and RIGHT
valign - (default CENTER) vertical registration point alignment alse "middle / center", "bottom"
borderColor - (default null) the color of the border
borderWidth - (default null) thickness of the border
bold - (default false) set the font to bold
italic - (default false) set the font to italic
variant - (default false) set to true to set the font to "small-caps"
width - (default 150) the width of the timer - can also leave defaults and scale timer
height - (default 60) the height of the timer
decimals - (default 1 when no colon) the places parameter to pass to zim decimals internally
METHODS
start(time) - start the timer
pause(state) - state defaults to true to pause, set to false to unpause
stop() - stop the timer and set paused to null - does not change time property
PROPERTIES
type - "Timer"
time - get or set the time of the timer
totalTime - get the start time of the timer
paused - get or set the paused state of the timer with Boolean true or false
isometric - get or set the isometric - false, LEFT, RIGHT
intervalID - access to the intervalID of the timer - use clearInterval(timer.intervalID)
Plus all the methods and properties of a ZIM Label and CreateJS Container
EVENTS
Dispatches a "step" event for each step the timer takes
Dispatches a "complete" event when the timer counts down to 0
there is no complete event for counting up - use logic in step event function to handle that
CLOSE ▲PAGE ▤CODE ▤
Scorer
zim class - extends a zim.Label which extends a CreateJS Container
** MUST import zim_game - see https://zimjs.com/es6.html#MODULESDESCRIPTION
A score label with backing set and isometric settings
See: https://zimjs.com/iso/ for a full example
EXAMPLE
const scorer = new Scorer({backgroundColor:yellow, color:black, isometric:RIGHT}).loc(W-100,100);
PARAMETERS supports DUO - parameters or single object with properties below
score - (default 0) set the start score
isometric - (default null) set to LEFT or RIGHT to position an isometric scorer
size - (default 36) the size of the font in pixels
font - (default arial) the font or list of fonts for the text
color - (default black) color of font (any CSS color)
backgroundColor - (default green) the color of the background (any CSS color)
borderColor - (default null) the color of the border
borderWidth - (default null) thickness of the border
align - ((default CENTER) text registration point alignment also LEFT and RIGHT
valign - (default CENTER) vertical registration point alignment also MIDDLE / CENTER, "bottom"
bold - (default false) set the font to bold
italic - (default false) set the font to italic
variant - (default false) set to true to set the font to "small-caps"
width - (default 150) the width of the scorer - can also leave defaults and scale scorer
height - (default 60) the height of the scorer
PROPERTIES
type - "Scorer"
score - get or set the score
isometric - get or set the isometric - false, LEFT, RIGHT
Plus all the methods and properties of a ZIM Label and CreateJS Container
CLOSE ▲PAGE ▤CODE ▤
Dialog
zim class - extends a zim.Container which extends a createjs.Container
** MUST import zim_game - see https://zimjs.com/es6.html#MODULESDESCRIPTION
Shows a Dialog in various formats with or without a tail.
This can have multiple sets of words to show with optional arrows.
The text can be made to fill the dialog - use padding to make it fit well due to corners.
Or a if fill is turned off then use a font size to keep constant size across word sets.
The dialogTypes are slant (default), rectangle (can have corners set), oval and poly.
The tailTypes are triangle (default), line, circles and none.
SEE: https://zimjs.com/nft/bubbling/dialog.htmlNOTE
the Dialog backing is made up of multiple shapes to get a proper border effect
if an alpha is desired then cache the backingContainer and set its alpha
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
const dialog = new Dialog(300,200,"HELLO!").center();
EXAMPLE
const words = [
"Welcome, Creators!",
"To ZIM NFT 01",
"We have a new Dialog"
];
STYLE = {lineHeight:35}
new Dialog({
width:300,
height:200,
words:words,
dialogType:"rectangle",
tailType:"line",
fill:false,
size:30,
font:"Comic Sans MS",
color:dark,
backgroundColor:yellow,
borderColor:grey,
borderWidth:2,
corner:100,
padding:50,
tailH:RIGHT,
tailV:BOTTOM
}).pos(100,50,LEFT,TOP);
EXAMPLE
const dialog = new Dialog(300,200,"HELLO!").center();
dialog.backingContainer.cache().alp(.5); // adjusting alpha of backing
PARAMETERS
** supports DUO - parameters or single object with properties below
width - (default 640) width of dialog
height - (default 480) height of dialog
words - (default "HELLO!") words to say in the dialog - or an array of words
if an array is chosen then arrows will be added (unless arrows is set to false)
arrows can be used to go to sets of words - or use index property to change
the setWords() method can be used to change the words in a Dialog
dialogType - (default "slant") the shape of the dialog box
set to slant will make a slanted box that can be controlled with slantLeft, slantRight, slantTop, slantBottom parameters
set to "rectangle" for dialog box. Can use corner of half the height to make a longer rounded box
set to "oval" for traditional speach bubble - use width and height to adjust
set to "poly" for a Pow! dialog - probably set the tailType to "none"
tailType - (default "triangle") the shape of the tail of the dialog
types are "triangle", "line", "circles" or "none"
circles gives a thought bubble
the tail can be positioned with tailH and tailV parameters
the tail can be shifted with tailShiftH, tailShiftV and tailShiftAngle
fill - (default true) set to false to not fill the dialog with text
when true, use the padding (or paddingH and paddingV) to addjust the size of the text in the dialog
fill of true will ignore size
size - (default 40) the size of the font
size is ignored if fill is set to true
font - (default "verdana") the font of the text
color - (default dark) the color of the text
backgroundColor - (default light) the color of the dialog box
borderColor - (default dark) the border color of the dialog box
set the border color to -1 to have no border
borderWidth - (default 3) the size of the border
set the borderWidth to 0 to have no border
align - (default CENTER) the horizontal alignment of the text (also LEFT and RIGHT)
see also shiftH
valign - (default CENTER) the vertical alignment of the text (also TOP and BOTTOM)
see also shiftV
corner - (default 0) the corner of rectangle with the "rectangle" dialogType set
can also be an array of [leftTop, rightTop, rightBottom, leftBottom]
shadowColor - (default rgba(0,0,0,.3)) the shadow color
set to -1 for no shadow
shadowBlur - (default 10) the shadow blur
padding - (default 20) the padding between the border of the dialog and the text
paddingH - (default padding) the vertical horizontal
paddingV - (default padding) the vertical padding
shiftH - (default 0) an amount (+ or -) to shift the text horizontally after it is placed
shiftV - (default 0) an amount (+ or -) to shift the text vertically after it is placed
slantLeft - (default -10) when dialogType "slant" is chosen, relative angle to slant the left side
slantRight - (default 10) when dialogType "slant" is chosen, relative angle to slant the right side
slantTop - (default -10) when dialogType "slant" is chosen, relative angle to slant the top side
slantBottom - (default 10) when dialogType "slant" is chosen, relative angle to slant the bottom side
tailH - (default LEFT) where to put the tail in the horizontal - options are LEFT, CENTER, RIGHT
also see the tail property and the three tailShift parameters
tailV - (default BOTTOM) where to put the tail in the vertical - options are BOTTOM, CENTER, TOP
also see the tail property and the three tailShift parameters
tailShiftH - (default 0) an amount (+ or -) to shift the tail horizontally after it is placed
tailShiftV - (default 0) an amount (+ or -) to shift the tail vertically after it is placed
tailShiftAngle - (default 0) an amount (+ or -) to shift the tail angle after it is placed
arrows - (default false - true if words is array) set to false to not show arrows
also see the arrowNext and arrowPrev property
arrowsInside - (default false) set to true to show arrows inside the dialog
to shift the arrows afterwards, use the arrowNext and arrowPrev properties along with mov()
arrowsFlip - (default false) make the next arrow on the left and the prev arrow on the right
index - (default 0) set the selected index of the word groups if words is an array
also see the index property
selectedIndex - same as index, kept in for backwards compatibility in ZIM DUO
METHODS
setWords(words, index) - pass in a string of words to show or an array
this will change the words in the dialog
also pass in an optional index to jump to
returns object for chaining
next() - go to next words - returns object for chaining
see also index property
prev() - go to previous words - returns object for chaining
see also index property
clone() - clone the dialog
dispose() - remove the dialog and its parts
ALSO
ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO
see the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.
PROPERTIES
type - name of class as a string
color - get or set the color of the text
backgroundColor - get or set the backgroundColor of the dialog
// see backingContainer for setting alpha
borderColor - get or set the borderColor of the dialog
// NOTE: must start with border when object made to then change a borderColor
backingContainer - a reference to the container that holds all the backing
including backing, backingShadow and tail
cache this and set its alpha if a different alpha is desired
otherwise all the parts keep overlapping alpha and revealed
backing - reference to backing of dialog
backingShadow - if a shadow is set then this is the container that holds a clone of the backing and tail
and then it is cached and a shadow added
label - the ZIM Label with the current text
labels - an array of ZIM labels matching the words
words - an array of sets of words in the dialog - if only one set of words then the words are words[0]
index - get or set the index of the word sets (will adjust arrows if there are arrows)
tail - reference to the tail object
arrows - reference to the container that holds both arrows
arrowNext - reference to the next arrow
arrowPrev - reference to the prev arrow
ALSO
see ZIM Container for properties such as:
width, height, widthOnly, heightOnly, draggable, level, depth, group
blendMode, hue, saturation, brightness, contrast, etc.
ALSO
see the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.
EVENTS
dispatches a "change" event when arrows are pressed to go to next or prev page
See the CreateJS Easel Docs for Container events such as:
click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover
CLOSE ▲PAGE ▤CODE ▤VIDS
// up top after loading CreateJS and ZIM add the latest versions of these files
// https://zimjs.org/cdn/r109/three.min.js
// https://zimjs.org/cdn/r109/OrbitControls.js
// https://zimjs.org/cdn/three_2.2.js
// In the ZIM Frame create a backing rectangle that will show where the three.js scene is
new Rectangle(500,500,dark).center();
// Create the Three object and scene (just store that in an easy variable)
// We set threejs interactive so we can use three.js orbit controls (needs a separate file imported)
// In the above examples at the URLs, we use a ZIM Swiper instead
const three = new Three({frame:F, width:500, height:500, interactive:true});
const scene = three.scene;
// Here we make a three.js Cube - note the THREE namespace
// There are all sorts of Geometries (shapes) - see the three.js Docs
// We will give each side a color using a Material
const geometry = new THREE.CubeGeometry(100, 100, 100);
const materials = [];
// x+,x-,y+,y-,z+,z- (+x right, +y up and +z out)
const colors = [green, blue, brown, yellow, orange, pink];
loop(colors, color=> {
materials.push(new THREE.MeshBasicMaterial({color:color, side:THREE.FrontSide}));
});
// We mesh the Geometry and the Material to get a Mesh object that we put on the Scene
const mesh = new THREE.Mesh(geometry, materials);
mesh.position.set(0,0,0);
scene.add(mesh);
// Here we add optional the three.js OrbitControls
const controls = new THREE.OrbitControls(three.camera, three.renderer.domElement);
// This is an example of controlling the three.js object with ZIM
// Remember that rotation in three.js is in Radians so multiply degrees by ZIM RAD
const dial = new Dial({min:0, max:360, step:0, continuous:true}).pos(70,0,LEFT,CENTER).change(()=>{
mesh.rotation.y = dial.value*RAD;
});
PARAMETERS
** supports DUO - parameters or single object with properties below
width - (default ZIM Frame width) the width to make the three.js canvas
height - (default ZIM Frame height) the height to make the three.js canvas
color - (default null - transparent) a CSS color (no transparency on color - just leave off to set transparent)
cameraPosition - (default new THREE.Vector3(0, 200, 200)) to position the camera in x, y and z
cameraLook - (default scene.position) where the camera should look
interactive - (default false) set to true to be able to use addEventListener on three.js canvas rectangle
note: you will not be able to use ZIM interaction that overlaps the three.js canvas
note: this will be set to true if textureActive is true
resize - (default true) set to false to not automatically resize (position and scale three object)
frame - (default the zimDefaultFrame) the ZIM Frame object
ortho - (default false) set to true to add an orthographic camera basically a flat scene
the normal camera is there still but the ortho camera sits on top from z depth of 0 to 10
this is good for HUD elements around the edges of scene or a pop-up panel, etc.
textureActive - (default false) set to true to configure proper scaling for TextureActive objects
where ZIM is inside three.js on textures
also see the makePanel() and flipMaterial() methods below
also overrides interactive and sets it as true
colorSpace - (default THREE.LinearSRGBColorSpace) set to THREE.SRGBColorSpace, etc.
https://threejs.org/docs/#manual/en/introduction/Color-management
colorManagement - (default false) set to true to activate three.js colorManagement
https://threejs.org/docs/#manual/en/introduction/Color-management
legacyLights - (default false) set to true to activate legacyLights - depricated
throttle - (default false) set to a whole number like 2 to only update every second requestAnimationFrame
lay - (default null) set to OVER or UNDER to overlay or underlay full window three.js
Also use interactive:true for interacting with three.js or interactive:false for interacting with ZIM
full - (default false) set to true to force three.js to full window
Use ZIM in Frame scaling:FULL and ZIM Central() to match ZIM scaling with three.js fullscreen scaling
See: https://zimjs.com/three/central.html
xr - (default false) set to true to make the renderer prepared for XR (AR/VR)
this works with TextureActive as well
also see XRControllers(), XRMovement() and XRTeleport() classes
VRButton - (default true if xr is true and will add a VRButton if using zim_three import) adds an ENTER VR button
or pass in the VRButton class from three.js if not using the zim_three import
xrBufferScale - (default 2) magnification of scene - 2 makes for better quality in VR
tag - (default null) a string to an HTML tag with id or the HTML Element to add the three.js renderer domElement to
this is to be used with TextureActive to be able to add a feature to an existing html tag
the width and height of the tag will be used and should be set ahead of time with CSS - px or percent is okay
See: https://zimjs.com/015/textureactive_simple_tag.htmlMETHODS
position(x, y) - position the three.js canvas (registration point in center) to the stage coordinates
scale(s) - (default 1) scale the three.js canvas relative to the stage scale
rotateAroundAxis(obj, axis, radians) - rotates an obj around a world axis (THREE.Vector3(x,y,z)) a certain amount of Radians
rotateAroundObjectAxis(obj, axis, radians) - rotates an object around an internal axis (THREE.Vector3(x,y,z)) a certain amount of Radians
makePanel(textureActive, textureActives, scale, curve, opacity, material, doubleSide, colorSpace) | supports DUO
used for textureActives to make a panel based on the tetureActive size
textureActive - a ZIM TextureActive object see https://zimjs.com/docs.html?item=TextureActive
textureActives - a ZIM TextureActives object see https://zimjs.com/docs.html?item=TextureActives
scale (default .5) change to adjust the width and height of the geometry
curve (default null) change the z amount to curve the geometry - also can use negative amount
opacity (default 1) change to set the opacity of the material, can also set opacity on the TextureActve
material (default THREE.MeshBasicMaterial) a three.js material
example THREE.MeshPhongMaterial, THREE.MeshLamberMaterial - both these need lights
doubleSide (default false) set to true to do double sided material
colorSpace (default null) see https://threejs.org/docs/#manual/en/introduction/Color-management
returns a three.js mesh with the textureActive object set as a CanvasTexture
This will also have the TextureActives.addMesh() method applied with the layer matching the TextureActives layer setting
All this can be done manually in three.js - it is just a wrapper function to make panels
See https://zimjs.com/015/textureactive_raw.html for a manual example - scroll down to the THREE section and see MENU
** if being used for a HUD in sceneOrtho then see the pos() method below for METHODS ON MESH
posMesh(mesh, x, y, horizontal, vertical, gutter) - use for sceneOrtho makePanel meshes
position a mesh on the sceneOrtho around the edges or middle as follows:
x - default 0 - the distance in the x
y - default 0 - the distance in the y
horizontal - default LEFT - set to LEFT, CENTER, RIGHT to specify where the distance is applied horizontally
horizontal - default TOP - set to TOP, CENTER, BOTTOM to specify where the distance is applied vertically
gutter - default 0 - distance in the horizontal middle to keep left and right away from each other
the left and right will stop squeezing and possibly go off the screen when the window is reduced
flipMaterial(materialType, params) - flip about the y access a material
This will set the userData.ta_flipped to true which guides the TextureActives raycasting on the UV x coordinate
The params are the regular parameter object that would be passed to the material such as color, map, transparency, alpha, etc.
Used primarily on a THREE.BoxGeometry where the back of the box by default is flipped so words would be backwards... this puts them frontwards
See https://zimjs.com/015/textureactive4.html scroll down to the THREE section and see PICKERS
Note a second texture must be made and passed to flipMaterial in the params as the map
curvePlane(geometry, z) - curves a THREE.PlaneGeometry but a z value (positive or negative)
adjusts the Geometry in place - used internally by makePanel
dispose() - clears geometries, materials, stops the renderer, removes scene and sets internal variables to null
make sure the three reference is set to null:
myThree.dispose();
mythree = null; // same for any dispose - ZIM cannot set your variables to null
METHODS ON MESH
pos(x,y,horizontal,vertical,gutter) - DEPRECATED - see posMesh() method
PROPERTIES
renderer - the three.js WebGLRenderer (see three.js Docs)
preRender - a function to call just before rendering
three.preRender = ()=>{controls.update();} // will run in renderer just before rendering
postRender - a function to call just after rendering
three.postRender = ()=>{controls.update();} // will run in renderer just after rendering
canvas - the HTML canvas tag for the three.js scene with id=zimThree0 for first, zimThree1 for second, etc.
can use if you need to set z-index for multiple three canvas objects
DOMElement - the CreateJS DOMElement object - see CreateJS EaselJS docs
scene - the three.js scene object created (see three.js Docs)
sceneOrtho - the three.js orthographic scene if ortho is set to true
this has a near/far setting of 0/10 so the z value of an object in this scene must be between 0 and 10
camera - the three.js PerspectiveCamera object created (See the three.js Docs)
cameraOrtho - the three.js OrthographicCamer object if orth is set to true
resizeEvent - a handle to the resize event so it can be cleared:
F.off("resize", threeObj.resizeEvent);
then make your own resize event to custom position and scale your three object
use threeObj.position() and threeObj.scale() see ZIM Bits example
vrButton - reference to the VRButton if xr and VRButton is true
CLOSE ▲PAGE ▤CODE ▤VIDS
XRControllers
zim class - extends a createjs.EventDispatcher
** MUST import zim_three - see https://zimjs.com/es6.html#MODULESDESCRIPTION
Adds XR (AR/VR) controllers to three.js.
This comes with built in ZIM controllers or can pass in three.js controllers.
ZIM Controllers are laser, pen, gun, raygun and sword or line.
They will highlight when trigger is pressed.
They provide events for all the buttons and axes.
See https://zimjs.com/015/vr/controllers.jpg for details.
The XRControllers object holds controller1 and controller2.
Both are not required, an array of two items can be used as type input.
Passing in -1 will not make a controller.
The XRControllers object can be passed to XRMovement() and XRTeleport() to handle motion.
There is a three.js class that will mimic the best model for the actual controllers.
import { XRControllerModelFactory } from 'three/addons/webxr/XRControllerModelFactory.js';
and then you have to use the whole GitHub structure of three.js to get them to work.
See: https://github.com/mrdoob/three.js/blob/dev/examples/webxr_vr_teleport.html
The three.js controller objects you can then pass in to type:[obj, obj]
SEE: https://zimjs.com/015/vr.html and use triggers (drag), sticks (motion) and b and y buttons (teleport)
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// import zim_three
const three = new Three({
width:window.innerWidth,
height:window.innerHeight,
cameraPosition:new THREE.Vector3(0,3,6),
textureActive:true, // if wanting TextureActives
xr:true
});
// make skybox, add meshes to scene, etc.
// might add a floor mesh
// xrControllers parameters:
// three, type, color, highlightColor, lineColor, lineLength, threshhold
const xrControllers = new XRControllers(three, "laser"); // "laser" is default
xrControllers.on("xrconnected", () => {
// wait for controllers to connect before adding movement and teleport
// XRMovement parameters:
// three, XRControllers, speed, acceleration, rotationSpeed, rotationAcceleration, hapticMax, verticalStrafe, radiusMax
var xrMovement = new XRMovement(three, xrControllers);
// XRTeleport parameters:
// three, XRControllers, XRMovement, floor, offsetHeight, button, hand, markerColor, markerBlend
new XRTeleport(three, xrControllers, xrMovement, floor, 4); // top front round buttons (B and Y)
// note: to teleport through a mesh, set the mesh.userData.xrteleportignore = true;
});
PARAMETERS
** supports DUO - parameters or single object with properties below
three - the ZIM Three object
type - (default "laser") type of controllers or an array of [type, type]
can be: laser, pen, gun, raygun, sword, line or -1 in the array.
or can be a three.js model from XRControllerModelFactory
if using a three.js model, must use the array with the desired model objects
any of these can be a mix or just one (set the other to -1)
color - (default light) set the color of the material (can also be an array for left and right)
highlightColor - (default ["violet", blue]) an array for the highlight colors
lineColor - (default light) set the color of the line or use an array for left and right
lineLength - (default 5) the line length or pass in an array for left right
one day, this may adjust to whatever it is hitting
threshhold - (default .2) a sensitivity filter - use a higher number to avoid drift
METHODS
dispose() - remove controllers
PROPERTIES
type - name of class as a string
XR - read only - will be true when XR is active (see xrconnected event)
controller1 - a reference to the renderer.xr.getController(0)
controller2 - a reference to the renderer.xr.getController(1)
threshhold - get or set the controller threshhold
Controller properties:
grip - if a three.js model is provided, it is stored in a grip three.js Group
holder - if a ZIM controller are used it is stored in a holder three.js Group
gamepad - lots of data once the xrconnected event is triggered
userData.highlights - an array of materials to change to the highlight color
this already will have materials so perhaps use push()
EVENTS (also see GENERAL EVENTS)
xrconnected - dispatched when XR controllers connect - has an event object with data property
xrdisconnected - dispatched when XR controllers disconnect
** below events have the following event object (eg. e) properties:
e.controller - the controller
e.num - the number of the button - see https://zimjs.com/015/vr/controllers.jpg
0 - trigger
1 - squeeze
2 - touchpad (basic only - not complex controllers)
3 - top of stick
4 - A or X raised button on top
5 - B or Y raised button on top
e.hand - "left" (controller1) or "right" (controller2)
e.value - normalized number from 0-1 of touch pressure
pressdown - dispatched when any XR controller button is down
pressup - dispatched when any XR controller button is up
touchstart - dispatched when XR controller touch starts
touchend - dispatched when XR controller touch ends
** the axes event object (eg. e) has an additional property to the above
** to tell if the value is horizontal or vertical
e.dir - "horizontal" or "vertical"
axes - dispatched when XR controller stick pushed
GENERAL EVENTS
selectstart - dispatched when either controller trigger is pressed down
selectend - dispatched when either controller trigger is pressed up
move - dispatched when either controller is moved
controllerleftdown - dispatched when left XR controller trigger is pressed down
controllerrightdown - dispatched when right XR controller trigger is pressed down
controllerleftup - dispatched when left XR controller trigger is pressed up
controllerrightup - dispatched when right XR controller trigger is pressed up
controllerleftmove - dispatched when left XR controller is moving
controllerrightmove - dispatched when right XR controller is moving
CLOSE ▲PAGE ▤CODE ▤VIDS
XRMovement
zim class
** MUST import zim_three - see https://zimjs.com/es6.html#MODULESDESCRIPTION
Adds XR (AR/VR) movement to three.js.
Pass in ZIM XRControllers and use thumbsticks to move.
By default both hands move forward and backwards with vertical stick motion.
The left hand strafes left and right with horizontal stick motion.
The right hand rotates left and right with horizontal stick motion.
The squeeze (handle grips) will increase the speed.
Pressing the left thumbstick top will reset the position.
SEE: https://zimjs.com/015/vr.html and use triggers (drag), sticks (motion) and b and y buttons (teleport)
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// import zim_three
const three = new Three({
width:window.innerWidth,
height:window.innerHeight,
cameraPosition:new THREE.Vector3(0,3,6),
textureActive:true, // if wanting TextureActives
xr:true
});
// make skybox, add meshes to scene, etc.
// might add a floor mesh
// xrControllers parameters:
// three, type, color, highlightColor, lineColor, lineLength, threshhold
const xrControllers = new XRControllers(three, "laser"); // "laser" is default
xrControllers.on("xrconnected", () => {
// wait for controllers to connect before adding movement and teleport
// XRMovement parameters:
// three, XRControllers, speed, acceleration, rotationSpeed, rotationAcceleration, hapticMax, verticalStrafe, radiusMax
var xrMovement = new XRMovement(three, xrControllers);
// XRTeleport parameters:
// three, XRControllers, XRMovement, floor, offsetHeight, button, hand, markerColor, markerBlend
new XRTeleport(three, xrControllers, xrMovement, floor, 4); // top front round buttons (B and Y)
// note: to teleport through a mesh, set the mesh.userData.xrteleportignore = true;
});
PARAMETERS
** supports DUO - parameters or single object with properties below
three - the ZIM Three object
XRControllers - the ZIM XRControllers object
speed - (default 1) the speed of motion
acceleration - (default .3) the acceleration of motion
rotationSpeed - (default 1) the turning speed
rotationAcceleration - (default .2) the turning acceleration
hapticMax - (default 0) motion will trigger this much haptic response if available (handle vibration)
verticalStrafe - (default false) make left controller change up and down (elevation) rather than forward backwards motion
radiusMax - (default -1) set to a number to prevent movement beyond this radius
threshhold - (default .2) a sensitivity filter - use a higher number to avoid drift
directionFix - (default true) adjust direction from absolute to relative - needed in R155
set to false for R149 - or if three.js version seems to have direction wrong when using controllers
boxMax - (default null) set to an array with 6 numbers for min/max in x, y, z [xMin, xMax, yMin, yMax, zMin, zMax]
this prevents the dolly from going past these values
can still use radiusMax but will probably use one or the other
rotationAngle - (default null) set to an angle in degrees to override rotationSpeed and rotate specific angles
also see rotationInterval which sets how long to wait if rotation is held active
set rotationAngle to 0 to not rotate
rotationInterval - (default .5 seconds) time in seconds to rotate again if rotationAngle is set and control rotation held down
METHODS
doHaptic() - trigger haptic response if available (amount, hand, max)
dispose() - remove movement
PROPERTIES
type - name of class as a string
dolly - the three.js Group that holds the controllers and the camera
dolly has a userData.rotationY property for radians of rotation about y
it seems to have some sort of Euler rotations which just go from -90 to 90 annoying
so this is a record of rotation applied - use with multi-user for instance to send data
speed - get or set the speed of motion
acceleration - get or set the acceleration of motion
rotationSpeed - get or set the turning speed
rotationAcceleration - get or set the turning acceleration
hapticMax - get or set the maximum haptic response if available on motion (handle vibration)
verticalStrafe - get or set whether the left controller will change up and down (elevation) instead of forward backwards motion
radiusMax - get or set set the number to prevent movement beyond this radius
threshhold - get or set the sensitivity filter - use a higher number to avoid drift
CLOSE ▲PAGE ▤CODE ▤VIDS
XRTeleport
zim class
** MUST import zim_three - see https://zimjs.com/es6.html#MODULESDESCRIPTION
Adds XR (AR/VR) teleport to three.js.
Pass in ZIM XRControllers and XRMovement and use buttons to teleport - requires some sort of floor.
By default the B and Y top front buttons will teleport.
This could be changed to the triggers or all could do a teleport.
There can be multiple floors.
Meshes can be teleported through by setting the mesh.userData.xrteleportignore = true;
Teleport will leave a circle on the floor on press down and then activate on press up.
SEE: https://zimjs.com/015/vr.html and use triggers (drag), sticks (motion) and b and y buttons (teleport)
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// import zim_three
const three = new Three({
width:window.innerWidth,
height:window.innerHeight,
cameraPosition:new THREE.Vector3(0,3,6),
textureActive:true, // if wanting TextureActives
xr:true
});
// make skybox, add meshes to scene, etc.
// might add a floor mesh
// xrControllers parameters:
// three, type, color, highlightColor, lineColor, lineLength, threshhold
const xrControllers = new XRControllers(three, "laser"); // "laser" is default
xrControllers.on("xrconnected", () => {
// wait for controllers to connect before adding movement and teleport
// XRMovement parameters:
// three, XRControllers, speed, acceleration, rotationSpeed, rotationAcceleration, hapticMax, verticalStrafe, radiusMax
var xrMovement = new XRMovement(three, xrControllers);
// XRTeleport parameters:
// three, XRControllers, XRMovement, floor, offsetHeight, button, hand, markerColor, markerBlend
new XRTeleport(three, xrControllers, xrMovement, floor, 4); // top front round buttons (B and Y)
// note: to teleport through a mesh, set the mesh.userData.xrteleportignore = true;
});
PARAMETERS
** supports DUO - parameters or single object with properties below
three - the ZIM Three object
XRControllers - the ZIM XRControllers object
XRMovement - (default null) if an XRMovement object is being used then pass it in here
if provided then teleport moves the XRMovement dolly
floor - (default null) provide a three.js mesh or an array of three.js meshes
offsetHeight - (default 0) keep the dolly or camera this high above the floor
button - (default 4) the B and Y buttons but can be an array of numbers - see https://zimjs.com/015/vr/controllers.jpg
hand - (default "both") set to "left" or "right" (or "both") to set the controllers for teleporting
markerColor - (default silver) the color of the circular marker
markerBlend - (default THREE.AdditiveBlending) the blend of the circular marker
markerRadius - (default) set the marker radius
METHODS
dispose() - remove teleport
PROPERTIES
type - name of class as a string
floor - get or set the array of floor meshes
button - get or set the array of buttons to activate the teleport
hand - get or set the hand(s) to use for the teleport ("left", "right", "both")
marker - get the marker mesh
CLOSE ▲PAGE ▤CODE ▤VIDS
Socket
zim class extends a zim EventDispatcher (with the normal event object replaced by a data param)
OVERVIEW
Sockets are how multiuser games, chats, avatars, etc. work.
ZIM Socket provides code for multiuser sockets to share properties.
A client (user) sends properties and receives objects of other clients' properties
requires a NodeJS server running zimserver.js with SocketIO on server and client
See https://zimjs.com/socket/ for details and to request using the ZIM server.
DESCRIPTION
ZIM Socket sets up a multiuser socket with apps and rooms (sets of rooms if max is set)
There is an option to fill in empty spots from people leaving with new people or not.
A client sends property changes and receives objects of other clients' properties.
The server handles data, joining, leaving, changing rooms and history.
This means that there is no need for server side programming.
Socket examples:
https://zimjs.com/cat/gallery.htmlhttps://zimjs.com/socket - there is an EXAMPLE multi-user selectable paragraph
https://zimjs.com/avatar.htmlhttps://zimjs.com/chat.htmlhttps://zimjs.com/egg.htmlhttps://zimjs.com/remote.html // works with remote.html
https://zimjs.com/control.html // works with control.html
NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// must import the socket module at the top of the script
import zim from "https://zimjs.org/cdn/017/zim_socket";
// We will make a single Ball that multiple people can drag around
// In the ZIM Frame here is the preparation and the code:
// For the first parameter:
// The zimSocketURL comes from the import of zim_socket and points to the ZIM Socket server.
// This way, if we change the server, the app will still work.
// For the second parameter:
// Went to this URL https://zimjs.com/request.html from the ZIM Socket page
// and requested a keyword "sharedball" for this app
// do not use a keyword that is already in use
const socket = new Socket(zimSocketURL, "sharedball");
// When the socket is ready we get this event
// It receives a data event of all the current data - or just ask socket.
// There is also a history of any data stored in history - like for a chat.
socket.on("ready", ()=>{
const ball = new Circle(100, red).drag(S);
// We will get the lastest x and y of the ball
// all latest values are automatically loaded by Socket to start
const x = socket.getLatestValue("x");
const y = socket.getLatestValue("y");
// if someone has already moved the ball then start at that position
// otherwise, tell others to come where the ball is located
if (x != null) {
ball.loc(x,y);
} else {
ball.center();
// we can set a single property like:
// socket.setProperty("x", ball.x);
// but each time we do it is a call to the server
// so it is better to set multiple properties like so:
socket.setProperties({x:ball.x, y:ball.y});
}
S.update();
// here is the event for when we receive data from others
// so set the ball to the latest value
// we can also grab this information from the data parameter
socket.on("data", data=>{
let x = socket.getLatestValue("x");
let y = socket.getLatestValue("y");
if (x != null) ball.loc(x,y);
S.update();
});
// send data when ball is moved
ball.on("pressmove", ()=>{
socket.setProperties({x:ball.x, y:ball.y});
});
});
socket.on("error", ()=>{
new Pane("SORRY, COULD NOT CONNECT").show();
});
EXAMPLE
// Code to handle dragging multiple objects in a Container
// There exists a letters Container holding all the letters
// There exists a lettersArray holding all the letters
// The letters are being dragged (with the default onTop:true)
// which changes the letter layer in the letters container
// sendData is being called by mousedown and pressmove events on each letter
function sendData(e) {
let letter = e.target;
let obj = {};
obj["l_"+letter.num] = [letter.x, letter.y, letter.level];
socket.setProperties(obj);
}
socket.on("data", data=>{
loop(data, (p,d)=>{
let [g,n] = p.split("l_"); // grab the number
if (n >= 0) {
// set the x, y and layer
lettersArray[n].loc(d[0], d[1], letters, d[2]);
S.update();
}
});
});
// When a new person arrives we want to recreate locations and layers
// Use socket.getLatestValue(letter); to get its location {l_0:[x,y,level]}
// The level property is only useful as the letter is being dragged
// it may become out of date as other letters are dragged
// So when recreating the layer levels, we cannot rely on the level
// Instead, we will rely on the time that the letter was last moved
// Use socket.getLatestTime(letter) to get the update time of the letter
// Store the time and index of all letters that have changed in an array
// Sort the array from smallest time to biggest time
// then loop through the array and set the letter
// in the lettersArray at the index to the top()
// NOTE - we must use the lettersArray - not the letters
const order = [];
loop(lettersArray, (letter,i)=>{
let d = socket.getLatestValue("l_"+i);
if (d) {
let t = socket.getLatestTime("l_"+i);
letter.loc(d[0], d[1], letters);
order.push({t, i});
}
});
order.sort((a, b) => (a.t > b.t) ? 1 : -1); // smallest to biggest
loop(order, data=>{
lettersArray[data.i].top();
});
EXAMPLE
// Imagine that we have a Tile with thousands of colored pixels.
// we do not want to send the full data for every change.
// so we send each person's individual change to be collected and adjusted live (not shown below).
// But, when a new person arrives we want the full data.
// The trick is to use the master socket to send the data to new person as follows:
const c = [black, dark, grey, light, white, purple, pink, red, orange, yellow, green, blue];
socket.on("otherjoin", d => {
if (socket.master) { // this socket is the current master so send data
const colors = [];
loop(tile.items, item=>{
colors.push(c.indexOf(item.color));
});
// d.id is the id of who just joined
socket.setProperty("colors", {id:d.id, array:colors});
}
});
socket.on("data", d => {
// if we are the person that just joined
if (d.colors && d.colors.id==socket.id) {
loop(d.colors.array, (item,i)=>{
tile.items[i].color = c[item];
});
S.update();
}
// also there would be code to update everyone's individual changes
});
PARAMETERS
** supports DUO - parameters or single object with properties below
server - (default https://localhost:3000) the server that is running node and the zimsocket.js : portNumber
if using the ZIM socket server then this should be zimSocketURL which is defined in the zim_socket import
appName - (required) a string id (one word or joined words) and unique for your app
roomName - (default "default") optional room name otherwise just uses a default room (can represent many rooms if maxPeople is set)
maxPeople - (default 0) how many people are allowed per room - default is 0 which is virtually unlimited
setting this to 4 will let four people share the socket and the next person in starts sharing with the next three, etc.
fill - (default true) - set to false to not fill in vacated spots in a room
initObj - (default null) - pass an object literal of initial properties
METHODS
changeRoom(appName, roomName, maxPeople, fill, initObj) - this removes socket from current room and joins appName, roomName - socket.id remains the same
requestTime() - triggers a time event with parameter object holding masterTime, joinTime and currentTime
requestSync() - resyncs your other clients' data, time, history and last info with the server data
on(), off(), offAll() - methods inherited from zim.EventDispatcher- these work like the CreateJS on() and off() methods
** SETTING YOUR PROPERTIES
setProperty(propertyName, propertyValue) - sets your property to the value and sends out change to all in room (distributes)
setProperties(objectOfPropertiesToSet) - pass in an object with properties and values and it sets yours to match and distributes them
** GETTING PROPERTIES AND PROPERTY OBJECTS
** note: the relevant property objects are sent as a parameter on join, otherjoin and data events
** which means we often do not need these methods
** note: the data event sends a parameter with only the data currently being sent
** so if you want all the data belonging to the sender, use getSenderData() below
getMyProperty(propertyName) - gets your own value for property name
getMyData() - gets your own data object
getOtherProperty(id, propertyName) - gets another client's value for property name
getOtherData(id) - gets another client's object of properties
getSenderProperty(propertyName) - gets sender client's value for property name
getSenderData() - gets sender client's object of properties
getProperties(propertyName) - returns an array of values for the propertyName of others - for x we might get [12, 14, 33, etc.]
getData() - returns an object of all client objects by id (does not include this (my) client)
** GETTING LATEST INFORMATION
getLatestValue(propertyName) - returns the last distributed value for the property you pass to it - could be yours
getLatestTime(propertyName) - returns the server timestamp (ms from 1970) for when the latest value of the property was updated - could be yours
getLatestValueID(propertyName) - returns the id of the last person to distribute a value for the property you pass to it
getLatestProperties(propertyName) - returns an array of the last property names to be distributed (sometimes multiple properties are distributed at once)
** HISTORY
appendToHistory(someText) - adds the text passed to it to the history file for the room (deleted if room is empty)
clearHistory() - sets the history for the room to ""
** TO DISCONNECT
dispose() returns void - removes listeners, closes socket, deletes data objects - must make a new Socket object to connect
PROPERTIES (READ ONLY)
server - the server you set
applicationName - the name of your application
roomName - the room name (may represent many rooms if maxPeople is set)
maxPeople - see PARAMETERS
fill - see PARAMETERS
socket - the SocketIO client socket object
ready - a ready event has been dispatched
masterTime - when the server started
joinTime - when socket joined the current room
id - the id of the client socket
master - true if the socket is the current master
this can be used to run functions only once for everyone in the room
see the example above.
The master may change as people leave the room
senderID - the id of the last person to send out data
lastJoinID - the id of the last person to join (not you)
lastLeaveID - the id of the last person to leave (not you)
history - the history text for your room at the time of application start
size - how many other people are in the room (not including you)
EVENTS
ready - socket is connected and a room has been assigned (receives room data)
roomchange - this socket joined another room (receives room data)
error - trouble connecting - make sure server is running and you have the right port
data - dispatched when someone in the room makes a change (receives other's data)
otherjoin - dispatched when another person joins (receives other's data)
otherleave - dispatched when another person leaves (receives other's data)
time - event from requestTime method with event object having masterTime and currentTime properties
synch - event from requestSync method with event object has all the data from the server
disconnect - the socket is closed - could be that socketIO stops for some reason - all data on the server will be lost
CLOSE ▲PAGE ▤CODE ▤VIDS
Cam
zim class - extends a zim.Container which extends a createjs.Container
** MUST import zim_cam - see https://zimjs.com/es6.html#MODULESDESCRIPTION
Shows the output from the Webcam after user permits access.
Will stretch to fit in dimensions and can choose to flip (default) or not.
AS OF ZIM 018 - USE ML5 (Machine Learning 5)
We recommend using ZIM Cam() with the ML5 Library at https://ml5js.org/
Note: the ML5 library must be imported in a script tag.
HAND TRACKING WITH ZIM CAM AND ML5
ZIM Cam has a handTrack(ML5results) method that will replace normal mouse and touch.
Each pointer finger is a cursor for mousemove, mouseover and mouseout
and pinching the pointer finger and the thumb, triggers mousedown, pressmove, pressup, tap, and click.
There is a cursorMode which defaults to AUTO - there are also true and false values.
On AUTO, if a hand is detected, then the mouse and touch are replaced by the finger and pinch
but if the hand is not detected, then the mouse and touch are used.
On true, the mouse and touch are turned off and only the finger and pinch are used.
On false, the mouse and touch are active nd the finger and pinch are not used
but the cursors for these are still there and they still give events and data which can be used.
The cursorMode property can be used to change the mode dynamically.
There is also a toggleReplace parameter and property (default true)
which lets the user toggle using the hand rather than mouse and press but pinchin thumb and pinky.
When a hand replaces the mouse and touch, the cam.replaceCursor is true as is the zim.handCursor.
When the mouse and touch are being used then cam.replaceCursor and zim.handCursor are false.
The handTrack() method automatically calls a prepareTrack() method if prepareTrack() is not already called.
Optionally, the prepareTrack() can be called first to set a variety of options including the cursorMode parameter.
The tracking cursors will still show and the cam dispatches "handmove", "handdown", and "handup" events.
SEE: https://zimjs.com/018/handtrack.html - replacing the cursor
GENERAL ML5 FUNCTIONALITY
ML5 can give very accurate hand poses, face poses and body poses and results return points.
These points can be used to place ZIM objects or with a ZIM Shape to make circles, etc.
There are other features too like shape recognition, blurring backgrounds, etc.
These can all be used in ZIM - for using ML5 for interaction see the HAND TRACKING section above.
SEE: https://zimjs.com/ml5/ - general ML5 integration examples
BEFORE ZIM 018
ZIM CamMotion, CamCursor, CamAlpha and CamControls classes were used instead of ML5 and are still available
SEE: https://zimjs.com/nft/bubbling/cam.html and use right arrow to see all four examples
SEE: https://www.youtube.com/watch?v=z_jn6wkX6Ec
SEE: https://www.youtube.com/watch?v=0vwJ3aodU4U
SEE: https://www.youtube.com/watch?v=ceLuEBkEn4oNOTE
on a Mac, the canvas must be interacted with before showing cam video
recommend using the ZIM CamAsk() widget to do solve this.
NOTE
noMouse() has been set on Cam - to make the cam mouseEnabled set mouse() on the Cam object;
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// on a PC - this is all that is needed
const cam = new Cam().scaleTo().center(); // will fill the stage with a Webcam
EXAMPLE
// on a Mac, the canvas must be interacted with first
// so would recommend always using CamAsk first:
const ask = new CamAsk().show(yes=>{
// if the user answers yes to the CamAsk
if (yes) {
// use scaleTo() to FILL the cam in the Frame
// new Cam() will trigger the Browser asking for permission
// unless already have given permission in this session
let cam = new Cam().scaleTo().center();
cam.on("ready", ()=>{
// code here
});
// if the user does not accept the browser asking about cam
cam.on("error", ()=>{
new Pane("CAM not accepted",yellow).show();
});
} else { // answered no to CamAsk dialog
new Pane("CAM not accepted",yellow).show();
}
});
EXAMPLE
// keyOut a web cam - see https://zimjs.com/zim/camkey.html
// for two colors keyed out - see https://zimjs.com/zim/camkey2.html
// Apple still makes us interact with the canvas before showing video (sigh)
// so use CamAsk widget that has a callback on show() which is true for yes and false for no
const ask = new CamAsk().show(yes => {
// if the user answers yes to the CamAsk
if (yes) {
// set the facingMode to "environment" for back cam (or set to "user" for front cam) if available
// this is for mobile probably and would be ignored on desktop
const cam = new Cam({facingMode:"environment"}).scaleTo().center();
cam.on("ready", ()=>{
const picker = new ColorPicker({
tolerancePicker:true,
spectrumOk:false,
spectrumClose:false,
dropperTarget:cam,
collapsed:true
}).show().pos(100,100,RIGHT).change(() => {
cam.keyOut(picker.selectedColor, picker.selectedTolerance);
});
// keying will pause the cam so start with picker collapsed
const label = new Label("Expand to pick color to keyout",20,null,light).pos(20,0,LEFT,CENTER,picker.bar);
picker.on("expanded", ()=>{
label.removeFrom();
S.update();
});
});
}
});
EXAMPLE
// use ML5 at https://unpkg.com/ml5@1/dist/ml5.min.js for hand tracking
// on a Mac, the canvas must be interacted with first
// so would recommend always using CamAsk first:
const ask = new CamAsk().show(yes=>{
if (yes) {
// new Cam() will trigger the Browser asking for permission
// unless already have given permission in this session
let cam = new Cam(1280,720);
cam.on("ready", ()=>{
cam.scaleTo().center().alp(.2);
// optional - use prepareTrack() with the following parameters:
// width, height, hand, pinchColor, pinchHide, leftColor, rightColor, handScale, handAlpha, damp, gapTime, tapTime, cursorMode, toggleReplace
// cam.prepareTrack()
// ML5
const handPose = ml5.handPose(modelLoaded);
function modelLoaded() {
handPose.detectStart(cam.getCanvas(), result);
function result(results) {
// ZIM Cam to replace mouse with hand and provide pinch for interaction
cam.handTrack(results); // this will automatically call prepareTrack() if not called already
}
}
const slider = new Slider({
button:new Button({
rollBgColor:purple,
corner:30,
width:60,
height:60,
label:""
}),
vertical:true,
min:0,
max:1,
value:cam.alpha
}).center().change(()=>{
cam.alpha = slider.value;
});
const tabs = new Tabs({width:400, height:60, tabs:["LEFT", "BOTH", "RIGHT"], index:2})
.pos(0,100,CENTER)
.tap(()=>{
cam.hand = tabs.text.toLowerCase();
});
new Label({
text:"Don't put hands too close\nIndex finger is the cursor\nPinch thumb for mousedown\nRelease pinch for mouseup\nPinch pinky to toggle mouse",
color:silver,
size:25,
backgroundColor:black.toAlpha(.5),
lineHeight:40
}).pos(50,0,LEFT,CENTER);
cam.bot();
});
// if the user does not accept the browser asking about cam
cam.on("error", ()=>{
new Pane("CAM not accepted",yellow).show();
});
} else { // answered no to CamAsk dialog
new Pane("CAM not accepted",yellow).show();
}
});
PARAMETERS
** supports DUO - parameters or single object with properties below
width - (default 640) width of cam output - see also resetSize()
height - (default 480) height of cam output
flip - (default true) set to false to not horizontally flip the video
facingMode - (default true) set to "user", "exact_user", "environment", "exact_environment", "auto"
will try and set cameras on mobile to front or back - ignored on PC
warning, the exact versions might cause an error on PC
also see setFacingMode() method to change dynamically
config - an optional configuration object {} with properties for media settings - such as:
width, height, facingMode, aspectRatio, autoGainControl, brightness, channelCount, colorTemperature, contrast, deviceId, echoCancellation, exposureCompensation, exposureMode, exposureTime,
facingMode, focusDistance, focusMode, frameRate, groupId, iso, latency, noiseSuppression, pan, pointsOfInterest, resizeMode, sampleRate, sampleSize,
saturation, sharpness, tilt, torch, whiteBalanceMode, zoom
see: https://developer.mozilla.org/en-US/docs/Web/API/Media_Streams_API/ConstraintsMETHODS
** these methods are available only once the WebCam "ready" event has happened.
resetSize() - adjusts the size of the WebCam to the actual WebCam size
pause(state) - state defaults to true to pause cam or pass false to unpause cam
also see toggle() method and paused property
toggle() - swap the paused state - also see pause() method and paused property
flip(state) - state defaults to true to mirror the cam or pass false to not mirror the cam
also see flipped property
snapshot() - make a Bitmap of the current webcam frame
keyOut(color, tolerance, replacement) - remove color from Cam's bitmap and a tolerance between 0-1
the default color is "#389b26" which is a medium dark green
the default tolerance is .1 - the higher the tolerance the less sensitive the keying process - so more colors will be removed similar to the provided color
color and tolerance can be an array of colors and tolerances (or just one tolerance if all are the same)
replacement (default clear) a color to replace the keyed out color with or an optional array to match the colors array if an array is used
setFacingMode(mode) - set to "user", "exact_user", "environment", "exact_environment", "auto" to choose camera on mobile
see facingMode parameter for more info
getCanvas() - caches the cam display and adds updateCache to a cam.canvasTicker
use this if a canvas showing what the cam sees is needed
for instance with computer vision libraries like ML5 or TenserFlow, etc.
forgetCanvas() - turn off getCanvas() cam display cache and Ticker function
dispose() - close the cam and remove events
** ML5 Hand Cursors **
prepareTrack(width, height, hand, pinchColor, pinchHide, leftColor, rightColor, alpha, damp, gapTime, tapTime, cursorMode, toggleReplace)
returns a ZIM Container with dots for hand index fingers, thumbs and pinches and adds properties and events
Note: this is optional as it will be done with default values when using handTrack() - see below
width and height (default W and H of stage) width and height of tracking area
hand (default RIGHT) which hand or hands will be tracked - LEFT, BOTH or RIGHT
the performance may be a bit better if one hand is track - to avoid the occassional cursor jump from one hand to the other
also see the hand property to set the handedness at any time
pinchColor (default white) - the color of the dot cursor when pinch is active - will be same for left or right hand
pinchHide (default true) - reduce the alpha of finger and thumb dot cursors when pinching - set to false to not reduce the alpha
leftColor (default green) the color of the left finger and thumb cursors
rightColor (default blue) the color of the right finger and thumb cursors
handScale (default 1) the scale of the finger and thumb cursor circles
will affect hit area too for pinch
may want to decrease scale if people are far from camera
also see the handScale property to adjust dynamically - note the pinch cursor circle does not scale
to scale the pinch cursor circle dynamically scale the cam leftPinch and rightPinch properties
handAlpha (default .5) the alpha of all the dot cursors applied to the dots container
to set this dynamically, just set the alpha of the cam dots property
damp (default .5) the damp of the cursor movement - .01 is slow, 1 is no damp
gapTime (default .5) seconds to wait (after cursor data reads no cursor) until the cursor is reported as up
without this, over the several seconds an object is dragged with pinch, the dragging often gets cut off
also see tapTime - for initial up report to handle taps
note: the gapTime is in effect across the whole time a pinch is active
tapTime (default .3) seconds that a cursor up will immediately reported with no gapTime
if the pinch cursor is reported up within this time, then it is probably a tap pinch rather than a tap drag
note: the tapTime is only measured from the beginning of the pinch
cursorMode (default AUTO) if a hand is detected, AUTO will use the hand for interactivity rather than mouse and touch
and if there is no hand detected, AUTO will use the mouse and touch for interactivity.
Set to true to always use the hand and not the mouse and touch.
Set to false to not replace the mouse or touch cursor
in all cases, the hand cursors will show hand events will be dispatched
when the hand cursor is used, cam.replaceCursor and zim.handCursor will be true
when the mouse and touch are used, cam.replaceCursor and zim.handCursor will be false or undefined
replaceCursor can be toggled by pinching the thumb and the pinky if the toggleReplace parameter is true
also see the replaceCursor property
toggleReplace (default true) set to false to not allow toggling of replaceCursor by pinching the thumb and pinky
note: the replaceCursor property can still be used to toggle replacing the mouse and touch with a hand cursor
handTrack(ML5results) process ML5 HandPose() results
this will activate the prepareTrack() with default parameters if handTrack() is not specifically called
the results, by default, will replace mouse and touch interactivity if a hand cursor is detected (AUTO)
the hand cursor puts a dot at the index finger that will trigger mouseover, mousemove and mouseout
and if the index finger and thumb are pinched will act like a mousedown that also activates pressmove
and when pinch is released will act like a mouseup that also activates pressup, click and tap
there is a hand property that can be tested or set to LEFT, RIGHT (default), or BOTH
this will also dispatch events - see hand events below
getDistance() - returns an object with left and right properties of the distance between the thumb and the index finger
{left:0, right:200} left is probably not active and the right is 200 pixels between thumb and the the index finger
getAngle() - returns an object with left and right properties of the angle between the thumb and the index finger
the angle is 0 when pointing directly to the right and will be 90 when pointing down, 270 when pointing up, etc.
{left:0, right:90} left is probably not active and the right has the thumb at top and finger below
ALSO
ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO
see the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.
PROPERTIES
type - name of class as a string
ready - read only if the ready event has happened
** these properties are available only once the WebCam "ready" event has happened
tag - reference to the HTML video tag (created by ZIM to hold the cam video)
display - reference to the ZIM Container that holds the bitmap of the video
this is what is cached and has its cacheCanvas analyzed for motion
bitmap - reference to the ZIM Bitmap that displays the video on the canvas
when flipped this is scaled -1 in x and reg moved to be flipped inside the display
paused - get or set whether the cam is paused (also see pause() and toggle())
flipped - get or set whether the cam is mirrored (also see flip())
facingMode - get which camera is being used - "user", "environment", etc. might be undefined
see facingMode parameter and setFacingMode() method for more details
** ML5 Hand Cursors **
cursorMode - gets and sets if the hand cursor replaces the mouse and touch
default is AUTO can also be set to true or false
see the cursorMode parameter of prepareTrack()
replaceCursor - get or set if ML5 hand tracking is replacing the mouse and touch cursor
must import ML5 and use prepareTrack() or handTrack()
there is also a read only zim.handCursor property that reports the same as replaceCursor
toggleReplace - get or set whether pinching thumb and pinky will toggle replaceCursor (see above)
hand - get or set the LEFT, RIGHT (default), or BOTH setting of ML5 hand Cursors (see above)
handScale - get or set the scale of the hand cursors - default is 1
gapTime - get or set the gapTime - see gapTime parameter
tapTime - get or set the tapTime - see tapTime parameter
dots - the ZIM Container holding all the hand cursors
leftFinger - the ZIM Circle that represents the left index finger - located inside the dots container
also includes an active property that is true if active
also includes dampX and dampY references to zim Damp object
leftThumb - the ZIM Circle that represents the left thumb - located inside the dots container
also includes dampX and dampY references to zim Damp object
leftPinch - the ZIM Circle that represents the left pinch - located inside the dots container
also includes an active property that is true if active
also includes dampX and dampY references to zim Damp object
rightFinger - the ZIM Circle that represents the right index finger - located inside the dots container
also includes an active property that is true if active
also includes dampX and dampY references to zim Damp object
rightThumb - the ZIM Circle that represents the right thumb - located inside the dots container
also includes dampX and dampY references to zim Damp object
rightPinch - the ZIM Circle that represents the right pinch - located inside the dots container
also includes an active property that is true if active
also includes dampX and dampY references to zim Damp object
pinchTicker - a reference to the Ticker that handles testing the pinches
ALSO
see ZIM Container for properties such as:
width, height, widthOnly, heightOnly, draggable, level, depth, group
blendMode, hue, saturation, brightness, contrast, etc.
ALSO
see the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.
EVENTS
dispatches a "ready" event when the user has accepted webcam usage
dispatches an "error" event if access to the WebCam is unsuccessful
See the CreateJS Easel Docs for Stage events, such as:
mouseenter, mouseleave, stagemousedown, stagemousemove, stagemouseup, drawstart, drawend, etc.
and all the Container events such as:
click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover
** ML5 Hand Cursor Events **
distpaches a "handmove" event when hand cursor moves
dispatches a "handdown" event when index finger and thumb are pinched
dispatches a "handup" event when index finger and thumb are no longer pinched
this will be immediate if within the tapTime time (default .3 seconds - see prepareTrack() method)
this will be delayed by gapTime (default .5 seconds - see prepareTrack() method) if beyond the tapTime
gapTime allows for more complete dragging of ZIM objects like slider buttons, general dragging, etc.
note: the hand cursors will be removed right as the gapTime is started
dispatches a "handon" when a hand cursor is shown - see
dispatches a "handoff" when a hand cursor is hidden
dispatches a "replaceon" event when hand cursor replaces mouse because thumb and pinky are pinched and toggleReplace is true
dispatches a "replaceoff" event when hand cursor no longer replaces mouse because thumb and pinky are pinched and toggleReplace is true
CLOSE ▲PAGE ▤CODE ▤VIDS
CamMotion
zim class - extends a zim.Container which extends a createjs.Container
** MUST import zim_cam - see https://zimjs.com/es6.html#MODULESDESCRIPTION
Captures motion data from a ZIM WebCam at a certain object - by default the stage.
CamMotion makes a grid of points and checks to see if the color has changed under the points.
The location of changed points is stored is a data property
and averaged to provide a single cursor location.
This location of motion is used by the ZIM CamCursor class.
The CamMotion class has adjustable parameters to capture motion in different settings.
See the CamControls class for a panel of controls to change the settings.
There is also a visualizer which adds circles at the data points with motion.
The data points default to be in a randomized grid but can be set to a regular grid.
SEE: https://zimjs.com/nft/bubbling/cam.html and use right arrow to see all four examples
NOTE
noMouse() has been set on CamMotion
to make the cam mouseEnabled set mouse() on the CamMotion object and the cam property of the CamMotion object;
NOTE
see also ZIM CamCursor which has other features - see examples too.
A CamCursor is not always needed and is sometimes used
as well as CamMotion objects on specific buttons that trigger on any motion.
The cursor may just be there to help people know where the motion is heading.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// on a Mac, the canvas must be interacted with first
// so would recommend always using CamAsk first:
const ask = new CamAsk().show(yes=>{
if (yes) {
// a CamMotion with visualizer
// CamMotion will make a Cam and FILL the screen with the cam
// for instance, if the Frame was a square and the webcam a 4x3 aspect ratio
// then the stage would be filled and the left and right of the cam would be off stage
const camMotion = new CamMotion({
visualizerColor:[green,orange,yellow,red,blue,purple,pink],
visualizerBaseColor:clear,
visualizerScale:6,
visualizerBaseScale:1
}).center();
// Optionally adjust the circles
// A custom visualizer can also be easily made
// by looping through the CamMotion data points
camMotion.on("ready", ()=>{
camMotion.visualizer.loop(circle=>{circle.ble("color-dodge")})
});
}
}); // end CamAsk show() - see CamAsk docs for error checking example
EXAMPLE
const ask = new CamAsk().show(yes=>{
if (yes) {
// capture any motion over a button (or a press)
// and change frame color for 1 second
const button = new Button(null,null,"HOLD").pos(200,200).tap(activate);
const camMotion = new CamMotion(button);
camMotion.on("active", activate);
function activate() {
F.color = yellow;
if (button.resetID) button.resetID.clear();
button.resetID = timeout(.5, ()=>{
F.color = darker;
});
}
}
});
EXAMPLE
// hold on object to pick up then
// drag object and hold to drop
// dedicated to Elisha!
const ask = new CamAsk().show(yes=>{
let holding = false;
const circle = new Circle(100,red)
.pos(100, 100, LEFT, CENTER);
// if the user answers yes to the CamAsk
if (yes) {
const camCursor = new CamCursor();
camCursor.on("ready", ()=>{
circle.top().ord(-1); // under cursor above cam
new CamAlpha(camCursor).pos(50,50,RIGHT,TOP);
let moveEvent;
camCursor.on("still", ()=>{
if (!holding && camCursor.hitTestCircles(circle)) {
holding = true;
circle.sha();
circle.diffX = camCursor.x-circle.x;
circle.diffY = camCursor.y-circle.y;
moveEvent = camCursor.on("cursor", ()=>{
circle.loc(
camCursor.x-circle.diffX,
camCursor.y-circle.diffY
);
});
} else if (holding) {
holding = false;
circle.sha(-1);
camCursor.off("cursor", moveEvent)
circle.addTo().ord(-2);
}
});
});
}
});
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports VEE - parameters marked with ZIM VEE mean a zim Pick() object or Pick Literal can be passed
Pick Literal formats: [1,3,2] - random; {min:10, max:20} - range; series(1,2,3) - order, function(){return result;} - function
obj - (default - stage) can set a DisplayObject on which to capture motion
for instance, add a Rectangle as a button and capture motion only on that button
or have multiple CamMotion or CamCursor each with such buttons
if so, then use a single cam for all of them
preview - (default .1) the alpha of the WebCam - or set to false or 0 to not see the cam
usually when making a CamCursor it is advisable to let people see themselves
smooth - (default 1) a number between 0 and 1 with 1 being smoothest but a little slower
smooth gets multiplied by 10 to average over a buffer of readings (at the period)
lower numbers will be jittery but a little faster
damp - (default .05) the damp for the cursor data movement
a damp of 1 will be very jittery whereas .01 will be slow moving
also see smooth and sensitivity
sensitivity - (default .5) set higher to capture more motion or lower to capture less motion
cams can toggle colors even if no motion so set a lower sensitivity if capturing false motion
basically, motion is detected by color difference and sensitivity adjusts the detection range
the range is shades of 256 reds - or 256 greens - or 256 blues depending on the mode parameter
of the 256 shades, a sensitivity of 0 is 100 shades and a sensitivity of 1 is 10 shades
precision - (default .5) set a higher precision for more test points and a lower precision for less points
a precision of 0 will be a point every 100 pixels and a precision of 1 is every 10 pixels
higher precision may slow down the data reading, lower precision may cause bigger cursor jumps
period - (default .05) seconds to test for motion - uses a ZIM interval
will have its data averaged over a buffer that is set by the smooth parameter
colorFilter - (default null) set to a color such as "green" to move to that color also see colorSensitivity
note that "red" occurs a fair bit in skin so perhaps do not use red
colorSensitivity - (default .5) 0 is exact and 1 is 20 in hue comparison so .5 is 10 in hue comparison
meaning if colors converted to HSL have hues within colorSensitivity*20 of each other then it will check for motion
can be bigger than 1 so 2 would be a hue range of 40
mode - (default 0) 0 tests red shades, 1 tests green shades and 2 tests blue shades
from testing, there seems no difference with different shades or indeed all shades at once
so a single shade is used - possibly a different shade may work better in a certain environment
visualizerObj - |ZIM VEE| (default null) - set to "circle" or pass in any DisplayObject
this places a circle at the data points
also see randomize to adjust how the visualizer points are distributed
and the precision which will set the number of points
A custom visualizer can also be made by passing in no visualizerObj
and using the data in the data event
visualizerColor - |ZIM VEE| (default zim.red) - the color for the circle - or a DisplayObject with a color property
the visualizerColor is the color when there is motion at its point
visualizerBaseColor - |ZIM VEE| (default zim.dark) visualizer circle color when no motion is detected
visualizerScale - |ZIM VEE| (default 1) the scale of the visualizerObj when when motion is detected
visualizerBaseScale - |ZIM VEE| (default 0) the scale of the visualizerObj when no motion is detected
guideH - (default AUTO) where to place the motionX of the motion point
the points of motion make up a motion box
AVE - places motion point at average of points
AUTO - places the motion point proportionally on the motion box
with respect to the box's location on the obj provided for the cam (stage is default)
if motion box is at left of obj then motion point is at left of box
if motion box is in middle of obj then motion point is in middle of box
if motion box is at right of obj then motion point is at right of box
and anything proportionally between
so as one reaches to the right, the point is more to the right of the motion box, etc.
LEFT - places motion point at left of motion box
CENTER - places motion point at center of motion box
RIGHT - places motion point at right of motion box
guideV - (default TOP) where to place the motionY of the motion point
the points of motion make up a motion box
AVE - places motion point at average of points
AUTO - places the motion point proportionally on the motion box
with respect to the box's location on the obj provided for the cam (stage is default)
if motion box is at top of obj then motion point is at top of box
if motion box is in middle of obj then motion point is in middle of box
if motion box is at bottom of obj then motion point is at bottom of box
and anything proportionally between
so as one reaches to the top, the point is more to the top of the motion box, etc.
TOP - places motion point at top of motion box
CENTER - places motion point at center of motion box
BOTTOM - places motion point at bottom of motion box
randomize - (default true) - make the grid but then randomly move the points
up to 1/3 the spacing on either side
this somewhat masks the jumping about of the average motion point
and affects the outcome of the randomizer to look perhaps more natural
but if a regular grid is desired, set randomize to false
cam - (default ZIM WebCam) will default to a flipped WebCam
frame - set to desired frame if not the ZIM Default Frame
facingMode - (default true) set to "user", "exact_user", "environment", "exact_environment", "auto"
will try and set cameras on mobile to front or back - ignored on PC
warning, the exact versions might cause an error on PC
also see setFacingMode() method to change dynamically
config - an optional configuration object {} with properties for media settings - such as:
width, height, facingMode, aspectRatio, autoGainControl, brightness, channelCount, colorTemperature, contrast, deviceId, echoCancellation, exposureCompensation, exposureMode, exposureTime,
facingMode, focusDistance, focusMode, frameRate, groupId, iso, latency, noiseSuppression, pan, pointsOfInterest, resizeMode, sampleRate, sampleSize,
saturation, sharpness, tilt, torch, whiteBalanceMode, zoom
see: https://developer.mozilla.org/en-US/docs/Web/API/Media_Streams_API/ConstraintsMETHODS
** these methods are available only once the WebCam "ready" event has happened.
dispose() - close the cam and remove events
ALSO
ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO
see the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.
PROPERTIES
type - name of class as a string
obj - reference to the object passed to the cam to define a motion capture region
smooth - get or set the smoothness (0-1) - see parameter for info
sensitivity - get or set the sensitivity (0-1) - see parameter for info
precision - get or set the precision (0-1) - see parameter for info
colorFilter - get or set the colorFilter - see parameter for info
colorSensitivity - get or set the colorFilter - see parameter for info
motionX - get the reported x damped position of the motion - relative to the guideH parameter setting
motionY - get the reported y damped position of the motion - relative to the guideV parameter setting
rawX - get the reported x undamped position of the motion - relative to the guideH parameter setting
rawY - get the reported y undamped position of the motion - relative to the guideH parameter setting
cam - reference to the ZIM WebCam object
dampX - the horizontal Damp object
dampY - the vertical Damp object
** these properties are available only once the WebCam "ready" event has happened
data - an array of motion data for each point with 0 for no motion and 1 for motion
points - an array of point objects {x, y} that locate the test points relative to the obj parameter (default stage)
camPoints - (used internally) an array of point objects {x, y} that locate the test points relative to the cam.bitmap
interval - a reference to the ZIM interval that runs to collect the data
ticker - a reference to the ZIM Ticker function id
visualizer - a reference to the ZIM Container that holds visualizer visualizerObj objects
ALSO
see ZIM Container for properties such as:
width, height, widthOnly, heightOnly, draggable, level, depth, group
blendMode, hue, saturation, brightness, contrast, etc.
ALSO
see the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.
EVENTS
dispatches a "ready" event when the WebCam is ready (the user has accepted web cam usage)
dispatches a "data" event when the interval collects new motion data
dispatches a "cursor" event constantly (in a Ticker function)
dispatches an "active" event when motion is detected by interval - will repeat at period rate
dispatches an "inactive" event when motion is not detected by interval - will repeat at the period rate
dispatches an "error" event if access to the WebCam is unsuccessful
See the CreateJS Easel Docs for Stage events, such as:
mouseenter, mouseleave, stagemousedown, stagemousemove, stagemouseup, drawstart, drawend, etc.
and all the Container events such as:
click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover
CLOSE ▲PAGE ▤CODE ▤VIDS
CamCursor
zim class - extends a zim.Container which extends a createjs.Container
** MUST import zim_cam - see https://zimjs.com/es6.html#MODULESDESCRIPTION
Places a cursor at the motion location calculated by ZIM CamMotion.
This can be used to make objects follow the cursor or activate buttons with motion.
SEE: https://zimjs.com/nft/bubbling/cam.html and use right arrow to see all four examples
NOTE
noMouse() has been set on CamMotion and Cam objects - set them to mouse() if desired;
NOTE
see also ZIM CamMotion which has other features - see examples too.
A CamCursor is not always needed and is sometimes used
as well as CamMotion objects on specific buttons that trigger on any motion.
The cursor may just be there to help people know where the motion is heading.
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// on a Mac, the canvas must be interacted with first
// so would recommend always using CamAsk first:
const ask = new CamAsk().show(yes=>{
if (yes) {
const cursor = new CamCursor();
cursor.on("ready", ()=>{
zog("ready");
});
cursor.on("still", ()=>{
zog("still");
});
cursor.on("motion", ()=>{
zog("motion");
});
}
}); // end CamAsk show() - see CamAsk docs for error checking example
EXAMPLE
const ask = new CamAsk().show(yes=>{
if (yes) {
var button = new Button(null,null,"HOLD").pos(200,200).tap(activate);
const cursor = new CamCursor();
cursor.on("still", ()=>{
if (cursor.hitTestBounds(button)) activate();
});
cursor.on("cursor", ()=>{
if (cursor.hitTestBounds(button)) button.backgroundColor = green;
else button.backgroundColor = "orange";
});
function activate() {
F.color = yellow;
if (button.resetID) button.resetID.clear();
button.resetID = timeout(.5, ()=>{
F.color = darker;
});
}
}
});
EXAMPLE
// use this for a CamCursor to track motion of green pixels
// increase the precision if tracking a marker for instance
const camCursor = new CamCursor({
camMotion:new CamMotion({precision:.8, colorFilter:"green", colorSensitivity:.5})
});
PARAMETERS
** supports DUO - parameters or single object with properties below
cursor - (default new Circle()) the DisplayObject for the cursor
can be any DisplayObject like a Bitmap, Sprite, Emitter, etc.
preview - (default .1) the alpha of the WebCam - or set to false or 0 to not see the cam
usually when making a CamCursor it is advisable to let people see themselves
camMotion - (default new CamMotion()) add a CamMotion to calculate the cursor motion
** the following parameters are for the cursor if a default cursor is used
radius - (default 10) the radius of the circle cursor
color - (default zim.blue) the color of the circle cursor when in motion
borderColor - (default zim.purple) the color of the circle cursor when in motion
borderWidth - (default 5) the border width of the circle cursor
stillColor - (default color) the color of the circle cursor when still
stillBorderColor - (default borderColor) the border color of the circle cursor when still
stillTime - (default 1) seconds of no motion until considered still
will then set a "still" event and set motion to false
colorFilter - (default null) set to a color such as "green" to move to that color also see colorSensitivity
note that "red" occurs a fair bit in skin so perhaps do not use red
colorSensitivity - (default .5) 0 is exact and 1 is 20 in hue comparison so .5 is 10 in hue comparison
meaning if colors converted to HSL have hues within colorSensitivity*20 of each other then it will check for motion
can be bigger than 1 so 2 would be a hue range of 40
cam - (default camMotion.cam) will use the camMotion cam
but a specific cam can be passed in
facingMode - (default true) set to "user", "exact_user", "environment", "exact_environment", "auto"
will try and set cameras on mobile to front or back - ignored on PC
warning, the exact versions might cause an error on PC
also see setFacingMode() method to change dynamically
config - an optional configuration object {} with properties for media settings - such as:
width, height, facingMode, aspectRatio, autoGainControl, brightness, channelCount, colorTemperature, contrast, deviceId, echoCancellation, exposureCompensation, exposureMode, exposureTime,
facingMode, focusDistance, focusMode, frameRate, groupId, iso, latency, noiseSuppression, pan, pointsOfInterest, resizeMode, sampleRate, sampleSize,
saturation, sharpness, tilt, torch, whiteBalanceMode, zoom
see: https://developer.mozilla.org/en-US/docs/Web/API/Media_Streams_API/ConstraintsMETHODS
** these methods are available only once the WebCam "ready" event has happened.
dispose() - close the cam and remove events
ALSO
ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO
see the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.
PROPERTIES
type - name of class as a string
cursorObj - reference to the cursor object
camMotion - reference to the CamMotion object
colorFilter - get or set the colorFilter - see parameter for info
colorSensitivity - get or set the colorFilter - see parameter for info
cam - reference to the CamMotion's Cam object
motion - read only true if moving and false if not moving - see stillTime
and "motion" and "still" events
ALSO
see ZIM Container for properties such as:
width, height, widthOnly, heightOnly, draggable, level, depth, group
blendMode, hue, saturation, brightness, contrast, etc.
ALSO
see the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.
EVENTS
dispatches a "ready" event when the WebCam is ready (the user has accepted web cam usage)
dispatches a "motion" event when the cursor starts to move
a little different than the CamMotion "active" event which triggers constantly on the interval
dispatches a "still" event when the cursor starts to be still (after stillTime with no motion)
a little different than the CamMotion "inactive" event which triggers constantly on the interval
dispatches a "cursor" event constantly (from the CamMotion cursor event)
dispatches an "error" event if access to the WebCam is unsuccessful
See the CreateJS Easel Docs for Stage events, such as:
mouseenter, mouseleave, stagemousedown, stagemousemove, stagemouseup, drawstart, drawend, etc.
and all the Container events such as:
click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover
CLOSE ▲PAGE ▤CODE ▤VIDS
CamAlpha
zim class - extends a zim.Container which extends a createjs.Container
** MUST import zim_cam - see https://zimjs.com/es6.html#MODULESDESCRIPTION
A widget with a slider that sets the alpha of the ZIM Cam or CamMotion provided.
The initial alpha is set by setting the alpha of the Cam()
or by using the preview parameter of CamMotion() or CamCursor().
SEE: https://zimjs.com/nft/bubbling/cam.html and use right arrow to see all four examples
NOTE
make the CamAlpha in the ready event of the Cam() or CamMotion()
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// on a Mac, the canvas must be interacted with first
// so would recommend always using CamAsk first:
const ask = new CamAsk().show(yes=>{
if (yes) {
const camMotion = new CamMotion({preview:.5}).center();
camMotion.on("ready", ()=>{
new CamAlpha(camMotion).pos(50,50,RIGHT,TOP);
});
}
}); // end CamAsk show() - see CamAsk() docs for error checking example
PARAMETERS
cam - a ZIM Cam or CamMotion object.
color - (default white) the color of the parts
will also set certain alpha on whole object
METHODS
** these methods are available only once the WebCam "ready" event has happened.
dispose() - close the cam and remove events
ALSO
ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO
see the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.
PROPERTIES
type - name of class as a string
cam - get or set the cam being controlled
backing - reference to the backing zim Rectangle
label - reference to the zim Label
slider - reference to the zim Slider
ALSO
see ZIM Container for properties such as:
width, height, widthOnly, heightOnly, draggable, level, depth, group
blendMode, hue, saturation, brightness, contrast, etc.
ALSO
see the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.
EVENTS
See the CreateJS Easel Docs for Stage events, such as:
mouseenter, mouseleave, stagemousedown, stagemousemove, stagemouseup, drawstart, drawend, etc.
and all the Container events such as:
click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover
CLOSE ▲PAGE ▤CODE ▤VIDS
CamControls
zim class - extends a zim.List which extends a zim.Container
** MUST import zim_cam - see https://zimjs.com/es6.html#MODULESDESCRIPTION
A widget with a slider for CamMotion smooth, sensitivity, precision, damp and flip properties.
This can be used to experiment with settings or to give end user control.
SEE: https://zimjs.com/nft/bubbling/cam.html and use right arrow to see all four examples
NOTE
the values in the sliders are 0-100 whereas the parameter values are 0-1.
An exception is damp where the value for the tool range is 0-.1. So 100 is .1 damp.
NOTE
make the CamControls in the ready event of the CamMotion
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// on a Mac, the canvas must be interacted with first
// so would recommend always using CamAsk first:
const ask = new CamAsk().show(yes=>{
if (yes) {
const camMotion = new CamMotion({preview:.5}).center();
camMotion.on("ready", ()=>{
new CamControls(camMotion).pos(50,50,RIGHT,TOP);
});
}
}); // end CamAsk show() - see CamAsk docs for error checking example
PARAMETERS
camMotion - a ZIM CamMotion object - or a CamCursor object
close - (default false) set to true to add a close icon
collapse - (default true) set to false to remove the collapse icon
METHODS
dispose() - dispose the camControls
ALSO
ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO
see the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.
PROPERTIES
type - name of class as a string
cam - reference to the Cam object
camMotion - reference to the CamMotion object
camCursor - reference to the CamCursor object if there is one
reset - reference to the reset Button
ALSO
see ZIM List for properties such as:
items and then item[0].slider, items[0].stepper, etc.
ALSO
see ZIM Container for properties such as:
width, height, widthOnly, heightOnly, draggable, level, depth, group
blendMode, hue, saturation, brightness, contrast, etc.
ALSO
see the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.
EVENTS
See the CreateJS Easel Docs for Stage events, such as:
mouseenter, mouseleave, stagemousedown, stagemousemove, stagemouseup, drawstart, drawend, etc.
and all the Container events such as:
click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover
CLOSE ▲PAGE ▤CODE ▤VIDS
CamAsk
zim class - extends a zim.Pane which extends a zim.Container
** MUST import zim_cam - see https://zimjs.com/es6.html#MODULESDESCRIPTION
A circular confirmation widget to ask the user if they want to use the cam.
This is before the Browser will ask for permission.
The reason is that Macs do not treat giving cam permission as intercting with the Browser (sigh).
So, before video can be played interaction has to happen.
Using this widget to ask is interacting and is probably best to use on any platform.
SEE: https://zimjs.com/nft/bubbling/cam.html and use right arrow to see all four examples
NOTE
as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)
EXAMPLE
// on a Mac, the canvas must be interacted with first
// so would recommend always using CamAsk first:
const ask = new CamAsk().show(yes=>{
// if the user answers yes to the CamAsk
if (yes) {
let cam = new Cam().scaleTo().center();
cam.on("ready", ()=>{
// code here
});
// if the user does not accept the browser asking about cam
cam.on("error", ()=>{
new Pane("CAM not accepted",yellow).show();
});
} else { // answered no to CamAsk dialog
new Pane("CAM not accepted",yellow).show();
}
});
PARAMETERS
color - (default zim.dark) the font and border color of the widget
backgroundColor - (default zim.lighter) the backgroundColor of the widget
METHODS
show(call) - shows the pane and receives an optional callback parameter
that will call the function passed to it when YES or NO is pressed
the function will receive a parameter with a true for YES answer and false for NO answer
dispose() - dispose the camAsk
ALSO
see all the methods of a zim Pane()
including hide()
ALSO
ZIM 4TH adds all the methods listed under Container (see above), such as:
drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),
addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc.
ALSO
see the CreateJS Easel Docs for Container methods, such as:
on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(),
addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.
PROPERTIES
type - name of class as a string
label - reference to the zim Label
yes - reference to the zim Button with YES
no - reference to the zim Button with NO
ALSO
see ZIM Pane for properties such as:
backdropColor, etc.
ALSO
see ZIM Container for properties such as:
width, height, widthOnly, heightOnly, draggable, level, depth, group
blendMode, hue, saturation, brightness, contrast, etc.
ALSO
see the CreateJS Easel Docs for Container properties, such as:
x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
alpha, cursor, shadow, name, mouseChildren, mouseEnabled, parent, numChildren, etc.
EVENTS
Dispatches a "yes" event when YES button is pressed
but also see the show(call) parameter
where the call parameter recieves a function
the function receives true for yes or false for no
this is an easier way to handle the event
Dispatches a "no" event when NO button is pressed
See the CreateJS Easel Docs for Stage events, such as:
mouseenter, mouseleave, stagemousedown, stagemousemove, stagemouseup, drawstart, drawend, etc.
and all the Container events such as:
click, dblclick, mousedown, mouseout, mouseover, pressdown (ZIM), pressmove, pressup, removed, rollout, rollover
CLOSE ▲PAGE ▤CODE ▤VIDS
makeShape
zim libraries - PIZZAZZ 1
** MUST import zim_pizzazz - see https://zimjs.com/es6.html#MODULESDESCRIPTION
Pizzazz is a set of modules that help assets such as shapes, icons, patterns and paths.
To some degree they are examples that ZIM can make use of such assets.
The modules were put together in a day or two and you could add your own assets of these types.
Call the listShapes() to see a list of available methods in the console (F12) - or see below:
PIZZAZZ SHAPES:
menu
bat
lips
magnet
stash
bolt
cloud
pow
drip
drop
circle
folds
oval
kidney
boom
roadside
Pizzazz Shapes example:
https://zimjs.com/bits/view/pizzazz.htmlEXAMPLE
// import zim_pizzazz up top rather than just zim
// In the ZIM Frame create the shape:
makeShape("drip", blue, 250).center();
// This can be used anywhere a zim Shape is used:
// tiled as part of the display or used as a background for a Label or Button, etc.
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports VEE - parameters marked with ZIM VEE mean a zim Pick() object or Pick Literal can be passed
** Pick Literal formats: [1,3,2] - random; {min:10, max:20} - range; series(1,2,3) - order, function(){return result;} - function
type - |ZIM VEE| (default "cloud") the shape name - see list below
color - |ZIM VEE| (default black) a color for the shape - ZIM color, HTML string or HEX
width (default as drawn) the width of the shape
height (default as drawn) the height of the shape
RETURNS
a ZIM Shape
CLOSE ▲PAGE ▤CODE ▤
makeIcon
zim libraries - PIZZAZZ 2
** MUST import zim_pizzazz - see https://zimjs.com/es6.html#MODULESDESCRIPTION
Pizzazz is a set of modules that help assets such as shapes, icons, patterns and paths.
To some degree they are examples that ZIM can make use of such assets.
The modules were put together in a day or two and you could add your own assets of these types.
Call the listIcons() to see a list of available methods in the console (F12) - or see below:
PIZZAZZ ICONS:
play
stop
pause
restart
rewind
fastforward
sound
mute
close
settings
menu
maximize
arrow
arrowthin
arrowstick
arrowhollow
arrowline
rotate
heart
marker
info
home
edit
magnify
checkmark
angle
garbage
move
resize
rotate2
save
mark
Pizzazz Icons example:
https://zimjs.com/bits/view/icons.htmlEXAMPLE
// import zim_pizzazz up top rather than just zim
const icon = makeIcon("home", white, 2).pos(40,40,RIGHT);
// Or pass the icon into the Button class as the icon parameter
// Optionally provide a second shape for the rollIcon, etc. of the Button
var info = new Button({
width:50,
height:50,
color:blue, // or "red", "#666" etc.
rollColor:pink,
corner:0,
label:"",
icon:makeIcon("info", "white")
})
.pos(100, 50, RIGHT)
info.on("click", function(){zgo("https://zimjs.com/bits/view/icons.html")});
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports VEE - parameters marked with ZIM VEE mean a zim Pick() object or Pick Literal can be passed
** Pick Literal formats: [1,3,2] - random; {min:10, max:20} - range; series(1,2,3) - order, function(){return result;} - function
type - |ZIM VEE| (default "play") 0 the shape name - see list below
color - |ZIM VEE| (default black) a color for the icon - ZIM color, HTML string or HEX
scale - |ZIM VEE| (default 1) the scale of the icon
multi (default 1) how many icons to show
multiAlpha (default .5) alpha for other icons
multiScale (default .3) scale for each subsequent icons
multiX (default 0) x shift for each subsequent icons
multiY (default 0) y shift for each subsequent icons
skewX (default 0) horizontal skew of icon
skewY (default 0) vertical skew of icon
backing (default null) a DisplayObject for the backing
RETURNS
a ZIM Container
CLOSE ▲PAGE ▤CODE ▤
makePattern
zim libraries - PIZZAZZ 3
** MUST import zim_pizzazz - see https://zimjs.com/es6.html#MODULESDESCRIPTION
Pizzazz is a set of modules that help assets such as shapes, icons, patterns and paths.
To some degree they are examples that ZIM can make use of such assets.
The modules were put together in a day or two and you could add your own assets of these types.
Call the listPatterns() to see a list of available methods in the console (F12) - or see below:
PIZZAZZ PATTERNS:
pixels
noise
dots
stripes
slants
hatch
plaid
bling
Pizzazz Patterns example:
https://zimjs.com/patterns.htmlEXAMPLE
// import zim_pizzazz up top rather than just zim
// In the ZIM Frame ready function:
// 1. Simple pattern
const pixels = makePattern().center(); // adds a pixel pattern to the stage
// 2. Pattern for ProgressBar (use the backing parameter)
const pattern = makePattern({type:"slants", colors:makeSeries(brown, grey), size:5, rows:20, cols:60, interval:.5})
const bar = new ProgressBar({barType:"Rectangle", color:zim.dark, backing:pattern}).show();
bar.percent = 40; // or use with loadAssets() or Frame() progress parameter
// 3. Pattern for Button wait state (use the waitBacking parameter)
new Button({
wait:"STOP!",
waitTime:2,
waitBacking:makePattern({type:"stripes", backgroundColor:red, colors:black, size:30})
}).center();
PARAMETERS
** supports DUO - parameters or single object with properties below
** supports VEE - parameters marked with ZIM VEE mean a zim Pick() object or Pick Literal can be passed
** Pick Literal formats: [1,3,2] - random; {min:10, max:20} - range; series(1,2,3) - order, function(){return result;} - function
type - |ZIM VEE| (default "pixels") the pattern name - see list below:
// pixels, noise, dots, stripes, slants, hatch, plaid, bling, check
colors - |ZIM VEE| (default black) CSS colors for the pattern
// this uses ZIM VEE to apply multiple, random, or a series of colors, etc.
size - |ZIM VEE| (default 10) the size of the shape used for the pattern
cols - (default 30) the columns to tile
rows - (default 10) the rows to tile
spacingH - (default 0) a spacing between columns
spacingV - (default 0) a spacing between rows
interval - (default 0) the time to animate in s
for pixels, noise, dots and bling this is the time between showing different patterns
for stripes, slants, hatch, plaid this is the time to move the pattern to the right
different patterns may seem to move at different speeds due to the pattern repeat distance
startPaused - (default false) set to true to start the interval for animation to paused
backgroundColor - (default 0) a CSS color for the background of the pattern
gradient - (default 0) 0-1 for how much gradient to show - try .2 for a decent looking gradient
cache - (default true except for dots) if the pattern is cached - dots look better not cached
RETURNS
a ZIM Container
CLOSE ▲PAGE ▤CODE ▤
EXPAND ▼ makePath() ** there is no makePath() - please read details
