custom blocks are not visible.

[Sathya Dayanithi]

Hi 

I tried the blockly developer tools to create some own blocks. I added them in the workspace factory. But when i tried to export the xml and add it to my html, i could not see the blocks, but i can see the categories i created. Inside the category, it shows like there are no blocks.

Kindly help me on this one.

[Beka Westberg]

Hello,

Could you provide the html page you're using, or a link to it? That would really help with debugging! It may be that the xml isn't being referenced properly by the workspace config, or maybe the xml is badly formatted. But it's hard to tell without seeing it :/

Best wishes,

--Beka

--
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/f9dd2ea9-b2ef-4586-923d-5564f7f4fe3en%40googlegroups.com.

[Sathya Dayanithi]

Hi,

I have attached the source code of the HTML i was using.

[Beka Westberg]

Hello,

I looked at the Conversions category, and it looks to be referencing your custom blocks correctly:

```

  <category name="Conversions" colour="#9fa55b">
    <block type="int"></block>
    <block type="string"></block>
    <block type="type_of"></block>
  </category>

```

But looking at your <script> tags, it seems like you may not be importing your block definitions into your page:

```

<script src="https://unpkg.com/blockly/blockly.min.js"></script>

<script src="blockly_compressed.js"></script>

<script src="python_compressed.js"></script>

<script src="blocks_compressed.js"></script>

<script src="msg/js/en.js"></script>

```

If you add a reference to the script where your custom blocks are defined I think that should fix the problem!

I hope that helps! If you have any further questions, please reply!

--Beka

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/94fe9730-23a4-4481-bd14-f2380882bd22n%40googlegroups.com.

[Sathya Dayanithi]

Hi 

But I just created the custom blocks using the developer tools is it what you're mentioning is the generator script? and how do i define my blocks.

[Jason Schanker]

Hi,

The generators define the JavaScript (Python, etc.) code that the blocks produce.  In order for the blocks to appear in your toolbox, you want the block definitions, which would look something like this (in the JavaScript format):

Blockly.Blocks['to_int] = {

  init: function() {

    this.appendValueInput("VALUE")

        .setCheck(null)

        .appendField("int");

    this.setInputsInline(false);

    this.setOutput(true, "int");

    this.setColour(65);

 this.setTooltip("");

 this.setHelpUrl("");

  }

}; 

From your pictures, it appears you already have the new blocks you want to use saved in your Block library.  If so, you can get the definitions for them by clicking on the Block Exporter tab and then selecting all blocks you want to get the definitions for under Block Selector.  Click the Block Definition(s) checkbox, select JavaScript for the Format dropdown, enter a filename such as converter_blocks.js from the dropdown and then export it.  (You can uncheck the generator stub(s) for now, but you'll at least need the JavaScript generators later to run these block-based programs.)  After exporting, you can move the file to the same directory as your HTML file and then import this script after your existing ones as Beka had mentioned with something like <script src = "converter_blocks.js"></script>.

Hope this helps.  Feel free to follow up if you have any additional questions.

Best,

Jason

[Sathya Dayanithi]

Thanks, now i got the blocks visible. For generating code for the blocks I again copied the generator stub code pasted in a new js file called as python_compressed.js. i also added the script in header but i could not see my code getting generated? Do i need to do something else.

[Sathya Dayanithi]

I attach my html and  python_compressed.js

[Jason Schanker]

Yes, to get the generated code for the main workspace you referenced with Workspace, you can use Blockly.Python.workspaceToCode(Workspace).  If you create some textarea and give it an id of code, you could have it display the Python code generated by the current blocks in the workspace with the following code inside the script tag after you inject your workspace:

Workspace.addChangeListener(() => document.getElementById('code').value = Blockly.Python.workspaceToCode(Workspace));

A couple of notes: First, the python_compressed.js file in the Blockly repository contains all of the Python generators for the default blocks so if you're using the generators for these other blocks, you'll want to rename the file with your own Python generators and import this one in addition.  Second, the generated code for the blocks will be the return values from these generator functions, which is currently ... so you'll want to change that.  To learn more about code generators, check out https://developers.google.com/blockly/guides/configure/web/code-generators and https://developers.google.com/blockly/guides/create-custom-blocks/generating-code.  And of course if you have more questions about code generators, feel free to ask them here.

Best,

Jason

[Sathya Dayanithi]

Hi, I still dont get it. I created a text area and added the id as code. Added all the inputs. I ll attach my index.html file. i have done all the steps and i cannot generate code for the blocks

[Sathya Dayanithi]

Sorry about the previous file this is the index.html file. Kindly help me on code generation

[Jason Schanker]

Hi,

There are two changes you'd need to make to the code from the Developer Guide to avoid errors:

function myUpdateFunction(event) {

  var code = Blockly.Python.workspaceToCode(workspace);

  document.getElementById('textarea').value = code;

}

workspace.addChangeListener(myUpdateFunction);

The first is that your main workspace is referred to with a capital W so using a lowercase w will cause a ReferenceError: workspace is not defined.  The second is that you don't have an element with id textarea so document.getElementById('textarea') will be null causing a cannot read property 'value' of null.  However, you could remove the above code entirely and just use the one line I provided since it achieves the same result: 

Workspace.addChangeListener(() => document.getElementById('code').value = Blockly.Python.workspaceToCode(Workspace));

The reason I used code (instead of textarea) for the textarea id is because there should only be one element with a given id on a page, and I don't know if you're planning to have more than one textarea.  It's also more descriptive.  I used a capital W for Workspace since that's what you had used, but the JavaScript convention is to start variable names referring to objects with lowercase letters, which is why you see it that way in the Developer Guide.

Best,

Jason

[Sathya Dayanithi]

Okay I changed the workspace to small w and added the line of code you provided. I have one more question the python_compressed.js will have the python code generators for the existing blocks in workspace right? and also still after making changes i could not see the code even for existing blocks(not the custom blocks). May be i need some clarity on the python_compressed.js

[Jason Schanker]

Yes, if you have a copy of the python_compressed.js file (available at https://raw.githubusercontent.com/google/blockly/master/python_compressed.js) in the same directory as your HTML file, you should have all of the Python generators for the standard blocks.  This file is not really meant for inspection though; it's intended to minimize the number of scripts you have to include and to decrease loading time and server load.  This is accomplished by stripping some whitespace, renaming variables often to single letters, etc.  If you want to see these block generators in their uncompressed form to learn more, check out the files here: https://github.com/google/blockly/tree/master/generators/python .

As for the issue you're facing, I don't see a script include for your custom block generators unless you still have it named python_compressed.js?  If so, I'd change the name of that file to something like custompythongenerators.js and then include that script as well in your HTML.  Then download the copy of the python_compressed.js file and move it to the directory with your HTML file so you'll have the generators for the standard blocks.  If you have any block without a generator in your workspace, no code will be generated.

After you do that, if you see code when you only have standard blocks but do not see it when you add your custom ones, it's very likely that there is an error with your custom block generators.  To see if this is the case, you can keep the Developer console open to see when (if) you get errors.  The Developer console should also let you know if there were any problems including the scripts.

Hope this solves the issue you're facing, but if it doesn't, feel free to follow up.

Best,

Jason