danzen / zimjs Goto Github PK
View Code? Open in Web Editor NEWZIM JavaScript Canvas Framework - Code Creativity! Interactive Media For All.
License: Other
ZIM JavaScript Canvas Framework - Code Creativity! Interactive Media For All.
License: Other
Where is source code of the library? I suppose that https://github.com/danzen/zimjs/blob/master/zim.js is product of som dev ops. Please don't tell me that it is a source... all in one file 80000 lines.
And also, is there some overview architecture described somewhere?
Thanks π
Hi Danzen!
I see in the code
clearInterval(addedInterval);
but addedInterval is never defined.
Bye
Requested by Math3matica on Slack
Slider would be nice to formalize - have examples with a button and using proportion equations but a component would be good. An option picker beyond the stepper would be good. So one with a certain number of options available and you scrub through them - perhaps with optional 3D effect. I made one in Flash like that - like the iOS date spinner.
Hi there,
I got a weird situation. I watch this tutorial https://youtu.be/xjAyf3my2Bw and do the same thing.
all things work well. But I add a new MovieClip and make it move loopy by itself.
When I drag a ball, the ball move become fast a lot. And when I stop drag, anything works well as before.
I make the example in codepen and here is my adobe animate file a01.fla.zip
those I use.
<script src="https://zimjs.org/cdn/1.3.4/createjs.js"></script>
<script src="https://zimjs.org/cdn/00/zim_min.js"></script>
Thanks
Hey @danzen can you add Zim to npmjs registry?
Bart Libert 1:22 AM
Hereby I would like to add a feature request for AudioSprite support, because this feature dramatically decreases load times for projects with multiple audio files and lots of very small files. Like game sound effects or narrator words/interface sounds . These are all very small files, but each take the overhead of 1 single load for each file (which is quite a lot of overhead and time lost) . By loading them all in 1 larger file and defining sections as audioSprites, you can get compact project with all sound in 1 file. I hope this feature request could make the release because audio is as important as gfx nowadays t make interactive material (but I'm pretty confident that it will most probably make it since you update ZIM at a record tempo π ) - Bart on Slack.
Hi there,
I reference https://zimjs.com/typescript.html to start my ZIMjs project.
I find out some typing is not correct. like...
// zim/index.d.ts
export function zimify(obj:createjs.DisplayObject, list:boolean):DisplayObject
I follow this typing to write code.
const exportRooot: createjs.MovieClip = ...
const zContainer = zimify(exportRoot, false);
zContainer.setBounds(0,0,stageW,stageH).center();
It doesn't work. Because zContainer is null. And I change my code to...
const exportRooot: createjs.MovieClip = ...
const zContainer = zimify(exportRoot);
zContainer.setBounds(0,0,stageW,stageH).center();
It work well. But zimify function typing definition is not existed.
I know maintain typing definition is hard and boring.
So..Could you update ZIMjs typing definition or let me send "pull request" etc.
Thanks.
I've created a stage just like the slide example (http://zimjs.com/bits/view/slide.html) where I replace the image with another rectangle so that one rectangle is the mask of another. I consider the masked rectangle as the stage where other objects can be placed upon and when dragging this stage all objects are also moved. This is working as expected, except that shapes on the masked rectangle ignore events. What would be the issue?
var map = new Rectangle(frame.width, frame.height, frame.blue).addTo(stage).center();
var mask = new Rectangle(600, 400).addTo(stage, 0).pos(200, 100);
map.setMask(mask);
map.drag({
mask:new createjs.Rectangle(200, 100, 600, 400),
surround:true,
slide:true,
dragCursor:"pointer"
});
var line = new Rectangle(375, 50, frame.red).pos(300, 300).addTo(map); // added to map so it also moves when the map gets dragged.
line.on("mouseover", function() {
console.log("test"); / /ignored
});
When using a dial and setting the limit property to false we are unable to use the arrow keys to make the dial go past the maximum value.
Using ZimJS 6.6.3 for this example.
Example dial code:
let horDial = new Dial({ width: 65, limit: false, useTicks: false, indicatorType: "dot", indicatorScale: .75, color: "#fff" })
I am trying to listen event
frame.on("keydown", function(e) {
if(k.selectedLabel == label1) {
k.selectedLabel.text += e.key;
k.selectedIndex++; //not working!
stage.update();
}
})
Perhaps make all the functions inside keyboard available to public access.
That would allow me to directly call positionBlinker()
or addToLabel(e.key)
It's great that it's possible to do all this great functionality with a virtual keyboard, but not why enable the real keyboard into this as well? Thank you.
When using zim.timeout with 100 or less set for the delay I am getting the following error:
zim_5.3.0.js:5 Uncaught TypeError: n.clear is not a function at o (zim_5.3.0.js:5) at Object.e.timeout (zim_5.3.0.js:5) ....
It appears that this is happening due to next() being called on in zim.timeout() before obj,clear() and obj.pause() are set.
Test:
zim.timeout(10, function(){zog("this is a test")});
Possible Fix:
Move the next() call after obj.clear and obj.pause are set.
`
zim.timeout = function(time, call) {
z_d("9.7");
if (zot(call)) return;
if (typeof call != 'function') return;
if (zot(time)) time = 1000;
time = zik(time);
var obj = {startTime:Date.now(), time:0, paused:false};
var lastTime = obj.startTime;
function next() {
var now = Date.now()
obj.time += now - lastTime;
lastTime = now;
if (obj.time >= time) {
(call)(obj);
obj.clear();
return;
}
obj.rid = requestAnimationFrame(next);
}
obj.pause = function(state) {
if (zot(state)) state = true;
if (state) { // pausing
cancelAnimationFrame(obj.rid);
} else { // unpausing
lastTime = Date.now();
next();
}
obj.paused = state;
}
obj.clear = function() {
if (obj) cancelAnimationFrame(obj.rid);
for (var i in obj) {
delete obj[i];
}
obj.pause = function() {};
obj.clear = function() {};
}
next();
return obj;
}
`
The fix seems harmless, but not sure if this may have implications elsewhere in the code.
hi, is it possible run on an environment which has no dom and bom environment.
For example, THREE js that i just provide a context and height , width. it not dependency dom environment.
Asked by Vishwas on Slack - done. See the docs page for a link at the top http://zimjs.com/code/docs.html
Frank on Slack requested Noise support for making generative art
when some horizontal scrolling list in a vertical scrolling window .
scrolls up & down will make the masked list crazy, please help. thx.
I appreciate what this library attempts to achieve, but I can't consider it usable or recommendable for the many ways that it seems to break good programming practices. Such as:
The one feature that made me look at the library, Texture actives.. I could not get to work. Seemed like an unmaintained feature (The constructor for a TextureActives object expects a list containing just one texture active?)
Great idea! But unfortunately the implementation has me looking elsewhere.
https://zimjs.com redirects to https://zimjs.com/code.html/
that will give 404
Continuing the issue I raised from Youtube,
If the double click time is under a 300 ms then the protect aspect of the loop or rewind is not activated yet.
We have now updated our NPM to be more robust.
https://www.npmjs.com/package/zimjs
There is now a repo of templates for Vue, Svelte, React and Angular here
https://github.com/yoanhg421/zimjs-templates
Thanks @yoanhg421 for working through all this with us - as well as to those in the past for imput. It has been an ongoing issue for devs for some time. We did have solutions but they were work-arounds. Now importing and requiring ZIM should work as expected.
Carly requested a date stamp be added to the ZIM Zap files.
playing with Zim soundwave and my console's getting flooded, even with zon=false,
line 18425 missing a zon check -
zog(dataArray)
should read?
if (zon) zog(dataArray);
Enjoying the library, videos, docs etc - thanks for all your hard work.
Uncaught TypeError: Cannot read property 'trim' of undefined
at zim.js:1596
at go.loop (zim.js:10731)
at C (zim.js:1593)
at L (zim.js:1712)
at k (zim.js:1730)
at zim.js:1696
at Object.go.loop (zim.js:10732)
at c (zim.js:1694)
at zim.js:1704
at Object.go.loop (zim.js:10732)
here is my svg file:
<?xml version="1.0" encoding="UTF-8"?> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24pt" height="22pt" viewBox="0 0 24 22" version="1.1"> <defs> <g> <symbol overflow="visible" id="glyph0-0"> <path style="stroke:none;" d="M 0.984375 -16.546875 L 19.0625 -16.546875 L 19.0625 -19.09375 L 0.921875 -19.09375 L 0.921875 -16.546875 Z M 0.984375 -12.265625 L 19.0625 -12.265625 L 19.0625 -14.8125 L 0.921875 -14.8125 L 0.921875 -12.265625 Z M 0.984375 -8 L 19.0625 -8 L 19.0625 -10.546875 L 0.921875 -10.546875 L 0.921875 -8 Z M 0.984375 -3.71875 L 19.0625 -3.71875 L 19.0625 -6.265625 L 0.921875 -6.265625 L 0.921875 -3.71875 Z M 0.984375 0.546875 L 19.0625 0.546875 L 19.0625 -2 L 0.921875 -2 L 0.921875 0.546875 Z M 0.984375 4.828125 L 19.0625 4.828125 L 19.0625 2.28125 L 0.921875 2.28125 L 0.921875 4.828125 Z M 0.984375 4.828125 "/> </symbol> <symbol overflow="visible" id="glyph0-1"> <path style="stroke:none;" d="M 3 -6.9375 C 3.328125 -6.9375 3.625 -7.09375 3.84375 -7.3125 L 5.0625 -8.421875 L 5.0625 0.28125 C 5.0625 1.734375 5.984375 2.609375 7.46875 2.609375 L 20.21875 2.609375 C 21.71875 2.609375 22.625 1.734375 22.625 0.28125 L 22.625 -8.421875 L 23.84375 -7.3125 C 24.078125 -7.09375 24.375 -6.9375 24.703125 -6.9375 C 25.265625 -6.9375 25.75 -7.328125 25.75 -7.875 C 25.75 -8.203125 25.625 -8.46875 25.375 -8.703125 L 21.84375 -11.921875 L 21.84375 -17.796875 C 21.84375 -18.21875 21.515625 -18.53125 21.078125 -18.53125 L 19.5 -18.53125 C 19.0625 -18.53125 18.71875 -18.21875 18.71875 -17.796875 L 18.71875 -14.78125 L 15.265625 -17.90625 C 14.859375 -18.296875 14.34375 -18.5 13.84375 -18.5 C 13.34375 -18.5 12.828125 -18.296875 12.421875 -17.90625 L 2.328125 -8.703125 C 2.0625 -8.46875 1.9375 -8.203125 1.9375 -7.875 C 1.9375 -7.328125 2.4375 -6.9375 3 -6.9375 Z M 16.734375 -5.796875 C 16.734375 -6.265625 16.40625 -6.578125 15.953125 -6.578125 L 11.765625 -6.578125 C 11.296875 -6.578125 10.953125 -6.265625 10.953125 -5.796875 L 10.953125 0.609375 L 8 0.609375 C 7.390625 0.609375 7.09375 0.296875 7.09375 -0.3125 L 7.09375 -10.28125 L 13.578125 -16.1875 C 13.65625 -16.265625 13.734375 -16.3125 13.84375 -16.3125 C 13.953125 -16.3125 14.03125 -16.28125 14.125 -16.1875 L 20.59375 -10.28125 L 20.59375 -0.3125 C 20.59375 0.296875 20.3125 0.609375 19.703125 0.609375 L 16.734375 0.609375 Z M 16.734375 -5.796875 "/> </symbol> </g> </defs> <g id="surface1"> <g style="fill:rgb(0%,0%,0%);fill-opacity:1;"> <use xlink:href="#glyph0-1" x="-1.847656" y="19"/> </g> </g> </svg>
Asked by Frank on Slack - done in ZIM 6.6.1
hello! I have connected box2d in my project, I need the ball to move at the touch of a button. But nothing works, I've tried a lot of ways, with physics connected, nothing works except impulse and keyboard movement. But I need the ball to move when the button is pressed. Animation doesn't work either.
Hi,
i'm trying ti use zimJS in angular project..
is there any example for it?
thanks!
Can you provide an example of how a zim canvas can be mapped into a three js canvas texture?
I tried getting the canvas from the Frame and using it in THREE.CanvasTexture, but ZIM wants to take up the full screen. I want it to appear as a texture in the plane
Here's the codepen
Thanks
import zim from "https://zimjs.org/cdn/02/zim";
const z = new Frame(FILL, 256, 256, light, dark, ready);
function ready() {
F.makeIcon(null,dark)
.sca(2)
.centerReg()
F.madeWith().pos(40,40,RIGHT,BOTTOM);
} // end ready
import { } from "https://unpkg.com/three";
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// ****
const canvastexture = new THREE.CanvasTexture(z.canvas)
const geometry = new THREE.PlaneGeometry();
const material = new THREE.MeshBasicMaterial({ map: canvastexture });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
const animate = () => {
requestAnimationFrame(animate);
renderer.render(scene, camera);
};
animate();```
When I set Frame parameters tagID in version 10.5.4, it alerts "Uncaught DOMException: Failed to read the 'rules' property from 'CSSStyleSheet': Cannot access rules".
But it works well in 9.4.1 version.
Requested by Ami on Slack
Asked by Dan L on Slack - working on it...
ya...
1,window constructor parameter: scrollBarActive =false, will cause a error bug.
2,custom list item has a background rectangle with amost transparent white color(maybe "fcfcfc"), it's very hard to see ,but it looks buggy.
Requested by Ami on Slack - to be able to show the code that is being shared in ZIM ZAP http://zimjs.com/zap
I found this in Chrome experiment projects, I think it involves a lot of Math in here but no worries, I can learn little by little, however I would like to ask if this can be done in Zim.js?
Codepen: http://codepen.io/markphd/pen/PpKvMm
Original source: http://workshop.chromeexperiments.com/examples/gui/#1--Basic-Usage
We tend to deal with issues through our Slack channels at http://zimjs.com/slack. You are welcome to join! If you use ZIM, then you should join. The updates on these issues can be found here http://zimjs.com/updates.html. You can see that there is very active progress at all times - these correspond to the updates in the code here. You are still welcome to submit an issue here if you like.
Checkbox, radiobutton, picker, hotSpots have a hit rectangle shape with alpha = .01 and slightly show on some screens.
Hey this is the most awesome library for making kids apps in JS that I think EXISTS!!! Thank you!!!
I made a TexturePacker json/image spritesheet and threw the json into a JS file as an object so I could reference it easier - I have the letters of the alphabet laid out, just static for now. I wanted to pack a few other spritesheets with misc images and figure this should be pretty easy - I must be missing something! My data is here:
`var alphabetRegularResolution = {
"images": [
"alphabet-0.png"
],
"frames": [
[1, 1, 240, 241, 0, -5, -5],
[243, 1, 240, 240, 0, -5, -5],
[485, 1, 240, 240, 0, -5, -5],
[727, 1, 240, 241, 0, -5, -5],
[1, 244, 240, 240, 0, -5, -4],
[243, 244, 240, 241, 0, -5, -5],
[485, 244, 240, 241, 0, -5, -5],
[727, 244, 240, 241, 0, -5, -5],
[1, 487, 240, 241, 0, -5, -5],
[243, 487, 240, 241, 0, -5, -5],
[485, 487, 240, 241, 0, -5, -5],
[727, 487, 240, 241, 0, -5, -5],
[1, 730, 240, 241, 0, -5, -5],
[243, 730, 240, 241, 0, -5, -5],
[485, 730, 240, 241, 0, -5, -5],
[727, 730, 240, 241, 0, -5, -5],
[1, 973, 240, 241, 0, -5, -5],
[243, 973, 240, 241, 0, -5, -5],
[485, 973, 240, 241, 0, -5, -5],
[727, 973, 240, 241, 0, -5, -5],
[1, 1216, 240, 241, 0, -5, -5],
[243, 1216, 240, 241, 0, -5, -5],
[485, 1216, 240, 241, 0, -5, -5],
[727, 1216, 240, 241, 0, -5, -5],
[1, 1459, 240, 241, 0, -5, -5]
],
"animations": {
"a": { "frames": [0] },
"b": { "frames": [1] },
"c": { "frames": [2] },
"d": { "frames": [3] },
"e": { "frames": [4] },
"f": { "frames": [5] },
"g": { "frames": [6] },
"h": { "frames": [7] },
"i": { "frames": [8] },
"j": { "frames": [9] },
"k": { "frames": [10] },
"l": { "frames": [11] },
"m": { "frames": [12] },
"n": { "frames": [13] },
"o": { "frames": [14] },
"p": { "frames": [15] },
"q": { "frames": [16] },
"r": { "frames": [17] },
"s": { "frames": [18] },
"t": { "frames": [19] },
"u": { "frames": [20] },
"v": { "frames": [21] },
"w": { "frames": [22] },
"x": { "frames": [23] },
"z": { "frames": [24] }
},
"texturepacker": [
"SmartUpdateHash:
"Created with TexturePacker (https://www.codeandweb.com/texturepacker) for EaselJS"
]
}`
And I'm trying this to load it:
frame.loadAssets(["alphabet-0.png", "bg.png"], "sprites/"); frame.on("complete", function() { waiter.hide(); frame.asset("bg.png").addTo(stage); var animation = new zim.Sprite({json:alphabetRegularResolution}); zog(animation); })
Can you see what I need to do to access just the 'a'? I tried
var animation = new zim.Sprite({json:alphabetRegularResolution}, 'a');
But this is a no go in Zim. I tried using some createJS methods but couldn't get anything to show up on the stage.
Seems this must be here and I just missed how to do it! Thanks for this library - I am making a kids app for learning to read visually, for autistic and other kids who have trouble with phonics, and this is exactly the kind of thing to make the app shine.
The size is not updated !
To fix them, I think you need simply call 'setSize()', inside the 'defineProperty'..
I hope this help !
Dear Dan,
Thank you for making this incredible library and its excellent documentation!
I think I'm getting something wrong here... zim_4.1.1.js seems to run the spritesheet animation without any problems, but zim_5.2.2 seems to have problem finding the canvas, it throws up a getContext error. I am sure this is my lack of experience with js.
Thank you for this wonderful resource!
Jim
Hi, I have seen your tutorials video - ZIM CAPTURE loadAssets. and i got some problem on Chrome.
Access to XMLHttpRequest at 'file:///D:/Javascript%20project/zimJS_001/assets/people.jpg' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
createjs_1.1_min.js:29 Uncaught TypeError: Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided.
at t.e._formatImage (createjs_1.1_min.js:29)
at t.e.handleEvent (createjs_1.1_min.js:29)
at createjs_1.1_min.js:29
at t.e._dispatchEvent (createjs_1.1_min.js:29)
at t.e._dispatchEvent (createjs_1.1_min.js:29)
at t.e.dispatchEvent (createjs_1.1_min.js:29)
at t.e._handleLoad (createjs_1.1_min.js:29)
at t.e._handleReadyStateChange (createjs_1.1_min.js:29)
at XMLHttpRequest. (createjs_1.1_min.js:29)
at t.e.load (createjs_1.1_min.js:29)**
For example, may want to pretend that a new page is loading when you are really just loading the same page again. Should be able to cache the current page and write to BitMap var copy = new createjs.BitMap(page.cacheCanvas); Then animate the Bitmap out and the page in.
A free transform tool, that let the user option to scale, rotation and postion the items, with the little squares in the corners. - Ami from Slack
ZIM 6.4.0 has launched with custom font loading through frame.loadAssets(). Here is a bubbling video https://www.youtube.com/watch?v=ZEhcxxnqjn0&index=46&list=PLCIzupgRt1pYtMlYPtNTKCtztFBeOtyc0 Thanks to @ami there is a new backdropShow parameter for Pane() - see the docs. The ZIM Bits Custom Font example has been updated to 6.4.0 with the changes and I am about to go through the Pane examples and update those too. Check the updates for a description of changes http://zimjs.com/code/updates.html
this is a powerfull and a rich Canvas Wrapper we like it and we want help you improve it ..but first
it will be more scalable and maintainable library by adding a good code Structure with refactoring the main code and redesign it with sub-module concept (Frame module, Animation Module, Physics module ...)
thank u Dan for your great effort .
Hi!
As stated in the subject, can a Person-like object be made to take up more than 1 board tile? For example 4, 9 etc?
When checking Cross-browser compatibility, only IE11 doesn't appear all images correctly in the first time. But after refreshing, it appears fine.
Hi,
Im using ZimJS with tag ZIM10 in order to create a isometric world map.
This is my code:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>ZIM Frame - Fit Template</title>
<script src="https://d309knd7es5f10.cloudfront.net/createjs_1.1_min.js"></script>
<script>
var zon = true;
var zns = false;
</script>
<script src="zimjs.js"></script>
<script>
var scaling = "full"; // this will resize to fit inside the screen dimensions
var width = 1920;
var height = 1080;
var color = light; // ZIM colors like green, blue, pink, faint, clear, etc.
var outerColor = dark; // any HTML colors like "violet", "#333", etc. are fine to use
var frame = new Frame(scaling, width, height, color, outerColor);
frame.on("ready", function() {
zog("ready from ZIM Frame"); // logs in console (F12 - choose console)
var stage = frame.stage;
var stageW = frame.width;
var stageH = frame.height;
var holder = new Container();
var tile = new Tile(new Rectangle(50, 50, frame.light, frame.dark).centerReg(null, null, false), 8, 8)
.rot(45)
.addTo(holder)
.outline();
holder.sca(2, 1).center();
tile.on("mouseover", function(e) {
e.target.color = frame.pink;
stage.update();
});
tile.on("mouseout", function(e) {
e.target.color = frame.light;
stage.update();
});
var ball = new Circle(40, frame.blue, frame.dark).center().sha();
tile.on("click", function(e){
var point = tile.localToGlobal(e.target.x, e.target.y);
ball.pos(point.x, point.y);
stage.update();
});
stage.update(); // this is needed to show any changes
}); // end of ready
</script>
<meta name="viewport" content="width=device-width, user-scalable=no" />
</head>
<body>
<!-- canvas with id="myCanvas" is made by zim Frame -->
</body>
</html>
But is not centering the registration point for the tile. In the tagged version ZIM7 is working fine but in the ZIM10 does not.
Its showing like this:
view screenshoot
Can you tell me what can i do in order to get the registration point in the center of the tile?
Thanks
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.