Forum

[SOLVED] Create Web UI to control Blend4Web

18 April 2016 18:29
Is is possible to use html buttons to control the blen4web scene?
For example, I want to show different versions of a product. When button 1 is clicked, product 1 shows. When button 2 is clicked, product 1 hides and product 2 appears… and so on.

I can configure this from within the b4w presentation 3d window but I want to use controls on the web page instead.

If we get a web designer to make a full webpage, is it possible to use part of that design (buttons) to control the blend4web presentation?
I have attached a crude drawing to explain the functionality I have described.

Thanks

Danny Austin,Technical Manager
PIX Set Visions
18 April 2016 18:36
Hi Danny,

Please take a look at this demo & tutorials
The UI buttons there are actually HTML elements.

See also this tutorial on web page integration (you'll need method 3).

Hope this helps!
The Founder | Twitter | Facebook | Linkedin
18 April 2016 18:53
Fantastic!! I'd been looking at this particular demo but hadn't realized the controls were in HTML.
Great information.

Thanks Yuri!

Danny
Danny Austin,Technical Manager
PIX Set Visions
01 July 2016 13:40
Hi Yuri,

I'm still trying to achieve this HTML integration for Blend4Web. My main issue is that I have very little web programming experience.
So far I have tracked down the buttons in the code but I can't figure out how the send a message to b4w. I know it's a big ask but is there a step by step guide on how to do this?

For my example I want to use a HTML button to change the material of an object. I have achieved this within the b4w interface using the logic editor currently.

Many Thanks
Danny
Danny Austin,Technical Manager
PIX Set Visions
03 July 2016 23:28
Hello. There are différent ways to do that. At the moment if you want to use logici tree you could use a use entry point js function. I use one in the project in host on my github. Check out my last topic in the forum
30 August 2018 20:03
I also have similar issues with html/css buttons integration with blend4web.
I've successfully added html buttons, but I can't get to figure out how to hide objects when a html button is clicked. I've added

Var cube=m_scenes.get_object_by_name("cube");
function hide_object(obj) {
m-scenes.hide_object(cube);}

Then i set my "hide_object" function as the onclick function in the html button

Maybe my code is wrong, or something is missing. I need some corrective advice.

Thanks.
30 August 2018 20:54
I've added
Var cube=m_scenes.get_object_by_name("cube");
function hide_object(obj) {
m-scenes.hide_object(cube);}
Well, to begin with, Var must not be spelled with a capital V.

Maybe you could post the console output or (better yet) attach the project.
31 August 2018 13:53
Alright, here's the script that runs the project


"use strict"

// register the application module
b4w.register("Virtual Room_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");
var m_scenes    = require("scenes");
var m_input    = require ("input");
    


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

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

/**
 * 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 + "Virtual Room.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

}
document.getElementById("hideCube").innerHTML = HideCube;
hideCube.addEventListener("click", hide_object);
var cube = m_scenes.get_object_by_name("Cube");
function hide_object(obj){
    m_scenes.hide_object(cube); 
}
});

// import the app module and start the app by calling the init method
b4w.require("Virtual Room_main").init();
31 August 2018 19:08
document.getElementById("hideCube").addEventListener("click", hide_object);
 
Please register or log in to leave a reply.