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
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 ManagerYou forgot to initialize the application, there should be the following line at the bottom of the BoxWorld.js file:
b4w.require("BoxWorld_app").init();
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
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);
}
});
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
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 anotherYes, you can write a special b4w module in another file:
JS File and place all the slider constructors and the above slider controls there.
"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();
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
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?
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:
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:
- and the other one, which is called in "load_cb" (hence, it can work with the scene objects), assigns the "slide" callbacks:
Here's the fixed files: BoxWorld.js, constructor.js, they should work without problems![]( "smiling-sunglasses")
.
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
.