This is in WebAR, using an iPhone. If a user turns their phone on its side, we potentially need to reposition and scale elements to fit them to the new shape of our canvas. So it makes sense that we’d use an Accelerator node’s events to trigger a state shift, and possibly use any aspect ratio we’ve found out to tidy up positioning.
But Zap seems to trigger an orientation change before the phone has decided to reorient things. See video for what I mean: as I turn the phone slowly, Zap decides the phone is far enough over to go into “landscape” mode way before the phone has - https://youtu.be/go6JJwG0s38. So there’s no point repositioning stuff when those orientation events get fired off as the browser hasn’t yet decided to reconfigure itself.
I’ve worked round this for now by setting up handlers for the accelerometer that just note what orientation is being reported (portrait / landscape / land_inverted etc) but don’t actually trigger the state. Then you can use a Z.screen.on(“resize”… to actually trigger the state change:
var curr_orient = 0;
var curr_height = 100;
var curr_width = 100;
var aspect_ratio = 1.0;
parent.on("landscape", () => {
// Runs when landscape occurs on the parent node
// check aspect ratio
curr_orient = 0;
});
parent.on("portrait", () => {
// Runs when portrait occurs on the parent node
curr_orient = 1;
});
parent.on("landscapeinverted", () => {
// Runs when landscapeinverted occurs on the parent node
curr_orient = 2;
});
parent.on("portraitinverted", () => {
// Runs when portraitinverted occurs on the parent node
curr_orient = 3;
});
Z.screen.on("resize",(height,width)=>{
curr_height = height;
curr_width = width;
aspect_ratio = height/width;
do_resize();
});
function do_resize() {
switch(curr_orient) {
case 0: symbol.controllers.orientation.elements.landscape.activate();
break;
case 1: symbol.controllers.orientation.elements.portrait.activate();
break;
case 2: symbol.controllers.orientation.elements.lanscape_inv.activate();
break;
case 3: symbol.controllers.orientation.elements.portrait_inv.activate();
break;
}
}
This seems like a long way round, but it seems like the safest approach for now (particularly if you want to use a device’s aspect ratio to position things nicely).