How do I change the color using an external color picker for Babylon.js?

Question

I recently have a project to be working with Babylon.js and instead of using Colorpicker GUI, I must use an external color picker. In this case I'm using http://jscolor.com/. Here's my partial code (I'm only showing my small code, because of a strict post rule. Tell me if you still need more detailed code).

<!-- This is the external color picker -->
<input class="jscolor {onFineChange:'updateColor(this)'}" value="ffcc00" style="position: absolute;z-index: 999;">
  <!-- end of external color picker -->

    <script type="text/javascript">

        var divcvs = document.getElementById("cvs");
        var loader = document.getElementById("load");
        if (loader && loader.parentElement)
          loader.parentElement.removeChild(loader);

        var engine = new BABYLON.Engine(divcvs, antialias, null, adaptive);
        engine.enableOfflineSupport = offline;
        engine.clear(new BABYLON.Color3(0, 0, 0), true, true);
        engine.displayLoadingUI();
        engine.loadingUIText = "Loading Content Assets";

        var updateStatus = (status) => {
            engine.loadingUIText = status;
        };
        var showSceneLoader = () => {
            divcvs.style.opacity = "0";
            engine.clear(new BABYLON.Color3(0, 0, 0), true, true);
            engine.displayLoadingUI();
            updateStatus("Loading Content Assets");
        };
        var removeSceneLoader = () => {
            engine.hideLoadingUI();
            divcvs.style.opacity = "1";
            updateStatus("");
        };
        var progressSceneLoader = () => {
            if (loaded === false && TimerPlugin && TimerPlugin.requestAnimFrame) {
                if (scene != null) {
                    var waiting = 0 + scene.getWaitingItemsCount();
                    var content = (waiting > 1) ? " Content Assets" : " Content Asset";
                    updateStatus((waiting > 0) ? "Streaming " + waiting.toString() + content : ("Starting " + title));
                }
                TimerPlugin.requestAnimFrame(progressSceneLoader);
            }
        };
        // Only works on this part for the scene
        var executeSceneLoader = (root, name) => {
            progressSceneLoader();
            BABYLON.SceneLoader.Load(root, name, engine, (newscene) => {
                scene = newscene;
                // Access the Babylon Mesh and create a default scene
                var pbr = new BABYLON.PBRMaterial("cube", scene);
                var cube = scene.getMeshByName("sample_Cube");
                cube.material = pbr;
                pbr.albedoTexture = new BABYLON.Texture("scenes/KnittedMetal_AlbedoTransparency.png", scene);
                pbr.useRoughnessFromMetallicTextureGreen = true;

                // GUI and Controls
                var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI");
                var panel = new BABYLON.GUI.StackPanel();
                panel.width = "200px";
                panel.isVertical = true;
                panel.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_RIGHT;
                panel.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_CENTER;
                advancedTexture.addControl(panel);

                // Babylon Color Picker, but I'm not using this. It's
                // only for testing.
                var textBlock = new BABYLON.GUI.TextBlock();
                textBlock.text = "Choose color:";
                textBlock.color = "#ffffff";
                textBlock.height = "30px";
                panel.addControl(textBlock);

                var picker = new BABYLON.GUI.ColorPicker();
                picker.value = pbr.albedoColor;
                picker.height = "150px";
                picker.width = "150px";
                picker.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER;
                picker.onValueChangedObservable.add(function(value) {
                    pbr.albedoColor.copyFrom(value);
                });

                panel.addControl(picker);
                // End Babylon Color Picker
                // End GUI and Controls

                if (!scene.manager) {
                    if (BABYLON.SceneManager && BABYLON.SceneManager.CreateManagerSession) {
                        BABYLON.SceneManager.CreateManagerSession(root, scene);
                        BABYLON.Tools.Warn("Babylon.js created default scene manager session");
                    }
                }

                scene.executeWhenReady(() => {
                    loaded = true;
                    if (scene.manager && scene.manager.start) {
                        scene.manager.start();
                    } else {
                        engine.runRenderLoop(function() {
                            scene.render();
                        });
                        BABYLON.Tools.Warn("Babylon.js running default scene render loop");
                    }
                    removeSceneLoader();
                });
            });
        };

        // Default babylon scene loader
        var defaultSceneLoader = (root, name) => {
            scene = null;
            loaded = false;
            showSceneLoader();
            executeSceneLoader(root, name);
        };
        if (engine) window.addEventListener("resize", () => {
            engine.resize();
        });
    </script>

Where do I put this code below inside Babylon.js code?

function updateColor(custPicker) {
        // This is only to show you the return value when the color picker is the trigger.
        // This returns a hexadecimal string ex: #FFCC00
        var colorval = custPicker.toHEXString();
        console.log(colorval);
    }

Answer 1

You can put it anywhere inside your script tag like this:

<!-- this is the external  color picker -->
<input class="jscolor {onFineChange:'updateColor(this)'}" value="ffcc00" style="position: absolute;z-index: 999;">
<!-- end of external color picker -->

<script type="text/javascript">
    function updateColor(custPicker) {
        // this only to show you return value when color picker is trigger
        // this return hex string ex: #FFCC00
        var colorval = custPicker.toHEXString();
        console.log(colorval);
    }

    // Your other code goes here:
    // ...
</script>