Forum

Add Color Picker - JS issue -Newbie

16 March 2018 20:47
Hi

First many thanks to the developpers who work on B4W.
I try to manage a very simple viewer with a color picker, and facing a JS issue. I confess I'm a complete newbie .
I succeeded in applying the palitra example to set a color.
link ( Kirill post / palitra )

What I would like is to use a Farbtastic Jquery color picker instead of html embed.

Mike_farbtastic.PNG

HTML

<html>
<head>
<title>Mike</title>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width" />

<link rel="stylesheet" href="Mike.css" type="text/css" />
<link rel="stylesheet" href="farbtastic.css" type="text/css" />

<script type="text/javascript" src="b4w.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
<script type="text/javascript" src="Mike_farbtastic.js"></script>
<script type="text/javascript" src="farbtastic.js"></script>
 <script type="text/javascript" charset="utf-8">
  $(document).ready(function() {
    $('#picker').farbtastic('#color');
  });
 </script>
</head>
<body>
<form action="" style="position:absolute;z-index:1; color: white;">
  <div class="form-item"><label for="color">Color:</label><input type="text" id="color" name="color" value="#123456" /></div><div id="picker"></div>
</form>
<div id="main_canvas_container"></div>
</body>
</html>


JS

"use strict"

// register the application module
b4w.register("Mike", function(exports, require) {

// import modules used by the app
var m_app       = require("app");
var m_data      = require("data");
var m_objects   = require("objects");
var m_scenes    = require("scenes");

/**
 * 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: false,
        console_verbose: true,
        autoresize: true
    });
}

/**
 * callback executed when the app is initialized 
 */
function init_cb(canvas_elem, success) {

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

    load();
}

/**
 * load the scene data
 */
function load() {
    m_data.load("Mike.json", load_cb);
}

/**
 * callback executed when the scene is loaded
 */
function load_cb(data_id) {
/** m_app.enable_controls();
*/
    m_app.enable_camera_controls();

    // place your code here
    var m_mat = require("material")
    var obj = m_scenes.get_object_by_name('Cube');
    var nodes = new Array('Mat', 'RGB1');

    //changer la couleur dans le noeud RGB
    $('#color').change(function(){
        var rgb = hexToRgb($(this).val());
        $('#color').text(rgb.r+', '+rgb.g+', '+rgb.b);
        m_mat.set_nodemat_rgb(obj, nodes, rgb.r, rgb.g, rgb.b);
    });

       m_mat.set_nodemat_rgb(obj, ['Mat', 'RGB1'], 0.004, 0.21, 0.000594);

/**     m_mat.set_nodemat_value(m_scenes.get_object_by_name("Cube"), ['Mat', 'RGB1'], 0, 0, 0));
*/

}

function hexToRgb(hex) {
    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    return result ? {
        r: parseInt(result[1], 16)/255,
        g: parseInt(result[2], 16)/255,
        b: parseInt(result[3], 16)/255
    } : null;
}


});

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


I guess problem is around here with variable or callback not well defined, but I cannot figure it out :

    //changer la couleur dans le noeud RGB
    $('#color').change(function(){
        var rgb = hexToRgb($(this).val());
        $('#color').text(rgb.r+', '+rgb.g+', '+rgb.b);
        m_mat.set_nodemat_rgb(obj, nodes, rgb.r, rgb.g, rgb.b);
    });

       m_mat.set_nodemat_rgb(obj, ['Mat', 'RGB1'], 0.004, 0.21, 0.000594);


Any help would be MUCH appreciated.
Regards.
Fabrice
19 March 2018 12:38
Hello! And welcome to our forum!
Does the console show anything (F12)?
Alexander (Blend4Web Team)
twitter
19 March 2018 14:56
Hello Alexander,

The console is showing exactly the same messages than my "Mike_palitra" example with a "embed input=color" which is working correctly…

No particular clue on the console…



Fabrice
19 March 2018 16:00
This is not a Blend4Web issue.
I've attached a project with correct callback registering. Note how to set this callback:
 $('#picker').farbtastic(function () {...})


Next time, please, attach your sources using export project functionality, or if you are not using Project Manager, pack all stuff required for running your app. It will save my and your time.
Alexander (Blend4Web Team)
twitter
19 March 2018 19:29
Alexander,

Sorry I've not packed my project, I'm a bit new to your processes.
I've taken your project and rebuild it with my model, a little bit of "kludge", renaming my model cube and giving logo a transparent PNG.
I still don't understand everything, how the link is done between the 3dmodel and the color picker javascript but anyway…

Everything works fine !!!
Attached my project.
I've still a lot to learn with blend4web…

Thank you very much Alexander.
Fabrice
 
Please register or log in to leave a reply.