Few questions about codelab "Customizing a Blockly toolbox"

[Licorne Magique]

Hi,

I tried the codelab (thanks for this kind of stuff, very useful) and I have some questions about this:

- on step 4, there's a color problem when it's a nested category, how can I resolve it?

- on step 6, how can we have a different image on each category?

- on step 7,  can we add json toolbox definition and create an patchwork of toolboxes?

Many thanks!

[Abby Schmiedt]

Hello!

1. It does not work for a collapsible category because the collapsible category is a separate class registered under a different name. Basically, it does not know about the new methods that you have added to your custom toolbox category. There are a couple ways to fix this: 

Create a CustomCollapsibleCategory (very similar to how you created your CustomCategory) and copy over the methods from your CustomCategory.

Mixin your object. You can do something like below to copy over the methods from CustomCategory to the CollapsibleToolboxCategory class: 

function classMixin(target, src) {
  for (var key of Object.getOwnPropertyNames(src.prototype)) {
    target.prototype[key] = src.prototype[key];
  }
}

classMixin(Blockly.CollapsibleToolboxCategory, CustomCategory)

There is probably a better way to do this, but I'm not sure of what it is yet. I will comment back tomorrow if I find a better solution.

2. If you want to change the image for each category you can: 

  1. Add an attribute to your toolbox definition for the name of the image: 
    <category imageName="./someImage.png">
  2. Inside your `createIconDom_` method you can do something like: 

    img.src = this.toolboxItemDef_['imageName'];

3. I'm not entirely sure what you mean here. But if you would like to use a JSON toolbox definition instead of the xml that is entirely possible. More information on this can be found in the blockly toolbox guides. If you have any questions about the JSON toolbox definition specific to the codelab let me know and I can try to clarify.

Hope this helps!

Abby

[Licorne Magique]

Hi Abbey,

many thanks for your help! Works great!

1. I have just added your code at the end of my js file with the class CustomCategory

2. your solution works, but it's img OR css-icon, I'm trying to mix icon & image...I'm working on...

3. to have something really easy to create by anyone who wants to use my BlocklyDuino, I think I''ll put everything useful for a block category inside the folder, somethinglike this :

\blocks\servomotor\

-> servomotor.js

-> servomotor.arduino.js

-> servomotor.png (for category image)

-> servomotor.toolbox.json

-> servomotor.lang.fr

-> servomotor.lang.en (etc)

And when I want to add servomotor category, I select it and add servomotor catgory in toolbox, thanks to servomotor.toolbox.json

But I don't know exactly how you inject JSON definition to construct toolbox. In all your examples there's an xml toolbox, maybe it's simple but Im' not sure.

Thanks,

Sébastien

[Licorne Magique]

Last thing about codelab example and collapsible category, the arrow disappear but I thought the example was an extentsion of existing cateogry, not replacement.

Even if " it does not know about the new methods that you have added to your custom toolbox category", the collapsible categories are modified too.

Still trying to add arrow at the end of collapsible category name...

[Abby Schmiedt]

Hello, 

For adding an image and the collapsible icon to a category you could: 

1. override createIconDom_. 

2. Return a div from createIconDom_ that holds both the toolboxIcon and the image

3. Save the icon so you can add a class when it opens and closes (this.newIcon = YOUR_ICON)

4. Override openIcon_ and call super.openIcon_(this.newIcon)

5. Override closeIcon_ and call super.closeIcon_(this.newIcon)

Once you have created your toolbox JSON you can use it in your application by setting it through blockly options similar to how a xml toolbox is currently set. For example:

  var workspace = Blockly.inject('blocklyDiv',
      {toolbox: YOUR_TOOLBOX_JSON});

The reason your collapsible category looks like it has changed even before you created a custom collapsible category class is because they share CSS classes that are changed in the codelab. 

Hope this helps!

Abby

[Licorne Magique]

Hi,

thanks for answering. I'll work on cion + img later, but about JSON I still have problems...

In my index.html:

    <script src="./S4E/toolbox/toolbox_standard.json"></script>

In my initialisation for my Code workspace (and my div is ' content_blocks '):

    Code.workspace = Blockly.inject('content_blocks', {
        comments: true,
        collapse: true,
        disable: true,
        grid:
          {
            spacing: 25,
            length: 0,
            colour: '#ccc',
            snap: true
          },
        horizontalLayout: false,
        maxBlocks: Infinity,
        maxInstances: {
            'test_basic_limit_instances': 3
        },
        maxTrashcanContents: 256,
        media: './@blockly/media/',
        sounds: true,
        oneBasedIndex: true,
        readOnly: false,
        rtl: false,
        move: {
            scrollbars: true,
            drag: true,
            wheel: false
        },
        toolbox: 'toolboxS4E',
        toolboxPosition: 'start',
        renderer: renderer,
        zoom: {
            controls: true,
            wheel: true,
            startScale: 1.0,
            maxScale: 4,
            minScale: 0.25,
            scaleSpeed: 1.1
        }
    });

In my toolbox_standard.json file (copied from https://developers.google.com/blockly/guides/configure/web/toolbox#categories):

[{
  "kind": "toolboxS4E",
  "contents": [
    {
      "kind": "category",
      "name": "Control",
      "contents": [
        {
          "kind": "block",
          "type": "controls_if"
        },
        {
          "kind": "block",
          "type": "controls_whileUntil"
        },
        {
          "kind": "block",
          "type": "controls_for"
        }
      ]
    },
    {
      "kind": "category",
      "name": "Logic",
      "contents": [
        {
          "kind": "block",
          "type": "logic_compare"
        },
        {
          "kind": "block",
          "type": "logic_operation"
        },
        {
          "kind": "block",
          "type": "logic_boolean"
        }
      ]
    }
  ]
}]

I think it's a stupid mistake, but Idon't know where...

[Abby Schmiedt]

Hello!

The toolbox "kind" field can not be used in the options definition. You must pass your json toolbox directly in to your options. 

For example: 

var jsonToolbox = [{

  "kind": "categoryToolbox",

  "contents": [
    {
      "kind": "category",
      "name": "Control",
      "contents": [
        {
          "kind": "block",
          "type": "controls_if"
        },
        {
          "kind": "block",
          "type": "controls_whileUntil"
        },
        {
          "kind": "block",
          "type": "controls_for"
        }
      ]
    },
    {
      "kind": "category",
      "name": "Logic",
      "contents": [
        {
          "kind": "block",
          "type": "logic_compare"
        },
        {
          "kind": "block",
          "type": "logic_operation"
        },
        {
          "kind": "block",
          "type": "logic_boolean"
        }
      ]
    }
  ]

}];

Code.workspace = Blockly.inject('content_blocks', {

...

toolbox: jsonToolbox,

...

});

Hope this helps!

Abby

[Licorne Magique]

Hi,

thanks, it was mistake from me...

Now I have :

        toolbox: jsonToolbox,

        toolboxPosition: 'start',
        renderer: renderer,
        zoom: {
            controls: true,
            wheel: true,
            startScale: 1.0,
            maxScale: 4,
            minScale: 0.25,
            scaleSpeed: 1.1
        }
    });

But stil doesn't work. Firefox send back " Uncaught Error: Toolbox must have a contents attribute.".

Any idea?

[Abby Schmiedt]

Hello!

Sorry I copy and pasted your example without double checking. It should be an object instead of an array. 

};

Cheers, 

Abby

[Licorne Magique]

Thanks! It works, and you are right, I read again and everywhere it's objetc and not arrays...really sorry.

[Abby Schmiedt]

No worries! Glad it works!

[Licorne Magique]

Thanks! It works, and you are right, I read again and everywhere it's objetc and not arrays...really sorry.

Now I'll work on a jsontoolbox concatenation thanks to different file with each a jsontoolbox definition.

[Licorne Magique]

Everything works fine, I created a toolbox customizable: https://blocklyduino.github.io/BlocklyDuino-v2/

This way we can select which category is visible (and useful) for kids, because in my last porject (Blockly@rduino) there were dozens of categories and you need to select. I added selction through URL to automatically configure it. Thanks.

But my last question (but not last work because I would like to sort toolbox categories, after translation): in json version of toolbox can we add css-icon custom like in xml version?

[Abby Schmiedt]

Hello!

Yes, you can set the css for the icon using a json toolbox by adding a "cssConfig" to your category definition. For example:

{
  "kind": "category",
  "name": "...",
  "cssConfig": {
    "icon": "yourIconName"
  }
}

More information on this can be found in the blockly toolbox guides.

Hope this helps! 

Abby

[Licorne Magique]

Great, thanks!

I totally forget this new part of documentation.