Block description/help inside Toolbox

[Santiago Hitta]

Hi, is there any way to add a help feature for the blocks inside the toolbox?

I have an iconic language, the blocks have icons and then dropdown fields or widget fields, so when the user clicks a block on the workspace they get an interface to configure the block and a textual description. See attachment "robotito vpl.JPG", you can see how for a new user it could be hard to guess what every block does.

The problem is that new users end up dragging all the blocks to the workspace just to be able to read the descriptions of the blocks inside the dropdowns or widgets (see attachment "dropdown.JPG" for example).. It would be better if they had an easier mechanism to see some help or description text for each bock in the toolbox, maybe pressing a button or tapping(and holding) on the block.

Any ideas? 

Thanks!

[Clément Contet]

Hi, did you try to add tooltips? (see for example https://google.github.io/blockly-samples/examples/custom-tooltips-demo/)

[Santiago Hitta]

Thank you very much, but I forgot to mention: It's an Android app, so there is no "hover" over the blocks. I just tried it just in case and tested the "touch and hold" over the test block but nothing happened. In my desktop computer it does show the tooltip when hovering, so it is correctly configured.

Any other ideas for an Android app?

[Beka Westberg]

Hello,

Two ideas!

1) You could add labels to the toolbox explaining what the different blocks do.

2) You could add help options to the blocks. These link to information about the block. The option comes up in the right-click context menu, which appears on "touch and hold".

I hope that gives you some places to start! If you have other ideas about what might make a better UX, feel free to file a feature request on the github =)

Best wishes,

--Beka

[Santiago Hitta]

Hi Beka, it's a privilege to have you (and also other Blockly veterans) around these forums helping developers, you have been around for a long time and know a lot about Blockly, I'm very grateful.

I tried option 2 and made a small test. I associated a help function for 2 of my blocks in the js definition of the blocks, like this:

Blockly.Blocks[BLOQUE_SENSOR_COLOR] = {
init: function() {
...
this.setHelpUrl(function () {alert('FIRST BLOCK');return null;});
...
}
};

Then I installed this in my tablet and tested. It's exactly what I needed, thanks for that. But there is one problem, sometimes when i tap one of these blocks it shows the alert message for the other block... You can see this 20 seconds video showing the problem: https://www.youtube.com/watch?v=nofWs1mUoz4

Any ideas what could be causing this problem? Or at least in which files of the core is the logic for firing the event, so I can start looking around.
Thanks!

[Mark Friedman]

Santiago,

  The first thing to note is that the purpose of setHelpUrl is to provide a URL string (or a function returning a URL string) which will be used to populate a window with help documentation for a block when the "help" item is selected via the block's context menu.  It's not intended to be used to provide your own UI, such as an alert.  It's not completely clear to me why, exactly, you're seeing the behavior shown in the video, but I will note that if you pass a function to setHelpUrl that function may be called multiple times, probably at times that you don't necessarily expect.  There are also some (purposeful) setTimeout delays in the code for handling long presses that might also be screwing up the timing, especially when combined with the handling of your alert call.

  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 on the web visit https://groups.google.com/d/msgid/blockly/0057d188-2e06-4fed-9b96-8eda1b036d8en%40googlegroups.com.

[Santiago Hitta]

Hi Mark, 

I just made a quick test, my idea wasn't to use alert, but when I saw that behavior I assumed that the same would happen when I finally design the help pages and return the url (that clicking on a block would display the wrong help page some times). But maybe you are right and I just messed everything up by using that alert, in a week I will have time to continue my project, I will test with a function returning a url and let you know how it goes.

Thank you very much!