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: 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%;">
    <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>
<body style="width: 100%; height: 100%; margin: 0;">
    <xml xmlns="" id="toolbox" style="display: none">
        // toolbox codes are here.
    <div id="blocklyArea" style="position: absolute; width: 100%; height: 100%;"></div>
    <div id="blocklyDiv" style="position: absolute;"></div>
        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.
   = x + 'px';
   = y + 'px';
   = blocklyArea.offsetWidth + 'px';
   = blocklyArea.offsetHeight + 'px';
        window.addEventListener('resize', onresize, false);
        //document.body.innerHTML = document.body.innerHTML.replace(/https:\/\/blockly\-demo\.appspot\.com\/static\/media\/sprites\.png/gi, "sprites.png");
    <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>

Sorry for bad english.



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: './'});


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.