Changing Blockly UI Interface

[PalooDev]

I am going to use Blockly for a visual program with FlowyJS, a minimal visual node creation library, so how do I integrate Blockly with Flowy's UI because I prefer Flowy's ui more than the default Blocky. Is there some sort of API or something

FlowyJS:

Thank You!

[Preet Vadaliya]

I think there is no built in APIs for same but yes you can create custom block which generate custom code using Blockly.

[PalooDev]

could i somehow integrate only the code generators?

[Christopher Allen]

Hi Paloo,

could i somehow integrate only the code generators?

The generators are fairly tightly integrated with the rest of Blockly—particularly the Block and Workspace classes—so it isn't really possible to use them as-is without the rest of Blockly.  That said, however:

• Blockly can run in "headless" mode with no UI, using Block and Workspace instead of BlockSvg and WorkspaceSvg, so you could write some code to convert your flowy Flowchart into Blockly blocks before running the existing generators.  This has the advantage that you could use the full version of Blockly (with UI) as a debugging aid to enable you to preview the generated blocks and make sure they are correct.  To create blocks you could either make direct calls to the Blockly API to create blocks and insert them into a workspace, or you could generate a JSON or XML representation of your blocks and load that using the appropriate deserialization method.
• You could write code generators for Flowy using the ideas (or, thanks to open-source, actual code snippets) from the Blockly generators.  Doing code generation correctly, especially if you want the generated code to be readable, is tricky and there's no good reason not to "cheat" by seeing how we've already solved those problems.  One example of an idea you might want to steal is the way Blockly generators handle order of operations, with each language having an operator precedence table that is used to ensure that parentheses are added only (but always) when needed.

Good luck!

Christopher

[PalooDev]

is there any way to create JavaScript Objects from the library I'm using:

var  person = {    

first_name : "Marty",   

last_name : "Mcfly",    

born : 1968,    died : 1933, 

lovers: ["Jennifer Parker","Baines McFly"] };

or

Object Literal    const obj = {   

 name: "Ram",    age: "20"

And then use those to create Blockly blocks? So Blockly would act as a backend?

Thank You

[PalooDev]

[Christopher Allen]

Hi Paloo,

is there any way to create JavaScript Objects from the library I'm using:

var  person = {    

first_name : "Marty",   

last_name : "Mcfly",    

born : 1968,    died : 1933, 

lovers: ["Jennifer Parker","Baines McFly"] };

And then use those to create Blockly blocks? So Blockly would act as a backend?

It's hard to answer this question without understanding what you would like the corresponding Blockly blocks to look like.  But certainly:

• It's possible to manually create your own custom block types that could represent object literals like this, and
• It's also possible to use the Blockly API (in several different ways, actually) to automatically create and arrange blocks on a workspace based on some input data like this.

I suggest sketching out what you imagine the Blockly block(s) corresponding to this bit of code would look like.  That would be helpful for us in answering any follow-up questions you might have—and even more importantly it will help you clarify exactly what you are trying to achieve.

Good luck!

Christopher

[Mark Friedman]

Just FYI, a while back I posted a link to this gist to the group, which has an implementation of a set of blocks for creating JavaScript objects, getting and setting their properties and converting to/from JSON.  At some point it should probably get converted to a plugin, but might still be useful for folks.  I should also point out that Bart Butenaers improved on that code and published it here.

-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/CAN0w5ebB%3DrPJ0bXJyMm-f2Owb5Ec6kWJBsnuf3sQM1M8XELCoA%40mail.gmail.com.

[PalooDev]

thank you, is there anyway I can call on the API to initialize a specifc Blockly block?

[Christopher Allen]

 

is there any way to create JavaScript Objects from the library I'm using…

And then use those to create Blockly blocks?

I see that Mark F. gave a good answer to your question in another thread, which I am linking to here for the benefit of anyone reading this thread in the future.