How to put blocks on workspace when page loads?

[EMILIO CALDERON]

Hello! Im trying to put blocks in the workspace when the page loads like the puzzle game... can anyone give me a hand?

[Miguel]

Hi Emilio,

look at import/export functions in test/playground.html

Say you have in a variable xmlContent the XML of the blocks you want load and you already initialized the workspace, you can load it with the code below

dom = Blockly.Xml.textToDom(xmlContent);

Blockly.Xml.domToWorkspace(workspace, dom);

Or you could have the content already inside the HTML in a (hidden) element.

In that case, the following should work

dom = document.getElementById("workspaceInitialContent");

Blockly.Xml.domToWorkspace(workspace, dom);

Best,

Miguel

Il giorno ven 8 apr 2016 alle ore 10:51 EMILIO CALDERON <emili...@gmail.com> ha scritto:

Hello! Im trying to put blocks in the workspace when the page loads like the puzzle game... can anyone give me a hand?

--
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.

[EMILIO CALDERON]

Thank You Miguel!!! It worked very well!! 

[Miguel]

You're welcome!

I just noticed that in last version of Blockly the order of arguments in Blockly.Xml.domToWorkspace() is actually the other way around.

That is, the right way is the following:

Blockly.Xml.domToWorkspace(dom, workspace);

The old order is still recognized and supported, but it is currently deprecated (it works but logs a deprecation warning).

Il giorno ven 8 apr 2016 alle ore 12:26 EMILIO CALDERON <emili...@gmail.com> ha scritto:

Thank You Miguel!!! It worked very well!! 

--

[EMILIO CALDERON]

Hi Miguel, can i ask you something?

Do you know how to give a value to a block with another block? I mean... like a variable when you put a block with a 'value' to another block.. i have this...

//This is my main block where i will put those 'variables' or the values..

Blockly.JavaScript['dog'] = function (block) {

                var dropdown_legs = block.getFieldValue('LEGS);

                var value_pic = Blockly.JavaScript.valueToCode(block, 'PIC', Blockly.JavaScript.ORDER_ATOMIC);

                var statements_caracter = Blockly.JavaScript.statementToCode(block, 'CARACTER');

                // TODO: Assemble JavaScript into code variable.

                var code = ';\n';

                return code;

//this is the block where i want to put the value

Blockly.JavaScript['pic_dog'] = function (block) {

                // TODO: Assemble JavaScript into code variable.                                

                var code=';\n'

                return code;

            };

Do you know how? thnx anyway!

[Miguel]

Hi,

the usual way of using Blockly is that the code generated by blocks is used to generate a result or a behavior on a different panel, like navigating a maze, etc.

If I understood correctly, you want instead that the code generated by a block has effects on another block in the workspace.

As a fact, I do that in my project and it is perfectly feasible, although it requires to study a bit how Blockly works.

I can give you some pointers and ideas to help you get started.

You don't need a generator for the 'pic_dog' block, if you are going to use it just as "an output".

What you would need is to do is dynamically change the content of the 'pic_dog' block each time the 'dog' block changes.

I don't know how a pair of 'dog' and 'pic_dog' blocks will be associated in your app (may be one is a subblock of the other, or there is just one of each, ....).

In any case, you can define a function 'onchange' in the 'init' of one of the two blocks (https://developers.google.com/blockly/custom-blocks/defining-blocks#onchange).

There you will generate change the 'pic_dog' content according to the 'dog' content.

If you need to generate some Javascript code for that, you will use Blockly.JavaScript.blockToCode(dogBlock) and execute the result (may be with eval() ?).

If 'dog' has just some parameters, may be you don't even need the 'dog' Javascript generator, you just directly assemble 'pic_dog' depending on the content of fields and sub-blocks of 'dog'.

To change the content of the block 'pic_dog' you can use most of the methods you can use to configure a block during initialization, and some more.

If you just need to change the value of a field you may use block.setFieldValue(newValue, fieldName) (https://github.com/google/blockly/blob/master/core/block.js#L683).

As the onchange method you will write is attached to one of the two blocks, you have to find a way to refer to the other block.

If they are connected (e.g, one as a sub-block of the other) you can reach the other using block.getInputTargetBlock(inputName) (https://github.com/google/blockly/blob/master/core/block.js#L1238) or block.getParent() (https://github.com/google/blockly/blob/master/core/block.js#L331).

If they are not connected, you may use workspace.getTopBlocks() (https://github.com/google/blockly/blob/master/core/workspace.js#L115) to have the array of top-level blocks and then find the one you need by checking block.type

I hope this can be useful.

Best regards,

Miguel

--

[EMILIO CALDERON]

PIC_DOG block Its a picture, and its an input to DOG block i mean... i want to put a value to pic_dog block that DOG block recieves and executes something whan running.