Forum

Several canvas on same page

10 November 2016 12:50 #13695
Hi,

I want to use b4w together with impress.js for doing presentation of scientific data. With b4w I can zoom in, show details that can help to keep attention from the audience .

So I need to have different canvas in the same page with the possibility to rotate, pan and zoom 3D data. I have used a previous post (#7027) and everything is running well. Except that I can rotate, pan and zoom only on the canvas that is on last slide. If the canvas is not on the last slide, I can do nothing.

Firstly I though that it could be a problem with impress.js that handles the same event but I am new in javascript and I don't know from where to start..

Here is my code:

"use strict"

// register the application module
b4w.register("Show_3D", function(exports, require) {

// import modules used by the app
var bckg = require("config");
var app = require("app");
var data = require("data");
    
var _previous_selected_obj = null;
    
bckg.set("background_color", new Float32Array([0.8, 0.8, 0.8, 1.0]));
bckg.set("alpha", false);

    
/**
 * export the method to initialize the app (called at the bottom of this file)
 */
exports.init = function(id , File) {
    app.init({
        canvas_container_id: id,
	physics_enabled: false,
	console_verbose: true,
        callback: load_cb(id , File),
        autoresize: true
    });
}

    
function load_cb(id, File) {
    data.load(File, loaded_cb);
}

function loaded_cb() {
    app.enable_camera_controls();
}

});

b4w.require("Show_3D", "inst_0").init("Canvas_1" , "File_1.json");
b4w.require("Show_3D", "inst_1").init("Canvas_2" , "File_2.json");
b4w.require("Show_3D", "inst_2").init("Canvas_3" , "File_3.json");


Does anyone can help? Thanks

Pascal
10 November 2016 19:32 #13727
Finally, it is really a problem of event handling. Both b4w and impress.js are listening to mouse event and there is conflict in the triggered action.

But it works if one is using keyboard. Indeed rotation pan and zoom can be done using 'a', 's', 'w' … keys and impress.js does not care about them. So I think the problem is more concern with impress.js. I will have a look if it is possible to stop mouse event listening when mouse is in b4w canvas.

Hope this can be usefull to someone.

Cheers

Pascal
 
Please register or log in to leave a reply.