1. CHAT 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)
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="https://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.
import zim from "https://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
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
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
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
const pages = new Pages({
pages: pageList,
transition: "slide",
time: .7,
continuous: true
}).addTo();12. GENERAL
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 IMPROVEMENT
BREAK - 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
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.
13. 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.
14. 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.