Add icons to blocks just like the scratch blockly

[rbnak]

how can i implement this icon + seperator feature at the start of each block?

just like scratch blockly does it

[Beka Westberg]

Hello,

I think the easiest way to implement this would be using an image field or two (one for the icon, and one for the vertical bar).

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

On Tue, Nov 23, 2021 at 2:22 AM rbnak <goldtec...@gmail.com> wrote:

how can i implement this icon + seperator feature at the start of each block?

just like scratch blockly does it

--
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/c660c1eb-3a66-4e74-9f52-228e77d0f84dn%40googlegroups.com.

[feni...@google.com]

Here's the definition of one of the Scratch blocks that has an icon + separator. The separator is a custom field type, but it's a simple field and easy to copy.

Blockly.Blocks['extension_wedo_motor'] = {

  /**

   * @this Blockly.Block

   */

  init: function() {

    this.jsonInit({

      "message0": "%1 %2 turn a motor %3",

      "args0": [

        {

          "type": "field_image",

          "src": Blockly.mainWorkspace.options.pathToMedia + "extensions/wedo2-block-icon.svg",

          "width": 40,

          "height": 40

        },

        {

          "type": "field_vertical_separator"

        },

        {

          "type": "field_image",

          "src": Blockly.mainWorkspace.options.pathToMedia + "rotate-right.svg",

          "width": 24,

          "height": 24

        }

      ],

      "category": Blockly.Categories.more,

      "extensions": ["colours_more", "shape_statement", "scratch_extension"]

    });

  }

};

[rbnak]

Thanks for your quick reply

what is the " field_vertical_separator"?

is it something related to scratch only?

if yes how can you post the json of that as well?

[Beka Westberg]

Hi again :D

Field separator is a custom field that Scratch uses. You can view the definition of it here. You should be able to pretty easily copy that code and use it in your own implementation, but you might have to do a bit of debugging/updating since Scratch uses an old version of Blockly.

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

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/ec7f8fb4-401e-480c-9383-46987348ae67n%40googlegroups.com.

[rbnak]

i was able to copy the custom field file and change

some dependencies in it to work with the current blockly version.

thanks again😄

[Beka Westberg]

Yay! I'm glad you found a solution that works for your project :D If you have any other questions feel free to ask!

Also, I was curious, what's the project that you're working on? I love seeing people do fun UI things like adding icons :D so I'm interested in what you're using them for.

Best wishes,

--Beka

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/e19db5a6-cb8a-444e-81c2-b8e6d9b51bf4n%40googlegroups.com.

[rbnak]

i am working on an educational robotic platform.

i needed the icons to simplify children understanding of each block;)

 

thanks again;)

[Beka Westberg]

Wow that's so cool! Thank you for sharing :D I hope work on your project goes well!

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/240131bb-f839-48a5-80eb-d09a04cb4b5an%40googlegroups.com.