Icons (not just colour) on custom blocks & launching validator

[Jayanth Acharya]

Hi,

Exploring the possibility of using Blocky as a visual editor to generate some XML (that could embed Typescript). Thiking of using custom blocks for that, but based on what I've read so far, it seems that one can set a specific colour for the block but wondering if there is an easy way to add a small icon on a custom block ?

If the end goal is to generate XML (which has a proprietary DTD to validate the generated XML), how can I add a button in the editor to validate the generated XML ?

Coming to the generator, since the goal is to generate XML that might embed some typescript, wondering as to how to go about it. It'd be preferable to use Blockly to also visually represent the logic for which Typescript code is generated, but such code is to be generate embedded in generated XML (that is determined by the Custom blocks).

I've just about scratched the surface of Blockly from a developer standpoint, though I've understood pretty well how Blockly works from the user point of view. Some guidance would be very help.

Thanks,

J

[Christopher Allen]

Hi J,

You ask a bunch of interesting questions, which I will do my best to answer.  Some of them are a little out-of-scope for us because they don't directly concern Blockly, and some I may only be able to offer some vague suggestions about, but with luck some other developers on the forum who have done similar work will offer their advice as well.

…wondering if there is an easy way to add a small icon on a custom block ?

You can use an image field to add a custom icon to a block.  You may wish to read this previous discussion about adding icons to blocks which includes an example of how to do that.

 

If the end goal is to generate XML (which has a proprietary DTD to validate the generated XML), how can I add a button in the editor to validate the generated XML ?

Why not have the generated XML automatically validated, without needing to press a second button?  In any case, although adding buttons to your app is more of a webdev question than a Blockly question, the Generate Javascript demo shows a simple example of how to add buttons to an app which also uses Blockly.

Coming to the generator, since the goal is to generate XML that might embed some typescript, wondering as to how to go about it. It'd be preferable to use Blockly to also visually represent the logic for which Typescript code is generated, but such code is to be generate embedded in generated XML (that is determined by the Custom blocks).

Depending on what you need the TypeScript code to do, you might be able to make a TypeScript generator by adapting the existing JavaScript generator.  The main challenge will be if you need the user to be able to specify types: in that case you will also need to provide your own custom versions of all the affected blocks, that include additional fields that will allow the user to specify types where required.

(There is also a potentially thorny issue with setting the types of the inputs and outputs (jigsaw-puzzle shaped connectors) of the blocks: Blockly has a very simplistic type system, where types are just arrays of strings like ['String', 'Number'], denoting the allowed types for an input or output, and an output can be connected to an input if there is any overlap between the two lists.  If you want to use the connection checker  you'll need to find some way to represent TypeScript types in a way that's compatible with this very rudimentary system.)

 

I hope this may help you.  Do reply if you have further questions—even if if no one on the Blockly team can answer your question there's a good chance there is a fellow Blockly developer out there who has some good ideas!

Best wishes,

Christopher