Groups keyboard shortcuts have been updated
Dismiss
See shortcuts

JavaScript generator does not know how to generate code for block type "CrtaXY"

123 views
Skip to first unread message

Brinx4life

unread,
Nov 2, 2024, 11:49:39 AM11/2/24
to Blockly
Hello!
I have a problem (above). That is the error message I get when trying to run my Blockly JavaScript program. My goal of the program is that a user can drag a block (for now its a line) into the workspace (as many as the user wants) and with that block when run the program will draw a line (or lines) on user input X, Y, length. I have a program that is working like this but the problem is which one of your "helpers" told me is that I am not using Blockly correctly. He told me that I need to have a JavaScript generator instead of running the code directly. So with that I have made some adjustments and looked up on your documentation but I have still some troubles. One of that is thta error message and the other is that is my added code even correct? I would be thankful if someone will help me with this. If any more information is needed please ask. Thank you.

<html>
    <head>
        <title>iMathArt</title>
        <script src="https://unpkg.com/blockly/blockly.min.js"></script> <!-- Blockly knjiznica. NE DOTIKAJ-->
        <script src="https://unpkg.com/blockly/javascript_compressed.js"></script>

        <link rel="stylesheet" href="style.css">
    </head>
    <body>

        <div class = "Leva_stran">
            <div class = "Glava">
                <h1>Osnove Kvadratkov</h1>
            </div>
            <div class = "DelavniProstor" id="blocklyDiv"></div> <!-- Blockly prostor (pravokotnik za notr dat bloke)-->
        </div>

        <!-- Element za prikaz Blockly workspace -->
        <div class = "Sredina_stran">
            <div class = "RisanjeProstor">
                <div id="canvasContainer"></div> <!--- mora biti v HTML!!! ne dela v !!!CSS!!!!-->
            </div>
        </div>
        <div class = "Desna_stran">
            <div class = "KodaProstor">
                <canvas id="KanvasKodaProstor"></canvas>
            </div>
        </div>
        <!-- Toolbox z različnimi bloki -->
        <xml id="toolbox" style="display: none">
            <category name="Kvadrat">
                <block type = "CrtaXY"></block>
            </category>
        </xml>
        <button id = "MainGumb" class = "Start">Zazeni</button>
        <button id = "SmetnjakGumb" onclick="BrisanjeKanvas()">Zbrisi</button>
        <script src="sketch.js"></script>
    </body>
</html>

 // SE IZVEDE SAMO ENKRAT
function setup(){
  var canvas = createCanvas(634,634);  // ustvarim p5.js canvas !obvezno!
  canvas.parent("canvasContainer"); // povem, da naj vzame css pa tut html kodo od tega diva oz. od naddiva tega diva
}

  // DEFINICIJA BLOKA CrtaXY
  Blockly.Blocks["CrtaXY"] = {
    init: function () {
          this.appendDummyInput()
              .appendField("Narisi crto z X koordinato")
              .appendField(new Blockly.FieldNumber(0), "X"); // vnesem X koordinato
          this.appendDummyInput()
              .appendField("Narisi crto z Y koordinato")
              .appendField(new Blockly.FieldNumber(0), "Y"); // vnesem Y koordinato
          this.appendDummyInput()
              .appendField("Narisi crto z dolzino")
              .appendField(new Blockly.FieldNumber(0), "DOLZINA"); // vnesem dolzino crte
          this.setPreviousStatement(true, null);
          this.setNextStatement(true, null);
          this.setColour(160);
    }
  };
// Generacija JavaScript kode za blok CrtaXY
Blockly.JavaScript["CrtaXY"] = function(block) {
  var X = block.getFieldValue("X");
  var Y = block.getFieldValue("Y");
  var dolzina = block.getFieldValue("DOLZINA");
  var code = `NarisiCrto(${dolzina}, ${X}, ${Y});\n`;
  return code;
};

 
// FUNKCIJA ZA BRISANJE PLATNA
function BrisanjeKanvas(){
  clear(); // pobrisi kanvas
  workspace.clear(); // pobrisi delovno mesto.
}
   
// METODA ZA RISANJE CRTE
function NarisiCrto(dolzina, X, Y) {
  stroke('magenta');
  strokeWeight(5);
  line(X, Y, X + dolzina, Y); // p5.js naredi crto z zacetkom XY in koncem XY
}
 
// POSTAVITEV WORKSPACE-a ---- kantica in premikanje po njem je ze avtomatsko notri.
var workspace = Blockly.inject("blocklyDiv", {toolbox: document.getElementById("toolbox")});
document.getElementById("MainGumb").addEventListener("click", () => {
  const code = Blockly.JavaScript.workspaceToCode(workspace);
  try {
    eval(code);  
  } catch (e) {
    console.error(e);
  }
});

Aaron Dodson

unread,
Nov 4, 2024, 11:44:05 AM11/4/24
to Blockly
Hi,

You're on the right track, but using the older code generator syntax. https://developers.google.com/blockly/guides/create-custom-blocks/code-generation/overview has up to date docs, but in short:

* Make sure you add import {javascriptGenerator} from 'blockly/javascript'; to the top of your file
* Rather than Blockly.JavaScript["CrtaXY"] = function(block) {...}, you'll need to do javascriptGenerator.forBlock["CrtaXY"] = function(block) {...}

I think that should resolve your problem, but please let me know if not!

Brinx4life

unread,
Nov 4, 2024, 12:41:33 PM11/4/24
to Blockly
Hey
First I would thank your for your answer and letting me know I am on the right track.
I have tried your suggestion and I get the following error: "Cannot use import statements outside a module". 
I looked up what that could mean and I found I can not use that inside a JavaScript file ? Then I tried removing that import (but leaving javascriptGenerator.forBlock [....]...)  and adding
<script src="https://unpkg.com/blockly/javascript_compressed.js"></script> in to HTML file... and got this error: "javascriptGenerator is not defined". 
What can I do now so the program will work as described in my first message?  Every help is appreciated! My code at the moment:


            <category name="Crte">
                <block type = "CrtaXY"></block>
            </category>
        </xml>
        <button id = "MainGumb" class = "Start">Zazeni</button>
        <button id = "SmetnjakGumb" onclick="BrisanjeKanvas()">Zbrisi</button>
        <script src="sketch.js"></script>
    </body>
</html>

import {javascriptGenerator} from 'blockly/javascript';
// SE IZVEDE SAMO ENKRAT
function setup(){
  var canvas = createCanvas(634,634);  // ustvarim p5.js canvas !obvezno!
  canvas.parent("canvasContainer"); // povem, da naj vzame css pa tut html kodo od tega diva oz. od naddiva tega diva
}

// DEFINICIJA BLOKA CrtaXY
Blockly.Blocks["CrtaXY"] = {
  init: function () {
    this.appendDummyInput()
      .appendField("Narisi crto z X koordinato")
      .appendField(new Blockly.FieldNumber(0), "X"); // vnesem X koordinato
    this.appendDummyInput()
      .appendField("Narisi crto z Y koordinato")
      .appendField(new Blockly.FieldNumber(0), "Y"); // vnesem Y koordinato
    this.appendDummyInput()
        .appendField("Narisi crto z dolzino")
        .appendField(new Blockly.FieldNumber(0), "DOLZINA"); // vnesem dolzino crte
    this.setPreviousStatement(true, null);
    this.setNextStatement(true, null);
    this.setColour(160);
  }
};
// Generacija JavaScript kode za blok CrtaXY
javascriptGenerator.forBlock["CrtaXY"] = function(block) {
  var X = block.getFieldValue("X");
  var Y = block.getFieldValue("Y");
  var dolzina = block.getFieldValue("DOLZINA");
  var code = `NarisiCrto(${dolzina}, ${X}, ${Y});\n`;
  return code;
};

 
// FUNKCIJA ZA BRISANJE PLATNA
function BrisanjeKanvas(){
  clear(); // pobrisi kanvas
  workspace.clear(); // pobrisi delovno mesto.
}
   
// METODA ZA RISANJE CRTE
function NarisiCrto(dolzina, X, Y) {
  stroke('magenta');
  strokeWeight(5);
  line(X, Y, X + dolzina, Y); // p5.js naredi crto z zacetkom XY in koncem XY
}
 
// POSTAVITEV WORKSPACE-a ---- kantica in premikanje po njem je ze avtomatsko notri.
var workspace = Blockly.inject("blocklyDiv", {toolbox: document.getElementById("toolbox")});
document.getElementById("MainGumb").addEventListener("click", () => {
  var code = Blockly.JavaScript.workspaceToCode(workspace);
  try {
    eval(code);  
  } catch (e) {
    console.error(e);
  }
});
ponedeljek, 4. november 2024 ob 17:44:05 UTC+1 je oseba ado...@google.com napisala:

Mark Friedman

unread,
Nov 4, 2024, 2:00:24 PM11/4/24
to blo...@googlegroups.com
Hi!  The Blockly documentation mostly assumes that you are using a development environment that includes common web development tools (like webpack, node.js and npm) and Blockly provides a command line tool (i.e. create-package) which can set up a good set of starter code for you which will allow you to use imports and such.

If you really don't want to use the above, there is some documentation on using script tags (like unpkg) with Blockly (here and here).  In particular, note the way to access certain Blockly things from the global namespace:

// Access Blockly.
Blockly.thing; 

// Access the default blocks.
Blockly.libraryBlocks['block_type']; 

// Access the generator.
javascript.javascriptGenerator;

Hope this helps.

-Mark


--
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 visit https://groups.google.com/d/msgid/blockly/4a9e17f9-a582-45d1-846d-d3983deabdd7n%40googlegroups.com.

Brinx4life

unread,
Nov 5, 2024, 11:26:23 AM11/5/24
to Blockly
Hello!
I would really like to use script tags (if possible). I tried what you said but I am not sure where and how I should place that part in to my code.
So in my HTML document I have this import script statement "https://unpkg.com/blockly/javascript_compressed.js" as seen in my HTML document I sent before so that is good for the
first link as I understand. Then if I am correct I need to put the following import script in to it "./my-lib-directory/blockly/javascript_compressed.js". The problem then is (if everything till here is okey) what do I do now or how? I see the Blockly.thing; and javascript.javascriptGenerator on the reply sent and on the link, but how do I actually use them in my case? I have tried but I am not sure how and where should I place them and istead of what? My current HTML and JavaScript code with included (hopefully) correct import statement: 
Thank you for the help!

<html>
    <head>
        <title>iMathArt</title>
        <script src="https://unpkg.com/blockly/blockly.min.js"></script> <!-- Blockly knjiznica. NE DOTIKAJ-->
        <script src="https://unpkg.com/blockly/javascript_compressed.js"></script>
        <script src="./my-lib-directory/blockly/javascript_compressed.js"></script> <!-- THE NEW IMPORT -->
ponedeljek, 4. november 2024 ob 20:00:24 UTC+1 je oseba mark.f...@gmail.com napisala:

Mark Friedman

unread,
Nov 5, 2024, 1:56:14 PM11/5/24
to blo...@googlegroups.com
tldr; You only need either the unpkg version of the files or the "./my-lib-directory" of the files, not both.

Sorry if I was unclear.  That "Get the code" page in the documentation is describing three different ways to include the Blockly code in your application.  You can either import the Blockly NPM packages, use script tags to load them from unpkg or download a Blockly release and use script tags to load from the downloaded files.  Various sections of the documentation assume different ways of loading the Blockly files.

-Mark


Brinx4life

unread,
Nov 14, 2024, 12:30:21 PM11/14/24
to Blockly

Yes I understand that now. But my question still has not been answered. How can I implement that generator in to my code? 
I have been trying to get it right for a long time now but I just can't find a way for it to work...
Thanks for the help.
torek, 5. november 2024 ob 19:56:14 UTC+1 je oseba mark.f...@gmail.com napisala:

Mark Friedman

unread,
Nov 14, 2024, 1:01:51 PM11/14/24
to blo...@googlegroups.com
It looks like you were on the right track.  What exactly are the problems that you are having?  And do you have any specific Blockly-related questions?

-Mark


To view this discussion visit https://groups.google.com/d/msgid/blockly/4a735ede-8686-4b1b-8582-f7901fe80a90n%40googlegroups.com.

Brinx4life

unread,
Nov 14, 2024, 1:08:06 PM11/14/24
to Blockly
I still have the same problem Mark. I wrote it above in my previous message. 
I have not found a way to implement a javascript generator. I will paste my code at the moment (under). The code outputs "javascriptGenereator is not defined".  

četrtek, 14. november 2024 ob 19:01:51 UTC+1 je oseba mark.f...@gmail.com napisala:

Brinx4life

unread,
Nov 14, 2024, 1:09:07 PM11/14/24
to Blockly
Blockly.thing;
const jsCode = javascript.javascriptGenerator.workspaceToCode(workspace);



document.getElementById("MainGumb").addEventListener("click", () => {
  //var code = Blockly.JavaScript.workspaceToCode(workspace);
  try {
    eval(jsCode);  
  } catch (e) {
    console.error(e);
  }
});


<html>
    <head>
        <title>keks</title>
četrtek, 14. november 2024 ob 19:08:06 UTC+1 je oseba Brinx4life napisala:

Mark Friedman

unread,
Nov 14, 2024, 2:05:24 PM11/14/24
to blo...@googlegroups.com
It looks like you are still using javascriptGenerator (instead of javascript.javascriptGenerator) in the line that reads:

javascriptGenerator.forBlock["CrtaXY"] = function(block)

If you like, for convenience you could define a constant javascriptGenerator to have the value javascript.javascriptGenerator near the top of your file(s) so that you can use the shorter javascript.javascriptGenerator name.

Hope this helps.

-Mark


To view this discussion visit https://groups.google.com/d/msgid/blockly/bcade52a-b44f-449d-92ec-df50ae0d4037n%40googlegroups.com.

Brinx4life

unread,
Nov 14, 2024, 2:27:08 PM11/14/24
to Blockly
Ah I see it yes. I have changed the javascriptGenerator.forBlock...   to   javascript.javascriptGenerator.forBlock...   as you said.
I also changed the location of the jsCode variable and put it inside the EventListener() so it will get the code when clicked. 
I tested the program and it works very well now. 
I thank you for all the help Mark! I appreciate it!

četrtek, 14. november 2024 ob 20:05:24 UTC+1 je oseba mark.f...@gmail.com napisala:
Reply all
Reply to author
Forward
0 new messages