Forum

User posts Charlie
11 July 2017 16:39
I've made a small screen capture video, to show you the processes I'm going through. Maybe it will be easier to see what I'm doing wrong (apologies for the compression, I don't know how to get HD on youtube yet).

https://youtu.be/GRa-r9bWC8I

Let me know if I'm making some horrible mistake.

Thanks again
11 July 2017 15:08
Hey Will, thanks for your help in recent days.

This is the video I was referring to in my post (I actually watched it, on you're previous recommendation).

He uses pretty much the same method that I followed, although he uses in and out perams on the Callback node, whereas I don't need them.

The only other thing I've noticed, that's different from various examples, is my js registers my b4w as 'myScene_main', where others seem to say 'myScene_App'.

Here's my JS. Let me know what you think:

"use strict"

// register the application module
b4w.register("my_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");


// MY REQUIRE
var m_logic_n   = require("logic_nodes");
// MY REQUIRE



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

// automatically detect assets path
var APP_ASSETS_PATH = m_cfg.get_assets_path("my_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;
    };
    
    
    
// MY CUSTOM CALLBACK - THIS IS WHERE THE MAIN ERROR IS BEING CALLED. 'change' IS  THE VARIABLE ID ON MY NODE 
// NOT SURE IF IT'S A PROBLEM WITH MY BRACES OR SEMI COLONS 

m_logic_n.append_custom_callback("change", change_cb);
 



    load();
}

/**
 * load the scene data
 */
function load() {
    m_data.load(APP_ASSETS_PATH + "my_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

// MY CUSTOM FUNCTION 
    function change_cb(in_params, out_params) {
        document.getElementById("OverlayOne").style.display = "block";
// MY CUSTOM FUNCTION
    }
    
    
}


});

// import the app module and start the app by calling the init method
b4w.require("my_project_main").init();
11 July 2017 03:58
High all,

I've pretty much followed this workflow to-the-tee (the node based approach):

link

as well as a youtube video that deals with similar functionality.

Strange problem…

After adding my code to the JS; which includes:

requiring logic nodes
append_custom_callback
and adding my custom function

I've checked, double checked and triple checked that I've put the code in the right place and I've compiled as 'copy' AND 'compile' (just to investigate), but when I run the app from the Project Manager, I get a load fail.

I've opened the console window and the error reported is: "Can't find variable: change_cb", which is the name specified in my custom code, for example:

m_logic_n.append_custom_callback("change", change_cb);


I don't know if it's pertinent, but the object in the scene is also 'unselectable', and the outline function isn't working.

Pulling my hair out with this one.

As usual, any help would be sincerely appreciated.

Thanks in advance

Charlie
11 July 2017 03:48
Gotcha, thanks.

I've been spending hours with B4W, and it's starting to get slightly clearer… The 'compile method', is a little confusing but thanks to your help I now understand it.

The only other thing I'm finding tough is JS. I've come from LUA, so it's not totally alien, but it's still a steep learning curve.
10 July 2017 22:53
OK, I think I've made a little progress, but I'm still missing something easy.

I've since learned that I can only access the starter files if I build as a 'compile' or 'copy'. So that's one problem sorted.

So, I tried to build the file (I thought 'what the hell'). I can run the dev file from project manager, but not not the build.

Also, if I run the html file from 'projects', it works fine, but if I move it to any other location, it doesn't work, so it's obviously losing some dependancies.

So I'm assuming that I have to do my development work (edit starter files / add custom scripts etc), and THEN deploy?

As you can see, I'm getting myself pretty confused over something simple.
10 July 2017 22:40
Hi all,

Struggling with something simple.

I've been asking questions in the big boy forum and making some good progress, but I'm going to have to demote myself back to the noob forum for this one.

I want to experiment with JS callback node, and 'append_custom_callback' function, so I can execute a js function on a linked URL.

I've set the scene up, with the nodes in place (entry point, switch select and JS callback). As I'm just executing a script that's external of the scene, I'm not populating the in/out param's. I've just speculatively created the cb ID, so I can write the code later (I presume this is normal workflow, but I could be wrong).

So, after preparing the scene, I've gone through the normal build and deploy process:

New project, load starter files, targeting the JSON player (not 'copy' or 'compile').

I've re-saved the blend file and re-exported the JSON, and everything works so far. I've deployed it and got it to work in it's new directory, but how do I create and associate the js file that's associated with my project?

Do I have to generate it myself?

I thought it was because I deployed to JSON and not HTML at first, but deploying to HTML just gives me a huge HTML file.

I'm a bit perplexed about this, and I'm obviously missing something stupid. Any help would be greatly appreciated.
08 July 2017 15:02
Hey guys,

I'm trying to optimise my workflow and future-proof my app (it's a product configurator), by having it as 'dynamic' as possible… Just keeping the models and lighting in the scene, whilst controlling the inherit materials from an external HTML/JS UI.

So this is what I'm trying to achieve:

Let's say I have a chair in my scene…

On clicking the chair, I'd like it's various texture options to appear in a HTML/JS menu that's external to the scene (I have another question on here that relates directly to that, so don't worry about answering it here) on the same local page HTML page.

Using the external menu, I'd like to assign a material from another blend file (allowing me to keep the active scene very lightweight - If I have 300 chair-scenes, I don't want to edit and republish all of them).

So, my external menu button might have some code like this:

document.getElementById("add-red-leather-button").addEventListener("click", function(e) {
if (_selected_obj)
inherit–material–from–external–blend–goes–here;

I just have no idea where to start. I'm pretty new to the concept of JSON too, from what I can gather, it works like old school XML, as a way of indexing arrays and variables, so if I need to include this, then how?

Like I mentioned in my other question, if you know how you would achieve this kind of action, please try to explain it, like you would to a child, I'm still catching up.

Thanks very much guys
08 July 2017 14:47
HI All,

I'm still pretty new to all of this, so please excuse my question if it sounds a bit dumb.

I'll be posting 3 questions to help me with my workflow. Here's the first:

Fundamentally, I'd like to know how to send a command (by using JS, or passing it in a URL with a parameter) to the local HTML file.

Here's an example of the scenario…

My canvas is being displayed on a HTML page (let's make it interesting by having it appear in an iFrame).

There's another iFrame next to it showing a HTML source.

So, my objective is to change the iFrame source URL when I click on an object in the scene.

I have no idea how to set this up… I'm presuming we'd start with logic nodes, but maybe a custom JS.

If you know how to do this, please explain it to me, like you would a 10 year old (I'm very new to B4W and JS)

So, what code do I need? How do I structure it? How do I execute it? And how do I bridge between the scene and the local HTML file?

Any pointers would be really useful. Thanks in advance.

All the best
29 June 2017 11:30
Thank you so much guys, I really appreciate it.
29 June 2017 00:38
Hey everyone, nice to meet you.

After looking for various methods to deploy a client's idea, I found B4W last Thursday. I'm really glad I did as it represents a much shallower learning curve than Unity.

My client wants to create a product configurator for office furniture and asked me to explore the possibilities.

I found the 'product template' online which looks pretty decent, although I didn't really have time to learn another SDK, so I made a rudimentary proof-of-concept, based on the 'ring tutorial'.

Here's my first effort (be gentle)

link

So, he seems pretty happy that I can achieve something close to his requirements, but he's now asking me if I can use a webform (hosted on his site) to post variables (like RGB values or texture node options) to something akin to a config file, so when the web player opens up, it displays 'those' variables instead of the defaults.

I'm thinking I might be able to get close using a JS entry point, but I've only been working with B4W for a couple of days, and delivering something useable is quite time-sensitive.

So I wondered if you guys might be able to point me to a resource or set of pertinent tutorials, that will get me going in the right direction.

Thanks in advance

Charlie