Live code generation box injection

[Dominik Seelos]

Hi, I'm a python programmer and I'm new to javascript, blockly is really what pulled me into it, Blockly really is amazing!

However, I'm not an expert yet and I was wondering if someone ever did what I'm searching for.

I searched around and found nothing complete and all my personal attempt fail.

What I'm searching for is exactly this demo:

https://blockly-demo.appspot.com/static/demos/code/index.html

With a "generated python code" box changing live at the right of the screen

Like the ''try blockly'' https://developers.google.com/blockly/

How and where (in code) should I inject this box?

I really think that, as a demo, it would be awesome for people who want to blocklyfy their workflow

Thanks!

[Coda Highland]

This is really easy.

Create the box however you see fit. It's just another element in your page's DOM. If you want syntax highlighting, consider looking at something like CodeMirror.

Write a function that uses Blockly.Python.workspaceToCode(workspace) to generate the code in the target language and put it into the box. (Change "Python" to whatever is appropriate.)

Then use workspace.addChangeListener to call that function every time the workspace changes. The generator is really fast so there's really not much penalty to doing it on every change.

/s/ Adam

--
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/64b7609c-da4c-4161-8f28-ee23ee8bf0bb%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Dominik Seelos]

Ok! Thanks a lot! I believe I tried, I'll retry again, thanks

Le lundi 10 juin 2019 16:35:42 UTC-4, Coda Highland a écrit :

This is really easy.

Create the box however you see fit. It's just another element in your page's DOM. If you want syntax highlighting, consider looking at something like CodeMirror.

Write a function that uses Blockly.Python.workspaceToCode(workspace) to generate the code in the target language and put it into the box. (Change "Python" to whatever is appropriate.)

Then use workspace.addChangeListener to call that function every time the workspace changes. The generator is really fast so there's really not much penalty to doing it on every change.

/s/ Adam

On Mon, Jun 10, 2019 at 12:52 PM Dominik Seelos <dominik...@etsmtl.net> wrote:

Hi, I'm a python programmer and I'm new to javascript, blockly is really what pulled me into it, Blockly really is amazing!

However, I'm not an expert yet and I was wondering if someone ever did what I'm searching for.

I searched around and found nothing complete and all my personal attempt fail.

What I'm searching for is exactly this demo:

https://blockly-demo.appspot.com/static/demos/code/index.html

With a "generated python code" box changing live at the right of the screen

Like the ''try blockly'' https://developers.google.com/blockly/

How and where (in code) should I inject this box?

I really think that, as a demo, it would be awesome for people who want to blocklyfy their workflow

Thanks!

--
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 blo...@googlegroups.com.

[Dominik Seelos]

Hi Adam,

I did not succeed to add the code workspace next to the block workspace.

HTML tutorials online are recommending me to do the following to place my box right to it, but I don't know how to insert the ''code'' box (I'm editing index.html)

<div style="width:100%">

<table id="table" style="display: inline-block">

        <tbody>

        <tr> <td>1</td> </tr>

        </tbody>

</table>

<table id="table2" style="display: inline-block;">

        <tbody>

          <tr> <td>2</td></tr>

        </tbody>

</table>

</div>

Any clue what table/td/tr should be used?

I'm aware I'm lacking some HTML knowledge, but inserting that live python generation box if the final goal of my HTML life

[Coda Highland]

That tutorial is demonstrating a somewhat strange way to do it. It does work, but it's somewhat overkill.

Assuming your HTML looks something like the "Fixed Blockly" demo (https://blockly-demo.appspot.com/static/demos/fixed/index.html) then my suggestion is this:

Find this:

<div id="blocklyDiv" style="height: 480px; width: 600px;"></div>

And make it this:

<div>

<div id="blocklyDiv" style="height: 480px; width: 600px; display: inline-block; vertical-align: top"></div>

<div id="codeDiv" style="width: 600px; display: inline-block; vertical-align: top"></div>

</div>

Then in your Javascript code:

var codeBox = document.getElementById('codeDiv');

Then you can use codeBox.innerHTML to put something inside.

/s/ Adam

--

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/c789deb7-705d-46ca-b741-8f22feddf721%40googlegroups.com.

[Seelos, Dominik]

Hi Adam,

I've done the modifications, but still can't see the code box right of the Block box. Thanks for trying to solve this with me!

If anyone has the code running behind the ''Try Blockly'' https://developers.google.com/blockly/ I'd be autonomous to finish my project on my own with it.

The code I'm trying to modify into what I want is https://blockly-demo.appspot.com/static/demos/code/index.html (+ all my personal blocks that I know how to insert)

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/CAFE_sBGHrW%3DBv4tsZY-v5XDW_f1hcL22z_JU3bV1MGLe8fAJ_Q%40mail.gmail.com.

[Coda Highland]

Oh, no, don't inject the workspace into the codeDiv. That won't work for two reasons: first, the workspace is already injected into blocklyDiv and it can't be in two places at once; and second, you don't want Blockly in that workspace -- you want Python code!

Try this:

<div id="codeDiv" style="width: 600px; display: inline-block; vertical-align: top; border: 1px solid black; white-space: pre; font-family: monospace; background: #ffffe0">Waiting...</div>

It works the same way, but I added some formatting for you. This will put a border on it, put a light yellow background behind the text, and use a monospaced font and predefined whitespace (instead of using HTML's normal whitespace-collapsing rules). I also put a little bit of initial text in it to make sure it's not empty when it gets added.

Now, in the interest of getting you up and running, and because you're new to web development, I'll go ahead and give you some more of the answer:

var codeDiv = document.getElementById('codeDiv');

function updateCodeDiv() {

  codeDiv.innerText = Blockly.JavaScript.workspaceToCode(workspace);

}

workspace.addChangeListener(updateCodeDiv);

This will generate JS code instead of Python code. The demo environment doesn't load the Python generator. Take it as a challenge to see if you can figure out how to get Python to work. :)

/s/ Adam

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/CAAfrKFkGMsM%3Di0EPzocRrp8rRmTQ-ykCQxkzzmVit9DSBjMi7Q%40mail.gmail.com.

[Dominik Seelos]

Ok, challenge accepted!

Thanks for the formatting, it really helps for a beginner to see what happens.

However, I still don't see the change (photo)

Also, the page we use as example (fixed demo) is different than the target one I'd like to use (code demo), I'm uncertain of the re-usability of our solution

It's unfortunate that the demo on front page doesn't use generators

Thanks again for the ongoing replies, I really appreciate your support

[Coda Highland]

The general solution is portable to any implementation you like. I have something very similar in my own project. (Or at least, I used to, before I started getting fancier with it.) The only thing to worry about is finding the right place to put the code.

/s/ Adam

--

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/b4f5d9fd-0d50-4d28-b944-c065c5c44899%40googlegroups.com.

[Dominik Seelos]

Is your project open-source? If so, could I get it?

I'm still unable to inject my workspace and see it

[Coda Highland]

It is, and if you want to take a look at it the repository is at https://bitbucket.org/ahigerd/html52d/src/master/, but I don't think it would be very helpful to you. I don't have a live-updating code box anymore, for one thing, and for another it's 7000+ lines of code in a language you're only just starting to learn, where the relevant part is maybe three lines long and buried in a lot of metaprogramming magic.

How about the other way around? Do you have your project somewhere I can take a quick look to see if there's something obvious that just needs a tweak?

/s/ Adam

On Sun, Jun 16, 2019 at 3:53 PM Dominik Seelos <dominik....@etsmtl.net> wrote:

Is your project open-source? If so, could I get it?

I'm still unable to inject my workspace and see 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/b6508a32-ecbe-48cd-8cd0-354621cd7034%40googlegroups.com.

[Ashish sipani]

Thank you for replying me but my  query is " we have found extra indentation in python code generator".

Please give me solution about this condition. My code is here : 

Blockly.Blocks['start'] = {

init: function () {

this.appendDummyInput()

.appendField('on Start');

this.setColour(210);

this.setTooltip('');

this.setHelpUrl('');

this.appendStatementInput('DO');

}

};

// Code for on Start

Blockly.Python['start'] = function (block) {

var branch = Blockly.Python.statementToCode(block,'DO');

branch = Blockly.Python.addLoopTrap(branch, block.id) || Blockly.Python.PASS;

var code = branch + "\n";

return code;

};

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/CAFE_sBE5ZtpxzZGX2GtiKo3s3pNYksxLr%2BOQmbC7YO8bnXZMuA%40mail.gmail.com.

[Coda Highland]

I'm afraid I didn't reply to you; I was replying to someone else. I think you may have accidentally looked at the wrong thread. In the interest of avoiding confusion between the people we're trying to help, could you go find your thread and reply to it?

/s/ Adam

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/CA%2BA%2BWr7FDQNmTUoufQHgfmbLthtgn0KbSNZsqNo0bVciu6HuSA%40mail.gmail.com.

[Dominik Seelos]

Hi Adam,

Thank for the proposition I think it's a great idea. I do have a project, but it really is my custom blocks + the code demo: https://blockly-demo.appspot.com/static/demos/code/index.html

Having the second ''live code'' being generated next to it in a new box would do no merge conflict, it's that similar

My intent is to do a 20 minutes tech-talk about Blockly at the Montreal python meet-up at the end of the month or next fall.

I believe having the live generation is very visual and could get people to understand how Blockly can help python programmer by 1 drag & drop (I'd also show them how to build a block)

What do you think about that?

Thanks,

[Coda Highland]

Oh, huh. How does the code demo do syntax highlighting like that? I hadn't paid attention to that before. Looks like they're using https://github.com/google/code-prettify.

I definitely agree that having live code updates would be a good idea for a presentation like that.

Given where you are in your project right now I think I would recommend starting over on the page. Start with the Resizable Blockly guide (https://developers.google.com/blockly/guides/configure/web/resizable) and then change the geometry to accommodate the code panel. (Just do a little math, divide the width by 2 and position the other box with its left coordinate set appropriately. I can help with this if you need it.) From there, the code I gave you before should work to get the live-updating code. Then you should be able to just put your existing custom blocks and toolbox in.

/s/ Adam

--

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/1666bff7-1c73-4f16-a710-ae841e793f5f%40googlegroups.com.

[Erik Pasternak]

And a bit late, but the code for the demo on the developer page is uncompressed so you can see it by inspecting the page here: https://google-developers.appspot.com/blockly/blockly-demo/blockly-demo

The acorn_interpreter comes from Neil's JS Interpreter.

Cheers,

Erik

On Monday, June 17, 2019 at 4:25:19 PM UTC-7, Coda Highland wrote:

Oh, huh. How does the code demo do syntax highlighting like that? I hadn't paid attention to that before. Looks like they're using https://github.com/google/code-prettify.

I definitely agree that having live code updates would be a good idea for a presentation like that.

Given where you are in your project right now I think I would recommend starting over on the page. Start with the Resizable Blockly guide (https://developers.google.com/blockly/guides/configure/web/resizable) and then change the geometry to accommodate the code panel. (Just do a little math, divide the width by 2 and position the other box with its left coordinate set appropriately. I can help with this if you need it.) From there, the code I gave you before should work to get the live-updating code. Then you should be able to just put your existing custom blocks and toolbox in.

/s/ Adam

On Mon, Jun 17, 2019 at 10:07 AM Dominik Seelos  wrote:

Hi Adam,

Thank for the proposition I think it's a great idea. I do have a project, but it really is my custom blocks + the code demo: https://blockly-demo.appspot.com/static/demos/code/index.html

Having the second ''live code'' being generated next to it in a new box would do no merge conflict, it's that similar

My intent is to do a 20 minutes tech-talk about Blockly at the Montreal python meet-up at the end of the month or next fall.

I believe having the live generation is very visual and could get people to understand how Blockly can help python programmer by 1 drag & drop (I'd also show them how to build a block)

What do you think about that?

Thanks,

--
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+unsubscribe@googlegroups.com.

[Uwe K]

We have something similar to what you're looking for: https://app.code-it-studio.de/project/21039

It's not ready for the world, e.g. there's no syntax highlighting and it doesn't support Python yet (only JS). The Auto checkbox on the right turns on live code generation.

[Dominik Seelos]

Hi,

@Adam, I don't know what code-prettify if, thank for the advice, I will attempt to add a new code box on https://developers.google.com/blockly/guides/configure/web/resizable this evening after work

@Erik That is super cool! That is exactly what I'm searching for, but offline. I did inspect and copy-paste the HTML in a blockly-master folder and the CSS doesn't seem to work well, see picture bellow, I'll retry this evening

@Uwe your code is really nice, is it open-source? If so, I'd love to get the URL.

[Uwe K]

Our code isn't open source, but it works just like Adam described it in the first reply: there's a div containing the source text, that gets overwritten every time the workspace change event occurs.

[Santhosh v pillai]

Hi Coda,

In our blockly application, this live python view added, like a right slider/curtain. But sometimes after closing the right slider (which shows the python code), the workspace does not come back to the previous position. Can you advise how can adjust the workspace with this right curtains sliding operation?

On Friday, June 14, 2019 at 4:25:07 AM UTC+5:30, Coda Highland wrote:

Oh, no, don't inject the workspace into the codeDiv. That won't work for two reasons: first, the workspace is already injected into blocklyDiv and it can't be in two places at once; and second, you don't want Blockly in that workspace -- you want Python code!

Try this:

<div id="codeDiv" style="width: 600px; display: inline-block; vertical-align: top; border: 1px solid black; white-space: pre; font-family: monospace; background: #ffffe0">Waiting...</div>

It works the same way, but I added some formatting for you. This will put a border on it, put a light yellow background behind the text, and use a monospaced font and predefined whitespace (instead of using HTML's normal whitespace-collapsing rules). I also put a little bit of initial text in it to make sure it's not empty when it gets added.

Now, in the interest of getting you up and running, and because you're new to web development, I'll go ahead and give you some more of the answer:

var codeDiv = document.getElementById('codeDiv');

function updateCodeDiv() {

  codeDiv.innerText = Blockly.JavaScript.workspaceToCode(workspace);

}

workspace.addChangeListener(updateCodeDiv);

This will generate JS code instead of Python code. The demo environment doesn't load the Python generator. Take it as a challenge to see if you can figure out how to get Python to work. :)

/s/ Adam

On Thu, Jun 13, 2019 at 5:33 PM Seelos, Dominik <dominik...@etsmtl.net> wrote:

Hi Adam,

I've done the modifications, but still can't see the code box right of the Block box. Thanks for trying to solve this with me!

If anyone has the code running behind the ''Try Blockly'' https://developers.google.com/blockly/ I'd be autonomous to finish my project on my own with it.

The code I'm trying to modify into what I want is https://blockly-demo.appspot.com/static/demos/code/index.html (+ all my personal blocks that I know how to insert)

Le jeu. 13 juin 2019 à 11:49, Coda Highland <chig...@gmail.com> a écrit :

That tutorial is demonstrating a somewhat strange way to do it. It does work, but it's somewhat overkill.

Assuming your HTML looks something like the "Fixed Blockly" demo (https://blockly-demo.appspot.com/static/demos/fixed/index.html) then my suggestion is this:

Find this:

<div id="blocklyDiv" style="height: 480px; width: 600px;"></div>

And make it this:

<div>

<div id="blocklyDiv" style="height: 480px; width: 600px; display: inline-block; vertical-align: top"></div>

<div id="codeDiv" style="width: 600px; display: inline-block; vertical-align: top"></div>

</div>

Then in your Javascript code:

var codeBox = document.getElementById('codeDiv');

Then you can use codeBox.innerHTML to put something inside.

/s/ Adam

On Wed, Jun 12, 2019 at 11:02 PM Dominik Seelos <dominik...@etsmtl.net> wrote:

Hi Adam,

I did not succeed to add the code workspace next to the block workspace.

HTML tutorials online are recommending me to do the following to place my box right to it, but I don't know how to insert the ''code'' box (I'm editing index.html)

<div style="width:100%">

<table id="table" style="display: inline-block">

        <tbody>

        <tr> <td>1</td> </tr>

        </tbody>

</table>

<table id="table2" style="display: inline-block;">

        <tbody>

          <tr> <td>2</td></tr>

        </tbody>

</table>

</div>

Any clue what table/td/tr should be used?

I'm aware I'm lacking some HTML knowledge, but inserting that live python generation box if the final goal of my HTML life

--
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 blo...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/c789deb7-705d-46ca-b741-8f22feddf721%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--
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 blo...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/CAFE_sBGHrW%3DBv4tsZY-v5XDW_f1hcL22z_JU3bV1MGLe8fAJ_Q%40mail.gmail.com.
For more options, visit https://groups.google.com/d/optout.

--
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 blo...@googlegroups.com.

[Coda Highland]

So first off, congratulations on getting it hooked up and functioning this far!

Unfortunately, I'm not entirely sure I can help based on that description. There are too many possible things that could be going on for me to make a useful guess. Do you have your project somewhere I can see a demo?

/s/ Adam

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/b3111667-bc86-4790-a8e0-dc10e71a3bdb%40googlegroups.com.

[Santhosh v pillai]

I don't have a web link . I attached the screenshots. I want to adjust the workspace with the closing and opening of the right container

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/b3111667-bc86-4790-a8e0-dc10e71a3bdb%40googlegroups.com.

[Coda Highland]

Hmm. Well, unfortunately, this really isn't a Blockly problem at this point. I don't have any common ground to work from to help you if I can't actually look into what's happening in the browser -- screenshots don't help; your descriptions were good enough to tell me what it looks like.

/s/ Adam

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/cf0ee7ef-d6db-4624-853a-34c918f4ccd5%40googlegroups.com.

[Santhosh v pillai]

http://login.makblocks.com/user/user_dashboard

Login:makblocks

pass: testing@makblocks.

can you please review this?. It would be a great help. We almost finished the project. But some issues are there.Don't know how to solve or how to approach to solve these

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/cf0ee7ef-d6db-4624-853a-34c918f4ccd5%40googlegroups.com.

[Coda Highland]

I'm afraid I'm not in a good position to do a thorough review of your entire project at this point. I'd be happy to take a look at some specifics if you have questions and you can give me instructions on what you need help with.

/s/ Adam

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/71b8dccd-2493-4906-ad44-83ef88607e0c%40googlegroups.com.

[Santhosh v pillai]

Kk adam,Thank you for your reply.

You received this message because you are subscribed to a topic in the Google Groups "Blockly" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/blockly/iUIGDjr7x04/unsubscribe.
To unsubscribe from this group and all its topics, send an email to blockly+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/CAFE_sBGF3z5u9WTdE-rwv07OHRhMw_CC5miJ9OR_L6ACAgRVCg%40mail.gmail.com.