What is the correct html code to access Blockly Factory code?

Question

What is the correct html code to access Blockly Factory code?

35 Views Asked by ttom At 10 January 2024 at 13:23

Using VSCode and Block Factory [https://blockly-demo.appspot.com/static/demos/blockfactory/index.html].

I've have this in 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 (Block Factory code):

'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];
};

A debug console error message -> https://snipboard.io/i5gmtQ.jpg.

I'm new to JavaScript and to Blockly. What is the correct html code to access the Block Factory code?

Original Q&A

There are 1 best solutions below

**ttom** · Answer 1 · 2024-01-13T16:27:35.477000

Change index.html to:

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

What is the correct html code to access Blockly Factory code?

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in BLOCKLY

Trending Questions

Popular # Hahtags

Popular Questions