Three Panel Display

[Clyde Eisenbeis]

What changes do I make to Codelab ... Getting Started ... complete_code ... that displays the attachment?

[Clyde Eisenbeis]

After thinking about it, attached is a simpler example.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

[Christopher Allen]

Hi Clyde,

What changes do I make to Codelab ... Getting Started ... complete_code ... that displays the attachment?

After thinking about it, attached is a simpler example.

Can you explain a little more what you are trying to do?

Are you just trying to rearrange the position of the main parts of the UI?

If so, then it's not going to be straight forward to get the exact layout in your picture, but you can move the toolbox to the left of the workspace by changing the Blockly.inject call to:

  Blockly.inject('blocklyDiv', {
    toolbox: toolbox,
    scrollbars: false,
    horizontalLayout: false,
    toolboxPosition: 'start',

  };

(At least for left-to-right languages; for right-to-left languages like Arabic this will put the toolbox on the right of the workspace instead.)

To rearrange the positions of Blockly vs. the melody maker buttons you'll need to use CSS to reposition the <div class="maker"> to the right of  the <div class="blockly-editor">; you may also need to rearrange the order they appear in index.html.  I'm not a CSS expert but MDN is always a good place to start when one needs to know anything about HTML, CSS and JavaScript.

Best wishes,

Christopher

[Clyde Eisenbeis]

Blockly Games Maze - https://blockly.games/maze?lang=en - is a good example!  Where do I find the code?  Thanks!

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

[Clyde Eisenbeis]

Don't know if you received this email?  Thanks!

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

[Beka Westberg]

You can find the code for the block games maze here: https://github.com/google/blockly-games/tree/master/appengine/maze/src

Best wishes,

--Beka

[Clyde Eisenbeis]

Good start!  Thanks!

I'm surprised at the complication with the many things that are needed --- such as goog.provide('Maze.html') ...  goog.require('BlocklyGames') ... goog.require('BlocklyInterface').  

I'm interested in displaying three panels at the same time, as is depicted at https://blockly.games/maze?lang=en.  Can I do that within an index.html or within a script.js?  If not, what do I need?  Thanks!

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

[Maribeth Moffatt]

Hi,

In order to get an output panel displayed next to the Blockly workspace, you'll need to use CSS and HTML to arrange your web page the way you'd like. Unfortunately those topics are outside the scope of Blockly so we are unable to provide support for them in this forum. If you have questions related to how to inject Blockly into a specific div or resize the workspace, etc. we'd be happy to help!

If you prefer learning by project, freecodecamp has a ton of web design tutorials that teach CSS and HTML. For example, the photo gallery lesson teaches how to use CSS Flexbox to arrange items in a grid. Flexbox is what I would use to create a 3 panel display, so that would be a good lesson to take, in addition to any prerequisites you might need to understand the content in that lesson. If you prefer to learn by reading documentation, then as Christopher said, MDN is a fantastic resource. As a small team, we simply don't have the bandwidth to provide support for topics that aren't related to using Blockly, so unfortunately you'll have to go elsewhere for help with those topics, but I know there are communities on stackoverflow, reddit, and freecodecamp where you can discuss these kinds of things.

Best of luck,

Maribeth

[Clyde Eisenbeis]

Thanks for the response!  I had assumed this was common knowledge for your team, as it is in the Maze game.  My misunderstanding.

How about transferring the Blockly information to the third panel, as is used in the Maze game?  I presume that info is transferred to the JavaScript from Blockly?  Thanks!

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

[Maribeth Moffatt]

Hello Clyde,

> How about transferring the Blockly information to the third panel, as is used in the Maze game?  I presume that info is transferred to the JavaScript from Blockly?

You can think of Blockly like a fancy text editor. After users assemble blocks, you can turn those blocks into code in a programming language of your choice. What you do with that code afterwards is up to you and is outside the scope of Blockly. We can provide general tips, such as this page about generating and running JavaScript, but we don't provide in-depth support on how to execute JavaScript code because that is the responsibility of your own app and not Blockly the library. The general idea is that your app would have its own JavaScript API and functionality, and your Blockly blocks would generate code that uses that API. For example, the maze game implements its own system for displaying graphics and moving the figure around the screen. The blocks then generate code that uses that custom API. 

I know it can be frustrating to hear that we can't answer these types of questions. It's not a matter of lacking expertise; it's that we have a small team and we simply don't have the bandwidth to open this forum up to answer all kinds of web development questions that aren't specific to using Blockly the library itself.

Best,

Maribeth

[Clyde Eisenbeis]

The  --- custom-toolbox-complete-code --- provides an excellent example how the blocks are created in the .html file! 

< category name="Loops" categorystyle="loop_category">

        <block type="controls_repeat_ext">

          <value name="TIMES">

            <shadow type="math_number">

              <field name="NUM">10</field>

            </shadow>

          </value>

        </block>

        <block type="controls_repeat" disabled="true"></block>

        <block type="controls_whileUntil"></block>

        <block type="controls_for">

          <value name="FROM">

            <shadow type="math_number">

              <field name="NUM">1</field>

            </shadow>

          </value>

          <value name="TO">

            <shadow type="math_number">

              <field name="NUM">10</field>

            </shadow>

          </value>

          <value name="BY">

            <shadow type="math_number">

              <field name="NUM">1</field>

            </shadow>

          </value>

        </block>

        <block type="controls_forEach"></block>

        <block type="controls_flow_statements"></block>

      </category>

Is there a similar code example where the blocks are modified to use different words in the block?  For example https://blockly.games/maze?lang=en displays the words "move forward" and "turn left".

~~~~~~~~~~~~~~~~~~~~~~~~~~~

[Maribeth Moffatt]

Hello Clyde,

The code you shared is actually the toolbox definition. This defines which blocks show up in the toolbox. It does not define how the blocks themselves look or act.

You can learn more about defining blocks in our docs, in the code for the built-in blocks, or by using the Block Factory.

Best,

Maribeth

[Clyde Eisenbeis]

It is challenging to comprehend that many words from the links you provided.  I do not fully understand.

I have always learned best by looking at the code such as the files in custom-toolbox-complete-code/.  I learned a lot analyzing that code!!!

Is there a similar example for using different words in the blocks?  By code, I mean an index.html and an index.js that runs as the custom-toolbox-complete-code/ runs.  I could modify that code and analyze the results!

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

[Maribeth Moffatt]

Hello Clyde,

Unfortunately, there is not a codelab about creating custom blocks. There is a codelab about creating a custom generator. However, this codelab is a bit more complex to set up and run than the codelabs you've been looking at. This codelab uses npm and a server to run the code, rather than just loading some script tags and loading an html file in your browser. You will need to install npm and be comfortable using the command line in order to run that codelab's code. The steps are explained in the codelab.

Have you had a look at the block factory? You can create a block (using blocks!) and it will generate the code for the block definition. You can explore how the block definition changes as you change the block. You can even copy that code into the toolbox codelab code you've been using if you want to run it.

Best,

Maribeth

[Clyde Eisenbeis]

I need to step back, and reassess.  I'm a bit confused.  I have always assumed that all website code starts with an html file.  The html file brings in JavaScript files via <script ... ></script>. 

Am I mistaken?  Can JavaScript files run without an html file?

---

I've written a lot of code for decades (Fortran -> C#).  It commonly takes me about a month to learn the nomenclature and write basic, solid code.  I start by writing minimal basic code, then expanding to more advanced code every week.

This is how I learned 3D JavaScript, except I learned it in "one day" with a YouTube tutorial --- "Three.js Tutorial For Absolute Beginners" --- https://www.youtube.com/watch?v=xJAfLdUgdc4&list=PLjcjAqAnHd1EIxV4FSZIiJZvsdrBc1Xho. 

This tutorial starts with the basics, then continues to expand with clear, concise comments for each change to the code.  After about an hour, I was able to modify the original code to result in what I needed.  

About half of the original code has been deleted, as I do not need some of the original features.  On JavaScript websites, I was able to find descriptions of additional info I needed for some of the code I  modified.  It has been a simple, painless way to learn JavaScript.

I'm still adding to it as I think about other capabilities I should have.

---

That has not been the case with Blockly.  I'm still unable to write minimal basic code.  

The YouTube video clips I've found about Blockly, show how to move the Blocks around.  I've been unable to find any YouTube video clips that describe the Blockly foundation with JavaScript code examples.

The Blockly examples, under blockly-samples-master, were a good start to a limited extent.  But there are still many unknowns to me.  It will take hundreds of hours to read, and understand, all of the Blockly websites. 

Is there a YouTube Blockly Tutorial website that is similar to "Three.js Tutorial For Absolute Beginners"?  

This would be a big help for thousands of us.  Plus it would help high school students learn how to write Blockly foundation code.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

[Maribeth Moffatt]

Hello Clyde,

One reason that approach may not be working for you is that you are not just learning JavaScript or the Blockly library, you are also learning how the web works and how modern web development works. Since Blockly is a library for web applications, we sometimes make certain assumptions that you are comfortable using some standard web development tools. That is why some of the codelabs use tooling like npm to run the sample code, without explaining in-depth how those tools work. They are pretty standard tools in the industry - as an example, the Angular getting started docs also assume you know how to use npm and related tooling. Unfortunately, this leads to a pretty overwhelming experience when there is so much background knowledge required.

We don't have video tutorials for getting started with Blockly. Creating and maintaining video documentation is a lot of work (and as I've said before, we're a small team)! It's something on our radar, but if we did publish a video tutorial, it would still likely not explain some background knowledge like how to use tooling like npm or bundlers. I noticed that the tutorial you linked to does not explain npm or how to use it, but just tells you the commands to use. Similarly, it does not explain what parcel is or how to use it. If you are comfortable with that, then you may be comfortable following the steps of the Custom Generator codelab that I linked in my previous message. I do think it would be most helpful for you if you followed the codelab itself before trying to analyze the completed code. If you have trouble with any of the steps, we would of course be happy to help here in the forum.

Best of luck,

Maribeth

[Clyde Eisenbeis]

1) I do know how the web works.  I'm an electrical engineer.

...

... I've been writing html and css code for about 30 years.  I upload it to a website using FileZilla.

... I've created video clips (Camtasia) and posted them on YouTube -> https://ndacademy.foxping.com.

... ... Electronics, Music (fundamentals include some math), 3D Printing, Cochlear Implants, etc.

... I've learned WordPress for creating websites.

---

2) Every JavaScript code example I've analyzed, uses html with JavaScript.  

...

... Can JavaScript files run "without" an html file?   

... If so, what is required?

---

3) The YouTube tutorial --- "Three.js Tutorial For Absolute Beginners", does use npm.  What I've learned:

...

... npm init -y
                [install a bundler]
... npm install parcel --save-dev
                [takes a while]
                [I create an index.html file]
                [install threejs]
... npm install three
                [I create a script.js file]
... npx parcel src/index.html
                [provides a local link ... an example -> Server running at http://localhost:1234/ (link via Chrome)]
                [ctrl+C regains Terminal control]
... npm install dat.gui
                [when I exit VS Code, and restart, I enter the npx again]
... npx parcel src/index.html

...

... I learned this in a short amount of time (clear, concise words in the tutorial).  It works!

... This tutorial does use an html file.

---

4) I learn fastest with example code, and with YouTube video clips.  

...

... As I'm retired, I would create Blockly YouTube video clips for new users, after I understand the basics.

---

5) It appears that a YouTube tutorial for --- https://blockly.games/maze?lang=en - Maze 1 --- could be a good tutorial.  

...

... Maze 1 is basic and simple.  

... ... A minimum toolbox with renamed tools.  

... ... Three images on the screen simultaneously.  

... ... The commands from the toolbox items are transmitted to the car. 

... The downside is the additional mazes, which complicates the code.

... Does this game require an html?  If it does, where do I find it?

---

Thanks!

~~~~~~~~~~~~~~~~~~~~~~~~~~

[Maribeth Moffatt]

Hello Clyde,

My apologies for making an incorrect assumption about your background knowledge.

The custom generator codelab still uses an html file. However, running the code in this codelab is different from the custom toolbox codelab. In the toolbox codelab, all you have to do is open index.html in your browser, and the browser will read the file, load the JavaScript files, and execute them. In the generator codelab code, you must use npm to download dependencies, a bundler to "build" the JavaScript code, and a server to run the code. Simply opening the index.html file in a browser will not work. The steps required are explained in the codelab text.

I understand that a video tutorial would be preferable to you, but if you decide to try the codelab or playing with the Block Factory as I previously suggested, we'd be happy to answer any questions that arise.

About the Blockly Games maze as a subject for a video: interesting idea! Recreating this level from scratch might make a good tutorial. However, I would caution you about the existing code for Blockly Games. Blockly Games uses a bespoke build system that we don't generally recommend to others. It uses Closure Compiler, which is a Google-maintained JavaScript compiler that doesn't have the same support or documentation as other popular bundling tools. 

Best,

Maribeth

[Clyde Eisenbeis]

Thanks for the prompt responses!

Where do I find the html for --- https://blockly.games/maze?lang=en?  Thanks!

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

[Mark Friedman]

Clyde,

I thought that it might be useful for you to see an example of an extremely simple Blockly app; sort of Blockly's "Hello World":

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Blockly Hello World</title>
    <script src="https://unpkg.com/blockly/blockly.min.js"></script>
</head>
<body>
    <div id="blocklyDiv" style="height: 480px; width: 600px;"></div>
    <button onclick="alert(javascript.javascriptGenerator.workspaceToCode(workspace));">Show Code</button>
    <script>
        const toolbox = {
            "kind": "flyoutToolbox",
            "contents": [
                {
                    "kind": "block",
                    "type": "text"
                },
                {
                    "kind" : "block",
                    "type" : "text_print"
                }
            ]
        };
        const workspace = Blockly.inject('blocklyDiv', {toolbox: toolbox});
    </script>
</body>
</html

It shows what I think are the most basic aspects of a Blockly app:

• An HTML element (the div with ID "blocklyDiv"), into which you inject a Blockly workspace.
  
• A toolbox, from which your app's users can select the blocks for their program.
• One of each of the basic types of blocks in the toolbox: a statement block ("text_print") and a value block ("text").
  
• The ability to generate code based on the blocks.  In this case just opening an alert window containing the generated code.

In past posts you've wondered whether various pieces of code that you've seen in some examples were actually necessary. As you can see from the example above, there is relatively little that is really necessary for the simplest cases.  Added complexity, and added code, comes as you want to do more with Blockly.  Here are some of the additional (or alternative) capabilities that you might want to add to a Blockly app, depending on your particular use case: 

• Have a resizable workspace, rather than the fixed size one above. Demo code here.
  
• Add more of the built-in Blockly blocks to the toolbox.  You can find all of the built-in blocks here.
• Add categories or other elements to your toolbox.
  
• Use a different built-in code generator (i.e. Python, PHP, Lua, or Dart, rather than the JavaScript generator used above)
• Add the ability to save and load a Blockly program (i.e. the blocks that your app's users have pulled out of the toolbox and placed in the workspace)
• Add your own custom blocks (and their code generators) to Blockly.
• Add your own custom code generator to Blockly.
• Running generated code.  Demo code here.
• Have a more interesting/useful UI for your Blockly app than the simple one above.

There is a lot more than what I mentioned above.  Blockly has a lot of capabilities and customization options.  This is reflected in the size, scope and complexity of the documentation, as you've noticed ;-)  It is difficult for someone new to understand it all, a priori.  My strong suggestion would be to figure out what you want in your Blockly app, start creating a simplified version of that and then iterate on that to get closer to your final app.  As you do that you will undoubtedly have questions, but they will be reasonably specific and folks in this group will help you. 

Finally, I will answer your question about where the HTML for the Blockly Games Maze app is.  Before I do that, though, I will mention that that app is a pretty complex app, using many of the more sophisticated Blockly capabilities.  Moreover, some of its complexity is not Blockly-based.  For example, it uses Google App Engine as it's server and, rather than having a static .html page, its HTML is dynamically generated by that server.  Also note that the Maze app is part of a larger set of Blockly Games apps, all of which share some common code and are packaged/built by a custom mechanism.  All of this makes it somewhat difficult to understand the Maze app in isolation.  All that being said, here is, more-or-less, where the Maze app's HTML code is generated.

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 on the web visit https://groups.google.com/d/msgid/blockly/6fa44e04-6817-47cc-a408-878c5d9ab96en%40googlegroups.com.

[Clyde Eisenbeis]

Mark F,

The code you provided displays a toolbox with different names.  Using 

   {
      "kind": "block",

      "type": "text"
   },  

What would be changed to display Maze 1 "turn left"?

Is the "Run Program" button also defined in the HTML file?  

Would "Run Program" execution be defined in the HTML file or a JavaScript file?

Thanks!

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

[Mark Friedman]

On Tue, Nov 21, 2023 at 5:33 AM Clyde Eisenbeis <cte...@gmail.com> wrote:

Mark F,

The code you provided displays a toolbox with different names.  Using 

   {
      "kind": "block",

      "type": "text"
   },  

What would be changed to display Maze 1 "turn left"?

You would need to create a custom block and you would use the type of that block instead of "text" above.

Is the "Run Program" button also defined in the HTML file? 

Yes, if you are doing a simple case like the one I described.  There are other web app development scenarios, though, where it could be in some HTML generated by a server (and not existing in any static HTML file) or even generated dynamically in the browser by JavaScript via HTML DOM manipulation.

 Would "Run Program" execution be defined in the HTML file or a JavaScript file?

That is totally up to you.  It would, presumably, be triggered via JavaScript but that JavaScript could either be within script tags in your HTML or within a separate JavaScript file.  Note that this is not really a Blockly issue, but is just basic web app development.

Hope this helps.

-Mark

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/b667d4a9-4c1f-4113-8774-e5ea98791269n%40googlegroups.com.

[Clyde Eisenbeis]

I'd like the code that implements "turn left".  I don't know how to create a custom block.

Ditto for the other questions.  Code would show me how to do these.  That would be very helpful!

Thanks!

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

[Mark Friedman]

Clyde,

  A good place to start learning how to create a custom block would be the custom blocks link that I provided in my earlier reply.  Once you understand that, a good next step is this link, also mentioned on the above page, which goes into more details about the various parts of a block definition and how to create them.  Both of those links, as well as most of the documentation, have examples of code.

  As for your questions about the HTML and JavaScript for running code, that is quite dependent on your particular application, desired generated programming language, etc.  If you want to generate and execute your code as JavaScript a very simple, but unsafe, way to do it is to use the JavaScript eval function, so you could add something like the following to the Hello World app I posted previously:

<button onclick="eval(javascript.javascriptGenerator.workspaceToCode(workspace));">Run Code</button>

For the details of how to do it safely, or in other environments, please take a look at the running generated code link I provided earlier.

-Mark

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/139d6b77-490e-41ab-8c53-6da28212c38an%40googlegroups.com.