Introduction to LOFI Blocks

LOFI Blocks is an application designed to learn programming using robots. The application is available in the online version and on mobile devices.

Where to get LOFI Blocks

LOFI Blocks is a free software. You can use it online in your internet browser or get a mobile version on:

Program’s interface

Main view

LOFI_Blocks_interface

  1. Bookmarks with programming blocks divided into categories.
  2. The START / STOP button that starts and stops the program execution.
  3. SETTINGS tab containing functions for logging in, managing user accounts and saving and exporting projects.
  4. Link to documentation and examples.
  5. Button for saving your project.
  6. The work area on which we create the program.
  7. Pop-up menu.
  8. Buttons for zooming in / out blocks and deleting them.

Settings

Settings available after logging in:

  • Change the language.
  • New project – cleans the working field.
  • Save project – save the project “in the cloud” on the user’s account.
  • Export project – saves the project to a computer disk.
  • Import project – it fetches the project from the computer disk.
  • Saved projects – projects saved in the cloud on the user’s account.

Pop-up menu

The pop-up menu is located in the upper right corner of the screen and allows you to launch additional functions of the LOFI Blocks application.

Connection with a robot

The icon with the robot head indicates whether the application correctly communicates with the Arduino controller – if so, a circle appears around the icon. Clicking on this icon should cause the buzzer to be beep twice.

Sensor and console monitor

The sensor monitor allows real-time preview of readings from all controller inputs (even if no modules are connected to them) and from the distance sensor.

The console allows displaying the values ​​of various types of variables using the appropriate block from the CONTROL section.

Built-in gamepad

The built-in gamepad allows you to control the robot. It is linked to the EVENTS section.

Blackboard for drawing

Opens the drawing table associated with the section of the DRAW blocks. In the upper left corner of the drawing board, there is a button that allows you to switch it to full-screen mode.

Built-in piano keyboard

Opens a panel with a built-in keyboard that lets you play sounds from the C major range in the range of seven octaves.

Loop REPEAT

LOFI_Blocks_Repeat

The main block of our program. In order for any instruction to be sent to the robot, it must be inside the main block of the REPRODUCTION loop.

Only one block of this type may be in our program. You can not delete this block.

LOFI Blocks – Robot

Motor control

The block controls motors connected to ports M1 and M2.

Parameters:

  • Port – M1, M2 – socket to which the motor is connected.
  • Direction – FRONT, REAR – the direction of motor rotation.
  • Power – 0-100 – the power with which the engine rotates. Note that the engine must be set to power above about 60 in order for the engine to start.

Controlling OUTPUT1-4

LOFI_Blocks_Robot (2)

The block controls the modules connected to the OUTPUT output ports.

Parameters:

  • Port – OUTPUT1, OUTPUT2, OUTPUT3, OUTPUT4.
  • Power – 0 – 100 – power set at the output, controlling for example the brightness of the LED diode.

The OUTPUT4 output is connected to the M2 motor control – you can not use them simultaneously (they will interfere with each other).

If Arduino servo control blocks have been used, Arduino switches the pins of outputs to SERVO mode. The outputs can no longer be controlled using the SET OUTPUT blocks. To return to their original state, reset Arduino.

Buzzer

LOFI_Blocks_Robot (4)

The block controls the operation of the loudspeaker built into the LOFI Brain.

Parameters:

  • Status – ON, OFF.

The built-in speaker has a so-called generator so that it can only make a sound of one specific frequency – about 600 Hz.

Reading from the distance sensor

LOFI_Blocks_Robot (6)

  • Reporting block – returning the value in centimeters (in the range 0-100cm) measured by the distance sensor.

If the distance sensor does not detect any obstacle, it returns value 100. This is the limit set in LOFI Blocks, the actual working range of this sensor is about four meters.

Reading from analog inputs INPUT1 – 4

LOFI_Blocks_Robot (5)

Reporting block – returning the value read from the indicated input.

Parameters:

  • Port – INPUT1, INPUT2, INPUT3, INPUT4.

Arduino “does not know” whether any sensor is connected to the input. If we ask it to read from the input to which no sensor is connected, we will always get some reading, but they will usually be some kind of interference, or “heard” from neighboring input.

Color

LOFI_Blocks_Robot (7)

Defining the color of LEDs in RGB:

  • R – red component, scope 0 – 100.
  • G – green component, scope 0 – 100.
  • B – blue component, scope 0 – 100.

Rainbow color

LOFI_Blocks_Robot (8)

Allows you to define the color with just one component. This block is great for generating fluent transitions between colors however, it doesn’t allow for changing the brightness level.

Parameters:

  • Color – color value, scope 0 – 100.

Rectangle

LOFI_Blocks_Robot (9)

Displays a rectangle by defining the coordinates of the upper-left corner, height, and width. The rectangle’s color can be defined by inserting a COLOR block before it (the default color of the rectangle is white).

Parameters:

  • X – horizontal coordinates of the upper-left corner of the rectangle, scope 0 – 7.
  • Y – vertical coordinates of the upper-left corner of the rectangle, scope 0 – 7.
  • Width – width of the rectangle, scope 1 – 8.
  • Height – height of the rectangle, scope 1 – 8.

Display number

LOFI_Blocks_Robot (11)

Displays a number from 0 to 100 (100 is displayed as 00) in color defined by a COLOR block inserted before it.

Parameters:

  • Number – number to be displayed, scope 0 – 100.

Show

LOFI_Blocks_Robot (14)

Displays previously defined objects (rectangles and numbers) on the display. This block has to be always present to display anything on the display.

Clear display

LOFI_Blocks_Robot (13)

Clears all the LEDs on the display. Without this block, any new image will be displayed on top of the previous one. In order to display an image or animation on a blank display, you need to clear the display using this block each time.

LOFI Blocks – Control

Delay – WAIT

LOFI_Blocks_Control (1)

The block that delays the operations in the loop REPEAT for the time specified in milliseconds (hundredths of a second).

Parameters:

  • Delay – value specified in milliseconds. One second is 100 milliseconds.

If we place the WAIT block inside the DRAW loop, it will be ignored during the program execution. The drawing loop is executed with a fixed frequency of 25 times per second and there is no possibility of delaying it.

Condition – IF

LOFI_Blocks_Control (2)

All blocks inside the block IF are executed if the (TRUE) condition specified at the beginning of the block is met. When the condition is not met (FALSE), the blocks inside the IF block will be ignored when the program is executed.

Parameters:

  • CONDITION – it must be a Boolean value – TRUE or FALSE. A condition with a numerical value will result in considering it unfulfilled.

If you want to specify a condition with a numerical value, for example, a reading from a distance sensor, you must use a comparison, eg. “Is the distance sensor reading less than 20”. Then you will get a logical value of TRUE or FALSE.

A double condition IF … ELSE …

LOFI_Blocks_Control (3)

A double condition defining which blocks are to be executed in a situation when the input condition is met (TRUE), and blocks to be executed when the input condition is not met (FALSE).

Parameters:

  • CONDITION – it must be a Boolean value – TRUE or FALSE. A condition with a numerical value will result in considering it unfulfilled.

If you want to specify a condition with a numerical value, for example, a reading from a distance sensor, you must use a comparison, eg. “Is the distance sensor reading less than 20”. Then you will get a logical value of TRUE or FALSE.

Loop REPEAT

LOFI_Blocks_Control (4)

The blocks placed inside the REPEAT loop will be executed by the number of times specified by the parameter.

Parameters:

  • The number of repetitions.

CONSOLE

LOFI_Blocks_Control (5)

The CONSOLE block allows you to display any value in the console built in LOFI Blocks. This allows us to check what is the real value of a variable, a parameter or a condition, thanks to which it is easier to find possible errors in the program.

Parameters:

  • Field ON / OFF – activates the display of data in the console by a given block – so that if we do not need the data in the console at the moment, we can easily turn it off.
  • HEADER – a text value displayed in the console before the colon character. The header allows to describe the value we display in the console, which improves readability when we display several different data in the console.
  • DATA – data to be displayed in the console.

LOFI Blocks – Numbers

Arithmetic operations

LOFI_Blocks_Numbers (1)

A block that performs basic arithmetic operations on two received variables. The value returned by this block is NUMBER.

Parameters:

  • The left side of the operation.
  • Arithmetic operator; the type of operation we want to do.
  • Right side of the operation.

If we use a logical variable as either side of the operation, it will be converted to TRUE – 1, FALSE – 0.

Comparison

LOFI_Blocks_Numbers (2)

A block that performs basic arithmetic comparisons on the two variables received. The value returned by this block is a logical variable (TRUTH, FALSE).

Parameters:

  • The left side of the comparison.
  • Type of comparison.
  • The right side of the comparison.

If we specify a logical variable as one of the sides of the operation, it will be converted to the number TRUTH – 1, FALSE – 0. The result of the comparison is always a logical value – TRUE or FALSE.

Numeric variable

LOFI_Blocks_Numbers (3)

A block returning a fixed numeric value.

Parameters:

  • Value.

Random number

LOFI_Blocks_Numbers (4)

A block returning a random number within the range specified by the parameters.

Parameters:

  • The lower limit of the draw.
  • The upper limit of the draw.

LOFI Blocks – Logic

Logic value – boolean

LOFI_Blocks_Logic (1)

Returns logic value – TRUE or FALSE.

Parameters:

  • Value – TRUE, FALSE.

If you put a logic value in the field that expects a number value, the logic value will be converted to number – TRUE – 1, FALSE – 0.

Logical (boolean) multiplication – AND

LOFI_Blocks_Logic (2)

Boolean multiplication returns TRUE only if left and right value is TRUE otherwise the operation returns FALSE.

Parameters:

  • Left side of the operation – boolean value – TRUE or FALSE.
  • Right side of the operation – boolean value – TRUE or FALSE.

We use boolean multiplication when we want to test if both conditions are TRUE.

Logical (boolean) alternative – OR

LOFI_Blocks_Logic (3)

Alternative returns TRUE if either left or right side of the operation is TRUE. Only if both sides of operation are FALSE the outcome is FALSE.

Parameters:

  • Left side of operation – boolean value – TRUE or FALSE.
  • Right side of operation – boolean value – TRUE or FALSE.

We use the logical sum if we want to check whether one of the two conditions is met.

LOFI Blocks – Drawing

DRAW

LOFI_Blocks_Drawing (1)

Main loop performing painting operations on the board built into LOFI Blocks. All blocks placed in the DRAW LOOP will be “drawn” on the board 25 times per second.

Draw loop ignores the WAIT delay block – it can not be stopped.

In the drawing loop, you can also place normal blocks – for example, controlling the robot. However, because the loop is performed without any delays, it can lead to disturbances, eg. when communicating with a robot via Bluetooth due to too much information being sent.

Text

LOFI_Blocks_Drawing (7)

A block that creates a text variable.

Parameters:

  • Text

Placing a text variable in a field designed for numbers or logical variables will cause an error in the code that will prevent the execution of the block containing it.

Line

LOFI_Blocks_Drawing (8)

The block draws on the table a straight line between the starting point defined by the coordinates X1 and Y1 and the endpoint determined by the coordinates X2 and Y2.

Parameters:

  • Coordinates of the starting point X1 (horizontal) and Y1 (vertical).
  • Coordinates of the end point X1 (horizontal) and Y1 (vertical).

Rotation

LOFI_Blocks_Drawing (9)

Reporting block – returning the value read from the indicated input.

Parameters:

  • Angle of rotation – range 0 – 100 corresponds to a rotation in the range of 0 – 360 degrees.
  • Center of rotation – coordinates of the point relative to which objects inside the DRAW block are moved and rotated.

The operation of the DRAW block may appear chaotic at first glance. All objects placed in the draw block are moved to the point specified by the coordinates of the center of rotation and then rotated by the given value. For example, to rotate a square with sides 50 by 50 in relation to its center, place it in the drawing block specifying as square coordinates X = -25, Y = -25.

Stroke

LOFI_Blocks_Drawing (3)

The block determining the thickness and color of the line drawn with the LINE block.

Parameters:

  • Thickness – specified in pixels.
  • R – Red – value of the red component.
  • G – Green – value of the green color component.
  • B – Blue – the value of the blue component.
  • A – Alpha – value of the constituent of transparency.

Rectangle

LOFI_Blocks_Drawing (4)

A block that draws a rectangle starting from the upper left corner at a point with coordinates (X, Y), a given width and height, filled with the color specified by the FILLING block.

Parameters:

  • X – horizontal coordinate of the upper left corner of the rectangle, given in pixels in the range 0-100.
  • Y – vertical coordinate of the upper left corner of the rectangle, given in pixels in the range 0-100.
  • WIDTH – width of the rectangle, given in pixels in the range 0-100.
  • HEIGHT – the height of the rectangle, given in pixels in the range 0-100.

X and Y coordinates and width and height values may have negative values or greater than 100, they will then be outside the area of the drawing field.

Infill

LOFI_Blocks_Drawing (2)

A block defining the color of filling elements drawn by RECTANGLE, ELLIPS and TEXT blocks.

Parameters:

  • R – Red – value of the red component.
  • G – Green – value of the green color component.
  • B – Blue – the value of the blue component.
  • A – Alpha – value of the constituent of transparency.

Infill is valid for all drawing blocks that follow it, until we change it again using the INFILL block.

Ellipse

LOFI_Blocks_Drawing (5)

The block draws the ellipse starting from the upper left corner at the point with coordinates (X, Y), the given width and height, filled with the color specified by the FILLING block.

Parameters:

  • X – the horizontal coordinate of the center of the ellipse, given in pixels in the range 0-100.
  • Y – the vertical coordinate of the center of the ellipse, given in pixels in the range 0-100.
  • WIDTH – the width of the ellipse, given in pixels in the range 0-100.
  • HEIGHT – the height of the ellipse, given in pixels in the range 0-100.

X and Y coordinates and width and height values may have negative values or greater than 100, they will then be outside the area of the drawing field.

Text

LOFI_Blocks_Drawing (6)

A block that draws text starting from the upper left corner at a point with coordinates (X, Y) of a given font height, filled with the color specified by the FILLING block.

Parameters:

  • TEXT – content to be written in the drawing field, defined by a text variable block.
  • Size – font height, 15px by default.
  • X – horizontal coordinate of the upper left corner of the text field, given in pixels in the range 0-100.
  • Y – vertical coordinate of the upper left corner of the text field, given in pixels in the range 0-100.

X and Y coordinates can have negative values or greater than 100, they will be located outside the area of the drawing field.

LOFI Blocks – Sound

PLAY loop

LOFI_Blocks_Sound (2)

The main loop in which we put instructions from the PLAY section. It differs from the loop REPEAT by the lack of additional delay at the end of the loop.

If the blocks from the PLAY section are placed on the main REPEAT loop, they will be executed as well as the robot control blocks placed in the PLAY loop.

LOFI Blocks is written in JavaScript language, its “weakness” is poor management of instruction execution time. This problem shows when a lot of delay operations defined by the WAIT block are performed simultaneously, which is especially noticeable when we are trying to play some sort of rhythmical sound sequence.

Piano

LOFI_Blocks_Sound (4)

The block controlling the main synthesizer.

Parameters:

  • Sound pitch – determined in the range from 0-100, covering 50 sounds from the C major scale, two units per sound.

PIANO synthesizer is the only instrument connected with NOISE or with ECHO.

Piano – ATTACK

LOFI_Blocks_Sound (5)

A block that controls the length of the sounds played by the PIANO synthesizer.

Parameters:

  • ATAK – the length of the sound volume increase. At the value of 0, the sound will start immediately, at 100 its volume will gradually increase for 1 second.
  • DURATION – duration of the whole sound. If it is shorter than the length of the ATTACK, it will not be fully reproduced.
  • RELEASE – sound fading time. At the value 0, the sound stops immediately, at 100 its volume will gradually decrease by 1 sec.

Piano – MODULATION

LOFI_Blocks_Sound (6)

Modulation of the PIANO synthesizer. With its help, you can change the synth tone from “soft” to “very strange”. Modulation allows you to generate various types of interesting sound effects.

Parameters:

  • MODULATION – the frequency of the modulation oscillator. At 0, 50 and 100 it is a multiple of the main frequency of the synthesizer, that sound will be natural. At 1-10, the modulation will have a low frequency allowing the effect of “police siren”. At 51-99 the modulation will be larger than the base oscillator this will disrupt the sound.
  • STRENGTH – strength of modulation.

Modulation applies only to the PIANO synthesizer.

Bass

LOFI_Blocks_Sound (3)

A block controlling a synthesizer responsible for playing bass lines.

Parameters:

  • Sound pitch – determined in the range from 0-100, covering 50 sounds from the C major scale, two units per sound.

The bass synthesizer is not connected with ECHO and REVERB, their use will not change the bass’ sound.

Key

LOFI_Blocks_Sound (7)

A block that returns the digital value of the key pressed on the on-screen keyboard embedded in LOFI Blocks or the corresponding keyboard keys (A, S, D, F, G, H, J, K, L,;, ‘, \). When no key is pressed, the block returns 0.

The keyboard values correspond to fifty sounds from the C major scale.

Rhythm

LOFI_Blocks_Sound (9)

A block that reproduces the sounds of the built-in drum machine.

Parameters:

  • The name of the sound being played.
  • Speed – the playback speed of the recording – 50 is the original speed, in the range 0-50 the recording is proportionally released, at the value of 100 the recording is played twice as fast.
  • Reverse – sample direction. For the value FALSE the sample is played normally, for the value TRUE the sample is played from the back.

Echo

LOFI_Blocks_Sound (10)

The block determining the parameters of the implemented echo effect (also called the delay effect).

Parameters:

  • Strength – the echo cancellation force, determined in the range of 0-100, at the value of 0, the echo will be suppressed after the first repetition, at the value of 100, the echo will not be suppressed at all, it will sound infinite.
  • Length – defines the delay time of the echo in milliseconds, the value of 100 corresponds to one second.

The built-in echo effect is connected only to the synthesizer controlled by the PIANO block. It will not affect the sounds generated by BASS and RHYTHM blocks.

Reverb

LOFI_Blocks_Sound (1)

A block that sets the parameters of the reverb effect.

Parameters:

  • Strength – the reverberation muting force, determined in the range of 0-100. With a small value, the reverb will sound like in a small room, at 100 it will sound without any muting.

Setting the reverb strength to 100 will cause subsequent sounds to be added to it without any muting, which can lead to overload (excessive loudness) of the sound.

Reverb is connected only to the PIANO synthesizer. It will not change the sounds generated by the BASS and RHYTHM blocks.

LOFI Blocks – Actions

When the key was pressed …

LOFI_Blocks_Actionspng (2)

A block that reproduces the instructions in its interior after pressing the indicated key.

Parameters:

  • The key – the keyboard key that calls the block execution.

The instruction sequence is executed only one, it is not looped.

Slider

slider

A block that returns a value from one of the sliders from the built-in gamepad.

Parameters:

  • Slider – number of the slider, 1 – upper slider, 2 – lower slider.

Button

LOFI_Blocks_Actionspng (3)

A block returning TRUE or FALSE. Depends on whether the indicated keyboard key is pressed.

Parameters:

  • Keyboard key – the keyboard key whose state we want to read.

Mouse

LOFI_Blocks_Actionspng (4)

Returns X and Y coordinate of mouse cursor OVER THE DRAWING BOARD.

Parameters:

  • Axis – X or Y.

Mouse button

LOFI_Blocks_Actionspng (5)

Returns TRUE or FALSE whether the left mouse button is pressed OVER THE DRAWING BOARD.

Pivot

Swing

A block returning the value read from a tablet or a smartphone accelerator. A value of 50 means the device is set horizontally.

Parameters:

  • Pivot axis – vertical or horizontal.

This block does not exist in the version for desktop computers.

LOFI Blocks – Variables

Variables blocks are the blocks that hold values and strings.

Create variable

setvariable

Allows you to create a variable and name it.

Set variable to

LOFI_Blocks_Variable

Sets the specified variable to the amount.

Parameters:

  • Variables created by the user. Allows you to select the specific variable from the list of variables created in the project.
  • Rename variable. Allows you to renam the selected variable.
  • Delete variable. Allows you to delete the selected variable.

Change variable to

LOFI_Blocks_Variable

Changes the specified variable by the amount.

Parameters:

  • Variables created by the user. Allows you to select the specific variable from the list of variables created in the project.
  • Rename variable. Allows you to renam the selected variable.
  • Delete variable. Allows you to delete the selected variable.