codelabs - build a custom generator - adding custom toolbox

[KI]

I'm working through the Codelabs Build a Custom Generator tutorial.

I'm at the following step:

Then update the options struct in the playground to use your new toolbox:

var defaultOptions = {

 comments: true,

 // ...

 toolbox: codelabToolbox,

 // ... 

};

A previous step says this:

Now to start, create a file named custom_generator.js in the same folder as the playground. Include it with a script tag.

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

Note: you must include your custom code after including the Blockly library.

I assume that the Blockly library is already included in advanced_playground.html by the line:

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

So, immediately following the boostrap.js line, I add the line:

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

Then, further down, within the function initPlayground definition I specify the var defaultOptions to have toolbox: codelabToolbox instead of the original toolbox: toolboxCategories (per the tutorial step, as I understand it).

I've attached my custom_generator.js and advanced_playground.html files here as .txt files.

When I do everything above, the advanced playground doesn’t change at all. I still see all the original available toolboxes. When I select a different toolbox (e.g., "simple") from the drop down menu in the right options pane, the toolbox changes in the workspace to whatever I’ve selected. I just never get the toolbox to update to the new, custom one. I can make other modifications to the html file, and changes show up in the browser. So, I know the right html file is being referenced. For example, I can update the list of toolboxes for the drop down menu to include the codelabToolbox, and the menu will change in the playground, but when I select the codelabToolbox, the fly out menu disappears until I select one of the original toolboxes from the drop down menu.

I'm not sure if my assumption of Blockly being included is correct, but when I look at the bootstrap.js file, the comments seem to say it brings in Blockly...and I don't know how else the advanced playground would have all the functionality it does without Blockly.

I'm not sure if I've missed including something I need to or have placed the include for the custom generator in the wrong place.

[Maribeth Bottorff]

Hello, 

Thanks for sharing your code and the issues you're having. I'm going to have a look at this, but in the meantime to get you unblocked, I wanted to mention there is no real requirement to use the advanced playground to follow along with the tutorial. The advantage of the advanced playground is that it shows you the generated output every time the workspace changes, but if that's not working for you just skip it. If you've used Blockly before, then you can just write your generator code anywhere in a Blockly application you want, inject your toolbox in Blockly.inject, and call codelabGenerator.workspaceToCode(workspace) manually instead of relying on the playground to do it for you.

I know it's not ideal to go off script from the codelab, but the advanced playground parts are not that important to what the codelab is trying to teach you, so I wanted to get you unblocked while I look into this issue. 

Maribeth

[Kevin Irick]

Thanks for the suggestion. I’ll try that in the meantime. I’m almost less than a novice, so I’ll see what I can do off script…if anything I’ll learn something by playing around on my own, so it will still be of benefit.

—————————

Kevin Irick

On Nov 4, 2022, at 3:04 PM, 'Maribeth Bottorff' via Blockly <blo...@googlegroups.com> wrote:

Hello, 

--
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/8d8e80f2-226f-4c44-b1b7-a9250086dddbn%40googlegroups.com.

[Maribeth Bottorff]

So the way the advanced playground works is kind of special and it changed after this codelab was written. Long story short, instead of including your custom file in a script tag as instructed, include it in the array of "additionalScripts" in advanced_playground: add 'tests/playgrounds/custom_generator.js' at the end of the array.

Also make you sure you run `npm install` and `npm run build` in order to properly generate the language files and other sources used by the page.

That should unblock you for now with this codelab. Ultimately, having you muck around inside advanced_playground.html is not ideal and a new version of this codelab is in the works using a better methodology. Thanks again for reporting this, and please let me know if the above solution doesn't work for you

Maribeth

[Ikum Kandola]

I am also having the same issues listed above. I included the custom file in the array of "additionalScripts" but this made no difference.

I then tried to use the "Getting started with Blockly" complete code instead of the advanced playground but I am now unable to get past step 3 playground.addGenerator('Codelab', codelabGenerator) as I do not have playground anymore and I'm not sure what to do instead.

Ikum

[Ikum Kandola]

I have realised that I made a mistake and was not looking at the 'Advanced Playground' page and was just looking at the playground which is why I was previously unable to connect the custom_generator to the html page.