A loop block?

[Brinx4life]

Hello!

Im doing a project in Blockly and I want to set up a loop block which will do x,y,z things... 

I can not find any documentation on this type of block (set up in html toolbox, set up in js...)

If someone can give me a link or some information on where I can find this.

Thank you for the help.

[feni...@google.com]

Hi,

I suggest working through the Getting Started Codelab to understand how to create a Blockly workspace and add blocks to it.

Cheers,

Rachel

[Brinx4life]

I do not think you understood my question correctly. Im already coding with Blockly for quite a while now. Now I want to use/make some sort of a loop block which I have not done yet. I can not find any documentation on that so if you can link it here or tell me where to find it. 
Thanks

petek, 22. november 2024 ob 19:27:54 UTC+1 je oseba feni...@google.com napisala:

[Mark Friedman]

Here is the beginning of the "Create Custom Blocks" section of the developer docs which explains how to create custom blocks.

Hope this helps.

-Mark

--
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+u...@googlegroups.com.
To view this discussion visit https://groups.google.com/d/msgid/blockly/1fbd10ee-d51a-4397-b804-7b0187b54fbcn%40googlegroups.com.

[Ronald Bourret]

Hi,

Blockly defines a number of loop blocks. To see these, go to the Advanced Playground and click on the Loops category. Once you decide which loop you want, drag that loop onto the workspace and look for its type in the JSON in the lower right corner. It will be control_*.

If you want to create your own loop block, see Define Blocks. You can also use the Block Factory to build a block. This will generate the JSON for the block, but it will be up to you to write the code generator for your block. For examples, you can find the definitions of the standard loop blocks here and their code generators here.

Ronald Bourret

Technical Writer (Provided by Synergis)

rbou...@xwf.google.com

On Fri, Nov 22, 2024 at 10:46 AM Brinx4life <sup...@gmail.com> wrote:

--

[Brinx4life]

Okey. I checked the link you send, but I still have not found any documentation on loops :/ 

The advanced playground has the loop block but it does not have it written in JavaScript. Other link just have basics on how you make a block but not specific while type block

petek, 22. november 2024 ob 20:11:15 UTC+1 je oseba rbou...@google.com napisala:

[Mark Friedman]

It looks like we've misunderstood exactly what information you are asking for.  Are you looking for information on how to create your own, custom, loop block or information on how to include one of the predefined loop blocks in your toolbox?  Or is there something else that you are trying to do?  Please give us as much info as you can on what you've already done and what you are trying to do.

-Mark

To view this discussion visit https://groups.google.com/d/msgid/blockly/43f8c027-509e-4756-9f68-178b19a5e957n%40googlegroups.com.

[Brinx4life]

Okey. Let me explain what exactly I am looking for. 
One of my blocks in the program is a line (X1 Y1,X2,Y2) and its result is drawn on a canvas. Now I want to create a loop type block in which I can put my line block and it draws as many lines as you input into the loop block. Of course the XY must change for every loop. I can not find any documentation on creating custom loop blocks. I have tested my version which has a "Blockly.JavaScript.statementToCode()" command which gives me the blocks inside the loop. But I am not sure on how can I insert different values (which I explained above). 

So if someone can explain how to do this or even give me actual documentation I would be very thankful. The links above only directed me to the basic block creation not even loop ones and/or did direct me to just a loop block in the work station. 

Thank you 

nedelja, 24. november 2024 ob 00:33:06 UTC+1 je oseba mark.f...@gmail.com napisala:

[Mark Friedman]

Ok, the picture is getting clearer on what you're trying to do.  I think that the most straightforward way to do what you want is to simply use the predefined List and Loop blocks.  In that scenario, you would have your users use the List blocks to create a list of lines and use the "for each item in list" (i.e. the "controls_forEach" type block) to loop over them.  If you do it this way, you don't need to create any new custom blocks.

BTW if you don't like the way that the standard "create list with" block adds and removes inputs, there are two other options, provided via plugins: the Dynamic Connection blocks and the +/- Mutator blocks.

-Mark

To view this discussion visit https://groups.google.com/d/msgid/blockly/5b0697b7-fe0c-451f-8cad-13197c316162n%40googlegroups.com.

[Ronald Bourret]

Hi,

There is no documentation that explains how to use loop blocks (or any of Blockly's standard blocks).

I'm not sure why you need a loop. In most cases, I would expect people using your editor to simply use line blocks. These don't need to be in a loop. For example, here are the line blocks that would be used to draw a square:

line(0, 0, 1, 0)

line(1, 0, 1, 1)

line(1, 1, 0, 1)

line(0, 1, 0, 0)

The only reason to use a loop is if the lines your user is trying to draw follow a predictable pattern. For example, here is a loop that draws part of a parabola (y=x^2)

for (i = 0; i <= 10; i++) {

   line(i, i^2, i+1, (i+1)^2)

}

To build this in your editor, you would use a count-with-i loop block and a line block. The line block would need four inputs; in these, you would use variable blocks (i) and math blocks (+, ^) to create the expressions i, i^2, i+1, and (i+1)^2.

However, most things people want to draw (such as a picture of a house or the outline of a maze) don't have a predictable pattern or have a pattern that is difficult to express. For example, I couldn't think of an easy way to write the pattern to draw a square.

Does this help?

Ronald Bourret

Technical Writer (Provided by Synergis)

rbou...@xwf.google.com

To view this discussion visit https://groups.google.com/d/msgid/blockly/5b0697b7-fe0c-451f-8cad-13197c316162n%40googlegroups.com.

[Christopher Allen]

Hi Brinx,

I see that Mark and my colleague Ron have already provided a lot of useful information, but as none of us are exactly sure what you are trying to do I thought I would make note of something that they have not mentioned but which is important:

Okey. Let me explain what exactly I am looking for. 
One of my blocks in the program is a line (X1 Y1,X2,Y2) and its result is drawn on a canvas. Now I want to create a loop type block in which I can put my line block and it draws as many lines as you input into the loop block. Of course the XY must change for every loop.

Can you show us your block definition for this line block?

In particular, what I would like to know is whether it has four fields for the X1…Y2 values, or whether it uses four value inputs:

• If your block uses fields, then it will not be possible to provide different x or y values on each iteration of a loop, and any loop containing your block will just end up drawing the same line on top of itself, over and over again.
• If your block uses value inputs, then the user can use math blocks and variable blocks to compute new coordinates for the line for each iteration of the loop.

(For extra confusion, all fields have to live within some kind of input, so if a block has fields but no other inputs then the fields will be contained in one or more dummy inputs—but dummy inputs different from value inputs, and not relevant to this particular question.)

Hope that helps,

Christopher

[Brinx4life]

Hello

My goal at the moment is to make a line drawing program (have other shapes too). I want to implement a loop block with that line block. The thing I want to acomplish is that the line draws on different coordinates based on the number for the loop. So lets say a loop which will be run 10 times will draw 10 lines 100px under another line. I have now implemented your predefined blocks (loops, if's, math, etc...) and done some testing on them. I will send the line code you have asked for Christopher. If I understand your words correctly I musn't use fields but value inputs with math? I might see what you mean by that yes...

function NarisiCrto(X1, Y1, X2, Y2) {

  stroke("magenta");

  strokeWeight(5);

  line(X1, Y1, X2, Y2); // p5.js naredi crto z zacetkom XY in koncem XY

}

javascript.javascriptGenerator.forBlock["CrtaXY"] = function(block){

  let X1 = block.getFieldValue("X1");

  let Y1 = block.getFieldValue("Y1");

  let X2 = block.getFieldValue("X2");

  let Y2 = block.getFieldValue("Y2");

  const code = `NarisiCrto(${X1}, ${Y1}, ${X2}, ${Y2});\n`;

  return code;

};

 

Blockly.Blocks["CrtaXY"] = {

  init: function(){

    this.appendDummyInput()

      .appendField("Narisi crto z X1 koordinato") // tekst na bloku

      .appendField(new Blockly.FieldNumber(0), "X1"); // vnesem X1 koordinato

    this.appendDummyInput()

      .appendField("Narisi crto z Y1 koordinato")

      .appendField(new Blockly.FieldNumber(0), "Y1"); // vnesem Y1 koordinato

    this.appendDummyInput()

      .appendField("Narisi crto z X2 koordinato")

      .appendField(new Blockly.FieldNumber(0), "X2"); // vnesem X2 koordinato

    this.appendDummyInput()

      .appendField("Narisi crto z Y2 koordinato")

      .appendField(new Blockly.FieldNumber(0), "Y2"); // vnesem Y2 koordinato

    this.setPreviousStatement(true, null); // lahko se poveze zgoraj

    this.setNextStatement(true, null); // lahko se poveze spodaj

    this.setColour(160); // barva bloka

  }

};

torek, 26. november 2024 ob 18:04:34 UTC+1 je oseba cpca...@google.com napisala:

[Ronald Bourret]

Can you use your line block with standard loop, math, and variable blocks:

[set x1 to 0]

[set y1 to 0]

[set x2 to 50]

[set y2 to 0]

[set increment to 100]

[count with i from 0 to 9 by 1]

   [line [x1] [y1 - [increment * i]] [x2] [y2 - [increment * i]]]

Ronald Bourret

Technical Writer (Provided by Synergis)

rbou...@xwf.google.com

--
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+u...@googlegroups.com.

To view this discussion visit https://groups.google.com/d/msgid/blockly/8ed0a5a0-8659-4ed4-ab87-257949c55625n%40googlegroups.com.

[Christopher Allen]

Hi Brinx,

Blockly.Blocks["CrtaXY"] = {

  init: function(){

    this.appendDummyInput()

      .appendField("Narisi crto z X1 koordinato") // tekst na bloku

      .appendField(new Blockly.FieldNumber(0), "X1"); // vnesem X1 koordinato

    this.appendDummyInput()

      .appendField("Narisi crto z Y1 koordinato")

      .appendField(new Blockly.FieldNumber(0), "Y1"); // vnesem Y1 koordinato

    this.appendDummyInput()

      .appendField("Narisi crto z X2 koordinato")

      .appendField(new Blockly.FieldNumber(0), "X2"); // vnesem X2 koordinato

    this.appendDummyInput()

      .appendField("Narisi crto z Y2 koordinato")

      .appendField(new Blockly.FieldNumber(0), "Y2"); // vnesem Y2 koordinato

    this.setPreviousStatement(true, null); // lahko se poveze zgoraj

    this.setNextStatement(true, null); // lahko se poveze spodaj

    this.setColour(160); // barva bloka

  }

};

So yes: this block will let you draw a line—but only to the particular coordinates that the programmer enters into the field.  In a loop it will just keep drawing exactly the same line every time, because there is no way to compute the coordinates.

If instead you change the block definition to use value inputs:

Blockly.Blocks['crtaxy'] = {
  init: function() {
    this.appendValueInput("X1")
        .setCheck("Number")

        .appendField("Narisi crto z X1 koordinato");

    // ...

 

and update the generator accordingly:

javascript.javascriptGenerator.forBlock['crtaxy'] = function(block, generator) {
  var X1 = generator.valueToCode(block, 'X1', javascript.Order.NONE);
  // ...
  return `NarisiCrto(${X1}, ${Y1}, ${X2}, ${Y2});\n`;

}

… then the user will be able to connect math blocks and/or variable blocks to the X1/Y1/X2/Y2 inputs, and thereby to compute the coordinates.  This would make it possible to use the block in the way that Ron proposed in his example program:

[set x1 to 0]
[set y1 to 0]
[set x2 to 50]
[set y2 to 0]
[set increment to 100] 

 

[count with i from 0 to 9 by 1]
   [line [x1] [y1 - [increment * i]] [x2] [y2 - [increment * i]]]

Without inputs, it would be impossible to connect the [x1] variable block, or the [… - …] subtraction block and so on.

Christopher

[Brinx4life]

I get it now yes. I have now changed the inputs and now the program works as I wanted to with the help of math blocks. 
Thanks to all of you guys for the help and the information. I appreciate it

Brinx

četrtek, 28. november 2024 ob 11:45:56 UTC+1 je oseba cpca...@google.com napisala: