Blockly developer tools

The following figure shows how code is generated from Blockly. Each block, there ate two main components i.e. block definition and code generator. Block definition is JavaScript code to determine how block look like and code generator is JavaScript code that actually generate code.

We can add new block to the code by using xml definition for toolbox in BlocklyComponent.vue in /home/pi/kbclientNew/nectec-client/src/components directory

      <category name="KidBright AI" colour="%{BKY_VARIABLES_HUE}">
      <block type="init_ros_node"></block>
      <block type="start_object_detector"></block>
      <block type="start_image_classification"></block>
      <block type="start_wake_word_detector"></block>
      <block type="rospy_loop"></block>
      <block type="get_objects"></block>
      <block type="get_classes"></block>
      <block type="get_sound"></block>
      <block type="get_object_attr"></block>

and we need to add both block definition and code gererator javascript to BlocklyComponent.vue file

    Blockly.Blocks["get_objects"] = {
      init: function () {
        this.appendDummyInput().appendField("get objects");
        this.setOutput(true, null);
        this.setColour(230);
        this.setTooltip("");
        this.setHelpUrl("");
      },
    };

    Blockly.Python["get_objects"] = function (block) {
      var code ="rospy.wait_for_message('/tpu_objects', tpu_objects, timeout=4).tpu_objects";
      // TODO: Change ORDER_NONE to the correct strength.
      return [code, Blockly.Python.ORDER_NONE];
    };