Forum

edited..Could anyone tell me what I am missing in the code?

04 March 2018 19:20
The sliders are not launching in the browser, but the logic nodes are. Please thats all I need to finish this. Four months working on it.
Alexander, it all comes down to this. I have one project loading correctly all the sliders, and one loading correctly all the logic nodes, but i go to the code and modify, and modify, and there is no way to get it to work all together.
So i need help. Below is what I have to get it right. Since one object in the scene has sliders(javascript) and logic nodes simultaneously I added a JS callback to that logic node. And thats it. Im not sure what else to do, but wait for you to put your golden fingers to work. Thank you so much for anything.

how do i get all the logic nodes i did to launch with the sliders??
they dont even work in the same object…

"use strict"

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

// import modules used by the app
var m_app       = b4w.app;
var m_cfg       = b4w.config;
var m_data      = b4w.data;
var m_preloader = b4w.preloader;
var m_ver       = b4w.version;
var m_scenes    = b4w.scenes;
var m_obj       = b4w.objects;
var m_cont      = b4w.container;
   
// detect application mode
var DEBUG = (m_ver.type() == "DEBUG");

// automatically detect assets path
var APP_ASSETS_PATH = m_cfg.get_assets_path("ARETRY");

/**
 * export the method to initialize the app (called at the bottom of this file)
 */
exports.init = function() {
    m_app.init({
        canvas_container_id: "main_canvas_container",
        callback: init_cb,
        show_fps: true,
        autoresize: true,
        assets_dds_available: !DEBUG,
        assets_min50_available: !DEBUG,
        console_verbose: true
    });
}

/**
 * callback executed when the app is initialized 
 */
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;
    };

    load();
}

/**
 * load the scene data
 */
function load() {
    m_data.load(APP_ASSETS_PATH + "ARETRY.json", load_cb, preloader_cb);
}
    
function load_cb(data_id) {
    var main_interface_container = document.createElement("div");
    main_interface_container.className = "main_sliders_container";
    main_interface_container.setAttribute("id", "main_sliders_container");
    document.body.appendChild(main_interface_container);
    m_app.enable_camera_controls(false, false, false, null, true);
    var obj = m_scenes.get_object_by_name("JUST-HEAD-SPINE.001");
    if (obj)
        create_interface(obj);
}
/**
 * update the app's preloader
 */
function preloader_cb(percentage) {
    m_preloader.update_preloader(percentage);
}

/**
 * callback executed when the scene data is loaded
 */
function load_cb(data_id, success) {

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

    m_app.enable_camera_controls();

    // place your code here


function create_interface(obj) {
    if (!m_geom.check_shape_keys(obj))
        return;
    create_dual_slider(obj, "fatten", "shrink", "Weight");
    var shape_keys_names = m_geom.get_shape_keys_names(obj);
    for (var i  = 0; i < shape_keys_names.length; i++) {
        if (shape_keys_names[i] == "fatten" || shape_keys_names[i] == "shrink")
            continue;
        create_slider(obj, shape_keys_names[i], shape_keys_names[i]);
    }
}

function create_slider(obj, key_name, slider_name) {
    var slider = init_slider(slider_name);
    var value_label = document.getElementById(slider_name);
    var value = m_geom.get_shape_key_value(obj, key_name);

    slider.min = 0;
    slider.max = 1;
    slider.step = 0.02;
    slider.value = value;
    value_label.textContent = slider.value;

    function slider_changed(e) {
        m_geom.set_shape_key_value(obj, key_name, slider.value);
        m_obj.update_boundings(obj);
        value_label.textContent = slider.value;
    }

    if (is_ie11())
        slider.onchange = slider_changed;
    else
        slider.oninput = slider_changed;
}

function create_dual_slider(obj, key_name_1, key_name_2, slider_name) {
 
    var slider = init_slider(slider_name);
    var value_label = document.getElementById(slider_name);
    var value = m_geom.get_shape_key_value(obj, key_name_1) 
            - m_geom.get_shape_key_value(obj, key_name_2)

    slider.min = -1;
    slider.max = 1;
    slider.step = 0.02;
    slider.value = value;
    value_label.textContent = Math.floor(slider.value*100)/100;

    function slider_changed(e) {
        if (slider.value < 0) {
            var key_name = key_name_2;
            var reset_name = key_name_1;
            var value = -slider.value;
        } else {
            var key_name = key_name_1;
            var reset_name = key_name_2;
            var value = slider.value;
        }
        m_geom.set_shape_key_value(obj, key_name, value);
        if (m_geom.get_shape_key_value(obj, reset_name))
            m_geom.set_shape_key_value(obj, reset_name, 0);
        value_label.textContent = slider.value;
    }

    if (is_ie11())
        slider.onchange = slider_changed;
    else
        slider.oninput = slider_changed;
}

function init_slider(name) {
    var container = document.createElement("div");
    container.className = "slider_container";

    var name_label = document.createElement("label");
    name_label.className = "text_label";
    name_label.textContent = name;

    var slider = document.createElement("input");
    slider.className = "input_slider";
    slider.setAttribute("type", "range");

    var value_label = document.createElement("label");
    value_label.className = "value_label";
    value_label.setAttribute("id", name);

    container.appendChild(name_label);
    container.appendChild(slider);
    container.appendChild(value_label);

    var main_slider_container = document.getElementById("main_sliders_container");
    main_slider_container.appendChild(container);

    return slider;
}

function is_ie11() {
    return !(window.ActiveXObject) && "ActiveXObject" in window;
}

}

});

// import the app module and start the app by calling the init method
b4w.require("ARETRY_main").init();


Thank you so much for helping….by the way, it is crucial i get this done! I m willing to pay for anyone's time to have this to load as it should, logic nodes & javascript. Ive been toall the possible tutorials this past weekend. I need to finish this since i got this far. Thank you again.
05 March 2018 16:47
Ive been reading an article. I will try to add an entry point and check off "run from javascript" and following that a js callback node specifying an id and copy that id to the create slider function??
05 March 2018 22:12
I have one project loading correctly all the sliders, and one loading correctly all the logic nodes, but i go to the code and modify, and modify, and there is no way to get it to work all together.
Could you give more details about what do you have and what do you want to acheive? Projects' sources could help very much.
What logic nodes do in the first project?
What sliders do in the second?
What should happen when you merge them?

It is difficult to help you because I have no sources of yor logic node script and information mentioned above.
Alexander (Blend4Web Team)
twitter
05 March 2018 23:40
Oh….sorry….
As simple as i can be:
The logic nodes i setup move the objects in the center up and down and side ways.
The sliders i setup control ANOTHER object in the center by every time i move either one i get different motion in the object.
Basically sliders are directed to control A and logic nodes to control B. But i need both to launch together in the screen and i dont know how to tie them up.
By the way this is going to help a lot of disable people. Im in healthcare and i will buy B4W to publish as soon as i get this done.
So basically i know i have to setup a js cb logic node for the sliders (create an id) and then add before the scene load in the code. The sliders are obviously javascript (function create slider). They launch andbwork really good, but so far i didnt get to put together with the logic nodes i did (and u helped me, so thank you so much!).

I guess what i need above is to place things where they are suppose to be. I think in the code above things are out of place.
06 March 2018 01:08
Logic nodes and the javascript sliders dont act in the same objects of the scene. Logic nodes do something to certain objects, and the sliders do to other objects.
I just want them to launch together in the scene.
Thank you again, Alexander.
06 March 2018 01:13
All the code for the sliders necessary to laumch is there. And logic nodes as well. Want me to add pictures of the editor?
Im sorry if i keep bugging you. I love B4W. !!
06 March 2018 17:36
Please help….what if i a link for the sliders js is added to the html to laucn along with the logic nodes?
07 March 2018 01:25
I've created the project which can help you, I guess. See attachment. Just import it using Project Manager.
My steps:
1) the javascript code of project with sliders is keept unmodified (it was created from codesnippets with "Make Project" button)
2) I've created a blend file with logic nodes (lnodes.blend). It works as pure logic nodes project
3) I've opened morph.blend and linked B4WLogicNodeTree and Cube from lnodes.blend
4) I've enabled Logic Editor and selected B4WLogicNodeTree in Active Node Tree field
5) reexported json
6) run the project and checked that all works
Alexander (Blend4Web Team)
twitter
 
Please register or log in to leave a reply.