Login Register

Documentation

Blockly Code Editor

Description

The Blockly Code Editor allows generating JS code from blocks and programming Grid Scene by blocks.

Warnings

  • It is recommended to use only one Blockly Code Editor on a page.
  • The "variables editor" block must have a category and should always be put in a separate category.

Variables

To add new variables, the toolbox must have the "variables editor" block.

Types

Data types used in Blockly Code Editor to pass values between blocks.

Type name Description
Any Any type
Boolean True or False
Number Any number
String Text
Array Array

Available block connection types.

Type name Description
None Block without connection.
Left Block can be connected on the left side. Block code should return value.
Top Block can be connected with other blocks from the top.
Bottom Block can be connected with other blocks from the bottom.
Top-Bottom Block can be connected with other blocks from top and bottom.

Properties

The list starts with the common properties, learn more about them by visiting the Modules description section. The other available properties are described below.

Property name Description
Scene Id Scene Id to execute the code.
Toolbox A list of blocks visible in the module. Add a custom block and set the block name to add the custom block defined in the Custom Blocks property.
Property name Description
Name Block name
Translation Translation of block labels in JSON.
Category Block category. If the property is empty, the block doesn't have a category. All or none of the blocks must have a category, blocks can't have mixed or no category. The block with the same category value will be in the same module in the menu category.
Is Disabled Disable block.
Custom Blocks New blocks definitions list.
Property name Description
Name Block name used in toolbox.
Title Title displayed on the block.
Color Block color in HUE notation. The value must be between 0 - 360.
Inputs Inputs name separated by a comma.
Inputs Types Inputs types separated by a comma without spaces. Missing types will be completed by Any type.
Inputs Texts Text beside input. The text must be comma separated.
Code Code executed by the module. In the code, it is possible to use inputs by names declared in the Inputs property.
Connection Type of connection with other blocks.
Connection Types Connection types separated by a comma. Missing types will be completed by Any type.
Block Limit Maximum number of blocks to add in a workspace. 0 or empty is equal to unlimited.
Hide Run Hide the run button.

Supported commands

Command name Params Description
getWorkspaceCode --- Get code generated by the module.
hide --- Hides the module if it is visible.
show --- Shows the module if it is hidden.

Default blocks available in the module

Block name Description
RGB color Creating RGB color from three numbers.
append text Append text to a variable.
arithmetic Simply arithmetic functions: add, divide, minus, multiply, power.
basic functions Basic mathematics functions: absolute, root, abs, exp, ln, log10, neg, pow10, root.
blend color Blends two colors with a given ratio.
boolean Returns either true or false.
break Changes loop flow. Available options: break, continue.
change variable Adds a number to a variable.
char at Returns char: n from start, f from end, last, first, random.
color picker Chooses a color from the palette.
compare Compares two values.
constants Returns one of the common constants.
constrain Constrains a number to be between the specified limits (inclusive).
create list from Makes a list from text, list.
create list with item Creates a list with any item repeated n times.
create list Creates an empty list.
for each For each item in a list, you can set the variable to the item, and then do some statements.
for Have the start variable take on the values from the start number to the end number, count by the specified interval, and do the specified blocks.
get list element Get (or get and remove): first, n from end, n from start, last, random element from list, or remove an element in the list.
get sublist Get n elements from end, n elements from start of the list.
get variable Returns the value of this variable.
if If control statement.
is empty list Returns true if the list is empty.
is empty text Returns true if the provided text is empty.
join text Creates a piece of text by joining together any number of items.
list index of Returns the index of the first/last occurrence of the item in the list. Returns 0 if the item is not found.
list length Returns the length of a list.
logic operation Simple logic operation: and, or.
logic ternary Checks the condition in the test. If the condition is true, returns the if true value; otherwise returns the if false value.
math list functions Simple functions on lists. Available functions: average, max, median, min, mode, random, sum, standard deviation.
modulo Returns the remainder from dividing the two numbers.
negate Returns true if the input is false. Returns false if the input is true.
null Returns null.
number property Checks whether the number is negative, positive, prime, divisible by, even.
number A number.
print Print the specified text, number, or other value.
prompt for Prompt for the user.
random color Returns a random color.
random fraction Returns a random fraction between 0.0 (inclusive) and 1.0 (exclusive).
random integer Returns a random integer between the two specified limits, inclusive.
repeat while/until Repeats while and until the loop.
repeat Allows doing some statements several times.
round Rounds a number up or down.
set list element Sets an element in a list.
set variable Sets a variable to be equal to the input.
sort list Sorts a copy of a list: ascending or descending.
substring Returns a specified portion of the text.
text index of Returns the index of the first/last occurrence of the first text in the second text. Returns 0 if the text is not found.
text length Returns text size.
text Returns constant text.
to upper/lower case Changes text to an upper or lower case.
trigonometry Basic trigonometry functions.
trim Removes white spaces from the text's start and end.
grid scene commands Get commands from the grid scene. If the Scene Id is not valid, grid scene commands will be empty.
variables editor Creates a category where you can add new variables. Always must have a category name in a separate category.
custom Custom block created in Custom Blocks property.

CSS classes

Class name Description
blockly-code-editor-editor DIV element surrounding the blockly editor.
blockly-code-editor-run Button run class.

Demo presentation

Demo presentation contains examples of how to use the Blockly Code Editor module.