Forum

User posts Wgallo
10 March 2018 21:23
I thought i could maybe use "Page Redirect" "url" node to direct the user to find a local file in the hard drive.
Just to clarify: what i would really like is to have a cylinder or sphere clicked in the scene that would launch a file browser…but any solution below could help, as long as it allows me to place it "in front of the scene" (the <input…in html was getting behind the scene(disappearing once the scene loads)…

1) As asked before, my goal is to have the viewer to click a button or an object in the scene and the file browser will open so they can load a picture of a certain size in the background.

Would it be nice if I could just use the logic nodes for that? Well I HAD THE IDEA TO USE PAGE REDIRECT file:///localHost…or
file:///c: It would do the trick if it was to work….
I tried with the page redirect url node and it didnt work.
Alexander gave me <input file type…. which does not load in front of the scene (pardon my coding ignorance please)….any suggestions?? also I want to try the code snippet for custom anchors using the generic type….but that sounds complicated. But i will try anyway. Please let me know…..
Cant say enough thanks to everyone………

2) what can I do if i want to add a button that will print(copy) the objects in the scene to a separate browser, or .pdf pre formatted form? in other words I would like to output/export the objects to an external formatted page…? obviously im working on acquiring B4W for that. Any suggestions?
09 March 2018 01:13
ALL GOOD, THANKS TO YOU!!!! I dont think american companies get to the level of attention and dedication of technical support that you guys give!! Alexander Romanov Rocks!!!! The product is awesome and the service you provide as well!!! I wouldnt be able to finish it if it wasnt for you!! Actually Im not finished, but Im close to the end. Keep up the fantastic service and attention you guys from Moscow give to the rest of the world!!
08 March 2018 03:56
Man…you are awesome!! i just now got to it…let me see what I can do…i will follow your instructions and will let you know what happens..
07 March 2018 17:10
Ok. Here we go. They are attached. Thank you so much again.
06 March 2018 23:25
…….
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?
06 March 2018 05:19
By the way, "JUST-HEAD-SPINE.001" its the name of the center object in the scene that i did shape keys utilized by the sliders in the code. I will be checking every hour over here if you need anything.
06 March 2018 05:16
Alexander, I apologize for being so persistent. I need to get this right. I can pay you for your time and I think i wd feel better in that case. I decided to do this differently.
Here is the code with the sliders that loads properly without issues:
"use strict"

import b4w from "blend4web";

var m_app       = b4w.app;
var m_data      = b4w.data;
var m_scenes    = b4w.scenes;
var m_geom      = b4w.geometry;
var m_cfg       = b4w.config;
var m_obj       = b4w.objects;
var m_version   = b4w.version;

var DEBUG = (m_version.type() === "DEBUG");

var APP_ASSETS_PATH = m_cfg.get_assets_path("01-29-JOINEDKEYS");

export function init() {
    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
    });
}

function init_cb(canvas_elem, success) {

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

function load() {
    m_data.load(APP_ASSETS_PATH + "morphing.json", load_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);
}

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;
}

init();


And this is the code that loads correctly with the logic nodes only:
"use strict"

// register the application module
b4w.register("01PIA-PROJECT_main", function(exports, require) {

// import modules used by the app
var m_app       = require("app");
var m_cfg       = require("config");
var m_data      = require("data");
var m_preloader = require("preloader");
var m_ver       = require("version");

// detect application mode
var DEBUG = (m_ver.type() == "DEBUG");

// automatically detect assets path
var APP_ASSETS_PATH = m_cfg.get_assets_path("01PIA-PROJECT");

/**
 * 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: DEBUG,
        console_verbose: DEBUG,
        autoresize: 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 + "01PIA-PROJECT.json", load_cb, preloader_cb);
}

/**
 * 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

}


});

// import the app module and start the app by calling the init method
b4w.require("01PIA-PROJECT_main").init();


IM SO SORRY AND i feel really bad for bugging so much. I need a way that when the project with the logic nodes load, sees the sliders I did for it and loads it as well. They both work. I know I still have a lot of tune-ups to do on it, but first I need to get it to load to start working on them. I work exhaustively today on this and it is beyond my current knowledge of javascript. Please tell me how much and I can pay for your time if you want. This is really worth for me. Thank you again!! and again…
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 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.