Dynamic block creation and insertion into the toolbox

2,799 views
Skip to first unread message

Scott Haynes

unread,
Apr 3, 2014, 9:30:21 AM4/3/14
to blo...@googlegroups.com


I'm writing a 3D game using Virtual World Framework( https://virtual.wf/ ) and blockly.  I've got some basic functionality working for one 3D object, and that was rather easy to implement.  ( I've still got the issue loading blockly however, is there an example of loading blockly using goog's require or addDependency ).  I'm know trying to add support for several 3D objects that are defined by the application developer.  I could certainly define the blocks for these different objects and insert them into the toolbar as needed for each level of the game.  I would rather create the ability to create a block for each addressable object at runtime.  I would imagine that I could generate the Block definitions for each 3D object as a string and eval them, and that would at least define the blocks that I need.  Is there an API for inserting these dynamically created blocks into the toolbox( I'm going to start looking into this, just seeing if anyone knows without diving into the code )?

Is there another web application that does something like this that I could look at?
  or
Does anyone have better suggestion on how to get this type of functionality working?

Scott

Neil Fraser

unread,
Apr 3, 2014, 6:26:40 PM4/3/14
to blo...@googlegroups.com
On 3 April 2014 06:30, Scott Haynes <scottn...@gmail.com> wrote:
> ( I've still got the issue loading
> blockly however, is there an example of loading blockly using goog's require
> or addDependency ).

Here is an application that does it using pure Closure:
https://code.google.com/p/blockly-games/source/browse/#git%2Fappengine%2Fmaze%2Fjs
Sorry, it isn't a minimal example. Sounds like a minimal Closure
require would be a great addition to the demo directory. If you
figure it out, would you consider making such a demo? Otherwise I can
take a look at it next week.

> Is there
> an API for inserting these dynamically created blocks into the toolbox( I'm
> going to start looking into this, just seeing if anyone knows without diving
> into the code )?

Currently there is no public API for dynamically populating the
toolbox. However, as luck would have it this item happens to be right
at the top of my todo list, so it should be available by the weekend.

--
Neil Fraser
http://neil.fraser.name

Neil Fraser

unread,
Apr 3, 2014, 6:30:32 PM4/3/14
to blo...@googlegroups.com
On 3 April 2014 15:26, Neil Fraser <ro...@neil.fraser.name> wrote:
> Here is an application that does it using pure Closure:
> https://code.google.com/p/blockly-games/source/browse/#git%2Fappengine%2Fmaze%2Fjs

Here's the link to the other half of the code, the one that actually
includes Blockly:
https://code.google.com/p/blockly-games/source/browse/appengine/js/common.js

Neil Fraser

unread,
Apr 4, 2014, 2:39:19 AM4/4/14
to blo...@googlegroups.com
Creating the API to change the contents of the toolbox was easier than
expected. It is checked in on r1683. The documentation is here:
http://code.google.com/p/blockly/wiki/Toolbox#Changing_the_Toolbox

You are currently the primary customer for this feature, so let me
know if this API is right for what you want to do.

phil cleaver

unread,
May 29, 2014, 1:46:51 PM5/29/14
to blo...@googlegroups.com, ro...@neil.fraser.name
Hi Neil,

I'd like to open a category on the toolbar using a voice command.  I think it would save a lot of mouse work where I'm using a big tree. (woah, that sounds weird, but I like it :)

I think it would be kind of cool too.

Does the API support opening the tree at a specific node, is there an easy way to do that? 

Thanks

Phil

P.S. I'm sure the mice will love you for saving them from the big trees!

Neil Fraser

unread,
May 29, 2014, 2:08:49 PM5/29/14
to blo...@googlegroups.com
Go to this page:
    https://blockly-demo.appspot.com/static/tests/playground.html
Open the console and paste this:
    Blockly.Toolbox.tree_.children_[3].select()
If you have a multi-level tree, you'll need something like:
    Blockly.Toolbox.tree_.children_[3].children_[2].select()


--
You received this message because you are subscribed to the Google Groups "Blockly" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blockly+u...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

phil cleaver

unread,
May 30, 2014, 2:01:46 AM5/30/14
to blo...@googlegroups.com, ro...@neil.fraser.name
awesome, thanks.

John Sirach

unread,
Sep 11, 2014, 8:27:16 AM9/11/14
to blo...@googlegroups.com, ro...@neil.fraser.name
Hi,

I'm also generating a a toolbox dynamically form an array. But is does not seem to render it correctly. I have placed an alert in the init function which shows the correct item and while creating the blocks they also show the correct value. But when the loop is done all is nicely rendered but all the items added with the loop suddenly show the last item in the list. I have simplified my code, which reproduces this. The tooltip also shows "Number: 5" with every block:


        Blockly.inject(document.getElementById('blocklyDiv'), {path: './js/libs/blockly/', toolbox: document.getElementById('toolbox')});
            
        $.get('http://192.168.1.6:8080/jsonrpc.json?rpc={"jsonrpc": "2.0", "method": "DeviceService.getDeclaredDevicesWithFullDetails","id":"DeviceService.getDeclaredDevicesWithFullDetails"}').done(function(data) {
            try {
                for(var i=0;i<data.result.data.length;i++){
                    var xml = "";
                    var device = data.result.data[i];
                    //xml += '<category name="'+device.friendlyname+'" id="device_'+device.id+'">';
                    var groupData = device.commandgroups;
                    for(var j=0;j<groupData.length;j++){
                        var commandGroup = groupData[j];
                        for(var k=0;k<commandGroup.commands.length;k++){
                            var curCommand = commandGroup.commands[k];
                            switch(curCommand.commandtype){
                                case "data":
                                    Blockly.Blocks['device_'+device.id+'_'+commandGroup.id+'_'+curCommand.typedetails.id] = {
                                        init: function() {
                                            this.setColour(120);
                                            this.appendDummyInput()
                                                .appendField(device.friendlyname);
                                            this.appendDummyInput()
                                                .appendField(curCommand.typedetails.label);
                                            this.setOutput(true);
                                            this.setTooltip('Number: ' + i);
                                            alert(device.friendlyname);
                                        }
                                    };
                                    xml += '<block type="device_'+device.id+'_'+commandGroup.id+'_'+curCommand.typedetails.id+'"></block>';
                                break;
                            }
                        }
                    }
                    //xml += '</category>';
                    $('#toolbox').append(xml);
                    Blockly.updateToolbox(document.getElementById('toolbox'));
                }
            } catch(err){ alert(err); }
        });
            
        </script>


Op vrijdag 4 april 2014 08:39:19 UTC+2 schreef Neil Fraser:

John Sirach

unread,
Sep 11, 2014, 9:14:26 AM9/11/14
to blo...@googlegroups.com, ro...@neil.fraser.name
Never mind, Adding the blocks now happens outside the jquery get call.

Op donderdag 11 september 2014 14:27:16 UTC+2 schreef John Sirach:

Danilo Di Cuia

unread,
Feb 27, 2015, 10:34:55 AM2/27/15
to blo...@googlegroups.com, ro...@neil.fraser.name
(bump)

Now that the wiki is gone on code.google.com, I'm looking for the method used to add blocks at runtime.

Thank you!
Reply all
Reply to author
Forward
0 new messages