This document lists the changes to ZIM DOCS from version to version.
The code that matches these changes can be found on GIT HUB.
See TIPS on how to deal with changes.
BREAK is highlighted below if you will need to change an app when updating it to the new ZIM.
This happens if a parameter position is changed (new parameters might be placed next to related parameters)
or if a method is removed and a replacement property added, etc.
Breaks are kept to a minimum but in "later" parameter cases, ZIM DUO is often used so order is less important.
Shifts in names and functionality are also more common in recently added features.
RECOMMENDATION: just leave any finished apps with the version of ZIM that was used at the time
unless you see an IMPROVEMENT that will help your app - then make sure you test after upgrading!
https://zimjs.com/bot
Created and AI Chat Bot for ZIM.
This uses RAG (Retrieval Augmented Generation)
which uses the best 3 questions and answers from 1000 ZIM question and answers
and the ZIM Template to feed to ChatGPT a special prompt.
The project was done by Suha Islaih https://www.linkedin.com/in/suha-islaih
and we would recommend employing Suha for similar projects.
The 1000 questions and answers were guided by the ZIM team
to get current information as raw ChatGPT was quite out-of-date.
From our tests, we greatly improved the answers from about 2% correct to 80% correct.
Still, that leaves 20% incorrect and possibly quite misleading.
We have included a poll at the bottom that you can do for each question
and which shows live results as to the correctness of the answers.
ZIM STATEMENT ON AI
We love coding and would much rather code than have AI code.
We love creating which is the process from idea to product/service.
How much of that is AI is up to you and your situation.
We would feel sad if people just use AI and do not code.
Initially, we considered saying that using AI is like eating without tasting.
But... if there is no expression in coding as in, it can be automated,
then we should let it be so, and spend time on more ideas, friends, life, etc.
Still, many like to cook even though we can just buy meals.
Code if you want. Use AI if you want.
2. RIVE INTEGRATION
https://zimjs.com/rive/animate.html
https://zimjs.com/rive/input.html
https://zimjs.com/rive/node.html
https://zimjs.com/rive/listen.html
Rive lets you make interactive graphics and animations - https://rive.app/
Rive is an animation tool similar to Adobe Animate (Flash) but with a special StateMachine
that has a cool connector node system to guide animation states.
Personally, I have done interactive animations for years on lots of tools
but at tenth glance, the StateMachine still confuses me ;-). Education would help, I am sure.
Most of these Rive animations can just be done in ZIM - but bones are nice!
Rive apps can be displayed in ZIM using one of two classes under META in Docs (along with QR and GIF)
Rive() handles animation, input and nodes
RiveListener() 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.
The Rive JS runtime script or import must be placed at the top of the HTML page.
// at top (note: fix the gap between the h and t below)
<script src="h ttps://unpkg.com/@rive-app/[email protected]"></script>
// in ZIM code
// Rive, when not used in ZIM, requires an existing canvas and a canvas parameter.
// With Rive in ZIM, we make the canvas based on width and height parameters.
// A canvas parameter is available as well for a predefined canvas.
const r = new Rive({
src: "rive.riv",
width: 500,
height: 500,
autoplay: true,
stateMachines: "bumpy", // optional
});
// The Rive object has a display property that is a ZIM DisplayObject - a dynamic Bitmap.
// The ZIM Vid() is also a dynamic Bitmap but the difference is the Vid is the Bitmap.
// With Rive, the Rive object is a Rive object so you cannot add it to the stage, for instance.
// You must add the display property to the stage.
// This lets people use the Rive object with all its methods and properties just like in examples.
// For any ZIM methods like center(), animate(), etc. we use the display property of the Rive object.
r.display.center();
3. VALUE AND INDEX
currentValue has been replaced with value and selectedIndex with index.
currentValue and selectedValue will still work for backwards compatibility.
This is for parameters, properties and STYLE of components such as RadioButton, Slider, etc.
Note: not all components with a value have an index and visa versa, although some have both.
STYLE = {index:1}
const r = new RadioButtons().addTo().change(()=>{
zog(r.index)
});
4. OUTLINE IMAGE
https://zimjs.com/017/outline.html
Added an outlineImage() function to the Code Module
that returns points around a single solid part of a DisplayObject.
Most likely, this will be used on a Pic() that is a png with background transparent outside.
Note: this returns thousands of points so see simplifyPoints()
Added a simplifyPoints() function to the Code Module
that takes lots of points and simplifies them.
The simplified point can then be passed into a ZIM Blob to make a shape.
Thanks Ami Hanya for the prompting
and Emanuele Feronato https://www.emanueleferonato.com/ for earlier Flash examples.
// Emanuele Feronato & Anton Angelov
// https://www.emanueleferonato.com/2011/09/12/create-non-convex-complex-shapes-with-box2d/
// Vladimir Agafonkin https://mourner.github.io/simplify-js/
// fix the gap between the h and t below
import zim from "h ttps://zimjs.org/cdn/017/zim_physics"; // or latest version
new Frame(FIT, 1024, 768, light, dark, ready, "cathead.png", "h ttps://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();
}
5. CONCAVE BLOB PHYSICS IMPROVEMENT
https://zimjs.com/017/outline.html
ZIM Physics helper module has been updated to version 2.3
ZIM Blob().addPhysics() now supports concave shapes
as long as the Blob does not overlap, it should work (and points in clockwise order)
Internally, concave shapes are converted to multiple convex fixture shapes in Box2D
using the b2Separator class by Antoan Angelov
See the example above
NOTE: previously, we showed an example made up of multiple Physics objects with joins.
IMPROVEMENT Now, joining multiple physics objects are no longer necessary.
const head = new Blob({
interactive:false,
points:points,
controlType:"none"
}).pos(0,floor.height,CENTER,BOTTOM).addPhysics();
const earRight = new Triangle(100,100,-1).loc(661, 341).addPhysics()
const earLeft = new Triangle(100,-1,100).loc(362, 341).addPhysics()
physics.join(head,earRight);
physics.join(head,earLeft);
// We could now make this with one Blob().addPhysics()
6. LIST ACCORDION TOGGLE INDEX
https://zimjs.com/017/accordion.html
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 or see openAtNum()
the way the index works is that it is based on visible items (indexes start at 0)
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 - OPENING NESTED ACCORDION
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
Added closeOthers parameter to List() with default false
set to true to close other branches before opening selected branch.
openAtNum(idNum, closeOthers) now has a closeOthers parameter with default false
set to true to close any open branches before opening branch at id.
7. SELECTED INDICATOR TYPE IMPROVEMENT
https://zimjs.com/017/indicator.html
Added a selectedIndicatorType parameter after indicatorType BREAK - rest of parameters moved back one
This allows different indicators to be used for selected versus not selected.
Also, updated the indicators to be center reg and if no height provided, be the max height of any custom indicators.
Thanks Karel Rosseel.
8. ACCESSIBILITY
Improved the docs to note that with Windows Narrator, the scan mode must be toggled OFF - use Caps Lock - Spacebar.
Also, for ENTER key functionality DO NOT use tap() but rather use on("mousedown") or on("click").
9. SVG BREAKIMPROVEMENT
added the styles back in for SVG - bitmap:false so SVGContainer version
fixed up color processing issues with rgb() values - we were parsing , out so that messed up the colors.
Made SVG not default to showControls:true when bitmap:true as these were then showing when interactive:false is chosen.
Reversed the direction of the SVGContainer processing so stacking order is correct - thanks Karel Rosseel for report.
10. GLOBALS
https://zimjs.com/docs.html?item=globals
Rewrote the ZIM Globals entry in the Docs to list all globals and describe the global situation.
Read the docs for description of the zim namespace, zimplify, ES modules/scripts versus NPM
LIST OF 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.
11. PAGES
https://zimjs.com/017/continuous.html
Added a continuous parameter to pages - thanks Ami Hanya for the request
Now default swipe and arrows can be set continuous with the new Pages() parameter
ZIM Poly() now has a flat parameter defaults to false to keep stars pointed up
set to true to keep the bottom flat - thanks Jesus Cital for the suggestion
IMPROVEMENT - fixed memory leak in setMask() - thanks Adam V for the report.
Made ZIM drag() and gesture() boundary work with lazy loading images.
Added DUO to Synth Tone by adding DUO to addWires().
ZIM Keyboard - BREAK moved placeScale parameter to where other place parameters are.
Added swatch to ColorPicker in Spectrum mode with buttonBar false - thanks Karel Rosseel for request
Added cursor parameter to ZIM tap()
Adjusted Panel, Window, and ColorPicker to use tap() with dblclick to collapse
as this works on mobile whereas the CreateJS dblclick does not IMPROVEMENT
Made TextArea dispatch the original input event so can capture the data property of the event object to get key entered
Made TextArea change event work properly - it was missing the code to activate.
Made TextInput pass on the original input with data on the event object and keydown with key and keyCode on the event object
Updated ZIM animate() to apply effect animations when paused and percentComplete is used
needed to add the if (effectCheck) target.updateEffects(); to the percentComplete setter method IMPROVEMENTBREAK - changed the ZIM ignore constant to IGNORE - this can be used in STYLE values.
Adjusted ZIM Bitmap() getting color at point example to use the getColorAtPoint(x,y) method
Fixed ZIM animate() to properly end on start value for rewind IMPROVEMENT
we were setting the value to the results of the getStart() function - not realizing that getStart() was actually setting the start
instead, we wanted to run the getStart only once and use the startObj object it makes when we rewind.
Fixed ZIM wiggle() to properly end on the start if endOnStart is true (default) IMPROVEMENT
We are running a timeout() to end the wiggle and often it cut off before the end - if the time was small like .1 seconds.
Now we also animate to the start value in 0 seconds in the timeout() to catch this.
BREAK - switched RadioButtons to default to always:true which means can't press same radio button to turn it off
13. BREAKS
These are also reported in the sub sections but now will compile them here as well:
Added a selectedIndicatorType parameter after indicatorType - rest of parameters moved back one - BREAK
Added the styles back in for SVG - bitmap:false so SVGContainer version - BREAK
Made SVG not default to showControls:true when bitmap:true as these were then showing when interactive:false is chosen - BREAK
Reversed the direction of the SVGContainer processing so stacking order is correct - BREAK
ZIM Keyboard - moved placeScale parameter to where other place parameters are - BREAK
Changed the ZIM ignore constant to IGNORE - this can be used in STYLE values - BREAK
Switched RadioButtons to default to always:true which means can't press same radio button to turn it off - BREAK
Added snapBack parameter to ZIM noDrag() which defaults to true to animate the object into bounds if out of bounds when noDrag is called BREAK
ZIM loop() now returns true even if there is nothing to loop through BREAK
this was returning undefined but the ZIM loop() docs says loop returns true when finished looping unless a value is returned from within the loop.
Set the proper bounds to a Bitmap with a scale parameter set BREAK - was keeping original bounds
Fixed BREAKBook pageDirect property to properly work when starting on page 1 (two pages showing at start)
MOVED ZIM Zapps Tool to https://zimjs.com/zapps/tool.html so that ZIM Kids can have https://zimjs.com/zapps to go their examples break
Adjusted ZIM Emitter() to limit fade and shrink times to a max of the life of a particle BREAK
14. PATCHES
Fixed ZIM animate() for shape animation to properly update - this was broken in ZIM 015 due to events parameter index change
we have since added PARAMETER WARNING to ZIM code to track these types of issues internally.
Fixed ZIM ColorPicker with buttonBar:false, and a spectrumTitle so title goes on right of swatch. Thanks Karel Rosseel for these two reports.
Added ease "none" as an alternative to "linear" - thanks Karel Rosseel for the suggestion - this matches GreenSock
Note the 94 patches done to ZIM 016 which could be considered new in ZIM 017.
Please post bugs and requests at https://forum.zimjs.com or https://zimjs.com/discord
Adjusted ZIM angle() to accept two points that have x and y values - like ZIM dist()
Added clampMin and clampMax to ZIM Proportion() and ProportionDamp() as last parameters -= see https://zimjs.com/test8/clamp.html
Added snapBack parameter to ZIM noDrag() which defaults to true to animate the object into bounds if out of bounds when noDrag is called BREAK
Fixed ZIM List addAt() and removeAt() to set optimize to false and then back to its setting
this properly adds and removes at end of long lists.
Fixed ZIM List removeAt() to set scroll of overflow list correctly... the optimized tabs needed to be visible for proper bounds
Fixed ZIM TextInput() so when text property is used the cursor is updated properly - thanks Karel Rosseel for the reminder.
Changed the ZIM Zapp tool to make Mobile PWA from display:standalone to display:fullscreen as default
this can be adjusted as desired - also updated the sample mobile ZIP to ZIM 017 - thanks Karel Rosseel for the suggestion.
ZIM loop() now returns true even if there is nothing to loop through BREAK
this was returning undefined but the ZIM loop() docs says loop returns true when finished looping unless a value is returned from within the loop.
Added a salmon color - goes well with the ZIM colors and adds an extra hue
Fixed MotionController to not draw a Pen if the Pen has a custom Paper.
Fixed forked/origin issue in the Editor - origin was there initially, but needed to add origin when updated - thanks Karel Rosseel for the find.
Fixed TextInput blinker position when text is set manually and focus applied - thanks Karel Rosseel for the report.
Adjusted ZIM Panel with titleBar to properly hide borderColor at top
Added touch and singleTouch properties to Frame - thanks Ami Hanya for the request.
Added a cacheScale read only property to Bitmap - thanks Joseph Diefenbach for the suggestion.
and set the proper bounds to a Bitmap with a scale parameter set BREAK
Now constrain ZIM Book pageDirect property from 0 to number of pages-1.
Fixed BREAKBook pageDirect property to properly work when starting on page 1 (two pages showing at start) - thanks Ferudun Vural for the report.
MOVED ZIM Zapps Tool to https://zimjs.com/zapps/tool.html so that ZIM Kids can have https://zimjs.com/zapps to go their examples break
All the code and mobile links now point to the zapps/tool.html page. Most were pointing to the intro at https://zimjs.com/mobilezapps.html anyway.
Fixed Docs for TextInput to not advise setting backroundColor to -1 to hide... just set to clear color. Thanks Joseph Diefenbach for the report.
Adjusted ZIM Emitter() to limit fade and shrink times to a max of the life of a particle BREAK
ZIM Aud() lazy loaded now supports paused, position and duration properties - as well as the already supported volume and pan properties and complete event. Thanks Karel Rosseel for the suggestion.
and a sound property has been added to the lazy loaded object AFTER it loads that can access the rest of the CreateJS AbstractSoundInstance properties, methods and events.
The Docs have been updated with an explanation under Aud - then down under ABSTRACT SOUND INSTANCE - this is what is created when myAud.play() is used.
If the Aud is lazy loaded then play() before the sound has loaded gives a proxy object - and that is what we have just added the paused, position and duration properties to.
Adjusted List drop to work with pointerup - and deprected mouseupplus as apparently, it was not working with pointerup - which does everything mouseplusup did.
15. SITE UPDATES
We would like to thank Karel Rosseel for many of the suggestions
SITE
Created a new Banner for ZIM 017 featuring a Rive animated Bot.
Added the ZIM 017 Features section at https://zimjs.com/017
footer of ZIM TEN Banners changed to current footer.
Added https://zimjs.org/assets/sparkle.png SpriteSheet to assets.
Added VR icon to Studio image on front and in the ZIM 015 Features section.
Added ZIM Expo to Examples page under collections.
Added VERSIONS section to ZIM MAP
Removed user-scale:1 from viewport on the ZIM Code > Tools to better fit mobile.
Distill, Zapps, Wonder, AssetList, Doctor, Chat Bot
Added Chat Bot to ZIM Code > Tools.
EDITOR
Editor FILE menu now has a COPY button that makes a copy of the file.
Previously, this was done with the NEW button if the file had been adjusted - so not optimal.
Added sub links to the Expo pages.
Added ZIM Bits Pizzazz Icons example.
Added Listed by: and creator of the list to the bottom of the Expo pages.
DOCS is now blue to match SPELLS in Kids and color of Docs.
DOCS now toggles with TIPS to show tips in the Editor.
Shortened height of FILE and LOAD panels to fit in laptops better.
Added a refresh link to top of ZAPPS to catch new Zapps.
Made Expo BACK button load the refering page and scroll to where it was when expo was called (Slate too).
Added QR Code to SLATE on Zapp Print page.
Added a hidden checkbox at the top of the files box - check to hide Zapp from search engines.
KIDS
Added Basic, Mid, and Advanced Slate Expo Zapps to a ZAPPS page for ZIM Kids.
Made Info fields readonly.
Added an Emoji Help section under SLATE - ASSETS.
Info panel tags now has link to Spells with featured tags at top.
16. DATA TO AND FROM NODE
https://zimjs.com/express/data.zip
We have made a node.js app that shows how to get data to and from a node.js running ZIM.
There are async(), Ajax() and Bind() examples.
17. UPDATED
UPDATED
Docs, Updates, CDN, Code Page Template, About Page, Editor, Slate, Site Features, Distill, ES6 Module and Script Pages,
Map, Dev Site, What's New Promo, Site Banner, Forum Launch, ZIM Shim
GitHub 017 https://github.com/danzen/zimjs/releases/tag/ZIM017
NPM 17.0.1 https://www.npmjs.com/package/zimjs
TODO: Examples, Banners (Art, UIUX)
Bubbling Videos, Patreon
DONATIONS
This update took 2 months as well as payments to an artist for RIVE.
Your support on Patreon at https://www.patreon.com/zimjs is very helpful and appreciated.
Again, if you are a student or short on cash - no worries at all!
We do ZIM to help the world be more creative and that is our reward.
https://zimjs.com/016/shaders.html
ZIM now supports shaders converted to 2D canvas as a dynamic Bitmap (similar to video in ZIM).
This means that shaders can be layered into ZIM features the same as other DisplayObjects.
// makes a gradient changing across the width
// note the multiline back tick quote - that is just JavaScript 6
// but inside is GLSL and in particular OpenGL shader coding language
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();
WHAT ARE SHADERS
Shaders have their own language GLSL to code the GPU (Graphical Processor Unit).
They are the basis of 3D and can also make very cool 2D effects!
The code is in two parts: Vertex Shaders and Fragment Shaders.
Vertex shaders control the points (vertices) of shapes (triangles).
Fragment Shaders control the color the pixels of the shapes.
We tend to use fragment shaders on the Canvas 2D.
The code is very low level and tricky so that it runs as fast as possible.
You will probably start by using existing code as there are lots of examples.
For instance - see ShaderToy:
https://www.shadertoy.com
Also see the Docs for more information and examples:
https://zimjs.com/docs.html?item=Shaders
Note that the site banner is a shader that can be controlled with a little slider at right.
We control shaders from the outside with Uniforms (shader properties we can set)
2. EMITTER CONFIGURATOR
https://zimjs.com/016/emitter.html
On request, we have made an Emitter Configurator that uses sliders and checkboxes to set the many parameters,
visually see the results, and copy the resulting code.
Emitters can emit any DisplayObject as a particle
so not all configurations are shown here. Also the Shape option for the obj is not here.
See https://zimjs.com/docs.html?item=Emitter for more possibilities.
We are keeping ZIM a coding language rather than moving into an authoring environment like Flash.
Recall our discontinued (draft) visual editor https://zimjs.com/snips/
But perhaps we can make a few CONFIGURATORS over time - like for a Button next?
These we can list in the tools section - but will not call them raw tools like our set of tools so far:
Distill, Zapps, Wonder, AssetList and Doctor which are more HTML-based admin tools.
We have made a new line there for the Configurators.
3. NORMALIZE AND RATIO - IMPROVEMENT
https://zimjs.com/016/normalize.html
ZIM animate() with sequence animates each item in a container,
but this can be awkward when animating a tile for instance.
The sequence starts at to left and goes across the columns and down the rows.
Or a sequenceReverse will do the opposite.
But what about animating from the middle and out radially?
We noticed that GSAP was doing very cool effects from the center (or any sides) of containers.
Introducing the normalize() method and ratio property of a Container to solve this!
Normalize can take any property and assign a ratio for each child in a container
that is how close 1-0 that child is to the maximum property (among all the children).
Using a sequence time of 0 to animate each child individually
and setting the rate property relative to the ratio will have the same effect as the cool GSAP animations.
// animate based on how far from the center
// "reg" will also automatically adjust the registration points to the start position
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
});
The ratio can also be used on its own without animate().
For instance, the scale of the child could be set to the ratio
depending on how close it is to the center of the container.
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, // or make positive to avoid overlapping
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
4. SORTBY
https://zimjs.com/016/normalize.html
The Container now has a sortBy(prop, inverse) method to sort children levels based on a numeric property.
This uses the CreateJS sortChildren(sortFunction) but reduces thinking needed to construct the sortFunction.
However, if a more complex sort function is needed, then use sortChildren() - see CreateJS docs.
Also, see the last example up above where we sortBy("ratio")
Using sortBy("ratio", true); for inverse would make the middle objects behind the side objects.
5. RANGE - IMPROVEMENT
https://zimjs.com/016/range.html
ZIM Slider() now has a range parameter to set two buttons on the slider that give range values:
// SLIDER RANGE PARAMETERS
range - (default null) make the slider a range slider with two circle buttons
this will provide read and write rangeMin, rangeMax and rangeAve values instead of currentValue
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
SLIDER RANGE PROPERTIES
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.currentValue and rangeSliderB.currentValue
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
6. WIGGLE DEFAULT BASEAMOUNT AND END ON START - IMPROVEMENT
https://zimjs.com/docs.html?item=wiggle
ZIM wiggle() now has a default baseAmount that matches the property's current value
and now ends on its start position if totalTime is set. Thanks Ami Hanya for the prompting.
There is an endOnStart parameter added to the end that defaults to true - set to false to not force end on start.
// the baseAmount parameter is null which means it will wiggle about the target's current x in this case
// after 4 seconds the circle will end its wiggle at the start x (in the center)
new Circle().centerReg().wiggle("x", null, 10, 100, .5, 1, 4);
7. NEW FORUM - IMPROVEMENT
ZIM has a new Forum and we will phase out Slack over the next couple months.
We are keeping Discord. There are two main reasons for moving:
The forum content will show in Web searches
The messages will persist and not be removed after three months
Discourse has been used for many tech communities including three.js, Cloudflare, FreeCodeCamp, OpenAI, etc. We hope you like it!
We will refer to this as the ZIM Forum, not Discourse, as we are still keeping Discord - and it would just be too confusing.
We will post the URL to the forum once we get settled there a bit more.
We are looking into setting up an invite system as well.
8. LABELWORDS - IMPROVEMENT
https://zimjs.com/016/labelwords.html
ZIM LabelWords() splits text up into individual word labels.
LabelWords is similar to LabelLetters but extends a Wrapper so it has all the settings of a Wrapper.
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().animate({
props:{scaleY:0},
time:.5,
rewind:true,
loop:true,
sequence:.1
});
9. OBJECTCONTROLS - IMPROVEMENT
https://zimjs.com/016/objectcontrols.html
ObjectControls were coded outside ZIM for three.js
We have added them automatically to the zim_three helper module.
They come from https://github.com/albertopiras/threeJS-object-controls
They allow any object in three.js to be rotated or animated independently.
This will appear somewhat like OrbitControls
but OrbitControls move and rotate the camera around the scene - not individual objects.
Thanks Pettis Brendan for the suggestion.
10. FADE AND PAN SOUND METHODS - IMPROVEMENT
https://zimjs.com/016/sound.html
The ZIM Aud() play() method returns a CreateJS AbtractSoundInstance.
We have added a fade(volume, time, call) method to the AbstractSoundInstance
and a panSound(pan, time, call) - this cannot be pan() as there is a pan property.
We could have called fade() as fadeSound() to be consistent,
but fadeSound() will probably be rarely used whereas fade() quite a lot.
So chose the shorter name.
let sound; // do not try and play sound before interacting
const toggle = new Toggle(100, 60, "SOUND").center().change(()=>{
// if there is not a sound then make one
if (!sound) sound = new Aud("caves.mp3").play(0, true);
// fade in or out the sound
if (toggle.toggled) sound.fade(1); // default fade time is 2 seconds
else sound.fade(0, 1.5); // fade out a little faster
});
11. SPEECH
https://zimjs.com/016/speech.html
https://zimjs.com/016/speech2.html
https://zimjs.com/016/voices.html
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.
Just a note - this has been around for about 6 years...
The performance now is excellent!
Read more options at https://zimjs.com/docs.html?item=Speech
const speech = new Speech(); // new Speech object
speech.talk("words") // tell Speech to say words
speech.listen(); // tell Speech to listen
speech.on("result", e=>{zog(e.words, e.confidence)});
12. PERMISSION ASK - IMPROVEMENT
https://zimjs.com/docs.html?item=PermissionAsk
Renamed SensorsAsk() to PermissionAsk() to handle mic and cam on iOS - BREAK
as well as the deviceorientation and devicemotion
// 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" - see docs for orientation and motion
function init(val) {
zog(val); // media stream if yes to permissions otherwise false
S.update();
}
13. GOOGLE FONTS SHORTCUT - IMPROVEMENT
https://zimjs.com/016/fonts.html
Added a Google Fonts shortcut - use gf_ then the font name with capital first letter
The spacing can be left + in the assets parameter or left as a space.
But the spacing cannot be + in the font name so just put spaces.
Note that case matters and they are all uppercase first letters.
new Frame(FIT, 1024, 768, light, dark, ready, "gf_Roboto");
function ready() {
new Label({text:"Am I a Robot?", font:"Roboto"}).center();
}
14. TILE BACKGROUND PADDING - IMPROVEMENT
https://zimjs.com/016/fonts.html
Added backgroundPadding, backgroundPaddingH, backgroundPaddingV parameters to ZIM Tile() - BREAK
These come just after the backgroundColor parameter
15. ZIM CIRCLE PERCENT ARC
https://zimjs.com/016/percentarc.html
Added a percentArc parameter before the strokeObj and a percentArc property - BREAK
that makes an arc when used with percent.
This is good for making moon shapes.
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.
// make a moon - use 60% of the circle
// then cut into that with a circle at point 30% the radius in towards middle
new Circle({percent:60, percentArc:-30, radius:200, color:white})
.rot(-120)
.center();
16. INDICATOR DISPLAY OBJECT - IMPROVEMENT
https://zimjs.com/016/indicator.html
The ZIM Indicator() indicatorType can now accept any DisplayObject (watch the size).
Thanks Karel Rosseel for the suggestion.
new Indicator({
indicatorType:new Label("Z",40,null,white), // using a label to make indicator lights
foregroundColor:white,
backgroundColor:red,
backgroundAlpha:1,
selectedIndex:1,
fill:true,
interactive:true
}).sca(2.5).center();
17. STYLE GROUP ONLY - IMPROVEMENT
https://zimjs.com/docs.html?item=STYLE
ZIM STYLE now will use group styles even if style=false on the object.
This is handy as all object styles except for the group styles can be turned off.
// the circle will not be red but will get percent 50
STYLE = {color:red, wonder:{percent:50}};
new Circle({style:false, group:"wonder"}).center();
18. PHYSICS ATTACH - IMPROVEMENT
https://zimjs.com/valentines/puppets.html
https://zimjs.com/valentines/puppets2.html
Physics has new methods attach(control, obj) and unattach(id)
This lets you attach a physics object (obj) to a ZIM object (control)
so the physics object will follow the ZIM object just like a mousejoint.
You can drag(), animate(), wiggle(), etc. the ZIM object.
The mass of the physics object makes a difference so set the mass parameter in addPhysics().
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
19. PHYSICS BUOYANCY - IMPROVEMENT
https://zimjs.com/zapp/Z_539QT
Added buoyancy(height, denisity, linear, angular) to ZIM Physics
that wraps the Box2D Buoyancy Controller - then need to add() or remove() objects
PARAMETERS
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
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
20. ZIM SOCKET - IMPROVEMENT
Added zim_socket2 as a module (in addition to zim_socket).
When changing servers six months ago, ZIM Socket server needed domains added to avoid CORS.
This has been "fixed" by upgrading to the latest Socket.IO - we were several versions back.
The original version is NOT backwards compatible so we are running two different server versions.
In the next version of ZIM we will make zim_socket call the newer server.
For now import zim_server2 to use the new version of the socket server that avoids CORS.
NPM
Added ZIM Socket to NPM running zim_socket2.
https://zimjs.com/code.html#npm
That works the same as the other helper modules on NPM.
21. GENERAL
fixed ZIM Series reverse to not automatically start at the end - but rather from its current state - IMPROVEMENTBREAK
unless the current state is 0 then it goes from the end. Thanks Karel Rosseel for the report.
Adjusted ZIM convertColor() to accept HEX NUMBER in the form of 0x as input - IMPROVEMENT
Updated ZIM Skool - Statements image to include const.
Changed all anonymous functions to arrow functions.
Fixed bug in Pane so "display" property also points to backing.
Made transformControls methods return the transformControls object rather than the object the transforms are on - BREAK
Added decimals to List().slider() to set the decimals for the Stepper - IMPROVEMENT
Also added a call property to List.slider(), List.checkBox() and List.colorPicker() - IMPROVEMENT
Fixed Pane and Panel so textArea, tag, loader are removed and added as opened and closed - IMPROVEMENT
Note - in general, do not add these to Window() unless non-scrolling and then must manually handle collapsing, closing, resizing, dragging
The overhead is too much for a Window in general as it handles things like Wrappers and Lists that may have many items - usually not TextAreas, etc.
Fixed Button() so roll background color on toggle and wait operates properly - was being overridden by new down background color - IMPROVEMENT
Also added wait, waitTime and toggle to STYLE - this was an oversight.
Made Button not show default "CLICK" if showing icon or backing - IMPROVEMENT
Fixed trace setting on Emitter - it needed to be adjusted due to moving particles into their own container - IMPROVEMENT
Now the cache size is the stage and setting traceShiftX and traceShiftY will move both sides of the bounds bigger (or smaller)
Fixed Emitter to use that.trace, that.sinkForce, and that.width so these update on property change.
Fixed default traceDecayTime needed to be put after decayTime gets its defaults
No "" needed if icon or backing provided and no label set - IMPROVEMENT
Added a RANDOM constant with value of "random"
Added uppercase as a convenience STYLE to set any object with a label or text property to uppercase
cursor and shadow have been added for STYLE - these were an oversight - IMPROVEMENT
Made Pane() have a keyboardAccess parameter - so it invisibly sets F.keyboardMessage
to get keyboard on iFrame and close pane when pressed - IMPROVEMENT
Added Keyboard entry to TIPS
Fixed a bug in animate() where animating the same properties over again was not removing the previous ticker function - IMPROVEMENT
This is basically a blank function in the queue to tell the stage to update but it would then leave the app on permanent stage.update()
To put this in perspective, three.js, P5js, etc. have permanent update - still we are glad we found the bug.
Adjusted corner for Rectangle to be 0 of array is missing any of its 4 points - IMPROVEMENT
Added rounded corners to Blob Rectangle points
// use a rounded Rectangle to make a Blob with a rounded rectangle shape
new Blob({
points:new Rectangle(200,200,red,null,null,50)
}).sca(2).center();
Label italic will skew(10) a background on the label if there is one - IMPROVEMENT
Made transformControls methods return the transformControls object rather than the object the transforms are on - BREAK
ZIM TextInput() no longer dispatches an input event if the text property is changed programattically - BREAK
Generally, events are not triggered if the value is programmatically changed.
For instance, setting slider.currentValue = 10 will no trigger a change event - only the user using the slider triggers the event.
Made the ZIM TextEditor() show the placeholder text in the label for the TextEditor - IMPROVEMENT
Added adjustBounds property to options of cache() so that when set to true - IMPROVEMENT
cached items with dimensions not equal to their original have their bounds and registraction adjusted as expected.
This was not the default for CreateJS which was keeping the original, full object bounds and registration point.
See https://codepen.io/zimjs/pen/RwdbdRg - where we have added the adjustment (here patched in ZIM 015).
Making this default breaks many ZIM things from transform handles to TextureActives, etc.
So we have added it as an option property to use when needed. See cache() in the docs for more info.
On Container(), Bitmap() and Shape()
Fixed the cursor spacing on TextInput when the size is changed and resize() called - IMPROVEMENT
ZIM loop() with interval now works properly with start and end values different than defaults - thanks Kirk Goble for the report - IMPROVEMENT
Fixed Window scrollbar so it ignores the top corner curve if there is a titleBar as that curve is up in the title bar - IMPROVEMENT
Adjusted ZIM Frame() so assetObject uses a path provided to the assetObject even if there is no id (just src) - IMPROVEMENT
and font in assetObject uses a path provided in assetObject - was missing the path addition.
Fixed tap() equation for distance - was using Math.abs(lastX+lastY-currentX-currentY) < distance - IMPROVEMENT
well, this equation does not work if the mouse is moved on a 45 degree angle
so long distance taps were happening on a 45 degree angle List - hahaha!
have to test Math.abs(lastX-currentX) < distance && Math.abs(lastY-currentY) < distance
22. BREAKS
These are also reported in the sub sections but now will compile them here as well:
Renamed SensorsAsk() to PermissionAsk() to handle mic and cam on iOS - BREAK
Added backgroundPadding, backgroundPaddingH, backgroundPaddingV parameters to ZIM Tile() - BREAK
Added a percentArc parameter before the strokeObj and a percentArc property - BREAK
Made transformControls methods return the transformControls object rather than the object the transforms are on - BREAK
ZIM TextInput() no longer dispatches an input event if the text property is changed progromattically - BREAK
Tile() now uses projected width and height of items to create column and row sizes - for instance poperly tiles rotated rectangles - BREAK
23. PATCHES
Added Alt ArrowLeft and Alt ArrowRight to Frame keydown event to go to previous or next page in browser history
Adjusted ZIM Container cache() to add bounds if adjustBounds in the options parameter is true even if size is the same
and made it keep the registration point if the size is the same
but if the size is different then change the registration point to the top left corner of the cached size
** had to revert a little of this so transform() handles work - still adjust the bounds if the width is 0 but not reg or hitArea
** need to look into what is causing these issues.
Added adjustBounds to the Effect() call - need to explore further, why we can't set this default
it was breaking things like TextureActive - but maybe it was just this registration adjust issue...
Tile() now uses projected width and height of items to create column and row sizes - for instance poperly tiles rotated rectangles - BREAK
Turned off optimize:true for Window with Wrapper - will look into alternative fixes but for now, that gives right scrollbar sizes.
Added Loader() save() ability to save text or json files - thanks Storysdweller for the suggestion
and thanks https://www.tutorialspoint.com/how-to-create-and-save-text-file-in-javascript for the technique.
Fixed a timing bug in Cursor - we tested to see if a cursor was there at the top of a 10 line function and if not do not do the function
but then we were still getting errors and it seems that partway through the function somewhere else the cursor was being set to null
so we had to put another test right on the one line we were using the cursor - sigh. Thanks Karel for the report.
The cursor is being left sometimes on a button if used as a pointer - so we will look into why that is happening.
Adjusted ZIM drag() so that if singleTouch:true is set, the object will not dispatch mousedown, pressmove or pressup events from another cursor other than the first one
Fixed up Three helper dispose() method - thanks Yanwenge for the report
ZIM Kids asset ids can now be used in ZIM Editor - just keep the saved ids at the top of the code and it will work.
https://zimjs.com/editor/view/Z_B3W8K
Fixed accent issue in Editor and Slate - needed to use json_decode(utf8_encode($code)); - and make sure database had correct encoding - which we already had changed.
Thanks Karel Rosseel for the reports.
Adjusted Window to scroll in the horizontal when pressing the left or right side of the mousewheel (or shift scroll) - thanks Discord S user.
ZIM Kids has been updated to const, let, F, S, W, H, and arrow functions
Adjusted ZIM List so noScale works properly and continuous works with horizontal - the code was left incomplete - thanks Marva for the report.
Adjusted TIME in ZIM Button to use getTime() instead as was creating error in REACT - thanks Usta Games for the report.
Fixed Shader Uniforms to work dynamically with non-vector uniforms - was not dynamically updating.
BREAK set the mouseChildren to false on icon container so drag({all:true}) is not needed...
Adjusted ZIM Blob, Squiggle, and transform to better handle multitouch. Thanks Jesus Cital for the report.
If a touch down is on a control then no other control or object drag can be done with another touch.
Added sig to ZIM helper modules so that if NPM minifies ZIM DUO still works.
Added a zimDefaultThree property to zim if the Three helper module Three() is called - so we can dispose() with Frame
Added a disposing the MotionController() of an object that has a motionController is disposed
These things are coming up in the React, Vue, Svelte, Angular environment as they dispose the frame each save
and it makes it easier if these are taken care of automatically rather than handling each thing.
Fixed up the typings: missing change(), series(...array) to handle multiple parameters, moon color,
also issues with clone() not matching createjs clone interface - which is a pane but we are just removing the typings for clone(exact)
If there are typing issues - please let us know at https://forum.zimjs.com and we can easily fix them
Added setProps() function to ZIM Code module and used it as methods on Tile, Wrapper, LabelLetters, LabelWords, LabelOnPath, LabelOnArc
to set props on each item - props can have ZIM VEE values. Thanks Thanks Pettis Brandon and Joseph Diefenbach for the thoughts on this
See https://zimjs.com/zapp/Z_KRW88
Fixed up the LeaderBoard - in ZIM TEN the return value of the loop broke it. Thanks @ajerni123 on Discord for the report.
Adjusted Selector clone(exact) to pass exact to clone of tile - it was just making the items a series but needed to pass a tile.
Fixed Blob and Squiggle addPoints(true) to add the TextArea with the add() method of Pane now that it works like Window and Panel.
Always use the add() or the content parameter with TextArea, Loader or Tag being added to Pane, Panel or Window.
Fixed Layout backgroundColor and region backgroundColor to support GradientColor and RadialColor
It was there but the x,y,width,height of the regions had to be provided which are dynamic so pretty useless
Now vertical GradientColor and central RadialColor work automatically - pass an array of two colors to the Color objects.
Reverted Synth to using timeout for duration as using ramp was clearing volume settings - thanks Yanwenge for the report.
Added "numpadopen" and "numpadclosed" events for KeyBoard NumPad.
Adjusted the () of the NumPad to stay in this order when document is set to RTL - thanks Herut for the report.
Added attach() and bouyancy() to Physics() - see sections above.
Fixed AlphaMask effect to update both object and mask object when updateEffects() is called - thanks Yanwenge for the report.
closestPointAlongCurve() has been updated to report the correct percentage
it was using index/totalIndexes but the points were not evenly distributed so that was wrong
we now calculate based on distance along curve to index / total distance along curve.
Added loc() method to Physics object's body.
This should now always be used when setting the x or y or x and y of a physics body.
The x and y properties are deprecated (because they only worked properly when used together)
Updated NPM phsyics to 2.2.7
Fixed ZIM game - Timer() to call zimLabel superclass properly - had adjusted when added dispose.
Added movingstart event to path movement in game module and the event now has a dir property of "left", "right", "up", or "down"
The Orb now has color and color2 properties
Fixed missing declaration in LeaderBoard
Updated NPM game to 2.8.2
Fixed MotionController horizontal/vertical conflict with boundary - set boundary first then applied h/v lock - thanks Karel Rosseel for reporting bug
Made Label in content of Pane, Panel, etc. be aligned to the align property so new lines will properly align - thanks Karel Rosseel for reporting bug
Adjusted Pane() keyboardAccess:true to not set keyboardMessage() if not in iFrame - it was letting events go through the Pane close - not desired.
Added Euro sign to emoji picker - thanks Karel Rosseel
ZIM Game Board() - fixed missing variable declaration in passing infoData
And updated data property and update() method to adjust for new ZIM Loop parameters with interval.
This only affected boards with more data than squares - thanks Yangwenge for the reports.
Added ZIM Socket to NPM https://zimjs.com/code.html#npm - see section 20 above
Fixed ZIMONON in the ES6 module - it was using a global var rather than storing on WW (the window).
Patched ZIM Page() clone() - it had an old parameter.
Adjusted ZIM Three() so it adjusted for non-hoisted event functions for dispose()
Patched wire() and wired() to properly handle ZIM DUO - thanks Jesus Cital for the report.
Fixed ZIM Boundary() to properly accept getBounds() or a rectangle - was testing if (x) {} and therefore broken when x is 0.
Fixed cache() of a ZIM Pic() - the pic container was not setting a proper width and height coming from createjs cache - weird but adjusted.
Fixed ColorPicker with Spectrum and no swatch - was not reporting a selectedColor - this has been patched. Thanks Karel Rosseel for the report.
Fixed Sprite run() to work properly with DUO loop:false and rewind:false - those were triggering loopWait and rewindWait due to typo - thanks James Barrett for the find.
Patched animate() to fix 016 fix on overriden tweens (same object and property) ending earlier tween to work with series (ignore ending earlier tween if seriesWat or wait is present) - thanks Ami Hanya
Adjusted Pages Arrow to properly work in vertical mode - it was disabling the wrong arrows.
Changed Speech to test for various global properties on window rather than global as that was causing Firefox errors. Thanks Karel Rosseel for the report.
Fixed RadioButton buttons parameter for item checked:true - this was being overwritten by the newer selectedIndex parameter
Now it properly treats a checked true as a selectedIndex but if a selectedIndex is provided, that will override. Thanks Karel Rosseel for the find.
Fixed arrow greying on Stepper for rightForward:false - thanks Moshe Maltz for the report.
Made ZIM Pages ignore swiping if pages was removed from stage - the swipe event was on the holder.
Fixed ZIM Bitmap() to keep bounds of original image if image is passed in and a different crop is chosen - the crop gets new bounds but input image should stay same. Thanks Karel Rosseel for the report.
Updated ZIM CamMotion() to default to visualizerObj of "circle" if other visualizer parameters are provided - thanks Karel Rosseel for the report.
IMPROVEMENT Fixed memory leak in dynamic setMask() - had not removed the createjs Shape from the mask - so was adding multiple shapes in a Ticker - thanks Adam V for the report
IMPROVEMENT added a top() method to the cursors in transform() so if the transform is in a container they come above the container.
Added the SVG parameters to bitmap:false - had left them out of the code (aside from actual svg)
also fixed style parsing issue with trailing ; in style for SVG - thanks Karel Rosseel for the reports.
Removed icons from pizzazz.icons assignment as earlier versions that ZIM 06 did not export icons. Can still use icons, just not pizzazz.icons
24. UPDATED
UPDATED
Docs, Updates, CDN, Code Page Template, Editor, Examples, Site Banner, Site Features, About Page, Dev Site, Distill
Banners (Art, UIUX), Map, ES6 Module and Script Pages, ZIM Shim
Slate, Bubbling Videos, GitHub, NPM (16.2.8), TypeScript, Forum Launch, Patreon
DONATIONS
Shaders are very complex. This took a month of hard work and research.
Your support on Patreon at https://www.patreon.com/zimjs is very helpful and appreciated.
Again, if you are a student or short on cash - no worries at all!
We do ZIM to help the world be more creative and that is our reward.
ZIM IN THREEJS
ZIM can now be used inside three.js as an animated and interactive texture.
This is amazing as ZIM can now be used as interface in VR (see the VR section below),
and provide games and puzzles on any material on any mesh object
such as planes, boxes, cylinders, spheres, and models.
This includes everything in ZIM - components, emitter, dragging on paths, pen, etc.
Hopefully, this will introduce ZIM to the three.js community as well.
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
HOW IT WORKS
A TextureActive() class extends a ZIM Page() and prepares the needed settings.
A TextureActives() class (plural) manages these and matching three.js meshes
to capture x and y data on the mesh material with raycasting and pass the x and y to CreateJS.
CreateJS has been updated to 1.4.0 with a couple dozen new lines of code including
a createjs.remotePointers setting that turns off the regular DOM events and receives the three.js x and y.
The update() code in CreateJS has a single added conditional that tests for a createjs.remoteQueue array
and if so, updates the cache of any TextureActive objects and sets the required material update flag.
// TEXTUREACTIVE
// a TextureActive() is very much like a ZIM Page()
// it adds borderWidth, borderColor and corner
// also can specify animated and interactive - both default to true
const panel = new TextureActive({
width:W,
height:H,
color:white.toAlpha(.8),
corner:20
});
const circle = new Circle(100,red).center(panel).drag();
// from the ZIM Three helper module
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);
// TEXTUREACTIVES
// if more than one TextureActive object (likely) then pass in an array [panel, wall, arm, etc.]
const textureActives = new TextureActives(panel, THREE, three, renderer, scene, camera, controls);
const canvasWindow = three.makePanel(panel, textureActives);
scene.add(canvasWindow);
// there is now a three.js plane with a draggable circle on it
// orbitControls will let you move the camera around and it still drags perfectly!
// the code above looks simple but it was quite complex to achieve working with three different systems
// and once we got it working we reduced dozens of lines to just a few - in the normal ZIM fashion!
THREEJS
Above, we have used a makePanel() method in ZIM Three, that simplifies the three.js side
when a three.js Plane is needed. This is quite common for 2D like interfaces, games, puzzles, etc.
But makePanel() is optional. Otherwise on the three.js side everything is pretty well the same:
use a THREE.CanvasMaterial(textureActive.canvas) which gets mapped to a material as usual
the material is then meshed with the geometry and the mesh added to a scene again as usual
and the mesh is also added to the TextureActives() object with the addMesh() method.
HUD
https://zimjs.com/015/textureactive_hud.html - HUD affecting three object
https://zimjs.com/015/textureactive_hud_raw.html - same but without ZIM Three
There is now as ortho parameter in Three - set this to true (or make an ortho camera and scene in three.js)
Add the TextureActives to the ortho scene to keep them flat on the screen like a HUD (Head-mounted User Display)
The resulting mesh from the ZIM Three makePanel() method will be given a pos() methpod.
Use this 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
AUTOMATIC
The TextureActives object receives the TextureActive objects
and matches these automatically to the provided meshes - as their material and textures are known.
The TextureActives does the raycasting which is a way to find x and y positions on the material of the 3D object.
These are passed in to CreateJS and replace the traditional mouse coordinates
in the very basic down, move and up functions in CreateJS which automatically flow through to ZIM.
The TextureActive objects are cached but we have recorded them for update in the CreateJS update (used by stage.update())
and the updateCache() and a three.js needsUpdating flag are done automatically.
This means there is no extra code needed in ZIM and minimal code in three.js.
VIEWER
A TextureActive object is just a ZIM Page - which is just a ZIM Container with a backing rectangle.
It is being mapped onto a three.js object but the ZIM object is still there on the stage.
We normally hide the stage but we have made a toggle key (t) to hide the three.js and show the ZIM stage.
This can be used during development to see and test the ZIM directly
and it is live - so any changes on the ZIM stage affect the three.js and visa versa.
The TextureActive objects are tiled horizontally and a slider and swiping is available to scroll through.
The TextureActive logo uses the toggle() method of the TextureActives manager property to toggle between the canvases.
This is controlled but a ZIM TextureActiveManager object that is made automatically when the first TextureActives object is made
it is available as the manager property of the TextureActives object
and has a toggle(state) method, a toggled property and a toggleKey property
EXCEPTIONS
The ZIM custom cursor system works directly with window pointer events
and would need to be converted to receive the information from CreateJS.
It is very complicated as createjs toggles between DOM cursors, pointers and now the remotePointers from three.js
so at the moment, custom cursors is not available in TextureActive.
There can also only be one physics TextureActive although this can appear on any number of three.js materials.
The Spectrum ColorPicker() does not work properly with the picker. So set colors:legacy or an array of colors.
VR
ZIM now works in VR - see https://zimjs.com/015/vr.html for a working example
View the URL in a VR headset browser or in PCVR.
Intro video: https://www.youtube.com/watch?v=apt9MGtIU-A
Bubbling video: https://www.youtube.com/watch?v=hgKc-Y487mI
We have added an xr parameter to the ZIM Three module as well as the following classes:
XRControllers - custom controllers and events (integrated with TextureActive)
XRMovement - use the sticks to move, strafe and rotate - squeeze to go faster
XRTeleport - use any buttons to teleport - default the Y and B buttons
2. THREE HELPER MODULE
https://zimjs.com/docs.html?item=Three
The ZIM Three module has been updated to 2.3 to accomodate the TextureActive system (above)
Added ortho, textureActive, colorSpace (THREE.LinearSRGBColorSpace),
colorManagement (false), legacyLights (false) and throttle (false),
xr and xrButton to the end of the Three() parameters (see the VR section above)
The throttle parameter is a number that is used to skip render - so 4 would render every 4 times
The ortho sets up an orthographic camera and scene good for flat HUD elements or pop-ups
The textureActive parameter needs to be set to true to handle scaling for TextureActives
See the three.js links for
https://threejs.org/docs/#manual/en/introduction/Color-management
https://discourse.threejs.org/t/updates-to-color-management-in-three-js-r152/50791
https://discourse.threejs.org/t/updates-to-lighting-in-three-js-r155/53733/23
three.preRender = ()=>{controls.update();} // will run in renderer just before rendering
ZIM CENTRAL
https://zimjs.com/three/central.html
Added a Central(width, height) class to ZIM after Page()
Central() is a ZIM Container that scales like a three.js fullscreen scale.
It has its origin in the center and will be centerReg() positioned
and scaled based only on the width of the stage and constantly centered.
This can be used with the new full parameter in ZIM Three()
which can be set to true to full screen three.js (taking it out of the CreateJS DOMElement)
There is also a lay parameter in Three() that can be
set to OVER or UNDER to overlay or underlay three.js on or under ZIM.
Use interactive:false to interact with ZIM and interactive:true to interact with three.js
Note: new ZIM constants OVER and UNDER have been added.
new Frame({ready, color:yellow}); // use FULL mode (default)
function ready() {
const three = new Three({
width:W,
height:H,
cameraPosition:new THREE.Vector3(-200,200,300),
colorManagement:true,
interactive:false,
full:true, // add full screen three.js
lay:OVER // under ZIM (do not use a skybox...) or choose UNDER
});
const geometry = new THREE.BoxGeometry(100,100,100);
const material = new THREE.MeshNormalMaterial();
const mesh = new THREE.Mesh(geometry, material);
three.scene.add(mesh);
const central = new zim.Central().center();
new Slider({currentValue:5})
.pos(0,200,CENTER,CENTER,central)
.wire(mesh.rotation, "y");
}
THREEJS UPDATE
The version of three.js has been updated to R155
and the colorSpace has been adjusted in recent three.js to default to linear
which needs some minor adjustments otherwise colors will be washed out.
So we have set the default colorspace to THREE.LinearSRGBColorSpace which should make things easier
Basically, light intensity needs to be multiplied by Math.PI (and perhaps increased we have found)
Could not get the PointLight to work so used a DirectionalLight
Try setting colorManagement to true in Three() and see which you like better - will have to adjust intensity.
GLTF models were giving errors with colorManagement which is why the default is false for now.
Added preRender and postRender properties to Three to specify functions to call before or after render
We also now import and export the VRButton for ZIM VR - see TextureActives VR section.
3. NPM, GITHUB, TYPESCRIPT
Updated our NPM format so that import and require work the traditional way for developers.
This was a solid week of work under the leadership of Yoan Herrera who did a fantastic job.
We would definitely recommend contacting @Yoan Herrera on our Slack for this type of work.
GitHub has been adjusted to show the system where we can now publish to NPM from VS Code.
The ZIM package on NPM now includes:
dist/zim.js - module for web target (React, Angular, Vue, Svelte, etc.)
dist/zim.cjs - module for node
combined/zim.js - ES6 module like the ZIM CDN - optional
There were adjustments to the Typings primarily to remove the duplicate set of defines,
do a final export and export globals. This does mean that classes will need to be imported
to see type hints when not using the zim namespace - they work by default for using the namespace.
TEMPLATES
Templates were made for popular dev environtments. The specific links below all are set for TypeScript
See the main TEMPLATES link and scroll down for formats without TypeScript (except for Angular)
TEMPLATES: https://github.com/yoanhg421/zimjs-templates
REACT: https://github.com/yoanhg421/zimjs-templates/tree/master/templates/react-zim-ts
VUE: https://github.com/yoanhg421/zimjs-templates/tree/master/templates/vue-zim-ts
ANGULAR: https://github.com/yoanhg421/zimjs-templates/tree/master/templates/angular-zim-ts
SVELTE: https://github.com/yoanhg421/zimjs-templates/tree/master/templates/svelte-zim-ts
4. TIMELINE
https://zimjs.com/015/timeline.html
Added a Timeline() class which has a slider that scrubs any animations added to it.
This is similar to a MovieClip but adapted to ZIM animate() and used primarily for testing and education.
We had looked fondly on the GSAP timeline so thanks again GSAP for the inspiration.
Note that it was a joy to put together with the ZIM components!
We updated how animate() deals with percentComplete - see below.
const path = new Squiggle({showControls:false}).transformPoints("scale", 2).center();
new Circle(50,red).addTo().animate({path:path},4);
const timeline = new Timeline();
5. ANIMATE
TWO NEW CALLS
https://zimjs.com/015/animate.html
Added animateCall and animateParams to animate() that offer an alternative to the events:true and "animation" event
This is primarily because if the target being animated does not extend a createjs EventDispatcher then events:true does not work
Also added startCall and startParams for when a target starts animating (after a wait)
or series animations start (after their wait) - thanks Ami Hanya for the request.
These have been inserted after rewindEase and before sequence.
const label = new Label("").pos(600,250);
const label2 = new Label("").pos(600,150);
new Circle(50,blue).pos(200,250).animate({
wait:1, // the startCall would dispatch right away without the wait - which is fine, of course
props:{x:500},
startCall:()=>{label.text = "start " + rand(10000);},
animateCall:()=>{label2.text = "animate " + rand(10000);},
rewind:true,
loopCount:2
});
PERCENTCOMPETE UPDATES
Adjusted animate to handle percentComplete on each CreateJS Tween for specific control.
There is still a percentComplete on a target but it now spans all tweens on the target (including wait).
To get a reference to each specific tween capture the target's latestTween property at the desired time.
Or they are available as target zimTweens but not necessarily in order there so query the zimObj perhaps.
Note: a wait tween is overwritten by the final animation so a loop does not include the wait.
So if wanting to use percentComplete on an animation that comes after a wait then
ask for the target.latestTween in the callWaited event function.
This createjs tween will not include the wait that came before it in its percentComplete.
The target percentComplete now starts when the first tween starts
and goes until the longest lasting tween currently on the target.
This is adapted if more tweens are added to the target later.
The target percentComplete is not affected by individual createjs tweens having their percentComplete changed.
const circle = new Circle(50,purple).loc(200,300);
circle.animate([
{wait:2,props:{x:500}},
{wait:1,time:2,props:{color:orange}},
{props:{y:"100"},rewind:true},
{time:1.5,props:{x:250},ease:"backOut"}
]);
circle.pauseAnimate();
const slider = new Slider({min:0, max:100})
.pos(0,100,CENTER,TOP)
.change(()=>{
circle.percentComplete = slider.currentValue;
S.update();
});
6. LIST CONTINUOUS
https://zimjs.com/015/continuous.html
Added continuous parameter that defaults to false for List
Set to true to continously scroll the list.
This will turn the scrollbar off. removeItem() will work but not addItem().
Probably will not work with accordion, not sure about pulldown.
It does this by cloning the items and shifting the tabs as it approaches the ends
This means any custom events on the objects might not work (half the time)
So use selectedIndex which does work as it uses the modulus to make it seem like only one set of tabs.
Also added a continuous parameter to Window at the end
This is used more internally and will stop the window from thinking it is at the end of the content
This parameter is a little different where true is converted to "vertical"
and it can accept a VERTICAL or HORIZONTAL value to lock the axis of the drag.
Unless you do your own content swapping in Window, this parameter will probably be of no direct usage.
new List({continuous:true}).center(); // can spin forever
7. CAROUSEL CONTINUOUS
Added continuous parameter that defaults to true to let arrows wrap the items
It does this by cloning the items and shifting the tile as it approaches the ends
This means any custom events on the objects might not work (half the time)
So use selectedIndex which does work as it uses the modulus to make it seem like only one set of items.
new Carousel().center(); // now defaults to continuous
8. TILE ADDITIONS
https://zimjs.com/zapp/Z_RRYQB
We can now scale objects inside a tile, set backgroundColor and backdropColor
and set backing and mat DisplayObjects as follows:
/*
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
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) will add the mat 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
*/
https://zimjs.com/015/pan.html
BREAK / IMPROVEMENT added pan parameter to start of play() before the ZzFX parameters (often in ...[params] format)
Sorry this was missed the first time around... perhaps because here is the format
synthSound.pan = zzfxX.createStereoPanner();
synthSound.pan.pan.value = pan;
source.connect(synthSound.pan);
synthSound.pan.connect(zzfxX.destination);
Added pan parameter to tone after shape parameter
and added rampPan(pan, time) method and pan property
const synth = new Synth();
let tone;
const maxH = 400; // max horizontal
const maxV = 300; // max vertical
const saucer = new Container(300,100).centerReg();
new Button({label:"PLAY", bgColor:silver, gradient:.5, corner:[70,70,0,0]}).center(saucer).tap(()=>{
zog((saucer.x-W/2)/maxH) // will be from -1 on left to 1 on right
synth.play((saucer.x-W/2)/maxH,...[.1,,925,.04,.3,.6,1,.3,,6.27,-184,.09,.17]);
if (!tone) {
tone = synth.tone({
volume:.1,
note:"A3",
shape:SINE,
pan:0,
vibratoAmount:20
});
toggle.animate({alpha:1});
interval(.1, ()=>{
tone.pan = (saucer.x-W/2)/maxH
tone.vibratoRate = 4-(saucer.y-H/2)/maxV*2
});
saucer
.wiggle("x",W/2,100,maxH,2,6)
.wiggle("y",H/2,50,maxV,2,6)
.wiggle("rotation",0,2,5,2,5);
} else {
tone.pause(false);
}
});
10. STEPPER ARROWS
Now has arrowColor and arrowScale parameters to set stepper arrow values
new Stepper({arrowColor:red, arrowScale:.5}).center();
11. EMITTER WARM
https://zimjs.com/015/emitter.html
BREAK / IMPROVEMENT added a warm parameter after shrink and before decayTime
This will start the emitter off with already emitted particles
Set to true to add life/interval number of particles
this would be how many particles until repeating the number
although any number can be set - just do not over-do it, there is no point
This loops through creation and calculations rather than an interval
and then the interval is started. It temporarily will turn off pooling.
Added focusWarm to pauseOnBlur function so warms Emitter when coming back from blur
This defaults to true no matter what the warm parameter
but can be set to false or a number.
new Emitter({warm:true}).center(); // starts off with existing particles dispersed in time
12. SORTOBJECT
https://zimjs.com/docs.html?item=sortObject
Added a sortObject(obj, property, reverse) function to the CODE module under Basics
This will sort an object by a property of its inner objects
Docs now has versions in a pulldown at the top right - thanks Chris Spolton for the request.
14. EDITOR
The Editor can now have its version and its scaling set.
These are directives - they would not do anything outside the Editor.
We parse the code and look for these and if they are there adjust the resulting view, test or full file.
The GUIDE has been updated with a SPECIAL section to keep track of these.
F.version = "014"; // set the version to 014
F.scaling = FULL; // change scaling to full
15 GENERAL
Added update() method to Scrambler to update drag boundary if the scrambler is moved after being made
Added Ticker.getFPS() as a wrapper to the createjs.getMeasureFPS()
Fixed a bug in expand() that was causing hitBox to sometime not get applied properly IMPROVEMENT
if it worked it worked but sometimes it did not seem to work - it was because we use a color of "0"
setting this to a proper color seems to have fixed it! Woot!
Fixed drag() axis parameter to work properly with slide IMPROVEMENT
Added interstellar color that is #123 or #112233 - the dark blue of the ZIM 014 site.
Updated RadioButtons to not toggle when an index is set - when that index is already selected.
Fixed Stepper with decimals to include the max value IMPROVEMENT
Adjusted bug in module creator to export all individual functions - was cutting off at loop
there have two loops and a test to avoid adding a second accidentally cut off further additions.
This would not be noticed unless importing individual ZIM functions. IMPROVEMENT
16. CREATEJS
https://zimjs.org/cdn/1.4.0/createjs.js
https://zimjs.org/cdn/1.4.0/createjs_doc.js
Updated the ZIM version of CreateJS to 1.4.0
The ZIM CreateJS has been updated with a couple dozen lines under the heading remotePointers
that more easily lets CreateJS receive custom x and y rather than DOM events.
CreateJS had already abstracted this to handle pointers so it was not too difficult to do.
However, there were a few places where extra code was inserted.
The main update also has a single added conditional to look for a createjs.remoteQueue
This holds an array of ZIM TextureActive objects to have their cache updated
and any associated texture to have its needsUpdate flag set to true.
17. BREAKS
These are also reported in the sub sections but now will compile them here as well:
ZIM Selector() no longer dispatches a "change" event when currentSelected or selectedIndex is changed with code
It will dispatch a "changeset" event - this avoids recursion
MotionController now does not activate if mouse is outside boundary or container (see new mouseOutside parameter)
The new three.js R155 may need color adjustment - see note on THREEJS above
ZIM animate has inserted startCall and aniamteCall after rewindEase and before sequence.
ZIM animate has adjusted percentComplete to across all animations on an object
specific animations can be accessed by individual tweens in the object's zimTweens property
Carousel is now continuous by default - set the continuous parameter to false if desired
Synth has pan parameters inserted at the start of play() and after the shape parameter in tone()
The Emitter has a warm parameter added after shrink and before decayTime
18. PATCHES
Adjusted ZIM drag() so cur() would not be required - lets drag() still work on createjs objects.
Fixed ZIM HotSpots() to test if button.cur before trying to use button.cur() in case data hotspot
Had to undo the fix below as it caused TextureActive not to work - so will look more into it.
Adjusted cache() with dimensions to make hitArea the size of the dimensions - it seemed to be the original size - createjs bug?
Will need to fix the bounds and do other DisplayObjects (Bitmap, Shape, MovieClip and Sprite in 016)
Fixed ZIM animate() for percentComplete - looping backwards when applying individual percentCompletes to avoid 0% glitch - thanks Philm for the report.
Adjusted ZIM Scrambler to use dragPaused rather than noMouse so that objects cannot be pressed through - thanks Jesus Cital for the report.
We had removed the noMouse so this was not happening but this then allowed for dragging other objects as objects were animating.
Fixed document.Blob issue for SVG when zns=true - thanks Avirads for the report.
Adjusted ZIM Window to have resize() as a prototype method so TextInput() can call the overridden resize()
And made the TextInput resize take care of the mask and the size take care of cursor spacing - thanks Kirk Goble for the report.
NOTE: In the TextInput code we had a check on mousedown to convert the input text of number to an input type of text so the selection works
but we still trigger the number keyboard (in theory). We then convert the type back on blur.
Well... if we dispose the last input and make a new one, it was not receiving a mousedown yet was having the selection added
so that triggered the error as an input of type number does not get selection methods
To solve this, we just just test for a remake and set the type to text.
Possibly the keyoard may be wrong until a blur event, but that's probably okay.
Adjusted ZIM Editor to handle UTF8 - never knew JSON had a difficulty with it in PHP json_decode(utf8_encode($code));
Fixed a bug with transform() where mouseChildren of the object when a Container
was turned off and not back on when disposed - thanks Ahmad Baitalmal for the report.
Added propert support for zimEase() on rewindEase - had missed making adjustments there.
Patched ZIM Cam() to handle new List parameters in CamControls() - thanks Karel Rosseel for the find.
For ZIM animate() when paused, removed the calling of the call function when set to percentComplete 100
as this was restarting the animate when in a series... possibly, we would want to call if not a series - not sure why though.
Added a page at https://zimjs.com/assets/ to list available assets
Made the animate() series animateCall and animateParams run
by passing along the call and params to each individual animate in the series - thanks Philm for the catch.
Note that this runs an animateCall for each animate in the series for each tick - but still only one stage.update() per tick.
Adjusted SoundWave to work better on recalling the same sound - thanks Ami Hanya for the code fix.
Fixed ZIM Timeline to not start with Trails checked and have it not actually on - we missed a default data setting
Also made the ticks parameter work properly - code was not completed. Thanks Philm for the report.
Also, the percentComplete below now makes the slider work better again.
IMPROVEMENT made ZIM animate percentComplete work with pauseAnimate() for setting.
currentValue for Dial and Slider was default false by accident - this has been changed to null.
Adjusted Frame to have a "keyboardactive" event when using keyboardMessage() and stage or iFrame is pressed
Also made it so passing in "" for the message will hide the message.
This allows a custom message for instance, a Pane() to be used to start a game.
Use pane.hide() in the keyboardactive event to remove the custom intro Pane - thanks Jacob for the prompting.
Fixed Arrow() for STYLE - was returning before setting transform styles and clone if note a Pages arrow
Adjusted ZIM tap() to properly work with once=true
it was clearing the event on mousedown rather than waiting for a valid tap
Also set the cursor to default after tapping with once set.
For SoundWave.dispose() the audioContext is closed - thanks Ami Hanya for the prompting
Changed the Docs to read ballisticInOut etc. for ballistic - the previous spelling was balistic - sigh.
Added Ticker.dispose() to the Frame.dispose() method - thanks Yanwenge for the prompting the fix
Added custom cursor support to containers - this was overlooked - thanks Ami Hanya for the report
Fixed ZIM Emitter clone() to include the warm parameters - thanks Yanwenge for the report
Added backNext, backPrev and peel properties to ZIM Book. Thanks KV for the prompting
Fixed ZIM Sprite with an Emitter so random:{frame:{max:sprite.totalFrames-1}} will go to frame number
for some reason the Sprite was not changing frame until pool repeated... it was not a cache issue
so we capture the frame request and use particle.run({startFrame:val, endFrame:val});
Added callback check to Ajax() - thanks Philm for the find
Adjusted NPM and GitHub to use the zim.js file which is the docs version
this allows devs to see better errors and the ZIM will be minified when the final project is bundled. Thanks Yoan Herrera for the hand.
IMPROVEMENT fixed ZIM animate percentComplete to work with pauseAnimate() - thanks Amy Hanya for the report.
IMPROVEMENT adjusted 5 places we used arrow functions, 3 places we used const and 1 place we used let.
Thanks Ayla Maskalchi for the report that ZIM was broken on pre-ES6 Androids - this should fix it.
Adjusted ZIM Sprite run() to set pauseAnimate(false) so Sprite will run more than once.
This was an issue created by the latestTween settings introduced in ZIM 015 - thanks Interactive Media class for the find.
Fixed ZIM Base to test for ===null instead of ==null two places - this was storing a "" instead of 0
which sometimes is okay but not always - bad bug. Appologies.
Patched ZIM Ajax so unique sends a unique true - this was intended but never connected.
Added zim.parseJSON(str) function to CODE module that parses a JSON string or a "close-to" JSON string - thanks Ami Hanya for the suggestion
also adjusted CreateJS to apply the function when loading json files.
Fixed ZIM DUO for XRTeleport - had a typo to XRMovement...
Added a markerRadius parameter to XRTeleport so this can be set - default .25
Added a "simple" value for NumPad advanced parameter that shows only numbers, the backspace and the return - thanks Karel Rosseel for the suggestion
Added maxLength and numbersOnly parameters at the end of the Keyboard
Added minStretchFirst parameter at end of Wrapper that defaults to true - thanks Ferudun Vural for suggestion
Setting this to false will avoid stretching the first line if less than the minStretchNumber
This might be handy for using Wrapper to justify text but not justify if single line less than certain number of words
Fixed ZIM Socket request to properly send e-mail after server adjustments.
Added master property to Socket that returns true if the socket is considered the master.
Each room will have one master - this can be used to send data once - see the new example in the Docs for Socket.
Fixed Socket - getOtherProperty() and getOtherData() had typos.
Added complete and completeParams to Interval() and to loop() to callback when total is given. Thanks Ami Hanya for the suggestion.
Fixed loop on Container so ZIM DUO works properly.
Added XR (VR/AR) to ZIM Three module - see the TextureActive VR section above
Added a new feature section to https://zimjs.com/015 to feature the VR.
Adjusted ZIM animate() on path so it used the local tween percentComplete rather than the overall percentComplete.
This fixes a re-run of the animate() on the same object bug. And it fixes not being able to drag after an animation is complete.
Fixed ZIM series() to return null if null or undefined is passed in to series
and fixed Tile() clone() to not call a series for exact backings or backgroundColors - thanks Ferudun Vural for the report
Adjusted ZIM animate() to make Sprites animate - there is a catch in animate to keep sprites on a frame
but then sometimes the sprite itself needs to be animated for instance its position
The new adjustments to animate tested for an animating property which was not set to true for the sprite
This has been adjusted by testing for animation other than the frame number and seems to work - thanks Yanwenge for the report.
Adjusted ZIM TextureActives to set the visible of the TextureActive to false if not in view
This is done at the same time as the TextureActive is removed from the remoteQueue so caching is avoided when not in view.
Fixed ZIM drag() when setting dragBoundary() on mousedown - it was clearing the original mousedown position causing a shift in the object. Thanks Ami Hanya for the report.
Adjusted ZIM MotionController to test for container.boundsToGlobal() after last adjust... thanks Karel Rosseel for report
Updated the globals in the NPM version so NPM is at 15.0.4 with CreateJS being updated to 1.4.1 to remove passive scrolling warning
Adjusted ZIM MotionController and Swiper so if damp is false it turns damp to 1 and if true sets to default damp
Adjusted the damp of the TextureActivesManager to .2 from .1
Adjusted ZIM Vid() to remove keyOut Ticker function when paused and add it again when playing
Adjusted ZIM Window() so optimize works based on the items being within 300 pixels of the Window object
Previously, this was the items are on the stage - well... TextureActive objects are often tiled off the stage
yet their cacheCanvas is being viewed in a three.js texture - so the adjustment was needed.
Adjusted ZIM Selector() to not dispatch a "change" event when currentSelected or selectedIndex is changed with code
it will instead dispatch a "changeset" event - this avoids recursion that can occur BREAKS
Fixed Window / List mask for when corner is provided.
Patched the Tile - see the entry above!
Added ZIM adjustments to R155 OrbitControls
Added a preventDefault() to TextureActives as it makes a manager to allow interaction with ZIM TextInput - not sure why it needs it but it fixes the issue.
Fixed LabelLetters to better work with fonts - thanks Pettis Brandon for the fix and Matthew Marquez for the report
Adjusted the sensitivity of the TextureActivesManager Swiper - not adjusts depending on width of tile
Added a mouseOutside at end of parameters MotionController() defaults to false BREAKS
This is only if a container or a boundary is provided
The mouse will not trigger of pressed down or moved outside the provided container or boundary
Setting the mouseOutside to true will trigger MotionController with mouse interaction outside boundary or container
Added a container parameter (default stage) to the end of the transform() parameters
This will add the boundary, handles and cursors to the provided container
Traditionally, this is the stage so the transforms interface stays on top of all objects (except keyboard)
but with TextureActives, anything seen needs to be in the TextureActive object
so this can now be done with new Rectangle().center(textureActive).transform({container:textureActive});
Fixed Swiper to dispatch a "swipestop" event if negative sensitivity is set - needed a Math.abs() to be applied
Adjusted Three makePanel() parameters as follows BREAKS
textureActive, textureActives, scale (default .5), curve, opacity, material, doubleSide, colorSpace
Adjusted CENTER in three makePanel() mesh method to work from 0 rather than W/2 and H/2
Fixed dispose in TextureActives - was pre-TextureActivesManager code - thanks KV for the find
Fixed ZIM Dial useLabel:true for when step:0 now does not show labels with infinity
Adjusted the Emitter to not cache Pic, Sprite or Bitmap objects - thanks Ami Hanya for the report.
Adjusted LeaderBoard to not care about https:// before the submitted domain - thanks Karel Rosseel for not following instructions.
Also fixed the LeaderBoard edit code to handle secure form - was not updated.
Adjusted Keyboard so NumPad gets added to container if container is specified.
Added placeScale to KeyBoard parameters to scale place menu - will move to place parameters area in ZIM 017
Adjusted Keyboard so place menu and cursor are not in Keyboard container but in their own inside the container that holds the keyboard.
This allows the Keyboard to be in a separater TextureActive than the place menu and cursor - which would be with the Label.
It is possible that this could cause some depth modal issues - there is somewhere where the keyboard is kept above everything
We are keeping an eye on it - Blob, Squiggle and perhaps others avoid going over the keyboard but maybe over the place menu will not matter.
For Connectors, removed override of dropType when using bases - was setting dropType to "on" but "single" is still handy
just watch that if there are multiple nodes on a base, single means single per node... not per base.
Also, moved counting of nodes in drop test to before filters as even if not accepting connection, the node is still there to count
Added startNode, endNode, startLength, endLength to Connectors points parameters, and other places - but will officially launch this in ZIM 017
Added page, goleft and goright events to Carousel
ZIM Beam now forces lowercase when receiving an id - thanks Karel for having it break
Added stopImmediatePropagation to panel close to prevent intermittent sticky drag on TextureActive panel
Set the Scrambler downCheck to false on complete to avoid shift in mouseup in TextureActive without mousedown on tile
Added an addZero parameter to Dial and Slider to add or not add an extra 0 on end of useLabel labels
Fixed Wrapper to work with flip using a series - thanks Moshe Maltz for the report.
Adjusted Editor to save files up to 16MB (MEDIUMTEXT) was at 65,535 (TEXT) in the database. Thanks Karel Rosseel for the report.
Made it so ZIM Connectors with rootLock:true will not drag on a multitouch drag - thanks Jesus Cital for the find.
Added test for http to SVG (declaration needs http not https)
Adjusted ZIM Poly() to use CreateJS angle parameter rather than rotation so mask is correct - thanks Jesus Cital for the report.
19. UPDATED
UPDATED
NPM (15.0.16), GitHub, TypeScript, Bubbling Videos, Dev Site, CDN, Docs, Editor, Updates, Distill, Code Page Template,
Templates, About Page, ZIM 015 Features Page, ZIM Shim, ES6 Module Examples, Patreon
DONATIONS
This has been very important and complex work
Your support on Patreon at https://www.patreon.com/zimjs is very helpful and appreciated.
Again, if you are a student or short on cash - no worries at all!
We do ZIM to help the world be more creative and that is our reward.
https://www.youtube.com/watch?v=-BHLqXgAcSY - ZIM Site Update and Version 014 Launch!
https://www.youtube.com/watch?v=QBmto5CC-AQ - ZIM Store with PWA Mobile Apps
https://www.youtube.com/watch?v=y4u6ovnRNgI - ZIM Editor now with Promo Pages
https://www.youtube.com/watch?v=Xu98W2IfIc8 - Smooth Sliding with Velocity!
https://www.youtube.com/watch?v=CtjkSXc8UZs - Custom Cursors
https://www.youtube.com/watch?v=fSuJHe85PSw - Editable Hierarchy for Accordion List
https://www.youtube.com/watch?v=M5K2Hx6RcI8 - Mobile Soft Keyboard Shift
https://www.youtube.com/watch?v=eaV1nJvpgvw - Blob Physics with Concave Join
1. STORE
https://zimjs.com/store
Added a new STORE page to the main menu bar along the top
and moved NEWS into ABOUT under VERSIONS section
https://zimjs.com/about.html#versions
The Zapp Store has sample mobile/desktop apps made with ZIM and the PWA tool.
Dazzle Finger - https://zimjs.com/finger - finger follows path to make magic
Odd Robots - https://zimjs.com/robots - find the good and bad robots
Plasma Points - https://zimjs.com/points - collect plasma points
Leader Board - https://zimjs.com/board - top scores from the zapps
The four zapps were made in less than a month
along with all the other updates to ZIM and the site.
POINTS
The Plasma Points zapp has 100 points available
You can collect them on pages in the site, by accomplishing social tasks
and by making a zapp in the ZIM Editor.
We hope you enjoy the Zapps. They are also demonstrations
of using ZIM for mobile apps and things like collectables, logins, etc.
All zapps are free so go and get some high scores!
https://zimjs.com/store
2. NEW SITE HEADER
https://zimjs.com
Added a new interactive banner to the site.
The banner lets you change the vapourwave landscape.
You can double click the blob points to change to curves
and the landscape is saved across pages and time
which is easy to do with ZIM Blob and TransformManager.
Plasma Pods animate giving a preview of the new ZIM Store.
Discord and Slack have been moved to the top right
to make way for TikTok and Dev in the Social Media links.
Come follow us!
https://zimjs.com/tiktok
https://zimjs.com/dev
3. NEW SITE
https://zimjs.com
Made the font bigger on the home page and did a little rearranging.
Added the new STORE and EDITOR to the top nav bar
Removed the HOME link on the bar for space - click the logo to go home.
With Editor moved up from the Gold Bars, there is room for a TOP
gold bar at the bottom right to take you to the top!
The top nav bar still secretly links to the bottom if pressed off a link.
Moved the following pages into new 014 template with header and footer:
Home, About, Examples, Learn, Code, Docs, Updates
Frame, InteractiveAnimation, Make NFTs, Zapps PWA Tool, Mobile, ZIM Shim for Animate
CDN page, ES6 and Script pages, Tips, Dark Papers, Typescript, Hints, NPM, MVC, Library, Base
Intro, Tips, Map, Zap, Lab, Creative Coding, College, Explore, Five
4. EDITOR UPDATES
INFO PAGE
https://zimjs.com/zapp/Z_9B2FV
Added individual INFO pages to the Editor that have a preview image, info, and links to
full screen, editor, code, origin, share and print.
https://zimjs.com/zapp/full/Z_9B2FV
The info pages can properly be share, will show up in search engines, etc.
Thanks Ami Hanya for the suggestion.
PRINT PAGE
The print page has the image, info and QR codes to INFO, FULL, EDITOR and CODE.
https://zimjs.com/zapp/print/Z_9B2FV
Thanks Karel Rosseel for the suggestion.
REFERENCE
Added reference field to file for reference links to codepen / youtube / etc.
This is a single link - if more links are desired then add them to the description
Made links in the description automatically become clickable.
ORIGIN
Added Origin concept to Editor - if code is transfered with the little yellow arrow
then a "forked" checkmark shows at the top.
This also keeps track of the zapp that it was copied from for reference on the info page.
You can uncheck the Forked checkbox if desired to clear this connection.
There is no getting the connection back if saved - just remake the fork if desired.
LEFT TABS
The VIEW tab now toggles to a FULL tab to see the zapp in full mode.
The CODE tab now toggles to an INFO tab to see the zapp info page.
SETTINGS
The settings at the top now change to the saved zapp settings for VIEW and CODE.
These settings are dimmed and made non-interactive when in VIEW or CODE mode.
The settings are copied over to the editor side when code is transfered to the edit side.
The settings change to the last editor/test settings when testing and are made interactive again.
5. MOBILE SYSTEM KEYBOARD STAGE SHIFT
https://zimjs.com/014/keyboard.html
We have added an optional keyboardShift parameter for TextInput and TextArea - thanks Ami Hanya for request
The default is false for now, so must be turned on
This will for mobile when the stystem keyboard is activated
Currently, the TextArea text shifts - we are trying to adjust it but it is complex.
BREAK - the ZIM TextArea() now has the placeholder parameter moved and a text parameter added
after width and height and before size like the TextInput
const textInput = new TextInput({
keyboardShift:true, // new keyboardShift parameter
placeholder:"Type Here",
align:CENTER
}).center().mov(0,150);
6. GLOBAL CUSTOM CURSORS
https://zimjs.com/014/cursors.html
Frame now has a cursors property to apply custom cursors beyond CSS cursors.
Thanks to all those who have requested custom cursors.
F.cursors = {
default:DisplayObject,
pointer:DisplayObject,
alert:DisplayObject
etc.
}
If a CSS cursor name is used, such as pointer, the DisplayObject provided will override the CSS cursor of that type.
However, any name is fine for custom cursors - for example:
F.cursors = {yellow:new Circle(10,yellow)}
new Pic("earth.png").center().cur("yellow"); // will add a yellow circle for the pic's cursor
CLEARING CURSORS
Setting F.cursors = null; will clear the custom cursors.
Any cursor type not assigned will use the regular CSS cursor for the type.
CSS CURSOR NAMES
For reference, the CSS cursor names are as follows:
CSS2
auto, crosshair, default, help, move, pointer, progress, text, wait,
e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize
CSS3
none, context-menu, cell, vertical-text, alias, copy, no-drop, not-allowed,
ew-resize, ns-resize, nesw-resize, nwse-resize, col-resize, row-resize, all-scroll,
grab, grabbing, zoom-in, zoom-out
ZIM CURSORS
ZIM uses pointer for most rollover, press, drag, move scenarios and default when not interacting.
There are various resize cursors with Transform.
USE CUR()
Please use the cur() to set any cursors and not the cursor property.
This will add an _cursor property to the object to help keep track of the custom cursor.
We have adjusted ZIM in about 100 places to all call cur() so the system can work.
No need to worry about cursors for drag(), transform(), Blob(), Squiggle(), tap(), etc.
These have all been adjusted to work automatically with F.cursors.
WORKINGS
There is a F.cursorList property that is a ZIM Dictionary that keeps track of objects with cursors
When Frame cursors is on, any object with a cursor set that has a matching type will have its CSS cursor turned off
and the object's _cursor property is used to set the F.cursorObj.
If the Frame cursors are turned off, the cursorList is used to reset the CSS cursors on the objects.
SCALING AND ANIMATING
Any DisplayObject used for a custom cursor should most-likely be center reg and sized or scaled properly.
We can animate custom cursors or use an Emitter, etc.
CURSOR ON TOP
WARNING: If an object has its level set to the top of the stage in a timeout, interval, call, etc.
then also set the F.cursorObj.top() afterwards so the cursor remains on top.
This has been automatically handled in drag(), transform(), etc.
7. DRAG SLIDE FRICTION
https://zimjs.com/014/slide.html
BREAK / IMPROVEMENT added an axis parameter as second parameter to drag() with values of ALL/BOTH or HORIZONTAL or VERTICAL
The boundary can still be set with a value of 0 for either width or height to drag vertically or horizontally with limits
const circle = new Circle(50,light)
.center()
.drag({axis:HORIZONTAL}); // only drag horizontally
BREAK the localBounds parameter has been changed to localBoundary
BREAK / IMPROVEMENT changed all slideDamp parameters to slideFactor with a better sliding equation.
A slideSnapDamp parameter has been added to handle the damping only on a slideSnap.
These changes are on Window(), List(), drag() and gesture().
const items = [];
loop(50, i=>{
items.push("Label " + (i+1));
});
const list = new List(300,500,items).center(); // scrolling with velocity!
A damping equation was used (slideDamp) but the better equation is just a velocity that decreases by a factor
If the slideFactor is 1 then there is no decrease in velocity - the default is .9 and a value of .6 slows quite quickly.
The velocity is determined by the mouse/finger calculated by the time and distance between 50 milliseconds before release to release.
This change affects drag() with slide:true and also Window() and List().
Thanks Anton Kotenko for the request.
This leads to smoother scrolling lists like most mobile scrolling.
8. BLOB PHYSICS
https://zimjs.com/014/blobphysics.html
Updated ZIM physics to physics_2.2
ZIM Blob() can now recieve addPhysics() but it must be a convex Blob - so no inner angles greater than 180 degrees.
This is a limitation of Box2D and can be solved by joining shapes.
Added makePoly() method used by addPhysics() for Blob - so there is no need to use makePoly directly.
Curves in the Blob will be ignored - the physics uses straight edges from point to point.
Note that specifying a number for Blob points will make a triangle, diamond, pentagon, hexagon, etc.
const physics = new Physics();
new Blob({points:6, controlType:"none"}).center().addPhysics();
physics.drag();
Fixed drag() and noDrag() to not convert an array of ZIM objects passed in to an array of physics bodies
This is confusing from the outside if using that array for other things.
Also added sensor parameter to addPhysics() to make an object trigger contact() and contactEnd() but not interact physically
9. HIERARCHY / LIST
https://zimjs.com/014/hierarchy.html
Added new methods to edit the ZIM Hierarchy which can be used to remake associated List() objects
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
Also added a method to get an object's parent
getParent(id) - gets the parent object of the item at the id or null if no parent
10. CODE HINTS
https://zimjs.com/hints.html
Code Hints are available for your editor.
NOTE: currently VS Code only shows the code hints for JS files - not for JS in HTML.
We have copied our TypeScript Typings to a Node Package
These need to be installed in the project folder - here are 2 minute the steps:
1. In the IDE open your project folder
2. Open a Terminal - in VS Code see Terminal in menu (CTRL SHIFT `)
3. type node -v to check if you have node
4. if not then install node here: https://nodejs.org, etc.
5. run the command below
6. npm i zimtypes
only gives auto completes for ZIM in a JS or TS file - not HTML at this time
See the https://zimjs.com/hints page for tips on how to use hints.
11. FRAME POINTER EVENTS
Added Frame pointer events (mouse or touch) that match JavaScript pointer events
F.on("pointerdown", e=>{}) // down on stage
F.on("pointerup", e=>{}) // up on or off stage (yay)
F.on("pointermove", e=>{}) // move on stage
F.on("pointerenter", e=>{}) // when entering stage
F.on("pointerleave", e=>{}) // when leaving stage (yay)
These are complete with e.pointerID, etc. for multitouch
12. SQUIGGLE AND BLOB
Added circleColor and circleBorderColor to Squiggle and Blob just before stickColor BREAK
Blob can now accept a ZIM Flare() as its points parameter (like Circle, Rectangle, Triangle)
new Blob({points:new Flare(), circleColor:red}).center();
13. KEYBOARD CONTROL
Added a keyboardMessage() method to Frame to request pressing on screen for keyboard access.
Keyboard control is only given once the user interacts with the app.
Often we will make an intro Pane() for a game, etc. This offers a quicker solution.
This also solves getting key access on iFrames!
If the app is in an iFrame then The F.keyboardMessage() will turn off pointer events
on the canvas so a press will go through to the iframe - otherwise pointer events remain on.
We then capture a document mousedown and turn pointer events back on (if off) and remove the message
At that point, we can use keyboard.
F.keyboardMessage(); // pops a "press for keyboard control" message
14. GENERAL
The threejs library has been updated to R149 along with its orbitcontrols.
OrbitControls and GLTFLoader have been added as globals when importing zim_three (assuming zns=false)
Added Ticker.isUpdating(stage) to determine if the Ticker is currently updating
The Stepper now defaults to a height of 60 (default Button height) instead of 100 and the default font size is reduced
The Stepper can have its width set and it can be scaled if a different height is desired.
Added ALL and RADIAL global constants that equal "all" and "radial"
IMPROVEMENT Updated ZIM Frame() so setBlurDetect() only is called if not already called
This was in place in all the Timeout, Interval, etc. but in ZIM NFT we added it to the Frame without the proper check
This meant that items paused would be thought paused if a second frame called the blur detect
and when they were to be unpaused they were marked as previously paused - leading to animations, Emitters, etc. not starting again.
We have gone back and adjusted ZIM O2 as well.
Fixed Frame so W, H, S are definitely the first frame called (not made) - this can be overwritten with F.setDefault()
Adjusted ZIM Triangle() to accept a -1 for the second parameter that will make the triangle 90 degrees
this is like the -1 for the third parameter which still does the same.
So it now can have a right angle at the bottom left (or the bottom right as before)
Added a type of Dictionary to ZIM Dictionary.
ZIM Loop() now loops through a Dictionary as it would an object literal.
Added obj.zimLastMouseEnabled setting to noMouse() and mouse() to handle animate() busy check if set after animation starts
Made particles in ZIM Emitter when added back to the stage after removing be visible false so can't see old particles
Fixed InputText clone() to include placeholderInstant - had accidentally added it to the TextInput parameters directly below.
Added a check for an id in the noBind() if there was and id and then it was cleared.
Adjusted Bind clear() method for localStorage to use removeItem() rather than set to null. Thanks Karel Rosseel for the reports.
Added ACTIONEVENT to Flipper - thanks Jesus Cital for the request.
Fixed ZIM animate() orient to object (rather than path) - thanks Karel Rosseel for the report.
15. BREAKS
These are also reported in the sub sections but now will compile them here as well:
ZIM drag() has a new axis parameter as second parameter to drag() with values of ALL/BOTH or HORIZONTAL or VERTICAL
ZIM drag(), gesture(), MotionController() have the localBounds parameter changed to localBoundary
ZIM Window(), List(), drag(), gesture() have slideDamp parameters changed to slideFactor with a better sliding equation
ZIM Window(), List(), drag() have slideSnapDamp added after slideSnap to handle only the slide snapping damping
ZIM Blob() and Squiggle() added circleColor and circleBorderColor parameters just before stickColor
16. PATCHES
Added borderColor and borderWidth properties to Window - thanks Kirk Goble for the prompting.
Fixed Scrambler swapLock:true - had a couple lines in the wrong places causing a few bugs - thanks Jesus Cital for the report.
Updated Frame cursors to work better with touchscreen.
Touch does not trigger mouseover and mouseout so need to use getObjectUnderPoint to tell when and object might change a cursor
Fixed Frame keyboardMessage() to work with touchscreen as touch does not trigger a window mousedown - which we used to handle iFrames
Note that touch does trigger a ZIM mousedown as touch is built in to CreateJS. Thanks Karel Rosseel for the report.
The LeaderBoard now gets the data - this broke when we changed servers.
Adjusted ZIM Emitter in trace mode when pooling - there were some issues along the way with caching and locations.
See https://codepen.io/zimjs/pen/rNQzVxN
Swapped licorice and darker colors - they accidentally got swapped - darker is #111 and licorice is #222 with dark being #333.
Fixed transform() so cur() was not used on canvas - accidentally changed during custom cursor code in this version - thanks Jesus Cital for the report.
Adjusted the keyBoardMessage() to properly return the label - thanks Karel Rosseel for the report.
Added a sensor parameter to addPhysics() to turn an object into a sensor that will trigger contact() and contactEnd() but not interact physically
Added a few checks in ZIM Frame() to avoid errors when the Frame is disposed immediately on ready event - thanks Karel Rosseel for the report
Fixed animate() when testing for rewindWait and loopWait - sprites add a litte of these automatically so was treated as a LOOP! - thanks Pettis Brandon for the report.
Adjusted ZIM ColorPicker to use a zim Shape for the box so it has a cur() method - thanks Yanwenge for the report.
17. UPDATED
UPDATED
CDN, Docs, Updates, Code Page Template, GitHub, Bubbling Videos, ZIM Shim, ES6 Module Examples, Dark Pages, Templates, Distill
TODO
NPM (15), TypeScript, Patreon
DONATIONS
This has been two months of work - with very complicated coding.
Your support on Patreon at https://www.patreon.com/zimjs is very helpful and appreciated.
Again, if you are a student or short on cash - no worries at all!
We do ZIM to help the world be more creative and that is our reward.
ZIM version ZIM 02 - added 29K - January 01, 2023 - BREAKSPATCHES
https://zimjs.com
Added a Carousel to the front of ZIM showing the ZIM ZIM 02 features.
See the Carousel entry down below!
Removed the snow which can be found at https://zimjs.com/index_snow.html
In a month or so, we plan to feature the ZIM Editor with a carousel of demos.
UPDATE to UPDATE - the front now features features and the ZIM Editor.
Along with a VISION statement Carousel - Get Creative!
There is an Easter Egg nav - press the nav bar at the top to go to the bottom
and press the very bottom footer bar to go to the top.
const pics = ["connectors.jpg", "editor.jpg", etc.];
const urls = ["connectors.html", "editor.html", etc.];
// could have factored above but want to keep the example simple to use
// adding Carousel to promo tag above ZIM TEN banners
const frame = new Frame("promo", 820, 200, blue, clear, ready, pics, "assets/");
function ready() {
STYLE = {Arrow:{bgColor:red, rollBgColor:purple}}
// show 1 picture - these could be ZIM Containers with animation, interactivity, etc.
// swipe/arrow animation is .2 seconds
// no spacing between pictures
const carousel = new Carousel(pics, 1, .2, 0)
.center()
.cycle(10, 1, true); // go every 10 seconds animating for 1 second
carousel.tile.tap(()=>{ // tap on tile to not capture arrow taps
zgo("zim/"+urls[carousel.selectedIndex]);
});
} // end ready
2. ZIM EDITOR
https://zimjs.com/editor
Added an online editor to let people try ZIM online.
This is the first stage of the Editor.
UPDATE: the second stage of the Editor is done including:
LOGIN/SIGNUP - requires a valid e-mail - will send confirmation link
FILES - save and edit files on the cloud
LISTS - can share lists with others
There will be more demos and filters and info for the demos.
This is all designed and will be rolled out over the next month.
It will give educators a way to provide a list of demos to work with.
An advantage of ZIM Editor is that the demo code sits next to the editor code.
The editor has a link down in the gold bars next to INTRO where LAB was.
HISTORY
We have gone through a history of online editors:
1. ZIM ZOO - https://zimjs.com/zoo
2. ZIM ZAP - https://zimjs.com/zap
3. ZIM SKOOL - https://zimjs.com/skool
4. ZIM KIDS SLATE - https://zimjs.org/slate
5. ZIM LAB - https://zimjs.com/lab
6. ZIM TEASER - https://zimjs.com/teaser
ZAP is still used for sharing code.
ZIM Skool still has its lesson practice sections
ZIM Kids is good with SLATE - and is the prototype for the Editor.
ZIM ZOO was too complicated for kids and too kids for adults and is not promoted.
ZIM LAB works but is the old editor so is no longer promoted.
ZIM TEASER is for social media campaigns and is the same editor.
The Editor is based on ZIM Kids Slate editor but with a more general look.
Thanks to Karel Rosseel for user testing the Slate editor and suggesting improvements.
Also fixed up the Slate editor so dragging windows worked when dragging on iFrame
now use a ResizeObserver - cool and easy.
3. ZIM THEME
https://zimjs.com/zim/theme.html
ZIM Theme changes the ZIM colors to themed sets of colors
and it can set darkness (and lightness with negative) and tint as well.
// TO SET
// Use the class directly like:
Theme.set("themeName");
// This affects everywhere a ZIM color is used AFTER the theme is set.
Theme will affect 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 APPLY
// 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.
THEMES
There are colors and greys (including white and black).
Here are the current themes and what they affect:
"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 turned to greyscale - somewhat arbitrarily.
"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
// lighten all the regular ZIM colors and greys by 30% for objects made after setting
Theme.set("zim", .3);
// reload the page and apply a future colors and greys 20% darker
Theme.apply("future", -.2);
// the 3rd and 4th parameters are for tint and tintRatio - just like ZIM toColor()
// make all ZIM colors and greys be half way to red
Theme.set("zim", 0, red, .5);
// 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
Theme.set("zim", 0, red, .5, "greys");
// lighten all future colors except yellow and white:
Theme.set("future", .2, null, null, ["yellow", "white"]);
4. ZIM GREYS
Added a few grey colors to fill in the hex codes for grey. The greys are as follows with ** as new:
#000 black
#111 darker
#222 licorice **
#333 dark
#444 charcoal **
#555 grey
#666 granite **
#777 tin
#888 pewter **
#999 silver
#aaa fog
#bbb mist
#ccc light
#ddd moon
#eee lighter
#fff white
5. ZIM PACK
https://zimjs.com/zim/pack.html
https://zimjs.com/zim/pack2.html
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.
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.
const pack = new Pack({
width:450,
height:450,
dragOrder:true // turn on dragging to re-order
}).center(); // packs three default rectangles
new TransformManager(pack, "appid"); // this will record and remember the order
// there are many options - here are the parameters:
// width, height, items, spacingH, spacingV, flatten, direction, lock, backgroundColor,
// align, valign, lastAlign, paddingH, paddingV, dragOrder, dragColor, dragThickness, dragDashed,
// reverse, funnel, showPacking, order, style, group, inherit
6. HORIZONTAL / VERTICAL
BREAK (for ZIM DUO) All parameters with Horizontal or Vertical endings have been changed to H and V
For instance: paddingHorizontal is now paddingH and shiftVertical is now shiftV
This is shorter and matches spacingH and spacingV, etc.
This means an update to ZIM game module to 2.7 - the other helper modules are the same versions.
7. ZIM FONT IMPROVEMENT
https://zimjs.com/docs.html?item=fonts
When preloading a font, just the font file name can be used for
"ttf","otf","woff2","woff","fnt" files and google fonts
So a ZIM font object is no longer needed - but still can be used {font:name, src:file}
When specifying the file in Frame() or loadAssets() include the extension (and path like normal)
but when applying the font in a Label, etc. then remove the extension.
// add the Reuben.otf font in the assets/ directory
new Frame(FIT, 1024, 768, light, dark, ready, "Reuben.otf", "assets/");
function ready() {
new Label("Hello!", 50, "Reuben", red).center();
}
// include the fonts in an array if multiple assets:
new Frame(FIT, 1024, 768, light, dark, ready, ["Reuben.ttf", "pic.jpg"], "assets/");
function ready() {
new Label("Hello!", 50, "Reuben", red).center();
}
// add the Reuben.ttf font in the assets/ directory
// ** note: take out the space between the t and s below
// it is there just to prevent the updates page from making it a link
new Frame(FIT, 1024, 768, light, dark, ready, "htt ps://fonts.googleapis.com/css?family=Dancing+Script");
function ready() {
new Label("Hello!", 50, "Dancing Script", red).center(); // or can keep the + there
}
8. ZIM LOOP BREAK
https://zimjs.com/zim/loop.html
Added an interval parameter to ZIM loop() after the reverse and before the step, min and max.
The interval parameter can also accept a ZIM VEE value dynamic parameter like {min:1, max:3} or [1,5,10] or series(1,5,10) or results of a function.
This will make the loop work like an interval to more easily operate an interval on an array, object literal or container.
If wanting to interval on an index i then you can just use interval() with the total parameter (and immediate if desired) and get the interval object's count property.
Also added an immediate parameter to the end of the ZIM loop() parameters
The default for immediate is true - as opposed to false in the ZIM interval. Set to false to delay one interval before running the loop function.
NEXT
Adjusted loop() so that returning NEXT will also skip to the next loop and will do so immediately if interval is set
The plain return can still be used to continue a loop but if an interval is set then it will wait again that interval rather than going to the next immediately.
The loop function also receives the interval object at the end of its parameters - but probably will not be needed as i is provided and returning a value will clear the interval
// loop through an array every 1 second
loop(10, i=>{zog(i);}, null, 1); // null is entered for the reverse parameter
// 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);
9. ZIM CONSTANTS
https://zimjs.com/docs.html?item=constants
Added NEXT and PREV global constants representing "next" and "prev" values.
returning NEXT can be used in ZIM loop() when interval setting is on to go immediately to the next interval
10. INTERVAL NEXT
https://zimjs.com/docs.html?item=interval
Added a next() method to the ZIM interval object that will advance the interval immediately and increase the count
11. ZIM BOOK IMPROVEMENT
https://zimjs.com/docs.html?item=Book
Added support for automatic add and removal of ZIM Tag(), TextArea() and Loader() to ZIM Book()
Thanks KV for the prompting. We had it on our todo list ;-).
Fixed up the process for Pages too in the case where a page may have been removed twice without being added.
Fixed a glitch in directPage which goes to a page without animation (and updated the docs which had read pageDirect)
const page1 = new Page(W/2, H, blue);
new Tag(60,20).add("HELLO").center(page1);
const page2 = new Page(W/2, H, green);
new Tag(60,20).add("WORLD").center(page2);
const page3 = new Page(W/2, H, yellow);
new Tag(60,20).add("HOW").center(page3);
const page4 = new Page(W/2, H, orange);
new Tag(60,20).add("ARE").center(page4);
const page5 = new Page(W/2, H, pink);
new Tag(60,20).add("YOU?").center(page5);
const book = new Book(W,H,[page1, page2, page3, page4, page5]).center();
timeout(1, () => {
book.directPage = 4
});
timeout(2, () => {
book.directPage = 1
});
12. ZIM NUMPAD IMPROVEMENT
https://zimjs.com/zim/numpad.html
Added a NumPad() class that can be used on its own or with the ZIM Keyboard().
The NumPad has a "pressed" event and a key property to find out what was pressed.
There are four special keys that return "clear", "space", "backspace" and "enter" values for the key property.
The NumPad extends a ZIM Panel and contains a ZIM Pad as its content.
There is now a NumPad key on the Keyboard at the bottom right that will pop up the NumPad().
Added are numPadOnly and numPadScale parameters to end of Keyboard parameters
the numPadOnly will let you used the NumPad with labels and the place menu.
NOTE: the enter key on the NumPad does not add a \n but rather triggers an "enter" event on the Keyboard.
The clear will clear the text, the space will add a space, the backspace will delete a character.
In addition to existing show() and hide() methods, added showKeyboard(), hideKeyboard(), showNumPad(), hideNumPad() methods.
Thanks for the folks on Slack for the request.
const label = new Label("").pos(0,100,CENTER);
const keyboard = new Keyboard({
labels:label,
numPadScale:.75,
numPadOnly:true,
numPadAdvanced:true
}).show();
keyboard.numPad.mov(0,120);
13. ZIM CAROUSEL
https://zimjs.com/zim/carousel.html
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!
Note, there are still Pages with transitions and Marquee with some cool features for interactivity.
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("reverse.html","_blank");})
];
new Carousel(items, 1).center();
14. ZIM PEN IMPROVEMENT
https://zimjs.com/zim/pen.html
Added pullColor and pullThickness parameters to end of Pen().
Use these to add a line between the mouse/finger and the nib of a damped pen.
This helps the drawer understand that they are pulling the pen along
and gives a reason for the damping which makes it smoother.
It really is a visual aid to help overcome the feeling of lag.
Added holdDelete parameter to Pen BREAK so can hold (see ZIM hold()) to delete a line - works better on mobile than dblClick
Note there is also shiftClick to delete and CTRL Shift Click to delete all.
Fixed Pen so it does not set a color/stroke on every tick if these have not changed
When Pen was adjusted in Cat 04 patches to use curveTo properly through a midpoint it added faint slats
Now unless there is a color change (with ZIM VEE) the we do not change the color and this gives smooth colors.
We also adjusted the Pen and MotionController with Pen to be damp .5 rather than .1
and adjusted the MotionController speed to default to 20 rather than 7 for Pen.
These we would set manually, but it is more responsive at these settings
and smooth enough now that the curveTo is working properly.
Damp can be set towards 1 (on either or both) and to a higher speed for even more responsive.
But then the Pen gets more jittery when following a mouse.
And it is sometimes harder to see what you are drawing if it is right under the finger.
15. CONNECTORS IMPROVEMENT
https://zimjs.com/zim/connectors.html
There are two major updates to the ZIM Connectors.
1. A dropArray parameter has been added to indicate which nodes can be connected to other nodes.
This is after dropType so a BREAK but further along in parameters...
The dropArray is in the format of an array of arrays.
This is slightly different than linear which must go in point order.
Added continuous and startIndex parameters to Connectors
Set continuous to true to allow nodes only to be made from the last node
and startNode will set which node can be used at the start
from then on all are open unless specified otherwise - for instance with continuous
Added setAvailableIndexes() method to Connectors to set provided node or node indexes as active
The addNode(x,y,base) was shown in docs but the base was not connected - it is now.
// see link above for full example - here is the dropArray part:
const puzzle = new Connectors({
points:blobPoints,
fullMove:false,
dblclick:false,
deleteNode:false,
dropType:"on", // not "single"
continuous:true,
duplicateLine:false,
// startIndex:1,
// Point 0 is connected to all the others.
// Point 1 is connected to points 0,2 and 4.
// Point 2 is connected just to points 0 and 1.
// Point 3 is connected to 0 and 4.
// Point 4 is connected to 0, 1 and 3.
dropArray:[[1,2,3,4],[0,2,4],[0,1],[0,4],[0,1,3]]
}).center();
2. Made Connectors record the connection steps - this is very little data per connection.
The getSteps() method will then return an array of steps - pass in true to pop this array in a Pane.
Copy the array to the new steps parameter and ZIM will recreate the connections.
The steps will record new connections, deleted connections and moved connections.
The code to record multiple nodes being moved is quite tricky so treat it as experimental.
const hierarchy = new Connectors({
line:new Line({
thickness:3,
color:red,
lineType:"curve",
lineOrientation:VERTICAL
}),
points:[[0,0]], // starting node
nodeRollColor:purple,
// steps recorded by button below
steps:[[0,-150,150],[0,150,150],[0,-50,150],[0,50,150],[1,-300,300]]
}).center();
new Button({label:"RECORD"}).pos(60,60,RIGHT,BOTTOM).tap(() => {
hierarchy.getSteps(true);
});
16. SCRAMBLER IMPROVEMENT
https://zimjs.com/editor/view/Z_92KL1
Fixed pressup on an iframe again - missed sending event object properly
as was using mouseupplus which has NO event object.
Still need regular mouseup for single touch pointerIDs
But did not realize that both these events were firing at the same time.
Added a Frame.mouseuplusonly that triggers only when coming back in from a missed mouseup.
Also fixed a glitch with multitouch where another object sliding underneath
had its mousechildren turned off as animating and on as done
but this should not have been turned on as it affected the multitouch protection.
Also fixed a glitch where single touch on iframe was not triggering next mousedown on drag
because pointerID was not available for mouseuplus.
Now, we just turn off the pointerID check on pressup on single touch as there will only be one cursor!
So now, as far as we can tell, Scrambler is finally locked down on these complex issues.
That was one solid day of debugging.
17. TABS, PAD, LIST DOWN BREAK
https://zimjs.com/docs.html?items=Tabs,Pad,List
Added downBackgroundColor and downColor to Tabs(), Pad() and List() BREAK
So this adjusts the parameter orders
Added currentSelected parameter to Pad() after currentEnabled BREAK
18. ZIM MANAGER, LAYOUT, GRID, GUIDE IMPROVEMENT
https://zimjs.com/zim/manager.html
Now, when a Grid, Guide, Layout or Pages get made in FULL Frame mode,
they get automatically added to a zim.globalManager and remove when disposed
Made Layout() region objects accept an obj property - object still works for backwards compatibility
Switched Grid() and Guide() to have a pixels parameter be true if in FIT or FILL Frame scaling mode
Grid and Guide were created to help with responsive positioning in percentage when in FULL mode
so in FULL mode the default is pixels false which will be percentages
new Grid(); // adds pixel grid to stage and will scale automatically in FULL mode
// same with Guide(), Layout() and Pages()
19. ZIM SHAPES
Added an veeObj property to shapes like Circle, Rectangle, etc. that keeps the original values for parameters that accept ZIM VEE.
This provides a way to remake any of the ZIM VEE parameters - for instance to set the color of a circle again relative to its ZIM VEE value.
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();
});
20. ZIM TIP
https://zimjs.com/zim/editor.html
Changed ZIM Tip() align and valign to tipAlign and tipValign to not conflict with tip text align property
which was called textAlign and textValign in the Tip parameter - those are now changed to align and valign.
BREAK for ZIM DUO - parameters are the same order but called something different.
Fixed up padding style glitch with tip.
21. ZIM LOC
https://zimjs.com/docs.html?item=loc
ZIM loc() can now accept an array of x and y values
new Circle().loc([100,200]); // will locate the registration point at x 100 and y 200
new Circle().loc(100,200); // is the same thing
new Circle().loc({x:100,y:200}) // is also the same thing
22. ZIM PANE
https://zimjs.com/docs.html?item=Pane
Added AUTO setting to width and height parameters of Pane()
and autoPadding (70), autoPaddingH and autoPadding parameters to end of Pane()
// now that AUTO is default for width and height
// the width and height parameters have been moved
// to after the backgroundColor and color
new Pane("Will this wind be so mighty?").show();
// very nice! This will resize to the content
These work like the AUTO for Button to make the Pane size match the content - thanks Karel Rosseel for suggestion
Set AUTO as the default width and height of the Pane which makes these parameters not as important.
So moved the width and height to after the backgroundColor and color. BREAK
This allows for new Pane("hello").show(); to work.
Considered doing the same with Button("hello") to auto fit and move the width and height
but buttons often look better equal width and require more care in general
plus it would be a massive change through Tabs, Pads, Lists, etc. so will leave Buttons as is.
Adjusted Pane to be like Panel and Window with a contentContainer and optional add() method
The add() for Pane defaults to center and replace true.
So the content property is now contentContainer.
ZIM cam helper module has been updated to cam_1.2.js to extend the Pane correctly in some cases.
23. ZIM BUTTON
Button() now defaults to a rollBackgroundColor of the backgroundColor.lighten(.2);
Thanks Marva for the suggestion.
new Button({label:"TEST"}).center(); // bgColor:purple, rollBgColor:purple.lighten(.2)
24. GENERAL
Added toBW(hex) to return black or white depending on which will provide the best contrast to the provided hex color
Added invertColor(hex) returns an inverted hex color - so with RGB subtracted from black - use ZIM convertColor if have or want other formats
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
Adjusted ColorPicker to set currentColor on OK if change color with text box improvement
Added a readOnly parameter to TextInput() BREAK
Added wigglestop event to wiggle() when maxTime is set.
Adjusted InputText to handle DIR START and END - thanks Marva
Made ord() be constrained from 0 to numChildren-1. improvement
Removed the obj.parent.top() in the zimify() for MovieClips in Adobe Animate improvement
Made calculate() in SoundWave() have normalize true as parameter default BREAKimprovement
So now SoundWave by default will have a number between 0-1 for each frequency
Adjusted ZIM STYLE to call reg() when setting regX and regY so that LEFT, CENTER, RIGHT, TOP, BOTTOM, START, END will work improvement
Fixed TextEditor to not give error when editing textArea if no label assigned improvement
Now can double click title bars of Window, Panel, EmojiPicker, ColorPicker, List to collapse improvement - thanks Karel Rosseel for the suggestion
Adjusted Emitter so pooled items do not load above new items when levels is set to "top" improvement
Added a placeholderInstant parameter to the end of the TextInput() that defaults to true improvement
this will remove the placeholder as soon as the field gains focus - set to false to remove once a letter is typed
Fixed STYLE to work properly with move as well as mov.
Added ZIM DUO to Frame makeIcon() and madeWith() methods: F.madeWith({box:clear}).pos(50,50,RIGHT,BOTTOM);
Adjusted ZIM animate() so that the callback function is called if ANIMATE = false is set improvement
also added a noAnimateCall parameter that defaults to false.
The ANIMATE = false is primarily used to bypass animations when testing and the call often is needed to progress the app
This was an oversite to miss this and it was expected to call all along.
For ZIM line() the to() and from() now position the line at Display Objects provided regardless of coordinate spaces
like the loc() does - thanks andrecaldas for the suggestion in Discord! improvement
Adjusted hold() to not trigger error if holding and object removed from stage improvement
Adjusted ZIM drag() to handle re-drag when single press and pressup on iframe and mouseupplus is used
part of Scrambler debugging improvement
Changed default MotionController mousemoveOutside to true - it was left default false despite the docs reading true improvement
Fixed Arrow() to have proper rollBackgroundColor parameters in any arrow other than triangle - typos improvement
25. ZIM PATH
https://zimjs.com/paths/
Added trace button to add an image to trace path on
Fixed menu select so proper controlType parameter is used
We had passed in the starting data array with pointType
but the array was adjusted as we showed the Blob or Squiggle in the menu
we needed to pass in a copy() of the data array.
Beware... passing in a data array to points will adjust that data array.
26. BREAKS
These are also reported in the sub sections but now will compile them here as well:
ZIM DUO: all parameters with Horizontal or Vertical endings have been changed to H and V
ZIM loop() has an interval parameter added after rewind and before step
ZIM Pen() has a holdDelete parameter added after doubleClickDelete - so quite far in the parameters
ZIM Connectors() has dropArray, continuous and startIndex parameters added after dropType so quite far along
ZIM Tabs(), Pad() and List() have added downBackgroundColor and downColor so different parameter order early
ZIM Tip() changed align and valign to tipAlign and tipValign to not conflict with tip text align property
which was called textAlign and textValign in the Tip parameter - those are now changed to align and valign.
parameters are the same order but called something different so will affect ZIM DUO.
ZIM Pane() now starts with content (formerly label) and has the width and height moved
to after the backgroundColor and color - so change of order right at start.
ZIM TextInput() has a readOnly parameter added near end but before inputType.
ZIM SoundWave() now defaults to 0-1 numbers for calculate - these being auto-normalized.
ZIM TextInput now does not trigger a change event if the text is changed programmatically.
27. PATCHES
Fixed noDrag() to test for a cur method existing as it recursively removes drags - so if it is a createjs shape it does not try and set cur() - thanks Pettis Brandon for the report
Adjusted ZIM fastFrame/Frame so that the createjs Stage bounds gets updated if the stage canvas size changes
and fixed TextInput clone() method to work properly - we had left out some things. Thanks Kirk Goble for leading us to the issues.
Adjusted Frame loadAssets to work better when XHR is false - a test for errors on images caused complete to not fire
and loading was going to lazy loading which defaults to XHR true. This is fixed. Thanks Chris Spolton for the report!
Fixed ZIM Frame() so S,W,H are always ZIM default frame
If a second stage was created before the first stage the first frame was getting the second S,W,H.
As of a patch in ZIM NFT, each Frame was calling setBlurDetect rather than it being set only once as properly tested in interval, timeout, etc.
This was leading to items being paused then in a second detect recorded as being paused and not turned back on when focus came back.
Patched ZIM Organizer() which was extending Tabs() and we had changed the Tabs parameter order - thanks Ami Hanya for the report
Fixed an issue with Tile and colSize using series - it picked for just the first row and needed to continue for each row
ZIM SHIM for Adobe Animate now uses the ZIM version of CreateJS as the default to solve touch screen issues - thanks Jesus Cital for the report.
Adjusted zim_base.php to remove error chAeck as deprecated in PHP 8 - still does errorCode test
Fixed ZIM Pane() to accept a content object {} as only parameter - this was conflicting with ZIM DUO - thanks Divya for the catch
Fixed exand() with STYLE - was missing being added to initial check array
Fixed Frame makeIcon() in ZIM DUO to be correct - it was calling madeWith()
NOT a patch but an update to the ZIM Editor to be able to add scripts or imports to a file.
We also now clear the FILE settings when using the CLEAR button or when transfering over code from an example.
The transfer of code that uses added scripts or imports will prefil the NEW FILE fields.
Added DPad support to type parameter of Physics control() as an option to keys. Thanks Divya Saraogi for the prompting.
Added checkmark icon to Pizzazz makeIcon()
Fixed series({min, max}) it was using loop() and we had not adjusted for the inserted interval parameter
This is now fixed and the other 360 ZIM loops in ZIM checked.
We have removed the ctrl/command S hotkey on the editor as it was only testing the code not saving.
We have replaced this with alt/option T for test. ctrl T opens a new tab in the browser.
Added an onTop parameter to Layer() that defaults to true - set to false to not bring selected layers to top - thanks Emre Tekinalp for the suggestion
Fixed ES6 modules so zimplify and zimify are global functions. They are not stored on zim so were missed previously.
Added an arrowColor parameter to Stepper - right at the end before style - thanks Marva for the suggestion
ZIM Window() now drags to edge of object boundary such as the Stage when collapsed
still an issue when uncollapsed as it keeps the apparent bounds that of the titlebar - but the bounds have been changed
so will see if we can dig into that one day.
Fixed Tabs so when selectedIndex starts at 0 (most of the time) that if currentEnabled is false then the first button is enabled false.
BREAK Adjusted TextInput to not call a change event when the text is set programmatically.
The general rule is not to dispatch an event if set with code - just do what the event would do as the code is set.
The change event on the TextInput is there to test if the user has changed the text.
It can be problematic, for instance when sending data to the database, if the change event triggers as the code is set programmatically.
Imagine, updating the database for a field on one page when the field is set to a second page's data - the user did not change the field.
Adjusted TextInput change event to not trigger on first focus - it had the lastText="" to start and should have had lastText=label.text
Added a different parameter to shuffle() as second parameter to force the shuffled array to be different than the original
Fixed Window long titlebar text to not be draggable outsided the window when resized (set text to noMouse())
Fixed corner of Window mask rectangle to match the the outer corner less half the borderWidth (or 0 if negative) to properly mask content
Thanks Karel Rosseel for these finds.
Made Window titlebar rectangle have scaleDimensions:false so corner does not change at top as window is resized
Made Window min width be at least 2 times the corner.
Repatched ZIM animate() for the negative relative animations so works with regular properties and dot properties
We had fixed it for dot properties (in an earlier ZIM ZIM 02 patch)
which broke it for regular properties when from was being used - thanks Ami Hanya for the report.
Added test for typeof DeviceOrientationEvent != "undefined" in SensorAsk - it was not defined in some devices
Added mouse style - note that mouse is always default true so this is only useful for false value - it calls a noMouse() after object creation
ZIM Drag() now accepts a ZIM Circle() as a boundary - and the dragged object's registration point will stay withing the circle
Note that this is different than other Display Object boundaries where the whole dragged object bounds stays within the boundary bounds.
Fixed bug in ZIM animate() on paths with percentComplete - the orient was not taking into account the easing (or the rewind)
so it worked with ease:"linear" and rewind:false. This has now been corrected by using the pathRatio - thanks Ami Hanya for the report
Adjusted the Window/List title to be masked by the bar (less the icon sizes)
Also set the min width to be the icon sizes and not the title length
Fixed Window/List resizeHandle to be visible=false when collapsed - thanks Karel Rosseel
Fixed List expander to catch when there is no selection - thanks @Kloodge
Updated Tips() to use pos() for setting tipAlign and tipValign - thanks Ami Hanya for the prompting and testing
Added resizeHandle to List - and added resizeBoundary and resizeVisible parameters to Window and List
Here is an example https://zimjs.com/explore/splitter.html - thanks @Kloodge from Discord and Karel Rosseel for the thoughts
Fixed Layout() scalingObject had a scalingObjects typo
Adjusted ZIM drag() to undo part of previous patch for off iFrame mouseup...
this change was causing a problem with beziers in Squiggle and Blob being out of sync
It was the code where we remove the pressmove event so we can apply it in the mousedown each time - strange.
So will have to go back and see how that affects the mousedown on drags outside iframes... complex code.
Made ZIM for Animate work properly with frame.color or F.color
was expecting a canvas id that was not there when using Animate - just directly accessed the canvas property.
Adjusted InputText to better work with long lines deleting and backspacing - especially with align center
Thanks Pettis Brandon who did the code for the fix! Woot.
Adjusted ZIM SHIM and updated the ZIP file to not pause MovieClips on coming back into focus
as that set the paused property to false and would play a MovieClip with multiple frames - thanks Maksim Seldenkov
We basically do not set the paused property on objects without a type (like an Adobe Animate MovieClip)
This should be fine as the paused property is a read-only property added by animate to track animation.
Updated SensorsAsk() with the current parameter order for Pane() and updated docs - thanks Pettis Brandon
Fixed ZIM TextEditor() which needed adjusted Panel for later parameters like draggable
Fixed makeMath() which was calling W (width) instead of WW (window) in ZIM
Fixed default Pane() to be "" - was broken corner after changing to content parameter
ZIM STYLE now supports tap, change and hold for objects with these parameters - most components
These accept a function and can be turned off with noTap, noChange and noHold STYLE.
Adjusted ZIM STYLE to style the transforms such as scale before the center and centerReg
so moved center and centerReg from top to down in the order of applied method styles.
This was an oversite when setting up STYLE and it is good that we caught it - better late than never.
Updated ZIM STYLE for pos - to handle horizontal and vertical parameters - these were still using the old right and bottom parameters
Updated ZIM Selector() to round the selectedIndex property
Updated ZIM animate() to work properly with ZIM VEE values if the animation is not rewinding.
Fixed ZIM Editor to work with < properly when stripping script tags from content
Made List() addTo() add CheckBoxes when the List() checkbox parameter is true - thanks EZ.
Fixed ZIM Book() to work with string images again... the test for TextArea, Loader and Tag added recently gave an error
as it was not expecting a string... thanks Karel Rosseel for the report.
Added interval parameter to Stage and StageGL loop methods
Standardized on getPoints(), setPoints(), getSteps(), setSteps(), getOrder(), setOrder() for recording and retrieving
there are also related properties points, steps and order in Squiggle/Blob, Connectors and Pack respectively
Patched threejs OrbitControls v142 (the latest script version) - it was giving an error - thanks Karel Rosseel for the report
Added a removePoint(index) method to Squiggle and Blob - thanks Yanwenge for the suggestion - this just uses splice on the points property
Fixed ZIM MotionController - the flip:VERTICAL was backwards.
Adjusted ZIM Flare so cross colors can accept Gradients... previously it was only the whole shape that could.
See https://zimjs.com/editor/view/Z_GRQNU
Fixed ZIM Tabs so function STYLE does not go automatically to the Label - this was a bug as style needs a false rather than a null to deactivate
If STYLE for labels in Tabs (and Lists) is desired then styleLabels needs to be turned on.
Adjusted convertColor() so it handles RGB at 0 and 1 ranges and fixed animate() to not treat RGB string as relative values - thanks Ferudun Vural for note.
Adjusted the TextInput to place the placeholder at the label and match alignment. Thanks Marva for the prompting.
Also made placeholder go away when setting the text with the text property or come back if text is set to "" or null.
Adjusted ZIM Distill to automatically add fastFrame which has a Stage as dependency if there is no Frame added.
This will allow Distill to work better with Adobe Animate and ZIM Shim.
Thanks to Максим Сельденков on YouTube for the report. NOTE - this is still being worked on...
Adjusted Frame loading of JSON to provide just the parsed JSON object rather than adding src, item and file properties like we do for images and sound
Added a "first" parameter to zet(selector, first) to return only the first result - so gets [querySelector()] rather than querySelectorAll()
Fixed a bug with ZIM animate() for negative relative animations using the dot property so "rotation.x":"-20" - this now works
Adjusted Swiper() to use the sensitivity to detect movement ending - thanks EZZ FLash for the report
we updated the threejs globe spinning to ZIM ZIM 02 with the patch https://codepen.io/zimjs/pen/qGPVqO
Adjusted dragBoundary() so that if null is passed (or no parameter value) then the drag boundary is cleared.
The boundary will exist until the next mousedown on the object so if wanting to clear as dragging set a boundary of the stage size or bigger.
Added a new example to ZIM drag() to show how to drag horizontally or vertically depending on start direction
Thanks Ferudun Vural, Pettis Brandon and Joseph Diefenbach for the help in Slack.
Fixed ZIM asset object with font {assets:[{font:"amboy", src:"amboy.woff"}, "cat_s.png"], path:"assets/"}
Which can now also be {assets:["amboy.woff", "cat_s.png"], path:"assets/"} - thanks Pettis Brandon
Added NONE as a constant - used in upcoming Pack() class
Fixed ZIM Window so the damp parameter works properly - List too...
Changed Docs to use F, S, W, H in examples rather than frame, stage, stageW and stageH
Fixed bug in ColorPicker "legacy" - this is now working - thanks Marva for the report.
Also cursor was not showing when ColorPicker spectrum was on second Frame - thanks Marva.
28. ZIM GAME
Updated to game_2.7.js - only because of Horizontal / Vertical changes
29. ZIM CAM
Updated to cam_1.2.js - to handle the Pane() changes
30. ZIM TIPS
https://zimjs.com/tips.html
Moved the CHANGES section to the second TIP and updated the section with current tips.
31. ZIM BASE
https://zimjs.com/base.html
Added a way to select multiple values from the same field.
As base uses arrays to specify field names this was previously not possible.
Now we use OR and then convert to REGEXP in-behind the scene to do this.
// find records with age of 5, 10 or 15
$result = $data->select("zim_hero", ["name","age"], [age=>["OR",null,[5,10,15]]]);
// this will create a MySQLi clause like 'WHERE age REGEXP CONCAT(?, "|", ?, "|", ?)';
// and then protected values of 5, 10, 15 will be bound to the ?
// The [prefix, infix, value] format has always been there to handle multiple WHERE clause
// for instance, this would find legal records or an age of 19
$result = $data->select("zim_hero", ["name","age"], [legal=>"yes", age=>["OR",null,19]]);
// but if we wanted to find multiple ages, we could not until now
Also adjusted ZIM Base to catch if a few variables were not defined - used isset() - these were giving warnings.
32. ZIM SHIM
https://zimjs.com/animate.html
Updated ZIM SHIM to ZIM ZIM 02 and added a 3D example
33. ZIM MVC
https://zimjs.com/mvc.html
Updated ZIM MVC to ZIM ZIM 02 and ES6 modules
34. ZIM ZAPPS - MOBILE TOOL
https://zimjs.com/zapps
Updated ZIM ZAPPS mobile tool to expect the new template with the ready callback
Needs to have the "given F (Frame), S (Stage), W (width), H (height)" message.
And needs to use script tags to the CDN rather than ES6 Modules.
This just takes a moment to adjust and helps us parse the files to local files.
The tool will then make all the necessary files and adjustments to make a PWA
and prompt a message to add app to homescreen on iOS.
35. UPDATED
UPDATED
CDN, Docs, Updates, Distill, Bubbling Videos, Dark Pages, ZIM Shim, GitHub, NPM (15), TypeScript, Templates, ZIM Kids, Front Page, Code Page Template, ZIM ZIM Features, News, Patreon
DONATIONS
This has been two months of work - with very complicated coding.
Your support on Patreon at https://www.patreon.com/zimjs is very helpful and appreciated.
Again, if you are a student or short on cash - no worries at all!
We do ZIM to help the world be more creative and that is our reward.
ZIM version ZIM 01 - added 2K - August 07, 2022 - PATCHES
1. FRAME READY AND TICKER PARAMETERS
https://zimjs.com/zim/frame.html
BREAKIMPROVEMENT We have adjusted the Frame parameters and the main template for ZIM
Frame has a ready parameter inserted after outerColor and before assets
and a ticker parameter inserted after assets, path, progress
These are callbacks to use instead of frame.on("ready", ready); or Ticker.add(ticker);
although the older way still work fine!
We would recommend using the ready callback function
but using Ticker.add() inside the ready callBack for Ticker as scope is easier.
IMPROVEMENT An automatic stage.update() is now called on ready and ticker
and after the traditional "ready" event is dispatched.
So there is no need for a stage.update() at the end of making content.
// default template with FIT mode
new Frame(FIT, 1024, 768, light, dark, ready);
function ready() {
new Circle().center();
}
// FULL mode
new Frame({ready}); // ES6 shortcut - same as {ready:ready}
function ready() { // can also receive frame, stage, width, height - but see F,S,W,H globals in section below
new Circle().center();
// stage update automatically called
}
// or all at once:
new Frame({ready:()=>{
new Circle().center();
}});
// with ticker - like PixiJS update() or P5js draw()
new Frame({ready, ticker});
let circle; // declare outside to access both
function ready() {
circle=new Circle().center();
}
function ticker() { // can also receive count (starting at 1), frame, stage, width and height
circle.scale+=.1;
// stage is automatically updated
// pause the ticker - see global variables below for F
if (circle.scale > 5) F.pauseTicker();
}
This system is used in PixiJS, Phaser, and P5js which also have preload callbacks.
ZIM does not need a preload as it has assets, path and progress parameters.
2. GLOBAL VARIABLES F, S, W, H, M
https://zimjs.com/zim/frame.html
New global variables have been added to help out with the new Frame template.
The traditional template with frame, stage, stageW, stageH is still valid
const frame = new Frame(); // now available as F
const stage = frame.stage; // now available as S
const stageW = frame.width; // now available as W
const stageH = frame.height; // now available as H
but alternatively F, S, W, H will be provided automatically
and will be the ZIM default Frame and its stage, width and height.
W and H will change in FULL mode if the window resizes.
All these variables will change if some other frame has setDefault() called.
Also added an M global variable that holds the result of mobile()
With the down state for Buttons, all buttons needed to know mobile() so made it global.
// this example uses FULL mode so responsive design might be desired
new Frame({ready});
function ready() {
const circle = new Circle().alp(.7).tap(()=>{
circle.sca(rand(.5,2));
S.update(); // S is the stage
});
// for responsive design, set location in frame resize event
// using the new W and H globals - which will be updated automatically
F.on("resize", ()=>{
circle.loc(W*.2, H*.2); // locate circle at 20% stage width and height
g.resize();
});
const g = new Grid(); // check out the location on a Grid
}
// default template but with old variables
new Frame(FIT, 1024, 768, light, dark, ready);
// collect the parameters and call them old variable names
function ready(frame, stage, stageW, stageH) {
const circle = new Circle().center();
frame.on("keydown", e => { // can use frame (or F)
circle.sca(rand(1,3));
stage.update(); // can use stage (or S)
});
}
3. VIDEO - FIT, FILL, FULL
Video is a ZIM Container that holds a bitmap which updates to show the video tag.
If width and height are provided, the container will take the width and height
and then the scaling parameter will determine how the video is scaled into the container.
// FIT - fits video inside the Vid container with specified width and height
// FILL - covers the Vid container and could overflow in one of width or height
// FULL - stretches video to width and height
Parameters for align and valign are provided as well (for FIT and FILL modes).
If no width and height are provided then Vid will lazy load like a Pic
where it takes a type of AC (Asset Container) until it is ready.
When it is ready, the type is changed to Vid and center, centerReg, pos, etc. commands are re-run.
// 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
const video = new Vid("video.mp4", 800, 600)
.center() // using 800x600
stage.on("stagemousedown", () => {
video.play();
});
// 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
stage.on("stagemousedown", () => {
video.play();
});
// here, 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().
// At the start, it will have a type of "AC" once it loads it will be "Vid"
const video = new Vid("video.mp4")
.center() // will automatically be re-centered after loading
stage.on("stagemousedown", () => {
video.play();
});
// make the video cover the stage
const video = new Vid("video.mp4", W, H, FILL)
.center()
stage.on("stagemousedown", () => {
video.play();
});
4. BUTTON - DOWN PARAMETERS
https://zimjs.com/zim/button.html
IMPROVEMENT Added down parameters and shifted around many parameters for ZIM Button() BREAK
Basically, 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.
new Button({
downBackgroundColor:red; // will be red when pressed down
}).center();
We keep these as flat parameters rather than grouped in {} object parameters
so that we keep the benefit of ZIM DUO and ZIM STYLE.
The Button parameters are now organized to match above.
The normal mode also has borderColor, borderWidth, rollBorderColor and downBorderColor inserted after the color set.
The normal mode is listed first, then general Button parameters such as corner, shadowColor, etc.
The toggle and wait parameters are listed last - for instance:
https://zimjs.com/zim/button.html
Added AUTO value for width and height
and autoPadding, autoPaddingH, autoPaddingH parameters to Button()
// will size to fit width of label at default autoPadding of 20
new Button(AUTO, null, "HELLO WORLD").center();
7. BACKGROUND COLOR
Can now use bgColor for backgroundColor in any of the backgroundColor parameters or styles
such as rollBgColor, toggleBgColor, etc. Not properties... but parameters and styles.
// bgColor can be used for backgroundColor in ZIM DUO {} or in STYLE
// but not as property names
// backgroundColor can still be used
new Button({bgColor:red, rollBgColor:black, downBgColor:blue}).center();
8. GRADIENTS
https://zimjs.com/zim/content.html
There are new optional shortened versions of GradientColor and RadialColor
with an angle either in place of the ratios or just after the ratios
https://zimjs.com/docs.html?item=GradientColor
https://zimjs.com/docs.html?item=RadialColor
both will auto distribute ratios across colors if ratios are not provided
both will calculate gradient across object if x and y values are not provided
// left to right
new Rectangle(W,H,new GradientColor([white,mist])).addTo();
// 45 down
new Rectangle(W,H,new GradientColor([white,mist],45)).addTo();
// with stops, centered
new Circle(90,new RadialColor([white,light],[.2,.8])).pos(50,50);
// additional parameters x1,y1,x2,y2 and x1,y1,r1,x2,y2,r2 are still available
9. CONTENT
https://zimjs.com/zim/content.html
A system has been added for easy confirmation or submit pop-ups (on the canvas)
using existing ZIM Pane(), Panel() or Window(). Thanks Ami Hanya for the prompting.
Each of these now has a content parameter after width and height. BREAK
The add() method now has content, index, center, replace for its parameters. BREAK
Note that Pane used to have a label parameter - it is now a content parameter.
The optional content parameter can be used to make the following types of content:
// CONTENT PARAMETER
// For the content parameter of Pane(), Window() or Panel():
// If a string or number is passed in then the function returns a ZIM Label.
// If a content configuration object {} is passed in then it returns a ZIM Container of content.
// If a displayObject is passed in then it returns the displayObject.
// CONTENT CONFIGURATION OBJECT {}
// has 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
// 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
// spacingH - (default 20*buttonScale) horizontal space between the buttons
// spacingV - (default 20) vertical space between the content areas
// scrollBar - (for Window) set to true if a default scrollBar is present in Window or a number if custom
// make a Panel (or Pane or Window) with a message,
// a TextInput and two buttons with callbacks
const panel = new Panel({
width:400,
height:250,
content:{
message:"We shall greet you!",
display:new TextInput({placeholder:"enter name"}).sca(.7),
buttons:[ // or just a single button object
{
label:"GREET",
bgColor:green,
width:300,
call:()=>{
zog("Hello " + panel.display.text);
}
}, {
// button:new Button(), // can also specify a custom Button
label:"CLEAR",
bgColor:orange,
call:(button)=>{
panel.display.text="";
}
}
]
}
}).center();
Uses a makeContent(content, maxWidth) function internally (under META in the docs).
BREAK former Window.content and Panel.content has now been adjusted to Window.contentContainer and Panel.contentContainer
These are the containers that content gets added as, further content can be added with the add()
Any content created with a content parameter can be referenced by the content property.
10. DYE
https://zimjs.com/zim/frame.html
Chainable convenience function to set the color of a ZIM shape
or the backgroundColor of an object with backgroundColor
new Circle().center().tap(e=>{
e.target.dye(green);
S.update();
});
11. CORNERS
https://zimjs.com/zim/corner.html
ZIM Rectangle() corners now accept pixels per side
// 100 radius on top and bottom and 50 radius on left and right
new Rectangle({corner:[100,50]}).center();
// or apply horizontal vertical to specific corners
// corner of 100 over 50 down for top left corner, etc.
new Rectangle({corner:[[100,50],[100,50],[150,250],[150,250]]}).center();
// mixes will work too
// 20 pixels left and right top - skewed corners for the bottoms
new Rectangle({corner:[20,20,[150,250],[150,250]]}).center();
// STYLE works as well - but remember the {noPick}
STYLE = {corner:{noPick:[100,50]}};
12. SERIES MIX
https://zimjs.com/zim/frame.html
added mix() to series methods for randomizing series but not repeating at series loops
note: the very first and very last might repeat
// randomize these colors each time we have used all of them
// but do not start with the last color selected
const colors = series(red,green,yellow,purple).mix();
// the Tile below will have series of mixed sets of these colors
// but never repeat the same color
new Tile(new Circle(10,colors),40,1).center();
// there is no way of avoiding potential repetition of the very first and last color
// if, for instance, making a ring of colors - as ZIM does not know how many times the series will run
// that would take post-processing to adjust
See also random() which randomizes order each time it is done - but first of next might be same as last of previous.
See also shuffle() which initially randomizes items but then repeats that order
13. DRAG REMOVETWEENS ADJUSTED
ZIM drag() still defaults to removeTweens:true but it will only remove tweens with x or y set
Split up animate() calls if, for instance, rotation is still desired as dragging
Note that a new x or y tween will need to be put in place on mouseup if desired to continue to animate in x or y
new Rectangle()
.centerReg()
.animate({x:200}, 10) // this will stop when dragged
.animate({props:{scale:2}, rewind:true, loop:true, time:3}) // this will not stop when dragged
.drag()
Previously, all animations stopped when dragged unless removeTweens:false was set
The adjustment was always intended but was just implemented.
The parameter is there to help beginner coders avoid conflict when drag() is placed on an object with x,y animation.
14. CAM COLOR
Updated CAM module to cam_1.1
ZIM CamMotion (and CamCursor) now have colorFilter and colorSensitivity parameters added
that will move only if within a certain hue of the provided colorFilter value - like "green".
const ask = new CamAsk().show(yes => {
if (yes) {
const camCursor = new CamCursor({
camMotion:new CamMotion({
precision:.8,
colorFilter:"green", // NEW
colorSensitivity:.2 // NEW
})
});
camCursor.on("ready", () => {
new CamAlpha(camCursor.cam).pos(50,50,RIGHT,TOP);
const info = new Label("Move something that is green", null,null,dark)
.sca(.8).pos(0,50,CENTER,BOTTOM);
new Circle(25,"green").pos(-80,0,LEFT,CENTER,info).mov(0,-2)
const sensitivity = new Slider(0,1,null,null,200)
.sca(.8)
.pos(50,48,RIGHT,BOTTOM)
.change(()=>{
camCursor.colorSensitivity = sensitivity.currentValue; // NEW
})
sensitivity.currentValue = .2;
});
}
});
This is always a little tricky as there are often colors everywhere but it roughly works.
The sensitivity adjusts from 0 (exact hue) to 1 (+- 10 hue) with a default of .5 so +- 5 hue.
This uses the new hsl setting for ZIM convertColor() so must use ZIM ZIM 01 or later
Thanks Karel Rosseel for the request although was always planned.
Grant Skinner did this with Flash years ago, we did cam visualizations in Flash as well
but did not do colors then - it is a just a rather trivial hue comparison
but allows different colored paddles to operate different cursors, etc.
15. CAM FACINGMODE AND CONFIG
https://zimjs.com/cam/test8.html
Two parameters have been added to Cam(), CamMotion() and CamCursor()
these are facingMode to pick a camera (ignored on PC) such as "user" or "environment"
and config for specifying many media parameters as an object literal {}
There is also a setFacingMode() method on the cam object to dynamically set this as seen here:
const ask = new CamAsk().show(yes => {
if (yes) {
var cam = new Cam({facingMode:"environment"}).scaleTo().center(); // NEW
cam.on("ready", () => {
new CamCursor({cam:cam});
var count = 0;
timeout(1, () => {
new Button(null,null,"CHANGE").pos(50,50,RIGHT).tap(() => {
count++;
var type = count%2==0?"environment":"user";
cam.setFacingMode(type); // NEW
})
stage.update();
})
});
}
});
Config is not shown above but is an object literal {} with lots of native HTML/JS properties:
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/Constraints
16. GENERAL
updated CamCursor() to display the cam if a CamMotion is passed to it - just needed to add the addTo();
convertColor() now has an hsl setting to convert to - this returns an array of [hue (0-360 degrees), saturation (%), lightness (%)]
Fixed Window with centering content so that if the content is taller than the window
it just centers it vertically and if wider it centers it scrolls into horizontal center
Added information about assets at the bottom of the ZIM SHIM FLA - thanks Paul Ruda the inspiration.
Adjusted Beads so auto orientation takes into account rotation of the path
Added information to List() docs about using addAt() when list starts empty
at which point a List() viewNum param should be set that roughly matches how many items would be in view.
There does not seem to be an automated solution to this.
LabelOnPath and LabelOnArc now have rtl support - thanks Ami Hanya for the prompting
17. SPRITES
Sprite now accepts just a string for a new Pic() such as "sprite.png"
And also if using the JSON then "filename.json" instead asset("filename.json")
as long as the sprite.png and/or filename.json has been preloaded in Frame() or in loadAssets()
Sprite now accepts TexturePacker JSON hash and JSON array formats (used by Phaser)
as well as the CreateJS / EaselJS formats
REMEMBER to adjust the image in the meta object to include the path to the sprite image
so "image": "spritesheet.png" would be "image": "assets/spritesheet.png"
See https://www.codeandweb.com/free-sprite-sheet-packer for making SpriteSheets
See https://zimjs.com/sprite/ for an example
18. STYLE - LAZY GROUPS
STYLE now supports Lazy Groups (and as previously added, Lazy Objects).
See: https://zimjs.com/docs.html?item=STYLE
// Here is a Lazy Group as it is not added to a group {}
STYLE = {
alert:{color:red}
}
new Circle({group:"alert"}).center(); // red
// behind the scenes, this is converted to:
STYLE = {
group:{
alert:{color:red}
}
}
19. PATCHES
Added mozRequestFullscreen() to Frame's fullscreen() method - thanks Ami Hanya for the solution
Adjusted animate() along a vertical path to handle flipping better... it was jittery, thanks Pettis Brandon for the discovery.
Fixed Arrow() when used with Pages() and removePage() is called - thanks Anton Kotenko for the report
Arrows were using the original swipeArray rather than the ones on each page - the latter is what the updateSwipeArray() was updating.
Fixed typo in Window close when no titleBar and resize is called - thanks Marva.
Adjusted zimify() for Adobe Animate MovieClips to properly read bounds - thanks EZZ Flash for the report.
Updated Distill to put the zim.extends before Point as Point is in code section but extends a CreateJS Point.
Also moved WW as a global for Window to the top to fix Distil - thanks Chris Spolton for the report.
Added a system to purge canvases left in Safari - thanks Chris Spolton
Any object that gets cached was leaving cacheCanvases in Safari
So we set those to 1x1 https://twitter.com/rikschennink/status/1356877707934588928
We give the cacheCanvas (the CreateJS BitmapCache) a z_bc id and purge them in the ZIM global dispose()
Fixed ZIM Tips - it was showing hitTestRectCircle() when it is hitTestCircleRect()
Added willReadFrequently parameter to Bitmap, Container and Shape cache()
to avoid console warning - adjusted Bitmap getColorAt() and keyOut() to cache with willReadFrequently
NOTE: Container and Shape cache have margin parameter before rtl and willReadFrequently whereas Bitmap cache does not
will probably add margin to Bitmap cache in next version to make all the same
Removed ColorPicker dropper when hide() is called and added missing ok event
Added a few {willReadFrequently:true} to ZIM getContext("2d") calls to avoid the Chrome Error
See the entry below for updates to CreateJS where we did more of the same.
Changed version to ZIM ZIM 01 - it was left at 00. This is one of the only manual changes we need to remember. Sigh.
Fixed a bug in STYLE that was introduced when we went to lazy groups.
We needed to exclude the pos, addTo, center, centerReg, mov, drag, transform, gesture, outline, bounds, animate, wiggle, cache
So this has been patched - in other words, do not call your group any of those words - nor any of the other styles.
BREAK unlikely, but we had a bug in center() and centerReg() when specifying a container.
If your object was in some container and you center(S) then it would not add to the stage.
This was a misunderstanding of the createjs contains() which we did not realize is recursive.
So center() or centerReg() to any container that already contains the object would not move the object to the desired container.
In Emitter() animation parameter, we added a way to pass an array of animations to apply to the particle (Thanks Chris Spolton for the request)
with {noPick:[{animation1}, {animation2}, {etc.}]} - if just an array is used, then ZIM would randomly pick one to apply.
Added uppercase parameter to TextInput() just before the style parameter to make input uppercase.
Fixed a glitch in Ticker.raw() - the id was being set as "" - thanks nycjoseph for the find.
Added a targetSpace parameter to getBounds() which will return a rectangle around the object in the targetSpace coordinates
Like the normal getBounds(), this will not include the outer half of the object's border. Thanks nycjoseph for the suggestion.
A side-note - Adobe Animate / Flash - had this feature but did include the border whereas Flash getRect(targetSpace) did not
but CreateJS implemented getBounds() as not including the border and did not provide a getRect().
A note about if animating a Window or List off screen then setting optimize:false
or calling window/tile update() method in animate({events:true}) animation event.
Thanks Bart Libert for finding the issue,
optimize checks for scrolling items offscreen but not if whole object is moved offscreen.
Added a dashed parameter to Pen (at the end before style).
Adjusted Pen to set paper to noMouse() when drawing as we will not be dragging lines
and then setting paper to mouse() when not drawing as we might want to drag lines
This should increase performance when there are many lines drawn - when using MotionController only.
undo and redo events have been added to ZIM Pen.
Added end property to Pen to get or set the "butt", "round", "square" - thanks Racheli Golan for the Pen suggestions.
Adjusted Slider Button to clone, so for instance, if a button is added in STYLE
Adjusted Stepper Label to be set to 0,0
otherwise Label STYLE might cause centering to break as container size is not set
Added Lazy Group to STYLE - see above.
Added F,S,W,H variables to ZIM SHIM template.
Added a,b,c,d parameters to zimify() to be able to add bounds
and in Animate, if zimify() is on MovieClip, the container is also zimified with bounds of W and H
and brought up to the top()
Adjusted ZIM SHIM FLA to include the new zimify().
Also fixed main ZIM FLA to have a proper circle MovieClip - it had been reverted to just a shape
Made label and startChecked for CheckBox into ZIM VEE values - so can set these in Tile for instance
Adjusted Sprite so clone() will clone the sprite to the same frame number as well. BREAK
Added setText(text) and clearText() methods to Keyboard - thanks Karel Rosseel for the suggestion.
Added immediateValue(value) method to ProportionDamp() that makes convert go directly to value based on value.
Note that there is still the immediate(input) that makes convert go directly to value based on input.
Adjusted Sprite to receive strings for the image and json parameters - these still must be preloaded.
Added a scaleDimensions parameter to the ZIM Rectangle() that defaults to true.
If set to false, when using width, height, widthOnly, heightOnly or siz(),
the shape will be redrawn rather than scaled - so corner and border will remain unscaled.
Warning - the registration point remains the same so may need to adjust to keep centered, etc.
Thanks Timar Ivo Batis for the prompting.
See https://zimjs.com/test4/rect.html
Added a parameter called inside to the end of hitTestCircle() and hitTestRect()
this will test if the circle or rectangle is completely inside the shape
or rather the points around the circle or the rectangle are all within the shape.
Fixed ZIM ZIM 01 physics to properly declare speedLock - updated this example https://zimjs.com/explore/follow.html
Added openAtLevel(level) and openAtId(idNum) to List() and a tree property for accordion type list
These methods will open the list at a desired level or at an id number.
Also fixed up the open property of the hierarchy to use openAtLevel(10000) - thanks Yanwenge.
Adjusted height of List pulldown to use height parameter if provided.
Fixed list so removeFrom() will pop list to top if the tab height is now less than the list height.
The data property of the tree property can be opened in the console (F12) to find the ids
and the ids can be expanded to see more ids - this lets the accordion be opened to a specific item.
Added otherSwiper parameter to Swiper() that allows two swipers (horizontal and vertical)
to only do one swiper at a time depending on which direction has the largest change - thanks Yanwenge for the idea
Fixed Arrow() to remove roll color when still pressing but arrow is disabled
ZIM animate() has a pauseOnBlur parameter but it was not working when setting to false.
This has been patched now in ZIM ZIM 01 so that if pauseOnBlur for animate() is set to false,
then all animations will no longer pause when the tab loses focus. If set to true then all will pauseOnBlur
The default is true. We will look into individual settings for each animation in the future - thanks Marva and Nguyen Biem.
ZIM Wiggle() has been fixed to handle target.futureRate rather than target.rate - which was changed a while back.
Pane() and ColorPicker() now no longer need show() - center(), centerReg(), pos(), loc(), addTo() can be used. Thanks Karel Rosseel for the prompting.
Adjusted ZIM Pixel() and therefore ColorPicker() to dispose() properly
by putting the clone() of Bitmap() onto the prototype so it can be called from the subclass - thanks Pettis Brandon for the report.
Also found that two dropper events were left on due to .on() typo rather than .off() in dispose.
Also fixed ColorPicker() not to cache unless a dropperTarget is provided - that was a logical issue - thanks again Pettis for the catch.
MotionController() now dispatches "moving" when keys or game controllers are used with damping of 1 (no damping) - thanks Pettis Brandon for the report.
ZIM animate with flip has been brought back working when animation is paused and percentComplete being controlled by slider or dragging, etc.
flip and flipVertical have been reworked a little - very complicated code but seems to now be working for animating along a path and with Beads, etc.
Blob and Squiggle clone() and anywhere they were remade like setting points or making interactive now captures scale, rotation and reg changes on points
Fixed SVG() for SVGContainer mode - was not looping backwards when transferring SVGContainer results to the SVG Container
Moved ZIM Scrambler() in Docs to CONTROLS after Book() as it operates on existing objects - like Tile, etc.
Pic() has file, src and image properties and when catching the assetLoad event, the e.asset will have these too
Fixed a glitch when file, src and image properties were being applied to asset that was a font and gave error - thanks Ami Hanya for report.
Aud() and SVG will have file and src and item. file is the filename and src is the path and filename provided - item is the CreateJS item
Made Sprite() work with new Pic() - Sprite was expecing image to be a bitmap so if image.bitmap
like when using new Pic() then it uses the image.bitmap - still not working with lazy loaded image.
Fixed Button to show downColor - conditional issue.
Added a colorOnly property to Label - as color will change the rollColor if these two were the same
well, button down was changing the color to the rollColor making them the same and and conflicting
so adjusted button down color to use colorOnly and it fixed the issue - very difficult bug
Fixed icon issue in Button() had a typo "Icon" rather than "icon" - thanks Karel Rosseel for the report.
Fixed Button() on mobile to go to up state from a down state when released. Thanks Pettis Brandon.
Fixed GradientColor() to work properly if stops provided but no angle or x,y - simple conditional issue.
20. CreateJS 1.3.4
Patched CreateJS 1.3.4 to use {willReadFrequently:true} in the getContext("2d") calls
that result in getImageData() - so hitTests and filters
Added willReadFrequently parameter to CreateJS cache()
that sets the context2D on BitmapCache - added this parameter to ZIM cache() as well
This will avoid the Chrome warning and theoretically see performance improvement
We did notice a 5 fps increase in 1000 blurred circles.
Thanks Ami, Joseph, Ferudun, et al. for the prompting and testing.
We will run our ZIM version of CreateJS for a while and then patch the CreateJS GitHub if all goes well.
The version has a flag up top - createjs.willReadFrequently that is set to true.
You can set this to false to compare the difference.
The ZIM changes are hardcoded so you would have to go back to ZIM ZIM 00 to test.
Added a bunch of methods to CreateJS Point and made ZIM Point extend a CreateJS Point.
Thanks nycjoseph - check out the docs at https://zimjs.com/docs.html?item=Point
21. ZIM SHIM AND ADOBE ANIMATE TUTORIALS
https://zimjs.com/animate
We have created a series of 30 ZIM Tutorials for Adobe Animate.
And updated the ZIM SHIM in a variety of places...
including a new zimshim_cjs that points to the CDN version of our createjs.js
This works better with ZIM List as the Adobe version seems to scroll the list to start.
ZIM version ZIM 00 - added 5K - April 11, 2022 - PATCHES
0. PIC, VID, AUD, SVG CLASSES
https://zimjs.com/zim/assets.html
The asset process is now wrapped with Pic(), Vid(), Aud() and SVG() classes.
It is still recommended to preload assets in the Frame() or in loadAssets().
asset() will work as always but now there are additional ways to access asset().
The asset system was somewhat inherited from CreateJS to simplify their PreloadJS manifest structure.
In ZIM CAT 00, we introduced auto-loading (lazy-loading) of images and then in ZIM CAT 04 of sounds.
In ZIM ZIM 00, we provide wrappers for these and new video and SVG wrappers too!
HOW IT WORKS
Pic(), Vid(), Aud() and SVG() are ZIM Container objects (except Aud) with types of "Pic", "Vid", "Aud" and "SVG".
** Their parameters use ZIM DUO and ZIM OCT style - the file parameters accept ZIM VEE.
The classes are used as follows:
new Pic(file).center();
new Vid(file).center().play(); // must interact with app first
new Aud(file).play(); // must interact with app first
new SVG(file).center();
Pic() will call asset() and if the asset was preloaded will add the resulting Bitmap to its container.
If the asset was not preloaded, Pic() will lazy-load and transfer the resulting Bitmap to its container.
In both cases, the bitmap (if needed) is available as its bitmap property.
new Pic() will always clone the original asset this will be easier to remember and more intuitive.
Cloning lazy-loaded Pic objects now works without needing to wait for a complete event.
Also, Pic() will provide a "ready" and "complete" event when loaded.
Lazy-loading works with many methods such as center(), centerReg(), scaleTo() and pos()
BUT... there are certain things such as Tile() and Scroller() that will warn they need dimensions to be set
Dimesions will be available when preloading using the Frame assets parameter or loadAssets()
or if a width and height is provided to the Pic() parameters
or after the object's "ready" or "complete" event is dispatched.
ZIM has also added a keyOut(color, tolerance) - see the CHROMA KEY section (thanks Karel Rosseel for suggestion)
PATH = "assets/";
new Pic("examples.jpg") // lazy-load the picture from assets/ folder
.scaleTo() // Fill the stage with the picture (more options too)
.center();
Vid() is new and will automatically create and HTML video tag and a source tag (display:none)
and then handle the HTML events and dispatch a "ready" event.
Vid() also wraps the play() and pause() methods and provides duration, currentTime and volume properties
ZIM has also added a keyOut(color, tolerance) - see the CHROMA KEY section.
Note: the app must be interacted with before the video can be played (same as sound).
Vid() has a source property to the HTML video tag and a bitmap property to the ZIM Bitmap.
const video = new Vid("video.mp4")
.cur()
.center();
// init gets called when pane is closed
const pane = new Pane(600,200,"VIDEO ON CANVAS!").show(init);
function init() {
video
.keyOut("#01b03f", .2) // key out the green
.play();
video.on("mousedown", () => {
// note videoPaused property
// not paused (which is for animation)
video.pause(!video.videoPaused);
});
}
Aud() is similar to Pic where it calls asset() which loads from preloaded or lazy-loaded sounds
but default play() parameters have been made available on the main class.
These include file, volume, loop, loopCount, pan, offset, interrupt, maxNum.
Setting a volume of .5 will affect audSound.play() unless a volume is provide in play().
maxNum has been made easier to deal with - it now is a parameter on the Frame(), loadAssets() and asset()
and we provide a parameter right on each Aud() object.
maxNum specifies how many copies of a sound can play at the same time.
interrupt specifies primarily whether to let the first sound play or start it over again.
Sound can only be played after the user interacts with the app.
The result of the play() method works like before to pause the sound, dynamically adjust volume, etc.
and to capture events like complete and loop.
SVG() wraps either the existing svgToBitmap() or the SVGContainer() depending on parameters.
An SVG file or a tag can be passed in and will be available as the svg property.
The default svgToBitmap works flawlessly as far as we know but results in a Bitmap.
Basic SVG should work for an SVGContainer, but CSS styles will not (let us know if things are missing).
The advantage of an SVGContainer is that the parts can be transformed or controlled with Beziers.
Note: alternatively, an SVG path can be passed directly to a Blob or Squiggle to:
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
Note: SVG can now be lazy-loaded into asset() without preloading - it will become a container with a bitmap inside.
this was added to allow SVG() to work.
ZIM has also added a keyOut(color, tolerance) - see the CHROMA KEY section.
*** ALERT ***
It is still optimal to preload in Frame() or loadAssets() first and then use Pic() and Aud().
In doing so, the loading is batched and all dimensions are known before usage.
This avoids double calls to scaling and positioning.
1. ES6 MODULES
https://zimjs.com/es6.html#MODULES
https://zimjs.com/es6/zim_module.html
ZIM has now moved to ES6 Modules as the default way to load ZIM.
The ZIM Crystal scripts have been replaced with modules.
The scripts can still be loaded with conventional script tags:
https://zimjs.com/script.html
The Code page shows modules to start but has a link to toggle to scripts.
The CDN lists ZIM under cdn/00/ - these will increase to cdn/01/, etc.
The module scripts are as follows:
https://zimjs.org/cdn/00/zim.js
https://zimjs.org/cdn/00/zim_game.js
https://zimjs.org/cdn/00/zim_physics.js
https://zimjs.org/cdn/00/zim_socket.js (must import socket.io in script tag)
https://zimjs.org/cdn/00/zim_three.js
https://zimjs.org/cdn/00/zim_cam.js
https://zimjs.org/cdn/00/zim_pizzazz.js
https://zimjs.org/cdn/00/zim_test.js (calls docs for readable errors)
These all call ZIM and the latest CreateJS.
There are also the following independent modules:
https://zimjs.org/cdn/1.3.4/createjs_module.js
https://zimjs.org/cdn/1.3.4/createjs_doc_module.js
https://zimjs.org/cdn/00/zim_module.js (CreateJS independent)
Use zns=true in an earlier script tag to force the ZIM namespace
// to use an ES6 module the module file must be on a server
// use a script tag with type=module
// and import the desired module
// Note: this is the only script tag needed
<script type=module>
import zim from "https://zimjs.org/cdn/00/zim";
const frame = new Frame(FIT, 1024, 768, light, dark);
frame.on("ready", ()=>{
const stage = frame.stage;
const stageW = frame.stageW;
const stageH = frame.stageH;
new Circle(100, red).center().drag();
stage.update();
});
</script>
Renamed the Socket file to socket.js (was zimsocket.js)
Made a code page for modules at https://zimjs.com/es6.html
Made a mini-site for modules at https://zimjs.com/es6/zim_module.html
2. PIXEL
https://zimjs.com/zim/pixel.html
https://zimjs.com/zim/pixel2.html
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 procedure 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.
// pixelate a Circle
var circle = new Pixel(new Circle(200,red)).center().drag();
// emit pixels
frame.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();
3. SITE
The ZIM Site has an updated header and footer on all pages.
This header features generative art banner made with ZIM
There is a Dr Abstract signature at the right which links through to a synops.
The synops is a synopsis of Dr Abstract's career of creations
We hope that you enjoy the video - you are welcome to give it a thumbs up on YouTube!
Beneath the banner is a main link bar that is now present on all pages.
This includes the ZIM Docs and Updates pages.
A couple exceptions, ZIM Skool, ZIM Ten, ZIM Cat pages retain the ZIM TEN look.
The Map page has been updated with recent updates.
The Code Page has been updated to the new template with modules.
A toggle link has been added to the template to go to the scripts version.
4. COLOR PICKER SPECTRUM
https://zimjs.com/zim/chromakey.html
The ColorPicker has been redesigned to default to a colors value of "spectrum".
Setting this to "legacy" will revert back to the traditional 256 colors or
setting this to an array of colors will revert back to how the Picker worked previously too.
The "spectrum" setting will use a color gradient spectrum with a color dropper.
By default the dropper works on the spectrum.
Set dropperTarget parameter to a DisplayObject such as the stage to make the dropper work on that object.
The dropperTarget property can be changed to updated where the dropper will work.
var picker = new ColorPicker({
dropperTarget:pic,
// spectrumCollapse:false,
// spectrumClose:false,
// spectrumMode:false,
// spectrumOk:false,
alphaPicker:false
});
ColorPicker Events have been adjusted: BREAK
Previously, there was a "set" event and only a "change" event if the OK button was pressed (or no OK button).
Now, there is an "ok" event for the button and a "change" event whenever a color is picked.
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.
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.
5. CHROMA KEY
https://zimjs.com/zim/chromakey.html
ZIM Bitmap has a new keyOut(color, tolerance) method to key out color
the tolerance is 0-1 with .1 being the default.
Thanks Karel Rosseel for the suggestion.
color and tolerance can be arrays for keying out multiple colors
see https://zimjs.com/zim/camkey2.html
asset("pic.jpg").center().keyOut(red); // take ZIM red color out
// also available on Pic, Vid, SVG and Cam
new Pic("pic.jpg").center().keyOut("#aacc00");
6. ESLINT - IMPROVEMENT
This is one of those large behind-the-scene changes - you do not need to read all these ;-).
We used ESLINT on ZIM to make sure ES6 export/import will work without fail on all classes
This caught about 1000 redefined and unused variables and a few other things such as:
loop was changed to zim.loop in Squiggle, Blob, LabelLetters
zob() and any other place where hasOwnProperty or isPrototypeOf was called is now called on the Object.prototype
functions were moved to outside conditionals in the SVGContainer, Label, LabelLetters
Label was changed to zim.Label in LabelLetters
TextInput was referencing a Rectangle rather than a zim.Rectangle
Slider and Dial refered to Label rather than zim.Label and Container not zim.Container
EmojiPicker had a Rectangle rather than zim.Rectangle
TextEditor used a Shape rather than zim.Shape
KeyBoard had a Label rather than a zim.Label
Arrow was missing a zim on clear
Adjusted Radialcolor for Layout Background - was using GradientColor
ShadowEffect had black rather than zim.Black
Default multipliers on ColorEffect were wrong
Book used a Rectangle and a Shape rather than a zim.Rectangle
and a zim.Shape and black rather than zim.black and dist rather than zim.dist, Point rather than zim.Point
and constrain rather than zim.constrain and Ticker rather than zim.Ticker and timeout rather than zim.timeout
and DEG rather than zim.DEG
GIF was using Ticker rather than zim.Ticker
Interesting case with applying this before ZIM DUO call - needed to use that - see Container.clone()
7. COLORS REMOVED ON FRAME OBJECT
ZIM colors are no longer available on the Frame object.
Way back in ZIM HEP (7.3.0), these were added to global or on the zim namespace if zns=true is set.
// for instance
const frame = new Frame();
frame.on("ready", () {
new Circle(100,frame.red).center(); // NO LONGER WORKS (or be black)
// use
new Circle(100,red).center(); // or new Circle(100, zim.red);
});
8. PHYSICS SPEED
Added speed and speedY properties to phsyics objects controlled by control()
This is good for different levels in games
Note: speed will adjust both x and y speed if the speedY parameter is null for control()
but if the speedY property is then set, speed would only adjust the speed x.
const physics = new Physics({gravity:0})
const colors = series(dark,grey,tin,silver,white)
const circle = new Circle(50,black,darker)
.center()
.addPhysics()
.control(null,5);
// increase speed every 2 seconds (5 times)
interval(2, () => {
circle.color = colors();
circle.speed += 10;
}, 5);
9. WINDOW OPTIMIZE - IMPROVEMENT
Added code to hide (visible false) an object in the window that does not have bounds hitting the stage
This greatly improves Windows with lots of content - thanks Ami Hanya and team for the suggestion.
This checks for objects directly in content and then objects one level deep inside those objects.
The feature can be turned off by setting the new optimize parameter or the optimize property to false.
BREAK - an optimize parameter has been added to Window and List - just before style near the end of the parameters.
These are true by default.
Also, inserted (BREAK) an index parameter into Window.add() after the object and before the center parameter
and made this method accept ZIM DUO configuration object.
const w = new Window({scrollBarDrag:true, padding:20}).center();
// 2000 rows - works no problem now on mobile with objects not in view being visible=false
const t = new Tile(new Circle(20, red), 4, 2000, 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);
10. SINGLE TOUCH - IMPROVEMENT
Added a singleTouch parameter to the end of the Frame() parameters
and to the end of the drag() method - both these default to false.
Setting singleTouch to true will force single touch on the stage - or on a specific drag.
Frame is touch:true by default and this will default to multitouch.
Setting touch:false, will turn off touch on mobile which is good to do for performance if not needed.
Setting singleTouch:true will override the touch setting and make touch:true but single touch.
Changed the Scrambler() to use singleTouch on drag and adjusted other code to ensure single touch on Scrambler.
Added touch and singleTouch parameters to Stage() and StageGL().
const frame = new Frame({singleTouch:true}); // a single touch full frame
// or with default Frame settings
new Circle().drag({singleTouch:true}); // single touch drag on circle
11. SENSORS ASK - IMPROVEMENT
Added a SensorsAsk class to the Frame module that asks if sensors are allowed for iOS.
This is for deviceorientation and devicemotion events for tilt and shake, etc.
It calls a callback function with a true or false depending on if sensors are available
If on iOS it asks but on Android or desktop it calls the callback right away
with false for desktop and most likely true for Android - but some devices do not seem to have the events
like Galaxy Tab 2 for some reason.
// in Frame(), sensors:true is set
new SensorAsk(runApp, "deviceorientation");
function runApp(allowed) {
if (allowed) lab.text = "sensor allowed";
else lab.text = "sensor not allowed";
stage.update();
if (allowed) {
const label = new Label({text:"", align:CENTER}).centerReg();
frame.on("deviceorientation", function(e) {
label.text = decimals(e.rotation.x) +","+ decimals(e.rotation.y) +","+ decimals(e.rotation.z);
stage.update();
});
}
}
12. PATCHES
Fixed List addAt() and removeAt() to handle optimize changes - apparently, visible:false objects are not counted in Container bounds calculations
And optimized List hides objects not in view - so additions were not being calculated properly - fixed now, thanks Ami Hanya for the report
Fixed droppertTarget bug where width was being used instead of height - thanks Pettis Brandon for the report.
Adjusted BitmapColor() to accept a loaded Pic() - so either preload or use the complete event before using the Pic in a BitmapColor - thanks Karel Rosseel for request.
Fixed Frame when loading from two different paths, both virtual urls (starting with /) thanks Pettis Brandon for the alert.
Adjusted ColorPicker with dropTarget so it works properly when dropTarget has registration point other than top left corner - thanks Pettis Brandon for the find.
Fixed Label with outline to keep proper outline when label size is adjusted (and a couple other properties changed) - thanks Marva for the report.
Fixed ES6 game module to work with Dialog() was missing a var
Added TextInput to Accessibility - thanks Pettis Brandon for the code - and for fixing the TextArea in the process - very helpful.
Fixed Physics so when removePhysics() and addPhysics() is used to add again the dynamic property is maintained rather than attempted to remake - thanks Ami Hanya .
Fixed TextInput and TextArea so when a new Frame is used it pays attention to the new frame when adding spacebar, etc. for the text fields - thanks Ami Hanya.
Added "other" as a type value for Loader() - in theory, this will help handle loading mp3 for instance - thanks Ami Hanya for the suggestion .
Fixed typo in SVG from state.update to stage.update
Adjusted TextArea to have a stagemousedown event to dispatch a blur event when pressing on the stage off the TextArea - thanks Ami Hanya for report.
Added a keyEnabled parameter at the end of the List to be able to turn off autofocus on tabs in List - thanks Ami Hanya for the find.
Fixed StageGL to include the touch parameter
Added channel parameter to SoundWave() to be able to handle stereo channels independently
Will output only that channel as sound so to do both channels independently use two SoundWave() objects - one with channel:0 and one with channel:1.
Added colSize and rowSize to EmojiPicker() at end of parameters - will move to after size in next version - thanks Ami Hanya for suggestion.
Fixed List and Window to work with new optimize feature when there are no scrollbars - thanks Ami Hanya for the report.
The testContent() was only being called in the scrollbar code.
Took the toggle() out of the run() method for ProgressBar() if it is needed then manually toggle() before run();
toggle() is centering in Container - which is not always desired... perhaps rethink this in future.
Fixed CheckBox label position for RTL setting - thanks Racheli Golan for report.
Added a replacement parameter to keyOut() methods on Bitmap, Pic, SVG, CAM, etc.
This replaces the keyed out color with a the replacement color
or an optional array of replacement colors if an array of colors was provided - thanks Karel Rosseel for the suggestion.
Adjusted Button() to show the icon immediately when setIcon("icon") is used - thanks Ami Hanya for the find.
Also fixed Button() when backing is set to null with setBacking() so that there are no rollover errors.
IMPROVEMENT - Tag(), TextArea() and Loader() now call a new ZIM function called browserZoom() which will get the relative browser zoom.
https://zimjs.com/docs.html?item=browserZoom - thanks Ami and others for the patience over the years as we have worked this out.
Hopefully this is a solution for aligning and scaling HTML tags to the Canvas as the user changes the zoom of their browser.
Fixed Tag() and TextArea() to animate alpha - thanks Nguyen Biem for the report.
Fixed Bitmap() clone() - we adjusted how the image was processed
and it was cloning an adjusted image rather than the original - thanks EZ for the catch.
Added this.hiddenInput.style.touchAction = "none"; to TextInput
so that Android does not try and zoom in on the hidden HTML input field - thanks EZZ Flash for the solution.
Made Tag() and Loader() work like TextArea() by nesting the HTML tag in the holder tag if in tag scaling mode
thanks Ami Hanya and and Stefan for the suggestion - IMPROVEMENT
Added a video.source.setAttribute("crossorigin","anonymous"); to Vid() to help with CORS issues - thanks Ami Hanya for solution
This may not load all videos but should help when the video has CORS setting of Access-Control-Allow-Origin "*" on its server
Added a percentComplete parameter to Scroller - see https://zimjs.com/test3/scroller.html - thanks EZ
Adjusted SoundWave to use navigator.mediaDevices.getUserMedia rather than navigator.getUserMedia
this makes it work on iOS as well - thanks Ami Hanya for the report
Fixed STYLE issue with TextInput to stop cursor from getting corner style
Fixed STYLE issue with transform() to stop cursor from getting corner style
Added transformshow and transformhide events to Layer
and fixed Layer issue with TransformManager - thanks yanwenge for report.
Added makePrimitive(obj) function under CODE module
this returns the object with any new String(), new Number(), new Boolean() converted to primitives.
Important when sending rarity values (that have payload) to FXHash as they do not accept object versions.
Fixed asset() when loading json and txt files
these were lost when we switched to Pic(), Vid(), Aud(), SVG() - thanks Karel Rosseel for the find.
Adjusted transform() to work with lazy loading Pic() - thanks Karel Rosseel for the find.
Fixed MotionController so mousedown outside blob boundary does not attract target - thanks yanwenge for report
added the boundary object to the mousedownIncludes of the MotionController by default
Added keyOut() to Cam()
Added tolerancePicker parameter to ColorPicker - thanks Karel Rosseel for suggestion.
Added a collapsed parameter to ColorPicker and made collapsed and expanded events work.
Added a spectrumTitle to ColorPicker (default null) to add a title label
Fixed colors:"legacy" to work properly as it was only showing greys.
Added multiple colors and tolerances to keyOut()
Added a SensorAsk() class to Frame module (see section for Sensor Ask above)
13. GENERAL
Added collapse, collapseColor and collapsed parameters to end of EmojiPicker - thanks Karel Rosseel for the prompting.
new EmojiPicker({collapse:true}).center();
Added PATH global variable for Lazy Loaded assets (assets not loaed with Frame assets parameter or loadAssets() method)
This will be automatically set to the last path parameter used in Frame() or in loadAssets()
or it can be manually set - see the Docs https://zimjs.com/docs.html?item=PATH
// EXAMPLE 1
// inside a ZIM Frame where no assets or path are provided:
asset("image.png").center(); // will look in local directory
asset("images/image.png").center(); // will look in images/ directory
PATH = "assets/";
asset("image.png").center(); // will look in assets/ directory
asset("sound.mp3").play(); // will look in assets/ directory
asset("test/image.png").center(); // will look in test/ directory
// EXAMPLE 2
// inside a ZIM Frame with assets parameter of "image.png" and path parameter of "assets/"
asset("image.png").center(); // will look in the assets/ directory
asset("other.png").center(); // will look in the assets/ directory
PATH = null;
asset("image.png").center(); // will look in assets/ directory
asset("other.png").center(); // will look in local directory
const load = frame.loadAssets("test.png", "test/");
load.on("complete", ()=>{
asset("test.png").center(); // will look in test/ directory
stage.update();
});
asset("new.png").center(); // will look in test/ directory
The Frame loadFailObj parameter is working again when loading assets.
If no loadFailObj is provided frame.makeCircles() will show - this represents a broken asset.
Set to new Container() if wanting to hide the broken image - but really, should fix the broken asset.
The asset() global function is now NOT global if zns=true (zim namespace is on)
it would be used as zim.asset() or if there is a Frame object called frame then frame.asset()
Adjusted reg() CENTER will center both regX and regY - thanks Karel Rosseel
new Rectangle().reg(CENTER).loc(100,100); // object has its registration in center
new Rectangle().reg(CENTER,DEFAULT).loc(300,100); // object has its regX at center and regY at 0
new Rectangle().reg(null,CENTER).loc(600,100); // object has its regX at 0 and regY at center
Added dispose() method for sound asset()
new Button().center().tap(() => {
const sound = asset("backing.mp3").play()
timeout(2, () => {
sound.dispose(); // destroys instance
// below would remove reference so could not play again
// asset("backing.mp3").dispose();
});
});
Added reverse and continuous parameters to Flipper and fixed manual flip() issue.
See https://zimjs.com/explore/flipper
const flipper = new Flipper({
front:page1,
back:page2,
reverse:true,
continuous:true
}).center()
Added rtl support to CheckBox and RadioButtons - thanks Racheli Golan for the request.
DIR = "rtl";
new CheckBox(30, "Hello").center().mov(0,-150); // text on left of button
new RadioButtons(30, ["Yes","No"], true).center(); // text on left of buttons
Adjusted Tile() to not clone objects that are a ZIM VEE function IMPROVEMENT.
function makeCircle() {
return new Circle().tap(e=>{e.target.removeFrom(); stage.update()});
}
new Tile(makeCircle).center(); // circles are not cloned
Added CSS transform animating support - it was there in CreateJS but we missed it in ZIM
Thanks Yanwenge for the prompting
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
});
Added delay, time and mouseClose parameters to ZIM Tip() before size BREAK
as size and the rest of the parameters match Label parameters.
STYLE = {
delay:1,
time:1,
mouseClose:false
}
new Tip("ZIM 00").show();
// 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
Added a reset() method to GIF.
const gif = new GIF("assets/animated.gif", 600, 600).center();
timeout(1, () => {
gif.reset(); // starts it from the beginning
});
Squiggle and Blob with custom points now start with approximateBounds() called IMPROVEMENT (possible BREAK)
but approximateBounds() must be called manually if object has been adjusted and new bounds are needed.
new Blob({points:[
[0,-40.7,0,0,-57.3,-76.6,41.8,-80.3,"mirror"],
[100,0,0,0,23.7,-45.4,-23.7,45.4,"mirror"],
[0,100,0,0,0,0,0,0,"mirror"],
[-100,0,0,0,21.9,48.2,-21.9,-48.2,"mirror"]
]}).center().outline(); // outline around heart
Adjusted Bitmap getColorAt() to return 0-1 for alpha rather than 0-255
Adjusted ZIM convertColor() to handle alpha properly with hex
added array value to convertColor toColorType parameter to return an array with [r,g,b,a]
Added a zimPos property to a Display Object that has pos() done to it.
This returns an object with the x,y,h,v,i (for index) use parent to get the container
see https://zimjs.com/test3/posrecord.html - thanks Ami Hanya for the request.
Fixed Slider to allow step of 0 along with useTicks - was supposed to be like Dial IMPROVEMENT
but the code for setting the step to the tickStep was left in.
Fixed Style.remember() to work without an ID.
Adjusted Pages to automatically mask pages and transition effects IMPROVEMENT.
if a ZIM Rectangle is provided as a holder for pages size smaller than the stage.
This will turn the mouse on for objects inside the rectangle too.
Adjusted Bitmap to include a scale parameter after width and height before id - BREAK
Fixed rewind on CSS animate() - was not parsing the px from start value - thanks Yan Weng
Made lazy-loading work with outline();
Adjusted STYLE to work with type:value for a main style - was conflicting with STYLE.type...
Fixed bug in Pen where drawing was off if paper was not at 0,0 - thanks Yanwenge.
14. SKOOL
Made Skool responsive.
// To come - converting exercises and content to ZIM ZIM 00 and ES6.
15. DOCS
Converted over 500 examples to ES6 in the Docs.
This was mostly converting var to const and anonymous functions to arrow functions ()=>{}
16. UPDATED
Code Page (to ES6 Modules), Patreon Post, Distill, TypeScript, NPM (13.0.1), Bubbling Videos, Templates (to ES6 and Modules),
CDN (no more Crystals), FXHash and Teia NFT templates, News, Docs, GitHub Release ZIM ZIM 00
Updated ZIM SHIM for Adobe Animate - there is a copy of ZIM SHIM for ZIM NFT available at https://zimjs.com/animate/zimshim_nft.zip
*** This has been another major update to ZIM with months of hard work.
Your support on Patreon at https://www.patreon.com/zimjs is very helpful and appreciated.
Again, if you are a student or short on cash - no worries at all!
We do ZIM to help the world be more creative and that is our reward.
ZIM NFT 01 - added 4K - January 7, 2022
1. DIALOG
https://zimjs.com/nft/bubbling/dialog.html
Added a Dialog() class to ZIM Game helper library.
This makes speech bubbles or boxes with text and arrows.
The tail can be placed around the sides or corners or set to "none"
There are four different types: "slant", "rectangle", "oval" and "poly"
Multiple sets of words can be used with arrows if desired
Updated GAME MODULE to game_2.6.js
// Dialog can be one word / sentence
// or can be multiple sets of words / sentences
const words = [
"Welcome, Creators!",
"To ZIM NFT 01",
"We have a new Dialog"
];
// This can be really simple
// or can be very customized!
new Dialog({
width:300,
height:200,
words:words,
dialogType:"rectangle",
tailType:"line",
fill:false,
size:30,
font:"impact",
color:dark,
backgroundColor:yellow,
borderColor:grey,
borderWidth:2,
corner:100,
padding:50,
tailHorizontal:RIGHT,
tailVertical:BOTTOM
}).pos(100,50,LEFT,TOP,dialogs);
2. ZIM CAM
https://zimjs.com/cam (four examples - use arrows at top left)
Added a cam.js helper module (like socket, game, physics, three, pizzazz, etc.)
This has Cam, CamMotion, CamCursor, CamAlpha and CamControls classes
to capture cam screenshots, add effects or a cursor at cam motion.
This is a recreation of the Ostrich Library made in Flash in 2009 by Dr Abstract (Dan Zen).
It has been planned to bring into ZIM since ZIM ONE! Yay, it is here and works well.
// 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() {
frame.color = yellow;
if (button.resetID) button.resetID.clear();
button.resetID = timeout(.5, () => {
frame.color = darker;
});
}
3. EMOJI
https://zimjs.com/nft/bubbling/emoji.html
https://zimjs.com/emoji
Added a ZIM Emoji class that extends a Label to show an emoji.
This could be done with a plain Label but the Emoji class makes it more apparent.
Also added a ZIM EmojiPicker to allow users to pick an emoji and make an Emoji object.
For coding, the ZIM Emoji tool is provided to get UTF strings for emojis to add to code.
Added a unicodeToUTF() function under the CODE Module to support conversions for Emoji and EmojiPicker
Thanks Karel Rosseel and Chris Spolton for the guidance.
// paste unicode emoji or UTF code into string
new Emoji("\ud83c\udf47") // grapes using UTF codes
.center()
.drag();
// make a panel of Emojis for end user:
const emojiPicker = new EmojiPicker().center(content).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
let emoji = new Emoji(emojiPicker.currentEmoji.code, 200)
.centerReg(content)
.drag();
stage.update();
});
4. ZIM CRYSTAL UPDATES
https://zimjs.com/crystal.html
Added crystals for ZIM NFT 01
and new crystal formats: zim_cam.js to add the new cam.js library
and zim_pizzazz.js - this adds pizzazz_01, 02 and 03 for backings, icons and patterns
5. BLENDMODES - IMPROVEMENT
https://zimjs.com/nft/bubbling/variety.html
Added a helper method called blendmodes() that cycles through the blendmodes - ble() - on an object
Click the object to toggle the cycling
new Rectangle(stageW, stageH, red).addTo();
new Circle(200, blue).blendmodes(); // will cycle through blend modes
6. ODDS
https://zimjs.com/nft/bubbling/variety.html
Added an odds(percent) function to the Code section.
This is the same as rand() < percent/100 but a little easier to understand
if (odds(20)) new Emitter().center(); // add an emitter 20% of the time
if (odds(20)) new Rectangle().center(); // 20% the time there will be a Rectangle
if (odds()) asset("yay.mp3").play(); // half the time play yay otherwise play boo
else asset("boo.mp3").play();
7. SEEDRANDOM - IMPROVEMENT
https://zimjs.com/nft/bubbling/variety.html
Seed the Math.random() and therefore ZIM rand() and ZIM VEE values using rand()
This allows you to repeat the random numbers for the same seed.
Handy for making specific random art, or game levels, etc.
This is the main feature of FXHash where you can find captured generative art and scenes:
Here is a Dr Abstract collectible example https://www.fxhash.xyz/generative/5810
SEEDRAND = 20;
// 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(10,100));
// and this will be the same random number between 0 and 1 not including 1.
zog(rand());
// 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);
8. RARITY, REPEATS AND PLUCK
https://zimjs.com/docs.html?item=rarity
Added a rarity() function to CODE Module to pick from weighted list
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.
const colors = rarity({blue:50, green:40, yellow:10});
zog(colors[0]); // 50% chance blue, 40% chance green, 10% chance yellow
// also has a payload option (with other features so see docs)
// 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"
Added a repeats(array, total) function in the Code Module.
This receives an array and returns the max number of repeats
Or if total is true then the total number of repeats.
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
Added a pluck(array) function in the Code Module.
This returns a random element from an array - so replaces shuffle()[0]
it is a wrapper for array[Math.floor(Math.random()*array.length)]
const colors = [orange, green, red];
zog(pluck(colors)); // orange, green or red
9. QR and ANIMATED GIF
https://zimjs.com/nft/bubbling/variety.html
https://zimjs.com/gif/
Added a QR Code helper - must import https://zimjs.org/cdn/qrcode.js
This is a library by David Shim at https://github.com/davidshimjs/qrcodejs
The ZIM Class makes a ZIM Bitmap of the QR Code - thanks Bart Libert for the suggestion
new QR("some url").sca(.5).pos(40,40,RIGHT,BOTTOM);
Added Support for Animated GIFs - must import https://zimjs.org/cdn/gifler.js
This is a library by madCreator at https://themadcreator.github.io/gifler/
new GIF("path/animated.gif", 500, 500).pos(40,40,RIGHT,BOTTOM);
Both these are in the META section of the ZIM Docs
https://zimjs.com/docs.html?item=QR
https://zimjs.com/docs.html?item=GIF
and once again, need script tags pointing to their respective js files.
10. DIR
https://zimjs.com/nft/bubbling/variety.html
Set a global DIR constant to either "ltr" or "rtl"
Use along with START and END constants
for pos(), reg(), Label(), LabelLetters(), and List()
START for horizontal position or align will be "left" if DIR is "ltr" and "right" if DIR is "rtl"
END for horizontal position or align will be "right" if DIR is "ltr" and "left" if DIR is "rtl"
Thanks Marva for the idea and Xuntar for the confirm.
11. REG
https://zimjs.com/nft/bubbling/variety.html
Added LEFT, RIGHT, CENTER, TOP, CENTER, BOTTOM and START, END to reg()
Thanks Karel Rosseel for the request!
// place reg at the bottom right corner
new Rectangle().reg(RIGHT,BOTTOM).center();
12. STYLE ONCE
https://zimjs.com/nft/bubbling/variety.html
Added a once property to STYLE
Set this to true to run the STYLE setting only once.
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.
STYLE = {color:red, once:true}
new Circle().center(); // this will be red
new Circle().center().mov(20); // this will be black
13. CONVERTCOLOR UPDATES
Adjusted the convertColor to handle 8 (and 4) character hex numbers - thanks Ami Hanya for the suggestion
where the alpha is on the right side.
Passing in an alpha parameter (or RGBA as color) and HEX as output will add alpha on the end of the hex
14. TILT
Added device motion and orientation docs entry to the Frame module (thanks Karel Rosseel)
This is similar to adding Image, Sound and Font to the Frame module
It just helps the topic be found in the docs - even though it is already described in Frame
15. FRAME TAB FOCUS/BLUR
Frame now has "tabfocus" and "tabblur" events for when tab is hidden
This is not focus on the page but rather the tab.
16. INDICATOR UPDATES
https://zimjs.com/nft/bubbling/indicator.html
Added Emoji support to Indicator indicatorType - add an Emoji and it will show them
also added backgroundAlpha as parameter for setting unselected Emoji alpha.
Added heart and star to the indicatorType of a ZIM Indicator() - thanks Karel Rosseel for suggestion
Combine these with interactive:true parameter to get an easy rating scale
Adjusted Indicator to toggle off and on last light so can set to zero lights
// lightening indicator!
new Indicator({
indicatorType:new Emoji("\u26a1\ufe0f"),
fill:true,
interactive:true
}).center();
17. COLLAPSE - IMPROVEMENT
https://zimjs.com/nft/bubbling/collapse.html
Window, List and Panel now have collapse, collapseColor and collapsed parameters - thanks Karel Rosseel for the request
Also collapseIcon and collapsed properties as well as a collapse(state) method.
BREAK - changed the name of the close icon and fullScreen icon to closeIcon and fullScreenIcon for Window
and added a fullScreen(state) method to Window
18. PANEL UPDATES
With the addition of the collapse button the Panel parameters have been rearranged to:
corner, close, closeColor, next, nextColor, extraButton, collapse, collapseColor, collapsed, align
and the arrow parameter has been called next and a nextColor added.
Added a content container and add(object, center, replace) method to Panel to help collapsed content be hidden
So this is like Window() where content can be added with add() method - and removed with removeFrom()
19. WINDOW UPDATES
In addition to the collapse functionality,
also added adjusted add(object, center, replace) to Window BREAK
Added the following events to Window
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
20. SPLINE
Added a spline function to the CODE module.
This takes points and makes a cubic curve through them - either with a Shape
or by passing the resulting points to a Squiggle or Blob as the points parameter.
Thanks https://github.com/georgedoescode
21. SERIES SHUFFLE AND RANDOM
Added two methods to series
shuffle() will shuffle the series and then keep repeating it
random() will shuffle the series each time it repeats to 0 index
22. GENERAL
Fixed Emitter on text - was flashing due to placement of alpha IMPROVEMENT
Adjusted ZIM Label in labelWidth + labelHeight mode so shiftHorizontal and shiftVertical happens once IMPROVEMENT
Fixed when toggling a button the text color is now returning to rollColor IMPROVEMENT
Made scramble() method return the scrambler object so we can chain it.
Cloning DisplayObjects were set with the following for cloning bounds: IMPROVEMENT
if ((!this.type || this.type=="Shape" || this.type=="Blob" || this.type=="Squiggle") && this._bounds) // clone the bounds
We are not sure why this limitation - there was probably a reason... but we now think all DisplayObjects should have bounds cloned
So are adjust this accordingly.
Added stickThickness parameter to Blob and Squiggle.
Added the borderWidth to titleBar of Window - seemed to be off otherwise. IMPROVEMENT
Fixed lineOrientation glitch in ZIM Connectors - thanks @chu4ng on GitHub issue. IMPROVEMENT
Added an AVE constant to represent average - and has a value of "ave" (not "average")
Made a lazy loading asset be queueOnly loading so it does not trigger the Frame complete event IMPROVEMENT
as they each have their own complete event.
Fixed arrow function code in zim reversePoints() - was messing up Distill
23. PATCHES
Adjusted the examples for AlphaEffect and tidied up the docs for the Effects in general.
Started in on ESLINT but only did the first 50 or so minor updates.
We have stored the zim_min.js file before linting as zim_min_prelint.js on the CDN if needed.
Changes were things like duplicate declarations... we traditionally declared twice in conditionals:
if (x=10) {
var a = 5;
} else {
var a = 8;
}
this causes warnings in ESLINT so we are adjusting these as well as mixed tabs and spacing issues, etc.
We will save the rest for the next version of ZIM.
We have removed the ES6 info from the Updates - it was listed as the 0. item
and will feature this as being launched with the next version of ZIM as it was incomplete until ESLINT is done.
Fixed Box2D to work under ES6 - there was a glitch in the code that caused it to try and redefine Object.defineProperty
This means the ES6 zim_physics_module is complete without calling an earlier script tag to Box2D.
Made the zim_socket_module in ES6 include the import of the zimserver_urls (internally, as zimserver_urls_module)
so just the socket.io file needs to be brought in as a script tag
Adjusted DIR to be stored properly on W (window) so it works with zns=true. Thanks Ami Hanya for the report
Fixed up ZIM Zapps mobile tool - it was bringing in Crystal which it should not do as files need to be local
so wrote a message about using individual script tags when uploading app. https://zimjs.com/zapps
Added an adjust parameter to ZIM SoundWave and a normalize parameter to calculate()
The normalize currently defaults to false but will default to true in the next version of ZIM
This allows SoundWave to calculate values between 0-1.
Adjusted rarity to store a Number() object if the key is a number and there is a payload
and to convert the key to a number primitive if key is number and there is no playload.
Adjusted loop() to convert a Number and String object to a number and string primitive before looping.
Warning... it is possible that a Number or String object might need to be cast as Number() or String() before being used.
For instance, in the FXHash features object, these must be primitives.
Fixed asset() for lazy loading to not intermitently load two images when the same id is used twice
For instance: asset("help.png").center(); asset("help.png").loc(100,100) should result in just one image at 100, 100.
It was intermittently, depending on cache showing two or one image.
Adjusted ZIM Swiper to use Frame "mouseupplus" event to capture mouse coming back from iFrame when no longer up. IMPROVEMENT
Adjusted physics.noDrag() to work with a list when there was not an initial draglist - for instance if a general physics.drag() was called.
Added ZIM DUO to physics.join()
These are patched in physics_2.1.js.
Added currentValue parameter to Stepper at end before style
Fixed animate() to work properly on calling multiple relative calls on same object when also moving object manually between IMPROVEMENT
reset the zimLastObj properties of the target - tested in general but keep watch for things like relative series, sequences, path, etc.
Fixed Scrambler when pressing up outside an iframe - used the Frame "mouseupplus" event IMPROVEMENT
There were 90 lines of patches for ZIM NFT 00 - these of course are all in ZIM NFT 01.
Added makeSyllable(lenght, firstVowel) to the CODE module - to make a syllable for generative words
Added CapitalizeFirst() function to CODE Module to capitalize the first letter of a string
Added a test to removeFrom() to removePhysics() if there is a removePhysics() method
so can removeFrom() without error on physics objects. Thanks Naythan Ragland for report.
Fixed glitch in expand() when using DUO - now works properly
Added a backingContainer to Dialog() so can cache the container and set alpha of backingContainer
otherwise the alpha will reveal the parts of the backing like the bubble and the tail - thanks Yanwenge
Added a margin to resetBounds() and made it accept DUO
so container.resetBounds({margin:10}) will recalculate bounds and add a margin of 10
but this would now be a static bounds rather than a dynamic bounds.
Made custom list work in EmojiPicker and added size parameter - thanks Karel Rosseel for the heads up.
Fixed Scrambler to provide getter setter order property to update the order dynamically. Thanks Racheli Golan
Adjusted Docs for CamMotion - added visualizerObj - thanks Karel Rosseel for the find
Added cat zim.js versions back into CDN - had accidentally filtered out when we moved to zim_min.js for NFT
Fixed ZIM ISO example https://zimjs.com/iso/ to animate with time in seconds when capturing orb
Made ZIM Arrow() have the activate() method even if not being used with Pages - also fixed grey color which had () on it
Fixed Label with height to also use valign MIDDLE - thanks Ami Hanya.
Adjusted TextInput align right to properly align text entered in parameter at the right - thanks Racheli Golan for the report.
Added a rtl parameter at the end of Bitmap cache() and adjusted CreateJS 1.3.4 BitmapCache(), define(), updateCache() and update() with rtl
Thanks Marva for the solution
24. ZIM SHIM
Reorganized ZIM SHIM folder to have just the basic example (zim) in the main folder
and four other examples in folders: (thanks Paul Ruda for the inspiration)
data - an example of loading comma delimited file into Animate with ZIM
full - like the basic example but with full screen with scaling
physics - a physics example
local - a version with CreateJS and ZIM files locally in the directory
25. DOCS
Added individual doc pages for each entry - thanks ZIMsters for the suggestion
26. SITE
Added the Emoji tool to the Tools section of the Code Page
Added Custom Library information to Code Page under Tools section next to MVC and NPM
https://zimjs.com/custom.html
This has sample templates for ES5, ES6, ES5 Full and ES6 Full
And shows how to make a class that extends a Container
and uses ZIM DUO (params or config), ZIM VEE (dynamic params) and ZIM OCT (STYLE).
Added COPY button to ZIM Asset List tool - thanks Karel Rosseel.
27. UPDATED
Examples, templates, Bubbling Videos, Code Page, CDN, GitHub, Docs, ZIM SHIM, Slack, Discord, Distill, Patreon, Blog
To come: NPM (ZIM 13.0.0), TypeScript, Site Map
ZIM NFT 00 - added 14K - August 11, 2021
1. INTERACTIVE NFTS
https://zimjs.com/nft
NFTs (Non-Fungible Tokens) are a lastest craze for Artists and Collectors
with some like Beeple and CryptoPunks selling for millions!
ZIM NFT is actually an NFT that you can collect if you are quick enough.
At the bottom of the page linked above we tell you how to collect the ZIM NFT.
ZIM can be used to make interactive NFTs
to sell as art on Web apps such as hic et nunc https://hicetnunc.xyz
Please see the NFT page for more! https://zimjs.com/nft
Incuding a guide to making NFTs, setting up a Wallet
and COLLECTING the ZIM NFT!
https://www.youtube.com/watch?v=brIWbJ8QYO8
https://www.youtube.com/watch?v=gwMdtCT3Kbo
2. ZIM CRYSTAL - IMPROVEMENT
https://zimjs.com/crystal
We now present seven single files that can be used to load ZIM Crystals.
zim.js // a crystal of createjs.js, zim_min.js
zim_game.js // a crystal of createjs.js, zim_min.js, game.js
zim_physics.js // a crystal of createjs.js, zim_min.js, box2d.js, physics.js, game.js
zim_three.js // a crystal of createjs.js, zim_min.js, three.min.js, orbitControls.js, three.js
zim_socket.js // a crystal of createjs.js, zim_min.js, socketio.js, socket.js, zimserver_urls.js
zim_distill.js // a crystal of createjs.js, a distilled.js placeholder URL
zim_test.js // a crystal of createjs.js, zim_doc.js
<script src=https://zimjs.com/cdn/nft/00/zim.js></script>
<!-- will load ZIM and CreateJS -->
The crystals are all available at the top of the CDN
All the traditional files are still available in the CDN
and can be brought in as separate script calls instead of using crystals.
ZIM Crystal just calls sets of the individual files from a single script.
The crystal scripts are made automatically and stored in each MAIN version folder
They will use the current scripts at the time the main version folder is created.
If a script within the crystal changes versions the crystal script will NOT be updated
but rather an subdirectory will be made for the new Crystal
3. TEXTINPUT - IMPROVEMENT
https://zimjs.com/explore/textinput.html
The ZIM TextInput() class provides editable text on the Canvas.
Three cheers for Cajoek who created a LabelInput that mirrors an HTML input field.
We then wrapped this in a Window to provide a scrollable TextInput box.
Now input text is a proper part of the canvas - as opposed to an overlay like ZIM TextArea.
It is a proper DisplayObject that extends from a ZIM Window and has a ZIM Label.
There is a blinker which is a ZIM Rectangle and all this can be rotated, layered, etc.
For this release, the TextInput is one line and behaves very much like an HTML input of type text.
See the docs for more features https://zimjs.com/docs.html?item=TextInput
4. NEW SQUIGGLE AND BLOB EDITS - IMPROVEMENT
https://zimjs.com/explore/pathediting.html
Added the following functions to the code module to help cut up, join, reverse and trim paths.
These are also available as methods on the Squiggle and Blob (availability depends on relevance).
reversePoints(points)
Reverses Squiggle formatted points
appendPoints(original, points, controlType)
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)
prependPoints(original, points, controlType)
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)
splitPoints(points, index, trimEnds)
Splits Squiggle points into two sets of Squiggle points
Also used by Squiggle splitPoints() and Blob makeSquiggle()
trimEndPoints(points)
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.
SQUIGGLE: gets reversePoints(), appendPoints(), prependPoints(), splitPoints(), and
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)
BLOB: gets reversePoints() and
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
5. SCALETO - BREAK
ZIM scaleTo() now defaults to FILL if no percentages are provided.
This is so we can easily set backgrounds that fill the stage:
backing.scaleTo().center(); // will now FILL the stage
// we no longer have to use backing.scaleTo({type:FILL}).center();
// to FIT 100% to the stage use:
obj.scaleTo({type:FIT}).center();
// note that the default if a percentage is applied is FIT
obj.scaleTo(stage,80,80).center();
// so this would also FIT to the stage 100%
obj.scaleTo(stage,100,100).center();
6. GENERAL
Added countDecimals(num) to Code module - to count decimals in number.
Added backgroundColor property to Window
Changed Circle percent property (not parameter) to percentage BREAK
to not conflict with animate() percent
Added blendMode:"difference", etc. to STYLE as part of the transformations
Added a "closing" event to Pane that triggers before the stage update of the closed Pane
this provides for reloading the page without closing the pane which might cause a flash
The pane now closes and dispatches the "close" event 10ms after being pressed.
Adjusted Frame to wait for its width and height to be >= 1 before triggering a ready event
This came up on hic et nunc which shows NFTs in a React component IMPROVEMENT
it seemed to start with a width and height of 0 when loading from cache.
7. GENERATOR
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(stageW, stageH, frame.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.
8. PATCHES
Adjusted convertColor() to handle 8 (or 4) character HEX color values
These have Alpha added at the right end. Thanks Ami Hanya.
In ZIM NFT 01, we will make converting from rgba to hex add the two characters for alpha - currently, NFT 00 will ignore alpha.
Fixed series() to give proper length (needed to make getter setter for some reason) - thanks Ami Hanya for report
Fixed ZIM drag() boundary on surround when using object as boundary
for example stage rather than new Boundary(0,0,stageW,stageH)
Fixed ZIM drag() on Containers with Boundary set
Was working if drag() was added after objects were in container
Now drag() waits .05 seconds for adding objects immediately after
Any subsequent adds will need individual drag() commands added
Documented it all in boundary parameter of drag
Added a immediateBoundary parameter to end of drag
that can be used to avoid .05 second delay if all objects are in container when drag added.
Added pauseOnBlur to wiggle() as last parameter
Adjusted pauseOnBlur for dynamic animations
when handling currently paused animations the pauseOnBlur for dynamic animations were not unpausing
Made TextInput use provided font for the placeholder text - thanks Ami Hanya.
Also applied shiftVertical and shiftHorizontal to placeholder text and to selection and cursor.
Added odds() function in Code module - will officially announce next version of ZIM.
Fixed Book when not positioned at 0,0 - we missed using globalToLocal in the drag code.
Added support for wrapping Chinese characters to CreateJS 1.3.4 - thanks Yanwenge and
solution here: https://littleshell-multimedia.blogspot.com/2017/04/createjs-textfield-cjk-text-wrapping.html
Added an exact parameter at the end of Tile before style (and swapped group and style)
this will clone an exact copy of an object rather than use its ZIM VEE pick values.
Added inputType parameter to TextInput (at end before style)
this has values of "text", "number", "email", "password"
and will replace password (and number) parameters in the ZIM NFT 01. Thanks Ami Hanya for the prompting
Did some work in Frame loadAssets() to not wait if loading returns an empty rawResult which means it is not there
A console error is still shown (from inside CreateJS) but ZIM dispatches an "error" event and continues to complete
NOTE that if the assets are loaded in the Frame then the error event must be captured outside the ready event
and if loadAssets() is used then the error event must be captured outside the complete event.
Adjusted wiggle() to transfer the target rate property from one animation to another.
Fixed ZIM animate with Beads to allow auto sequence again when animating beads - was broken in ZIM Cat 04.
Fixed ZIM Scrambler so if two scramblers are animating at the same time the second does not cancel the first
needed to apply a random animate id to every scrambler.
Added number:true parameter to TextInput that accepts only numbers - thanks Ami Hanya for suggestion.
Added a "contextmenu" event to Frame - see https://zimjs.com/explore/contextmenu.html - thanks Ami Hanya for suggestion.
Fixed animate() in series so last animation call works - thanks Chris Spolton for the report.
Added partial support for CENTER value for align of TextInput. Thanks Karel Rosseel for the prompting.
This also adds a maxLength that should approximately match the width of the input field.
Adjusted Label so it does not automatically set width to lineWidth if there is a lineHeight
This was causing scaling to break if a word was wider than the lineWidth - thanks Racheli Galan for the report.
Also properly centered the text in this case.
Added the shiftHorizontal and shiftVertical to this case as well.
Added borderColor to styles that can be set in List secondary hierarchy...
Added pulldownToggle parameter to end of List before style parameter
Set this to true to close the pulldown when selecting or pressing off pulldown.
Added "bloom", "expanded" and "contracted" events to List for accordian or pulldown functions.
These get an event object with item or items properties of the expended items - nothing for contracted.
Also added simple pulldown example to Docs for List.
Fixed ZIM List for pulldown with items not having labels - thanks yanwenge for the report.
Fixed accent on Dial when not in linear mode - was shifted 90 degrees as it was primarilay made for sound setting.
ZIM Container(a,b,c,d) has been updated to fix a glitch when providing only the a parameter
which was supposed to provide a square container with a as its width and height.
This was overwritten when we allowed a ZIM Boundary object to be the first parameter.
This has been fixed so if a has an x property it will assume a boundary object otherwise it will make a square.
We have also re-written the Container parameters in the Docs to be more clear on the options
Thank you Yingbing Jiang for the report.
Removed a notice about audio context being ready in CreateJS 1.3.4 - it was left in there from debugging.
Added a 10 ms delay to stage update on pane.show() so .mov() or .loc() can be used to reposition without a flash
Added reset to color and rotation for emitter particles when using the pool (default)
This makes color and rotation animation reset to the original as a new particles is created
Changed life parameter in Emitter to be a ZIM VEE value - thanks Chris Spolton for these suggestions
Also thanks Chris for pointing out clone was not cloning effects - we cloned the filters but needed to cache the cloned object for them to be seen
Added getMinMax() static method to ZIM Pick() to find min max range of ZIM VEE value (with numbers and not a function)
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
Added arrayMinMax(arr) function to code module to return {min, max} object for array
Fixed emitter for freeze on pause and for clearPool method
These were looping through the object rather than the object's particles
ever since ZIM 9.5.0 when particles were adjusted to be placed in a particles container.
Fixed Stepper to step numerically when min set - weird bug with thinking number was string despite min and max being set to Number()
And made currentValue report a Number when asked and Stepper is set to "number" (the default)
Patched Generator() to add output and outputType parameter to export to images (see section above)
Fixed ZIM TextInput to properly add() the placeholder to the window rather than addTo() when TextInput starts with text
Backed out of change to ZIM Synth that was added in ZIM Cat 04
to set volume of tone() if stop() is called right away on it - the fix was causing problems playing sound
so if you want to stop a tone right away, do not make the tone until you want to play it.
Please note - Yanwenge who reported the initial volume issue.
Added mouseChildren=false to Scrambler tile elements - thanks Netanela for the report
This allows Containers that are scrambled to work properly.
(could possibly make each element drag({all:true}) and leave mouseChildren on
in case interactivity inside tile item is needed - but there are complicated delays
If anyone needs this, let us know and we can probably adjust)
made literal version of series recursive
which was tricky because Pick.choose() was processing noPick coming back from recursive literal
adjusted ble() to update() Blob and Squiggle so blendMode gets applied immediately (bug since ZIM 6)
Added noSwipe() to Slider by default so they do not slide pages
Note that there were 77 patches to ZIM Cat 04 - all of which have improved ZIM NFT.
9. ZIM HELPER MODULES
ZIM game module has been updated to 2.5
the registration point on the Scorer and Timer for isometric RIGHT has been set to the center (thanks Karel Rosseel)
Patched ZIM physics_2.2.js to make gravity a get/set property - was just a get property.
10. ZIM DOCS - IMPROVEMENT
Added link to EXPAND button so specific docs link can be copied with right click or long click on mobile (thanks Karel Rosseel)
Updated dozens of docs examples to latest ZIM practice
Thanks Karel Rosseel for close to 50 refinements -if anyone else sees things, please report.
Added examples and descriptions for Pizzazz 4 - paths
Added search proxies - so searching visible will find vis, etc.
Added base methods to ZIM Docs - these are mostly CreateJS DisplayObject methods
cache(), updateCache(), uncache(), on(), off(), removeAllEventListeners(), getBounds(), setBounds(), clone(), dispose()
Added filter for Docs search to ignore text inside wrong answers when they come first
for instance, searching for ble for blendMode would find Scrambler first - now it does not
If YOU find a wrong answer like this, please let us know and we can add it to the filter
Make sure you are at the TOP when you do your search. Cheers.
Added videos links for:
CAT: "Book", "effect", "updateEffects", "noEffect", "BlurEffect", "GlowEffect", "ShadowEffect",
"ColorEffect", "MultiEffect", "AlphaEffect", "zimEase", "zimEase"
HELPER: "PIZZAZZ 4 makePath"
11. ZIM SITE - IMPROVEMENT
Added 40 examples to Examples including Feature, NFTS (new!), Collection, CodePen and Magical.
Updated the NEWS and ABOUT to ZIM NFT
Added NFT and Crystal pages and links on the CODE page.
Added TIPS to top of Bits View Code pages - and changed copyright to ZIM (left 2016 as that is when they were made)
Changed the favicon to latest ZIM icon stem.
12. ZIM KIDS - IMPROVEMENT
Made major updates to ZIM Kids Slate editor. Thanks Karel Rosseel for the prompting.
Added over 600 Backing, Nature, People and Things images and Sounds
These can be checkmarked and then automatically used in slate as asset("name")
Included a six level expandable help section to describe how to use assets.
Added STORE functionality to store code while trying other code then retreive the code.
Organized and provide DEMO code for Slate.
Added Physics option to SLATE and sounds to the assets.
Added Pizzazz 01, 02, 03 automatically to Slate.
Made updating Docs also update Spells so two stay in sync.
13. ZIM DOCTOR
https://zimjs.com/doctor
Changed name of Docs customize page to Doctor in a ZIM Tool format.
This lets you paste ZIM Code and get a docs link that features commands in the code.
Added this as a tool to the Code page.
14. MEDIUM
Published stories on using ZIM for Interactive Art and NFTs
https://javascript.plainenglish.io/an-invite-for-generative-art-makers-and-interactive-artists-106f3ed186ab
https://levelup.gitconnected.com/making-interactive-nfts-4a50a8f8feb3
15. UPDATED
Code Page, CDN, GitHub, Docs, ZIM SHIM, NPM (ZIM 12.0.0 and CreateJS 1.3.4), TypeScript, Slack, Discord, Explore on NFTs, Templates, Distill, Bubbling Videos, Patreon, Blog
ZIM Cat 04 (Diamond) - added 10K - April 7, 2021
1. ZIM EASE - IMPROVEMENT
https://zimjs.com/ease
https://zimjs.com/cat/easeexamples.html
Customize the easing equation with sliders
and pass results into ZIM animate()
Looks like this:
// inside a ZIM animate() - made with graph from link above
ease:zimEase([1.746,0.4,-0.91,0.8])
// also added "snap", "ballistic" and "slowmo" eases
// with In, Out and InOut settings - see examples link
ease:"snapOut"
2. ZAPPS TOOL
https://zimjs.com/zapps.html
Made a tool to create and zip the files for a PWA (Progressive Web App)
This looks like Distill, Wonder and AssetTool (which have been slightly modernized).
This was quite a large undertaking and we hope it turned out well.
The system takes the place of 70 steps to make mobile apps using GitHub, PhoneGapBuild, signing keys, etc.
Added a PWA() class in ZIM that the tool will insert (or can be done manually)
This is used to make a custom message when on mobile browser to add to mobile home screen (A2HS)
This code will be inserted into zapps.html by the tool:
frame.on("ready", function() {
new PWA(runZapp);
function runZapp() {
// normal template...
var stage = frame.stage;
var stageW = frame.width;
var stageH = frame.height;
// your code
} // end runZapp
}); // end of ready
The system creates the following files:
manifest.json
serviceworker.js
libraries/ directory with local zim and createjs files
icons/ directory with icons
zapp.html with file calls and meta tags (and PWA call)
readme.txt - with instructions to replace index with zapp.html code
The code page has been updated to feature the tool (see Code Page updates)
3. ZAPPS vs ZAP
We know that we already have a ZIM Zap tool down in the gold bars
this is for sharing files and will remain as is.
We will refer to the new Zapps tool in the plural.
Zapps is what we would like to call projects made with ZIM
You are welcome to call your projects Zapps too - or a Zapp (singular)
It is Z for ZIM and apps for apps - but Zapps also sound really fast!
And that is a great thing about ZIM - we can make apps fast! Zapps!
4. SVG ASSETS
https://zimjs.com/cat/svg.html
SVG is now automatically converted to a Bitmap
when passed into the Frame assets parameter
or frame.loadAssets() assets parameter.
const frame = new Frame({assets:"pic.svg"});
frame.on("ready", ()=>{
asset("pic.svg").center(); // etc.
// the actual SVG is stored in the svg property
zog(asset("pic.svg").svg);
// the SVGContainer has been adjusted to parse this properly
new SVGContainer(asset("pic.svg")).center(); // will still work
frame.stage.update();
});
Thanks carddealer for the prompting
The SVGContainer is still considered experimental and may not accept all SVG
But a while back, it was improved to handle arcs properly.
Added width and height parameters to svgToBitmap()
Added params parameter to svgToBitmap to pass object through to callback after bitmap param
used internally by Frame to handle SVG images
5. TIMECHECK
TIMECHECK now defaults to false.
Set it to true if converting older code - to make sure that your times are good.
6. MOBILE FPS
Default FPS for mobile has been changed to 60fps from 30fps now that most devices are more powerful
this can be set back with Ticker.setFPS(30,60); for 30 on mobile and 60 on desktop.
7. KIDS
https://zimjs.com/slate
Added Phone and Portrait CheckBoxes to ZIM Kids - thanks Karel Rosseel for the idea
8. KEYBOARD LAYOUTS - IMPROVEMENT
https://zimjs.com/cat/keyboard.html
Added layout parameter (at end) with "arabic", "hebrew", "turkish" and "azerty" settings (or "querty" default).
These change the data to show different keyboards.
new Keyboard({label:label, layout:"arabic"}).show();
Thanks Hussein Ghaly (arabic), Racheli Golan (hebrew), Ferudun Vural (turkish) and Karel Rosseel (azerty).
Also added an override mapping for lower to upper and upper to lower case letters to the data parameter data.
Adjusted data to handle any number of rows (min 10) for custom layouts
And added a "back" special key that is like "backspace" but only takes up one key size
The "spacebar" now takes up whatever space is left so the bottom row is always at the max number of columns
9. GRID
Added allowToggle, cache and numbers parameters before style parameter
Added numbersX and numbersY properties to individually set visible false if desired
These changes make the Grid ready to be used for charts
10. GENERAL
Added dragPaused property to objects with drag() to pause or unpause dragging - IMPROVEMENT
this keeps setting like boundary where noDrag() does not
BREAK Added a corner parameter and property to Triangle after borderWidth and before center parameter
new Triangle(500,500,500,red,black,5,[20,20,100]).center()
A negative wait time can be provided to animations in the animate() series - IMPROVEMENT
this will start an animation before the previous animation ends - thanks Ami Hanya for the excellent idea
Added a toggle() method and toggled property to List when accordion is set
this will toggle the outermost (first) accordion - good for opening and closing a pulldown - thanks Ofweird Top for the suggestion!
Removed a test for touch to scroll page in tag mode if swiping on stage on allowDefault true -BREAK
It was causing double mouse events - will see if we can figure out a way to do the page scroll - IMPROVEMENT
Made Dial accept currentValue style - left it out previously
Made Slider and Dial accept VEE for min, max, step and currentValue
also set these so delayPick works for instance, when tiling
List animateTo() has its timePerItem fixed = was switched the wrong way for s/ms
Adjusted List to capture selectedIndex, selected when tabs are used
Adjusted List to animateTo() an item if tabbing and the item is not in view (top left reg assumed)
Tabs - added keyLoop parameter at end before style which defaults to true to wrap tabs when tab key reaches end or start
made List set keyLoop to false so List does not go past its ends when the tab key is used.
Made Layout accept DisplayObjects as region objects - for default values
eg. new Layout(stage, [header, content, footer]) gets converted to
new Layout(stage, [{object:header}, {object:content}, {object:footer}])
Made it so an object passed into Layout as a region will update its outline() if there is one
Made debug() chainable in physics (and updateDebug(), removeDebug())
Made ColorPicker have a selectedColor parameter along with the existing selectedIndex parameter
BREAK for the List accordion tree object, changed the arrow property to expander
with three types: "plus", "arrow" or "none" - thanks Ofweird Top for the suggestion.
Also adjusted list to not apply backgroundColor style for label (not item, but actual label) that messes up rollover and shade colors
Fixed ZIM ISO example https://zimjs.com/iso/ to not have scaling problem with older game module.
Added STYLE support for label and labelLeft for Toggle
Added STYLE support for always for RadioButtons
Made toggled for Toggle get and set.
11. CODE PAGE
Updated Code template to include less comments.
Reorganized the Code Page as follows:
removed the last sections: organization, treats, createjs, principles, programming
and added them to a darkpaper page - linked to in the Code Help section.
Converted these to latest ZIM and ES6 as well.
Shortened the template and removed the "minimal" template.
Made more link go to the rest of the templates so removed the second template section.
Added a FEATURES section with Mobile (Zapps), SHIM for Animate and Accessibility.
This leaves the following sections:
START, FEATURES, CDN, HELP, TOOLS and LIBRARIES
Inserted a link bar to these in between each of the sections for easy navigation
Took Badges out of HELP and added Medium and DevTO site in HELP.
12. PATCHED
Fixed GIF() to ignore a path parameter on Frame or ZIM.PATH if the file url is absolute or virtual - thanks Karel Rosseel.
Adjusted SVG to work with passing in an SVG tag - had missed a condition when adding new SVG properties.
Fixed Pen so that it draws curves between each point rather than straight lines.
The curves were there but were curving through a midpoint between points.
Well, this was making a straight line!
We needed to start at the previous midpoint and curve through the last point to the next midpoint
Thanks Ferudun Vural for pointing out that we still had straight lines when animated quickly.
This is an excellent change to Pen when reducing the damping (closer to 1)
and results in smoother lines, as was intended, when drawing at faster speeds.
Adjusted labels in Slider and Dial to be properly in the labels container.
Now slider.labels.cache() will work properly for instance (previously only the last label made would be cached)
Fixed List to ignore items without labels - little bug in ZIM Cat 04 when we added setting backgroundColor to clear if no label.
Fixed Window and List scroll with damping swipestop event was being overwritten by earlier scrollbar drag fixes.
Added bindings and GET url to TO and FROM report in Base - to more easily debug
And added bindings to report() along with existing data.
Updated ZIM Base with a new ZIP that gets rid of a PHP warning - thanks Amy Szczepanowski for the report
Updated ZIM NIO / Pizzazz 04 Paths https://zimjs.com/nio/paths.html to DIAMOND so TextArea selection works on Chrome
Fixed up a warning message in animate() on path about startPercent and percent not supported with drag
We were checking to warn if added but percent defaults to 100 so was warning all the time.
Added margin parameter to end of chop() to let pictures be chopped with extra margins - used for jigsaw puzzle for instance
Added a call2 parameter at the end tap() to call a function if a pressup but not a tap (or double tap)
Fixed Button color and rollColor direct parameter values being overwritten by label color and rollColor styles
Fixed up splitWords on Tips() after adjustment to Label parameters - thanks Ami Hanya for the report.
Patched Lazy Loading sound, mouseplus and fullscreen - see below.
Added fontListHeight and fontListViewNum to TextEditor - thanks Marva for the good idea.
Adjusted animate() sequenceCall parameter to be the object animating. Thanks Yan Wenge.
Added button roll colors being applied on mousedown even if rollover does not occur - as in on mobile.
This allows the roll colors and icons to be applied as a mobile button is being pressed
If the user moves off while pressing down then the normal colors and icons apply, etc.
If the user taps then the color will go back to normal on mobile or stay as the roll color on non-mobile
Thanks omarpta for the request - and I think some others in the past - but we missed the solution.
Also changed the button rollover to not rollover if the mouse or press is already down outside the button then rolling over the button.
These changes were not tested with all formats of the Button like wait, toggle, icons and backings but they call the same roll functions so should be good.
Added a test to set canvas parent tag to position relative if no position is set.
This makes Tag() and TextArea(), etc. align properly when canvas tag is scaled.
Thanks Stefan Meyer for initial work on this - it turns out there was a more simple way to fix (found by accident!)
CheckBox rectangle and border rectangle now have box and box2 properties - was background property but never was working
ZIM chop has been updated to work without globals - we had left the namespace off loop, Bitmap and Tile.
The patch on ZIM Button has been patched to that.stage.frame rather than frame which does not necessarily exist.
Thanks Ashley Long for the report on these two issues.
We fixed the Synth Tone stop() docs to show the proper releaseTime parameter
And also fixed how stop() right on the tone to start works so it lets the sound fade in a little otherwise stop volume is default JS volume.
The duration parameter was calling stop and had the same problem so that is patched - thanks Yanwenge for the report!
Added pausedOnBlur parameter to Synth tone() to pause tone when window is reduced or goes to another tab - thanks Yanwenge for the request
This defaults to false at the moment but in Cat 05 we will switch it to true
Added paused(state) method to Synth tone() to mute and unmute
Fixed MovieClip in Cat 03 and Cat 04 - there was a typo in that rather than this. Thanks Ferudun for the report.
Fixed Emitter dispose() when Frame is disposed - thanks Ashley Long for the report.
Adjusted List.slider to make using stepper work (typo in offset) and made it use the step provided
Adjusted List.colorPicker to make ColorPicker start with selected color - swatch did but not the default ColorPicker
Fixed ZIM Frame and CreateJS to scroll mobile canvas when allowDefault is true and yet avoid double events
This has been ongoing work by Ferudun Vural and Dan Zen and hopefully is fixed now. Thanks Pan K for the reminder!
Patched CreateJS 1.3.3 but also launched this as 1.3.4 to update the NPM with new version.
A matching ZIM 11.4.2 on NPM has been provided.
Added a line in Frame allowDefault to set the CreateJS __touch.preventDefault property - not in current NPM version...
This allows allowDefault property to be set and allow scrolling the canvas on mobile
Adjusted Frame allowDefault to test for non-tag mode when setting no scrollbars on allowDefault false
The Box2D docs links have been updated in the Physics entry in the docs - thanks Haj Boutat!
Added call3 and call4 callback functions to tap() these activate on single tap when dbl is true
with call3 happening for any single tap and call4 happening on single tap only if the double tap fails
For instance if you want to do something on single tap but something else on double tap on the same object
then use obj.tap({dbl:true, call:doubleTapFunction, call4:singleTapFunction})
Thanks Xuntar for the use case suggestion - and the code addition for the Tap() to prevent double tap drag single tap call ;-)
Added local properties for Label font, bold, etc. when being set with properties... so clone and duplicate are correct - thanks Marva (again!)
Swapped the position of Pane and Panel in Docs so search on pane finds pane first and not panel.
Fixed hitTestCircleRect to work with a circle that is scaled.
Updated bounds of Label when labelWidth or labelHeight are set - thanks Vishwas for the report.
Fixed List when noScale is true so the selectedIndexPlusPosition goes to right place (only with equal or close to equal custom list sizes) - thanks Ami Hanya for report
Added animating and waiting properties to any object that animate() is operating on (also wiggle)
animating is the opposite of paused. animating is also true if wait, rewindWait, loopWait is happening
so also test the waiting property if you intend to see the animation occurring
Fixed ZIM ColorPicker which was using labelHeight and this had changed its functionality...
Fixed ZIM animate() with drag on path with speed set - was not animating after pauseAnimate(false);
Adjusted lazy loading of sound so that does not give an error if sound is not played right away
Fixed Slider and Dial to give decimals in useLabels that match max of min, max, step decimals
Made duplicate not duplicate the zimTouch property so that gesture() works on duplicated objects - thanks Marva for the solution
Added quality parameter to Loader save() currently at end, next version will move it to before data - thanks Ami Hanya for the request
Set target.startPercent and target.percent to null when restarting animation - thanks David for the report.
Fixed Triangle in a number of places in ZIM as the added corner parameter shifted index of adjust and style parameters - these caused minor changes.
13. FULL SCREEN
https://zimjs.com/tips.html#FULLSCREEN
Added fullscreen() to ZIM Frame as well as an isFullscreen property
and "fullscreenenter" and "fullscreenexit" events. Thanks Bart Libert for the idea!
frame.fullscreen();
14. LAZY LOADING SOUND
https://zimjs.com/docs.html?item=Sound
Patched ZIM Cat 04 so sounds can be lazy loaded - without preloading in Frame or frame.loadAssets() assets parameter
Still it is better to preload multiple files. Thanks Yanwenge and Joseph Diefenbach for the report and help on this.
asset("sound.mp3").play(); // will play once loaded (remember to interact first)
15. MOUSEUPPLUS
Added a "mouseupplus" event and a leftMouseDown property to Frame.
The reason is that stagemouseup and pressup do not trigger when outside an iframe if the canvas is in an iframe
So mouseupplus (with double p) dispatches if the mouse up has happened outside the iframe - but it triggers as the mouse comes back into the stage
There is no way to capture the mouse up as it happens but we can check the mouse button as we come back into the stage.
The CreateJS "mouseenter" and "mouseleave" do not capture properly with iframes either - so a simple mousemove is used by frame.
This is not an issue with touch but only with mouseup on iframe
ZIM drag() and animate() - path drag - have been adjusted to use the event to stop dragging from getting "stuck" on the mouse when pressup happened outside the iframe
16. VIS
Added short chainable vis() method to set visibility
circle.vis(false); // still will hitTest where alp(0) will not
17. STANDARDIZED SCALE MODES
ZIM now has standardized scale modes and scale constants as follows:
FIT: fits object within a bounds without changing aspect ratio
FILL: fills bounds with object without changing aspect ratio
FULL: sets object width and height to bounds most likely stretching object
These can be used in ZIM Frame as the scaling mode
Also scaleTo() and fit() use the same as well
So to be clear, FIT or "fit" can be used, etc.
Also, all old values still work for backwards compatibility
For example in Frame(), "outside" can still be used instead of FILL
and in scaleTo(), "biggest" can still be used instead of FILL
18. SITE
Redesigned main ZIM Pages - News, Examples, About, Learn, Code
to have section links above each section
and work better on mobile.
Updated Meta Tags examples https://zimjs.com/templates/meta.html
Added FONT, CONSTANTS, SCALE, RESPONSIVE and FULLSCREEN to ZIM Tips
19. CREATEJS GITHUB
updated ZIM CreateJS to 1.3.3 (Codename Diamond - 10 years!)
but also made the following legacy changes to the CreateJS GitHub repository:
Fixed Polystar last bevel or miter
https://github.com/CreateJS/EaselJS/issues/1046
Added drawPolygon() and pg() graphics methods
https://github.com/CreateJS/EaselJS/issues/1058
Adjusted MovieClip to not avoid extra processing if one frame
https://github.com/CreateJS/EaselJS/issues/1048
Adjusted SoundJS XHR test locally as was giving errors for local sounds
It still gives a warning for needing to interact before playing sounds
We are not playing the sound but just testing
So we respond with a warning that says sounds are ready to play.
https://github.com/CreateJS/SoundJS/commit/5213ac5696142bcba216ef10bef3105e5be1d4ef
Adjusted TweenJS to add a hook for change tween properties dynamically
https://github.com/CreateJS/TweenJS/commit/6df2b9ce7e68d3d824cc490b67cab2bc3204810a
NOT yet added to CreateJS repository - will test - but is in the ZIM 1.3.3 createjs:
Fixed selecting on touch screen on Chrome issue with allowDefault false
Thanks Ferudun for testing and thoughts.
https://github.com/CreateJS/EaselJS/issues/997
* At the moment, this means dragging the canvas to scroll the page does not work
* even with allowDefault true - it seemed to be one or the other
* if we let the stage be dragged then an extra press event was triggered.
UPDATE this has been patched to work now in CreateJS 1.3.3 and the new CreateJS 1.3.4
which is the exact same file, the version has been advanced for NPM.
Thanks Ferudun Vural for the solution.
Still not added to the CreateJS repository but feeling more confident it be will soon.
20. BASE
ZIM Base has been updated to work properly in PHP 8 - thanks omarpta for the patches!
A main one was we were using legacy format for split() with array then split string
That needed to be swapped. A new ZIP is provided that also includes the sql to make the tables.
21. UPDATED
Code Page, CDN, ZIM SHIM, NPM (ZIM 11.4.2 and CreateJS 1.3.4), TypeScript, Templates, Docs, Distill, Slack, Discord, Bubbling Videos
To come: Patreon, Blog
ZIM Cat 03 - added 14K - January 17, 2021
1. STYLE - IMPROVEMENT
Direct Objects are now allowed in ZIM STYLE:
STYLE = {
Circle:{color:red} // all circles made from now on are red
}
Previously the Circle would have been organized under type:
STYLE = {
type:{
Circle:{color:red} // all circles made from now on are red
}
}
Now, ZIM assumes that any style directly in STYLE that starts with a capital letter is a type.
The type property can still be used as an organizer if desired as behind the scene,
directly styled objects are moved to the STYLE type property anyway.
So setting a style of the first example will be converted to the second example the next time any style is applied.
Here is a second example:
STYLE = {
Button:{width:200}, // Button objects will be width 200
width:100 // all objects - except Button objects will have a width of 100
}
The example above demonstrates that Direct Object styles still override general styles regardless of order
Direct Objects also work with Style (the Style class - as opposed to the STYLE consant):
Style.add({Label:{font:courier}});
The traditional way still works too:
Style.addType("Label",{font:courier});
2. EFFECTS
https://zimjs.com/cat/effects.html
Added hue, saturation, brightness, contrast as DisplayObject properties.
These are shortcuts to MultiEffect below.
Added effect() and noEffect() methods to DisplayObjects.
These are found in the METHODS by Movement, Tap, etc.
They apply blur, glow, shadow, color, alpha and multi effects.
Added updateEffects() to update effects if effects are changed (note the s).
If the size of the object changes then use updateEffects(true) to change the cache size - thanks Vishwas for the find
obj.noEffect(); // will remove all
obj.noEffect("blur"); // removes blur effects
obj.noEffect("blur", "color"]); // removes blur and color, etc.
Added new Effect objects to Controls under Effects as follows:
new BlurEffect(); // apply blur
new GlowEffect(); // apply glow and knock out
new ShadowEffect(); // apply drop shadows and knock out
new ColorEffect(); // change colors
new MultiEffect(); // combination of hue, saturation, brightness and contrast (use properties though)
new AlphaEffect(); // apply alpha mask
These Effects may have many parameters with ZIM DUO, VEE and OCT turned on
These get passed in to the effect() method as follows:
obj.effect(new ShadowEffect()); // or
obj.effect([new BlurEffect(), new ColorEffect()]); // etc.
Added effects property to DisplayObjects (note the s).
effects will hold all of the effects on the object each in a property:
obj.effects.blur.blurX = 20;
zog(obj.effects.glow.quality); // etc.
The effects can be animated (or wiggled) using the DOT properties quotes:
The hue, saturation, brightness and contrast can be animated like normal:
tile.animate({brightness:50}, 2); // animate brightness to 50 in 2 seconds
animate() will run the updateEffect() - which can be expensive performance-wise
Remember, the hue, saturation, brightness and contrast are effects as well.
ZIM animate() uses different versions (hueBatch, saturationBatch, etc.)
of these properties so the effects can be batched.
The effects wrap the CreateJS filter property and cache/updateCache system
These also include DropShadow and Glow effects from https://github.com/u-kudox/Filters_for_EaselJS
and then updated for CreateJS 1.0 at https://github.com/sky0014/Filters_for_EaselJS
With their docs at https://kudox.jp/reference/filters_for_easeljs/ - thanks.
The rest of the Effects are built in to CreateJS with many thanks there too.
CreateJS has a way to bring in Shaders.
If anyone is interested in providing examples that would be great.
3. ARROW
https://zimjs.com/survey - and please, take the survey for real!
Added PagesArrow to controls module.
These work with Pages objects to go to the previous and next page.
Adjusted Pages go() to accept a speed parameter rather than a ms parameter - as time is now in seconds.
Added arrowDisableColor parameter and property to Pages defaulting to clear to set the color of the disabled PagesArrow objects.
Added arrows property to Pages to hold reference to created PagesArrow buttons.
4. SLIDER AND DIAL TICK LABELS - IMPROVEMENT
https://zimjs.com/cat/layout.html
Added Slider and Dial Tick labels
if true, will put values on semi-ticks (or ticks if no semi-ticks)
5. LAYOUT - IMPROVEMENT
https://zimjs.com/cat/layout.html
Added a "Region" value for a Container to be used in ZIM Layout objects.
If the object in a region 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.
Thanks Zeke Chan for the prompting.
Added marginMinLeft and marginMinTop Layout region properties.
BREAK Added lastMarginMin parameter to Layout() just after lastMargin and before backgroundColor.
Added AUTO ("auto") constant and option for margins.
AUTO allows margins to push to get as much room as possible.
If multiple margins are AUTO they share the percentage left over.
BREAK Changed regionShape parameter to a showRegions boolean - so ZIM auto makes the shape.
BREAK Changed dispose() to actually dispose Layout - this removes backgroundColor and STOPS resize!
This is in place to be able to swap Layout objects on orientation change
See the docs for LayoutManager and Layout dispose()
Adjusted LayoutManager to extend Manager and tidied up Manager code
to handle method parameters for all objects (leave parameter empty), one object or an array of objects
For instance resize() resizes all, resize(a) resizes a, resize([a,b]) resizes a and b
Removed enable and disable in LayoutManager - use add() and remove()
See the last pair of Layout objects in https://zimjs.com/cat/layout.html
IMPROVEMENT for swapping HORIZONTAL and VERTICAL Layout objects (cool!)
6. SURVEY
https://zimjs.com/survey/index.html?id=updates
Created a survey on the Canvas with ZIM.
If you are reading this and have not alread, please take the survey!
Also have a look at ZIM Bind and ZIM Base working in harmony.
The very minimal PHP code is under the ZIM code for reference.
Thanks for your thoughts.
NOTE the ZIM ZOOM date of January 20, 2021 3PM Eastern Central
See Slack https://zimjs.com/zoom for the details
7. DOCS
https://zimjs.com/docs.html
https://zimjs.com/updates.html
Added light mode for docs and updates that can be toggled with dark mode.
See the Sun and Moon toggle in the bar at top right next to TOP and SEARCH.
We have also added code syntax coloring for both light and dark.
Thanks Yalon and others for the prompting.
The search functionality has been on people's minds as well.
We added back the browser search functionality to accommodate (CTRL F).
We have made the / key go the the ZIM search - thanks Karel Rosseel for the tip.
Currently, the top search finds any zim.class / zim.function
It does not find properties, parameters or instruction.
A reminder that there is a full TEXT version of the Docs.
This is available at the top of the docs or here:
https://zimjs.com/docs_text.php
We have also considered alphabetical order
and have decided that for now, items will be listed roughly by importance
and in some cases by themes - and of course many lists are in parameter order.
8. MAP
https://zimjs.com/map
A site map has been added to the Gold Bars - thanks various folks for the request.
And the Gold Bars are now in the following order:
INTRO MAP LAB TIPS SKOOL KIDS VIDS ZAP
With TEN and CAT removed to make room for MAP and KIDS and VIDS swapped
9. ZOOM
https://zimjs.com/zoom
Added ZIM ZOOM page for future dates and themes of ZIM ZOOM meets.
The first on the list is Wednesday, January 20 - see page for details.
Themes and days of the month will vary from month to month.
We recommend that you show some ZIM work as your backdrop!
Looking forward to seeing more of you out to these - don't be shy!
10. DISCORD
https://zimjs.com/discord
Added ZIM Discord server with the help of Unrid and Kasper our Adminions!
Lots of fun bot commands and hangouts so drop on by if on Discord.
We hope that this will help grow a youth community (not that you guys are old).
ZIM is for everyone - woot!
11. MOBILE
https://zimjs.com/mobile.html
Added an info page on mobile with features for mobile:
PWA examples for Progressive Web Apps - and Trusted Web Activities
and Capacitor information for making Native Apps from PWAs.
Added these link in TOOLS on the Code Page above MVC and NPM and to the Dev site.
12. MEMORY - IMPROVEMENT
All DisplayObjects (running methods like animate(), transform(), drag(), etc.) and
all Controls (MotionController, Dynamo, Sprite, Parallax, Pen, etc.)
have dispose() methods where ZIM removes listeners and internal references.
// If we have an object:
const obj = new Blob().center();
// it can be properly disposed as follows:
obj.dispose();
obj = null;
// note the setting to null - ZIM cannot delete your references to an object.
// a control may leave the object it is controlling on display for you to dispose.
Memory in ZIM has been tested using Google Memory Heap Snapshots - thanks Disco Drama for his guidance.
Memory leaks happen when objects are left in existence and not garbage collected when expected.
Objects will not be garbage collected unless all references to them are deleted.
A primary cause is when event listeners are not removed.
ZIM dispose() now removes all listeners on the object and disposes its contents recursively.
This means you should be able to dispose a Container of objects just by disposing the Container.
A global dispose function is being run that disposes the following:
if (zim.KEYFOCUS == obj) zim.KEYFOCUS = null;
if (obj.draggable) obj.noDrag();
if (obj.zimTweens) obj.stopAnimate();
if (obj.zimWire) obj.noWire();
if (obj.zimWired) obj.noWired();
if (obj.zimClickHoldDownEvent) obj.noHold();
if (obj.transformControls) obj.transformControls.dispose();
if (obj.zimClickDownEvent) obj.zimClickDownEvent = null;
if (obj.zimClickUpEvent) obj.zimClickUpEvent = null;
if (obj.physics) obj.removePhysics();
if (obj.name && zim.zimObjectIDs[obj.name] == obj) delete zim.zimObjectIDs[obj.name];
Here are notes from the Memory Testing which took several weeks.
DISPLAYOBJECTS
Squiggle and Blob had local stage which meant multiple calls to the points property
were not removing shapes - this and SelectionSets are now properly cleared.
Adjusted stage event to clear as it was being added more than once on points call
Adjusted hold() to remove stage event and clear from memory
Bitmap is now disposed when using asset("image.png").dispose();
Use clone() to keep an image around for later otherwise will make from lazy load
List - removed a bunch or references to tabs
Tabs - button, label references
Layer - removed stagemouseup event
Stepper - removed references to Label, Rectangle, Triangles
Selector - added dispose to container
TextEditor - removed references to all parts so they dispose - color, font, size, etc. components
TextArea - removed DOM events on TextArea tag so dispose clears from memory
KeyBoard - changed .name properties to .na properties to not conflict with .name/nam() global properties
Organizer - extended Tabs but had its own that.buttons which overrode the Tabs buttons so it could not be disposed (3 hour bug)
Connectors - removed keydown event so can dispose properly
Marquee - removed in timeout for page refresh and disposed pages to properly dispose
Loader - removed various events on html tag so disposed properly
Book - added dispose to container
Added prototype dispose to Window, Panel, Tabs, Buttons so Classes extending these can override dispose() (five hour bug)
Automatically call dispose on tranformControls if object is being transformed and disposed
METHODS
animate() - Animated objects were being held in memory even if disposed. This has been adjusted.
and needed to remove requestAnimationFrame for dynamic animations.
tap() - Objects with tap() were being held in memory even when disposed. This has been adjusted.
wire() and wired() - DisplayObject dispose() methods now check for wire or wired and removes the connection - freeing the object from memory.
also checked drag(), gesture(), transform(), with no problems
CONTROLS
Pages - needed to dispose Swipe when Pages is disposed in addition to already removing swipe event
Parallax - removed stage event so objects are disposed - need to dispose objects still
Emitter - need to set that.currentParticle to null
Generator - changed pauseSpaceEvent to pauseSpacebarEvent to properly dispose
Pen - removed nib stage events and consolidated keydown and keyup events for proper dispose
Synth and Physics have things left in memory due to other systems - synth is minimal, physics is being considered
DISPOSE NOTES:
disposeAllChildren() was added in Cat 02 to dispose container children but not the container (like dispose() would do)
Also - warning, zog() or console.log() on an object will keep it in memory for console
consider setting zns=false before starting ZIM on final apps - this turns off all zog messages - or just remove logging
ZIM dispose() will remove all your event listeners on the object but not your references to the objects
// for instance, if you reference an object obj in a keydown listener:
const keyEvent = frame.on("keydown", ()=>{obj.center();});
// then you need to remove the listener for proper garbage collection:
frame.off("keydown", keyEvent);
MEMORY TESTING:
Not all apps need to be tested unless you expect them to run for a long period or they seem to be bogging.
To test memory of your objects in Chrome use F12 for developer tools and use the Memory tab.
Run the app then take a Heap Snapshot - use the docs version of ZIM and sort to see ZIM objects.
If you have issues, please contact us in https://zimjs.com/slack and we can discuss solutions.
13. DISPLAYBASE
Added an internal displayBase() function to make common properties
for the basic DisplayObjects: Container, Shape, Bitmap, Sprite, MovieClip.
Moved the following common properties that were assigned in zimify() into displayBase()
width, height, widthOnly, heightOnly, level, depth, blendMode
Added these properties that were in each basic DisplayObject:
draggable, name
Added these new effect properties:
hue, saturation, brightness, contrast (and Batch versions)
These all now are inherited by the ZIM shapes and components.
14. GENERAL IMPROVEMENT
Added corner property (always have had parameter) to Rectangle - thanks Nikola Jankovic for request
Added radius property (always have had parameter) to arc - thanks Nick Karasek (will try and get multi-line text next release)
See https://zimjs.com/cat/layout.html part 2 and 3 for examples of above.
Replaced horizontal parameter in Swiper to swiperType BREAK
Added setTimeout checks for Tag, TextArea and Loader to make sure adding does not happen after removed
this was causing these to be left behind if ZIM Pages were going faster than 50 ms
Added dispose to override in HotSpot and HotSpots - it was set wrongly to clone override.
Fixed typo in running masterFilter in Bind - had written masterFunction at one point rather than masterFilter
Added style:style to Labels of RadioButtons and Checkbox so style can be turned off with style:false on main class
Fixed bug in Swiper when swipeOn is the stage and not another object
Fixed bug in Book dispose() - dispose versus disposing typo
Adjusted Emitter so disposes without error when fade and shrink are false
Fixed clone of exact on Button - had typo with initial parameters
Fixed startHead and endHead being properly defaulting to null not "null"
Fixed length property of ZIM line - power code had a typo - thanks Stefan Meyer for these two finds.
Fixed STYLE with pos() and providing container - was missing that property
15. PATCHED
See also many patches made to ZIM Cat 02 (these may be added after GitHub and NPM versions of Cat 02)
Fixed height variable in Dial - needed declaration when adding useLabels. 1/18/21
Changed Layout dispose() to actually dispose and removed LayoutManager enabled and disabled - see Layout above. 1/19/21
Adjusted Squiggle and Blob so they do not dispose events when changing points - logic issue when updating memory - thanks Stefan Meyer for find. 1/19/21
Added animate() waitedCall and waitedParams to sequence - these were not being passed through - thanks Yan Wenge for the report.1/21/21
Fixed Label so backing goes beneath Label outline - we had set this to work only with backgroundColor... 1/21/21
BREAK Turned back on letterSpacings when Label has a backgroundColor - needed some way to handle kerning (still turned off for letterSpacing) 1/21/21
Adjusted Blob and Squiggle clone so like Shape, they clone the bounds.
These two do not always have perfect bounds - they take the default bounds of the number of points. Thanks Karel Rosseel for the report.
The approximateBounds() method can be used - but was being ignored when cloned - for instance in an Emitter or Tile and so clone needs to clone the new bounds.
Adjusted hitTestGrid() to properly take into account spaces - this came from solving a bug in the Scrambler with spaces in a grid.
IMPROVEMENT Added a new type to hitTestGrid() called "open".
This allows spacing to be added and grid to return values even when point is in spacing area
A grid needs to have the spacing added to the number of columns and divided to get col or row sizes which had been done
But the position needs to have half the spacing NOT half the col or row size - so this was adjusted.
The new setting has been applied to Tile for getting current tile under mouse and Scrambler - which had a slight error of margin bug - now okay.
If you have a Scrambler in a grid with spacing then we recommend updating to Cat 03.
Fixed Sprite run() with wait start, and loopWait with on return from blurred window - thanks Netanela for the report.
The actual CreateJS Sprite needed to be explicitely paused in these cases otherwise it would run on its own.
Changed noDrag() on draggable Panel to be noDrag(false) to keep cursors on objects in panels - no need to recursively turn drags off
Added collapse and collapsed parameters to end of Panel to allow double clicking on bar to hide and show panel content - leaving bar visible
Added collapsed getter setter property to Panel
BREAK adjusted tap() to be time in seconds by default rather than ms and to default to 8 seconds for a tap.
Updated AlphaEffect to have proper examples - also made mask work with Bitmap directly (rather than Bitmap.image)
and work with any ZIM DisplayObject - so GradientColor and RadialColor will work for example - caches mask and uses its cacheCanvas as a mask
Added an AlphaEffect to the https://zimjs.com/cat/effects.html example - it is the striped Pragma for a selected effect.
Added effects property to docs for Container, Shape, Bitmap, Sprite, MoviClip
NO TO BELOW - reverted because the object may be added to a container before the container gets added to the stage - back to polling for added()
xx Adjusted the added() method to use the CreateJS "added" event and then check for the stage rather than polling
xx The CreateJS "added" event only triggers when added to a container - not necessarily the stage.
Adjusted animate() function (not method) for when animating a non-zim object the rewind was expecting a style property for css... this is fixed to test for one first
Fixed color property on LabelLetters - was refering to itself rather than this._color. Thanks Joseph Diefenbach for the find.
Adjusted Container to accept a ZIM Boundary object (or CreateJS Rectangle) as a single parameter to specify the bounds - thanks Joseph Diefenbach for the suggestion.
Adjusted Bitmap clone() to clone width, height, x, y settings if provided in original
Updated ZIM SHIM to Cat 03 and fixed name and nam() to not overwrite MovieClip instance names when zimified - thanks Ami Hanya for the report.
Fixed ZIM Keyboard so special characters show up on hold - also added these to data parameter as an object literal - thanks Hussein Ghaly for the suggestion
Fixed sequenceCall to call every sequence - got lost in ZIM 10.7.0 update - thanks James Barrett for the report and Joseph Diefenbach for the aid.
Fixed Window enable setter to properly record the _enable private var so the getter responds properly
Added the enabled property to selector - it was missing.
Added a stopAnimate to selector so later selected values do not get overwritten by previous animation
ZIM timeout and interval now support ZIM DUO parameters or config object - thanks James Barrett for the request
Fixed docs for items such as https://zimjs.com/docs.html?items=Stage,tap
a scope error happened when moving scripts from bottom to top of docs in a DOMContentLoaded event function
Patched ZIM Ajax to use uriEncodeComponent() instead of uriEncode()
and used this to handle JSON data in Ajax call to solve & problem in data
Tested in a number of ZIM Bind() and survey examples and seems good - but check any Ajax Cat 03 apps.
Removed delete method from Pen as was conflicting with Distill minification - thanks Xuntar for the report
left the method in Cat 03 zim.js file to not break existing code - but will be gone in Cat 04
Use instead the deleteSegment() method
Fixed animate() from property when in series - thanks Ami Hanya for the find - 2/23/21
Had moved relative animation check to after wait so loopPick would work
and from settings were moved to after relative so this meant relative for later series were not working
16. ZIM BASE IMPROVEMENT
Added $base->simplify(couple) method to turn ZIM Bind nested data into an assocative array for inserting to database
previously and still there is a couple parameter in ZIM Bind that will couple the data:
// eg.
{"circle":{"x":"10", "y":"20"},"count":{"currentValue":"0"}}
// is:
{"circle_x":"10", "circle_y":"20", "count_currentValue":"0"}
This can now be handled on the server without using the couple parameter
by using $vars = $base->simplify(true);
Then the vars will be called the couple names.
BUT - if storing bind data for a traditional form then usually each bindID will only store one property:
// for example:
{"name":{"text":"Dan Zen"},"occupation":{"text":"Inventor"}}
// with coupled this would be annoying:
[name_text=>"Dan Zen", occupation_text=>"Inventor"]
// without coupled it is better so use $vars = $base->simplify();
[name=>"Dan Zen", occupation=>"Inventor"]
// The resulting associative array can be merged with other desired data and passed to $bind->insert() etc.
$pairs = array(uid=>$master, date=>"NOW()");
$pairs = array_merge($pairs, $data->simplify());
$result = $base->insert("zim_survey", $pairs);
17. 2020 REPORT
https://zimjs.com/2020
Added two animated charts / graphs showing ZIM growth over the year.
Thank you all who have helped share ZIM - please continue to do so!
18. SITE
Added eChalk examples and Shake and Spill example to ZIM Learn Apps front-page banner section - thanks Iestyn Jones and Laurie Bloomfield
Added a couple interactive logos - thanks @Rigun K.G. and @Amy Szczepanowski for the Logo examples.
Added gen art examples and a few puzzles and a bunch of holiday card examples to the ZIM Banner pages.
Added 2020 radial chart and animated graph to Data Vis front-page banner section
Added Discord and Isometric Board to ZIM Code page
Added ZIM ZOOM page at https://zimjs.com/zoom
19. EVENTS
https://zimjs.com/cat/events.html
Added dbl and dblTime parameters to tap() so can handle double click better on mobile
BREAK these were changed from double and doubleTime due to minification issues with the keyword double!
Added ZIM DUO to tap as well...
The "dblclick" event does not seem to work on mobile - thanks Vishwas and Joseph Diefenbach for the prompting
The Tap was adjusted to be able to handle both a single tap and a dblTap on the same object.
Finally brought back the "pressdown" event that is the same as "mousedown" but matches the other press events
So we have pressdown, pressmove and pressup - thanks Jeff Peck for the solution of putting the events on the stage and have them bubble
20. ZAP
ZIM ZAP is fixed so we can edit zaps with single quotes in them '
Needed to add: if ($code) $code = mysqli_real_escape_string($mysqli, $code);
21. CREATEJS
Updated loading sound to fix warnings and errors in CreateJS 1.3.2
Was getting error loading WebAudioPluginTest.fail localling
CreateJS knew there was supposed to be an error to test for XHR
The try catch just stopped working
So changed the test to if local file then do not use XHR.
On the server, we are getting a warning about starting a sound before interaction
CreateJS is setting up an audioContext - so all is good
Rather than adjust that as it is complex, we added a second warning saying AudioContext is ready
22. UPDATED
Home page Cat Mini Site, Bubbling Videos, site footers, CDN, Code Page, TypeScript, NPM (11.3.0) Slack, Discord, GitHub, Templates, Distill, Patreon, Blog
ZIM Cat 02 - added 12K - November 18, 2020
1. BOOK
https://zimjs.com/cat/book.html
https://zimjs.com/darklo
Creates a book with pages that flip like a real book.
The pages are passed in as an array and can include interactivity.
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.
Book is different than ZIM Pages which have transitions and do not "flip".
2. LABELLETTERS
LabelLetters now accepts Tags IMPROVEMENT
https://zimjs.com/cat/htmltext.html
Made LabelLetters accept html-like tags as follows:
<b>bold</b> - or <strong>bold</strong>
<i>italic</i> - or <em>italic</em>
<u>underline</i> - can use this with <a> to make a classic underlined link
<a href=url target=_blank>link</a>
<font color=zimColor
backgroundColor='htmlColor'
rollBackgroundColor=#hexColor
size=20
family=verdana
group=groupStyle>font</font>
note: DO NOT use 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
Thanks Ami Hanya for the prompting!
BREAK - added to and adjusted the LabelLetters parameters:
label, align, valign, letterSpacing, letterSpacings, lineSpacing, lineSpacings, lineHeight, lineAlign, lineValign, cache, style, group, inherit
spacing is now letterSpacing and we have added lineSpacing and lineSpacings
The letterSpacing and lineSpacing are the default spacings.
The letterSpacings and lineSpacings are arrays that can specify certain spacings to override the default spacings.
align and valign are for the letters registration points - good for controlling animation
lineAlign and lineValign are alignments of the lines horizontally and of the letters in the lines vertically.
letterSpacing is turned off when Label backgroundColor is on - so use letterSpacings if needed or on the label use backing.
this is so the letters stay together when highlighted for links or background colors in the pseudo HTML.
3. CHOP
https://zimjs.com/cat/scrambler.html
https://zimjs.com/explore/chop.html
The chop() functin breaks a DisplayObject into a Tile of Bitmaps - great for the Scrambler
4. TOALPHA
Change a color to have an alpha
// Short cut to convertColor() but as method of a string
blue.toAlpha(.5)
// Similar to the toColor(), lighten() and darken() methods
blue.toColor(red, .2)
blue.lighten(.3)
blue.darken(.3)
5. GENERATOR UPDATES
https://codepen.io/zimjs/pen/XWjrmoQ
Added a noise() function to the Generator that does ZIM Noise simplex methods automatically choosing 1D-4D.
This returns a number from 0 to 1 (matching Processing/P5js) as opposed to -1 to 1.
Added a seed parameter to Generator to set the Noise seed if desired.
Added resetup(), redraw() and restamp() methods to Generator
To call the setup, and start the draw and stamp functions again
This is very cool with stamp as we can animate through stamped pictures to basically animate the Generator
-- beyond just doing the draw animation - see https://codepen.io/zimjs/pen/XWjrmoQ
Added clear and reset methods to Generator
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()
6. GENERAL
Added ZIM multi-asset format for Frame asset loading (both in Frame and loadAssets()) - thanks Netanela
This makes it easier to handle multiple paths - for example:
Further properties are loadTimeout, maxNum, and noCORSonImage
Updated Frame and loadAssets() maxConnections to 10 - thanks Disco for the discovery (and thanks CreateJS)
Adjusted ZIM Page to not apply styles to inside Rectangle as styles already applied to Page parameters
and take on backing of stage.height and stage.width by default rather than screen height an screen width
Adjusted hitTests to only show up once each in Distill
Removed all references to pressdown - failed attempt to match pressmove - but e.target is wrong so did not work.
Added expand, expandVertical, expandBar, expandBarVertical parameters to end of Slider
Adjusted Sprite to work with asset without path provided - also need to put proper path (ie. assets/sheet.png) in json file
Fixed lighten(), darken(), toColor() to work with "red", etc. - methods were on a String object so it needed to be converted with String(color) - weird
Adjusted TextArea readOnly, spellCheck and placeholder to accept styles and be set to true or false properly - thanks Cajoek for the mention
IMPROVEMENT Reorganized Frame assets to be global so multiple frames hold same assets object and do not overwrite one another
Made Stepper default to "list" intead of "number" if array is passed in to list parameter.
Added percent and percentClose properties to Circle - thanks Netanela for the suggestion - very cool to see percent animate.
7. PATCHED
Added cache as a STYLE function - thanks Disco Drama for the inspiration
STYLE = {cache:true} // will cache all DisplayObjects - or cache individual types, etc.
Fixed Dial press to jump to value when dial rotated
Remembered to update the version... this is new to ZIM Cat... takes some getting used to.
Fixed ZIM Multi-asset Object - bug in multiple loads now fixed - thanks Netanela
Also adjusted Multi-asset Object so if filename is the same as a previous filename
this file gets the path added to its id.
Adjusted alp() to set any object with a tag property so the opacity of the tag is set
This means a textArea.alp(.5) will actually set the alpha of the HMTL tag as well
This does not work with textArea.alpha = .5 - only with the .alp() - Thanks Cajoek for prompting.
Updated ZIM Sprite to work with multiple spritesheets for one Sprite - Thanks Netanela for the suggestion.
Added factor and offset to ZIM List.slider static method
Added container scaling adjust in resize() for Tag() and Loader() to match TextArea - thanks Stefan for the find.
Fixed LabelLetters dispose() method - thanks Cajoek for the find!
Added new line \n and \r support to LabelLetters - was there for <br>
Adjusted TextEditor to display none the HTML textarea when colorPicker is activated
Added "color" event to TextEditor that dispatches when colorPicker is opened
Added closeColorPicker() method to TextEditor to close colorPicker - and add HTML textarea back
Changed color property of TextEditor to swatch to reference the Rectangle - was not even hooked up and color is the wrong name
Note that the color parameter is the color of the text which is completely independent from the swatch and the ColorPicker
(these handle the label - not the TextArea)
Fixed dynamic animation with percentComplete in ZIM Cat - adjusted to handle time in seconds - thanks Maziear Mou for the report.
Made transform() not try and transform scaleX or scaleY of object with no scaleX or scaleY - like a line which has not scale Y. Maziear Mou for the report.
Adjusted various DISTILL check conditionals to not start as true - not needed - made consistent and added animateCheck too.
IMPROVEMENT fixed object.rate for animate series - now applies rate to all tweens.
Added test to name in clone so does not make a name of undefined and keep reference to object!
Changed the check on the TextEditor to a Shape - thanks James for reporting that Apple iOS can't support a checkmark that everywhere else supports
Also added a frame parameter to TextEditor for locating TextEditor on different frame - helps with ColorPicker and TextArea - thanks James Barrett for the find
Adjusted Distill to work again with ZIM Shapes - the CustomShape was in the wrong order - thanks Chris S for the report
Patched borderWidth of ZIM shapes so when set to 0 it can be set back to a thickness - glitch in CustomShape code - thanks Maziear Mou for the find
IMPROVEMENT Added multiple and accept parameters to Loader (thanks Ami Hanya for the suggestion)
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"
Adjusted Button toggle parameter to accept a Boolean true (as well as a String) to toggle the various colors, etc. without changing the Label text - thanks Cajoek for idea
Adjusted Tag, TextArea and Loader to do a parentNode test when disposing to make sure HTML tag is there - thanks Frank Los for the report
Added changeFrame(frame) method to ZIM Book if the book needs to change frames - thanks James for the suggestion
IMPROVEMENT updated Sprite so that pauseOnBlur activates the sprite again when the user goes to another tab and then tabs back. Thanks Chris S for the report
See the section on LAYOUT for new layout "Region" feature
IMPROVEMENT animate now adds a tweenState object to its target.
This has properties for all the object ids and a property called all.
These keep track of what is animating for the object.
The setBlurDectect() now uses this to pause and start individual animations rather than all or none.
Previously, the latest paused state was recorded and reused - this could lead to paused ids animating on return to focus.
Adjusted animate to stop sprite if sprite was stopped and pauseAnimate(false) is set
For Sprites with other animate() calls this would cause the sprite to run quickly through its frames.
Fixed animate() with from and relative amount such as "100"
Changed draggable parameter of pen to move. this is the parameter to say whether the lines can be moved afterwards
BREAK although, not really - the draggable parameter was not working since it was conflicting with the draggable property added to all DisplayObjects.
Changed distill() to filter out duplicates - we were keeping track of how many times certain features were used - but recording the feature once now is fine.
Fixed bug in loading noCORSonImage with multiple images - thanks Ami Hanya and Disco Drama for the find
Made BitmapColor() work with a ZIM Image object - an image loaded without preloading - still need to wait for image to complete before using as BitmapColor
var image = asset("pic.jpg"); // not preloading
image.on("complete", function() {
new Triangle(200,200,200,new BitmapColor(image)).center();
stage.update();
}); // thanks Karel Rosseel for prompting
Fixed repetition parameter typo in BitmapColor - thanks Karel Rosseel for the find
Added a matrix parameter to the CreateJS bitmap() method of the Shape command
So that the matrix parameter of BitmapColor now works. Applied the change to CreateJS 1.3.2 and to CreateJS on their GitHub
Fixed align and valign of Button when using text property - thanks Nick Karasek for the find
Changed the length property of series to num
as series is a function and the length is the JavaScript length property of Function (can't be overridden so was not working)
Adjusted transform() to work with TextArea, Tag and Loader - at least for movement and (mostly for) scale - not rotation - thanks Stefan Meyer for report
Fixed localToLocal issue with connectors when they first show with base - thanks Markus Hoevermann for the report
8. MEMORY
Patched in ZIM Cat 02 IMPROVEMENT
Thanks Disco Drama for memory prompting leading the examination of all ZIM objects and functions.
Here is a list of the updates so far - the adjustments to dispose() are still under way:
Added disposeAllChildren() method to container (and Stage/StageGL) to remove and dispose all container children but leave the container (thanks Disco Drama for request)
Added zim.KEYFOCUS check in gD (globalDispose) to remove focus reference
Fixed the following for dispose()
COMPONENTS
List - removed a bunch or references to tabs
Tabs - button, label references
Layer - removed stagemouseup event
Stepper - removed references to Label, Rectangle, Triangles
Selector - added dispose to container
TextEditor - removed references to all parts so they dispose - color, font, size, etc. components
TextArea - removed DOM events on TextArea tag so dispose clears from memory
KeyBoard - changed .name properties to .na properties to not conflict with .name/nam() global properties
Organizer - extended Tabs but had its own that.buttons which overrode the Tabs buttons so it could not be disposed (3 hour bug)
Connectors - removed keydown event so can dispose properly
Checked all components. 12/08/20
METHODS
animate() - Animated objects were being held in memory even if disposed. This has been adjusted.
tap() - Objects with tap() were being held in memory even when disposed. This has been adjusted.
wire() and wired() - DisplayObject dispose() methods now check for wire or wired and removes the connection - freeing the object from memory.
// also checked drag(), gesture(), transform(), with no problems
TODO - more methods, shapes and controls
9. LAYOUT
https://zimjs.com/explore/layouts.html
If the object in a region 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.
Thanks Zeke Chan for the prompting
10. ZIM DEV SITE
https://dev.zimjs.com (link also on front page at top right)
Created a site for developers with a toned down "expression"
and focused on how to put ZIM into other frameworks and other libraries into ZIM
Includes 24 examples of ZIM Components, Conveniences and Controls plus the code.
Provided review from developers (thanks, Iestyn, Ami and Diso)
Summarized the versions of ZIM - ONE, DUO, TRI, 4TH, VEE, SIX, HEP, OCT, NIO, TEN, CAT
Provided articles from Medium - https://zimjs.com/medium
Also started writing articles at DEV.to - https://dev.to/zimlearn
11. ZIM LAB
https://zimjs.com/lab.html
Replaced ZIM ZOO (https://zimjs.com/zoo.html) with ZIM Lab
for a more generic online editor
Includes 8 samples: BLOB, EMIT, ART, BALLS, SYNTH, RADIAL, SPRITE, and WIG
12. ZIM ZOOM
Held a ZIM ZOOM previewing ZIM Book
Thanks for those that came out and shared stories and updates!
Keep in touch at https://zimjs.com/slack for the next meet.
13. UPDATED
Home page Cat Mini Site, CDN, Code Page, Slack, GitHub, Distill, NPM (11.2.1), TypeScript, Templates, Bubbling Videos,
ZIM Cat 01 - added 31K - August 28, 2020
1. DOCS
Added THREE, SOCKET and PIZZAZZ at the bottom of the ZIM DOCS after GAME.
The ZIM modules are now in the docs
The code remains external and available in the CDN or in links at the top of the docs.
The files still need to be called with a script tag after calling the CreateJS and ZIM scripts.
Added an Images section after Frame and above Sounds to help people see how to load images.
This describes loading image assets but the code for doing this is in Frame still.
2. GENERATOR
https://zimjs.com/cat/generator.html
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.
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(-stageW/2, -stageH/2) could be used to start at the top left.
>> DRAW
The optional draw function runs at the framerate and receives count and total 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.
>> STAMP
The optional stamp function runs inside a loop and produces the final drawing at once.
The function receives count and total parameters.
You can switch between the stamp and draw function with the same code inside.
The end product will be the same.
>> 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.
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.
The drawing container is automatically added to the default stage as the Generator is created
3. CONNECTORS
https://zimjs.com/cat/connectors.html
Added a new component called Connectors that has nodes that can be dragged and connected with lines.
There are three main uses:
1. Connecting dots like in coloring books - use linear:true (thanks Karel Rosseel for the idea)
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.
Currently, there are no pre-made lines - the user would have to make these.
In future versions, we will look at making nodes and lines based on a ZIM Hierarchy object.
This would also allow use to handle undo, redo and save.
4. LINE
Added lineType, lineOrientation, curveH, curveV, points as follows:
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 "horizontal") - for lineType other than straight 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
Fixed cloning of line ends - were not adjusting their start angles
also ZIM VEE heads were not cloning the decisions but rather moving them to the clone
5. COLORS
Added toColor(targetColor, ratio) method to Strings - just like lighten() and darken()
So blue.toColor(pink, .2) is a blue color a little ways towards pink
6. SERIES
Added range to series:
var s = series({min:1, max:5}).step(.1).bounce()
// would return 1, 1.1, 1.2, etc. to 5 and back again, etc. every time it is called
// Added every() method to series:
var s = series(red, green, blue).every(3)
// would return red, red, red, green, green, green, blue, blue, blue, red, red, red, etc.
Remember, these are used with ZIM VEE
Which can be used in the new Generator (and Emitter, Tile, STYLE, etc.)
7. LOADER FOR TEXT AND JSON
Added type parameter to Loader BREAK after the label parameter before all the colors, etc.
This defaults to "image" and can be set to "text" or "JSON" for loading these types of data
The event object of the loaded event function will receive a text or json properties for the results.
Also handles multiple files - thanks Ami Hanya for the prompting
8. MADE WITH ZIM
There is a frame.madeWith() method with some color and wording options
Thanks Iestyn for the prompting.
There is still the makeCircles(), makeIcon() and makeCat() methods as well
9. FLIPPER
https://zimjs.com/cat/flipper.html
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.
10. CORS
https://zimjs.com/cat/picture.html
JavaScript on the Canvas gives CORS (Cross Origin Resource Sharing) errors
when interacting with an image or sound from remote sites (without arranging for CORS)
Now, adding https://cors.zimjs.com/ in front of a full URL
will avoid CORS errors on assets from remote sites.
eg: https://cors.zimjs.com/https://somesite.com/somepath/someimage.jpg
This should be used only when there is a CORS issue
and not just to work with your own assets locally on your computer.
For that, please adjust your browsers according to
https://zimjs.com/tips.html#IMAGES
Thank you Disco Drama for the work on this.
11. SOCKET
https://zimjs.com/socket
IMPROVEMENT Socket lets you connect with multiuser sockets for chats, avatars, etc.
There is a ZIM socket file and a ZIM server file as well as socket.io.
ZIM Socket has been updated to https and hosted reliably.
Thank you Disco Drama for the work on this.
12. DISTILL
https://zimjs.com/distill
IMPROVEMENT Distill lets you minify only the ZIM code used in the app.
This can reduce code from 600K to often around 100k.
This service has been updated to https and hosted reliably.
Thank you Disco Drama for the work on this.
13. WONDER
https://zimjs.com/wonder
IMPROVEMENT Wonder lets you record microstats like button clicks, time spent in areas, etc.
This service has been updated to https and hosted reliably.
Thank you Disco Drama for the work on this.
14. GENERAL
Made loadAsssets() dispatch a complete event even if no assets passed to it - helps in dynamic systems (thanks Ami Hanya)
Added toEnd parameter to stopAnimate(). If set to true, will make targets go to end values of their tweens (this will ignore specific ids)
Adjusted endTween() callType parameter to default to "all" rather than "none"
this will now call the call function (and all series call functions prior) when endTween() is run
Thanks to Disco Drama for suggesting the endTween and callType parameters.
Adjusted Page to have backing size the size of the screen by default with container dimensions the zimDefaultFrame width and height
Adding Layout to Page will now keep the same background color or pattern by default as the frame is scaled.
Pages object now automatically swipes horizontally from page to page without wrapping (thanks Andi Erni for the request)
specify swipe lists if some other swiping is desired or specify a swipe property of [] on one of the pages to turn off swiping
Switched rotate parameter of MotionController to orient to match animate property of the same name.
Added rotate property to end of parameters for backwards compatibility but this is now depricated.
Fixed MotionController to keep start rotation when orient is set to true.
Adjusted MotionController so flip does not work when target starts at an angle other than 0.
To rotate a target and use flip, use a Container as the target and put a rotated object inside the container.
Window and List - any drag() will now not swipe with ZIM Swipe() unless overrideNoSwipe is set to true in Swipe parameter
Thanks Andrew Lee for pointing out this feature was undocumented
An alternative to overridNoSwipe is to use setSwipe() on the object - note, the drag on Window and List is added slightly after the Window or List is made
so will have to use setSwipe() in a Timeout perhaps of .1 second. The overrideNoSwipe parameter does not need a delay.
15. SITE
Updated Wonder, Distill, AssetList, Socket, LeaderBoard and Frame pages with latest ZIM icon.
16. PATCHED
Adjusted the VERSION to cat/01/zim - thanks Stefan for the catch!
Adjusted stopAnimate(id, toEnd) to handle ids with toEnd - there was a bug
and adjusted endTween() to work across multiple animations and added suggestions to Docs. Thanks Disco for the report.
Removed a duplicate property deep in animate code and changed a var poo to po
and updated diffX and diffY in Squiggle and Blob to be vars - thanks Stefan for the finds.
Stefan Meyer from Uruguay ran ESLint on ZIM so we went in and updated a bunch of issues like missing vars, duplicate definitions, semicolons, etc.
Updated cloneAll() method to have style, group, inherit parameters
Fixed subsequent allowToggle settings in transform()
Adjusted show and hide of HotSpot() to use but rather than older backing variable
Fixed noise wave in Synth() to run with oscillator.context
Fixed series({min, max}) to properly loop on max number
Adjusted series({min, max, step}) to create an array and then just use array code - that means step has been added as well.
Fixed array creation to handle step properly.
Adjusted zimify() to not zimify() and object that already has had zimify() called on it - thanks David Dorin for the report!
Went back and did 10.9.0 (popular ZIM SHIM version) and cat 00 as well as this 01 and beyond.
Added maxConnections parameter to Frame and loadAssets() thanks Disco for the suggestion
This flows through to the CreateJS PreloadJS to the loadQueue setMaxConnections() method
Adjusted Organizer remove(index) to actually remove the item at the index rather than at the selectedIndex - thanks Disco for the report
and fixed a Window scrollX and scrollY setting issue due to an added timeout earlier.
The setting of the scroll values was setting to right position but then the 50ms timeout
set the content position back to where the scrollbars were at.
Adjusted Window to also drag after 300ms when dragBoundary is set - after enabled or disabled
This related to conflicting with damping on scrollbars or something like that...
Fixed removeAt() for List to properly adjust the selectedIndex
Adjusted transformControls dispose() to turn off events on handles, etc. - thanks Ami Hanya for find
Fixed KeyBoard to work again with blank Labels - thanks Ami Hanya.
Added scrollEnabled property to Window (and therefore List) - thanks Ami Hanya for request.
Adjusted Dial to work with mouseMoveOutside when set to true in Frame
Made Radial and RadialMenu style and inherit parameters pass through for its center circle and labels
Adjusted RadialMenu to not start with selection when adding rings
Renamed internal level property to ringLevel now that DisplayObjects have level property
Added scrambled event for Scrambler which dispatches when scrambling has stopped
LabelOnPath was needing stage update on toggle
Called toggle(true) on path to set clicking off path to hide controls.
Added frame parameter to Sprite so can load assets from Frame other than zimDefaultFrame
Fixed pause(false) on MotionController to work properly - was a lastSpeed scope issue
Adjusted noDrag() to properly close drag when slide is true so next drag() will work properly
This was affecting the toggle of enable for Window and List - important if animating a list for instance.
Adjusted the addAt() and the removeAt() of List to not go to the top each time.
We do not know why this was put in there - it may have been to prevent some bug.
We tested and it seems to work fine just leaving the list where it is.
Apologies for the List work... it is quite complicated as it uses Tabs in Window and has all sorts of thing going on.
Added frame parameter to Pen just before the style parameter to let Pen be used on other frames
Parallax addLayer() removeLayer() step() immediate() pause() - returns object for chaining
Added frame parameter to Generator just before the style parameter to let Generator be used on other frames
Fixed scaling stutter in non-Retina full mode after 10.7.1 fix - did not patch other versions as non-Retina is unusual
Fixed toggle on Button - error intruduced in ZIM Cat - the original value was set when setting text property
this was good until toggle set the text property and changed the original value to the toggled value - etc.
Also set the default rollToggleBackgroundColor and rollWaitBackingColor to the rollBackgroundColor by default
Patched interactive property for Squiggle and Blob was overwriting showControls method fixe to set _controls
Added wait parameter at end of wiggle() - will probably move this up to after main parameters in CAT 3... handy!
Patched Sprite when loading with JSON file to find frame parameter to get asset properly
thanks Ami Hanya for the catch (since the last patch with the frame parameter) and thanks Ami for the next one too
Made Window and therefore List update the stage when closed with the close button.
Took out extra ticker parameter at end of wiggle - typo
Fixed TransformManager to work with persist when adding objects to start and after with add() - needed to call persist() after later add().
Fixed dispose on Window() and List() when interactive false - thanks Stefan Meyer for these three fixes.
Adjusted Frame loadAssets() to move asset property outside init() so loadAssets() works in Animate with ZIM SHIM
Thanks Shana B. The init() does not get called as the stage is already made with Animate.
IMPROVEMENT Fixed svgToBitmap on Safari - thanks Heneman for the report. It was a bad mime-type that came from Internet code
type: "image/svg+xml;charset=utf-8" should have just been type: "image/svg+xml"
IMPROVEMENT Fixed SVGContainer and the Blob/Squiggle SVG input for points to include working with an arc
We used https://github.com/colinmeinke/svg-arc-to-cubic-bezier
We also found that 12.45.56 is actually parsed as 12.45, .56 so that was a glitch we fixed too
Here is the test file: https://zimjs.com/test/svghair.html - thanks to Heneman for the request
IMPROVEMENT Disposed shapes in dynamic mask for better performance - see https://codepen.io/zimjs/pen/xxORooW
Adjusted Sprite run() to set running false before calling the call so a run() command inside the call works properly
Made GPU true in Frame set retina to false - antialiasing looks really bad with retina true - also resizing frame with retina and gpu was not right.
Added tremolo to Synth play() to match tool at https://killedbyapixel.github.io/ZzFX/ - thanks Nikola for the find (and Frank Force for the tremolo)
Added getLatestTime(propertyName) method to ZIM Socket to get the latest server time that a property was updated
Adjusted ZIM animate series code to fix typo bug - thanks Ami for the find.
Added font, bold, italic, and variant local variables to Label so clone will clone these if changed with properties before cloning - thanks Marva
Patched Bitmap.fromData() to properly grab the image width and height then make the Bitmap and callback. Thanks Stefan for the report.
Made the TextEditor dispatch an "update" event for every change made to the text - thanks Marva for the request.
IMPROVEMENT updated Sprite so that pauseOnBlur activates the sprite again when the user goes to another tab and then tabs back. Thanks Chris S for the report
Fixed typo in Line to handle no endHead - had a test for startHead by mistake. Thanks Ofweird Top for the find.
17. GAME 2.4
Updated ZIM game module to game_2.4 to convert time to seconds by default in various places
Also changed board.update() to not rescale the objects - thanks Jasmin for the report!
Added moveTo() for absolute animation in Board
Added movingstart event for when move() or moveTo() is called - for instance from keys.
Added nextCol and nextRow properties to moving items to find out where they are moving to.
18. OBJECT
Added object() global function or zim.object() if zns is true (ZIM namespace pre-load variable)
This lets you get any named DisplayObject
Added nam() short chainable method to set the name property - thanks Disco for the idea
Or use the name property (also parent.getChildByName() still works for Container children with names set)
19. DRAGGABLE
Added a draggable property to DisplayObjects that calls a basic drag() or noDrag()
This allows drag state to be recorded - for instance using ZIMON.
Thanks Stefan Meyer for the suggestion - and I think we had an earliers request for this too...
removed the readOnly draggable property from PEN - BREAK
CDN, Code Page, home page Cat Mini Site, Bubbling Videos, slack, GitHub, Distill, Templates, TypeScript, NPM (as 11.1.2)
ZIM Cat - added 64K - June 01, 2020
1. TIME
Time now defaults to seconds rather than milliseconds. BREAK
Added TIME constant that can be set to "milliseconds" or "ms" to go back to time as it was.
This is everywhere that time is used in ZIM most notably in:
animate(), wiggle(), timeout(), interval(),
But also in Emitter(), Sprite(), Tip(), Layer(), KeyBoard(), Marquee(),
Button(), Swiper(), Swipe(), ProgressBar(), Waiter(), Stepper(),
Accessibility(), gesture, added(), hold() and Frame()
The reasoning behind the time change is that ZIM is for the people
not only for hard-core coders and seconds just makes it more familiar.
GreenSock animates in seconds so there is perhaps an industry shift.
2. SYNTH
https://zimjs.com/cat/synth.html
https://zimjs.com/cat/synthpad.html
Added ZIM Synth() with two main functions play() and tone():
1. play() is Frank Force code ZzFX to play and create sounds with many parameters
https://github.com/KilledByAPixel/ZzFX
https://zimjs.com/cat/sounds.html
There is a tool here: https://zzfx.3d2k.com to easily make sounds.
Then just paste the resulting code into a ZIM Synth play() method.
This is great for game sounds, etc.
2. tone() is a ZIM tone - continuous or with a duration.
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. and notes can be added.
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
Effects are "wah", "tremolo" (pitch / frequency) and "vibrato" (gain / volume)
Properties can be controlled with interaction, components, MotionController, animate, wiggle, etc.
3. DIAL AND SLIDER
https://zimjs.com/cat/synth.html
IMPROVEMENT Added to and adjusted parameters for Dial from after tickColor to before limit:
tickColor, tickStep, semiTicks, tickScale, semiTickScale, innerCircle, innerScale, innerColor, inner2Color,
accentSize, accentRadius, accentColor, accentBackgroundColor, accentDifference, sound, linear, gap, limit
Dial gets a new indicatorType of "aztec"
Slider gets the same except for the inner parameters
Added four more button types to Slider:
"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
Added semiTicks to Dial and Slider - set to 1 to alternate between big and small ticks
set to 4 to show 4 ticks between big ticks, etc.
Changed useTicks to work independent of steps
Added tickStep that defaults to steps but can be set independently
will be 1 by default if no step
Added linear value to Dial that lets dial go up and down based on vertical movement only
Added accent parameter to both that adds colored bar and background bar that can be offset
The accent can be made really small, put under or outside the component, etc.
The slider accepts gradient - the dial does not as it is a Shape
(custom shapes can be put under Dial for gradient effect)
Added sound parameter to Dial that rotates the dial 180 and switches to linear mode
Added sound parameter to Slider - sets accent, button to "aztec", colors, etc.
Remember, to get an actual number, use a Label set to the currentValue in a change event
4. STYLE
IMPROVEMENT Added Style() class - see STYLE in docs and scroll down
This has a set of static methods to help organize and manipulate sets of styles
These are very small and like STYLE, they affect only new objects
objects already created will not be changed:
Added zim.styleTransforms() function and documented how to add STYLE to custom classes
https://zimjs.com/explore/customclasses.html
See the Docs on STYLE for the four steps to activate styles on custom classes extending ZIM Classes
5. ZIM BASE
https://zimjs.com/base.html
Created ZIM BASE in PHP to handle MySQLi - cutting code by at least half
This works with ZIM Bind(), async() and Ajax() to provide easy data on the server side.
There is a Skool section on Data under Lesson 09
and videos on Base and Bind as part of the Learn JavaScript with Creative Coding
6. WIRE
Added front-end binding with ZIM wire() - leaving ZIM Bind() to work with external binding.
ZIM wire() and wired() are methods that offer an alternative to events.
These are simple methods that work similar to Bind - with chosen objects, properties, filters and calls.
For instance:
new Slider().wire(circle, "scale"); // would change the scale of the circle as slider is used.
// This would be like the ZIM:
new Slider().change(function(){
circle.scale = slider.currentValue;
stage.update();
});
// or the CreateJS:
var slider = new Slider();
slider.on("change", function(){
circle.scale = slider.currentValue;
stage.update();
});
// or the traditional JS:
var slider = new Slider();
slider.addEventListener("change", function(){
circle.scale = slider.currentValue
stage.update();
});
Wire is 25% the code of the traditional JS event.
Wire methods can also be added to any objects with addWires() global function
WIRE WORKINGS
The wire() method calls an optional filter function before setting the value and an optional call function after setting the value.
The filter function receives the value and must return the value - but the value can be changed in the filter function if desired.
The wired() method is the same but is set on the receiving object - as that may be made afterwards.
Each has a rebound parameter that can be set to also reverse the properties
so if the circle changes scale, it would change the slider value.
An optional input parameter exists if the value is not the component's default selectedIndex or currentValue.
A DEFAULTWIRE constant is provided to set preference at any time to selectedIndex or currentValue.
Non-components can be used too - for instance circle.wire(circle2, "x", true); // true is rebound
When circle changes, circle2 would match its x. When circle2 changes, circle would match its x.
Stage update is handled internally.
The wire() or wired() function (not method) can be used to wire non-ZIM objects - like an object literal {}.
For instance, point = {x:10, y:20}; wire(point, circle, ["x", "y"]);
Anytime the point changes, the circle would change to match x and y.
wire() and wired() can be turned off with noWire() and noWired();
This all works with a single function added to the ZIM Ticker that checks for each change in order added.
A single stage update is provided at the end by the Ticker - tied in with animate, wiggle, drag, etc. for optimization.
7. PAGE
https://zimjs.com/cat/page.html
Added new Page() class - that is really just a Container with a Rectangle backing
And a few conveniences for color and pattern.
But it stops people from wondering how to make a page in ZIM so that's okay.
8. PAGES
https://zimjs.com/cat/page.html
Added Emitter transitions and the ability to add a custom Emitter to transition parameter of ZIM Pages()
9. LINE
https://zimjs.com/cat/line.html
Added a new Line() class that has features of other ZIM shapes like Rectangle, Circle, etc.
10. POLY
https://zimjs.com/cat/poly.html
Added a new Poly() class that has features of other ZIM shapes like Rectangle, Circle, etc.
11. ASSETS
https://zimjs.com/cat/sounds.html - see the cat asset
ZIM asset() can now be called without preloading assets
ZIM will temporarily use an empty container as a placeholder
and then automatically load the asset in the background.
If you do not supply dimensions then ZIM will re-call any positioning once the asset has loaded
An auto-loaded image will be of type "Image" - as it is actually a Container holding the Bitmap
This container has its mouseChildren turned off - and the Bitmap can be accessed with a bitmap property
In general, loading assets with the frame asset parameter or in loadAssets() is encouraged
But test this out - it may be that you do not need an asset to be preloaded and it saves a step.
ZIM Asset Object now handles multiple paths that override the main path parameter
var assets = [{id:"file", src:"test.png", path:"alternate/"}, "other.png"];
var path = "assets/";
will load test.png from relative "alternate/" path
and load other.png from "assets/" path
Absolute urls always ignore the provided path parameter
So the above is accomplished by parsing the full path to the current file
and adding the alternate path to create an absolute URL that then ignores the path
12. SOUND
https://zimjs.com/docs.html?item=Sound
There is now a Sound entry in the Docs
Sound is handled automatically in ZIM by a CreateJS Sound object (for all sounds)
But we have added information about Sound to the ZIM docs for convenience.
The play method now has traditional parameters or a configuration object (ZIM DUO)
asset("sound.mp3").play(volume, loop, loopCount, pan, offset, delay, interrupt)
Setting loopCount:2 will loop twice - no need to set loop:true (this also has been changed for animate as well)
Sound now features interrupt (available through CreateJS)
This allows you to specify what happens when multiple occurrences of the same sound are played.
Previously they would just play on top of one another and that is still the default (up to 100 copies - or 2 in IE)
Now, a maxNum property can be added to the ZIM Asset Object for a sound
var assets = [{id:"sound", src:"sound.mp3", maxNum:1}]; // not available just using "sound.mp3" as the asset
This means that only one occurrence of a sound with the same source will play at the same time
When the sound is played an interrupt parameter can be provided with four possible values
The default is "none" which will not interrupt the previous playing sound
Set interrupt to "any" and it will stop playing any the same sound and start it over again
This is a pretty good setting for playing a sound with a button - it starts over.
Or just leave it as "none" (default) to ignore further button presses
and keep playing the sound without interruption - until it is done
then if the user presses the button the sound would play again.
13. MOVEMENT
Added movement() and noMovement() chainable methods to capture mouse movement on object
CreateJS provides a stagemousemove... sigh... but no mousemove events sigh.
General mousemove events are a little performance expensive but we need them sometimes
and it is a few steps to set up with a mouseover and mouseout
Here are those steps wrapped up in a nice easy method.
Object dispatches a "movement" event when stagemousemove or obj.pressmove happens on the specified object
call noMovement() to turn off.
14. SCRAMBLER
https://zimjs.com/cat/scrambler.html
Added a new control to ZIM that accepts a Tile and scrambles it
also letting the user drag tiles to try and unscramble for instance.
This works as a horizontal row, vertical row or a grid
and is very handly for e-learning app unscramble questions
and can be used to unscramble a picture
15. TILE
Added unique parameter BREAK to after spacingH and spacingV before width and height
Initially, Tile was used to tile the same object - but it has proven handy for layout components, etc.
This parameter will simplify the layout process by automating count and clone settings
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
Made Tile default to 3x3 circles if nothing specified
Added tileCol and tileRow properties to each tile object (already added tileIndex property) - this was patched in 10.9.0
Added itemUnderPoint(x, y, ignoreSpacing) to Tile to efficiently get the tile item at the mouse for instance
Added read only current, current2D, current2DCols properties - like items, items2D and items2Dcols
that give the current order of the Tile if it has been scrambled for instance
This could be relatively processor intensive so try to use it on click or pressup as opposed to pressmove or Ticker
Removed getItems2D() method in Docs - that was not an actual method as we went to items2D and items2DCols properties
16. ZIM SHAPES
Added a ZIM CustomShape class that handles common properties - saves 25% code per shape.
Added support for dashed array [10,30] 10 fill, 30 space... or [10,30,100,30,10,30] etc.
Added dashedOffset property (note dashed with ed) that can be set and animated for a Marquee effect.
These were already built into a raw CreateJS shape (and a canvas shape) but now brought them to the custom ZIM Shapes.
Added a cloneAll() method to shapes in cases where content is added to the shapes - usually a Container is advised.
17. ANIMATE
Added easeAmount and easeFrequency to animate() - these call CreateJS dynamic eases
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 tweenFrequency
linear, bounce, circ, sin - no affect
Note: used mostly with back and elastic (backIn, backOut, backInOut, etc.)
as setting the tween to quadInOut and then tweenAmount 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
Added a timeUnit parameter to animate to manually override the TIME constant if desired
IMPROVEMENTS
Adjusted animate() so setting loopCount to a number will automatically set loop to true (no need to also set loop true)
Fixed actually setting orient:true for paths to work properly
This already worked properly as default which is true - but now works if set it to true
Also fixed so can flip false and orient true - that was always rotating to the path in the past
Also, default to flip true for orient true and this avoids a little flash
as object was dragged and thrown in opposite direction - so all is looking good.
Fixed bug in replayTween and resetTween when tween had ended and with startAngle on path.
Adjusted ZIM animate() series to work with replayTween() - does not work with a series that includes multiple targets
Added the CreateJS CSS plugin to the ZIM CreateJS 1.3.2 version - so can now animate CSS without installing plugin (17k)
18. SELECTOR
https://zimjs.com/cat/synthpad.html
Added multi parameter BREAK to handle multitouch - for instance musical touch pad
Made selector receive backgroundColor and borderColor ZIM VEE values to set custom selector colors
Fixed clone to work
19. TEXT EDITOR
dedicated to Ami Hanya - long time ZIM user and enthusiast
https://zimjs.com/cat/texteditor.html
Added a ZIM TextEditor() class that edits ZIM Label objects
with modular features - just plain text edit, color, size, bold italic, align and font
has a show(label) method to work on a specific label.
20. LABEL
Added bold, italic and variant parameters and properties to Label BREAK .
Added font, align and valign properties to Label
Removed fontOptions. BREAK - this conflicted with parameter settings unless a lot of code was written.
21. BUTTON
Added toggleBackgroundColor, rollToggleBackgroundColor, toggleColor, rollToggleColor
to after toggle in Button BREAK adding these more easily allows a button to act like a fancy checkbox
before adding these we had to use custom backings and icons for toggle color changes
See the new TextEditor for an example with B, I and align icons using toggleBackgroundColor
22. BIND
Added toUnique() to Bind which sends unique=true to server
Adjusted toLock() to ignore from data that is not adjusted
Fixed up the docs as to when to use toLock()
This is when multiple people are appending to or editing part of a shared JSON object
If people are completely overwriting the object then just use to().
Added stop() functionality to the from filter (already on the fromTo and to filters)
Added setDefault parameter to Bind - to set as zimDefaultBind
Added default property to Bind to get or set bind as zimDefaultBind
the zimDefaultBind is what DisplayObject bind() method will use unless bindObj is specified
Adjusted removeAllBindings() to return the bind object for chaining
Adjusted filter process to allow data object to be replaced not just updated
the returned data was not going all the way due to passing via reference issue
Added unique parameter to ZIM Ajax()
23. VERSION
Added a VERSION constant and getLatestVersions() function - thanks Ami Hanya and others for the request.
getLatestVersions() calls ZIM async() to get the latest versions of all files relating to ZIM
the callback receives a versions object with zim, createjs, physics, etc. properties
So, in the callback function - if (VERSION == versions.zim) will tell if ZIM is the latest.
24. GENERAL
*** IMPROVEMENT
*** Can now use key arrows and shift key arrows to move object with place() - yay!
Just remember to remove the place() once placed!
*** Loop now loops through a string giving each letter.
*** Made ZIM expand accept 1, 2 or 4 parameters and accept DUO - for STYLE mostly...
*** Added pause(state, time) method and paused property to MotionController - deprecated enabled.
*** Added wrap and maxLength parameters to TextArea
*** Added ability to add Rectangle or stage as boundary to drag()
this will keep object inside rectangle without calculating based on registration point
*** Added "pressdown" event to all DisplayObjects - same as mousedown but matches pressup
this was a few lines of code to wrap the mousedown function
*** Added hitTestCircleRect() for calculation based (fast) detection of rectangle to circle hits!
*** Added close and closeColor parameters to Panel as well as a get set panelHeight property BREAK
*** Added currentValue to list - reads label text or finds first label containing provided value
*** Bitmap now has top and left parameters to shift where the image will be drawn BREAK
*** Added setLinearVelocity and setAngularVelocity to objects with Physics to override forces
25. GENERAL FIXES
Adjusted drag() to optionally use any DisplayObject as boundary
and if so, keep object within bounds - even for dragging containers with objects (one level deep)
Fixed centering on container with 0 scale bug - temporarily set scale to .000001 then back again for x or y
Adjusted List tabs not to inherit borderWidth and borderColor - setting outside border was also setting tab borders
can add Tabs or Button style if want to change inside
Adjusted series() to turn array into a real array as opposed to function arguments.
Adjusted Swiper to dispatch slidestop even if min max are not chosen
This could stop early as .5 is used as a change threshold - great for x, y, rotation
So set a min max for swiping to set properties like alpha and scale
Added noMouse() to Emitter particles container - this improves performance
Use myEmitter.particles.mouse() if you need interactivity
Adjusted Keyboard to put cursor selection in right place since centering on empty container fix
Added a recursive parameter to noDrag() to stop drags on children
26. PHYSICS 2.1
added ability to physics.drag(object)
for any number of objects at different times - either single or array.
Added physics.noDrag(object) or objects in array.
physics.noDrag() will stop dragging all objects.
IN ZIM - changed restitution to bounciness.
The parameter order in addPhysics() is the same as it was
restitution is still there as a ZIM DUO parameter name - or use bounciness.
We liked bouncy better, but that suggested a Boolean so bounciness was used.
Made follow work with borders assigned or changed after physics is made.
Adjusted drag so follow does not move when dragging - this was conflicting.
For moving things and following at the same time consider control() or using forces.
Adjusted the hitArea of arrows on Stepper to use expand() and reduce their size a little
Adjusted keypressing in Stepper for numbers - works better now... with backspace and delete
27. GAME - 2.3
Game is adjusted for the new font settings of bold, italic and variant
These are added to Scorer() and Timer() so BREAK to later parameters
Also adjusted internal parameter order to Meter - thanks Racheli Golan for the report
Adjusted the Docs to the new Game parameters - otherwise, nothing changed.
28. ZIM KIDS
https://zimjs.com/kids.html
ZIM Kids now has four new intro workshops
These are called Basic Bug, Bug on Path, Bug with Sugar and Bouncing Bug!
The other four tuturials as well as the Spells and Magic pages are updated to ZIM Cat
Note: ZIM Skook and the Learn JavaScript with Creative Coding are at 10.9.0
A note will be placed regarding ZIM Cat - TIME.
Patched the command S in Mac to test the page - thanks Jonathan from Slack!
29. PATCHED
Added shadowBlur and shadowColor to Scrambler for when an item is picked up - BREAK of later params
Fixed a glitch in the Scrambler so it scrambles to a non-correct order
Added num parameter to Scrambler to visibly scramble a number of times within the time provided - BREAK of later params
This is good for scrambling a small number of things - eg. set num to 3 to scramble 4 things in 2 seconds
Fixed ZIM Tips which extends a Label and we had added bold, italic and variant to Label but not to the Tips - thanks Racheli Golan for the... tip
Also added bold, italic and variant parameters to the end of the tips
Fixed up a typo in ZIM Base which was outputting a 3 in front of an async call - thanks Andi Erni!
Fixed animate() to handle relative values when loopPick set to true
Adjusted getLatestVersions() to return a JSON parsed object as expected and intended
Fixed minified version for getLatestVersions() - minify is changing async() return function name
** yay! Remembered that async() has a third parameter to use the function as a string to overcome minify problem
Fixed up dispose of Tag, TextArea and Loader - it called a "removed" event which was trying to delete the html tag but it was already gone - thanks Racheli Golan for the find.
Fixed glitch in Scramble - so fast tripple clicks do not mess it up - applied mouseEnabled false before animating and mouseEnabled true when done
Fixed bug in running Sprite from JSON - was referencing frame in Sprite and should have been zimDefaultFrame - or zdf. Thanks Racheli Golan for the find.
Took off container dispose for Blob and Squiggle as that affects how they are recreated with a points change - went back to 10.9.0 and patched that there too
Fixed animate() for shape tweens - the index for events needs to be updated anytime parameters change - thanks Mike Gossland for the report.
Fixed Blob and Squiggle issue with bringing back controls - the mousedown -> pressdown on Shape was left in a test mode - tricky bug.
Still needing to adjust pressdown so that target and currentTarget report properly...
Updated Scrambler to have a swap parameter before the style parameter.
Swap will not automatically shift the tiles as a tile is dragged but wait until the drop (thanks Ami Hanya for the idea)
Added swapLock parameter to Scrambler to lock tiles in place that are placed - thanks Netanela for the request!
Added a testItem(item, index) to test a specific item in the Scrambler
Also added a complete property to the Scrambler - but usually the "complete" event would be used
then the dragged tile goes where dropped and the dropped on tile goes to where the drag came from
Fixed asset() without preload to addTo() as placed not after when loaded - this keeps the levels - thanks Ami for the report
Added label property to TextEditor() to get or set the label the editor is applied to - thanks Ami
And made the show() method also set the editor to whatever label is provided
Adjusted animate drag on path to properly flip if object is rotated to start
We had fixed up flip when dragging on path to be more stable and missed adjusting pre-rotated objects
This is not perfect as it handles only pre-rotation of 90 and -90 or 270.
Put unusual start angles in a container and animate the container if there are any issues.
Added timeUnit to docs for animate() parameter and added timeCheck parameter to animate
Set the min time for warning on wiggle() to 40 as we often wiggle greater than a 10 second time
Fixed Button toggled text, color and rollColor when these have been changed after creation
Fixed Button clone() which was missing various new toggle colors
Turned ColorPicker indicator to mouseEnabled false so button shows cursor still when rolled over
30. PATCHES SINCE NPM
Adjusted Bitmap so it does not specify sourceRect if being passed a video
CreateJS had a warning about the sourceRect needing to be same dimension as the video
Which is too bad as it would be nice to cut video into pieces too... would need to confirm that is not possible
Adjusted ZIM asset object {id:, src:, type:} to include a type
so a JSON file can be loaded without a .json extension for example - thanks Frank Los for the prompting!
Adjusted ColorPicker selectedColor to convert to lowerCase as the colors are set in lowerCase BREAK
Fixed rollBorderColor to default to borderColor
Fixed Emitter so emitterPaused is true if set to startPaused false
Fixed the recursive parameter on noDrag() so it can receive a false - thanks Cajoek for working through this with us
Adjusted windowWidth(), windowHeight() and frame.swapRotation on mobile
to not set swapRotation when in an iFrame - it was reading a wide iframe as wrong when shown in vertical view on mobile
see what we mean... horizontal aspect ratio iframe on vertical device or visa versa - this was giving a false reading
leading to a very confusing bug with ZIM in iframe on mobile when changing orientation
Fixed Synth to play the right note to start - was trying to apply an octive shift test when we did not need to
Worked on Synth to reduce crackle on Firefox - thanks Frank Force for the advice
Adjusted stop() parameter to be release in seconds - not stop time
Added setInput() and dispose() methods to SoundWave - to set a different sound and dispose - thanks Amy Hanya for the suggestion
Added ramp(volume, duration) to Synth tone() this will set the volume smoothly without pop or crackle (as best as possible)
The volume should be used only for animation.
Adjusted stop() method of Synth tone() to use ramp fix - thanks Frank Force for the aid - it is better but still not perfect
Swapped in a new Synth play() with updates from ZzFX - sustainVolume and decay parameters were added
The patch now matches updates to the tool https://killedbyapixel.github.io/ZzFX/ and keep backwards compatibility
Fixed Window resize and maximize
maximize was missing stage update since we removed the constant update in window scrollbar
resize was broken by that.noDrag() on end of window drag as we made noDrag() recursive
so need to pass in false to noDrag to stop it setting noDrag on resize handle too!
went through and checked rest of noDrag in ZIM - seems okay
Fixed clone registration issue - typo was setting regY as regX
Added callType parameter to animate endTween() method with three values "all", "none", "main"
These will call the callback function (or not) when endTween() is used.
"all" will call the callback functions in a series where "main" will not
Thanks Disco Drama for the suggestion and testing
The current default is "none" for backwards compatibility but in version 01, this will be changed to "all"
Added a madeWith() method to Frame to create an ZIM icon with Made with ZIM beneath (customizable) - thanks Iestyn for the request!
Added a noCORSonImage property to the ZIM asset object for loading assets
this will avoid CORS errors by loading an HTML image into a bitmap and then applying an expand to add a CreateJS hitArea
See https://zimjs.com/explore/imagewithnocors.html (thanks Disco Drama for the find!)
it means that the full image will be interactive and not just the opaque parts of a png
it also does not count in the progress property (bytes loaded) of the progress event - but it does trigger assetload and complete events
Updated ZIM Window to remove drag bounds check if enabled is set to false
this will avoid a positioning issue when animating the location of a Window or List.
See https://zimjs.com/test/listmove.html as a sample of using this - thanks Disco for the report
Fixed animateTo() in List to use seconds by default
Fixed spacing issue on custom non-equal width objects in a horizontal List (or Tabs) - thanks Disco for the find
Fixed content property of selected items in List for custom items - this was documented but missing in practice - thanks Disco for the find
Added noScale to List at end of parameters before style.
This will make the list not scale custom objects and ignore the listNum parameter - thanks Disco for the testing
IMPROVEMENT updated Sprite so that pauseOnBlur activates the sprite again when the user goes to another tab and then tabs back. Thanks Chris S for the report
31. THREE
Updated the ThreeJS helper file to version 2.1 with an adjustment to position() and resizing.
If you were centering the ThreeJS then there is no change - the fix is for not centered. Thanks Iestyn for the find.
32. DOCS
Added a new introduction at the top of the zim_docs.js file
that explains a little bit about the ZIM philosophy with respect to ES6
and other code environments - we do not mean to be dismissive - rather just trying to guide.
ZIM 10.9.0
BIND - IMPROVEMENT
https://zimjs.com/ten/bind.html
ZIM now has data binding on any DisplayObject property that is JSON ready.
So we can easily send or receive data for setting Container, ZIM Shape, Bitmap, components, etc.
For example, Circle x and y or the text of a TextArea.
There are LOCALSTORAGE, GET and POST options
LOCALSTORAGE will store to the user's computer and is syncronous saving and retrieiving all the data
GET uses ZIM async() with JSONp for getting around security/CORS issues
so works from local computer to the server or cross domains - limit of 2048 characters of data
POST uses ZIM Ajax() unlimited data but file must be on same server as data unless CORS is worked out
There are to() and from() methods for sending and receiving data
The DisplayObjects now have bind() and noBind() methods
There are GET, POST, LOCALSTORAGE, TO and FROM global constants available that evaluate to lowercase strings
Reports can be turned on (Bind parameter and property)
and there is a bind.report() method to show a snapshot of the current data
See docs for examples
AJAX
ZIM has an internal Ajax class with get(), post() and put() methods
This is very easy to use and examples are provided
ZIM async() can still be used to get around security/CORS issues
LEVEL
https://zimjs.com/ten/bind.html - note the level is stored as well
ZIM DisplayObjects now have a level property to get and set
This just returns the parent getChildIndex() and calls the parent setChildIndex()
A level of higher than numChildren-1 will be set to numChildren-1
A level of lower than 0 will be set to 0
FLARE
https://zimjs.com/ten/flare.html
ZIM Flare 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.
SPECIAL COLORS - IMPROVEMENT
https://zimjs.com/ten/flare.html
ZIM now has GradientColor, RadialColor and BitmapColor available as colors
These can be used anywhere a color is applied to a ZIM shape or component.
new Circle(100, new RadialColor([blue,green],[0,1], 0,0,100, 0,0,0)).center();
and they can be assigned after as a color or borderColor property, etc.
ADDED mist and fog colors #bbb and #aaa - between light and silver
NOTE: for a ZIM Shape() apply these the old way with:
lf() beginLinearGradientFill
rf() beginRadialGradientFill
bf() beginBitmapFill
ls() beginLinearGradientStroke
rs() beginRadialGradientStroke
bs() beginBitmapStroke
SERIES - IMPROVEMENT
the series() function has been really handy so we have give it some more options.
for instance, start at 3, reverse and don't go past 0 (or length-1 if not reverse):
var nums = series(0, 1, 2, 3, 4).jump(3).reverse().constrain();
Here are the new chainable methods and there is also an index property (same as jump)
step(num) - num defaults to 1 - the number of items to move the index - or use index property
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
constrain(boolean) - boolean defaults to true - keeps index between 0 and length-1 - or pass in false to cancel constrain
FAST FRAME
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 zimDefaultFrame
and will handle various scaling settings due to ZIM Retina.
WARNING COLORS
zogy() has been used for all ZIM warning colors
ZIM warnings can be turned off by setting zon = false before loading ZIM.
CREATEJS - IMPROVEMENT
CreateJS 1.3.0 is available on the ZIM CDN https://zimjs.org/cdn/1.3.0/createjs.js (and createjs_doc.js)
This has fairly deep adjustments to mouse position, localToGlobal, globalToLocal, hitArea, mask and cursor.
Generally the change relate to scaling the stage for the window devicePixelRatio
There is a createjs.stageTransformable property set to true - this means the adjustments have already been made
this allows us in ZIM to either make the adjustments or not - and avoid a double adjustment
This update is part of a larger directive to maintaining CreateJS
We have started a Slack team and are discussing a path forward with the CreateJS team.
Message Dan Zen on the ZIM Slack at https://zimjs.com/slack if you are interested in getting involved
GENERAL
bot() and top() fix to still return obj for chaining if not yet added to stage
Adjusted talk() on Accessibility to read message only once on NVDA - thanks Nathan IMPROVEMENT
Label outline has been adjusted to align properly - thanks Racheli Golan for the guidance IMPROVEMENT
Label outline property has been removed BREAK - there still is the outlineLabel property to the CreateJS Text outline
The outline property was a container for adjusting the outline - now that it is fixed, it is not in a container
PATCHES
updated Bind to include master parameter such as an id that will get sent with all to() and from()
added extra to to() and from() in Bind() to send extra information to server
for instance a search query to will then affect the bound information like text of a TextArea
Adjusted Ajax() to handle master and command and extra in post()
Adjusted async() to handle a queue of call functions with the same name
if more than one async() with the same named call function is run at the same time
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
Added masterFilter, bindFilter and filter parameters to Bind(), obj.bind(), add(), to(), from(), remove()
These are functions that run before or after data calls allowing data to be adjusted
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
Removed Bind() full parameter - leave off targets and filters to send or get full data
Added report param and prop to Bind() along with report() method for current data snapshot
Added couple parameter to ZIM Bind() just before smartDecimals BREAK
Added ZIM couple(json) and decouple(json) functions to code module
These flatten and unflatten JSON - used in ZIM Bind()
This may help enter data into database tables
Added couple parameter to ZIM Ajax() - works with POST only
Added more reports when Bind() reports param is true
Added zim.colors and zim.colorsHex to lookup ZIM colors
Added a "zim" value to the convertColor() toColorType parameter
var color = pink;
zog(color); // #e472c4 - ew...
zog(convertColor(color, "zim")); // pink
Fixed and adjusted the default Frame width and height to 1024x768 to match template
Made Emitter() interval pause when screen is minimized
If you ever have something not function right after minimized - let us know.
Or if in your app falling flowers stack up at the top...
set the 5th parameter of interval to true to pause on minimize.
We did that with animate() a while back defaulting to true
But we left interval defaulting to false.
Patched background color of Tabs and List for custom shapes to be clear with expand(0)
this was faint but you could slightly see it. Thanks DNVS for the prompting.
Fixed Window when scrollBarActive was set to false - missed an update to a conditional - thanks again DNVS.
Adjusted the ZIM drag() slide mode to turn off the ticker if the slide motion has stopped
Thanks DNVS who reported the Window was constantly calling a stage update - we looked into it and that was the issue.
Added lock parameter to ZIM Ajax() to send an optional lock id to the server - where it would need to be processed
Added toLock() to ZIM Bind() to get latest values, provide a filter function where data can be updated, and then send data to server
This also sends a lock id to the server at the start to lock the record and at the end to unlock the record
The server script would need to process the lock id with a couple easy steps
This prevents updating old information in cases where multiple users share the same final JSON string data
Patched Accessibility with improved talk() method - thanks Nathan for the fix
Patched blurDetect() to not automatically unpause objects when window comes back
but rather remember which objects were paused an only unpause ones that were not originally paused
This affects animate(), emitter(). And also any timeout and interval calls with pauseOnBlur set to true.
Patched resetTween, replayTween to properly reset rotation when animating on path
Patched pointAlongCurve angle equation - better!
Was averaging from point to .05 forward rather than half way back and half way forward.
Patched noMouse() - it was not saving last mouseChildren property properly.
Patched Stage() and StageGL() to not override scale properties if retina is not on - caused problems with CreateJS transformPoint
Added a MOBILE constant that defaults to "default" and thus ZIM uses the results of zim.mobile();
If MOBILE is set to true then mobile() will always return true and so various parameter defaults will assume mobile.
If MOBILE is set to false then mobile() will always return false and so various parameter defaults will assume not mobile.
Read the docs at https://zimjs.com/docs.html?item=MOBILE - thanks Ami Hanya for the idea.
MORE BIND
added stop() functionality to after data is received in from but before data is applied (it was supposed to be there too)
adjusted toLock() to bypass to to() if type is localStorage
Fixed dragging on multiple frames - this was working fine in earlier versions - and now it is again in 10.9.0 - thanks Lee Grey for the report.
Added tileCol and tileRow properties to Tile items - there is already a tileNum property but a col and row is handy to have without calculating...
IMPORTANT - adjusted clone to clone mouseChildren property - this has been missing since the start!
Added paddingRight and paddingBottom to expand() making it three mode parameter system: (thanks Karel Rosseel for suggestion)
** one parameter for all padding
** two parameters for left/right and top/bottom
** four parameters for left/right/top/bottom with any blank to receive default 20
Fixed ZIM Pen to properly handle the number of undo commands and
stopped pen from drawing when starting outside bounds of MotionController - thanks Cajoek for the report
Fixed measure field issue with Keyboard and updated https://zimjs.com/keyboard/ to 10.9.0
dispose() now dispatches a removed event as it should when the item is removed - thanks Ami Hanya for the report
Also made ZIM Squiggle() and Blob() get removed from stage when dispose() is called.
Added a try catch for css rule reading - thanks Dimi for the find
https://stackoverflow.com/questions/49161159/uncaught-domexception-failed-to-read-the-rules-property-from-cssstylesheet
And fixed a physics removeFrom() issue where the physics object was being set to null before being removed
Updated ZIM Marquee to include marginLeft and marginRight in the ZIM DUO - thanks KV for the report.
Adjusted asset("sound.mp3").play({loop:true, loopCount:2}) to play 2 times not three times to match animate()
note - for sound CreateJS uses only a loop parameter - set to -1 forever... 0 for no loop (play once) and 1 for one loop (play twice), etc.
So the loop has been left like this - but if using loopCount then 1 is play once, 2 is play twice, etc.
IMPROVEMENT updated Sprite so that pauseOnBlur activates the sprite again when the user goes to another tab and then tabs back. Thanks Chris S for the report
ADOBE ANIMATE - patched scale code in ZIM 10.9.0 to work with older CreateJS in Adobe Animate
And patched again 5/23/20 to drag on stage propertly - thanks Frank Los for working through that with us
There is now a physics example included in the ZIM Shim ZIP.
Patched ZIM Accessibility to make tags outsize Adobe animation_container which is scaled
Patched ZIM Accessibility to always resize tags when resize is called - was leaving inivisible tags but they can capture focus
Thanks Nathan for reporting issues.
PATCHED CreateJS 1.3.0 - and added an new version CreateJS 1.3.1
Both are the same on the ZIM CDN - the new version is for NPM
Adjusted CreateJS hitTest() on DisplayObject() to NOT convert due to stage scale
The CreateJS Bitmap() and Shape() do not need the conversion
The hitTest() on Container() that overrides the hitTest() on the DisplayObject() does need the conversion
This fixes hitTestPoint() the ZIM side for Retina hitTests on ZIM Shape() and ZIM Bitmap()
Fixed CreateJS mouse code with scale conversion to get correct mouse position when mouse is off screen
ZIM PHYSICS - PATCH
patched physics_2.0.js to work with 10.9.0 and CreateJS 1.3.0
UPDATED
This was another huge update...
Support on Patreon https://patreon.com/zimjs is always appreciated - but only if able and never expected or required
Updated CDN, Code Page, GitHub, Distill, NPM, TypeScript, Templates, Slack, Blog, Bubbling videos, Social Media
ZIM 10.8.0
WRAPPER
https://zimjs.com/ten/wrapper.html
Added to Control Module after Tile()
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.
SELECTOR
https://zimjs.com/ten/selector.html
https://zimjs.com/ten/wrapper.html (several selectors are used in this example)
Added to Display Module after Slider
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.
IMPROVEMENT
Selector has a selectedIndex parameter so we
adjusted all components with selectedIndex to include selectedIndex as a parameter
BREAK - these were added just before the style parameter near the end of the parameters for
RadioButtons, Indicator, List, Stepper, Slider (currentValue), Dial (currentValue), Tabs, Pad, Radial, ColorPicker
Now an initial selectedIndex property can be done in the parameters
WINDOW - IMPROVEMENT
https://zimjs.com/ten/window.html
added fullSize, fullSizeColor and resizeHandle parameters to Window
these work to maximize / unmaximize the window when a titleBar is present
the resizeHandle lets the user resize the window from the bottom right corner
Added support for automatic resizing of Wrapper
ANIMATE
Added pauseOnBlur parameter defaults to true IMPROVEMENT
this pauses the animation when the window reduces or a different tab is selected
and helps keep animations in sync - as ZIM uses a requestAnimationFrame which slows down if the window is not showing
Also added the parameter to timeout and interval - although it defaults to false there
added loopPick parameter after loopWaitParams BREAK parameter order for anything from rewind on
this will call ZIM VEE values for animate properties again at each loop - thanks GSAP for the prompting
we always wanted to do this but CreateJS had no way to change the properties once we start the animation
so we adjusted the ZIM version of CreateJS 1.2.4 to expose the animation properties and use this to provide the feature
We will put in a pull request to CreateJS to have a line added.
After this if statement finishes: if (inject = this._injected) {
then add this.step = step; to expose the properties to ZIM animate.
Currently does not work with from set on a sequence.
Added a rate parameter near the end of animate() BREAK to change the rate of speed of the animation
This calls to CreateJS timeScale which is more efficient than the existing percentSpeed parameter
and can use ZIM VEE (Pick) to adjust each loop with loopPick set to true
Fixed sequence call to call only on last animation of a sequence (or a loop of a sequence)
Set animate to css true if there is no Frame - that lets animate be used without a Frame
Added example to dot animation to docs - also added description to props parameter
For example: animate(new THREEJS.mesh(etc.), {"rotation.y":360*RAD}, 5000);
BITMAP - BLITTING
Adjusted Bitmap to receive a DisplayObject and automatically use its cache canvas
For example if circles is a Container of Circles. The old way:
var splat = new Bitmap(circles.cache().cacheCanvas).addTo();
circles.uncache();
becomes the following - if circles was cached it stays cached if not then it stays not cached
splat = new Bitmap(circles).addTo();
COLORS IMPROVEMENT
added color.lighten(ratio) and color.darken(ratio) methods to colors
as short-cuts to colorRange(color1, color2, ratio)
red.darken(.2) gives a slightly darker red
ratio is between 0 (red) and 1 (black)
these are methods of a String and also functions darken(color, ratio), lighten(color, ratio)
Also adjusted colorRange to actually default to .5 ratio as the docs say
GENERAL
BREAK - added a percentClose parameter to Circle that defaults to true
set to false to not close the border on a Circle with a percent set
Thanks Yan Zhang for the suggestion!
Changed ZIM Game module Scorer to set type property to "Scorer" instead of "Score"
All ZIM object should return the exact class name from which they were made
In ZIM physics, for the contact callback function first parameter, IMPROVEMENT
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
adjusted loc() to properly set at index when index is provided and it is locating in same parent
moved move/mov style to after loc and pos so can move after positioning in STYLE
Fixed Window swiper area adjust after scrolling with scrollbar - on scrollBarDrag true
Adjusted interval to not use requestAnimationFrame - this better syncs the interval with setInterval
thanks Racheli Golan for noticing time discrepancy with fast intervals
BREAK Changed the Stepper default stepperType to "number" rather than "list"
Need to set the stepperType to list for a list of words for instance in the stepper
Set the default max for the Stepper to 10 instead of 100
CREATEJS
A new CDN version at https://zimjs.org/cdn/1.2.4/createjs.js has been provided
Note that this is the minified version of CreateJS - we have adjusted the file name
and an unminified version is at https://zimjs.org/cdn/1.2.4/createjs_doc.js
The new CreateJS exposes animation properties - with one line addition
to allow ZIM to dynamically change the animation properties after each loop - see ANIMATE above.
Patched this with Ferudun Vural fix for removing unwanted double touches - thanks Ferudun!
This has been reported on the CreateJS GitHub as well.
ADDED
Colors for zog() - thanks Yalon and Ami for the techniques
zogg("green");
zogp("pink");
zogb("blue");
zogr("red");
zogy("yellow");
zogo("orange");
Added run(time, close) method to ProgressBar to show and run the progress bar
Just runs an interval in behind and updates the percent - the close will set the autoHide setting
Added a "complete" event to the ProgressBar that fires when the loading or running is complete
PATCHED
Label outline - moved it a little center on text better
Also fixed outline when lineWidth is specified and dynamically changed (thanks Racheli Golan)
Fixed transform to dispatch a "transformed" event when changing from one transformed object to another and dragging immediately
POST NPM PATCHES
Adjusted Button so backgroundColor, rollBackgroundColor, color and rollColor get a delayPick for style - for instance buttons on Sliders
Added currentValue parameter to before style on Slider BREAK
Added a change event to Tile 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
Fixed when Blob or Squiggle x and y has been adjusted and points is set
was jumping to x and y of 0,0 - noticed when adding points after x and y is set.
Fixed List when being used with group for Style
was calling Window with wrong number of parameters with fullSizeColor added
Fixed Accessibility on resetting tabOrder was losing Highlight
This was because Aria was being turned on thus hiding Highlight so there is not two highlights
Well, NVDA needs Highlight so just took that test out - thanks Nathan for the report.
Fixed Pen clear() - was not clearing if only one layer - took test out and seems to work fine.
Tested in Gen-Pen as well - all is good.
Adjusted allowDefault of Frame to work fully as property - get set worked but rest was using parameter
Also added allowDefault test for auto scrollX(0) and scrollY(0) on Frame in full, fit and outside modes
PATCHED PHYSICS 2.0
Added pause(type) method to Physics so physics.pause() will pause and physics.pause(false) will unpause
Also added a read-only paused property - thanks Shan Ruan for the prompting
and a read/write timeStep property that if set to 0 will pause with normal being 1/physics.step
The timestep property in theory could be animated to change the speed of the physics
ZIM SHIM
https://zimjs.com/animate/
The ZIM Shim ZIM has been updated with ZIM 10.8.0 in its template js file
This includes an update to 10.8.0 that captures the frame.x and frame.y on window resize
when published as responsive. This properly positions TextArea and Tag.
Thanks Shauna B. for the report.
SITE
The CDN has a new page at https://zimjs.com/cdn/
ZIM Explore has a new page at https://zimjs.com/explore/
These were added because the auto directory functionality of the site has been turned off
UPDATED
CDN, Code Page, Distill, Bubbling, Slack, NPM, TypeScript, Templates,
Still to come: Blog, Patreon, Social Media
ZIM 10.7.1
CLONE
Container and descendants of Container using ZIM VEE
now have an exact parameter for clone: clone(exact)
This defaults to false to let ZIM VEE (Pick) parameters operate
Set exact to true to clone an exact copy of the object.
See docs for Container, Circle, Rectangle, Triangle, Squiggle, Blob, Label, Tile, Beads
-------- example 1
A Circle is a descendant of a Container as are all ZIM shapes and components
The Circle uses ZIM VEE so it will continue to do so if it is cloned
const circle = new Circle(10, [blue, green]); // will be blue or green
circle.clone(); // will be blue or green - not necessarily the same as the original
circle.clone(true); // will be the same color as the original
-------- example 2
If a Container (or Tile) has a new Circle(10, [blue, green])
Then the original color(s) will be randomly blue or green
A clone will by default use the ZIM VEE [blue, green] and randomize the color(s) again
Setting exact to true will clone the original colors
--------
Warning: some styles may not be cloned exactly
For example, LabelOnPath does not use ZIM VEE - except through styles
so it cannot be cloned exactly if styles are applied.
Also remember duplicate() that clones and copies custom properties
duplicate now also has an exact parameter
ISPICK
Added an isPick() function to code module
Returns whether an object is a SPECIAL Pick literal
of type [], {min:val, max: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
This was used to let regular values be cloned if changed without needing clone(true) for exact
For instance, cloning a Label("hello") after its text property was changed to "goodbye"
Thanks Ami Hanya for the report
Note: cloning a Label(["yes", "no"]) and changing its text property to "maybe"
would result in a "yes" or "no" unless clone(true) for exact was used
GENERAL
Updated pos(), center() and centerReg() for objects and containers without bounds.
If you center an object without bounds then it will center the registration point at the center of the container.
If the container has no bounds then it will center the object around the container's registration point. (thanks Ami Hanya for prompting)
Fixed bug in animate series where if the same object is animated in another series it was keeping old defaults (thanks again Ami Hanya)
Fixed bug in animate - now can drag after animation has ended (unless explicitely using stopAnimate())
Fixed bug in frame dispose which now joins Container in properly disposing recursively - thanks Alfred Yim
Adjusted mouse() and noMouse() to remember last mouseChildren and reapply when swapping back and forth (patched ZIM 10.7.0)
Updated Label to remember original parameters for size, font, color, fontOptions
to handle dynamic parameters when cloned (in a Tile for instance) - text was already remembered
Fixed style on LabelLetters - was accidentally set to LabelOnArc
Fixed clone on ZIM Beads - was missing a parameter near the end...
Fixed ZIM shape clones getting radialGradient if radialGradient is applied - accidentally used linearGradient. The linearGradient setting was fine
PATCHED
Fixed animate() shape tween - in 10.7.1, 10.7.0 and 10.6.1 - thanks Lily Da Huang for the report.
Shape tween needs events turned on in animate - and the index number for the parameter changed after adding the rewindTime and rewindEase parameters
We have a big message warning us... but we missed it... will remember next time!
Fixed animate on a path which was going back to 0 when done. Thanks Shan Ruan for the report.
This happened when we added the startPercent and percent features.
The modulus is used... and when it is 100% that was being set to 0%
which is not wanted when going forward but would be wanted when going backwards - tricky...
Patched an issue when animating beads in a series.
We were delaying the first sequence by 20ms (since the dawn of time) but this messed up a 0ms sequence every once in a while.
So we adjusted that to not do the 20ms delay if the sequence delay is 0.
Probably good enough. But please check any 10.7.0 apps to make sure they are okay with the patch.
Fixed duplicate() to not duplicate the parent property as the clone does not actually have a parent to start (thanks Ami Hanya)
Fixed Squiggle and Blob to drop properly when registration point is changed
Updated ProgressBar() to place the circle bar on the circle - since the fixes to pos() - thanks Ami Hanya for the find
Updated Accessibility() to make sure dispose checks for tag outerHTML property - thanks for the graceful error handling HTML... and thanks Nathan for the report
Patched pos() to work properly within containers with flexible bounds after adding more than one object
This is tricky as the added object changes the bounds and then positioning was set - so now set bounds then release bounds.
Properly added size, font, color, fontOptions to ZIM VEE (Pick) values
Made Tabs work with group STYLE - was missing propert group assignment
Made Tabs, List and Tips work with center, centerReg, pos STYLE settings
These are functional styles so do not get inherited and were removed from inheritance objects
but inheritance objects were a reference to the Style objects rather than a copy
so these were being removed from styles before being applied - fixed.
Fixed Label with Pizzazz backing and padding
Fixed Organizer arrows which were causing highlight of adjusted buttons being lost
Was a fix in the Tabs button being copied - should not have overwritten tabInfo
Updated CreateJS 1.2.3 to stop flashing in Chrome on PC TouchScreen - thanks Ferudun Vural for the report
See https://github.com/CreateJS/EaselJS/issues/997?#issuecomment-569596403
Adjusted capturing frame.mouseX and frame.mouseY to work with Animate where the stage is already made - thanks Shana B.
Adjusted Tabs to handle delayPick style for colors and backgroundColors, etc.
Added childrenToBitmap() method to Container to turn its content into a Bitmap and place it inside the container
This will remove all the children and leave just the Bitmap as the container's content
Added an extra 200 last resize dispatch to catch stage dimension change when lots of processing in stage update
Implemented RadialMenu currentEnabled and currentSelected params - they got left out
Fixed Label maxSize param to accept style - thanks Cajoek!
Fixed the Ticker update when a second "full" mode Frame is made and window resized
UPDATED
CDN, Code Page, Templates, Distill, NPM, TypeScript, Slack, Blog, Social Media
ZIM 10.7.0
BEADS
Added a Beads() class to place a given number of objects along a path
ZIM VEE (Pick) values can be used to place random objects or a series of objects
See https://zimjs.com/ten/beads.html
PATHS - IMPROVEMENT
Added a Bezier() class to code module under classes
Thanks Ivo Wetzel - StackExchange
This adjusts points at a ratio (0-1) along a path
so that they are evenly distributed
Adjusted pointAlongCurve to use Bezier
This is used in various places like Squiggle, Blob and path animations
Added even parameter to pointAlongCurve to use modified Bezier if true
Adding points to path still uses unmodified Bezier for handle equations
Adjusted hitTestPath and animate drag on path to use even:true for interpolate
SQUIGGLE AND BLOB
IMPROVEMENT Added approximateBounds() method to make bounds on Squiggle and Blob
Thanks Paul West for the recent request - it was in the plans since we made hitTestPath - good to see it work!
Added ZIM VEE (Pick) to Squiggle color parameter and Blob color and borderColor parameters
Added command and exact parameters to Squiggle and Blob clone parameters
Added even parameter to Squiggle and Blob interpolate() method
IMPROVEMENT Made adding points more accurate - was missing additional point on calculation
Also doubled the accuracy in adding points
IMPROVEMENT Adjusted Blob so if interactive is false, it still allows a cursor - for instance if drag() is used
Weird situation... if a child is set to cursor="default" then parent cursor has no effect on child
but if the child is set to cursor=null - then parent cursor is used when over child
ANIMATE ON PATH - IMPROVEMENT
Added startPercent and percent properties to the props animate object
These work only when animating on a path (Squiggle or Blob)
For example: props:{path:new Blob().center(), startPercent:50, percent:20}
This would animate along blob starting at 50% and going to %70
loop and rewind works - but startPercent and percent are currently not supported with drag on path
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
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
Also added localToGlobal support to extra properties like zoom and speed
DISPOSE - IMPROVEMENT
dispose was adjusted to recursively go through all descendants of Container
dispose on a Container now calls all custom dispose methods
this was causing too much recursion but a two-way check system has been put in place
Thanks Cajoek and Racheli Golan from Slack for the issue report
This should now properly dispose recursively and from containers and reduce memory load
It is rather wide-spread so let us know if you notice any issues
IMPROVEMENT - Added arrows as an option in the List Accordion object:
{menu:{...}, shade:true, dim:true, arrows:true} - thanks Christopher Browne for the request
made Slider Button and Bar follow expand STYLE on Slider
added index property to Tabs and List items
made Accessibility alwaysHighlight AHBorderPadding work properly
added rewindTime and rewindWait to sequence animation
Fixed animate with dynamic in a sequence - was losing waits and information transfers between tweens (1 day bug fix)
Removed ZIM VEE (Pick) on sequences for the extra parameters... zoom, fade, speed, layer. (already removed from regular tweens)
IMPROVEMENT Added mouse() and noMouse() methods to ZIM Methods
These are chainable shortcuts to setting mouseChildren and mouseEnabled properties
the noMouse() can be used to reduce processing on complex objects
PATCHED
Fixed Frame dispose so if the frame disposed is the zimDefaultFrame then it sets zimDefaultFrame to null
Otherwise, building a new Frame after was causing issues. Thanks Alfred Yim for the report.
Animate on sound was pausing sound when animate done so now do not pause target when target has pan property
Still might have that issue on pauseAnimate - would need to use property name other than paused for animate...
Let Label color, size, font, fontOptions pass through clone with values from before defaults are applied
this lets a label be cloned and take styles - will look into this technique for other Display Objects...
Fixed animate on a path which was going back to 0 when done. Thanks Shan Ruan for the report.
This happened when we added the startPercent and percent features.
The modulus is used... and when it is 100% that was being set to 0%
which is not wanted when going forward but would be wanted when going backwards - tricky...
Patched an issue when animating beads in a series.
We were delaying the first sequence by 20ms (since the dawn of time) but this messed up a 0ms sequence every once in a while.
So we adjusted that to not do the 20ms delay if the sequence delay is 0.
Probably good enough. But please check any 10.7.0 apps to make sure they are okay with the patch.
UPDATED
CDN, Code Page, Templates, Distill, TypeScript, Bubbling Vids, Examples, Slack, NPM, Blog, Social Media
ZIM 10.6.1
SITE UPDATES
Added intro page to Gold Bars
and link to intro page from Start ZIM buttons on Banner pages
Added a Learn JavaScript with Creative Coding page
Adjusted the ZIM TEN page to show all thumbnails
Adjusted the Marquee page to act as archive for promos
Added new promos to front page Marquee
Adjusted news page to show large panels of news features
such as ZIM TEN, Code Updates (here), Marquee, Bubbling,
Blog, Learn JavaScript, Patreon Community news and Twitter
LEARN JAVASCRIPT
https://zimjs.com/learnjavascript.html
Started a new Series now on Video 20 for learning JavaScript
This follows the lessons in ZIM Skool
The videos are about half an hour each
Please share if you know people who would like to code
in a colorful environment for left and right brain learners!
ZIM LOOP
loop now returns true by default - potential BREAKIMPROVEMENT This allows loop to more easily act like a gate:
var array = [0,0,0,1,0,0,0];
var pass = loop(array, function(val) {
if (val!=0) return false;
});
if (pass) zog("passed"); // by default loop returns true
else zog("failed"); // false inside loop gets assigned to pass
// above will log failed
ZIM ANIMATE - BREAKIMPROVEMENT
added rewindTime and rewindEase to animate() after rewindWait parameter
see - https://codepen.io/zimjs/pen/PooyqPe
Fixed resetTween() and replayTween() on objects that have been animated
so that they work with path animations
FRAME
added a global asset() function that references frame.asset()
So once assets are loaded asset("image.jpg").center(); will work
This is a direct reference to frame.asset("image.jpg")
GENERAL - IMPROVEMENT
Fixed TransformManager so persist works with Blob and Squiggle
This had been broken since work on Layer in 9.5.0
Fixed Emitter so removeFrom() will remove the particles as well
and then if we addTo(), center(), etc. we add particles back to emitter's parent
We should really emitter.dispose() as well if this is permanent
Added cache parameter to LabelLetters to cache the letters
Fixed Frame dispose() to add back zil events for window keyboard defaults
for scroll, page up, page down, mousewheel, etc.
Also added back the scrollbar for when it was removed with ZIM Frame.
Removed highlight rectangle in Accessibility when disposed - thanks Nathan for the report
PATCHED - ZIM 10.6.1 and 10.6.0 for SHIM - was giving stage not found error - needed shim.stage
thanks Nathan for the find
Updated the Organizer - was giving error due to changed button system in Tabs
Fixed spacing in Organizer if any of useAdd, usePosition, useRemove is true
Fixed dispose in Pen - was giving an error paper not defined - thanks Alfred Yim for the find
Fixed animate() series calculation for rewindTime... had transposed a ternary operation
Updated CDN, Code Page, GitHub, Docs, Distill, Slack, NPM, TypeScript and Templates
ZIM 10.6.0
ZIM MINIMAL TEMPLATE
The Code Page now has a minimal template - thanks Eric Noh for the suggestion
The original template is there too and either can be copied with the COPY button
DPAD COMPONENT MOBILE IMPROVEMENT
Added DPad() class - a round joy-stick-like controller to replace arrow keys on mobile
good for moving things around by passing the DPad into the MotionController
Adjusted MotionController type parameter to accept "DPad"
SEE https://zimjs.com/ten/dpad.html
RADIAL COMPONENTS
Added LabelOnArc() to put a ZIM Label on an arc (remember there is LabelOnPath as well)
Added Radial() and RadialMenu() classes
These make radial buttons similar to Tabs
The RadialMenu provides a hierarchy menu similar to List Accordion - but on rings
Adusted Hierarchy to be able to add extra properties in simple format
used in RadialMenu for adding styles to each radial
SEE https://zimjs.com/ten/radial.html
ANIMATING TEXT
Added LabelLetters() to break apart a Label into individual letter labels
This is handy for animating letters using animate with a series - also for kerning letters
SEE https://zimjs.com/ten/radial.html
HOLD
Added hold() and noHold() chainable methods
Similar to tap() but will call function when object is held for longer than a specified time
The time is handled with a setInterval at which point it checks if in same position
If it is in a different position then the user must let go and try a hold again to trigger hold
Hold must keep cursor within a certain distance (5px) and be held for a certain time (1500ms)
This can be used to replace shift, ctrl, etc. keys on mobile
HOLD ON BLOB AND SQUIGGLE MOBILE IMPROVEMENT
Added hold on Blob and Squiggle points to remove points
shift click still removes - but now hold on points will allow mobile users to remove points
SHAPE CHANGES
Added tiny API for Shape right on Shape (added 300 Bytes)
So the following can be chained right to the Shape object
This means we can do code like the following:
new Shape().s(red).ss(5).mt(100,100).lt(200,100).addTo().alp(.5);
There is no longer a need for the separate call to the graphics property
See https://www.createjs.com/docs/easeljs/classes/Graphics.html for definitions and parameters
NOTE: only the tiny API has been added to the Shape NOT moveTo() for instance...
mt() moveTo
lt() lineTo
a() arc
at() arcTo
bt() bezierCurveTo
qt() quadraticCurveTo
r() rect
cp() closePath
c() clear
f() beginFill
lf() beginLinearGradientFill
rf() beginRadialGradientFill
bf() beginBitmapFill
ef() endFill
ss() setStrokeStyle
sd() setStrokeDash
s() beginStroke
ls() beginLinearGradientStroke
rs() beginRadialGradientStroke
bs() beginBitmapStroke
es() endStroke
dr() drawRect
rr() drawRoundRect
rc() drawRoundRectComplex
dc() drawCircle
de() drawEllipse
dp() drawPolyStar
p() decodePath
POS
ZIM pos() now uses constants LEFT, RIGHT, CENTER, MIDDLE, TOP, BOTTOM see below
The parameters have been adjusted to (x, y, horizontal, vertical, etc.) BREAK
Use LEFT, RIGHT, CENTER, MIDDLE for horizontal (or true for legacy RIGHT)
Use TOP, BOTTOM, CENTER, MIDDLE for vertical (or true for legacy BOTTOM)
Docs have been updated to better describe pos()
See https://zimjs.com/positioning/
CONSTANTS
Added new constants: LEFT, RIGHT, CENTER, MIDDLE, TOP, BOTTOM, HORIZONTAL, VERTICAL, BOTH
These are equal to the lowercase strings - so align:LEFT is the same as align:"left"
Added these and the colors to the DOCS under the FRAME module
Also added TAU, DEG and RAD constants to the CODE module
If working in radians, TAU is equal to 2 radians (360).
This allows easy visualization of angles - TAU/2 is 180, TAU/4 is 90, etc.
DEG is 180/Math.PI so you multiply a radian value by DEG to get degrees.
RAD is Math.PI/180 so you multiply a degree value by RAD to get radians.
Math.sin(TAU/4); // sin of 90 degrees (1)
// is same as
Math.sin(90*RAD);
// is same as
Math.sin(90*Math.PI/180);
// and
Math.asin(1)*DEG; // is 90
GENERAL
IMPROVEMENT Updated ZIM Frame resize event. After a resize, Frame now checks immediately then every 50ms until the delay time is met.
The delay default has been changed 1000 on mobile to catch the unbelievable delay iOS has in reporting new screen size.
The delay is 30 on non-mobile which forces the 50ms delay check to 30 (or whatever the delay is if less than 30).
Thanks Drashya Gohil and Frank Los for reporting and testing - hopefully this is the last time this needs to be worked on.
Added a color property to LabelOnPath
IMPROVEMENT Fixed animate() to animate with just an object literal for the props - eg. circle.animate({x:500})
This used to be read as a ZIM DUO object and therefore not work unless a second parameter was added
So we would always add the time for instance: circle.animate({x:500}, time:1000) - even though that is default
Added a setDefault() method and isDefault read only property to ZIM Frame
The methods addTo(), center(), centerReg(), loc(), pos(), Ticker.add()
default to the stage of the first frame made
Use setDefault() to set a frame to the default frame
Previously (and still), you could use the undocumented zimDefaultFrame global variable
Updated Frame asset parameter and Frame.loadAssets() to handle sound with text after the filename extension
by dividing filename with ? and using first part. - Thanks Cajoek on Slack for the prompting!
Added "pressdrag" type to MotionController that makes target follow mouse when pressed on
this is different than "pressmove" which moves the target to wherever the mouse is pressed and then follows the mouse
Thanks Shan Yuan for the request!
PATCHES (patches are only in CDN, Docs and TypeScript - not GitHub or NPM until next version)
Quickly changed parameters for Radial, RadialMenu, List and Organizer
to this order: color, rollColor, selectedColor, selectedRollColor BREAK
This matches with tabs and Pad.
Fixed hold() - it was calling the callback even if the mouse moved - oops.
In the timeout we had used the event object's stageX and stageY when this was the original mousedown event object!
Also converted it to an interval that tests 10 times within the time span
to turn off the hold if the object is moved outside the designated distance
Also made this not work if there is no Frame - Frame provides the mouseX and mouseY
but if there is no Frame, it would not work.
This is important to provide the functionality of removing points on Squiggle and Blob on mobile even if Frame is not used
We did some testing here: https://zimjs.com/test/existingcanvas.html
We also added a frame property to the stage and made the Stage and StageGL create a partial zimDefaultFrame
This will allow circle().center(), for instance, to work
but the zimDefaultFrame will get overwritten if a real Frame is made afterwards - don't worry about it!
Please ignore createjs 1.2.2 and use createjs 1.2.3 instead - there was an issue with Firefox - thanks Paul West for the report
The information has been updated here too: https://github.com/CreateJS/EaselJS/issues/997#issuecomment-547051940
Patched animate() to fix unpausing animate with drag on path
This broke in 10.4.0 when a fix for moving the target on dragged path before dragging the target
Now both work! Yay. Complicated updates - see 10.6.0 messages in animate()
UPDATED - ZIM Code Page to ES6, GitHub, ZIM Templates, TypeScript, NPM, Distill, Bubbling Videos, Blog Posts
UPDATED - ZIM Tips and ZIM Skool to ES6
UPDATED - CreateJS to 1.2.3 with important changes to help Touch on Desktop - especially for educators
UPDATED - CDN URL to ThreeJS to https://zimjs.org/cdn/r109/three.min.js
and added OrbitControls that work with ZIM even if on own ThreeJS canvas https://zimjs.org/cdn/r109/OrbitControls.js
ZIM 10.5.5
Added ble() short chainable method to set blendMode (compositeOperation)
Added events parameter to end of Tile to capture change events on tile items
this receives an event object that has an item property of the item that caused the change event
Can be used on Tile with on("change") or change() methods
Fixed Dial to rotate better at limits - was using return - should have set to min and max
GitHub and NPM Updates for 10.5.4 patches - see 10.5.4 patches below
PATCHES (patches are only in CDN, Docs and TypeScript - not GitHub or NPM until next version)
Fixed MotionController pressmove to not jump to mouse y position if axis is only horizontal (and same for x with vertical)
Fixed a Shape() using hitTestRect, hitTestCircle, hitTestPath and hitTestReg in retina
Made Toggle swipe easier with a slower drag feel... 20 pixels in 200ms
Updated CDN, GitHub, NPM, TypeScript, Docs, Code page and Distill.
ZIM 10.5.4
ZIMIFY UPDATE - IMPROVEMENT
Adjusted zimify() to include localToGlobal(), globalToLocal() and localToLocal()
methods that retro-override CreateJS versions on MovieClip objects for instance
Now, interacting with the clips will work properly when working with Adobe Animate
Previously, there were issues with drag, transform, gesture, accessibility, etc.
due to stage scaling by Animate export
We recommended putting the MovieClip into a ZIM Container
This is no longer needed if we zimify with 10.5.4 or beyond in ZIM SHIM
Make sure to zimify the parent of the MovieClip as well - as that is a MovieClip too.
zimify(myClip);
zimify(myClip.parent); // this is the timeline MovieClip
ASYNC - IMPROVEMENT
Created a https://zimjs.org/cdn/jsonp.php script to help with API calls
Example: https://codepen.io/danzen/pen/gNKQYY
You can filter a plain JSON response through the jsonp script, for example, like so:
var api = "https://swapi.co/api/planets/10/?format=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
}
Note, the docs show the code for jsonp.php so you can make your own if desired
This is working with other people's APIs that are not JSONp format
See the docs for working with your own files - which does not need jsonp.php
GENERAL
Adjusted TextArea to scale properly within scaled container - thanks Bart Libert IMPROVEMENT
Remember if scaling after TextArea is made then will need to textArea.resize()
Changed all reversable parameters to reversible - thanks Michael Albers
BREAK Added onTop parameter to Window and therefore List - defaults true.
Set to false to not bring window or list to top of its container when dragging
Fixed zim animate() - to ensure multiple protects, loops or rewinds on the same target IMPROVEMENT
do not set mouseEnabled of the target to be false
animate sets mouseEnabled off for 70 ms at start and then sets to last setting
Well, a second concurrent animate was receiving the wrong last setting - this is fixed
PATCHES (patches are only in CDN, Docs and TypeScript - not GitHub or NPM until next version)
Added items2D and items2DCols for Tile to get read only 2D arrays - thanks Ami Hanya for request
Fixed up Pages to properly set up multiple pages - change from 10.5.3 caused glitch - 10.5.3 has been repatched
Also adjusted Marquee in 10.5.3 and 10.5.4 to add Pages to the holder which is shifted for the nav
Added decimals parameter to game module Timer - patched https://zimjs.org/cdn/game_2.2.js
Fixed hov() to not give error if object that has hov is removed from stage and rolled off
Fixed animate() start angle on path to match first point's angle when orient is true - potential BREAK but unlikely
Adjusted animate looping on drag on path with startPaused true - typo in code.
Adjusted percentComplete to start at correct angle if animating along a path and orient is true
Added margin parameter at end of Container and Shape cache() method parameters that expands or contracts the cache dimension
This will also be available on all subclasses of Container such as Rectangle, Blob, etc.
Fixed TextArea in scaled containers in Retina - thanks Bart Libert for the prompting
Fixed drag on path when no animation - so object stays on path if path is user adusted and object had not been dragged yet
did this by running the drag ticker even before dragged set mouseCheck to true
as well as introduced an immediateCheck to percentComplete so setting percentComplete updates pathPercent
Fixed dragging on path after shape animating path or updating path with code and update() - use a zimAnimateChanged property on path
was already working when manually dragging path as that called a change event which animate() used to update segment ratios
Updated Code page, Docs, GitHub, CDN, Templates, TypeScript, SHIM, NPM, MVC files
Updated CreateJS to https://zimjs.org/cdn/1.2.1/createjs_min.js and NPM vesion
to include broken-image flow-through to ZIM 10.5.3 and beyond
ZIM 10.5.3
FRAME MOUSE POSITION (for Retina) IMPROVEMENT
Officially added ZIM Frame mouseX and mouseY properties
to capture mouse position including stage scale due to ZIM Retina
At any time this can be accessed as frame.mouseX and frame.mouseY
A stagemousemove event is used to get these values
This can be turned off with the new Frame captureMouse parameter (default is true)
Or by setting frame.off("stagemousemove", frame.mouseEvent);
Any mouse event object can still capture stageX and stageY
but will need to divide these by stage.scaleX and stage.scaleY for Retina
Note: stage.mouseX and stage.mouseY should not be used
as these did not work on touch screen - if using them, they should be divided by stage scale as well
Also note the mouseMoveOutside parameter of Frame to capture rawX and rawY as frame.mouseX and frame.mouseY
ACCESSIBILITY - APPLICATION ROLE IMPROVEMENT
Changed Accessibility to default to role of application rather than button
for ZIM objects other than TextArea, Loader, Dial, Slider, Stepper or Picker
This works better on NVDA screen readers as it forces "forms" mode
Thanks Nathan and Fiona for the report and debug help
Left the default of button for mobile.
Accessibility has a new application parameter (default true)
This goes after the frame parameter BREAK for any param after (highlights)
The application parameter can be set to false to make the default role a button (like before)
GENERAL
SVGContainer now has showControls and interactive parameters
to set all Squiggle, Blob and Rectangle, Circle transforms to these values
Thanks Andi Erni for the request
Updated ZIM SHIM to include 10.5.3 but also fixed reference to frame.canvas
that was missing in 10.5.2 (patched it) and patched this version 10.5.3
PATCHED
Adjusted Frame tag mode for dimensioned frame with Retina to accomodate % width style
See: https://zimjs.com/templates/tag2.html This needs to be in first stylesheet
Retina sets the width style which was overwriting any preset width style
So, the original style percentage needs to be applied first then the Retina scale
so it is a couple computated values - for a % height setting... use Frame retina:false
or request a calculation for % height on the ZIM Slack forum.
Added backgroundColor property to Label to get or set background color
Also made it so backgroundColor operates on a custom backing if there is one (Thanks Andi Erni for the thought)
Adjusted Pages so it works better with a holder and removes pages if transition "none"
Thanks Mike Gossland for the find!
Patched cdn/1.2.0/createjs_min.js to let broken image urls come through without console error
Patched ZIM 10.5.3 to convert these to broken image icons if used
Fixed animate() sequenceCall to go at ends of sequences and call at very end of all
Made Label change backing with width and height styles - so can use this to change backing width
Made Slider accept shadowBlur and shadowColor styles (for its button)
Adjusted physics_2.0 and physics_2.1 so follow bounds works with non-centered backgrounds ;-)
Created physics_2.2 with better LeaderBoard default font settings to match retina
Added an accordionIndex property to List to give the selected item's index inside an accordion
This was needed to handle repeated labels inside accordion lists - will be null if no accordion
If non-accordion lists have repeated labels, just use the selectedIndex
Note - selectedIndex of an accordion is only the index of the items that are showing
Added callEvent parameter to Pane hide() that calls "close" event when pane is hidden with method
This can be handy to use traditional close event with mouse
but then call hide() also with enter key for instance to call the same close event that was set for mouse.
Updated the CDN, Docs, GitHub, Code page, TypeScript, NPM, Tips, Templates, Distill
Come hang out with us on Slack https://zimjs.com/slack/
ZIM 10.5.2
FOLLOW
https://zimjs.com/ten/follow.html - with keys
https://codepen.io/danzen/pen/gNKQYY - with press
Added follow() method to ZIM Frame - works like follow() in physics - thanks John Smith for the request
but can follow any DisplayObject inside a Container - not just on stage
Added a followBoundary property to Frame to update the follow boundary in a "resize" event if frame is in "full" mode
With physics we were generally forced to make follow move the stage
but here we can add the object to a container and make the container move rather than the stage
this is a little more conventional as traditionally, the stage does not move.
Added a motionController property to any target being controlled by a ZIM MotionController
this is used internally by ZIM for follow - but could be generally useful.
Added a "follow" value for ZIM MotionController type parameter that keeps obj moving towards pressed position
GENERAL
IMPROVEMENT - adjusted ZIM MotionController so does not test for object beneath mouse if there are no mouseDownIncludes
this was lagging when there are thousands of objects on the stage and was unnecessarily
IMPROVEMENT - adjusted hitTests for Point, Reg, Rect, Circle and Path to use a slightly different calculation
for Bitmaps and Sprites versus all other DisplayObjects
The latter divides by stage scale where the former does not. (patched 10.5.0 and 10.5.1)
Changed a few timeout() and mobile() calls to zim.timeout() and zim.mobile() for zns=true setting - thanks Alfred Yim for the report
Fixed TransformManager and Transform to properly record last selected if not moved and not flash transform (since 9.5.0 Layer code)
Tested to make sure there is a titleBar before setting titleBarPosition in Layer
IMPROVEMENT - fixed ZIM animate() series so relative setting uses calculated values
Was using last actual target value and this was compounding a slight timing/value error
Now, for instance, if wait is added to series, resting place matches desired values exactly
see https://zimjs.com/codepen/triangles.html and source for comments...
Patched physics_2.0.js to include a frame property (thanks James Barrett for the request)
now physics can be transferred from frame to frame IMPROVEMENT
the drag() method will need to be reset each time
See https://zimjs.com/expand/physics.html for an example
where we go from a tag mode to a fit mode and change the frame of the physics object
PATCHED - added frame.update() to call when a Frame changes position relative to Browser window
for instance if a div to the left has its display set to none then call frame.update();
This will dispatch update events that Loader, TextArea and Tag object receive so they resize()
with the proper frame.x and frame.y - thanks Alfred Yim for reporting the issue!
Also added frame properties to Loader, TextArea and Tag - if changing frames, set this to the new frame
Added frame.mouseX and frame.mouseY - that include scale fix for ZIM Retina
Use these to avoid e.stageX/stage.scaleX and e.stageY/stage.scaleY
Also added mouseMoveOutside parameter to Frame at end of params before shim
Changed default mouseover rollPerSecond from 10 to 20 - the CreateJS default.
Adjusted https://zimjs.org/cdn/three_2.0.js to work with ZIM in tag mode
Needed to set ThreeJS canvas to position absolute with left and right set to 0px - thanks Yalon for the report
Updated: CDN, Docs, Updates, Distill, GitHub, TypeScript, Code Page, Templates, NPM, TIPS
ZIM 10.5.1
Added hardKeyboard parameter (default true) to Keyboard IMPROVEMENT
to accept regular keys being pressed and changing selected label
Fixed bug in going to second label (also patched 10.5.0)
Added endTween() to animate() target to jump right to end of animation and set end properties - thanks Ami Hanya for the idea.
This compliments resetTween() and replayTween() which have been recently added to animate() targets as well
BREAK - changed Indicator press parameter to interactive to consolidate terms.
IMPROVEMENT Fixed StageGL (Frame with gpu:true) to work with retina (patched 10.5.0 as well)
Also tidied up stage resize on full in gpu:true so it does not flash with retina turned on (ZIM 10 fix caused this)
ZIM SHIM 2 IMPROVEMENT
https://zimjs.com/animate.html
Updated ZIM SHIM to work with ZIM 10.5.1 and beyond - thanks Amy Rule for the prompting
ZIM SHIM now creates a full frame object rather than a simple surrogate frame.
This allows ZIM objects relying on Frame resize (TextArea, Loader, etc) to work in Animate
Also a few other ZIM objects used Frame methods, properties and events that were missing.
Added shim parameter to frame (default null) to handle making a full Frame when the canvas and stage are already made
This accepts an object with stage and canvas properties and lets Adobe handle resize
ZIM 10.5.0
CDN UPDATE
https://zimjs.org/cdn/
Changed the CDN to zimjs.org/cdn/ with a new naming format
The Amazon d309knd7es5f10.cloudfront.net url still works for OLDER versions of ZIM
The new naming format uses the directory to keep track of ZIM versions
The file names will remain constant as zim.js for minified and zim_doc.js for full
So the two main libraries are at:
https://zimjs.org/cdn/1.2.0/createjs_min.js
https://zimjs.org/cdn/10.5.0/zim.js
You are welcome to use these or download versions to your own servers
The latest helper libraries have been moved to the new CDN as well
See the top of the Docs pages for links
Explanation: as we move into more than a million views a week amazon was costing money
zimjs.org uses CloudFlare which caches the files at the front edge of the internet cloud!
Many other js libraries use CloudFlare too at https://cloudflare.com
MARQUEE
https://zimjs.com/marquee.html
Added a Marquee component to cycle through images and interactive works
Uses ZIM Pages and Indicator objects - and a pause/play button
Can show ZIM interactive works in banner area!
Docs can be found near the bottom of Components
LIST PULLDOWN IMPROVEMENT
https://zimjs.com/ten/pulldown.html
Added pulldown parameter to List
which prepares the list to take a height based on a number of items
It also hides the background and border
Setting this with accordion can expand and contract the list like a pulldown
Added open property to List accordion object that starts an accordion open
LIST ITEMS
https://zimjs.com/explore/pulldown.html
Created special List items: Slider, CheckBox, ColorPicker (for now)
These are created as List.slider(), List.checkBox(), List.colorPicker()
and can be combined with the pulldown arrangement to make a collapsible control panel
DOT ANIMATE
Updated CreateJS version to include the new TweenJS dot plugin
https://zimjs.org/cdn/1.2.0/createjs_min.js
This allows animation of properties within properties by using quoted values for the property name
so props:{"rotation.x":200} for instance
Updated dozens of property assignments within animate() to handle dot property values
Note, TweenJS requires an initial . at the start props:{".rotation.x":200}
but that is not easy to remember so ZIM allows for both notations.
TweenJS also added a plugin for relative animation using "" - ZIM already has that
the TweenJS version requires a + or - at the start. ZIM does not require the +
Unfortunately, the dot plugin requires the TweenJS version
So we have made ZIM convert any relative without a + to having a +
which means, we are good to go with or without the + for relative animation
props:{".rotation.x":"30"} or props:{".rotation.x":"+30"} will both work
REPLAY TWEEN IMPROVEMENT
Added resetTween() and replayTween() methods to objects with tweens
These will set the object to the tweened property values before the tween started
and replay the tween - re-runs the animate() with the same parameters as the last tween
Added a clean parameter to animate() that will not clear the tween ids when tween ends
the idea being percentComplete will still work - but unfortunately, it does not include the wait time
so replayTween() was added if the initial wait time is desired
GENERAL
Added makeIcon() to Frame to make the ZIM TEN Z icon (360 byte customizable vector)
Added animateReturn() method on target of animate()
that works when animating on path to return target to the start if rewind is set to true
IMPROVEMENT - fixed Blob and Squiggle due to change in center() and centerReg() - was shifting points
IMPROVEMENT - Fixed Slider to capture stage variable when track is pressed - was needing button pressed first since Retina
Fixed negative sign on list hierarchy - it was shifting too low on retina
Fixed Dynamo and Accelerator pause to not break if paused the same way twice - it now ignores the second time
Made Dynamo remember change in percentSpeed when paused so unpausing is at new speed
Added read/write sensitivity property to ZIM Swiper
Added conversion from rgb() and rgba() to hex and string to convertColor() - thanks Ikki for reminding us!
also made conversion to string output hex number if no matching string color
Fixed Label center on backing - had removed code there for some reason in 10.3.0 - look back and see why
Also tidied up bounds of label with scaled backing - thanks Bart Libert for the report
Fixed hitTestPoint, hitTestReg, hitTestRect and hitTestCircles to work properly with Retina - thanks again Bart Libert
Made ColorPicker force upperCase for selectedColor
Fixed List indenting issue with align left or right with both custom and label items
Added checkBox parameter to styles for List
Adjusted animate() sequence to work properly with pauseAnimate()
previously, the sequence was run by timeouts initially that were not part of the pauseAnimate system
so startPaused:true for instance would let the timeouts run
and the sequence would run all at the same time when pauseAnimate(false) was called.
So changed sequence to use wait animation and then wait again if a wait was in the sequence
this ties sequence into the animation chain from the start
IMPROVEMENT Adjusted ZIM Label to better work with ZIM Retina.
The stage scale was affecting the placement of createjs and perhaps canvas text relative to bounds
Reworked how the Label centers and positions as well as on backing and backgrounds
Changed Tabs and Stepper to center label
Adjusted docs on Label to read the correct "top" as valign default
ZIM strays from HTML tables on this with a default left and top alignment for text
However for Buttons, etc. the default is center
Buttons support ZIM VEE (Pick / zik) on main colors - see docs
This was primarily for alternating colors on Lists for instance
PATCHED - added getColorAt(x,y) method to a Bitmap that returns the rgba() at the x, y location
Fixed dispose for Window with interactive false - was giving a Ticker remove warning - thanks Frank Los
Fixed setMask() to work properly with Triangles - changed the code to work with all situations
Fixed StageGL (Frame with gpu:true) to work with retina
Also tidied up ZIM 10 fix so stage resize on full in gpu:true does not flash with retina turned on
Adjusted hitTests for Point, Reg, Rect, Circle and Path to use a slightly different calculation
for Bitmaps and Sprites versus all other DisplayObjects.
UPDATED: CDN, Docs, Updates ;-), Code Page, Templates, Distill, TEN page, TypeScript, GITHUB and NPM
ADJUSTED: docs text version, view code, zoo, distill to work with new CDN
ZIM 10.4.1
Added an immediate parameter to ZIM timeout pause() method - works when unpausing.
Added reset parameter to ZIM interval and timeout pause() methods
This comes after the immediate parameter.
If both these are set to false (defaults) then unpausing will run the time left after the pause
The immediate true will unpause and run immediately.
The reset true will unpause with the full interval time left.
Also fixed paused(false) so that if already running it will clear the last interval
In animate(), moved relative property assignment to after the wait - thanks Yalon for the prompting
This means that relative values ie. props:{x:"100"} will work better in animate series.
They will be relative to the end of the last animation rather than relative to the value at the start of the series
Fixed dashed on Button border to work - lost it when separating border from background to handle shadow better
Adjusted Pages so it adds pages to the provided holder
Adjusted Pages so addPage and removePage changes pages array property
Updated ZIM Workshops to 10.4.0 - https://zimjs.com/teach.html
ZIM WS - Canvas
ZIM WS - Coding
ZIM WS - Game
ZIM WS - Asteroids
ZIM WS - Meme
ZIM WS - Physics - TODO
PATCH:
ZIM windowWidth() and windowHeight() have been adjusted to take into account Chrome on iOS
which was not reporting a change on orientation - thanks Ross Isenegger for the catch
This meant orientation was not triggering properly as we used the width and height to determine orientation
There was also an issue with delay still not catching some resize values
We have implemented a three step process for mobile:
On resize, dimensions are checked [1] right away and [2] at 30ms automatically.
There is also a delay parameter that has a default of 50ms
so an additional check will be done [3] at 50ms or at whatever this parameter is set
Setting the delay to 0 would turn off checks [2] and [3]
Adjusted hitTests for Point, Reg, Rect, Circle and Path to use a slightly different calculation
for Bitmaps and Sprites versus all other DisplayObjects.
Updated ZIM CodePen Examples on Examples page
Rocket, Zdog, GitHub stars, Tiles, etc.
Updated CDN, GitHub, Code Page, Templates, NPM, Distill, TypeScript (no changes), Slack
ZIM 10.4.0
TEN PAGE
https://zimjs.com/ten.html
Updated TEN page to show links to various updates to ZIM TEN
LIST WITH CHECKBOX
https://zimjs.com/ten/listcheckbox.html
Added checkBox parameter to List to use checkboxes in list - thanks Dale789 for the prompting!
Added checkBoxes property to List to give a read only array of checkBoxes
Added a checkBox property to a list item like list.selected.checkBox to give access to an item checkBox
Added the following three methods to manipulate checkBoxes:
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
Added tap parameter to CheckBox to activate on tap - good for List and Window when dragging
Added toggle(type) to CheckBox and toggled property - same as setChecked and checked but consistent with others
PATH TRAVERSE
https://zimjs.com/ten/traverse.html
Added a traverse() method to Blob and Squiggle to animate an object between points of the path
Added a "traversed" event that is dispatched when a traverse() ends
To traverse backwards past start or forward past end of Blob use two traverse calls
Thanks KV for the experimentation and requests.
IMPROVEMENT Fixed up animate() along path so it properly resets internal pathRatio and tween with stopAnimate() called
this is important when doing multiple animations along path.
Set this to reset only with path or dynamic animation - watch out for color animation
Color seems to work but may have issues with multiple color animations on same object
THREE - RETINA - IMPROVEMENT
ZIM three_2.0.js has launched to work with retina
The namespace is now optional and works like new Three();
See https://codepen.io/zimjs/pen/qGPVqO
PIZZAZZ 3 - RETINA - IMPROVEMENT
Adjusted pizzazz_03 to work with retina
https://zimjs.com/patterns.html
Tidied up setMask() for retina - was not working if mask had same parent as object.
This fixed the ProgressBar() in retina
This is an odd localToLocal issue since retina - we will keep an eye on it.
ANIMATE REPLAY TWEEN - PATCH
Added a clean parameter to animate() that can be set to false to not delete the tween when done
This allows percentComplete to be adjusted and target.pauseAnimate(false) to play tween
Note - percentComplete does not include waited once waited period has passed
So to restart a tween that has a wait use replayTween - see below.
Added target resetTween() and replayTween()
resetTween() will reset the properties of the target to the original values before the last tween
replayTween() will reset the properties and play the last tween
Note - only replays the last tween of a series and probably does not work on sequence animation
GENERAL
Fixed zta() so it does not break in IE11 - as there is no console.table()
PATCHES
Patched animate() in series mode to make sure last animate object call is called - thanks Yalon for the find
Patched animate() series to remove first animation in animate series when a wait is present
this was causing subsequent series animations to not have the correct idSet id for stopping
Made animate() override any paused properties so not unpausing Sprites to cause CreateJS Sprite animation
Tested animation page and NIO dynamic animations
BREAK - adjusted centerReg() and center() to center on the origin of a container that has no bounds set
Made Label() text parameter accept ZIM PICK object
Fixed Pane() close if no stage to update
BREAK fixed width and height, widthOnly and heightOnly to be absolute value (positive) if scale is negative (strange we missed this for so long!)
Fixed Tile() mirrorH and mirrorV and align, valign with scaled objects
Fixed Frame() loadAssets queue version of "assetload" event - there was a typo in the event dispatch - working now...
Added a controls property to transformControls that references the controls
Added data parameter to Loader save() method - set to true to return Base64 string instead of file saving image - thanks Ami Hanya
Adjusted Circle, Rectangle, Triangle, Squiggle and Blob to clone gradients (when using direct linearGradient() and radialGradient() methods)
Fixed Keyboard < > x vertical spacing
Fixed Keyboard cursor placement - was using globalToLocal on CreateJS Text field - which is broken in retina
Fixed Label backing so that pattern gets saved under backing property and properly centered when label is centered
Also removed stage scale setting in Pizzazz 3 that was incorrectly added to retina
Updated ZIM Docs, Code page, Distill, Bubbling Videos, Templates, GitHub, NPM, TypeScript
Updated GitHub ReadMe intro page - please STAR us on GitHub if you can - thanks - we are trying to build awareness.
Whew - thank goodness for Patreon! https://www.patreon.com/zimjs - never any pressure - using ZIM is the biggest reward!
ZIM 10.3.1
Added strokeObj parameter to ZIM Shapes Circle, Rectangle, Triangle, Blob, Squiggle
which defaults to {caps:"butt", joints:"miter", miterLimit:10, ignoreScale:false}
https://zimjs.com/explore/strokes.html
Added radialGradient() and linearGradient() methods to Circle, Rectangle, Triangle, Blob
These just call the colorCommand versions which are still there
Note - must update about 100 Rectangle, Circle and Triangle occurences in ZIM otherwise get a recursive style error in group style
Note - to apply gradients to the border use the borderColorCommand (we do this less often)
IMPROVEMENT Fixed setMask on ZIM shapes to handle masking objects in non 0,0, scaled and rotated containers
Note: getConcatenatedMatrix().decompose() must have scales divided by stage scale in retina setting
Cloned label backing from STYLE so can set same backing on multiple labels - thanks Valeria Valoueva for the prompting
Added still parameter to reg() to set x and y so object does not move when reg is set - thanks Vishwas Gagrani for suggestion
Fixed up missing parameters at end of Blob and Squiggle clone
IMPROVEMENT Removed extra space at end of List when removeAt() is used
IMPROVEMENT Fixed up List accordion setting indent glitch since 10.0.1 - thanks Alicia Martin for the find
We had added a backing rectangle for the list elements and this broke indenting after a second time (put a backing on a backing!)
Added shiftHorizontal and shiftVertical to STYLE of Button - goes through to the label parameters...
Updated CDN, Distill, TypeScript, NPM, Templates, Code Page, Docs
ZIM 10.3.0
RETINA - IMPROVEMENT
https://zimjs.com/retina.html
Added a retina parameter (default true) to scale the stage with devicePixelRatio
Scaling the stage rather than the canvas works very well for scaling vectors up
This is the technique that Adobe Animate uses - see the next section for issues.
ADOBE ANIMATE - IMPROVEMENT
https://zimjs.com/animate.html
ZIM now provides a ZIM SHIM that lets ZIM work within Adobe Animate without ZIM Frame.
This is a standard Animate Publishing template with a few lines of ZIM code added.
ZIM was mostly supported in Animate but now, various issues below have been solved.
Adobe Animate scales the stage - which affects globalToLocal, localToGlobal, localToLocal.
ZIM now overrides these with fixes and dozens of changes have been made as follows:
1. Basically localToGlobal needs its resulting point to be divided by the stage scaleX and scaleY.
globalToLocal needs its input point multiplied by the stage scaleX and scaleY
localToLocal needs to call these - but not the GlobalToLocal if the object is on the stage directly - sigh.
2. BREAK Mouse even object e.stageX, e.stageY, e.rawX, e.rawY need to be divided by the stage scaleX and scaleY.
3. stage.getObjectUnderPoint() needs to use the x and y multiplied by stage scale
unless you are using e.stageX and e.stageY which would normally be divided by stage scale
so the result is you can pass e.stageX and e.stageY directly in to getObjectUnderPoint without any changes
4. Adjusted scaleTo() to assume stage is scale of 1 with stage.width and stage.height matching what is set.
5. Shapes are still positioned as if on an unscaled stage for hitTests.
So any x and y values need to be multiplied by the stage scale before doing a globalToLocal
into the shape to counter the globalToLocal expecting a 1 scale stage.
6. getConcatenatedMatrix() needs to have resulting values divided by stage scale
OTHER ADOBE ISSUES
7. The CreateJS MovieClip does not have the ZIM fixes to globalToLocal, localToGlobal and localToLocal
So create a ZIM Container with bounds of the MovieClip and add the MovieClip to the container.
From then on, use the ZIM Container to drag, transform, hitTest, etc.
8. Adobe Animate is running an older version of CreateJS that does not automatically recalculate (previously specified) bounds when set to null.
This causes Tab heights to miscalculate which effects List, etc.
So adjusted Tabs to test for old CreateJS and not expect bound recalculation.
9. There seems to be a problem with hitArea (expand()) on cached objects so adjusted use one or the other
SQUIGGLE AND BLOB PATH - IMPROVEMENT
https://zimjs.com/hittestpath.html
More updates to path control to help out with Shape Tween which was launched in 10.2.0:
1. Added addPoint(), addPoints() and interpolate() methods to squiggle and blob
To add a point at a percentage, or add a number of points between points
Or get the data for any number of points - used by hitTestPoint
interpolate could be used to set dynamic bounds on Blob and Squiggle
which would lead to setting a drag Boundary - like the general drag() has.
So look for this in future versions of ZIM.
2. We could shape tween between shapes with a different number of points
but for now, use the addPoint() manually so the number of points are equal.
This will usually result in better shape tweens than trying to guess where to automatically add a point.
But we may look into how that might be done via an algorithm.
3. Added hitTestPoint(num) to do a hitTest of any object shape along a Squiggle or Blob path!
4. Adjusted the editPoints parameter so true adds points only to the edge.
Followed this amazing interactive tutorial - thanks Gabi
https://codepen.io/enxaneta/post/how-to-add-a-point-to-an-svg-path
When we do, it adds the point and adjusts the points next to it - for no overall path adjustment.
Thanks Sam Van Herck for the promptings.
If you want the original adding points anywhere - use editPoints:"anywhere"
At which point, it adds a point with controlType "none".
Added two properties to adjust accuracy vs. speed of adding points:
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
GENERAL
Added offStage parameter to drag() - set to true to be able to drag the object off stage - thanks Shammi for the idea!
Adjusted Stage and StageGL to accept a canvas tag as well as the traditional canvas tag ID.
Added rgb and rgba support to ColorPicker - thanks Ami Hanya for the promptings
The rgba alpha now adds a start alpha for startBackgroundColor - if rgba is used in a color list the alpha is ignored
Added rectIntersect(a,b,margin) function to code module which returns true if rectangles intersect
Added boundsAroundPoints(points) function to code module to get a rectangle around an array of points
These are used by Blob and Squiggle and hitTestPath
Fixed Blob "circle", "rectangle", "triangle" points parameter values to use radius setting as well.
Fixed "rectangle" to be centerReg() for Blob IMPROVEMENT
Fixed slight spacing issue with hitTestGrid() IMPROVEMENT
Undecided how to treat setting bounds width or height to 0
it means that width and height can't be set as they adjust the scale and we divide by 0
So adjusted Tabs to overwrite the width if width is 0
Added blur event to Window to stop drag if browser window loses focus - thanks Ami Hanya
To turn this on, set the List or Window cancelCurrentDrag parameter to true
Seems that maybe mobile was not handling transform controls properly due to getObjectUnderPoint test IMPROVEMENT
So removed this requirement for mobile - means objects overlayed on transforms may trigger transforms on
This was a rare issue and more of a perfectionist fix...
The getObjectUnderPoint is working in a simple case on mobile but not in the complexities of transform().
Adjusted drag() slidestop event to not trigger if object is just clicked on and has not been moved - thanks Frank Los for the report.
PATCHES - added support for receiving SVG path format in the ZIM Squiggle and Blob points parameter
Adjusted animate() drag for path with Squiggle and Blob according to the technique found here https://codepen.io/eliCrow/pen/MLdddR
See the ZIM version: https://codepen.io/zimjs/pen/GLLvoP
automatically set ease to "linear" when dragging on Blob or Squiggle - it is the only ease setting that works
fixed TextArea, Tag and Loader to scale and place properly with retina - CreateJS DOMElement was scaling the tags when the stage scaled
Tried to fix the outline property of Label - since it is a CreateJS object, the localToGlobal is off - may have to recode for exotic label settings
Fixed Label outline parameter to work with labelWidth and labelHeight set - thanks Ami Hanya for pointing it out
Patched Timer in a few places for game_2.0 with respect to ending time
Updated SVGContainer to set splitTypes default false like the docs say
Made Waiter dispose() remove waiter from stage - thanks Ami Hanya
Fixed up Distill to work with centering with STYLE - zob() in distill needs to be kept up-to-date (was missing something we added for STYLE and ZIMON)
Fixed Pick class to properly work with Distill - needed to record static methods being used
Changed obj.setBounds() to obj._bounds = null; to support pre version 1 CreateJS code (like current Animate export)
Updated CDN, GitHub, Distill, Code page, Templates, TypeScript, NPM, Bubbling vids, Site, Tips, Social Media, Blog, Promo Ads.
ZIM 10.2.0
ZIMON
See https://zimjs.com/zimon/
Similar to JSON, ZIMON stands for ZIM Object Notation
It turns any 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 on its own or inside an array [] or an object literal {}
These can be nested and filled with any type of object (that is prepared**)
** ZIMONON (default false) must be set to true to properly ZIMON.stringify()
this prevents the slight memory cost if not using ZIMON (95% of the time)
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
See ZIMON in use here in an updated version of https://zimjs.com/iso/
ZIMON - adjusted zob() to record arguments of any class when ZIMONON is true
SHAPE TWEEN IMPROVEMENT
See: https://zimjs.com/animation/shapetween.html
ZIM now supports built in animation from one Squiggle to another or one Blob to another
This is built in to animate() as a convenience property called shape:
squiggle.animate({shape:secondSquiggle}, 1000);
There is also a blobShift convenience property that cycles the target points (positive or negative)
blob.animate({shape:secondBlob, blobShift:2}, 1000);
The Blobs or Squiggles need to have the same number of points
BLOB BASIC SHAPES IMPROVEMENT
See: https://zimjs.com/animation/shapetween.html
ZIM Blobs points parameter now accepts shape values of "circle", "rectangle", "triangle"
or a custom ZIM Circle, Rectangle or Triangle object to match.
This makes it easier to shape tween, path animating/dragging/labelling, etc. with basic shapes
GENERAL
Added expand to STYLE functions
Adjusted animate to properly represent the percentComplete property on the target. IMPROVEMENT
This needed to be applied after animation starts to catch rewind percentage, etc.
See https://zimjs.com/explore/squigglepart.html
added a read-only adjusted property to Triangle as to what the adjust parameter was set at
IMPROVEMENT added {passive:false} to zil() events to avoid another Chrome protective console warning (sigh)
added a series type to series functions
noted that header('Content-type: text/javascript'); needs to be added to PHP calling async
again to avoid a new warning in Chrome console (sigh)
Fixed internal id number in SVGContainer to work properly with Distill
Fixed doc on LabelToPath so showPath is true to start
Fixed Toggle("ON") example to Toggle({label:"ON"})
and took away selected property - use text property instead as read-only what text is selected BREAKIMPROVEMENT Dozens of circle component parts were adjusted to accommodate new percent parameter in Circle
IMPROVEMENT Tidied up hov() mouseovers and cursor settings
Updated CDN, Templates, Distill, Code Page, TypeScript, NPM
Bubbling videos, blog post and social media coming soom
ZIM 10.1.0
ZIM TEN SITE
The ZIM TEN site is finished and has been well received.
A few logos on secondary pages are still the last ZIM logo.
We will get to those soon.
There were a few overlaps on Mobile - if you see anything, let us know at
https://zimjs.com/slack - thanks to Jade for catching the glitches!
GAME MODULE - VERSION 2
https://zimjs.com/iso/
Updated Game Module to 2.0 - and added the Game Module to bottom of Docs.
You still need to import (script tag) the game_2.0.js file to use.
Added Board(), Person(), Orb(), Tree(), Timer() and Scorer() classes.
They let you make tile games in top or isometric view.
A relatively comprehensive example is at https://zimjs.com/iso/
There is not much of a game there but it uses most of the parts.
This is somewhat based on https://zimjs.com/carboon/
which has NOT been updated to the new Game module - but shows potential.
IMPROVEMENT The Docs now include the GAME module at the bottom in purple.
The Board class is quite well featured with over 20 parameters and more than 60 properties and methods.
It is designed to optionally work with path finding such as EasyStar.
The board supports info that can be bigger than the board.
Then a camera can be moved with swiping or arrows.
Pieces can be moved around the board with keys or with pathfinding.
Advanced filters on data, color, icons, items and rows is available
for finding random tiles, keying to certain tiles, removing certain items, etc.
Game Module: PATCHED - LeaderBoard colors to match color being font and backgroundColor being shape. BREAK
Added backdrop to LeaderBoard that closes LeaderBoard if clicked off LeaderBoard
Added multiple domain support when signing up for LeaderBoard - just use commas between domains
CodePen is running pens on different domains so can try: cdpn.io,s.codepen.io for domain.
STYLE FOR CONTROLS IMPROVEMENT
STYLE has been added to Pages(), Layout(), Grid(), Guide(), Tile(), Pen(), Emitter(), Scroller(), and Dynamo()
Here is our test page: https://zimjs.com/test/styles.html
Also added loc functionality for STYLE in general
STYLE = {loc:10} // will put everything at 10 - or target type or group, etc.
STYLE = {loc:{x:10, y:10}} // will put everything at 10, 10
ZIM NPM
Added ZIM and CreateJS to NPM - Node Package Manager
Use with Browserify to make Browser ready
See https://zimjs.com/npm.html
ZIM MVC
Added a template for ZIM Model View Controller
See https://zimjs.com/mvc.html
GENERAL
Added duplicate() chainable method to clone() and copy any custom properties - thanks Ami Hanya for the suggestion
Fixed SVGContainer and Circle to show up properly when viewing the code from the Docs.
Added isometric swiping to Swipe as fourth parameter to work with Game Module Board({isometric:true})
Made hov() automatically set cur() and set cur("default") when hov(-1)
IMPROVEMENT Fixed pages jumping to left when going back to landscape on apple ipad - thanks Frank Los for prompting
Fixed physics when dispose() and go to make a new Physics()
Fixed Physics noDrag() when already dragging - thanks Ami Hanya for the prompting
Added index property to Pages - that gives the index of the current page in pages
fixed contact() to work on new physics when previous physics is disposed
will still need to reset contact() on new physics
BREAK - for Toggle(), removed toggle.selected and changed toggle.text to show selected text or "on", "off" if no Label
IMPROVEMENT Fixed cloning of Tile - was removing first object as we tried to let objects with ZIK clone with ZIK
Solution was to clone objects having a clone but not cloning ZIK objects.
Added loc to Distill custom select functions - caused it to be missing in customize feature for docs
This has been a large undertaking over the last month... well and five years.
Your support on Patreon at https://patreon.com/zimjs is always appreciated.
We were dinged for a $200 bill from Amazon with 5 Million views a day.
So we are thinking of moving the CDN to CloudFlare - we would keep the Amazon as well for legacy.
Also, if you have not left a review on FaceBook https://facebook.com/zimjs/
Or let us know on Slack at https://zimjs.com/slack
and we will post on the About page at https://zimjs.com/about
ZIM 10.0.1
PROTOTYPE CONTROL STYLES
Prototyping adding controls to STYLE - the first test is with Tile.
Added a delayPick style to let Tile choose the value rather than STYLE on the object
For instance, passing [red, green, blue] to a Circle would pick the color randomly
but adding a Circle to a tile gets only one styled circle - so the whole tile would be that random colored circle
Adding delayPick:true to the circle style will let the Control using the object make the selection
This will be handy for Emitter, Pen, etc.
Added a percent parameter to ZIM Circle that makes a Circle have a percent arc.
So new Circle({percent:50}) is a semi-circle with bounds of the semi-circle
The registration point stays the center of the circle
https://zimjs.com/explore/circleArcs.html
Added spin() method to Physics objects
this is a one-time turning force like an impulse is a one-time linear force
To apply a constant turning force, use torque() in a Ticker or keydown event, etc.
https://zimjs.com/explore/spin.html
Fixed Physics to work with scroll and follow using drag() - already was working with controls but not drag.
Added pointsAdjusted property to Squiggle and Blob to change rotated or scaled points to non-rotated and non-scaled
IMPROVEMENT Added normalize parameter to Squiggle and Blob update() method to update to normalized points
must do this after rotating or scaling a point and then expecting manual updates on points
otherwise if just animating rotation or scale of points do not need to set normalize true (just leave parameter out)
Fixed bounds of cloned scaled Bitmap - was cloning width and height rather than bounds.width and bounds.height - thanks Ami Hanya
Made Blob showControls param and method work when interactive false
IMPROVEMENT Fixed adding points to blob when showControls is false - it remakes blob and was using showControls parameter value rather than _controls dynamic value
Added faint background to custom Tabs and List elements so selected index works for whole tab area not just directly on the custom item - thanks Racheli Golan
https://zimjs.com/test/listAlign.html
Made Tabs and List align and valign work properly with objects that are not top left registration point - and handles align of scaled custom objects - thanks Ami Hanya
Fixed transformControls.update() to work after pos() - pos was using CreateJS getTransformedBounds() and that was setting some sort of matrix that mixed up transform
Fixed transformControls.update() to add controls on top of object - was going one back since 9.5 update...
Fixed pressup on controls to remove custom cursors - lost a stage.update() somewhen.
Adjusted Guide to show pixels on start when percent parameter is true
Fixed Sprite loopCount and call to work properly - animate() was reading paused property of Sprite as true and not paying attention to loop count
Adjusted Accessibility html tags in behind to be rgba(0,0,0,.01) in color to remain hidden when in tag scaling mode
Fixed Tile to work with negative scale objects this lets Tiles have rows reversed or be fully reversed as follows:
https://zimjs.com/explore/tileflip.html
PATCHED - added setting scrollX and scrollY to 0 for fit, full, outside modes
This seems to solve the issue on iPad when changing orientation - it was left scrolled! Despite never scrolling - sigh.
Updated TypeScript, Templates, Code Page, CDN, Docs and Updates ;-)
ZIM TEN 10 - adds 29k
ZIM 10 offers a more integrated Physics and a formalized Pick() class for ZIM VEE dynamic parameters.
A new SVGContainer class lets you convert SVG to ZIM Blob, Squiggle, Rectangle and Circle objects - thanks KV for the help!
There is a new site ;-) with TEN sections that highlight types of things that can be made with ZIM.
Specific video entries for each doc element are under way.
PHYSICS - IMPROVEMENT
See: https://zimjs.com/physics/
Integrated Physics into ZIM DisplayObjects and the Docs.
Still need to import Box2D and the ZIM physics module - updated to version 2.
Making a physics object and mapping a ZIM object is no longer needed.
var circle = new Circle().center().addPhysics();
will create a default world and drop a circle in it!
Access the physics object with circle.physics
Or premake the world with new Physics() - to customize gravity, borders, scroll, etc.
The addPhysics() lets you set a bunch of parameters about the body.
Access the physics body with circle.body
DisplayObject Methods:
A set of methods are added to the DisplayObject when physics is in place:
impulse(), force() and torque() methods to push objects 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, etc.
torque() will rotate or spin the object around its center
The control() method will let keyboard keys move the object.
The follow() method will let the stage follow the object when the Physics scroll parameter is set to true
Contact can be tested for with contact() and contactEnd()
each receives a callback function that is provided with the other contacting object and body
Physics Methods:
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 scroll to follow an object.
PICK
Added a Pick() class to featured code module
This takes the place of zik() when processing ZIM VEE values.
ZIM VEE is so handy that a more generic class was created to share with the world of coding
Pick() accepts parameters for a series, an array for randomly picked, a range object for a range or a function that returns a value
The Pick object has a choose() method that is used internally - but can be used by coders in general.
There is also a chainable num() method that lets you set the number of choices
The Pick object also has a loop() method so you can loop through the options getting the next picked option each time.
If you have an array and want a series you can use JS6 Spread ... or use new Options(series([your array]));
ZIM Pick is a stand-alone class that can be copied and used in other languages for delayed parameters.
SVG CONTAINER
Added SVGContainer class - that turns SVG into ZIM Squiggles or Blob paths
Thank you to KV from our Slack team https://zimjs.com/slack for the help on this!
The tech is still in experimental stage but will translate most SVG - no CSS on SVG...
The paths can then be used to animate along, drag along, make a LabelOnPath, etc.
Also consider svgToBitmap() if you are just wanting to view an SVG file in ZIM
HIERARCHY
Added a zim Hierarchy() class to accommodate nested data.
This is used by the accordion but could be used in making a "Mind Map" or a Tree interface, etc.
The Hierarchy class comes with handy methods to traverse a hierarchy.
This is similar to DOM processing but uses Object literals and as such, can store any Object
LIST ACCORDION
See: https://zimjs.com/ten/accordion.html
Added an accordion parameter to List to handle expanding and collapsing sections to a List.
Uses ZIM Hierarchy for creating and tracking the nesting.
TIP
Added a Tip() class under components just after Toggle.
Tip() is a Label that has show() and hide() added to it
Tip will hide automatically 2000 ms after showing - or whatever you pass in as a time.
Tip also has align, valign and margin, marginH, marginV to easily position based on a target
There is also an outside parameter you can set to position outside a target
Tip is added to the stage - initially it was added to the target but the target might be rotated, etc.
Thanks Ami Hanya for the requestion for Toast ;-)
GENERAL
Added enabled property to List
Added selectedRollBackgroundColor and selectedRollColor to Tabs, List, Pad - sigh BREAK. These default to rollBackgroundColor and rollColor
Added dampKeyup to MotionController and dampKeyup property to control the damping on the Accelerator when keyup is used in MotionController.
See: https://zimjs.com/explore/sidescroller.html
Added expand to Window overlay rather than black with alpha .01
Made loop() work on an HTMLCollection (it already works on a NodeList)
Added q, r, s, t points to ZIM Point - used with SVG - Cubic Beziers and Arc
Added addChar(char) and removeChar() to Keyboard()
Added x and y to rot() to rotate around any point (relative to the container)
Added event object to hotSpot click - also added callOver and callOut parameters
Added "myCanvasAlternative" system to show alternative content if no canvas
or to screen readers and possibly search engine indexing
Added hotSpots property to HotSpots which is an array of HotSpot objects
Fixed sink to work with new Emitter system (particles container independent of emitter position)
Adjusted Tile so it does not clone first item but rather uses item passed in to Tile.
setting slider enable false does not remove cursor to start
setting animate of color:[blue, green, red] does not work
*** patches
Adjusted cloning - to initially only copy matrix if shape or not a ZIM object
but realized that that lost cloning of x, y, scale and skew so backed out of that change.
Added buttonDown property to Tabs and itemDown property to List to get currently pressed item.
Added getItemIndex(item) method to List
Added clamp parameters to Proportion, ProportionDamp and Parallax defaults to true
Set this to false to get values outside min and max range - thanks Ami Hanya for the prompting
Adjusted scrollTop on Frame to default to false - this was for older iPhones - live version 5 - and does nothing otherwise
It was reported that it might mess up mobile when tag mode is scrolled to the bottom - so we have defaulted it to false.
Fixed stopAnimate() so it works with drag:true setting
Fixed Blob controlLength parameter - was not using parameter value - now it is!
Made Squiggle and Blob move parameter only stop overall dragging when set to false - that is what was intended
Passed a CreateJS tick object to any function added to Ticker with add()
this gives delta, time, timeStamp, etc. - thanks Alfred Yim for the prompting!
Ticker.raw() functions receive a DOMHighResTimeStamp
Fixed Tile to properly not clone if clone:false is set - thanks Racheli Golan for the find.
This was introduced initially in 10 for ZIM Shapes accepting ZIM VEE for size and color - we mixed up a conditional and it is now patched.
Adjusted Blob to properly close path so there is no gap on thick borders
Controls were hiding behind transform objects since updates in 9.5
This has been fixed but should be monitored further.
NOTE - as of 2/26/2019
SVGContainer has been updated - thanks KV for all the testing and updates on that.
Here is a mess of an example: https://zimjs.com/explore/svgcontainer2.html
Note - currently it does not do arcs nor does it use styles.
Note - there are a few differences we are still working on so expect another patch.
Diffences have been patched as of 3/1/2019
Also added label property to end of Sprite parameters
This will stop the sprite on the label for texture packer approach
See https://zimjs.com/explore/fruit.html
SVGContainer() and svgToBitmap() now handle remote SVG, SVG tag and SVG string as input
TypeScript, Templates, Distill, Bubbling, Code page, have all been updated.
Blog and Social Media launch, still to come.
ZIM 9.5.1
Fixes for zns=true - various colors and objects were missing the zim namespace within ZIM.
Thank Alfred Yim for the report.
Adjustments to the Keyboard were made to handle no labels provided (thanks Ami Hanya for the find)
Added startPaused and mouseMoveOutside to Parallax as well as a paused property and pause(state) method
Thanks Frank Los for the prompting
ZIM 9.5.0
LAYER
https://zimjs.com/explore/layer.html
Added a Layer component that provides a 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.
IMPROVEMENT 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.
Thank you, Stefan Soljemo for the suggestion on Slack https://zimjs.com/slack
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
EMITTER - IMPROVEMENT
https://zimjs.com/2018/slack.html
Changed Emitter to emit to a particles container BREAK - this gets added right under the emitter
This makes the emitter be moveable without moving all the particles that have already been emitted.
KEYBOARD - IMPROVEMENT
Made Keyboard work with center and right aligned and scaled Labels as well as backgroundColor and backing and padding.
Turned off resizing the keyboard on show(). You will need to custom scale or position again after a keyboard.resize(); Thanks racheli golan
TRANSFORM - IMPROVEMENT
Added events parameter to transform() and to transformControls for dynamic setting
This will turn on transformed event for pressmove on controls as well as the traditional pressup.
Added a "transformshow" and "transformhide" events to add() and remove() for objects with transform()
Fixed nested transforms, cursors for transforms in rotated containers
Added NOT activating and deactivating transforms when objects are clicked that are on top of transform object - using getObjectUnderPoint.
Added toggleGhost(), showGhost() and hideGhost() methods to transform transformControls object to show outline of object when transforms are not showing.
PARALLAX
Added startPaused and mouseMoveOutside parameters to Parallax
Also a pause(state) method and paused read-only property
GENERAL - NO BREAKS
Added borderColor and borderWidth to RadioButtons and changed backgroundColor to be background color of circle rather than border color
Changed backgroundColor default to be white with .8 alpha
Fixed Sprite to accept CreateJS SpriteSheet - earlier testing for auto image had disabled ZOE import.
Fixed Pane to receive a pattern - the rectangle had flatBottom param...
Adjusted Rectangle with and height defaults to be each other if only one is provided - so providing one will make a square of that value
Added close and closeColor to styles for Pane
Added test in STYLE to not try and clone any stage or stageGL values.
Updated addTo, center, centerReg STYLE to allow single container value - did require config objects (which still can be used). They also accept true
Button, List, Window, fixed cloning with border set to -1 - this was being set to null and then cloned to be default of 1, etc.
Fixed rollColor property of Button - was setting label color not rollColor
Fixed Button clone when border turned off and icon present - which turned default to have a border
Fixed glitch in animate along path (introduced in 9.4.1) so object now stays in place at end of animation (Thanks Alfred Yim and Frank Los)
ZIM 9.4.1
Various IMPROVEMENTS and updates (no BREAKS) while working on GEN-PEN at https://zimjs.com/genpen
GEN-PEN is a full app with lots of List, Organizer and Panel interface and Pen and MotionController work.
LIST
Added an itemsText read-only property to List to give an array of item label text - if no label then null in array.
Added a clear() method to the List
Fixed bug when enabling button having mouseChildren set to true - now will remember this when re-enabling
By default, the Button has mouseChildren set to false but in some custom buttons this is not desired.
This is rare - but the custom List buttons in GEN-PEN to drag, lock, and hide were aversely affected.
Added getter setter method for text property of Label - so if Label is manually changed, text property reflects change
PANEL
Added index parameter to nextPanel() on Panel - if using a series, can go to specific index default null for next chosen panel.
Added event parameter to nextPanel() on Panel default false - set to true to make nextPanel() trigger change event
Added an overlay property to Panel that makes the panel dark when enabled is set to false
Added an extraButton parameter to Panel to give an extra button for reseting for instance.
PEN
Added lineAlpha and lineBlendMode parameters and properties to Pen that work on each line
Added sizeScale and spreadScale properties to Pen to scale these values after picked from optional ZIM VEE values
Changed deleted Pen lines to be visible false rather than alpha false (internal so new lineAlpha is easier)
Added Pen sizeFactor and spreadFactor properties that work independently from sizeScale and spreadScale
This allows two dimensions of pen manipulation - for animating and adjusting depth, for instance
Added note to Pen that cropScale should be kept at 1 for iOS to avoid oversize canvas issues
Added lastSelected property to Pen that remembers the last selected segment
Included pressmove events in enabled property of MotionController
Added infinite property to Pen to draw single segment until stop() is called
Made animating pen along a path start with infinite and end with stop() - also adjusted for pauseAnimate() and stopAnimate()
GENERAL
Added to Squiggle and Blob the following properties:
lastSelected - access to the last selected (or created) control container
lastSelectedIndex - the index number of the last selected controls
Fixed a bug in animate that was not letting a path animate twice in some cases - just set the target pathRatio to null when animate ends
pathRatio is used internally - percentComplete is used externally and works when tween is running but was missing being able to set it ahead of time...
Still may not set pathRatio ahead of time, but pathRatio is being set back to null at end of animation and will be set to 0 at start of next animation.
This may lead to a situation where we want to start at a percentComplete...
oh... that should be okay as the animate will start at 0 and jump to the percent complete on first Tick.
This is better than starting at 0 and jumping to the 1 (pathRatio max) before percentComplete even kicks in...
Should be good... could possibly flash unless we caught that - will keep an eye on it...
Fixed mousewheel scroll to work when hovering on Window (or List) - was using e.stageY on a window.addEventListener (not going to work!)
Adjusted decimals time parameter to also show minutes : seconds rather than minutes : decimal minutes
Added calculate() to MotionController Ticker to calculate speed on manual x and y input
fixed Waiter dispose() to properly remove createjs tweens - thanks Frank Los.
Added cursor to objects with hov() set to true
Added pausing the drag in animate() to the pause() method added to the target by animate() - thanks Jaime Convery for the find
Limited ratio of ZIM colorRange() to between 0 and 1 - wiggle of color sometimes goes a touch under or over resulting a hex number conversion with one extra character (black)
Updated Docs, CDN, Code page, Templates, TypeScript and announced on Slack at https://zimjs.com/slack - no bubbling videos... but an Explore on GEN-PEN
ZIM 9.4.0
ORGANIZER
https://zimjs.com/explore/organizer.html
Added a ZIM Organizer class to organize a List
This lets the user add and remove items, and move them up and down in the list
The Organizer can be found in the docs under components above Loader near bottom of components
The organizer parameter of List can be used to add the organizer to the list.
This will insert the organizer at the top of the list (and under the titleBar if there is one)
Or a list can be passed to the Organizer's list parameter and then it can be manually positioned
In making the GenPen app, the Organizer was used a half dozen times for three different purposes - very handy
PANEL
https://zimjs.com/explore/panel.html
Added new Panel() class just before Pane() in Components.
This gives a box with a title bar and optional arrows for more than one screen in panel
Panel is more simple than a Window - which has scrollbars, etc.
Panel can be dragged but has no close button - perhaps a Pane() would be used for that
Passing in a series to the Label and color/backgroundColor will make multiple screens (shown one at a time)
A choice of a single right arrow or left right arrows can be used to cycle through the panels
PEN AND MOTIONCONTROLLER - IMPROVEMENT
Changed pressupStop parameter to 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.
Adjusted mouseDownIncludes on MotionController to include specified object even when inside a container
Fixed bug in Pen with new paper after old paper has been moved
This was an addTo() - remember the default of addTo uses localToLocal to match positions
Using shape.addTo(newPaper, 0, false) solved a very tricky bug... for when you expect a 0,0 position.
Added "recordUndo" event to Pen to help tie pen in to outer undo system
Fixed up nib system - so now no invisible default nib - was causing simultaneous draw and drag issues.
Nib with drag uses different placement than nib with MotionController, etc.
LIST AND TABS - IMPROVEMENT
Added scrollBarOverlay parameter to List BREAK - after scrollBar parameters
This defaults to true and will overlay the scrollBar on the list rather than add space - which would leave a gap when scrollBar is not there
Adjusted List to not override padding with spacing. So it will default to spacing but you can alter padding, paddingVertical and paddingHorizontal
Remove indentHorizontal and indentVertical - BREAK these were needed for label indenting but then we added labelIndentHorizontal and labelIndentVertical
The indent will work only on its direction - horizontal or vertical. Padding works in all directions.
Adjusted the docs of List to describe spacing, indenting and padding relationships.
Fixed selectedColor glitch in Tabs - was not starting with selectedColor for text as this was pasted in the rollColor
Adjusted Tabs to use zim.copy with clone set to true for proper cloning.
Adjusted List and Toggle to use zim namespace in DUO function to work properly with zns=true
Made vertical:false List slideSnap be "horizontal" by default
Added support for starting with an empty list
Adjusted Tabs and List removeFrom() to not give error if no items to remove
Added original color and backgroundColor to custom Button objects passed in to list or tabs
No longer giving "tabs have total less than width" message - instead setting the width to the width after the tabs are made (BREAK)
Fixed Tabs backdropColor defaults - had typo for backgroundColor defaults
Adjusted Tabs rollColor on first item
Added excludeCustomTap parameter to Tabs and List to let custom Button objects have their own tap() - for instance, if previously set
Fixed glitch in height when using titleBar.
Made tap() ignore List titleBar and organizer
List now accepts corner in format of [topLeft, topRight, bottomRight, bottomLeft]
Adjusted Tabs backdrop to change size if the tabs change size
Added clone parameter to end of List and to addAt() method
TILE - IMPROVEMENT
Added ZIM VEE support to align and valign for Tile - now can set a series() for different alignment!
Can already set ZIM VEE for different column and row sizes.
ZIM VEE for align and valign is not supported with matching squeezeH and squeezeV specified - too complicated.
TAG - TEXTAREA
IMPROVEMENT These now support drag() and gesture() (no rotation) - thanks KV for the catch!
The https://zimjs.com/explore/tag.html has been updated with a drag() example at the bottom in red
backgroundColor, padding, paddingHorizontal, paddingVertical, expand parameter have been added
The drag will naturally work around the edges of the HTML tag
The padding (default 10) will trigger drag as will the expand (default 20)
So if you have a large padding, you may want to set expand to 0 for instance.
To make the whole tag drag use: myTag.style.pointerEvents = "none";
VEE
added vee(obj) to code module under featured
vee(obj) is a short function that returns true if obj is in ZIM VEE format else false
ZIM VEE format is [], {min:a, max:b}, function(){}, {noZik:x}
ZIM VEE 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.
ZIM VEE accepts any value and if not in ZIM VEE format, will just return the object
It is called ZIM VEE as it was launched with ZIM VEE (5) - we are on ZIM NIO (9)
GENERAL
Added a titleBarBackgroundColor to Pane and changed titleBarColor to be for the label of the titleBar - like Window, List, etc.
Fixed a glitch in MotionController - since Accelerator was added - was not dispatching "moving" events properly
Adjusted loc() to not default to 0 if x or y is missing but rather keep the object's current x and y
Fixed CheckBox style for checked style to work properly.
Fixed second arrows on Stepper to work since shifting parameters on Triangle.
Made LabelOnPath accept a string for the label parameter - and then it converts the string to a Label
Added automatic pointer to object with tap()
Patched 9.2.0, 9.2.1, 9.3.0 with loc() in transform() rather than pos().
Fixed swatch text on ColorPicker to align "center" when changed
CDN, code page, templates, Distill, TypeScript, GitHub, Docs updated
ZIM 9.3.0
PEN - IMPROVEMENT
https://zimjs.com/explore/pen_undo.html
Re-organized internal pen to accommodate multiple undo and redo and individual drags and deletes
The paper property is now a Container that holds either Bitmaps (if cache is true) or a shapes (if cache is not true)
Added a draggable parameter (default true) to let pen segments be draggable
Added an onTop parameter to dictate whether the dragged segment comes on top
Holding the CTRL key will drag all the segments - actually drags the paper
Added an deletable parameter (default true) to let user remove segments
SHIFT press on a segment to remove it
CTRL SHIFT press to delete all
paper refers to the Container and is read write to change containers if desired (draw different layers, etc.)
The shape parameter has been changed to paper - to receive an optional Container
If no container is provided Container is made and placed one layer under the pen in the Container that holds the pen
There are no more shape and bitmap properties as there is now a bitmap or shape per each line drawn - so use paper.getChildAt() if necessary
Added a "stop" event to pen that triggers when the motion has stopped (after damping)
Pen now has an undo parameter that defaults to 0 - set to a number to add undo and redo functionality
Added a saveState(obj) method to record a transform change to the paper or a line segment for an undo state (only needed on manual change)
This by default happens when the stop event triggers
Added an undo() method that goes back one recorded state - can be called multiple times - but does nothing if past the undo level set in parameter
Added a redo() method to redo any undo() calls - unless draws.
Added an undoLevels property to get or set the number of undo levels
Added a draggable property to read only if segments are draggable
Added a cropScale parameter that defaults to 1 (stage size) - increase if you want to drag or move shape and paper
Made pen use localToLocal with shape so can move paper and still sync up drawing.
Added a delete(index) method to delete a line segment at a given index (actually sets its alpha to 0 to maintain layers on undo)
Added a deleteSegment(segmentObject) method to delete a line segment object (actually sets its alpha to 0 to maintain layers on undo)
TAG
https://zimjs.com/explore/tag.html
Added a Tag() class to create and overlay a div tag with a certain dimension
Any HTML can be added with the add()
Also has tag, innerHTML and style properties
There is a resize() method to be called if manually moved or scaled.
Resizing a fit or outside mode will auto resize.
Pane and Pages will handle adding and removing.
The overlay effect is the same as with TextArea and Loader
So canvas objects will always appear beneath the Tag
and there is a minor lag when resizing windows or dragging a pane, etc.
ORD
Added an ord(num) chainable method to move (relative) layer index
So circle.bot().ord(1) moves up one from bottom and circle.top().ord(-2) moves two down from top
INHERIT
Added inherit parameter to all classes with style.
This can pass styles on to objects made by the class - used internally
But could be used to pass styles directly into a class as it is created
Made List pass on styles to Window and Tabs through this system IMPROVEMENT
Now setting size:10 on list will change the size of the Label in the Buttons of the Tabs of the List (unless custom objects in list)
LIST - IMPROVEMENT
Fixed List to work properly with padding (and paddingVertical, paddingHorizontal) - these now default to the spacing in their direction.
They can be set to 0 to have no space on the ends of the list
Added horizontal slideSnap to Window - was left off
Changed List to default to currentSelected:true
Added first() and last() chainable methods to Tabs and List
Added selected, text and label properties to List
Fixed a slight positioning error in addAt() - no need to re-adjust the tab size as it is done in tabs
Fixed Tab select and unselect colors now that items can be added to and removed from tabs - internally, the tabs should only be used at start
Fixed up scroll max to take into account padding
GENERAL
Adjusted getQueryString() to remove + from urlEncoded data IMPROVEMENT
Adjusted Bitmap to clone actual width and height not ignored 100x100 default as that messed up clones.
Adjusted Stepper so setting min and max property limits number and adjusts greyed arrow if need-be.
Patched 9.2.1 with stepper setting as well.
Made MotionController ignore CreateJS objects which do not have a hitTestPoint, etc.
Added a hasProp(string) method to all display objects
ZIM 9.2.1
Adjusted STYLE, POSREG, DRAGALL and KEYFOCUS to work with zns=true - thanks Ami for the find.
Changed about 20 references to colors, and zim functions like copy, merge, etc. where namespaces were not used - this can mess up when zns is true.
This update needed to be made but could not safely be a patch due to the number of changes.
Adjusted frame.asset("somesound.mp3").play({loop:-1}) to also be {loop:true} and added a loopCount property for optional number of loops.
but can also still use loop:-1 or loop:10.
This is consistent with how loop works in animate(). The loop:-1 still works as well.
Added a password Boolean parameter to TextArea to make the field a password field (one line input field) - thanks Andi for the suggestion
If animate() is missing props it gives a console message (with zon=true) and returns the object.
TypeScript is updated.
ZIM 9.2.0
PEN
https://zimjs.com/pen.html
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
LABELONPATH
https://zimjs.com/explore/labelonpath.html - thanks KV for the request!
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
TOGGLE
https://zimjs.com/explore/toggle.html - thanks Andi Erni for the idea and code start.
Added a Toggle() component after the RadioButtons
Parameters: width, height, label, startToggled, backgroundColor, margin, indicatorType, indicatorColor, toggleBackgroundColor,
color, borderColor, borderWidth, corner, indicatorCorner, shadowColor, shadowBlur, time, labelLeft, style, group
Gives a change event and check the toggled (or selected) property - works with STYLE and Accesibility
LIST
https://zimjs.com/explore/list.html
https://zimjs.com/explore/listObjects.html
Added a ZIM List component for a vertical or horizontal list of items - thanks Andi Erni for the prompting
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.
Items can be added or removed from the list with addAt() and removeAt()
You can animateTo() and index as well - not working properly yet for when custom objects are in the list
BUTTON AND TABS - IMPROVEMENT
https://zimjs.com/explore/verticalTabs.html
Added align, valign, indent, indentHorizontal, indentVertical parameters to end of Button and Tabs
BREAK - added a vertical parameter to Tabs just before spacing set to true to make vertical tabs
BREAK - removed flatBottom parameter of Button and for Tabs it is changed to base with default "none" when no corner or corner is an array
and more values of "bottom" (default when corner and not vertical), "left" (default when corner and vertical), "top", "right"
corner will then be the opposite corners to the base
Added borderColor and borderWidth styles for Tabs
Fixed currentSelected to not show selected value - got lost in color / backgroundColor change over
BREAK - removed flatBottom from Rectangle as corner is now configurable with Array and Tabs use base rather than flatBottom
Note - this breaks any traditional parameter order pointing to dashed.
BREAK - Added labelAlign, labelValign, labelIndent, labelIndentHorizontal, labelIndentVertical parameters to Tabs
**** Added change() and noChange() chainable method to capture change events on components
FLATBOTTOM - REMOVED - BREAK
The flatBottom parameter has been removed as corner now accepts an array and Tabs use base for more flexible horizontal vertical arrangement
So the parameter order of Rectangle, Button and Loader from dashed on has been changed
IMPROVEMENT MOUSE POSITION ON TOUCHSCREEN
USE Mouse Event Object: e.stageX AND e.stageY - NOT stage.mouseX and stage.mouseY - these last two do not work with touch screen.
We have 100 places where we get mouse positon and almost all are working fine.
But we missed one for the initial point down for dragging with slide - this has been fixed
Went through docs and fixed all examples using stage.mouseX, etc.
Fixed minor places in Stepper and Parallax as well.
GENERAL FIXES
Added default particles to Emitter.
IMPROVEMENT - Squiggle and Blob when animating rotation of points now adjusts animation along path correctly - for animated paths (interactive was fine)
BREAK - Indicator parameters have changed to foregroundColor, backgroundColor (for not selected) and backdropColor for the backdrop (which is often left out)
The background property has been changed to backdrop. Pane and Tabs also have a backdrop - it is the background behind the background ;-)
So the layers are selectedColor (font), color (font), foregroundColor, selectedBackgroundColor, backgroundColor, backdropColor - sigh.
Added onTop and interactive properties to Squiggle and Blob
Added a getAngle parameter to Squiggle and Blob getCurvePoint() and the CODE module pointAlongCurve() function
These now return an angle at point property along with x, y, etc.
Fixed a bug in pos() when bounds set to negative x and y
Made align:"middle" work as well as align:"center" on label
Adjusted ColorPicker to accept borderWidth and borderColor styles - for color rectangles or circles
Fixed glitch in Swiper to work properly with stage as the swipeOn parameter.
Fixed glitch in MotionController introduced in 9.1.0 with accelerator (put brackets around ternary when used in calculation)
BREAK - changed mouseDownIncludes parameter and property of MotionController to mousedownIncludes.
Added target automatically to mousedownIncludes in MotionController - this can be removed from the property array if not desired
Fixed flip vertical problem with MotionController - now points the right way! We suspect hackers.
Added a clear() method to ZIM Dictionary()
BREAK - adjusted Label to not automatically center on a backing (by default there is no backing)
backing is added when you add a custom backing DisplayObject
The Label now will align and valign properly on a backing with padding - as opposed to automatically centering.
BREAK - changed CheckBox check property to indicator and color to indicatorColor
BREAK - changed RadioButton dots property to indicators
Adjusted margin on CheckBox to be closer to CheckBox when set to 0 (inline with RadioButtons and new Toggle)
Adjusted the right hand and bottom margin of RadioButtons a little.
BREAK for objects with outline(), changed toggle() and toggled to outlineToggle() and outlineToggled so as to not conflict with other toggle() and toggled methods and properties
Fixed talk() for Accessibility - talkTag.setAttribute("aria-hidden", !_aria); seemed to be making it not work anymore?
Added Toggle component to Accessibility
Added wait time to sequenceWait call - was taken out during wait updates
Fixed a bug in running a Sprite backwards and not ending at 0 - thanks Alex Gopher for the find.
ZIM 9.1.2
SQUIGGLE AND BLOB UPDATES
Added an interactive parameter to Squiggle and Blob to quickly turn off controls, drags, selects, etc.
This leaves just the shape and should be set to false when not needing to interact with shape
Added pointControls and pointCircles properties to Squiggle and Blob to access these arrays directly
Before we had to go through pointObjects[0][0] to get to control container and pointObjects[0][1] to get to circles
Animation should be done on the pointControls but immediate placement should be done on the pointCircles
This is because when dragged, the circle is moved but the control is left in place until mouseup
Added a transformPoints() function in the Code module to scale, rotate or position points in a Squiggle or Blob format
Added a transformPoints() method to Squiggle and Blob that use the transformPoints function to change their points
This allows you to scale or rotate Squiggle or Blob points without affecting their control points or stroke thickness
https://zimjs.com/explore/scalepoints.html
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();
END EXAMPLE
Fixed a glitch when unpausing a dragged object along a path
Made objects follow a Squiggle or Blob path as the path is being moved or manipulated IMPROVEMENT (although also patched in ZIM 9.1.0)
This results in a better experience when editing live animations
EMITTER
Adjusted Emitter to work if not added to stage or parent.
Changed Emitter pause() and paused to pauseEmitter() and emitterPaused - to not conflict with animate() pause() and paused
as sometimes we animate the Emitter. BREAK
SERIES
Made series() hold just regular parameters or a single parameter of an array.
series(red, green, blue) is now the same as series([red, green, blue])
LABEL IMPROVEMENT
Added a "baseline" value for valign parameter of Label that puts the registration of text at the baseline
Added labelWidth and labelHeight parameters to Label - use them both to override font size and fit text to dimensions provided.
https://zimjs.com/explore/text.html Thanks Ami Hanya for the prompting!
labelHeight on its own does nothing. labelWidth on its own is the same as lineWidth - it will wrap a the provided value.
ZIM 9.1.0
MULTIPLE SELECT SQUIGGLE AND BLOB POINTS WITH DRAG AND ARROW CONTROL
Try it out at https://zimjs.com/explore/multipleSelect.html
Added select and multiple select (with CTRL key) to Squiggle and Blob. IMPROVEMENT
Selected control point circle and handles can be dragged or moved with arrow keys.
Shift arrow key moves 10 pixels at a time.
Changed the CTRL click to SHIFT click for removing an existing point BREAK
Added a single undo (for now) for adding or removing control points
Added Squiggle and Blob to the KEYFOCUS
Added selectColor (string) and selectPoints (boolean) parameters before editPoint BREAK
Added SelectionSet and SelectionManager to the Controls Module
See https://zimjs.com/explore/selectionTest.html
Adjusted zog() and zta() to not show if zon (comments on) is set to false before ZIM is loaded. Thanks Ami for the prompting.
Fixed Sprite() run() so that call:function(target){} receives the target properly if no params are passed. Thanks Chris for the find!
Adjusted the MotionController to accept the container in the mouseDownIncludes - previously only children of the container were eligible. Thanks Alicia for the find!
Replaced all frame.color with just color as these are now stored on ZIM - this helps DISTILL run without Frame.
frame.color will still work.
Tidied up dblclick cycle colors in Squiggle - when adding new point was using Blob defaults. IMPROVEMENT
ZIM NIO (9) ~ added 11k
Mini-site: https://zimjs.com/nio/ that demonstrates new features - here is a summary:
animate() - convenience props: path, orient, flip, flipVertical, zoom, speed, layer, fade, extra
animate() - parameters: dynamic, drag, clamp, startPaused
animate() - properties added to target: percentSpeed, percentComplete
animate() - methods added to target: paused() - to support Accelerator()
Accelerator() - now accepts targets with dynamic animation
MotionController() - now accepts an Accelerator as a target
** more details below
PIZZAZZ 4 - Blob and Squiggle shapes and animation path shapes
https://zimjs.com/nio/paths.html
DOCS - CUSTOMIZE
Added a TOP link to the search area
Added a Customize link to a tool to make a list of items used in your ZIM code
https://zimjs.com/customize.html
These will make various sets of links that will feature these items
https://zimjs.com/docs.html?item=Circle - opens Circle docs.
https://zimjs.com/docs.html?items=Button,Dial,Emitter - shows Feautured Items.
DYNAMIC AND PATH ANIMATIONS - IMPROVEMENT - Thanks Andi Erni and others for the promptings!
The speed of animations can be controlled with the percentSpeed property on the target
Animations can be combined in an Accelerator to control all at once
(along with Dynamos (dynamic Sprites) and Scrollers)
Accelerators can be controlled with a MotionController (or techniques below)
percentSpeed also works with Slider, Dial, Stepper, Swiper and Parallax
percentSpeed also can be added to wiggle or animate
Animations can also be scrubbed with the percentComplete property on the target
percentComplete works with Slider, Dial, Stepper, Swiper and Parallax
percentComplete also can be added to wiggle or animate
Animation along a path (Blob or Squiggle) supports dynamic animation
Objects can now be dragged along a path - see DRAG below
PERCENTSPEED
Added dynamic parameter to animate().
Set dynamic to true to be able to change the speed of the animation
with the percentSpeed property of the target object.
See https://zimjs.com/nio/speed.html
Adjusted Accelerator so it accepts any object with a percentSpeed
including an object that is being dynamically animated.
Added a clamp parameter to animate() to limit dynamic animations to edges of their times
otherwise time can go well beyond and take just as long to reverse to active animation time range
See https://zimjs.com/nio/controls.html
Adjusted MotionController so if an Accelerator is passed in
the MotionController operates percentSpeed rather than x and y
in any of its types - mousemove, keydown, gamestick, etc.
PERCENTCOMPLETE
Added percentComplete property to any object being animated.
Setting this gives manual control for instance with a Slider, Dial, mouse position, Parallax, etc.
https://zimjs.com/nio/parallax.html
FLIP
In addition to orient, there is now flip and flipVertical convenience props for animate()
set these to true to flip the target with scaleX and scaleY depending on direction
https://zimjs.com/nio/flip.html
DRAG
Added a drag parameter to animate() that lets you drag path animations
Set startPaused to true to pause the animation and drag or drag a moving animation.
Added a redirect convenience property to the props object.
This defaults to true so that drag will alter the direction of the animation IF rewind is set
Set this to false to not alter the direction - you can still drag backwards
but when you let go, it will go in the direction the animation was going
https://zimjs.com/nio/drag.html
ZIM NIO EXTRA! - IMPROVEMENT
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
and other object properties can control the animation.
https://zimjs.com/nio/extra.html
There is a general and full format for EXTRA! but convenience properties are also provided.
These primarily help with depth while animating along a path (Squiggle or Blob) or just a straight line with x and y.
ZOOM, SPEED, LAYER, FADE
Added zoom, speed, layer and fade convenience properties to animate props
These accept an array of values - [inputMin, inputMax, outputMin(default 0), outputMax(defaunt stageH)]
zoom:[.5,1.5] will scale the target to .5 if its location is at 0 and 1.5 if at stageH and then proportionally in between
speed:[50,100] will make the animation play at a slower speed the higher the target is on the stage
layer:[0,10] will make the target change layers from the bottom to the top if animated along the y from y=0 to y=stageH
fade:[0.5,1] will make the alpha fade as the target recedes to the back (top of the stage)
This will help with depth animation to make things farther away animate more slowly
and give the ability to animate around an object depth-wise.
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 zik() to pick randomly from
inputObj - (default target) - the object with the input property - probably the animation target but could be any object
inputProperty - (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 stageH) - 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:stageW, 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.
CORNER
Modified all corner properties to accept an Array [topLeft, topRight, bottomRight, bottomLeft]
new Button({corner:[20,20,20,0]}).center();
https://zimjs.com/nio/corners.html
TAP
An chainable tap(call, distance, time, once) method has been added to all DisplayObjects along with a noTap() method
This acts like a traditional click where you down up without moving the mouse (within the distance parameter)
This is handy too as the methods are chainable. The callback function will receive the traditional event object
HOV
Added a short chainable method hov(value, prop) to change the value of a hovered object
By default this is the alpha if a number is passed or the color if a string is passed
new Circle().center().cur().alp(.5).hov(.8).tap((e)=>{e.target.color = red; stage.update();});
GENERAL
Added interpolate and percentage parameters to closestPointAlongCurve()
That returns either a closest interpolated point
or the percent along a path such a point would be - used by drag parameter in animate.
Added damp parameter to Slider and Dial
use with Ticker rather than "change" event - eg:
Ticker.add(function () {circle.x = slider.currentValue;});
Fixed Stepper clone - was missing new color (for text color) parameter
Updated segmentPercents to segmentRatios
to keep all percents 0-100 and all ratios 0-1
Fixed pos() to position properly inside rotated and scaled bounds
had been using boundsToGlobal() should have been using getTransformedBounds()
Fixed thickness now being cloned properly in Squiggle
Removed labelColor and labelOffColor from Tabs as these were replaced by color and offColor - BREAKS parameter order after corner
Adjusted Tabs and Pad color and rollColor of "selected" tab to be colorOff rather than color when currentSlected is false
Adjusted Tabs and Pad so if currentSelected is false, the current selected button does not loose its rollover when pressed
All control objects now have a type property that gives the class name as a string - DisplayObjects already have this
Added pane and textArea properties to Blob and Squiggle to refer to the recordPoints Pane and its TextArea - helps to add interface to popup if desired
like to let user modify point details and submit back to app.
BREAK - changed Window titleBarColor to titleBarBackgroundColor and added a titleBarColor for the text color
Fixed glitch in title bar when not draggable - letting you click through to content - no longer does this
Added size property to Label to change font size after creation - thanks Ami Hanya for the prompting
Welcome to ZIM NIO - fresh on the heels of ZIM OCT - which brought STYLE and cool Tile updates and more!
TypeScript has been updated, code page, Examples page, front page logo, Distill, Bubbling videos, Templates are updated.
Blog to come, social media to come, etc.
ZIM 8.3.0
Added loc() chainable method
pos() no longer positions the registration point unless the reg parameter is set to true
So loc() will position the registration point at loc(x, y)
and default to add to stage, or choose some other container or add at index, etc.
BUT alternatively, loc can also accept any object with an x and y property as its first parameter
This could be another Display Object or a zim Point(100, 100) or an object literal {x:100, y:100}, etc.
When the first parameter is a Display Object, obj.loc() will put its obj at the same place (registration wise) as the Display Object.
This will default to set localToLocal true for exact match - there is a localToLocal parameter if this is not desired.
So... loc() acts just like the old pos() with the option to obj.loc(displyObject) to easily match positions
Currently there is no loc style - it is easier to use x and y styles
as in x:10, y:10 rather than loc:{x:10, y:10}
PATH IMPROVEMENT
https://zimjs.com/explore/squiggleAnimate.html
Added animation along the path with ZIM animate - the following props are added:
path - pass in a Blob or Squiggle to animate along path
this is dynamic so if the Blob or Squiggle changes, the animation will change
if Blob or Squiggle has lockControls = false, then it is not dynamic
if a set path is desired, then lockControls to save processing
https://zimjs.com/explore/blobAnimate.html
orient - an object to rotate the target towards
if path is being used, orient defaults to orient along the path
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.
the target will then rotate to face the specified location
https://zimjs.com/explore/blobAnimate2.html
BLOB and SQUIGGLE
IMPROVEMENT Added click blob to add control point and ctrl click point to remove a control point
https://zimjs.com/explore/blobAdd.html
Added an editPoints parameter that defaults to true for the above - or set to false to not add and remove control points
gave Blob and Squiggle controls a num property that matches their points array position
Fixed a glitch when setting points property that was introduced in 7.4.0 where we started using the Container's dispose
IMPROVEMENT Added proper color to handle rectangles when using Blob changeControl
Added segmentPoints and segmentPercents properties to Blob and Squiggle
Added getPointAngle(), getSegmentPoint(), getCurvePoint() methods to Blob and Squiggle
Added pointAlongCurve, distanceAlongCurve, closestPointAlongCurve functions to Code module
IMPROVEMENT Blob and Squiggle now persists even with a changed number of points
Added update event to blob and squiggle for when number of points change
All events on Blob will now be kept but any custom events on the shape or controls will need to be recreated
as the shape and controls are now different objects. So capture the update event and remake your events.
Any events on the shape or the controls will be removed before the objects are replaced with new ones.
Fixed width and height parameters of Bitmap - they were not working since style update in zim 8. Fixed now.
Adjusted centerReg() to add to different container than the current container when a different container provided
Adjusted Keyboard cursor to properly center if Label has background
ZIM 8.2.0
ZIM KIDS
A new section of ZIM has been added called KIDS https://zimjs.com/kids.html
It treats coding as magic and presents the docs as spells ;-)
There is a basic code writeup https://zimjs.com/magic.html
There are currently four workshops with three levels each
The workshops let you see the commented code and type live in the browser
Please spread the word! Obviously, ZIM is not just for kids - but it is a great way to start!
COLOR RANGES AND ANIMATED COLORS - IMPROVEMENT
Added a colorRange(color1, color2, ratio) function to Code module
Added setColoRange(color1, color2) method to ZIM Label and shapes (Circle, Rectangle, Triangle, Squiggle, Blob)
Passing one parameter will set range from current color to the color specified in the parameter
Added colorRange property to ZIM shapes with values from 0-1.
This value will set the color of the object
to the color in the range matching the ratio - this can be used to wiggle the color
Added a color convenience property to animate() that runs the colorRange system
This allows you to animate from one color to another - including rewind, loop, from, wait, etc.
new Circle(100, red).animate({color:blue}, 1000);
Note - does not work with an animation series - use animate() in a call for a series of color changes
Thanks Jade for the prompting! See example https://zimjs.com/explore/animatecolors.html
ZIM now overrides Bitmap.clone() to provide a chainable clone like for Container, etc.
This also will clone the bitmap width and height by default
Usually, Bitmaps do not need to be cloned but to apply a filter they do:
https://zimjs.com/explore/mask.html
And to grab the color at a point they do:
https://zimjs.com/explore/pixels.html
Made MotionController mousedown and pressmove types not trigger if mouse down on an object
Objects with mouseEnabled of false do not count.
Added "toRGB" as a toColorType value.
Added empty containers with 0 bounds to any null Tile() elements (actually patched 8.1.0)
Fixed a few "use strict" issues in ZIM - thanks Bjorn Brockschmidt for the finds
placeReg(obj) - now returns obj for chaining (as does place())
Fixed resetBounds() to return object - was returning this, when meant return obj.
Also, since the last setBounds() update, resetBounds was not resetting if no parameters were passed.
Added a stickColor parameter and property to Squiggle and Blob
ZIM 8.1.0BREAK Changed the currentTarget parameter of drag() to all (default false)
container.drag() - will drag individual items in the container
container.drag({all:true}) - will drag the whole container
currentTarget has been added back to the end of the parameters
for backwards compatibility when using the ZIM DUO configuration objects.
Added a DRAGALL constant that defaults to false - set this to true to make drag() drag the whole container by default
Adjusted Window so titleBar is included in height - possible minor BREAK - thanks Ami Hanya for the find
Removed zim clone method from Stage and StageGL - also fixed copy() trying to clone stage
Added moon color = #ddd
BREAK Adjusted center() and centerReg() to not add to container if already in container (was bringing up to top - now will not)
POS - IMPROVEMENT / BREAK
Inserted right and bottom parameters before the container parameter
The container now automatically defaults to the default frame's stage (or existing parent)
** previously positioned only registration point
** now positions based on sides, top or bottom unless reg is set to true
By default, will position left and top of object - can also position right or bottom
Setting reg (or regX, regY) to true will position to the registration point
x - (default 0 or the current x) 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 0 or the current y) 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
right - (default false) set to true 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
bottom - (default false) set to true to postion the bottom of the object from the bottom of the container bounds
if reg or regY is true then it is the distance to the registration point not the bottom
container - (default current container or zimDefaultFrame stage) the Container to add the obj to and position
index, add are the same as before
reg - (default false) set to true to position to the registration point rather than sides, top or bottom
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
Also added pos to STYLE:
STYLE = {
type:{
Rectangle:{
add:true,
// all rectangles will default to a right position of 100, 300 or 500 randomly
pos:{right:true, x:[100,300,500]}
// also corner convenience values: "left", "right", "top", "bottom", "rightbottom" or "bottomright", "center" and "centerReg"
// pos: "right", // send to right
}
}
}
Added a POSREG constant that defaults to false.
Set this to true to change pos() to default to positioning the registration
This will be handy in transition - and who know, maybe you like the old way better.
TILE - IMPROVEMENT - Layouts
See https://zimjs.com/tile.html
Added features to Tile to make it very versatile (haha) in laying out non-scaled content
So, moved Tile to above Layout in the Pages, Layout, Accessibility area
Added width, height, compressionH, compressionV parameters after spacingV in Tile() - BREAK
These handle spreading the tiles out over a width or height and various compressions
This is similar to Layout but does not scale the content so much simpler calculation ;-)
Added resize(w,h) and remake(items) methods
Added a bunch of properties (matching parameters) to make the Tile more dynamic
These can be changed and then resize() called.
Added items property (Array) that can be updated with new items or different items (less, more, etc.).
cols, rows, and items can be changed and then remake() run.
Thanks Ami Hanya for the prompting - this will be very handy
MOTION CONTROLLER - IMPROVEMENT
Added pressmove type to MotionController - good for dynamic drawing with easing - default damp is .2
Added a mousedown event for mousedown and pressmove types
Added moving, startmoving and stopmoving events
Added a mouseMoveOutside parameter that defaults to false
Set to true to let mouse motion outside the stage affect motion
BREAK Changed rect parameter to boundary
and added a boundary property for dynamic boundary adjustment - thanks Andi Erni for the suggestion
BREAK - moved the container parameter to near the end and made it default to the zimDefaultStage
Updated CDN, GitHub, Templates, Distill, Code page, Docs, TypeScript,
Todo: Slack, Facebook, Twitter, Blog
ZIM OCT (8) ~ added 16k
STYLE
Replaced DEFAULTFONT with a general STYLE system. IMPROVEMENT
STYLE can be used to set any parameter on a DisplayObject.
For instance: Circle, Blob, Button, Pane, Bitmap, Sprite, 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
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,stage); // 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
STYLE = {
borderColor:dark,
borderWidth:5,
type:{
Rectangle:{
// color:red,
color:[red, pink, purple], // pick a random color from here
centerReg:true,
animate:{props:{rotation:360}, time:500, ease:"linear", loop:true},
move:{x:series([-200, 0, 200])}
}
}
}
// make three spinning rectangles
loop(3, function(){new Rectangle();});
See: https://zimjs.com/style.html for an example
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, SERIES, FUNCTIONS
Any property value can be a ZIM VEE value to make use of ZIM zik (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
See Docs on ZIM zik() and ZIM series() for more information
FUNCTION STYLES
The following functions have been added:
addTo, center, centerReg, transform, drag, gesture, outline, mov, animate, wiggle
Values of true will give default functionality for all but 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
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)
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 - if zns is true then use zim.ignore or just "ignore".
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.
A group can contain just one component and act like an ID in CSS.
COLORS
Colors have been reworked for the components (they stay the same for shapes)
Basically, color is now used for text and backgroundColor for the backgrounds - like CSS.
color - text (and rollColor)
backgroundColor - background of component (and rollBackgroundColor)
foregroundColor - foreground of component
borderColor - border on background and foreground
indicatorColor - indicator of component
SUMMARY OF PARAMETER CHANGES - BREAK
Most non-Label color and rollColor parameters and properties
have been changed to backgroundColor and rollBackgroundColor
color and rollColor have been kept when the component has text
and these now refer to the text - specifying a Label will override these.
Added backgroundColor to CheckBox and RadioButtons for the box and circle
The Tabs and Pad offColor is now the text color
and they get an offBackgroundColor to specify non-selected buttons
and they get backing and rollBacking parameters before the waitBacking
Exceptions:
Most components have their color parameter changed to backgroundColor.
The exceptions are those which shift to a foregroundColor parameter:
Waiter, ProgressBar, Indicator has its color parameter changed to foregroundColor.
The color parameter remains on the ProgressBar for its text color.
Waiter has its foregroundColor moved to before its backgroundColor - for consistency
Keyboard:
Changed Keyboard parameters so text gets color and backgrounds get backgroundColor
There are a bunch of these so here they are - old on the left and new on the right:
color to backgroundColor
textColor to color
shiftColor to shiftBackgroundColor
shiftHoldColor to shiftHoldBackgroundColor
placeColor to placeBackgroundColor
placeTextColor to placeColor
shiftBackgroundColor to shiftColor
// TOGGLE
There are objects that have control interfaces that can be shown or hidden:
Grid, Guide, Layout, Blob, Squiggle and objects with outline() or transform()
We have added a toggle(state) method to these
This has also been added to the Manager class which gives it to the GridManager, GuideManager, LayoutManager and TransformManager
Using toggle() will show the control (if hidden) or hide the control (if showing)
You can also use toggle(true) to specifically show and toggle(false) to specifically hide
A read-only toggled property has been added that is true if visible and false if not
BREAK - the transform(), Blob() and Squiggle() toggle parameter and property have been changed to allowToggle
Added the toggle system to Keyboard and ColorPicker, ProgressBar and Waiter (Pane already had one)
Many of these have hot keys to toggle or press on / press off to toggle and these still work
They also have show() and hide() and visible properties or showControls() and hideControls() and controls property
These will still work as well.
Added a show(), hide() to ColorPicker to allow it to act like a pop-up like Pane, Waiter, ProgressBar and Keyboard
Added an optional container parameter to ColorPicker - ColorPicker can still be added with addTo(), center(), etc.
but if it is being used as a pop-up, the show() and hide() or toggle() should be used.
// BACKINGS and BACKGROUNDS
The term backing is now consistently used for a custom DisplayObject added to a component
(such as a Pizzazz shape or pattern)
The term background is now consistently used for a built in background rectangle
These are specified with the backgroundColor parameter for Label, Indicator, etc. objects
In the past, both backingColor and backgroundColor were used which was inconsistent.
BREAK Changed Indicator, Tabs, ColorPicker and TextArea backingColor to backgroundColor
Renamed the backing properties of these to background to access the rectangle
// DOCS
Changed the order of the modules as they appear in the docs
FRAME, DISPLAY, METHODS, CONTROLS, CODE, WRAP, META
In the actual file, wrap and code come first and frame second last
This is needed as wrap and code do not require CreateJS
But from a user standpoint, the Frame, Display, Methods and Controls are most important
Hopefully you will get used to it - and it will be a good change
Changed the text docs as well and adjusted search to work with new changes
Added SubSection Markers and reorganized items within modules
// GENERAL
BREAK - changed drag parameters to draggable - as conflicts with drag function style
BREAK - changed the name of the Label backgroundCorner to just corner (easier to style)
BREAK - Added a corner property to Indicator after backgroundColor
BREAK - Added a borderColor and borderWidth to Keyboard - so changes parameter order
BREAK - added a borderWidth property to Stepper and Indicator - this is after borderColor so breaks parameter order
Also made border work on Indicator background
Adjusted copy() to not break when cloning a null value
IMPROVEMENT Fixed Button rollPersist to work if release outside of Button
Added indicatorColor property to CheckBox and RadioButtons that defaults to color
Adjusted ColorPicker so color text does not shift when picked (due to changes in centerReg() functionality)
PATCH - fixed bounds of cloned Container without initial bounds set - thanks Ami for the find.
PATCH - fixed ColorPicker when not with all colors, lastColor was set to blue and now it is not
This meant that the change event would not fire if the first color chosen is blue ;-).
IMPROVEMENT - clone() now clones the type property
so if you change the type of a Rectangle and clone it, the clone will have the changed type
Handy for passing an object with a custom type="Pattern" in for backings in STYLE
Adjusted Keyboard so selectedIndex starts at the end of the label text - also fixed backspace at 0 index with existing text bug
Fixed animate() when running a series with as a global function with no target
the last change for overriding by default only if x and y are animating - was expecting a target - fixed now...
IMPROVEMENT - updated Button so when it has a backing or icon,
it removes the rollover state when enabled is set to false
Adjusted backing on Label to mask backings of type="Pattern"
Adjusted Squiggle and Blob to drop properly when scaled or rotated
WELCOME TO ZIM OCT!
A kids section is also being added to ZIM Skool for workshops and secondary school lessons
Please let others know about ZIM and we'd love to hear from you at https://zimjs.com/slack - very productive!
---------
Updated TypeScript zip at https://zimjs.com/typescript/zim_ts.zip
Updated Distill at https://zimjs.com/distill
Updated Templates at https://zimjs.com/frame, Tips, CDN and Docs
Created Blog Post at https://zimjavascript.wordpress.com/2018/08/28/naked-objects-style-on-the-canvas-with-zim-and-createjs/
And CodePen at https://codepen.io/zimjs/post/naked_objects_style_on_the_canvas
Updated Tips page at https://zimjs.com/tips.html
and Code page at https://zimjs.com/code.html and About at https://zimjs.com/about.html
ZIM 7.3.2IMPROVEMENT Added an optional titleBar on the top of Window like there is in Pane to drag and close and have a title...
also added properties to access titleBar and its parts and the close button - added a "close" event
IMPROVEMENT / BREAK changed the names of Window parameters for indicator to scrollBar - thanks Bracer Jack
IMPROVEMENT / BREAK inserted scrollBarH and scrollBarV parameters default true to show scrollBars if scrolling is needed
BREAK called Pane() bar parameters titleBar for consistency with new Window titleBar parameters
Window has scrollBar parameters too so needed to distinguish a titleBar rather than use bar.
BREAK Changed the Pane() name of the barTitle parameter to titleBarLabel
BREAK Adjusted ColorPicker to set greyPicker, alphaPicker, buttoBar to false by default if one row of colors
Added a read only colors property to the ColorPicker that returns the array of colors
IMPROVEMENT Added "rgba" option to convertColor()
and BREAK changed second parameter to be toColorType with default of "hex" and other values of "string" and "rgba"
added an alpha parameter for alpha of RGBA conversion
So convertColor(blue, "rgba", .1) would convert the ZIM blue to rgba(80,196,183,0.1)
IMPROVEMENT / BREAK animate() override now defaults to false instead of true
except if animating an x or y value and the object is currently animating in the matching x or y value
In this case, all earlier tweens will be overridden along with the x and y unless override is set to false
This forces the developer to use two separate tweens if the desired override settings are different.
Previously, all tweens on an object defaulted to override true - to solve almost exclusively an x and y animation issue
Adjusted Emitter() to centerReg() but not add as this was overriding the positioning of the emitter.
ZIM 7.3.1IMPROVEMENT Added dispose() to all display objects
And adjusted dispose() on existing display objects to recursively remove listeners and remove from parents
The references to the objects on the outside must still be set to null to set object for garbage collection.
Updated docs for dispose() on all Display Objects
IMPROVEMENT outline() now remains on object when dragged or gestured.
outline() does not come up over Keyboard - thanks Bracer Jack
IMPROVEMENT Drag, Gesture and Transform objects do not come up over Keyboard even with onTop true (TBJ)
Added a controls property to the transformControls that references the controls container.
Updated TypeScript, etc.
ZIM 7.3.0
PATTERNS
Introduced ZIM Pizzazz 03 - custom patterns and animated patterns
These can be passed in to Button, Pane and ProgressBar objects
using the backing and rollBacking, toggleBacking and rollToggleBacking, waitBacking and rollWaitBacking parameters
at which point the pattern will be masked to the button, bar, etc. size.
The patterns can also be used on their own or masked by Pizzazz 01 shapes or your shapes, etc. using setMask()
https://zimjs.com/patterns.html
COLORS
Added Frame colors to zim namespace - and also global namespace with default zns set to false
This means to use zim colors just use black, pink, faint, blue, clear, etc. with no quotes
PROGRESS BAR AND PROGRESS PARAMETER
Added a ProgressBar() class with default "circle" barType - also "rectangle" for traditional bar
BREAK Added progress parameter to Frame and LoadAssets after the path parameter
This can receive a ProgressBar or a Waiter.
BREAK Due to the new Frame progress parameter, it is important to specify colors as Frame parameters
so that the colors show when the progress is running - so these have been moved to before the assets parameter
Loading now defaults to XHR as true if there is a ProgressBar - this gets load data from preloading
Adjusted Waiter to not require a stage so it can be made and passed in to progress parameter of Frame and loadAssets()
which may happen before there is a stage in the case of the Frame progress parameter.
SERIES
IMPROVEMENT Added a makeSeries() function to the Code module that returns a function which returns values in series
This can be used with ZIM VEE (zik) values to force sequential values from an array (passed to makeSeries)
TILE CHANGES - IMPROVEMENT / BREAK
Adjusted Tile() so registration and origin are at top left corner of bounds
Previously these were at the first element's registration point - which was odd for tiling centerReg objects like circles
Added optional colSize, rowSize, align and valign parameter after spacings
Moved count parameter to after cols and rows - really tired of adding null for count all the time
This was added to match the format of importing a SpriteSheet which often has a count that does not match the tile count
So SpriteSheet will remain as is with the count before spacing. And Tile will have the count after spacing.
Added a clone parameter (default true) to end of Tile
Set this to false avoid cloning a series unnecessarily
DEFAULTFONT UPDATE - thanks Bracer Jack for the prompting
IMPROVEMENT Applied DEFAULTFONT size and color properties to:
Button, RadioButton, CheckBox, Pane, Tabs, Pad, Stepper, ProgressBar, Keyboard
Initially, the font (family) and various other properties were applied but size and color were dictated by the component
Now, all the properties of the default font settings are applied which could BREAK the look of the app
if you were using DEFAULT FONT (only a few versions old). These properties include:
size, font, color, rollColor, shadowColor, shadowBlur, fontOptions, outlineWidth, outlineColor, padding, shiftHorizontal, shiftVertical
align, valign are available for the Pane
BUTTON UPDATES IMPROVEMENT / BREAK
The Button now has complete parameters and properties for
1. label (text), backing, rollBacking, icon, rollIcon
2. toggle (text), toggleBacking, rollToggleBacking, toggleIcon, rollToggleIcon
3. wait (text), waitBacking, rollWaitBacking, waitIcon, rollWaitIcon
The backing and icon parameters are read only references to current objects
Use the new setBacking(type, obj) and setIcon(type, obj) to manually adjust these at any time
This makes sure that old references are removed and any patterns are applied properly
Added a rolled property to Button that is true when button is rolled over
Added a wait() method to force the wait state of the button (similar to existing toggle() method for toggle state)
Adjusted Button so gradient and gloss work with custom backings
MISC
Added a series([]) function that is the same as makeSeries([]) but shorter in name for styles
Added a placeTextColor parameter to Keyboard BREAK
Fixed a problem with the icons - required cloning the icons as the board is remade during state changes
Added expand() to close button on Pane
Added chainable setBounds() method to Container and all extending container that overrides the CreateJS setBounds()
Also supports alternate parameters - (size) (width, height) or (x, y, width, height)
Updated TypeScript zip at https://zimjs.com/typescript/zim_ts.zip
Updated Distill at https://zimjs.com/distill
Updated Templates at https://zimjs.com/frame, Tips, CDN and Docs
ZIM 7.2.0IMPROVEMENT / BREAK - changed Frame parameters to include assets and assetPath as the fourth and fifth parameters
This allows initial assets to load as part of the Frame's "ready" event - thanks Bracer Jack (TBJ) for recommendation
This solves the double event call that often confuses people new to coding.
While adjusting the parameter order, moved outerColor parameter to after color parameter.
Added a queueOnly parameter to loadAssets (default false) set to true to give asset events only to the queue and not to the frame
eg. var q = loadAssets(etc) // will give a complete event to q and to the frame
var q = loadAssets({etc., queueOnly:true}) // will only give a complete event to q - NOT to frame
BREAK - changed the addTo() method's new localToLocal parameter to default to true
This means that when an object is added from one container to the next, the x and y are adjusted so the object does not appear to move
If this behaviour is not desired then set the localToLocal parameter to false.
This only affects an object that has an existing parent. (TBJ)
IMPROVEMENT Adjusted the DEFAULTFONT constant to optionally receive a Label config object so defaults for any font property can be set
Added a resetBounds() method to the Methods module of ZIM to reset bounds if previously hard coded.
IMPROVEMENT Added an empty backing event to Keyboard to stop presses from slipping through. (TBJ)
Added shiftHorizontal and shiftVertical parameters to Label
Adjusted CheckBox and RadioButtons to work with valign center Labels for better alignment.
Adjusted outline() to clear itself if another outline is set so now, this can be called in a Ticker for instance.
and we don't have to keep saying it is a snapshot in time! Thanks Bracer Jack
Examples have been added to the docs.
BREAK - changed the default padding to Window to be 0 - set this with padding or paddingVertical and paddingHorizontal
Added a removeAll() method to Window to remove all current content from the content container and update indicators. (TBJ)
Also added a "replace" parameter to the Window's add() method to replace the current content with the new content (first parameter)
Updated TypeScript typings at https://zimjs.com/typescript/zim_ts.zip - updated Docs, Distill, Templates, ZIP and code page
ZIM 7.1.0
1. Updated animate() to use a props parameter rather than an obj parameter.
Changed the existing props parameter to cjsProps as that is for older transition values.
obj still works for backwards compatibility but has been depreciated.
This is a conceptual change - props better describes that these are the properties we are animating.
It will be a fairly wide-spread change so there will be many tutorials slightly out of date - oh well.
2. Added a Boundary() class to the code module to store x, y, width and height
This can be used in place of a createjs.Rectangle in most cases.
The createjs Rectangle is still available and has more features.
This is to avoid confusion between the ZIM Rectangle and the CreateJS Rectangle.
The ZIM Rectangle is a DisplayObject whereas the CreateJS Rectangle is a data class.
The Boundary class can be used to specify a boundary for drag(), gesture() and for a Physics world.
3. Depreciated the rect parameter for drag() and gesture() and replaced it with a boundary parameter.
The rect will still work for backwards compatibility
4. Changed dragRect() and gestureRect() to dragBoundary() and gestureBoundary()
the old method names are still available but are depreciated.
These methods are used to dynamically change the boundaries - which is fairly rare.
The change is to match the new Boundary class for specifying a data rectangle.
Thank you to Bracer Jack for the prompting and confirming our nagging concern over two Rectangle classes.
5. Added a Point() class to the code module to store simple x and y properties.
This can be used in place of a createjs.Point in most cases.
The createjs Point is still available and has more features.
6. Added a paused property to all DisplayObjects
This will be undefined if the object has not been animated
Once animated, paused will be false until the animation is paused at which point it will be set to true
If the animation ends or is stopped, the pause property will be set to null.
This will allow the animation to be toggled with obj.pauseAnimate(!obj.paused)
7. IMPROVEMENT - added circularBounds parameter to gesture to keep rotated circular objects within boundaries
8. Added a DEFAULTFONT constant to the controls module below ACTIONEVENT (thanks Bracer Jack for the idea)
This can be set to change the font across all components to whatever is specified
Fonts specified per component will override this default
DEFAULTFONT can be set to a custom font - frame.asset("myFont.ttf") for instance
9. IMPROVEMENT- fixed gesture to not move if move is false and are double pinching
This was a glitch when we introduced surround bounds
10. Fixed startBounds parameter for drag() when using DUO.
11. center() and centerReg() will default to the object's parent if there is a parent and no container is provided
Thanks Bracer Jack for the suggestion
12. Changed global variable zon to be true by default to show messages from ZIM
In CodePen the libraries are passed in separately, so zon is missing from the code
and people were not receiving ZIM messages like bad parameter warnings, etc.
So the default now is true and zon must be set to false to suppress messages.
13. Added an asset object to Frame's loadAssets() in format of {id:"string", scr:"file"}
The loaded file can be accessed by id such as frame.asset("string");
The path paramter works in the same way as usual.
Specifying just the filename is still available: frame.loadAsset("filename");
Then the file can be accessed frame.asset("filename");
but the optional asset object offers an abstracted solution if desired - thanks Bracer Jack for the prompting
14. Updated TypeScript Typings for Point, Boundaries, drag, dragBoundary, gesture, gestureBoundary, animate and StageGL
ZIM 7.0.2IMPROVEMENT can now load Sprites with CORS (cross domain) when using JSON parameter
JSON was passing string version of URL to Sprite which voided the image crossdomain settings
Also, ZIM now pre-parses the images array in the JSON to match frame.asset() images
So the exact path is no longer needed in the JSON - just a matching filename will do
This is handy as TexturePacker, etc. often export with just the filename
and previously, this would not run if the SpriteSheet file were stored in an assets folder for instance
unless the JSON was modified to reflect the path - now, this is not necessary.
Adjusted gpu setting of Frame to properly make Bitmaps (broke in version 7) - patched 7 and 7.01
The change in 7 was to support IE as IE does not have an ImageData() constructor
so ZIM 7 was adjusted to use the createImageData() method of the context2D of the currentFrame.
Well... when gpu is true... there is no context2D for the currentFrame
so now a new temporary canvas is used to provide the createImageData method ;-)
Added hitTestGrid() to StageGL
BREAK added a currentSelected parameter after currentEnabled (before corner) for ZIM Tab
currentEnabled now only determines if tab can be clicked again when already selected
if true, this will call the change event even though the selectedIndex has not changed
The currentSelected defaults to true to highlight the selected tab after clicking
if set to false then the tab does not stay highlighted - good for button bars - IMPROVEMENT
Version 7 tried to not highlight when currentEnabled was true but this broke the Pad
so the functionality was split into two parameters
setting currentSelected to false will automatically set currentEnabled to true
IMPROVEMENT Added bounds transfer to when container is cached - apparently this is fixed in next CreateJS version
Adjusted Blob and Squiggle to store an internal mySet rather than set property
as this was conflicting with the CreateJS set method when animating the Circle or Rectangle objects in the control container
Swapped default for zon to be true - to automatically give messages from ZIM unless set to false
Was making CodePens and missing warning messages from ZIM about bad parameters, etc.
Updated TypeScript Typings for Tabs and StageGL
ZIM 7.0.1IMPROVEMENT Changed stage.mouseX and stage.mouseY to e.stageX and e.stageY when applicable
to let desktop touch screens access value - affected Keyboard drag, Swiper and a few other components
Adjusted Emitter() to moveTo random position rather than lineTo for emitShape setting (fixing a glitch)
Added swiperpause event and pauseTime parameter to ZIM Swiper
Added hitTestGrid() to Stage and StageGL classes
BREAK - added a sensors parameter to Frame that defaults to false
set this to true to use the Frame's devicemotion and deviceorientation events
this was set to default to false to remove the "depreciated" warning in the Browser console
Added zta() global function that logs Arrays and Objects to the console as a table
this binds the console.table() method
IMPROVEMENT Fixed Dial continuous to dispatch change event only different than earlier value
Adjusted Pad to show tabs it has if passing in a tabs list of less than number for pad
Added zik to wiggle() for base, min and max amounts
so now these amounts can be adjusted by an outside function for dynamic ranges with one wiggle
Added Keyboard selectedLabel and selectedIndex properties and showPlace() and hidePlace() methods
Thanks James Barrett for the prompting and thanks again Frank Los for the Keyboard class.
Fixed TextArea clone() method to properly clone TextArea
Updated TypeScript files and added link to top of docs
// PATCH
Adjusted Sprite to be interactive with JSON file and image from remote sites with CORS settings to anonymous
Previously, had to make a custom CreateJS SpriteSheet and pass that in to Sprite
Fixed Container to keep non-hardcoded bounds after being cached
ZIM HEP (7)
Added a Keyboard() class to the Display Objects (thanks Frank Los for the design and code)
Keyboard works with Label() to provide single line editable text without needing the system keyboard
Added top() and bot() chainable methods to put object at top or bottom of container - thanks Ami Hanya for the recommendation.
IMPROVEMENT Added links to libraries at the top of the docs for SOCKET, GAME, PHYSICS, THREE, PIZZAZZ, PIZZAZZ 2
as well as made all these files consistent in introduction and documentation format (inside CDN files)
Launched Physics and Three as version 1.0 - Game and Socket were already version 1 and Pizzazz is different
IMPROVEMENT Added video links to Docs - a little button near view and bits at the bottom of each doc entry
IMPROVEMENT Added wheel event to Window for mousewheel scrolling - was using out-of-date events
Added a scrolling event to Window when it is scrolled
Added an HTML NodeList to ZIM loop() - see ZIM zet() to get a NodeList like $() in JQuery
Dedicated ZIM Portal to Stephen Hawkings - may he portal on!
Added Button borderColor property - thanks Chris Spolton!
Added an svgToBitmap() conversion function to META module to convert SVG to a ZIM Bitmap
Thanks Kenil Domadia for the recommendation
For Base64 Bitmap support made Bitmap update the stage after 50ms and then after another 50ms
this is because there is a delay in creating a Bitmap from data - thanks Ami Hanya for the prompting
All the changes are reflected in ZIM TypeScript Typings https://zimjs.com/typescript/zim_ts.zip
KEYFOCUS - IMPROVEMENT
Added a global KEYFOCUS constant to keep track of which component has keyboard focus
This is a system for all components with keyboard controls (set to active)
The first component made will set KEYFOCUS to itself
Anytime a component is used it sets KEYFOCUS to itself
Components have a keyFocus property that can be manually set
There is only one component with key focus
so setting removes key focus from the last key focused component
Added KEYFOCUS to TypeScript
If tabbing from one component to the next is needed, consider using ZIM Accessibility()
Made keydown change components only if component is on stage
POS()
BREAK inserted an index parameter to pos(x,y,container,index,add) - also now accepts DUO
Was going to make the default be adding to stage - but after some thought, decided not to
You must still explicitly specify the container
We had changed it but then were getting errors where things were showing up unexpectedly in score boards, etc
and it just seems a little too dangerous
ZIM GESTURE
Added onTop and surround parameters to ZIM gesture() - thanks Frank Los for the suggestions
surround currently does not work if rotate is true
Adjusted gesture() rect parameter to handle resized and rotated objects
This is an IMPROVEMENT but also slightly BREAKS code with old rect values
Here you specify the rectangle to contain the object - not the registration point of the object
So this is slightly different than the rect provided to ZIM drag
To accommodate this we have added an update parameter to the gestureRect
This defaults to true and Gesture will dynamically update the gestureRect as the object scales and rotates
Internally, it passes a false to the new update parameter.
GENERAL FIXES
Removed ColorPicker indicator if currentIndex is less than 0
Fixed grip on ColorPicker to be dragable by setting shape to mouseEnabled false so background is selectable
IMPROVEMENT - adjusted TextArea so readOnly parameter works
Fixed decimal values for Stepper - some values had micro additions - these have been rounded to the decimal number
Adjusted tabs so that if currentEnabled is true, clicking button leaves button on rollcolor - like a button would - good for button bars
Fixed stage property in waitModal for buttons, tabs, etc.
Fixed next mousedown and hold on Stepper when mouse not moved.
Made animate() return the target for chaining when ANIMATE is set to false.
Changed loop() docs for method to not include loop function functionality
but rather refer to the loop() function in CODE module
BREAK - changed the Squiggle borderDashedCommand to dashedCommand as the Squiggle has no border
Squiggle is no longer implements a ZIM Shape in TypeScript as it has no border
Adjusted outline of Label to show above backing and backgroundColor
Adjusted wiggle to not use animate with a Ticker if object does not have a stage
Adjusted Slider so inside setting properly centers the slider in bounds
Added JS document.Window and document.Blob references before overwriting with ZIM Window and Blob
ZIM 6.9.0IMPROVEMENT Added TypeScript Typings for ZIM.
This led to some slight organizational changes but nothing serious
a few additions and a few parameter changes as outlined below.
The Typings are complete but relatively untested so there may be type typos to work through
as there were over 1000 lines of unique definitions and 2700 lines of full definitions
that were created with a custom parser.
The Typings ZIP can be found here https://zimjs.com/typescript/zim_ts.zip
Added ZIM Stage and StageGL class for TypeScript typings
ZIM Stage has type and read only width and height properties given to it by zim.Frame
If ZIM Frame is used, there should be no use for ZIM Stage.
Also gave the stages the loop() method so we can loop through children of the stage like we can a ZIM Container
BREAK The following were adjusted as we went through the typings:
added a fileID property to Bitmap as an alternative id to avoid conflict with CreateJS Bitmap id
removed second rect from MotionController - there already was a rect when we added another rect.
adjusted Stepper prev and next properties to containerPrev and containerNext so as not to conflict with prev and next methods
changed TextArea focus() to setFocus() and hasFocus property to focus - for better consistency with other focus properties
changed Pages setSwipe() to setSwipeArray() so as not to conflict with Container property setSwipe()
changed Stepper loop parameter and loop property to continuous (like Dial) so as not to conflict with Container property loop()
MORE METHODS CONVERTED TO CHAINABLE:
Blob and Squiggle setPoints(), changeControl()
Label showRollColor()
Button setBackings(), setIcons(), toggle(), clearWait(), stopWait()
CheckBox setChecked(), RadioButtons setSelected()
Pane hide(), Window resize(), Waiter hide()
Loader resize(), TextArea resize()
GENERAL UPDATES
Added a fileType parameter to loadAssets() so can override CreateJS PreloadJS parser
Note - it acts on all files loaded so might have to separate loading to get a specific type to load
For instance, laoding a .d.ts file was parsing as sound rather than text - so pass in fileType:"text" to override
but you would need to do this independently from any other assets unless the other assets were text too.
Added vertical parameter to tabs - set to true to make vertical tabs or vertical button menus
Tabs now as a backingColor parameter for in behind when corner is set
BREAK - changed the order of the smoothStep parameters to (num, min, max) to match order in constrain() and others
updated smoothStep example and Noise examples at https://zimjs.com/noise/
Moved ZIM Tile from the Display to the Controls module.
Tile takes an existing Display object and tiles it much like Layout, Scroller, Emitter, etc. operate on existing Display objects
Being a Container, Tile still receives all the ZIM Methods.
Also adjusted Tile's code when mirroring non-zero registration objects
Replaced the mousewheel event in zil() to wheel as mousewheel is depreciated
Also added wheel event to Window with scrollWheel true (default)
adjusted docs for Scroller to a paused property instead of the typo pause - note: there is a pause() method
Made Dictionary remove() return boolean success
Adjusted TextArea to not give error when Frame allowDefault is true (patch)
Adjusted tag mode canvasID to not have random number on end - thanks James Barrett
Added a allowDefault property to Frame to turn off and on zil for expanding and collapsing frames
see https://zimjs.com/expand/index.html - thanks Chris Spolton for the idea
ZIM removeFrom() - now removes from parent by default - makes sense ;-)
Changed ImageData() to createImageData() in Bitmap to support IE - thanks Chris Spolton
Adjusted spurtfizzed and spurtdecayed to lowercase instead of camelCase
Adjusted cloneProps to remake bounds - otherwise they were linked (patch)
ZIM 6.8.1IMPROVEMENT Added immediate property to Parallax class layer object. So you can specify a starting value without damping to the starting value
IMPROVEMENT Added frame.visibleLeft, frame.visibleRight, frame.visibleTop and frame.visibleBottom properties to help position relative to window in "outside" mode
All other modes will have 0,0,stageW,stageH for these properties
This data changes for outside mode and can be used in a frame resize event to keep items like navigation in the window view
Added note about setting mouseEnabled of animation target before running animation as animate sets and resets to original after a small delay
So if you set the mouseEnabled to false right after an animate() call then it will be reset
IMPROVEMENT Added crossOrigin parameter to frame.loadAssets() with default of "anonymous" - this lets files be loaded from Amazon S3 for instance
if the right CORS set up is there - HEAD was added for fonts - see the Bucket Permissions and then CORS configuration
<CORSConfiguration>
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>HEAD</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>
ZIM 6.8.0
Added ZIM VR class in the Controls to do side-by-side VR like in Google Cardboard.
This is quite an exciting system so have a good look over the docs and examples.
https://zimjs.com/code/vr
Added a depth property to Display objects to be used with the VR class (only at this time)
Added a dep() chainable method to set the depth property
Added device orientation event to Frame:
"deviceorientation" - fired as device orientation changes
eventObject.alpha holds rotation about the z axis (if device is flat) relative 360 orientation like a compass
eventObject.beta holds rotation about the x axis between -180 and 180 (tipped forward or backward)
eventObject.gamma holds rotation about the y axis between -90 and 90 (tipped left or right)
eg. frame.on("deviceorientation", function(e) {zog(e.alpha, e.beta, e.gamma)});
Added multiple parameter to Frame makeCircles() method to make ZIM Circles rather than a single Shape
Adjusted centerReg() to only add to default stage if container is not provided AND obj is not already added to a container (no parent)
IMPROVEMENT Adjusted setMask() to not set the mask when not added to the stage only when the mask is dynamic
IMPROVEMENT Since adjusting the setMask in 6.7.1 masks could only be set when added to the stage
This has now been fixed so that masks can be set when not yet added to the stage.
Fixed a typo bug introduced in 6.7.2 that broke RadioButtons IMPROVEMENT
Adjusted zob() so it does not give an error if a single undefined parameter is passed in
IMPROVEMENT And... there was a glitch in making it chainable - it is now chainable
IMPROVEMENT Re-adjusted the Loader.save() method to avoid a Google change of policy:
https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/GbVcuwg_QjM%5B1-25%5D
Now saves directly to a file rather than showing image in new window.
Thanks Frank Los for the heads up.
ZIM 6.7.5BREAK ZIM move() has been removed. Please use ZIM animate() instead with obj:{x:val, y:val}
ZIM move() was a convenience method that just took an x and y parameter and passed it through to animate().
Now with ZIM mov() it became too confusing to have both and move() was not really needed.
IMPROVEMENT Added an events parameter to animate (default false) set to true to dispatch "animation" events from the target
The "animation" event will be dispatched while the target is being animated. Thanks Ami Hanya for the recommendation.
Adjusted ZIM addTo(), center() and centerReg() to default to the adding to the first frame's stage if no parameters
So now circle.addTo(), circle.center() or circle.centerReg() will add to stage as long as there is one frame.
If there are two frames, it will get added to the first frame's stage so beware.
BREAK The centerReg() used to just center the registration and not add it to anything if there were no parameters.
Now, it centers and adds to the stage. To just center the reg, use centerReg(null, null, false);
It was quite rare to just center the reg and not add it to a container.
And it was important to keep the addTo(), center() and centerReg() defaults consistent.
Added container and add parameters to ZIM pos()
For now, the container property defaults to null.
We will consider defaulting to the first frame's stage (if not already added to a container) in the future.
The add parameter defaults to true and could be set to false to not add to the container.
Thanks Kate Xue for discussion.
ADDED TO LABEL: (thanks Daniel Loranz for the prompting)
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
backgroundCorner - (default 0) the round of corner
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 paddingHorizontal and paddingVertical)
padding parameters are ignored if there is no backgroundColor set (also ignored if a backing parameter is set)
paddingHorizontal - (default padding) places border out at top bottom
ALSO added background property for the label to access the ZIM Rectangle that is the background
ZIM 6.7.4
Adjusted slidestop to work in Swiper if there is no min and max.
Updated Dial, Swiper and MotionController enable property to use event variables when adding the events.
Updated the transform show and hide to use event variables when adding the events.
Eg. INITIAL SETTING:
var eventID = that.on("mousedown", eventFunction);
DISABLE:
that.off("mousedown", eventID);
ENABLE:
// was doing:
that.on("mousedown", eventID);
// should be:
eventID = that.on("mousedown", eventID);
This does not affect one enabled = false then one enabled = true.
But after that, the next enabled = false will not work.
If there is another enabled = true then there are two events, etc.
So this has IMPROVEMENT possibilities.
At some point, this concept was lost and now it has been found again.
ZIM 6.7.3
Updated gesture to fix bug when setting rotate or scale to false - thanks 王晓东 / Sheldon Wang for the find
Added a hasFocus property to TextArea to get or set focus with property - there is already a focus() method to set focus.
Made the default cursor for cur() be the "pointer" - set cur("default") to go back to normal cursor, etc.
ZIM 6.7.2
Updated Blob and Squiggle points and controls property.
Blob and Squiggle had their points parameter array set with Number positions
The points property was initially read only for an array of point objects - the control container, circle, and rectangles
This was fine until we introduced the TransformManager and added the Blob and Squiggle.
At this time, we needed to be able to recreate blobs and squiggles.
We made points settable with an array in the same format as the points parameter.
This left the points property with different formats for getting and setting - not ideal.
So this change has fixed the issue and makes point manipulation easier and more consistent.
BREAK - IMPROVEMENT the points property is now consistent in format for both getting and setting with x and y properties (and a control type):
points - [[controlX, controlY, circleX, circleY, rect1X, rect1Y, rect2X, rect2Y, controlType], [etc]]
A new property has been added to get access to the zim objects for each point:
pointObjects - [[control, circle, rect1, rect2, controlType], [etc.]]
Here, control is the container; circle, rect1 and rect2 are Circle and Rectangle objects
Note, the order is now the same for consistency
We were also using the term "set" to represent the controls of one point.
This starts getting confusing when we get and set values as we are using the word set again. (Thanks Kris Gardiner for the advice)
So we now use control to refer to the controls at the point - control is the container that holds the circle and the two squares
BREAK - the sets property has been changed to controls which provides access to the overall container that holds all the control containers
BREAK - controlsVisible is now the Boolean property to get or set the visibility of the controls - this was formerly controls.
Added an update parameter to Blob and Squiggle changeControl() - defaults to false to let multiple changes be batched with update() method
Fixed canvasID for tag mode - Thanks Alex for the report
Updated ZIM Label to be able to store a space and return text of a space.
Adjusted ZIM animate to use ZIM VEE values for sequences.
ZIM 6.7.1
Added chainable cache() method to Containers and Sprites - this overrides CreateJS cache to operate on bounds by default and return the object for chaining
so all Display Objects that extend a Container such as Circle, Rectangle, Triangle, Blob, Squiggle, Label, etc. all get the new cache()
eg. var circle = new Circle(100, frame.red, frame.dark, 5).cache().drag();
cache() will automatically cache the dimensions of the Circle, Rectangle, etc. and add the half borderWidth as well - NOTE that cache is chainable now!
You can still pass in dimensions and if you do, you can just pass the first two parameters as width and height to start x and y at 0.
Or you can pass all four parameters like CreateJS cache() - note, the fifth parameter is scale which can cache at a higher fidelity for later scaling
This is a convenience function for circle.cache(-circle.radius, -circle.radius, circle.radius*2, circle.radius*2);
Added a cur() chainable method for applying a cursor to a CSS cursor string value
eg. var circle = new Circle(100, frame.red, frame.dark, 5).cur("pointer");
This is a convenience function for circle.cursor = "pointer"
The function itself in ZIM is virtually nothing:
zim.cur = function(type) {
obj.cursor = type;
return obj;
}
But it allows us to chain and potentially avoid variable names - for example:
var circle = new Circle().center(stage);
circle.cursor = "pointer";
circle.on("click", function(){zgo("https://zimjs.com");});
// becomes 70% the code with:
new Circle().center(stage).cur("pointer").on("click", function(){zgo("https://zimjs.com");});
// remember that on() does not return the object for normal chaining but that is okay if no further reference to the object is needed
// albeit, risky if you change your mind...
Added a sha() chainable method for applying a createjs Shadow() that has defaults or params for color, shiftX, shiftY, blur or a single CreateJS Shadow
eg. var circle = new Circle(100, frame.red, frame.dark, 5).sha().drag();
This is a convenience function for : circle.shadow = new createjs.Shadow("rgba(0,0,0,.3)", 5, 5, 10); // etc.
Updated gesture() and transform() to work properly with masking as well as converted drag(), animate() and Blob() into new mask management
Added a dynamic parameter (default false) to setMask() that runs a Ticker to track and update mask movement.
The Blob and any ZIM Shape that has drag, animate, transform or gesture will set the dynamic property to true (unless it was explicitly set to false)
A Shape() that is used for a mask does not have to be dynamic as it is directly applied as the mask
If you are going to mask with a ZIM shape (Rectangle, Circle, Triangle) and then manually transform the mask for instance, mask.sca(2);
then either setMask with dynamic of true or setMask after the transformation
BREAK - IMPROVEMENT - made setMask() return object for chaining - now that dynamic is set no need really to return mask object instead use mask.zimMask
BREAK - Added count (total tiles) parameter to after cols and rows for ZIM Tile - in case you do not want all columns filled on last row.
Added factor parameter to Swiper (default 1) is going the same direction and -1 is going in opposite direction
Updated Swiper to recognize damp parameter
Added swipestop event to Swiper for when motion stops after swipeup
Adjusted added() method to clear longer interval if shorter interval detects stage
Adjusted Blob and Squiggle to not check for stage updates when not on stage due to removeFrom stage - was working fine for toggle but not if manually removed
Added slidestop event to drag() docs
ZIM 6.7.0
Added devicemotion event to Frame - eg. frame.on("devicemotion", function(e) {zog(e.acceleration.x, e.acceleration.y, e.acceleration.z)});
Added Portal(obj, lands) to controls module.
Portal lets you travel between lands (screens, etc.) by rolling over an object - the portal.
It handles masking the land through the portal and the land management - dispatches enter and exit events
Here is an example https://zimjs.com/code/portal
BREAK - changed "relative" parameters and properties in Dial to "continuous" for better clarity - and continuousMin and continuousMax
ZIM 6.6.4IMPROVEMENT Adjusted Dial and Slider keypress to be independent of other keydown commands (like MotionController)
Added keyArrowsH and keyArrowsV to Dial and Slider that default to true - can now turn off left/right or up/down control
Fixed arrow control on limit=false to allow multiple revolutions
Fixed arrows on relative setting of Dial
Fixed ticks for slider with max that is smaller than min
ZIM 6.6.3
Adjusted docs to say Dial has default step of 1 (not 0 as docs had said).
Added multitouch to Dial - Slider and drag() already have multitouch.
Added relative, relativeMin and relativeMax parameters to Dial
Added relativeMin, relativeMax get set properties to Dial and made min and max writeable for when relative is true
This uses max-min as amount per revolution and continues to add or subtract accordingly
https://zimjs.com/code/etch/ for Etch A Sketch example
ZIM 6.6.2IMPROVEMENT Added raw() method to zim.Ticker() that directly adds a function to a requestAnimationFrame
Also added a removeRaw() method to remove a raw function with an id made by var id = Ticker.raw(function)
This gives ultimate speed without calling the library system of Ticker.add()
Ticker.add() should still be used in general for multiple ticker calls or calls along with zim animate, etc.
But use raw() for dynamic art for instance where you have one butter smooth ticker.
You need to call stage.update() in the raw() function
We could have called stage.update() but it would run the risk of duplicating the update if the coder also put it in
Updated Scroller to add second object to the same layer as the original object
so no need to add Scroller objects to containers IMPROVEMENT
Added flip and flipVertical parameters to Dynamo to flip the Sprite if speed is negative and reversible is false.
This was done by the coder previously - so it might BREAK a project where it was already done... BREAK
Also changed reversable parameter to reversible for proper spelling ;-) BREAK
Added convertColor() to DISTILL
Adjusted DISTILL to properly access ZIM namespace without ZNS set to true
Adjusted Frame to create a random canvasID if the frame is not the default frame and no canvasID is provided
Added canvasID property to Frame to provide String of the canvasID - could also use frame.canvas.id
Fixed glitch in makeID() so default is indeed mixed
ZIM 6.6.1
Added isJSON function to test for JSON string.
IMPROVEMENT Adjusted ZIM gesture to rotate and scale around pinch point.
Added regControl parameter (default false) to gesture go back to rotating and scaling around registration point.
Fixed chaining of stopAnimate and pauseAnimate.
ZIM 6.6.0
DOCS:
Removed namespace from documentation titles and doc examples
Remember that the namespace can still be used. It can also be required by setting zns=true before importing ZIM
Tidied up the function listings to not include title = function(parameters) but rather title(parameters)
Added a text version of the docs for easy import into other viewing systems like PDF (thanks Vishwas Gagrani)
SQUIGGLE:
Added ZIM Squiggle - like a blob but only a line
Squiggle has pretty well all the blob features including TransformManager support
Squiggle does not have borderColor, borderWidth nor radius but rather has color, thickness and length
It also defaults to "mirror" as the type of control rather than "straight" which the Blob defaults to
BUTTON:
IMPROVEMENT - added wait, waitTime, waitColor, rollWaitColor, waitTextColor, rollWaitTextColor, waitModal, waitEnabled parameters to the end of the Button parameters.
Added clearWait() and removeWait() methods, a waiting property and a waited event which is dispatched if the waitTime is reached.
For wait backings and icons use the setBackings() and setIcons() methods along with the waited event to handle changes.
BREAK - inserted a borderRollColor parameter before borderWidth which is before corner.
Any existing buttons with traditional parameters up to corner will broken - an extra null will have to be inserted before borderWidth.
Also added a borderRollColor property to the zim Button.
Since the parameter order has changed, moved dashed to after flatBottom parameter - to match Rectangle.
Added wait parameters to Tabs and Pad as well and added gradient and gloss to Pad
PANE:
Added the following parameters to ZIM Pane()
bar - (default null - no bar) a String or ZIM Label title for the pane that will be presented on a bar across the top
barColor - (default "rgba(0,0,0,.2)") the background color of the bar if a bar is requested
barHeight - (default fit label) the height of the bar if a bar is requested
close - (default false) - a close X for the top right corner that closes the pane when pressed
closeColor - (default #555) - the color of the close X if close is requested
Also added bar, barColor, barBacking, and close properties to access these objects
Fixed TextArea and Loader inside Pane add/removal problem - was using Dictionary objects list rather than values list
Also for multiple TextAreas was not looping through container backwards when removing so was missing an item
BREAK changed the backingAlpha to backdropColor to offer more flexibility for the backdrop
use "rgba(0,0,0,.5)" etc. for dark and "rgba(256,256,256,.5)" for light - and of course colors as well.
You can use a solid color and then drop the alpha with pane.backdrop.alpha = .2 - not alp() as backing is CreateJS shape.
HITTESTCIRCLES:
IMPROVEMENT - added ZIM hitTestCircles() method to all display objects.
This tests if two circle shapes are hitting using an equation based on cirles made from bounds
If the bounds are not square, the circles are averaged - the radius is half the average of the lengths of its sides
(This is different than hitTestCircle() where the points around the "circle" actually stretch to an oval with the bounds)
obj.hitTestCircles(obj2) is a calculation based on intersecting circles so is faster than shape hitTests
It will be as fast as hitTestBounds and hitTestGrid.
hitTestCircles second parameter is a margin number value which can be positive or negative to tweak the hitTest
A margin parameter has been added to hitTestBounds as well before the boundsShape
OTHER:
IMPROVEMENT - added zim.previewAudioSprite() to the META module to create tabs with each sound in an AudioSprite for easy preview
Adjusted parseAudioSprite() to clarify that it returns a CreateJS AudioSprite object
BREAK - adjusted Blob to have a setData() method rather than a set() method so the general set() method is not obscured
BREAK - adjusted transform() transformObject to have a setData() method rather than a set() method to be consistent with Blob and Squiggle
NOTE: transform has a transformObject which is a custom object - not a Display object so set() is fine there but wanted to be consistent
BREAK - adjusted Blob and the transformObject to have recordData() methods rather than record() methods
These now match - recordData(), setData(), recordPoints(), setPoints() - sorry for the adjust but should be settled now.
Also adjusted the Docs on Blobs to update the single click edit.
Also adjusted the Docs on the Blob's points property to indicate a different format for setting and getting points.
Adjusted TextArea and Loader to use zim.added() to test for the stage and then on("added") to test for re-adding after
Fixed a glitch in Stepper so the downForward parameter works as expected
Added read only num property to Blob (to match Squiggle's num property) for number of points
Added error support for font loading so load completes if font is missing - takes the timeout though of 8 seconds
which is not ideal but could not seem to capture immediate bad URL error with error or fileerror events
Fixed Stepper to set correct selectedIndex when stepping through number list that does not start at 0 and make sure enabled has this number when set to true
Gave Pane and Indicator enabled properties like most other components
IMPROVEMENT - adjusted TextArea to have a background-color of rgba(0,0,0,.01) so cursor and selection highlight shows up (was at transparent - weird that would affect selection)
IMPROVEMENT - adjusted zim.drag() so the last drag added is the only drag on the object
IMPROVEMENT - added a dynamically created audio tag for the first audio loaded to jumpstart audio on some Apple devices
Thanks Bart Libert for reporting and testing the issue.
ZIM 6.5.0
AUDIOSPRITES:
IMPROVEMENT Added support for AudioSprites with frame.loadAssets() and frame.asset()
Added outputAudioSprite parameter to loadAssets() to show converted AudioSprite data when using ZIM AudioSprite format
Added parseAudioSprite() function to META section for parsing AudioSprite data from https://github.com/tonistiigi/audiosprite
TRANSFORM, BLOB and TRANSFORM MANAGER:
Added a transformType property to the transformed event object for transform()
This has values of "scale", "move", "rotate", "stretchX", "stretchY", "reg" "reset"
Added objects and persistID to the start of ZIM TransformManager() parameters
BREAK The unique parameter has been removed now that transform works with single click
Added currentObject and persistData properties to TransformManager
Added EVENTS to TransformManager:
1. 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: "size", "move", "rotate", "stretch", "reg" "reset"
FOR BLOB: "move", "bezierPoint", "bezierHandle", "bezierSwitch"
2. transformshow and transformhide events for when click to hide or show controls
these have a transformObject property to indicate what was shown or hidden
Added a dispose(removePersist, removeControls) method to TransformManager
Added a dispose() to the transformControls for any transformed object to remove transform controls and events
Made Blob and transform / TransformManager only trigger change or transform events when a property value changes
Previously, a change would happen on mousedown and pressup but now there has to be a different x or y
Same with all handles, scaling, rotating, reg, etc.
SHAPE BITMAP and GRADIENT FILLS:
IMPROVEMENT - added colorCommand and borderColorCommand properties to ZIM shapes (Circle, Rectangle, Triangle, Blob)
These allow you to set Bitmap, linearGradient and radialGradient fills on the shapes (through CreateJS Graphic objects)
Thanks Samual Jacquinet for the prompting!
OTHER UPDATES:
Fixed Waiter.dispose() method when short wait times - thanks Ami Hanya
zim.hitTestPoint, hitTestReg, hitTestRect, hitTestCircle got a new last parameter - boundsCheck (default true)
Set this to false to not do a bound intersection check first
This would be slower but if the bounds are wrong (such as with blobs) the parameter should be set to true
to make sure that only the shape is used and not filtered by the faster bounds test.
Adjusted ZIM Blob to fix bounds issue due to above.
BREAK - no longer clone the cursor property when cloning an object - that can lead to unexpected results - but let us know if you disagree
ZIM 6.4.1IMPROVEMENT fixed memory leak in transform() that was leaving mousemove events due to using wrong variable name
IMPROVEMENTBREAK removed dblclick parameter and replaced with toggle parameter for single click editing
This is much more intuitive and has been set to a default of true.
So click on shows controls and click off hides controls.
IMPROVEMENTBREAK changed dblclick parameter for zim.Blob() to toggle to match transform()
Also changed Blob to single click to show and hide controls.
IMPROVEMENTBREAK made blobs drag when controls are active to match transform() and most editing tools
and changed dblclickDrag parameter to move to match transform() and default move to true (set to false to turn off dragging)
IMPROVEMENTBREAK added a handleSize parameter to Blob just before the toggle parameter that sets the handle size like with transform
This defaults to 20 on mobile and 10 on not mobile ;-)
BREAK changed the record() method of Blob to recordPoints() which matches format when creating a Blob
IMPROVEMENT and then added new record() and set() methods that work together for updating already created Blobs
This was so that Blob objects can be added to the zim.TransformManager just objects with transforms
You will need to make a basic Blob with the correct number of points.
Also added a setPoints() method that sets the points of an existing Blob that match the recordPoints
Strategy - if you want to create Blobs from data use the recordPoints and pass that data into the points parameter.
If you want to adjust an existing Blob then use the setPoints() method
If you want to record more than just the point data - for instance, x, y, color, etc. then use record() and set()
Or let the TransformManager handle it - it uses the new record() and set() similar to the transformControls record() and set() methods.
Also adjusted zim.setMask() to help handle dragging of a Blob object as a mask and added an example to the setMask docs
as well as an update to the snake at https://zimjs.com/code/zoo.html
Updated the other animals too including adding clone() to lion assets for multiple lions, putting snake into a function for multiple snakes
IMPROVEMENT - made zim.TransformManager also handle Blob objects as mentioned above - including the saving of, resizing and handling show and hide
Added getQueryString() method to return the HTML query string ?var=val&var2=val2 as an object with matching properties
Thanks Ami Hanya for the suggestion.
IMPROVEMENT - added loadTimeout parameter to frame.loadAssets() with a default of 8000ms - this is how long to wait for assets
Thanks Jonghyun Kim for suggestion and to CreateJS for already having that in the LoadQueue
IMPROVEMENT - adjusted frame.asset() to have a default "Broken Image" object (ZIM Circles) when asset is not available.
This can be adjusted with the new loadFailObj parameter for zim.Frame() - the object will have a type property of "EmptyAsset"
Also made loadAssets() accept a ZIM DUO configuration object.
Made loadAssets() work with files without extensions.
ZIM 6.4.0IMPROVEMENT Added font support to zim.loadAssets() - for urls to fonts and also Google fonts
Pass in font in format {font:name, src:url, type:string, weight:string, style:string}
Any number of fonts can be passed in along with images, sound, etc. to loadAssets()
The name is what you give it and you would use that name in a zim.Label({font:"name"})
If you use http at the start of the font src it ignores the path parameter for that font
This allows you to use your own fonts in a directory but also add google fonts in the same loadAssets.
This piggy backs on CreateJS FontLoader() but consolidates the format and combines with other assets to load
Added a backdropClose parameter to zim.Pane() - thanks Ami Hanya for the prompting
BREAK moved the container parameter to the end of zim.Pane as most panes are added to the stage.
In the past, ZIM did not know the stage but now it has a ZimDefaultFrame with its stage
ZIM 6.3.3
UPDATED all ZIM Bits to version 6.3.3 using chaining, no namespace and loop throughout.
Would recommend, this way of coding - see https://zimjs.com/code/tips.html
Note: The ZIM Capture video series has not been updated and probably will not be.
BREAK the scale() method has been depreciated and removed - use sca() which works the same way
The new CreateJS has a scale property so ball.scale = 3; will set both scaleX and scaleY.
It appears that scale will read the scaleX. So, no more scale() method in ZIM.
Instead you can use sca() for chaining and then scale, scaleX and scaleY for properties.
BREAK - changed parameter order for TextArea and Loader - sorry - moved frame parameter to end
We now have zimDefaultFrame which will do in most cases and if we are in a second frame then pass that in to the frame paremeter
Added focus() property to TextArea (thanks Armin for the prompting) before was textArea.tag.focus() piggy-backing on JS focus of HTML tag
Adjusted OPTIMIZE, ANIMATE and DISTILL constants to work without the zim namespace with zns false - accidentally made them work when zns was true (so swapped)
IMPROVEMENT Fixed a glitch in run() method of Sprite() to allow for replay of non-label Sprites
since the change to normalized playback supporting non-sequential frames in SpriteSheets animations
Adjusted zim.place() to return object for chaining
IMPROVEMENT Adjusted zim.Rectangle to draw a normal rectangle if the corner is 0 was drawing a rounded rectangle with corner 0
then realized the border was not mitred as expected - it had little rounded corners instead of 90 degrees.
Updated zim.Accessibility() to put a z-index back to -5 that was accidentally left at 5 for testing. Thanks Frank for the find.
ZIM 6.3.2
Added split property to Parallax object to center the input value (with mouseX this defaults to true - the others false)
Thanks Raman for the prompting! IMPROVEMENTBREAK Adjusted Parallax parameter order to layers, damp, auto, stage and give the object the default frame's stage
With the scrollX, scrollY chrome fix, this is a good time to adjust the stage parameter - it is the last of the ZIM classes left requiring a stage since the default frame addition.
This was primarily due to parallax being its own module without Frame - but now ZIM has Distill, so it is not that big a deal to loose parity with the old stand-alone parallax module.
Fixed mouseY to use stageH as default inMax rather than stageW (bug)
Adjusted scrollX and scrollY to test for document.documentElement && document.documentElement["scroll"+side]) || document.body["scroll"+side]
Before was assuming Safari only used documentElement and Chrome, Edge, Firefox worked fine - then Chrome seems to have changed its mind...
The Chrome change will BREAK any previous Parallax scrolls with scrollbar (not mouse) so if you made one, upgrade to this ZIM and it will not be broken.
IMPROVEMENT And newer ZIM has a Frame parameter called allowDefault - set that to true to let mobile scroll on canvas.
Any old Sprite work with Parallax, will probably need to set {spriteSheet:spriteSheet} as that parameter position changed a while back.
ZIM 6.3.1
Added cache parameter to transform() and automatically cache the handles and cursors unless set to false
Added a outerColor property to ZIM Frame() to set the color of the HTML body (background-color style)
Added outerColor parameter to the end of the ZIM Frame() class
Adjusted tweek in Sprite.run() to handle non-label input - that got lost with a previous change. IMPROVEMENT
Added startType parameter to wiggle() defaults to both but can set to positive to start positive or negative to start negative
Added onTop parameter to Blob so dragging it when controls gone defaults to brining the shape on top but can set to false to avoid this
Added snapToPixel parameter to Tile that defaults to true - this helps moved Tiles not have tiny gap
And added Tile parameters to documentation ;-)
Fixed Blob() and transform() to work with dblclick on mobile to toggle edit mode. IMPROVEMENT
ZIM 6.3.0
Created a transform() method for display objects that makes resize and rotate with little square handles, etc.
Added a TransformManager() class to handle multiple transforms and save / load data.
This is quite spectacular and is heading towards visual editors - perhaps even for ZIM HEP (7).
Thanks Ami Hanya for the idea and the prompting - hope this helps!
Made centerReg and outline return obj even if bounds not set (logs a warning)
Added stage.preventSelection = false; if frame's allowDefault parameter is true IMPROVEMENT
This fully allows mobile swiping, etc. to scroll a page when on the canvas (thanks Jonghyun)
The Manager lost its resizing when moved to support the new ResizeManager - that is back.
Fixed remove for one object in Manager
Switched zimify() to require third parameter true for adding scale - will be depreciating scale() due to conflict with new CreateJS 1.1
Start using sca() instead.
ZIM 6.2.2
Added frame.red to colors (thanks Alexa!)
Fixed glitch in Sprite.run() with wait, waitedCall, waitedParams.
These were just being passed through to zim.animate() but were left all as wait property names - oopsy.
Added pauseAnimate() and stopAnimate() methods (and functions) to basically replace pauseZimAnimate and stopZimAnimate
This depreciates the last two - which were titled that early on as dynamic methods before ZIM 4TH methods
All dynamic methods and properties had ZIM in them to avoid conflict
but now that methods are common, there is no need for ZIM in the method name ;-).
Fixed scale() which was turned off for glitch with setMask
Traced it to a possible conflict with canvas scale() method only with new CreateJS 1.0 and if other interactivity! - weird.
So scale() is back - all is well.
ZIM 6.2.1
Updated defaults for mic with SoundWave for baseline (0) and magnify (1).
Also cut the value off at 0 as it was going negative due to changes in ZIM 6.1.1
Glitch in zimify() when applying scale() - might be conflicting with CreateJS Shape and Canvas scale() method?
So removed scale() from zimify() - use sca() instead.
Adjusted ZIM Pages to set pages to original alpha rather than 1 after a transition.
ZIM 6.2.0
Updated ZIM to work with createjs.min.js the new CreateJS 1.0.0. IMPROVEMENT
There were a few minor depreciations to take care of:
getStage() became stage, setPaused() became pause, getNumChildren() became numChildren
These were like that to support versions older than 2015 but there is no real use in that now.
Note the gpu parameter of Frame that defaults to false.
Set this to true to use StageGL which is the major part of the release.
See bubbling video when we were preparing for this: https://www.youtube.com/watch?v=fUjyUpYdsM8
Added zim.Noise() class that makes OpenSimplex noise for art, terrains, etc.
https://zimjs.com/code/noise/
This is part of the Code module along with Damp and Proportion, etc.
Added a zim.Tile() class to let you tile an object (or objects with a ZIM VEE value).
You can choose set col and row parameters, add optional spacing and mirror as you tile.
This extends a zim.Container() and is part of the Display module.
Added a zim.smoothStep(min, max, input) function to the code module.
This 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 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.
IMPROVEMENT added drawImageData() method and imageData property to zim.Bitmap().
This allows you to draw pixel data into a Bitmap as you can with raw Canvas.
There is also reference to the proxyCanvas and the proxyContext for the canvas the Bitmap uses as source.
BREAK - there are new width and height parameters for Bitmap that come before the id parameter (breaks order).
ZIM 6.1.1IMPROVEMENT Made Sprite.run() work with non-sequential frames and nested labels and next calls
(see CreateJS SpriteSheet docs for format of animation data - which can be specified in a JSON file).
The Dynamo was already working with these and now the run() method does as well.
Adjusted cloned sprites to have different default ids - as pauseRun() was pausing all cloned sprites ;-)
Made pauseRun and stopRun chainable.
Added a flowthrough override for zik() by passing value as {noZik:value}
which allows arrays and functions to be passed through as a value rather than something for zik to process.
Updated SoundWave with the following IMPROVEMENTS to the parameters:
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)
ZIM 6.1.0IMPROVEMENT Made zim.Accessibility work on iOS and mostly on Android - Stepper, Slider, Dial and ColorPicker still need work
BREAK - changed applicationName to appName, and highlight to alwaysHighlight and the parameters following are prefixed with AH
This is a solid week of programming for iOS Voice Over - visit on Slack for learnings and advice
Still untested on stand-alone screen readers but good on Windows Narrator, and the mobile readers.
Added currentValueEvent properties to Slider, Dial to get or set value and dispatch event if set changes value
normally, if we are setting a value with code, we can do whatever we would do in the event at that time
but with accessibility, on mobile, the options are being set by HTML and we want to trigger the event
Added a text property to the RadioButton button containers
Added a zim.ResizeManager() that extends zim.Manager and handles resizing Accessibility, Layout, Pages, Grid, Guide, TextArea and Loader
This is just a small class - a few lines of code.
Note - the Accesibility resize() will call any loader or text areas inside it...
BREAK Added decimals parameter to Accessibility before frame parameter
BREAK for the following:
Adjusted Stepper type parameter to stepperType parameter to avoid conflict with new type property for all Display Objects
Adjusted CheckBox type parameter to indicatorType parameter to avoid conflict with new type property for all Display Objects
Adjusted Dial type parameter to indicatorType parameter to avoid conflict with new type property for all Display Objects
Adjusted Indicator type parameter to indicatorType parameter to avoid conflict with new type property for all Display Objects
BREAK - changed buttons property of RadioButtons to an array rather than container - to match buttons array in Tabs and Pad
Made points property of Blob read and write instead of just read
Added functionality for selectedIndex and stepperArray of Stepper to work with "number" stepperType
Changed currentIndex to selectedIndex for Stepper - BREAKS - matches property name with other components (sorry)
Updated docs for TextArea to include size parameter which was there all along...
Adjusted Dial docs to read default 1 for step.
ZIM SIX 6
Made ZIM Accessible - IMPROVEMENT
Added zim.Accessibility() class to handle tabbing to any ZIM Display Object and send messages to Screen Readers
https://zimjs.com/code/screenreader has a detailed example
You basically pass zim.Accessibility() an array of objects (with optional titles)
These will be tabbed to if they are on the stage and the title or a default title sent to the Screen Reader
There is also a talk() method to be able to send a message to the Screen Reader at any time
Gave all ZIM Display objects a type property that matches the class name as a String (case sensitive)
BREAK - removed former (marked as temporary) work with tab order in Tabs, Stepper, and Frame - this is all replaced and updated in zim.Accessibility()
IMPROVEMENT Adjusted Window to handle removing of Window while being rolled over (thanks Frank Los for the bug report)
Added SLACK support discussions https://zimjs.slack.com
Removed clone override from Swipe, Frame, and a few others that did not need it - just an oversight
indicator.currentIndex is now constrained from -1 to num-1 where num is the number of lights
Added readerDecimals parameter to Slider and Dial with default 2 decimal places the screen reader will read
Added keyArrows parameter to Slider, Dial and ColorPicker for arrow key usage if in focus
Added keyArrowsStep parameters to Slider, Dial so Screen Reader does not read all the decimals
Adjusted bar of slider for positioning when pressed - was half a step off due to button registration change - IMPROVEMENT
Also expanded hitArea on bar - IMPROVEMENT
Added spellCheck parameter to TextArea - default true but can set to false
Added an allowDefault parameter to zim.Frame that passes value through to CreateJS Touch.enable() method's third parameter
Note: the third parameter does not seem to be working so an issue has been added to CreateJS GitHub - thanks Jonghyun Kim for working on this with us
https://github.com/CreateJS/EaselJS/issues/898
This will also prevent Frame from using zil to keep the canvas still
You can set allowDefault to false and then manually remove the zil events for specific key or scrollwheel functionality
Although the ZIM namespace was removed in 5.5.0, it will be handy to remember that from version 6 on, the ZIM namespace is not required
ZIM 5.5.0
Added zimplify() global function. Note - this is different than zimify()
zimplify() removes the requirement to use the zim namespace IMPROVEMENT
Made full, fit and outside Frame template automatically call zimplify()
You can control this with the new namespace parameter of zim.Frame()
So for instance once you make a new zim.Frame() inside, you no longer need the zim namespace
var circle = new Circle(rand(100,300), frame.green).center(stage); // will work
Note: there is no zim namespace before Circle - used to be new zim.Circle()
Note: do not call variables the same as zim functions:
var rand = rand(100); // as rand() will no longer work after this!
The zim namespace still works.
zimplify(exclude) has an exclude parameter that lets you pass in a string command or an array of string commands
and then these will require the zim namespace
zim.wiggle() now supports ZIM DUO configuration object parameter (Thanks Frank Los for prompting)
ZIM 5.4.0
Added zim.gesture() with pan, pinch and rotate multitouch gestures for position, scale and rotation
zim.gesture() features a bounding rect, min and max scales, rotational snapping and pan sliding.
IMPROVEMENT This is a new method under the Methods module for all ZIM Display objects
Also added associated zim.noGesture() and zim.gestureRect() Methods
for removing some or all of the gestures (and paradoxically, adding them back)
and dynamically setting the bounding rectangle for the gestures.
Works with the touch parameter set to true for zim.Frame() which is the default setting.
ZIM 5.3.2
Adjusted zim.decimals() so that addZeros is the number of 0 spaces after the decimal
addZeros is no longer a Boolean BREAKS
and a new parameter, addZerosBefore, is the number of 0 spaces before the decimal
Also added a time parameter that just turns the decimal dot into a colon to handle minutes and seconds
Added a total property to the ZIM intervalObject for the zim.interval() that is -1 for infinite
Added a "clear" transition type to Pages that fades out the old page then fades in the new page each at half the transition time
Added transitioning property to pages so can test if pages are in transition (as they are cached)
Adjusted docs - the radius of a zim.Circle is its real radius before scaling and setting the radius redraws the shape
as opposed to width and height which are not necessarily the bounds but can be a scaled value
Fixed multitouch with ZIM - was using: if (touch) createjs.Touch.enable(stage, true);
And yet unfortunately, the second parameter is true for singleTouch! Ouch.
IMPROVEMENT So now using: createjs.Touch.enable(stage);
Adjusted zim.drag() so that drag Ticker is not removed if any touches are still active
ZIM 5.3.1
Added simple array of pages to Pages class if you do not need swipe data for each page
Also, now use the default stage as the default for the holder of Pages and moved the holder parameter to the end
BREAKS - this breaks the parameter order of the Pages class
Since introducing the default stage, there are a few of these breaks.
Swapped zim.Ticker.has(function, stage) as stage will default to default stage BREAKS parameter order
BREAKS - moved the index to the second parameter of center and centerReg and the add to the last parameter
as more often than not, we are using centerReg and center to add the object to the stage and
the second most popular parameter is the level (index). Sorry, this breaks the parameter order for older apps
Added an optional index value for Pages go() so can use page object or an index matching the pages array order
ENHANCEMENT - added a check to zim.Ticker.add() so that it will not add the same function more than once
added blendMode property to all zim Display objects that is the same as compositeOperation
Fixed a glitch in Dial when min is greater than max - the ticks were not showing (used Math.abs() for tickNumber)
Adjusted ColorPicker to default to drag of false if there is no buttonBar.
ENHANCEMENT - fixed intermittent zim.interval() run-on after clear()
ENHANCEMENT - zim.Emitter() had a faulty assignment to "this" in the added function affecting dispose() on multiple emitters
Thanks Frank Los for reporting the bug
ZIM 5.3.0
Added ZIM SoundWave() to get frequencies from sounds or mic
Also adjusted the order of ZIM and the Documentation to the following:
WRAP - CODE - DISPLAY - METHODS - CONTROLS - FRAME - META
Display (formerly Build) has the basic display elements, shapes and components
Methods (formerly Create) have the methods that all display objects have like drag(), center(), etc.
Controls (formerly Pages) have objects for layout, swiping, pages, motion, parallax, etc.
Removed zim.addDisplayMembers() and fully replaced it with zimify() BREAK
ZIM 5.2.2
Adjusted interval doc description to include ZIM VEE and zik.
Added color parameter to Pane in the docs.
Adjusted glitch in Tabs when assigning widths to tabs without widths.
Added ZIM VEE and zik to control length of Blob so random blobs can be made
Added rotation, scaleX and scaleY read only properties to MotionController
and adjusted so no object is needed - now we can use MotionController as pure data
Adjusted zim.wiggle() to work on non display objects.
Added time property in the Docs for the zim.interval obj return value
ZIM 5.2.1
Adjusted zim.Emitter to properly set pool number when ZIM VEE values passed for num and interval
Now uses min of interval and max of num options - would recommend not pooling if using function values for either of these
Also fixed removing of particles if pooling is turned off
Adjusted the pause method of the zim.timeout return object - so unpausing plays the remaining time properly
Made zim.animate and zim.move apply zik before splitting scale into scaleX and scaleY so aspect ratio is kept
ZIM 5.2.0IMPROVEMENT Added StageGL support to ZIM Frame - as a gpu parameter which defaults to false - so set to true for WebGL
CreateJS provides an isWebGL property of the stage you can use to get whether WebGL is being used
Added gpuObject parameter to specify extra stageGL parameters
Added refresh to resize for StageGL
IMPROVEMENT Added nextFrame parameter to frame to pass interaction to next stage (for regular Stage and StageGL)
Added zim.convertColor() to convert from string to hex or hex to string (StageGL color accepts hex only)
Added spriteSheet parameter to zim.Sprite to accept a CreateJS spriteSheet
Prior to this the Sprite would make a SpriteSheet from JSON or image and parameters input
This was added because of the cool CreateJS SpriteSheetBuilder to dynamically create SpriteSheets from Shapes, etc. at run time
Fixed the clone property of Sprite
Adjusted Grid and Guide to auto add to obj parameter or the default stage - and fixed interval bug since zim.added() was used (thanks malus on GitHub)
Fixed bug in zim.Frame where two full mode canvases were turning off Ticker stage updates on the first canvas when resized
Fixed bug in zim.Frame was referencing keyword frame in key events when it should have been a reference to the object (that)
ZIM 5.1.0
Added a zim.Blob class to make editable blobs - with bezier curves
This is added after zim.Triangle and is very similar to the other zim shapes but a blob ;-)
Blob has a number of types of bezier curves that can be accessed by double clicking the points
Edits to the Blob can be recorded with the record() method and then recreated by passing the recording into points parameter
Created a global variable zimDefaultFrame for the first frame made
zim.Ticker.add(function, stage) and other Ticker functions no longer require stage
The zimDefaultFrame's stage will be used if left out of add()
This is fine for the majority of times when there is only one stage
BUT - if more frames are used then the associated stage needs to be passed to update that stage
IMPROVEMENT Added a failed event to frame for when canvas is not supported (thanks Frank Los for the prompting)
Added a type parameter to wiggle() so it can wiggle negative, positive or both (default)
Adjusted zim.interval to unpause immediately as an option
Made outline() mouseEnabled = false;
Made ticks a zim.Shape rather than a createJS.shape so it has ZIM 4TH methods
IMPROVEMENT Adjusted zim Emitter pause for the freeze - for some reason not reading stored that.zimEmitter... used local variable instead
Added frame.altKey, frame.ctrlKey, frame.metaKey, frame.shiftKey properties to specify key states
IMPROVEMENT Made Pane close and drag automatically resize TextArea and Loader objects (due to HTML overlay)
IMPROVEMENT Adjusted Loader to save as png by default or can specify type parameter of "jpeg" for jpeg (png more widely accepted)
ZIM VEE (5)
ZIM VEE AND ZIK
Introduced ZIM VEE (Roman Numeral 5) values that let you submit options for parameters to be chosen later (uses the new zik() function)
Added zik() global function to pick randomly from an Array or a function result or a random number based on
an object with min, max, integer, negative properties like the params for zim.rand()
ZIM EMITTER AND WIGGLE
Added zim.Emitter() to emit particles for fireworks, smoke, flames, falling objects, hair, grass, etc.
This is a large class with 30 parameters some of which accept ZIM VEE values
Examples can be found here: https://zimjs.com/code/particles
Added zim.wiggle() to randomly go back and forth between the value passed to it - uses zik() and animate()
ZIM ANIMATE AND MOVE
Adjusted zim.move and zim.animate to accept ZIM VEE values for many of the parameters
Including obj, set and props properties and overall parameters except for params, loopParams, waitParams, sequenceParams
These will then be filtered through zik() to pick a random values
This allows for a delay before a random value is picked - handy for passing info as a parameter
Used by zim.Emitter() for instance to pass random properties and animate settings
Added feature to zim.animate and zim.move to animate relative to current property value
To do this the parameter value in the animation object is put in a string - can include negative sign
Also works with the set parameter to set relative starting values
Fixed rewind with set parameter active - hopefully that works - gets complicated
zim.move() and zim.animate() - added waitedCall, loopWaitCall and rewindWaitCall to call functions after waiting and before loopWait and rewindWait
zim.move() and zim.animate() - added waitedParams, loopWaitParams and rewindWaitParams to pass params to above (or callbacks receive the target)
This BREAK parameter order - sorry! Hopefully by this time you are using ZIM DUO configuration object technique
Adjusted rewindCall and loopCall to happen after rewindWait and loopWait - so this may BREAK as it was before the waits!
Fixed a glitch in stopZimAnimate(ids) when removing animation with ids with single animations across multiple targets - now works
GENERAL ADJUSTMENTS
Fixed zim.Label used Number.isNaN which is not supported on mobile so changed to older double test. IMPROVEMENT
Fixed a bug in zim.copy - an undeclared var was flattening nested objects
Adjusted zim.copy to ignore objects that are not an object literal - now will copy references to zim objects rather than breaking
Adjusted zim.Triangle() adjust parameter to move shape rather than registration - could BREAK location of triangles
as usually you are adjusting the centerReg and that just was negating the adjustment
Added rotation to cloning of props - this was an oversight BREAK - but in a good way
adjusted clone for shapes to clone latest color and border properties
(and width and height for Rectangle and radius for Circle) possible BREAK
Added read only framerate property to docs for zim.Ticker - use setFPS() to set framerate
Added a has(stage, function) static method to zim.Ticker to check if the Ticker has that function for that stage
Fixed a glitch in zim.interval where it was occasionally not pausing due to race condition
Adjusted obj.clear to before the next() function in zim.timeout to prevent errors on occasion
Added an zim.added() function and ZIM 4TH method to check if object has been 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 with a setInterval every 100ms to see if the object has a stage property
Once it does then it calls the callback and removes the interval
Adjust scaleTo to take into account current scale - this could BREAK code if you had accommodated this already
Adjusted zim.rand() with respect to a=0, b=0 explicit parameters
was returning Math.random() now returns 0. Only no parameters return Math.random() - might BREAK
ZIM 4.9.2
Added zim.angle(x1, y1, x2, y2) function to find angle between two points relative to positive x axis
part of the code module after the zim.dist() function - these are functions not methods.
Added zim.placeReg(obj, id) function and zim 4th method to place locate a registration point relative to the obj
this then gives an output in the console as you drag and drop a little cross indicator (like place())
Adjusted zim.place() to output x and y and pos() data
IMPROVEMENT Adjusted the zim.Label to be up one pixel in the y on a button
IMPROVEMENT Fixed a bug in the Window where multiple windows would scroll together - missed a var declaration - oops (thanks Frank Los)
IMPROVEMENT Adjusted zim.Pages to remove its children at the start - except for the currentPage (thanks Laura Warr)
IMPROVEMENT Adjusted zim.Pages to not accept swipes or button clicks to go() until transition is finished (thanks Meagan Peat)
The ZIM Pages example https://zimjs.com/code/pages has been updated to modern zim code showing Pages, Layouts, Grids, Guides, and MVC
Fixed bug in frame.makeCircles - we had removed the frame module colors in favor of frame.blue, etc. and not adjusted makeCircles
ZIM 4.9.1
Added a resize() method to the Window to resize the dimensions without scaling the content
This allows independent scaling of the content to fit the width for instance in a long vertical scroll
Added a minSize property to the indicator property of the Window - already had the size property
For example:
indicator.size = 6; // the width if vertical or the height if horizontal
indicator.minSize = 12; // for the height if vertical or the width if horizontal
Added scrollwheel support to Window
Firefox has a canvas redraw glitch where it flashes unscaled/unpositioned content on full template resize
Implemented a fix where over 40ms the ticker.update is set to false and at 20ms the resize happens
It seems the requestAnimationFrame is catching the stage in a null dimension state or something...
Anyway - only on Firefox with full mode and a Ticker running - and fixed now. IMPROVEMENT
Adjusted Pad to default to an array of keys that match the rows and cols (of course!)
Adjusted Label to properly valign bottom and center when text is more than one line CHANGE
Also adjusted Label so bounds change when the text changes
ZIM 4.9.0
Added Loader class to upload files from desktop to canvas zim.Bitmap object and also save to new window
Added TextArea class to create an editable text box - it uses the HTML textarea tag and CreateJS DOMElement
Added outlineColor and outlineWidth to Label IMPROVEMENT
Added selectedIndex to ColorPicker docs
Adjusted a few bugs with arrows in vertical steppers - hopeful that is all fixed - quite complex
Made alpha change dispatch change event as well from ColorPicker IMPROVEMENT
Added return object of the animation target for a series
Fixed doubleclick glitch in zim animate created when a delay in protect was placed for animation series IMPROVEMENT
Added dashed parameter to Rectangle, Circle, Triangle, and Button
and made either borderColor or borderWidth create a border and make the other parameter have a default
and made shapes be transparent if no color is specified AND a border is specified BREAK
otherwise passing null for the color will default to black (as it has all along)
This was a pain when you wanted a border without a fill - you had to set the fill to "rgba(0,0,0,0)"
Fixed Label clone when there is a backing - must clone the backing too ;-)
Rearranged vertical Slider to have min at bottom and max at top BREAK
ZIM 4.8.2
Added tab control in frame with tab highlight, highlight object and a number of parameters IMPROVEMENT
This is demonstrated in the LeaderBoard of https://zimjs.com/code/zong
Will be expanding tab control - currently steppers and tabs - although any display object
can be added manually to the tabOrder. So now tabbed to objects can receive an Indicator
Looking into screen reader support as well - although many things made in ZIM are visual.
Updated zim.fit() to take into account bound x and y when fitting.
ZIM Game 1.0.1
LeaderBoard has integrated key and gamePad controls for entering name IMPROVEMENT
An editing page has been set up to update five security options IMPROVEMENT
Automatic bad word filter has been added to the ZIM data mode IMPROVEMENT
ZIM 4.8.1
Stepper updates - added press, rightForward, downForward parameters to Stepper BREAK
changed arrows to represent visual arrows - so set to false to hide them
added arrowKeys parameter to use or not use arrow keys - default true
changed default vertical forward direction to down unless numbers and then it is up
can change these with rightForward and downForward parameters
made it so mousedown immediately advances stepper (unless press is false) IMPROVEMENT
this was an oversight - got missed when implementing hold parameters
or perhaps we did not want it to advance immediately if users are wanting to hold drag backwards...
Adjusted Label to accommodate backing in its bounds calculations - assumes if backing the bounds are that of the backing
Removed the default ZIM Wonder server parameter value as it runs the risk of being out of date IMPROVEMENT
Implemented a zimserver_url.js file that will always hold up-to-date domain:port urls for ZIM Socket, ZIM Wonder, ZIM Distill
In doing so swapped the server and notes parameters so this BREAKS previous signature - as server is required and notes is optional
ZIM 4.8.0
Added zim.GamePad() to handle game controller input for buttons and sticks IMPROVEMENT
Added zim.MotionController() to handle moving a target object with the following types: IMPROVEMENT
mousedown, mousemove, keydown, gamebutton, gamestick, swipe, manual
includes adjustable speed, damping, flipping or rotation, key/button mapping, firstPerson mode, etc.
Damp and ProportionDamp now return the object for chaining
ZIM 4.7.3
Changed zim.Ticker to use requestAnimationFrame with default no throttle IMPROVEMENT
Added setTimingMode() static method to Ticker to go back to synched or timeout modes
setFPS(mobile, desktop) is still available but can lead to less than smooth performance
(NOTE: the initial launch of 4.7.3 was not quite right so we patched it a few days after)
added zim.sign(num) to return -1, 0, 1
added zim.constrain(num, min, max, negative) to constrain number to within and including bounds
added zim.dist(x1, y1, x2, y2) to calculate the distance between two points
Adjusted Frame to stage.update() on full mode resize IMPROVEMENT
After canvas adjustment a few updates ago this was causing flicker
or things disappearing until next stage.update()
The stage will not update in full mode on resize if zim.OPTIMIZE is set to true
You will have to manually update the stage in your resize event function to see anything on the stage
Adjusted zim.Pane to not do anything to the text when you change it
If you want the text to be centered always, then start off with a zim.Label with align:center
ZIM 4.7.2
frame.loadAssets() now returns a zim.Queue object where we can capture events for a specific loading
Also there is an isLoading property on the Queue and reference to the createjs.LoadQueue with a preload property
The frame also captures these events for all queues as before and now has an overall isLoading property.
Thanks to Frank Los for prompting the changes and helping with the solution.
loadAssets() has a new time parameter to force the preload to wait at least this long in ms.
This can be used in testing and for when you want a minimum time to show a preload message
Added a showing property to zim.Waiter() and zim.Pane()
You can now loop an animation inside an animation series forever - it just will not proceed to the next animation
The set parameter for zim.move() and zim.animate() now lets you set scale (the convenience property for scaleX and scaleY)
Went back two updates to fix the loopCall parameter which was not calling when looping forever
since the change to the loopCall to not call on the last loop - use call for that (nice sentence!)
Added a zim.Dynamo() class to handle dynamic Sprite animation
You pass the Dynamo a Sprite, a base frames per second an optional label or start end frames
The Dynamo should be able to parse any type of CreateJS spritesheet data including nested animation labels
It turns these into an array of frames animates through the frames with percentSpeed available to adjust dynamically
The Dynamo also allows you to pause with a time delay or a on a frame number - and of course, unpause
Added a zim.Accelerator() class to handle dynamically changing speed and pausing of Dynamo and Scroller objects
This allows you to control the objects from one place to dynamically change the speed of a scene
Upddated the Scroller class to allow for pausing and percentSpeed
And the Scroller no longer has to be added to the stage to work
and in either case, the scroller backgrounds do not have to be on the stage to make a Scroller
See https://zimjs.com/code/zide/ for an example
ZIM 4.7.1
Added zim.interval(time, call, total, immediate), zim.timeout(time, call) that use requestAnimationFrame
Added zim.siz(width, height, only) for chainable size method
with either width or height, will scale the other to keep proportion unless only is set to true
Removed Dashed Lines - as CreateJS now does a dashed stroke. (BREAK)
Fixed Frame in full mode to resize canvas dimensions rather than create large canvas (IMPROVEMENT)
due to unexpected repositioning in apple devices (of course).
For instance, how can a canvas with no left and top be moved hundreds of pixels off the screen to the left
when switching orientations? Even when left and top are set to 0px; Get your act together Apple!
Problem is... it is a problem for ages.
Added a delay parameter to frame to make mobile devices redo a resize event to catch proper dimensions - default 500ms
made Pane and Waiter show() and toggle() chainable
adjusted zim.rand() to convert parameters that are NaN to 0
Adjusted zim.animate() and sprite.run() to let inner animation series loop forever
this will make the looping forever series the last animation to run in the series
added frame.clear (alpha 0), frame.white, frame.black, frame.faint to colors - faint is alpha .01 good for invisible interactivity
ZIM 4.7.0
major update to zim.animate() to run animation series
also better id control for pauseZimAnimate() and stopZimAnimate() IMPROVEMENT
now documented as proper methods and with optional global control on zim directly.
removed zimTween from move() and animate() and added reference to zimTweens (BREAK)
removed stopZimMove and pauseZimMove - use stopZimAnimate and pauseZimAnimate for all (BREAK)
adjusted loopCall to not run after the last loop - that is when call runs (BREAK)
changed rewind props to be set after initial wait
added set parameter to move() and animate() to set properties at start of animation
updated docs for move() and animate()
Sprite.run() uses new animation series and stopRun() and pauseRun() use animation id system.
Sprite has json parameter which replaces spriteSheet parameter BREAK
The SpriteSheet is now made internally from the json
can still pass in rows and cols as well instead of json
added makeID() method to code module
frame now gives the stage read only stage.width and stage.height properties
added single param (default false) to zim Dictionary
added reg() and sca() methods for consistent shortcuts to regX, regY, scaleX and scaleY
ZIM 4.6.0
added addTo() and removeFrom() functions / ZIM 4TH methods
these are wrappers for addChild() / addChildAt() and removeChild()
except they are consistent with center() and centerReg() where the obj comes first and the container is in the brackets
circle.addTo(stage); // rather than stage.addChild(circle);
circle.center(stage);
circle.centerReg(stage);
circle.removeChild(stage);
This also allows us to chain objects easier
var circle = new zim.Circle().addTo(stage);
var circle = new zim.Circle().addTo(stage).drag();
Added pos(x, y), mov(x, y), alp(alpha), rot(rotation), ske(skewX, skewY) functions / ZIM 4TH methods
chainable functions for common properties (a little shorter than set() method)
Note: pronounce mov() as "mawv" to differentiate from move()
mov() sets relative position in x and y - like circle.x += 100;
var circle = new zim.Circle().center(stage).mov(100); // shifts shifts to right 100
Added zim Swiper() class to Pages module to act like invisible slider with damping
Overhauled zim Sprite() to include the SpriteSheet and data creation
also added a run() method to animate the Sprite over time (see advanced ZIM Capture)
This gives two line Sprite animation with better control (BREAKS signature)
It still works with a CreateJS SpriteSheet if desired.
And optionally, you can pass in the JSON for the spritesheet.
Added keydown and keyup events to frame - wrappers for window events
Pages now dispatches a pagetransitioned event - not pageTransitioned (BREAKS)
removed secondary reference to colors in frame (BREAKS)
added frame.gray (already have frame.grey - these two are the same)
arrow keys for stepper now move secondary steps if in cross direction
also made stepper secondary arrows only show up for type of number
adjusted loop() to pass index, total, min, max, obj consistently as final params to call (BREAKS)
also added internal bounds to loop to handle out of bound step, start and end values
adjusted loop documentation to be more clear - should be the end of loop adjustments
corrected the zim Swipe docs to not include container properties
corrected frame variable (should have been this) to fix bug in strict mode
adjusted scaleTo() to scale to 100% in x and y when both are null - still default "fit"
so just using rect.scaleTo(stage) would fit the rect on the stage
previously, passing in no percentages would not scale at all.
adjusted typo in parallax Docs - scrolly should have been scrollY
rand() now has negative parameter to let you choose from a positive or negative range
ZIM Frame loadAssets() has been adjusted to include extra file types:
JSON, Text, XML, and SVG data can be loaded (as per CreateJS PreloadJS info)
ZIM 4.5.0
added a from parameter to zim.move and animate
you can set the from parameter to true to animate to current values from properties provided in obj
sequence in move and animate now works on a container as well as an array
added sequenceReverse parameter (BREAKS parameter order!!!) to handle sequencing through children (or elements) backwards
added a zim.ANIMATE global constant to prevent move and animate from running (eg. while testing)
added a check to move and animate for targets not on stage - to avoid the obtuse Ticker error message
IMPROVEMENT: updated Stepper with a bunch of new parameters:
hold, holdDelay, holdSpeed, drag, dragSensitivity, dragRange, type,
min, max, step, step2, arrows2, arrows2Scale, keyEnabled
also set keys work on Stepper only if they have focus or are first made
added focus property to Stepper
changed the strokeColor to borderColor - BREAKS old code... (sorry - now we consistently use border rather than stroke)
adjusted stepper to not return when setting currentIndex and index is same as currentIndex (might have changed the stepperArray)
also made setting the stepperArray update the currentIndex which will refresh the view
adjusted slider, dial, stepper currentValue to return if value set to undefined
zim.decimals(num, decimals, addZeros) will add zeros to decimal place if missing - for presentation
IMPROVEMENT: set drag to work if mouse is outside stage - on now by default - should have been on (oversight)
added a fadeTime parameter to Waiter and Pane to fade in and out for the provided milliseconds
added step, start and end parameters to zim.Loop took away total parameter (BREAKS)
added ZIM DUO to loop now that parameters are longer...
gave Circle a radius property get / set - that redraws the circle (not scales it like width and height)
Circle, Rectangle, Triangle parameter change - BREAKS zim DUO for the following:
color (not fill), borderColor (not stroke) and borderWidth (not strokeSize)
also the methods setFill(), setStroke() and setStrokeColor have been removed (BREAKS)
added borderColor and borderWidth properties - already have a color property
changed the borderThickness properties in Button and Window to borderWidth to match (and match css) - BREAKS zim DUO for these
added width, height, fullscreen parameters to zgo and shifted modal parameter to end (BREAKS)
made rand() set integer to false if a or b are not integers
added backing color to ColorPicker
fixed little glitch in animate() ticker paramater
Reordered EXAMPLES so ZIM 4TH versions come before the traditional zim functions
ZIM 4.4.0IMPROVEMENT: hitTests improved by having mathematical hitTestBounds as filter
made it so can't add gradient or gloss if custom backing
fixed hitArea on indicator when square type is chosen
fixed indicator to update selectedIndex before dispatching change events
added swipe to window doc
made zim.loop() the name for all zim loops again and adjusted docs (BREAKS)
ZIM 4.3.1
Added read/write width, height, widthOnly, heightOnly properties to all zim displayObjects
Could BREAK old code where width and height were read directly from getBounds().width and getBounds().height
now they are getBounds().width*scaleX and getBounds().height*scaleY so they match the set width and height.
This is a fairly big change - now when you can set the width and this will adjust the scale to make the shape match the width inside the parent bounds
If you want to get the width of the bounds without scale - then use getBounds().width
It also means that the scale will probably be changed when you set width and height.
Hopefully this will not cause too many problems. We went through the 64 ZIM Bits and adjusted a couple places
In one case we had to go back to the getBounds() but in another case it helped the app be more intuitive and we removed a tricky scale call
Added prop(property, value) method to zet to get or set the a property (or properties) of the set.
Adjusted docs to more explicitly list CreateJS methods, properties and events for each Build Module class
Made RadioButtons have a default of A, B, C
Fixed zim.drag surround to handle bounds with x and y not equal to 0 (like for a circle)
Fixed rotated container origin marking for zim.outline
Removed bound requirement from center. Removed container bound requirement from centerReg
ZIM 4.3.0
introduced zim.extend(sub, super, override, prefix, prototype) which piggybacks on createjs.extend and createjs.promote
now all extends are done using this so that ZIM classes can be properly extended
this means that the createjs namespace must be loaded before ZIM - too bad, but that's okay
So if you load ZIM before CreateJS this BREAKS and gives a ZIM message followed by an error - most likely Frame is not a function
Just put the createjs script call above the zimjs script call.
all classes are now one function - had to add the scope parameter (this) to zob() for these.
IMPROVEMENT: fixed memory leak in Button - was not clearing mouseout event - off() sometimes does not work!
updated RadioButtons dot to default .7 alpha in color
fixed sequence to take into account the new loopCall and loopParams
had to adjust loop() so that a return is used to continue and a return with a value is used to break
return "continue" no longer continues it actually breaks - the function is only one version old so may as well fix it
moved loop() to code module and made loopChildren() in Create module for containers - may adjust this later
this BREAKS if you were using loop() on container
updated the Button description and added pizzazz to icon param description
IMPROVEMENT: added a rollPerSecond parameter to zim.Frame with a default of 20 checks per second (was set at 10)
ZIM 4.2.1
added a setBackings(newBacking, newRollBacking) to match the setIcons() in Buttons
also made toggle work for backings if there is no icon set and it is not a string (to toggle label)
adjusted the docs to wrap the signature of the function when you open a section
fixed clone of button to make sure all new paramters get cloned
adjusted hitArea of label to not be stored as the backing when no backing
as it caused clone problems - the clone then thought a backing was set when it was just the hitArea
ZIM 4.2.0
added icon and rollIcon parameters to button to accept display object like pizzazz2 icons
added setIcons(newIcon, newRollIcon) method to button to allow dynamically changing the icons
added toggle and rollToggle parameters to button to handle toggling the label or icons
added toggled property to button that returns true if in toggled stage and false if in original state
added toggle() method to button to force a toggle (or set state to true or false)
added 2px to height of text in labels to accommodate descenders
added loop() function to Create Module to loop or loop through children of container
tested with 1000 children and no speed difference
added isEmpty() function to test if object literal is empty
added loopCall and loopParams parameters to move() and animate()
and adjusted call to call after all loops and rewinds have finished
(always thought this was what it was doing but realized NOT)
this change BREAKS the signature - sorry - but hopefully you are using ZIM DUO config for this
added protect parameter to move and animate to ensure animation finishes
cancels any subsequent animation calls
added override parameter to move and animate to allow multiple animations on an object
without having to set props:{override:true} - does the same thing
updated ZIM 4TH version of move and animate to full parameter set
removed pauseZimMove, stopZimMove, pauseZimAnimate, stopZimAnimate when tween is done
added color property to stage to get or set background color (there already is a color parameter)
fixed dial setting currentValue if max is less than min
added read-only angles property [left, bottom right, top right] to Triangle
IMPROVEMENT:adjusted zim.Dial to record last angle when clicked to avoid wrapping when not supposed to
ZIM 4.1.3
added stage.update to colorPicker when indicator present (follows zim.OPTIMIZE)
made indicator #111 when color is #000
added copyMatrix function to Create Module and use it in move, animate, setMask, drag and clone
made move and animate work with setMask to animate the mask (like drag drags the mask)
ZIM 4.1.2
ColorPicker has circles property added for circle swatches
ColorPicker has buttonBar property added to be able to set to false and hide buttons
added indicator parameter defaulting to true that shows currentColor
added selectedIndex property to ColorPicker
recorded lastColor and lastAlpha when setting selectedColor, selectedIndex and selectedAlpha
added id parameter to place method
IMPROVEMENT: fixed Button to center custom label after label bound changes in 4.1.1
added specific clone methods to Rectangle, Circle and Triangle
added rollPersist parameter and property to Button to keep rollColor when button being pressed even if rolled off
made slider use rollPersist=true
added gapFix back to scroller - still getting very thin gap if changing speeds - gapFix:1 should do it - default 0
adjusted move and animate to not run another animation for properties that are currently looping or rewinding
when these are done or the tween removed with stopZimMove or stopZimAnimate then animating these properties is okay again
problem was the tweens if overwritten would start from their last stopping spot
ZIM 4.1.1
added backing to Label
added position:absolute to Frame (fit, full, outside) so no styles required up top now
removed depreciated stageW and stageH properties from Frame (use width and height) (BREAKS)
fixed up bounds of label (I hope) and adjusted button placement
added fontOptions to Label clone
this could affect making a custom cursor out of a label - now need to set the mouseEnabled of label false
ZIM 4.1.0
Added backing and rollBacking support to zim.Button and zim.Pane (not rollBacking)
IMPROVEMENT: Fixed hitArea on zim.Label when centered
changed Pane move cursor to pointer
changed Pane backing property to backDrop to avoid confusion with new backing parameter
added toggle() method to Pane
added pointer cursor to Pane display when displayClose is true
ZIM 4.0.1
Updated docs to have proper sentences for description.
Adjusted zim.Triangle() to make isosceles have a unique base number
(makes triangle symmetrical about the Y axis). This causes different behaviour.
Fixed glitch in dragRect() for when no previous rect specified and localBounds set to true
Refactored zim.Window - added paddingVertical and paddingHorizontal
and indicatorDrag - which BREAKS the signature - sorry.
ZIM 4TH - 4.0
added zim Container, Shape, Sprite, MovieClip display wrappers
these extend are made from CreateJS counterparts
but they all have the ZIM Create functions added as methods
and they also have read only width and height properties based on getBounds
all ZIM display objects now extend a zim.Container
fixed zim.Drag glitch with removing zimDragTicker
fixed label to center properly when text is updated
adjusted documentation on width and height of button read only
added reference to AbstractContainer methods in all display object docs
added reference to createjs docs in docs
added RETURN values in documentation for every function
added EXAMPLE for every command in the documentation
added PARAMETERS for every function in ZIM Create module (already in other modules)
added global function isDUO to test if parameters are in config object format
added clone to all objects including cloned basic properties
and recursive cloning for Container and Window
moved Parallax and Scroller to the end of the PAGES module
this gives clean break with all display, shapes and components in BUILD
Renamed ZIM DISTILL to ZIM META
and added zim.Wonder to META
added a check to see if objects are on stage for all hitTests
added zil to fit and outside scale modes too
added fontOptions to zim.Label - for ordered font-style font-variant font-weight
did not realize that these can't be put after the font-size... sigh
adjusted gloss and gradient to not go over the border of the buttons
added startBounds (true) to drag() set to false to ignore bounds on start
inserted color parameter into Frame after height - will BREAKS legacy code
added css parameter to animate - set to true to animate html tags with css
added PARAMETERS section to all documentation
made section titles different color in docs
made example for each and have that be boxed
added props to normal parameters for animate and move
ZIM 3.1.4
Removed fps from animate and move - signature change at end!
Handle fps via zim.Ticker
adjust Frame to recognize tag scaling inside DOMContentLoaded
added one, two and three properties giving points for corners of Triangle
adjusted cloneAsset() method of Frame to clone id
ZIM 3.1.3
Fixed Ticker default fps
ZIM 3.1.2
added id to asset property on assetloaded event object
added getStage method to sound instance of asset so can animate volume and pan
added stopZimAnimate, stopZimMove, pauseZimAnimate and pauseZimMove
for the target of animate and move functions
tab to flatbottom default
added scrollXMax and scrollYMax to window
added index to center and centerReg that works like addChildAt()
ZIM 3.1.1
added Window class to Build module
added slideSnap of vertical and horizontal in drag create module
added slidestop event to documentation for drag
added lineWidth and lineHeight properties to zim.Label
added cloneAsset() to zim Frame for copying images and keeping width and height props
ZIM 3.0.4
adjusted zim.Button to center the logo
todo - make hitTestRect and hitTestCircle have an offset parameter
todo - change tabs and grids to use hitTestGrid for rollovers and hits
add a backing color and padding parameters to label
ZIM 3.0.3
added zim.mask() to work with ZIM Rectangle, Circle and Triangle
adjusted zim.Frame to default to tagID + "Canvas" for canvas ID
no changes to zim.Frame if on any other scaling mode
ZIM 3.0.2
rotated zim.outline()
fixed bug in ZIM Dial so it properly takes into account custom start position in dragging calculations
adjusted buttons to have centered labels
ZIM 3.0.1
added valign to Label params
valign - defaults to "top". Options: "top", "middle / center", "bottom"
fixed DUO for center() (was pointing at centerReg)
fixed center() bug with rotated and scaled containers
adjusted outline() to show rotated origin
ZIM TRI - 3.0
added align and valign to frame
changed ZIM Frame to work on DOMContentLoaded and for delayed canvases, on document.readyState=="interactive" or "complete"
also made resize event trigger for all scale modes not just full
added sound parameters to asset().play(params) for {loop:-1, volume:.5}, etc.
drag default dragging cursor is pointer rather than resize
added swapHTML to swap innerHTML of two tag references
added zet(selector) function with on(), css() methods to apply events and properties to selectors
added a tag option for ZIM Frame scaling parameter to put Frame into an HTML tag
like a full setting with no scaling but in the dimensions set by the tag
added a scale property (read only) to ZIM Frame (will be 1 for full and none)
added an x and y property to frame position added by Frame (0 and 0 for full and none)
added a canvasID parameter to ZIM Frame to handle multiple canvases on one page
added a readyState check to ZIM Frame in case loading it after the window load event has triggered.
added add parameter to centerReg in DUO modes
added a zim.center() function that works like centerReg with a container but does not center the registration point
adjusted centerReg() and center() to move to center relative to container even if not adding to container
adjusted centerReg() to test for bounds on container
added multiple stage support for ZIM Ticker
adjusted ZIM move and animate to wait 200ms before removing Ticker function to let animation finish
added objects and values properties to ZIM Dictionary for easy traversal
added rotation support to zim.Outline
adjusted hitTestCircle() and hitTestRect() to check for a point in the middle too
made zim.Drag() automatically remove the tweens from dragged object
and then set a parameter called removeTweens which defaults to true
made ZIM drag add to Ticker queue only on mousedown and off on pressup
added displayClose parameter to zim Pane() to default to true
if display backing is pressed it closes unless drag set to true of displayClose set to false
set Pane's Label to mouseEnabled = false;
this is different behavior to original Pane settings where display press would not close Pane
ZIM 2.6.1
BUG FIXES
CREATE
fixed bug in zim.Ticker - was not storing stage when always was used alone
BUILD
added rounding to non-divisible steps in Slider
added inside parameter to Slider documentation
FRAME
added frame.tin for the #777777 color missing between silver and grey
added frame.purple for dark accent color
frame.lighter color needed an extra e.
ZIM 2.6.1 Updates - centerReg, labelColor, checks, makeCircles, etc.
CREATE:
added an add parameter (default true) to zim.centerReg()
which automatically adds object to the container if container is provided
so zim.centerReg(rect, stage); will center the rect on the stage and addChild to the stage
a touch of a risk as it may be better to always let people addChild - but I do this so often
that I thought I might bend a little. You can pass false as a third param to avoid the addChild
BUILD:
added labelColor to Tabs and Pad classes (BREAKS signature near end - sorry) BUILD
updated Pad documentation
adapted Stepper label to use new centered Label text
added optional type of checkbox for x and square checks
RadioButton, CheckBox, Stepper no longer dispatch change events when set with properties like selectedIndex
so only dispatches change on user input - this changes the behaviour of older zim
FRAME:
has a 250 and 500 ms refresh added to resize events due to mobile delay in changing dimensions
added zon error message to missing sound assets so play() will not break app
added zim.makeCircles() function which ZIM circles for logo
ZIM 2.6
CREATE
Added id to zim.place()
BUILD
Added Pad component
Added Dial component
Added inside parameter to Slider to fit button inside bar
Added press on bar to move slider to position
Adjusted Tabs to alternately take an array of numbers or strings as tabs parameter
Changed Tabs font size to half height
Changed Tabs auto to currentEnabled (just the click on current tab is not enabled)
must now set color and selectedColor to same to be like button
Fixed Tabs dispose
Fixed Button dispose
Fixed 0 glitch in Label "" == 0 what do you know!
FRAME
added ZIM colors as properties
edit all links to https:for cdn
-> need to add pause property to scroller
ZIM 2.5
MOVE & ANIMATE
added support for moving and animating an array of objects
including a sequence parameter to set time delay of animations on array
this makes marquees, etc.
this means that zim.copy() has to be copied into the stand alone CREATE module
added loopDelay property to move and animate props parameter
this adds a delay after the animation happens (and before a looped animation)
DRAG
Added surround, slide, slideDamp, slideSnap and reg params to Drag in CREATE
added dragRect() to dynamically set the drag rect in Create
TICKER
added Ticker class to Create module - and any that use Tickers
need to add Ticker class to stand-alone BUILD module
removed ticker parameter from any zim functions
made zim.move and zim.animate use the zim Ticker
made zim.drag use the zim Ticker
made zim.Parallax and zim.Scroller use the zim Ticker
MISC
added Dictionary class to CODE module
adjusted zim.mobile() to return "android", "Apple", "blackberry", "windows", "other" or false
Scroller added startPos and endPos params in BUILD
Fixed globalToLocal issues in Scroller
added place() method to CREATE to position things and get location in console
Added text property set and get to CheckBox in BUILD
Added display parameter to stepper to show or hide the text display
Fixed small bug in stepper in setting currentValue and currentIndex
added tripple screen support to max canvas size (which also fixes android sizing bug) in FRAME
added registration support to zim.fit() - might change your code!
added a display parameter to zim Stepper to show (default) or hide the display
switched the arrow direction on vertical Stepper too - sorry up arrow activates arrow on top (BREAKS)
added align parameter to text for left (default), center and right
fixed alignment formula for Pane
fixed target in zgo() for WRAP - was always opening in _blank
return v==null; used for zot(); in WRAP
Fixed Proportion to work with larger number first
consider default container.addChild(obj) for zim.centerReg(obj, container)
ZIM 2.4
ColorPicker component
gave slider a width and height property
fixed Waiter default shadowColor to #000 with alpha
ZIM 2.3
CREATE
Added a hitTestGrid function
Added a paddingVertical to expand so can optionally provide different padding in horizontal and vertical
BUILD
added zim.OPTIMIZE and zim.ACTIONEVENT constants
OPTIMIZE defaults to false but if set to true, components will not stage.update for any presses or property sets (only for mouseover/out)
ACTIONEVENT defaults to "mousedown" and if set to something else then changes to click - can toggle this with zim.mobile() if desired
Added Tab component
added color and rollColor properties to set dynamically on button
fixed enabled bug on button (set mouseChildren false after re-enabling)
added color of label and roll dynamically
PAGES
exposed the regions object of the Layout class for dynamic alteration to Layouts - must call resize() after changing.
made HotSpots and HotSpot follow zim.ACTIONEVENT
Pages documentation should have read lastPages not oldPages
FRAME
made zim.Frame set default rollover to !zim.mobile() (a quick test for mobile)
ZIM 2.2
added fps and ticker properties to move and animate to create module
added fps and ticker properties to parallax and scroller in build module
added mobile function to code module
updated parallax module with fps and ticker
ZIM 2.1
Added always parameter to RadioButton
Fixed margin on Checkbox
Made checked always black but can set color with check.color
Made RadioButton selectedIndex property call a change event if set
Made CheckBox selected property call a change event if set
Made Stepper currentIndex property call a change event if set
Added enabled property to button, checkbox, radio, slider, stepper
ZIM DUO - 2.0
We now minify all the modules and the full zim code under just the zim and version number, i.e. zim_2.0.js.
So no more _min. The only file that is human readable has _doc after the version number, i.e. zim_2.0_doc.js.
Added zob() which allows us to provide a single configuration object for many of the zim functions
CREATE
animation loop fix
added count
added target return in call with no params
added scale convenience to animate
flipped the ease if doing rewind for move and animate
added expand() function to zim create module
BUILD
fixed Pane shadow to alpha
fixed bug in resets and documented as default true
pane center parameter now documented and adjusted to remove all centering if set to false
fixed Label with 0 value bug
fixed Stepper arrow loop bug
added Stepper to press on box
changed default Stepper to go from 0-9
Waiter does not dispatch a close event
made Slider class
fixed initial RadioButtons id bug
Created and AI Chat Bot for ZIM.
This uses RAG (Retrieval Augmented Generation)
which uses the best 3 questions and answers from 1000 ZIM question and answers
and the ZIM Template to feed to ChatGPT a special prompt.
The project was done by Suha Islaih https://www.linkedin.com/in/suha-islaih
and we would recommend employing Suha for similar projects.
The 1000 questions and answers were guided by the ZIM team
to get current information as raw ChatGPT was quite out-of-date.
From our tests, we greatly improved the answers from about 2% correct to 80% correct.
Still, that leaves 20% incorrect and possibly quite misleading.
We have included a poll at the bottom that you can do for each question
and which shows live results as to the correctness of the answers.
Rive lets you make interactive graphics and animations - https://rive.app/
Rive is an animation tool similar to Adobe Animate (Flash) but with a special StateMachine
that has a cool connector node system to guide animation states.
Added an outlineImage() function to the Code Module
that returns points around a single solid part of a DisplayObject.
Most likely, this will be used on a Pic() that is a png with background transparent outside.
Note: this returns thousands of points so see simplifyPoints()
Added a simplifyPoints() function to the Code Module
that takes lots of points and simplifies them.
The simplified point can then be passed into a ZIM Blob to make a shape.
Thanks Ami Hanya for the prompting
and Emanuele Feronato https://www.emanueleferonato.com/ for earlier Flash examples.
// Emanuele Feronato & Anton Angelov
// https://www.emanueleferonato.com/2011/09/12/create-non-convex-complex-shapes-with-box2d/
// Vladimir Agafonkin https://mourner.github.io/simplify-js/
ZIM Physics helper module has been updated to version 2.3
ZIM Blob().addPhysics() now supports concave shapes
as long as the Blob does not overlap, it should work (and points in clockwise order)
Internally, concave shapes are converted to multiple convex fixture shapes in Box2D
using the b2Separator class by Antoan Angelov
See the example above
NOTE: previously, we showed an example made up of multiple Physics objects with joins.
IMPROVEMENT Now, joining multiple physics objects are no longer necessary.
Added a selectedIndicatorType parameter after indicatorType BREAK - rest of parameters moved back one
This allows different indicators to be used for selected versus not selected.
Also, updated the indicators to be center reg and if no height provided, be the max height of any custom indicators.
Thanks Karel Rosseel.
We have made a node.js app that shows how to get data to and from a node.js running ZIM.
There are async(), Ajax() and Bind() examples.
Emitters can emit any DisplayObject as a particle
so not all configurations are shown here. Also the Shape option for the obj is not here.
See https://zimjs.com/docs.html?item=Emitter for more possibilities.
ZIM has a new Forum and we will phase out Slack over the next couple months.
We are keeping Discord. There are two main reasons for moving:
We have added an xr parameter to the ZIM Three module as well as the following classes:
