ML5 updated their version to 1.2.2. This seems to break our example code and probably your code if you based it on our examples. We had used ml5@1in our script call. This means that it takes the latest subversion of 1. We have now updated our examples to go back to 1.2.1 specifically and it works again. So use:
https://unpkg.com/ml5@1.2.1/dist/ml5.min.js
We will put in a question on their github to see what we need to make things work with the latest version.
I tried it to 1.2.1 but still not working
test my zapp
thanks to check and fix
works for me - probably a cache issue.
We got an answer in the ML5 GitHub.
They have moved to async await which in my mind sucks - would rather not teach beginners about it. Here is a solution where the ready event needs to be called with async and then there is no need for a modelLoaded callback if await is used for the handPose(). So here is a the adjusted code.
We might adjust all the code examples that way... and go back to the latest version. I think there may even be a version 2 of ML5. So will look into it over the next few days. We may be able to make a helper function in ZIM Cam that will go back to the callback way. Will give it some thought.
cam.on("ready", async ()=>{
// code here
cam.scaleTo().center().alp(.5);
const circleLeft = new Circle(20,green);
const circleRight = new Circle(20,blue);
// const handPose = ml5.handPose(modelLoaded);
const handPose = await ml5.handPose();
// function modelLoaded() {
handPose.detectStart(cam.getCanvas(), result);
function result(results) {
// results looks like this and may have two entries [{},{}]
// [{
// confidence:.9,
// handedness: "left",
// index_finger_tip:{x:100,y:100},
// keypoints:[{x:100,y:100,name:"wrist"}]
// }]
// zog(results)
circleLeft.removeFrom();
circleRight.removeFrom();
if (!toggle.toggled) return;
if (!results[0]) return;
loop(results, r=>{
// https://docs.ml5js.org/assets/handpose-keypoints-map.png
if (r.handedness=="Left") {
circleLeft.loc(r.index_finger_tip.x*cam.scale+cam.x, r.index_finger_tip.y*cam.scale+cam.y);
} else if (r.handedness=="Right") {
circleRight.loc(r.index_finger_tip.x*cam.scale+cam.x, r.index_finger_tip.y*cam.scale+cam.y);
}
})
}
// }
template.top();
new CamAlpha(cam).pos(30,30,LEFT,BOTTOM);
const toggle = new Toggle({startToggled:true}).sca(.7).pos(40,40,RIGHT,BOTTOM);
});
yes now my zapp works again,
but is it solved without using .2.1 also now?
good idea to add the ml5 into the module of cam
await ml5.handPose();
I found the "async/await" conversation at https://github.com/ml5js/ml5-next-gen/issues/244
so you did not add await but the older version to yor examples @1.2.1
so there will be a version @2 soon?
Our code above shows async in the arrow function and await before the method call. This means we can remove the callback as we did - note the start of the function and the end of the function have been commented out. So you can do this to your code. Or go to the older version of ml5. In the future we will look at how ZIM might provide a wrapper function to use the callback - but then it would differ from the ML5 docs - so we will see. We will also check things for ML5 version 2.
Once we decide (when we decide) then we may adjust our examples. For now, you do what you want to do. Let's leave it at that.
