How can I dynamically create blocks and add to the panel?

Keino TT

unread,

Oct 31, 2019, 3:54:39 AM10/31/19

to Blockly

Hello. I create a block and add its on the toolbox.

It's my test_blocks.ts

import * as Blockly from 'blockly';
let text:string = 'Temperature';
let Name: string = 'AIN_1';
let json = {
  message0: ' %1 %2 ',
  args0: [
    {
      type: 'field_label_serializable',
      name: Name,
      text: text
    },
    {
      type: 'input_value',
      name: 'Name',
    },
  
  ],
   colour: 230,
   tooltip: "",
   helpUrl: ""
};
(Blockly as any).Blocks.my_custom_block = {
    init() {
      this.jsonInit(json);
    }
  };
  (Blockly as any).JavaScript['my_custom_block'] = function(block) {
    var value_name = (Blockly as any).JavaScript.valueToCode(block, Name, (Blockly as any).JavaScript.ORDER_ATOMIC);
    // TODO: Assemble JavaScript into code variable.
    var code =  Name + 'sdsd';
    console.log(Name)
    return code;
  };
console.log(json)

But how I can create dynamic blocks? If I have:

let dynamicBlocks: { Name: string, text: string }[] = [
  { "Name": "AIN_1", "text": "Temperature" },
  { "Name": "AIN_2", "text": "Pressure" },
  { "Name": "AIN_3", "text": "Precipitation" }
];

And add to toolbox.

Keino TT

unread,

Oct 31, 2019, 7:49:20 AM10/31/19

to Blockly

How I can create blocks? maybe in for?

import * as Blockly from 'blockly';

let dynamicBlocks: { Name: string, Text: string }[] = [
  { "Name": "AIN_1", "Text": "Temperature" },
  { "Name": "AIN_2", "Text": "Pressure" },
  { "Name": "AIN_3", "Text": "Precipitation" }
];
let json: Array<object> = [];

for (let index = 0; index < dynamicBlocks.length; index++) {
  console.log('tes', dynamicBlocks[index].Name)
  json[index] = {

    message0: ' %1 %2 ',
    args0: [
      {
        type: 'field_label_serializable',

        name: dynamicBlocks[index].Name,
        text: dynamicBlocks[index].Text

      },
      {
        type: 'input_value',
        name: 'Name',
      },
    
    ],
     colour: 230,
     tooltip: "",
     helpUrl: ""
  };
}

(Blockly as any).Blocks.my_custom_block_0 = {
  init() {
    this.jsonInit(json[0]);
  }
};
(Blockly as any).Blocks.my_custom_block_1 = {
  init() {
    this.jsonInit(json[1]);
  }
};
(Blockly as any).Blocks.my_custom_block_2 = {
  init() {
    this.jsonInit(json[2]);
  }
};
console.log(json);

четверг, 31 октября 2019 г., 10:54:39 UTC+3 пользователь Keino TT написал:

Keino TT

unread,

Oct 31, 2019, 9:00:20 AM10/31/19

to Blockly

I can create, but how I can to add in my toolbox dynamic blocks?

const CUSTOM_OBJECT_FROM_JSON_BLOCK_NAME = 'object_from_json';

let dynamicBlocks: { Name: string, Text: string }[] = [
  { "Name": "AIN_1", "Text": "Temperature" },
  { "Name": "AIN_2", "Text": "Pressure" },

  { "Name": "AIN_3", "Text": "Precipitation" },
  { "Name": "AIN_4", "Text": "Light" }

];
let json: Array<object> = [];

function dynToJson(dynamicBlocks){

for (let index = 0; index < dynamicBlocks.length; index++) {
  console.log('tes', dynamicBlocks[index].Name)
  json[index] = {
    message0: ' %1 %2 ',
    args0: [
      {
        type: 'field_label_serializable',
        name: dynamicBlocks[index].Name,
        text: dynamicBlocks[index].Text
      },
      {
        type: 'input_value',
        name: 'Name',
      },
    
    ],
     colour: 230,
     tooltip: "",
     helpUrl: ""
  };
}
}

function JsonToBlocks(json){
  for (let index = 0; index < json.length; index++) {
    (Blockly as any).Blocks[CUSTOM_OBJECT_FROM_JSON_BLOCK_NAME + index] = {
        init() {
          this.jsonInit(json[index]);
        }
      };
      console.log(json.length)
  }
}
dynToJson(dynamicBlocks)
JsonToBlocks(json)

Beka Westberg

unread,

Oct 31, 2019, 9:54:01 AM10/31/19

to Blockly

Hello,

You can add blocks to your toolbox regularly by defining custom toolbox xml. You can also create a dynamic toolbox category which allows you to create custom xml every time a category is opened.

To get this working you will probably have to change how you're defining your blocks with json. Instead of you using your JsonToBlocks function it is best to use the Blockly.defineBlocksWithJsonArray function. This creates a lookup table that can be used by the toolbox to generate your blocks from XML.

I hope that helps! If you have any further questions please reply!

--Beka

Keino TT

unread,

Nov 4, 2019, 2:03:56 AM11/4/19

to Blockly

Thank you!

четверг, 31 октября 2019 г., 16:54:01 UTC+3 пользователь Beka Westberg написал:

Reply all

Reply to author

Forward