Google Blockly?

1

Has anyone thought of using Google Blockly (https://developers.google.com/blockly/) inside Observable? It supports generating JavaScript from a visual programming editor.

2

Here’s a (failed) attempt at getting Blockly to work inside Observable:

I think it’s hitting this issue.

3

Interesting - I had searched for Blockly and your notebook didn’t come up. Thank you for replying!

1 Like
4

Ah, I should have mentioned I made it in response to your post!

(Also, it’s shared but not published, so I don’t think it will appear in public searches)

5

Oh wow - Thank you! That might explain not seeing it in search.

6

This might bring you a step closer:

By the way, I’d advise against using minified versions of libraries that you’re still trying to get to work. Makes debugging a lot easier. :wink:

1 Like
7

If you can live without variables you can find a working version here:

8

thanks for sharing.
Why are variables not working?

9

The notebook says:

Variable blocks don’t work because they require window.prompt().

The reason that window.prompt() doesn’t work on the Observable site because alert / prompt windows have been blocked, presumably for security reasons. More precisely, the notebook code runs in an iframe which does not have the allow-modals token in the sandbox attribute.

Variable blocks might work in a notebook which has been exported to another site though. You could try downloading the “tarball” of the “Hello, Blockly!” notebook and then hosting it on a different server, per “Downloading and Embedding Notebooks”.

10

To add to what @bgchen already explained: The code makes synchronous calls to window.prompt(). To emulate a prompt modal inside an observable iframe you’d have to make the code run asynchronous, and monkeypatching that into Blockly may prove very difficult.

11

I was able to (although kind of poorly) workaround the variable issue by providing my own version of window.prompt, which reads the text content from a text input living in an Observable cell. So things like variable creation and renaming should work. You just need to make sure you have put whatever variable name you want into that input box before you’re going to click on Create variable... or Rename variable... in Blockly.

I think the challenging part is that you almost cannot have a synchronous way to prompt the user for some input. Please let me know if you have better ideas!

I also had a similar workaround for window.alert, so the print() block (which by default generates window.alert) can work.

BTW, here is my workaround code 
{
  const shim = html`
<style>
  .box { box-shadow: 5px 5px 10px #888888; border: 1px solid gray; padding: 20px; margin-top: 20px }
  .caption { border-bottom: 1px solid gray; font-size: 20px; font-weight: bolder; margin-bottom: 10px }
  .title { border-bottom: 1px solid gray; font-size: 18px; font-weight: bolder }
</style>
<div />
`;

  const caption = 'Observable Shim for Blockly';

  const promptBox = html`<div class="box"><div class="caption">${caption}</div>Input value for Blockly's <b>window.prompt</b>: </div>`;
  const input = html`<input type=text />`;
  promptBox.appendChild(input);
  shim.appendChild(promptBox);

  window.alert = (message) => {
    const alertBox = html`<div class="box"><div class="caption">${caption}</div><div><div>Alert from Blockly: <b>${message}</b></div><br /></div>`;
    const okButton = html`<button>Ok</button>`;
    okButton.onclick = () => {
      shim.removeChild(alertBox);
    };
    alertBox.appendChild(okButton);
    shim.appendChild(alertBox);
  };

  window.prompt = (caption, defaultText) => {
    return input.value;
  };

  return shim;
}

And here is my notebook (forked from @mootari’s original Hello Blockly notebook):

Besides the above workarounds, I also added the functionalities to run the generated code and import/export blocks (via Blockly XML).

BTW, how can I insert a link of an Observable notebook here with the nice little thumbnail, like what you guys did in this thread? Thank you!

1 Like
12

This is cool! Thanks for sharing!

You just have to have the link on a line all by itself (this works for Github links too):

13

@bgchen: Thanks for the tip! I tried several markdown combinations but haven’t thought it’s actually that simple. :grinning:

14

https://github1s.com/google/blockly/blob/HEAD/core/variables.js

image
image1463Ă—813 154 KB

Because of this recurse, if you use the same variable_name and click create_variable twice. It would be an endless loop in observable.