Search code examples
javascripthtmlrelative-pathblocklygoogle-blockly

Blockly replace sprites path

I am using blockly to create my program. I have blockly downloaded from this github location, and I'm trying to replace blockly images path from this location: https://blockly-demo.appspot.com/static/media/sprites.png to this (relative) location: sprites.png. but I don't know how to do this.

Question is: Where I can set this path?

Here is my page code (in root folder of blockly):

<!DOCTYPE html>
<html lang="en" style="width: 100%; height: 100%;">
<head>
    <meta charset="UTF-8">
    <title>Blockly Test</title>
    <script src="blockly_compressed.js"></script>
    <script src="javascript_compressed.js"></script>
    <script src="blocks_compressed.js"></script>
    <script src="msg/js/en.js"></script>
</head>
<body style="width: 100%; height: 100%; margin: 0;">
    <xml xmlns="https://developers.google.com/blockly/xml" id="toolbox" style="display: none">
        // toolbox codes are here.
    </xml>
    <div id="blocklyArea" style="position: absolute; width: 100%; height: 100%;"></div>
    <div id="blocklyDiv" style="position: absolute;"></div>
    <script>
        var blocklyArea = document.getElementById('blocklyArea');
        var blocklyDiv = document.getElementById('blocklyDiv');
        var workspace = Blockly.inject(blocklyDiv, {toolbox: document.getElementById("toolbox")});
        var onresize = function(e) {
            // Compute the absolute coordinates and dimensions of blocklyArea.
            var element = blocklyArea;
            var x = 0;
            var y = 0;
            do {
                x += element.offsetLeft;
                y += element.offsetTop;
                element = element.offsetParent;
            } while (element);
            // Position blocklyDiv over blocklyArea.
            blocklyDiv.style.left = x + 'px';
            blocklyDiv.style.top = y + 'px';
            blocklyDiv.style.width = blocklyArea.offsetWidth + 'px';
            blocklyDiv.style.height = blocklyArea.offsetHeight + 'px';
            Blockly.svgResize(workspace);
        };
        window.addEventListener('resize', onresize, false);
        onresize();
        Blockly.svgResize(workspace);
        //document.body.innerHTML = document.body.innerHTML.replace(/https:\/\/blockly\-demo\.appspot\.com\/static\/media\/sprites\.png/gi, "sprites.png");
    </script>
    <button id="generator" onclick="try { eval(Blockly.JavaScript.workspaceToCode(workspace)); } catch (e) { alert(e); }" style="position: absolute; margin: 25px; right: 0; width: 80px; height: 80px; border-radius: 50%; border: 5px solid teal; background: darkcyan; color: white; font-size: x-large; outline: none; cursor: pointer;">⯈</button>
</body>
</html>

Sorry for bad english.

Solution

  • You can change the media path while injecting blockly. Refer to media option while doing Blockly.inject() call.

    In your case you can do something like - 

    var workspace = Blockly.inject(blocklyDiv, {toolbox: document.getElementById("toolbox"), media: './'});