Blockly Factory

517 views
Skip to first unread message

Clyde Eisenbeis

unread,
Jan 4, 2024, 8:47:01 AM1/4/24
to Blockly

At 3:32 - I have created the following https://snipboard.io/4S9WX1.jpg. I want to replicate this using VSCode. 

My index.html contains this:
<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title>Toolbox Customization Codelab</title>
    <script src="https://unpkg.com/blockly/blockly.min.js"></script>
    <script src="index.js"></script>
    <link rel="stylesheet" href="toolbox_style.css">
    <style>
      html,
      body {
        height: 100%;
      }
      body {
        background-color: #fff;
        font-family: sans-serif;
        overflow: hidden;
      }
      h1 {
        font-weight: normal;
        font-size: 140%;
        margin: 10px;
      }
      #blocklyDiv {
        float: bottom;
        height: 90%;
        width: 100%;
      }
    </style>
  </head>
  </html>


My index.js contains this:
'use strict';

1) Does this look correct for placing some Block Factory code?  If not, what should I change?

2) Where do I place the Block Factory Language Code?

3) Where do I place the Block Factory Generator Stub: JavaScript code?

Thanks!

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~





 

Clyde Eisenbeis

unread,
Jan 4, 2024, 8:50:22 AM1/4/24
to Blockly
I just noticed that on my Block Factory, the title is Block Definition: JSON.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Beka Westberg

unread,
Jan 5, 2024, 11:27:19 AM1/5/24
to Blockly
Yes, you should be able to put all of your code inside your index.js file.

The JSON definition needs to be put inside a call to Blockly.defineBlocksWithJsonArray.

Best wishes,
--Beka

Clyde Eisenbeis

unread,
Jan 6, 2024, 8:04:48 AM1/6/24
to Blockly
I put both sections of the Block Factory code into index.js.  

Inside the index.js I inserted the Block Definition:JSON code inside "Blockly.defineBlocksWithJsonArray([ ... ])":
Blockly.defineBlocksWithJsonArray([
{
  "type": "color_rgb",
...
  "helpUrl": ""
}
]);

Inside the HTML, I added "var workspace = Blockly.defineBlocksWithJsonArray()" after  </head>:
<html>
  <head>
...
  </head>
  <body>
    <script>
      var workspace = Blockly.defineBlocksWithJsonArray();
    </script>
  </body>
</html>


I end up with a blank screen.  What should I change?  Thanks!

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Maribeth Moffatt

unread,
Jan 8, 2024, 1:21:08 PM1/8/24
to Blockly
`Blockly.defineBlocksWithJsonArray` is used to define custom blocks. In index.js, you've defined a block called "color_rgb". Now when you reference this block by name elsewhere, such as in the toolbox definition, Blockly will know how to construct a block of that type.

To create a workspace, you need to use `Blockly.inject` like you were doing before. You also need a div to inject Blockly into. Refer to some of your earlier working code or a codelab to see what that looks like.

Best,
Maribeth

Clyde Eisenbeis

unread,
Jan 9, 2024, 8:06:44 AM1/9/24
to Blockly
I've modified index.html:
<html>
  <head>
  ...
      body {
        background-color: #fff;
        font-family: sans-serif;
        overflow: hidden;
      }
      h1 {
        font-weight: normal;
        font-size: 140%;
        margin: 10px;
      }
      #defineBlocksWithJsonArray {
        float: bottom;
        height: 90%;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="defineBlocksWithJsonArray"></div>
    <script>
      var toolbox = "color_rgb";
      var workspace = Blockly.inject('defineBlocksWithJsonArray', {toolbox: toolbox});
    </script>
  </body>
</html>

In index.js:
Blockly.defineBlocksWithJsonArray([
{
  "type": "color_rgb",
...
  "helpUrl": ""
}
]);

Still does not work.   Exactly what is the code I should use?
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Maribeth Moffatt

unread,
Jan 9, 2024, 7:58:07 PM1/9/24
to Blockly
Hello,

If you check the developer console for your page, do you see any errors or warnings? My guess is that you will see an error about the toolbox definition being invalid.

You need to supply a valid toolbox definition. Currently you are passing simply the name of a single block, which is not a valid definition. Please refer to the Toolbox documentation or one of your earlier working code samples for examples of valid toolbox definitions.

Best,
Maribeth

Clyde Eisenbeis

unread,
Jan 10, 2024, 7:48:27 AM1/10/24
to Blockly
I do not understand this response.  I do not know what is the correct code.

Is there a website that provides the foundation (.html and .js code) for Block Factory code?  With that foundation, we insert the Block Factory code into the .js code, and then it works.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Clyde Eisenbeis

unread,
Jan 11, 2024, 8:06:30 AM1/11/24
to Blockly
The following code is my most recent attempt to display https://snipboard.io/4S9WX1.jpg

The index.js:
'use strict';
Blockly.defineBlocksWithJsonArray([
{
  "type": "color_rgb",
  "message0": "Red %1 Green %2 Blue %3",
  "args0": [
    {
      "type": "input_value",
      "name": "RED"
    },
    {
      "type": "input_value",
      "name": "GREEN"
    },
    {
      "type": "input_value",
      "name": "BLUE"
    }
  ],
  "output": null,
  "colour": 230,
  "tooltip": "",
  "helpUrl": ""
}
]);

javascript.javascriptGenerator.forBlock['color_rgb'] = function(block, generator) {
  var value_red = generator.valueToCode(block, 'RED', javascript.Order.ATOMIC);
  var value_green = generator.valueToCode(block, 'GREEN', javascript.Order.ATOMIC);
  var value_blue = generator.valueToCode(block, 'BLUE', javascript.Order.ATOMIC);
  // TODO: Assemble javascript into code variable.
  var code = '...';
  // TODO: Change ORDER_NONE to the correct strength.
  return [code, Blockly.javascript.ORDER_NONE];
};

1) I defined custom blocks with `Blockly.defineBlocksWithJsonArray`.  Was it correct to place "Block Definition: JSON" code inside
"Blockly.defineBlocksWithJsonArray([{   ...   }])"?

2) Is there anything else incorrect or missing in the index.js file?  If there is, which website clarifies this?

The index.html:
<html>
  <body>
    <div id="blocklyDiv"></div>
    <script>
      var toolbox = "color_rgb";
      var workspace = Blockly.inject('blocklyDiv', {toolbox: toolbox});
    </script>
  </body>
</html>

3)  I've defined the toolbox, var toolbox = "color_rgb", as labeled in the index.html file -> "type": "color_rgb".   Is this correct?  If not, which website clarifies this?

4) I have not placed `Blockly.defineBlocksWithJsonArray` (from index.js) anywhere in the index.html file.  Does `Blockly.defineBlocksWithJsonArray` need to be in index.html?  If so, how should it be defined in the index.html file?  Which website clarifies this?

5) Is the "blocklyDiv" correct as placed in three locations?

6) Is anything else incorrect in the index.html file?  If there is, which website clarifies this?
 
7) The DEBUG CONSOLE error message " Uncaught Error Error: DOMParser was unable to parse: color_rgb ".  How do I fix this?  Is there a website that clarifies this?

I hope this accurately describes my questions.  Thanks!

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Maribeth Moffatt

unread,
Jan 11, 2024, 1:58:14 PM1/11/24
to Blockly
1. Yes, this is correct.
2. This looks fine.
3. This is not correct. The name of a single block is not a valid toolbox definition. Please read the documentation about toolboxes for more information and examples of valid toolbox definitions.
4. This question is really about web development, not Blockly. As a brief overview, a browser loads an HTML file. An HTML file can load other resources such as css and javascript code. You can either include the javascript code directly in the html file (as you have done for part of your javascript code) or you can load a file containing javascript code that will be executed when the file is loaded. This is done with <script> tags. If you have questions about this process, you will need to go elsewhere as we cannot answer general web development questions in this forum. MDN is a great resource.
5. Sure. What you call the div or how you style it is up to you. Blockly just needs to know the id of the container you want the workspace injected into.
6. The rest of this file seems fine, other than the toolbox definition.
7. This error occurs because you have given an invalid toolbox definition that cannot be parsed.

Best,
Maribeth

Clyde Eisenbeis

unread,
Jan 12, 2024, 7:58:35 AM1/12/24
to Blockly
3) I changed the toolbox to:
  <body>
    <div id="blocklyDiv"></div>
    <script>
      const toolbox = {
        kind: 'flyoutToolbox',
        contents: [
          {
            kind: 'block',
            type: 'color_rgb'
          }]
      }
      const workspace = Blockly.inject('blocklyDiv', {toolbox: toolbox});
    </script>
  </body>
This works now!  Thanks!

`Blockly.defineBlocksWithJsonArray` is defined in the index.js file.   `Blockly.defineBlocksWithJsonArray` is not listed in the index.html file.  It appears that `Blockly.defineBlocksWithJsonArray` is part of the Blockly foundation code.

The index.html contains:
    <script src="https://unpkg.com/blockly/blockly.min.js"></script>
    <link rel="stylesheet" href="toolbox_style.css">
Are these scripts and links the most recent?  Thanks!

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Clyde Eisenbeis

unread,
Jan 15, 2024, 11:35:18 AM1/15/24
to Blockly
I connected to backpack-demo using VSCode.  When I run index.html (F5), I see "This is a demo of two Blockly instances with a custom Backpack "sharing" Backpack contents."   What is the procedure to see the toolbox defined in index.js?

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Christopher Allen

unread,
Jan 17, 2024, 5:18:17 AM1/17/24
to blo...@googlegroups.com
Hi Clyde,

On Mon, 15 Jan 2024 at 16:35, Clyde Eisenbeis <cte...@gmail.com> wrote:
I connected to backpack-demo using VSCode.  When I run index.html (F5), I see "This is a demo of two Blockly instances with a custom Backpack "sharing" Backpack contents."   What is the procedure to see the toolbox defined in index.js?

Many of the demos—including this one—use the toolbox definitions provided by the @blockkly/dev-tools package, in particular the one in src/toolboxCategories.js.


Christopher

Clyde Eisenbeis

unread,
Feb 8, 2024, 3:32:40 PM2/8/24
to Blockly
When I create an item in Block Factory I see this -> https://snipboard.io/tKqXSb.jpg.

The next day, when I retrieve that item from Block Library I see this -> https://snipboard.io/8fa4xE.jpg ... the Preview is missing.  How do I initiate the "Preview"?

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Maribeth Moffatt

unread,
Feb 8, 2024, 3:58:16 PM2/8/24
to Blockly
Unfortunately this is a bug in block factory. For now, if you rename the block, the preview will reappear.

Best,
Maribeth

Reply all
Reply to author
Forward
0 new messages