Forum

Product Customization

24 February 2017 23:35
Hello Ivan and All

Thankyou for your last clues it really helped and now I am here with few altered tutorial codes and html

My Page is not showing the 3D object while accessing it through Project Manager

My FIles are attached hereunder

Regards

BoxWorld.rar
27 February 2017 10:43
Hi!
My Page is not showing the 3D object while accessing it through Project Manager
You forgot to initialize the application, there should be the following line at the bottom of the BoxWorld.js file:
b4w.require("BoxWorld_app").init();
Blend4Web Team
01 March 2017 11:59
Hello Ivan,

i really didnt figure it out YES it is what was missing.

Okay ,now I want to know is it possible to control the
webGL with a jQueryUI instead of JS slider as used in
the morphing example. Also what thing should be
kept in mind to do such a task.

Awaiting suggestions

Kind Regards
02 March 2017 10:48
Okay ,now I want to know is it possible to control the
webGL with a jQueryUI instead of JS slider as used in
the morphing example. Also what thing should be
kept in mind to do such a task.

Hi! Of course, it's possible. There are no specific requirements here, you just need to call the same API methods to control morphing, for example:
$("#slider").slider({
    slide: function(event, ui) {
        m_geom.set_shape_key_value(my_obj, "my_key", ui.value);
    }
});
Blend4Web Team
04 March 2017 11:38
Oh Great,

Ivan, can this function be called from another file. Sorry for this dump question as
I am not familiar with the technology.

Well , I dont want to to disturb the main js file. What I would like is create another
JS File and place all the slider constructors and the above slider controls there.

Awaiting reply

Kind Regards
06 March 2017 10:31
Well , I dont want to to disturb the main js file. What I would like is create another
JS File and place all the slider constructors and the above slider controls there.
Yes, you can write a special b4w module in another file:
"use strict";

b4w.register("sliders", function(exports, require) {

// load all needed b4w modules
var m_geom = require("geometry");

// "exports" function to be available from outside
exports.init = function() {
    // create HTML sliders

    // assign callbacks
    // $("#slider").slider({
    //     slide: function(event, ui) {
    //         m_geom.set_shape_key_value(my_obj, "my_key", ui.value);
    //     }
    // });
}
});


Then in the main file it can be used as follows:
var m_sliders = require("sliders");
m_sliders.init();
Blend4Web Team
18 March 2017 06:08
Hello Dear All,

I am stuck again with some controls have a look at my attached file and please suggest
BoxWorld.html
BoxWorld.js
constructor.js
20 March 2017 10:56
Hi! It's hard to say what's wrong without a complete project. Can you export your project via the "Export Project" button and attach it here?
Blend4Web Team
20 March 2017 22:55
Hello Ivan,

Sure man, Glad to do that
Regards

project.zip
21 March 2017 11:39
Hi! There were some issues in your project. They're related with the b4w-application loading pipeline. So, let me explain this.

At first, those HTML-elements that're used with jquery ui in the constructor.js module should be already loaded prior to the moment when the sliders.init() method is called, otherwise they won't be available. Thus, placing the "b4w.require("sliders").init();" line in the end of the main module will not work, because it's executed immediately, before the rest of the DOM-tree is loaded. The earliest moment when you should call it is in the "init_cb" method of the main module, because it guarantees that the "window.onload" event is fired:
function init_cb(canvas_elem, success) {

    if (!success) {
        console.log("b4w init failure");
        return;
    }

    m_preloader.create_preloader();

    // ignore right-click on the canvas element
    canvas_elem.oncontextmenu = function(e) {
        e.preventDefault();
        e.stopPropagation();
        return false;
    };

    m_sliders.init();

    load();
}


But if you want to control scene objects you should also wait for a moment when the scene (and its content) is loaded. This is in the "load_cb" function. So, it would be better to split the init function from the constructor.js module into two parts:

- the one, which is called in "init_cb" (and can work with the fully loaded DOM content), just draws the interface:
    exports.init = function() {
        $("#accordion").accordion({
            active: false,
            collapsible: true,
            heightStyle: "fill"
        });

        $("#length").slider({
            range: "max",
            min: 0,
            max: 1,
            step: .001
        });

        $("#width").slider({
            range: "max",
            min: 0,
            max: 1,
            step: .001
        });

        $("#height").slider({
            range: "max",
            min: 0,
            max: 1,
            step: .001
        });
    }


- and the other one, which is called in "load_cb" (hence, it can work with the scene objects), assigns the "slide" callbacks:
    exports.set_callbacks = function() {
        var obj_Cube = m_scenes.get_object_by_name("Cube");
        var obj_Lid = m_scenes.get_object_by_name("Lid");
        m_trans.get_translation(obj_Lid, lid_pos);

        $("#length").slider("option", "slide", function(event, ui) {
            m_geom.set_shape_key_value(obj_Cube, "Width", ui.value);
            m_geom.set_shape_key_value(obj_Lid, "Width", ui.value);
        });

        $("#width").slider("option", "slide", function(event, ui) {
            m_geom.set_shape_key_value(obj_Cube, "Breath", ui.value);
            m_geom.set_shape_key_value(obj_Lid, "Breath", ui.value);
        });

        $("#height").slider("option", "slide", function(event, ui) {
            m_geom.set_shape_key_value(obj_Cube, "Height", ui.value);
            m_trans.set_translation(obj_Lid, lid_pos[0], lid_pos[1], lid_pos[2] + ui.value);
        });
    }


Here's the fixed files: BoxWorld.js, constructor.js, they should work without problems .
Blend4Web Team
 
Please register or log in to leave a reply.