Creating or Extending custom fields

97 views
Skip to first unread message

Sharad Ranjan

unread,
Nov 21, 2021, 12:41:24 PM11/21/21
to Blockly
Hey everyone, I wanted to create something similar to App Inventor's custom web field, that has a translucent bubble with a getter, setter for a variable scoped to that function.
Custom-Fields.png
I tried to read the developers' guide and check custom field source codes but they weren't easy enough for me to follow.
Because the Turtle example was mostly dealing with SVG & Pitch demo seemed to be extending a text-field & managing mouse movement. Which are totally irrelevant to what I want to achieve.

Any help on how to code this is much appreciated. Specifically a more detailed guide on customizing editor & on-block display or sample code example.

Thanks,
Have a good day!

Abby Schmiedt

unread,
Nov 22, 2021, 12:27:19 PM11/22/21
to Blockly
Hello!

@pigeonmal did some work on this that might be helpful for you. Their work can be found in this github repository

Cheers,
Abby

Mark Friedman

unread,
Nov 22, 2021, 1:34:17 PM11/22/21
to blo...@googlegroups.com
You might also want to take a look at the block-lexical-variables plugin, based on the App Inventor code, which implements variable scoping along with variable flydowns with getter and setter blocks.  If all you want are local variables and scoped procedure and loop parameters then the plugin should give you everything you want right out of the box.  If you want to define your own blocks that have those capabilities, it's a bit more complicated, but I would be happy to help you with it.

Also see my announcement of the plugin in this forum.

-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 on the web visit https://groups.google.com/d/msgid/blockly/d0c3b7ac-7e2a-40c1-b38c-8837bb65d6den%40googlegroups.com.

Sharad Ranjan

unread,
Nov 23, 2021, 10:40:43 AM11/23/21
to Blockly
Hey Abby & Mark, thank you so much for referring & creating these, it's exactly what I was looking for.

Have a good day!
-Sharad

fu6...@gmail.com

unread,
Nov 28, 2021, 5:20:12 AM11/28/21
to Blockly
BlocksFlydown.mp4

Sharad Ranjan

unread,
Nov 30, 2021, 12:44:15 PM11/30/21
to Blockly
Thank you fustyles for putting this together. I really appreciate it!
Message has been deleted

fu6...@gmail.com

unread,
Dec 7, 2021, 11:52:20 AM12/7/21
to Blockly
BlocksFlydown.mp4

fu6...@gmail.com

unread,
Dec 7, 2021, 1:08:28 PM12/7/21
to Blockly
I wrote a new sample code. Use FieldImage instead of FieldTextInput to show flydown.
https://github.com/fustyles/webduino/tree/master/LinkIt7697/test_myBlocksFlydownImage

BlocksFlydown.mp4
Reply all
Reply to author
Forward
0 new messages