Add icons to blocks just like the scratch blockly

59 views
Skip to first unread message

rbnak

unread,
Nov 23, 2021, 2:22:09 AM11/23/21
to Blockly
how can i implement this icon + seperator feature at the start of each block?
just like scratch blockly does it


Untitled.png

Beka Westberg

unread,
Nov 23, 2021, 2:50:38 PM11/23/21
to blo...@googlegroups.com
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

unread,
Nov 24, 2021, 6:58:15 PM11/24/21
to Blockly
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

unread,
Nov 25, 2021, 4:10:52 AM11/25/21
to Blockly
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

unread,
Nov 25, 2021, 9:25:58 AM11/25/21
to blo...@googlegroups.com
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

rbnak

unread,
Nov 25, 2021, 9:31:54 AM11/25/21
to Blockly

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

unread,
Nov 25, 2021, 9:34:51 AM11/25/21
to blo...@googlegroups.com
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

rbnak

unread,
Dec 1, 2021, 6:21:22 AM12/1/21
to Blockly
i am working on an educational robotic platform.
i needed the icons to simplify children understanding of each block;)
 
thanks again;)

Beka Westberg

unread,
Dec 1, 2021, 2:18:37 PM12/1/21
to blo...@googlegroups.com
Wow that's so cool! Thank you for sharing :D I hope work on your project goes well!

Reply all
Reply to author
Forward
0 new messages