Reshaping Blocks

One of the best ways to learn about all the features of BlocklyProp is allowing yourself time to explore and be curious.

For example, look at a block from the MATH category: the math operation block. You can see that it allows the user to input a value, variable, or test into the block to create a complete block command that has an output. In this block the input is “inline”, meaning the block reads in-a-line from left to right.

 

Shape-Shifting

  • Open BlocklyProp and look for the block we showed you, above.
  • Drag it to the workspace and place your cursor over the block. The arrow will turn to a hand and a tag will pop up explaining the block or how it works.
  • Right click the block and a menu will appear looking similar to this:

  • Lots of helpful tools are here. Select the one that says “External Inputs”.

Presto! The block changed shape, transforming from inline input to external input.

Take a look at how the example block changed. You can see that they do the same thing, but format is different.  The shape of the block is merely a preference. You can re-shape these blocks to suit your personal preference, or to create narrower programs if you need to take screencaptures or work from a minimized window.

Like it better the other way? No problem. Right click again and the menu reappears with the choices. This time you will see "Inline Inputs" instead and, when you select that option, you can go right back to the original block format you started with.

Did You Know?

BlocklyProp blocks are created using the open source tools from Google’s Blockly resources. They can be created using Blockly with a tool called the Block Factory. You can give it a try anytime – there are even videos to show you how! Visit the Block Factory here.

 

The Great Collapse

As mentioned in the last section, you might need to make your program smaller in size.  This can be for any number of reasons, but the important thing to note is that there is another way to shrink the physical dimensions of your program blocks: Collapse Block.  This feature is explained later in these tutorials when you start to see large, complex programs, but it's worth mentioning here as well.

Blocks, such as the math operation block you've been working with, can have inline input fields that require you to nest other blocks inside. If those other blocks are wide, then you can start to see programs extend greatly in a horizontal direction. This can make it difficult to see or read your entire program without scrolling or resizing windows. Collapsing a block with other blocks inside of it will automatically collapse those other blocks too.

  • Right-click on your math operation block again, and this time choose "Collapse Block".

Look how small it became. To change it back, right-click on the block again and choose "Expand Block".

This feature will be discussed again later on, but keep in mind that it is there to simplify the appearance of your program. No information is lost when a block is collapsed (your program will still run the same), but some information is hidden to reduce its physical size.

 

Try This

  • Explore all the categories in the BlocklyProp’s S3 section and drag some randomly chosen blocks to the workspace.
  • Look for pop up explanations, and different sorts of connections or inputs. Right click and see what you find.

Make a mess? Just drag it to the trash can or choose "Delete Block" from the right-click menu. Have fun!  



Your Turn

  • Find at least one new thing in BlocklyProp and try to guess what it does. Now, make a mental note to look for an explanation of it in future tutorials.

Special thanks to Parallax friend Whit Stodghill for his assistance in writing, editing, and testing material for these S3 tutorials.