Customising the shape of blocks

[Shaw Mcinroy]

I’ve been trying to find out if my idea is possible and there are lots of resources for creating custom blocks but I wanted to know if I could totally change the shape and layout of a block. 

What I want to do is change the loop blocks to be a circle and you add code on the loop itself. So it would be a circle with space for blocks to be added to it and the circle would grow as more code was added. Is there any way for me to make the necessary changes for this to be possible? 

[Maribeth Bottorff]

It's hard for me to picture what exactly you're describing, so if you upload a sketch that might help.

But in general, yes, it is possible to change the shape and layout of a block. This is done using custom renderers. We have several available that you can use to see the difference. In the right side of this test page, try changing the "renderer" dropdown. 

We actually don't have a guide article about custom renderers; creating good SVG paths is a tricky topic. You'd have to check out the code for the existing renderers and use the reference documentation.

There is a Codelab but it covers more basic topics than drastically altering a block's shape.

Good luck!

[lingareddy kotanka]

Hello Mari/team,

Is there any way we can create multiple input and output connection notchs?

Thank you!

[Maribeth Bottorff]

Hello,

A block can only have one output connection, but it can have many input connections.

Are you asking about creating multiple possible shapes of connections? If so, yes, and the custom renderer codelab has an example of creating multiple notch shapes and deciding which to use based on the type of connection. Does that help?

If not, could you add more detail to your question so we can better assist?

Maribeth

[lingareddy kotanka]

Hello Mari/Team,

no, not notch shapes. i want to create multiple horizontal input connections as shown in attached image.
Can we implement such a way?

Thanks in advance!

[Maribeth Bottorff]

Hello,

No, this is also not possible. A block can only have one next connection and one previous connection. These connections are analogous to lines of code that follow each other. How could one line of code be followed by two lines of code at the same time? Instead, blocks are connected in a linear fashion to match how code executes line-by-line.

Can you explain why you want this? It might be there is another way to achieve your goal.

Maribeth

[lingareddy kotanka]

Hello Mari and team,

I have few custom blocks which are connected and executes sequentially.

some blocks will give me two outputs so, I want that block to have two output notches. Similarly the next execution block should have two input notches since the previous block gives two outputs.

Could you please let me know if there is a way to achieve this?

Thank you!

[Beka Westberg]

Hello,

As stated in the previous email, blocks with two output connections aren't possible, but there are a few other things you could try!

1) Use two different blocks for the two different return values.

2) Add a mutator to the block that changes the return value.

3) Have the block return a tuple, and then create tuple blocks to extract the individual values.

4) Create a flow-based programming editor, which does better at handling multiple returns. E.g. in the style of node-red.

I hope that gives you some places to start! If you have any further questions please reply =)

--Beka

--
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 on the web visit https://groups.google.com/d/msgid/blockly/c6660855-aa20-44d7-995b-0dba4d4e5980n%40googlegroups.com.

[Mark Friedman]

If it is the case that you always want to use vertical stacking to represent input/output connections (i.e. not using the usual plugs and sockets) and it is the case that your blocks with two outputs are always going to be connected to a single block with two inputs (i.e. the two outputs are not connecting to two separate blocks) then I think that you might be able to do what you want by using a custom renderer.  I believe that you could redefine the notch shape so that it looks like two notches rather than one.  There's even an example of changing the notch shape in the custom renderer codelab (see step 6).  One extra wrinkle is that you'll need to decide on the notch shape (i.e. single or double) based on the type of the block that you are rendering.

Hopefully, the Blockly team will chime in here if I am incorrect about the above.

Also, note that the code shown in the custom renderer codelab uses an older mechanism than the current Blockly code uses for creating JavaScript classes and establishing subclass relationships, so you may need to adjust that.

-Mark

On Tue, Mar 21, 2023 at 2:36 AM lingareddy kotanka <ikot...@gmail.com> wrote:

[Beka Westberg]

Mark is indeed correct :D If your needs fall within those constraints a custom renderer would work for you!

Best,

--Beka

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/CAOk7GcR4QbQtqOhqzN%3Du-Km7Mp%3DVWSHg7HXSNarMbO99JYkGTA%40mail.gmail.com.

[Mark Friedman]

Hi, Lingareddy.  One way of doing this would be to override the shapeFor method in your ConstantProvider class.  The base shapeFor method returns a statically defined notch for next/previous connections, but you want to choose between two different notches depending on the block.  Note that the shapeFor method will be called with a RenderedConnection object.  You can call getSourceBlock on that object to get the block and can use that two decide which notch to return.  I think that you'll want to make the two different notches in the init method of your ConstantProvider, similar to how the base ConstantProvider just makes the single notch.

Hope this helps!

-Mark

On Tue, Apr 11, 2023 at 3:08 AM lingareddy kotanka <ikot...@gmail.com> wrote:

Hello Mark and Beka,

Thanks for your response!

I create multiple notches using the below code in ConstantProvider class.

Is there any way we can access current block details in ConstantProvider class?  because i want to access the block type/name and decide the notch count.

  makeRectangularConn(in_out_length?: any) {

    in_out_length = 2;

    const width = this.NOTCH_WIDTH;

    const height = this.NOTCH_HEIGHT;

 

    function makeMainPath(dir) {

      let path = Blockly.utils.svgPaths.line([

        Blockly.utils.svgPaths.point(0, height),

        Blockly.utils.svgPaths.point(dir * width, 0),

        Blockly.utils.svgPaths.point(0, -height),

      ]);

      if(in_out_length === 1){

        console.log(path);

        return path;

      }else{

        for(let i = 1; i < in_out_length; i++){

          path = path+createNotch(dir);

        }

        console.log(path);

        return path;

      }

    }

    function createNotch(dir){

      return Blockly.utils.svgPaths.line([

        Blockly.utils.svgPaths.point(dir * (width-10), 0),

        Blockly.utils.svgPaths.point(0, height),

        Blockly.utils.svgPaths.point(dir * width, 0),

        Blockly.utils.svgPaths.point(0, -height),

      ]);

    }

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/dbef4d96-385f-4444-96e3-4e0d2fa622cen%40googlegroups.com.