Create a simple rule-based system using blockly

[Jessica Rosendo]

Hello,

I am doing an A.I. Project and my goal is to create blocks for a simple rule-based system and I would like a suggestion on what is the best way to do that?

My idea is to create generic blocks with which the users will be able to create their own rules. These rules must create actions which are going to help the users to reach the desired goal.

Do I have to insert the algorithm in my HTML file?

I created a simple block to show the idea (attached picture).

Thank you in advance.

[Andrew n marshall]

Hi Jessica,

The short answer: Yes, you will need to copy the block definition and generator JavaScript into your HTML (or related .js file).

If this is your first Blockly application you may want to go through our code lab, which goes through all the steps of creating new blocks with the developer tools, constructing generators for the blocks, and adding the blocks to your app in the toolbox.

--
Andrew

--
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+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Jessica Rosendo]

Hello Andrew,

Thank you for replying my email.

I created the definition of my own block, but I am having difficulties in constructing the generator to make it functional.

As you can see in my previous picture, my block need to 'see' my input values and print the result if the input is True.

For example:

if (it rains) ==> then (take an umbrella)

My block is represented by if  ==> then; (it rains) and (take an umbrella) are given by the user. 

I know this is basically an if logic, but I would like to understand it to create my own block. Could you help me?

Best,

Jessica.

--
Andrew

To unsubscribe from this group and stop receiving emails from it, send an email to blockly+u...@googlegroups.com.

[picklesrus]

Hi Jessica,

I think this might answer your question: https://developers.google.com/blockly/guides/create-custom-blocks/generating-code

Also, there is an if/else block in one of our playgrounds that might be a good example to follow.  The generator for that is here: https://github.com/google/blockly/blob/master/generators/javascript/logic.js#L32

Please follow up if that doesn't answer your question though!

-picklesrus

[Jessica Rosendo]

Hello,

Thank for your answer to my email. 

The generators link that you sent to me helped. I was looking for it.

I used that in the generator of my block, but it is still not working. I would like to be able to see the result printed on the screen.

Here are the block definition and generator of my block:

//Block definition

Blockly.Blocks['oldrule'] = {

  init: function() {

    this.appendDummyInput()

        .appendField("Rule")

        .appendField(new Blockly.FieldTextInput("default"), "number_rule");

    this.appendValueInput("anteced")

        .setCheck(null)

        .setAlign(Blockly.ALIGN_RIGHT)

        .appendField("if");

    this.appendStatementInput("conseq")

        .setCheck(null)

        .appendField("then");

    this.setInputsInline(true);

    this.setPreviousStatement(true, null);

    this.setNextStatement(true, null);

    this.setColour(210);

 this.setTooltip("");

 this.setHelpUrl("");

  }

};

//Generator stub

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

  var n = 0;

  var code = '', statements_conseq, value_anteced;

  do {

var text_number_rule = block.getFieldValue('number_rule');

value_anteced = Blockly.JavaScript.valueToCode(block, 'anteced' + n, Blockly.JavaScript.ORDER_NONE) || 'false';

statements_conseq = Blockly.JavaScript.statementToCode(block, 'conseq' + n);

  // TODO: Assemble JavaScript into code variable.

code += 'if (' + value_anteced + ') {\n' + statements_conseq + '}'; //code += (n > 0 ? ' else ' : '') +

++n;

  } while (block.getInput('anteced' + n));

  

  /*if (block.getInput('ELSE')) {

    statements_conseq = Blockly.JavaScript.statementToCode(block, 'ELSE');

    code += ' else {\n' + statements_conseq + '}';

  }*/

  return code + '\n';

};

When I click on 'Run Javascript' nothing happens. What am I doing wrong?

[picklesrus]

Hi,

Looks like you're following the example of the generator demo: https://github.com/google/blockly/blob/master/demos/generator/index.html#L129. 

Does the javascript generated look correct? Or are you saying the run part is the problem?  If you're running the code snippet in your alert box in the screenshot, I wouldn't expect it to look like it is doing anything.  You'd need an alert (from the print block assuming you're extending the demo I linked above) to notice anything.

[Jessica Rosendo]

Hello,

I was gonna use the generator, but I believe that the interpreter (see attached picture) is gonna be the best option since it has an area in the workspace that shows the output of the program.

Honestly, I am a beginner in Javascript and I am not sure if the code is correct. I was following the idea from this link https://github.com/google/blockly/blob/master/generators/javascript/logic.js#L32. Could you explain to me how can I show the result of the code in the output area?

One more question: what is the variable n in the code? What is it for?

[picklesrus]

I think there's some confusion about terminology.  The generator converts your blocks into javascript code, which is just a string. Then you take that code and run it using the interpreter.  If I were just beginning development and new to javascript, I'd first make sure I'm generating the code I want.  I'd test it by looking at the string, but also by running it.  I'd either use eval as a first test (https://developers.google.com/blockly/guides/app-integration/running-javascript) or just take the string output from the generator, throw it in a .js file and open that up in the browser.  Once I knew the code I was generating was generally what I wanted, then I'd start to use the interpreter. 

[picklesrus]

Also, I'd recommend looking at the code lab: https://codelabs.developers.google.com/codelabs/blockly-web/index.html?index=..%2F..%2Findex#0, specifically at steps 8 & 9 which talk about generating and running code.

[Jessica Rosendo]

Hello,

I believe I am understanding a little better now. 

My block was working well until I add the field input 'Rule 1'. When I click on the button 'Show Javascript' the code seems to be correct, but when I run it something goes wrong. 

As you can see in the picture (My block1), I added '{ }' after 'Rule 1', but I got a message saying that I had an unexpected token. Then I removed it, but I got another message saying that 'Rule 1' is not defined (My block2). What can I do?

/**

 * Blockly Demo: Switch Color

 */

//Block definition

Blockly.Blocks['oldrule'] = {

  init: function() {

    this.appendDummyInput()

        .appendField(new Blockly.FieldTextInput("Rule1"), "number_rule0");

    this.appendValueInput("anteced0")

        .setCheck("Boolean")

        .setAlign(Blockly.ALIGN_RIGHT)

        .appendField("if");

    this.appendStatementInput("conseq0")

        .setCheck(null)

        .appendField("then");

    this.setInputsInline(true);

    this.setPreviousStatement(true);

    this.setNextStatement(true);

    this.setColour(210);

 this.setTooltip("");

 this.setHelpUrl("");

  }

};

//Generator stub

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

  var n = 0;

  var code = '', text_number_rule, value_anteced, statements_conseq;

  do {

text_number_rule = block.getFieldValue('number_rule' + n);

value_anteced = Blockly.JavaScript.valueToCode(block, 'anteced' + n, Blockly.JavaScript.ORDER_NONE) || 'false';

statements_conseq = Blockly.JavaScript.statementToCode(block, 'conseq' + n);

        

// TODO: Assemble JavaScript into code variable.

code += '\n' + text_number_rule + '{\n if (' + value_anteced + ') {\n' + statements_conseq + '}\n}';

++n;

  } while (block.getInput('anteced' + n));

  

  return code + '\n';

};

[Jessica Rosendo]

Hello,

How can I define the text input value (e.g. Rule 1)? I would like to have the text input value of my block automatically modified when I drag it and drop it on the workspace like the block function does (see attached picture).  How can I do that?

[Jessica Rosendo]

I'm sorry! I sent the wrong picture. 

The attached picture below is the right one.