How to make a workspace? - Start of my Blockly web application

[Brinx4life]

Hello!

I wrote a little bit earlier but I forgot to take any pictures and my progress...

For a start I want that Blockly works okey. First I need to create workspace right? Im following the steps from your website. What am I doing wrong (pictures)? 

Thank you in advance

    Brin

[Christopher Allen]

Hi Brin,

I wrote a little bit earlier but I forgot to take any pictures and my progress...

For a start I want that Blockly works okey. First I need to create workspace right? Im following the steps from your website. What am I doing wrong (pictures)? 

It would be helpful if you provided your source code in (nicely formatted) text format rather than as images, because we can't copy pictures into our code editors or quote them easily in a reply.

Nevertheless, having looked at your source code, I notice that Test.js has two calls to Blockly.inject, but you should only need one (and either one, since both should do the same thing)—yet having two calls to inject is probably harmless so I don't know what might not be working.

Unfortunately it's difficult to offer more advice because you don't say what exactly isn't working as expected, nor do you tell us about any error messages that might have appeared in the browser console.

Best wishes,

Christopher

[Brinx4life]

Hello!

I have successfully created my Blockly workspace. I have trouble with adding actual blocks now. I do not know what I am doing wrong. For the first block I want that it creates a straight line in my canvas window(<canvas>) which of course user can determine how long it is. I have tried many times to add blocks and create them. I always get this error:  "Uncaught Error Error: JavaScript generator does not know how to generate code for block type".... In the pictures you can see my code (html, css and javascript) with just the normal design and workspace layout - no block there. Do you maybe see if there is anything wrong which could led to the blocks code not working when adding them?

Thank you for the help in advance

V V pon., 23. sep. 2024 ob 15:00 je oseba 'Christopher Allen' via Blockly <blo...@googlegroups.com> napisala:

--
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/CAN0w5ebCdxHS2X_q14BeQ%2BRT5r80FRkJVBLiSTGt4Z6kYiS-RA%40mail.gmail.com.

[Mark Friedman]

Unfortunately, you didn't post the code that defines the draw_text block.  In any case, given the error message that you mentioned, I'll guess that you either don't have a code generator function for that block or that there is some problem with the way that you are defining your code generator.  A good place to start would be to take a look at these documentation pages: here and here.  And, if you haven't already done so, you might want to go through the "Getting Started" codelab, which includes a section on code generation.

I would also like to reiterate Christopher's request to please copy/paste textual code into your messages, rather than inserting pictures of your code.  With text we can more easily read, search, test and quote pieces of the code.

Hope this helps.

-Mark

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/CAOs38wqiP-QFg-jbP%2BuBVEOQD4YaYnJkeYiE6oWapAXBro4cpQ%40mail.gmail.com.

[Brinx4life]

Hello!

I am having a hard time on making my blocks work. I always get this error: 

Uncaught Error Error: JavaScript generator does not know how to generate code for block type "draw_square".

    at blockToCode (unpkg.com/blockly/blockly.min.js:1399:174)
    at workspaceToCode (unpkg.com/blockly/blockly.min.js:1397:236)
    at runCode (c:\Users\alist\Desktop\MATURA_PR\index.js:5:35)
    at onclick (c:\Users\alist\Desktop\MATURA_PR\index.html:37:53)

I want to make a block that creates a square and displays it. Of course with user input on how big it should be. I would really appreciate any kind of help because I am getting this error for the past week and I do not know what else to do. Here is my HTML and JavaScript code:

///////JavaScript:

// Inicializacija Blockly delovnega okolja

var delavni_prostor = Blockly.inject('blocklyDiv', {toolbox: document.getElementById('toolbox')});

function runCode() {

    var code = Blockly.JavaScript.workspaceToCode(delavni_prostor);

    eval(code);

  }

  function drawSquare(length) {

    var canvas = document.getElementById('KanvasProstor');

    var ctx = canvas.getContext('2d');

    ctx.clearRect(0, 0, canvas.width, canvas.height); // Počisti canvas

    ctx.beginPath();

    ctx.rect(50, 50, length, length);

    ctx.stroke();

  }

  Blockly.Blocks['draw_square'] = {

    init: function() {

      this.appendDummyInput()

          .appendField("narisi kvadrat z dolzino")

          .appendField(new Blockly.FieldNumber(0), "LENGTH");

      this.setPreviousStatement(true, null);

      this.setNextStatement(true, null);

      this.setColour(230);

      this.setTooltip("");

      this.setHelpUrl("");

    }

  };

  Blockly.JavaScript['draw_square'] = function(block) {

    var number_length = block.getFieldValue('LENGTH');

    var code = 'drawSquare(' + number_length + ');\n';

    return code;

  };

////HTML

<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/msg/en.js"></script> <!-- JavaScript Blockly-->

        <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 = "Desna_stran">

            <div class = "RisanjeProstor">

                <canvas id="KanvasProstor"></canvas>

            </div>

        </div>      

        <!-- Toolbox z različnimi bloki -->

        <xml id="toolbox">

            <category name="Kvadrat">

                <block type = "draw_square"></block>

            </category>

        </xml>

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

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

        <button class = "Start" onclick="runCode()">Zazeni</button>

    </body>

</html>

V V tor., 24. sep. 2024 ob 19:02 je oseba Mark Friedman <mark.f...@gmail.com> napisala:

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/CAOk7GcRLzf3uPwpquka4%2B0fue9dt3k-GOUJGUHE_SDZc93cexw%40mail.gmail.com.

[Aaron Dodson]

Hi,

The syntax for defining generators changed a couple versions ago, and it looks like your code is using the older, unsupported method. These docs describe the new method; note in particular the information about importing the Javascript generator and the use of `forBlock` to define the code generation.

- Aaron