Highlighting more than one Block

[adiel ashrov]

Hey.

We've been working on a tutorial to a software approach called Behavioral programming.

BP involves several b-threades executing in a "parallel" manner.

You can see a version of the tutorial which is implemented using the Blockly maze in the following address(run with Firefox):

http://bp-new-blockly.appspot.com/static/apps/mazeBP/index.html

My problem is that I want to highlight more than one block s.t. the user will see the execution step of each b-thread.

After some investigation I think the code responsible on 'highlighting' a block is the following code segment.

**

 * Select this block.  Highlight it visually.

 */

Blockly.Block.prototype.select = function() {

  if (!this.svg_) {

    throw 'Block is not rendered.';

  }

  /*

  if (Blockly.selected) {

    // Unselect any previously selected block.

    Blockly.selected.unselect();

  }

  */

  Blockly.selected = this;

  this.svg_.addSelect();

  Blockly.fireUiEvent(this.workspace.getCanvas(), 'blocklySelectChange');

};

Questions:

1. Do commenting out the if will allow me to select more than one block?

2. How can I see the effect? I realize that block.js is translated to blockly_compressed.js through build.py but I was unsuccessful in building it myself.

I downloaded Closure and copied it to the main folder and did not succeed.

The next phase as I see it after building is how to use blockly_uncompressed.js instead of  blockly_compressed.js in order to debug the change.

Any ideas on how to use blockly_uncompressed.js instead of blockly_compressed.js?

Hope my intentions are clear

Regards,

Adiel

[adiel ashrov]

Hey,

I solved the issue.

Instead of manipulating the block.js file and re-building it , I've decided to simply direct use block.svg_ member in order to highlight individual blocks.

Initiating the method addSelect()  highlights a block and removeSelect()  turns it off.

Much like the original Maze when a block is executed it pushes a 'highlight' action and it's ID (need to strip it from the format block_id_ID).

Using the Blockly.mainWorkspace.getBlockById(ID) method you get access to the block.

Than by using block.svg_.[addSelect() | removeSelect()] you can manipulate the highlight.

You can see the result here:

http://bp-new-blockly-work.appspot.com/static/apps/mazeBP/index.html?lang=en&level=5&skin=0

I suggest you should start the Maze and solve it from the following link:

http://bp-new-blockly-work.appspot.com/static/apps/mazeBP/index.html?lang=en&level=1&skin=0

Cheers

Adiel

[Eric Miller]

For an example of running Blockly from source, look in the tests directory and run the file "playground.html". You will need to have the closure library downloaded, but it sounds like you have that under control.

A slightly-cheaty workaround that seems to work is to use code like the following to select another block without clearing the current selection:

    Blockly.selected = null;

    block.select();

A better solution would be to use code like the following to alter the behavior of all blocks to what you need (run this when your script loads):

Blockly.Block.prototype.select = function (clearPrevious) {

if (typeof(clearPrevious) = 'undefined') clearPrevious = false;

//Code here that uses Blockly.selected as a list 

}

Blockly.Block.prototype.deselect = function () {

//Code here that uses Blockly.selected as a list 

}

 

This way, anyone else calling "select" will still behave as expected, but your code can use the new functionality.

[adiel ashrov]

Hey,

Could you extend on how to use the blockly_uncompressed?

Do I need the closure directory if I want to run blockly_uncompressed locally?

Regards,

Adiel

[Eric Miller]

If you look at the tests/playground.html file, it starts with something like:

<script type="text/javascript" src="../blockly_uncompressed.js"></script>

<script type="text/javascript" src="../generators/javascript.js"></script>

<script type="text/javascript" src="../generators/javascript/logic.js"></script>

<script type="text/javascript" src="../generators/javascript/loops.js"></script>

<script type="text/javascript" src="../generators/javascript/math.js"></script>

<script type="text/javascript" src="../generators/javascript/text.js"></script>

<script type="text/javascript" src="../generators/javascript/lists.js"></script>

<script type="text/javascript" src="../generators/javascript/colour.js"></script>

<script type="text/javascript" src="../generators/javascript/variables.js"></script>

<script type="text/javascript" src="../generators/javascript/procedures.js"></script>

<script type="text/javascript" src="../generators/python.js"></script>

<script type="text/javascript" src="../generators/python/logic.js"></script>

<script type="text/javascript" src="../generators/python/loops.js"></script>

<script type="text/javascript" src="../generators/python/math.js"></script>

<script type="text/javascript" src="../generators/python/text.js"></script>

<script type="text/javascript" src="../generators/python/lists.js"></script>

<script type="text/javascript" src="../generators/python/colour.js"></script>

<script type="text/javascript" src="../generators/python/variables.js"></script>

<script type="text/javascript" src="../generators/python/procedures.js"></script>

<script type="text/javascript" src="../generators/dart.js"></script>

<script type="text/javascript" src="../generators/dart/logic.js"></script>

<script type="text/javascript" src="../generators/dart/loops.js"></script>

<script type="text/javascript" src="../generators/dart/math.js"></script>

<script type="text/javascript" src="../generators/dart/text.js"></script>

<script type="text/javascript" src="../generators/dart/lists.js"></script>

<script type="text/javascript" src="../generators/dart/colour.js"></script>

<script type="text/javascript" src="../generators/dart/variables.js"></script>

<script type="text/javascript" src="../generators/dart/procedures.js"></script>

<script type="text/javascript" src="../msg/messages.js"></script>

<script type="text/javascript" src="../blocks/logic.js"></script>

<script type="text/javascript" src="../blocks/loops.js"></script>

<script type="text/javascript" src="../blocks/math.js"></script>

<script type="text/javascript" src="../blocks/text.js"></script>

<script type="text/javascript" src="../blocks/lists.js"></script>

<script type="text/javascript" src="../blocks/colour.js"></script>

<script type="text/javascript" src="../blocks/variables.js"></script>

<script type="text/javascript" src="../blocks/procedures.js"></script>

This loads the Blockly source uncompressed. For this to work, your directory structure must look like the following:

• Main Dir
• closure-library-read-only
• closure
• third-party
• etc.
• blockly
• blocks
• generators
• tests
• playground.html
• etc.
• blockly_uncompressed.js
• blocks_compresssed.js
• etc.

[adiel ashrov]

Hey.

Thank you I will try it and update.

Regards,

Adiel

On Thursday, May 22, 2014 6:39:28 PM UTC+3, adiel ashrov wrote:

[phil cleaver]

I think there is a small error in this code:

Blockly.Block.prototype.select = function (clearPrevious) {

if (typeof(clearPrevious) = 'undefined') clearPrevious = false;

//Code here that uses Blockly.selected as a list 

}

Blockly.Block.prototype.deselect = function () {

//Code here that uses Blockly.selected as a list 

}

I think the line 

if (typeof(clearPrevious) = 'undefined') clearPrevious = false;

should have two = signs as shown below

if (typeof(clearPrevious) == 'undefined') clearPrevious = false;

otherwise it throws ReferenceError: Invalid left-hand side in assignment

Phil

[Eric Miller]

Oops. You are correct, I was just typing up a quick example. The real point is the concept of overriding the Blockly.Block.prototype.select and Blockly.Block.prototype.deselect functions while preserving the behavior of other places (like mouse interaction) that use them.

[phil cleaver]

Hi Eric,

I wasn't being pedantic, just put it there to maybe help someone else viewing this post.

This Blockly.Block.prototype.select is exactly what I needed for a problem I was having, thanks.  Do you know of something similar for Toolbox and the Flyout ?  There doesn't seem to be a prototype associated with them.

Many thanks

Phil