Lesson 15.1. UIFlow it's easy

[Dimi]

The purpose of this lesson

Hi! Today we finally get to know in detail the elements of UIFlow and understand the things that previously seemed mysterious (figure 1).

Figure 1

This lesson will teach you how to understand the interface of the UIFlow development environment and understand the basic principles of working with blocks.

Short help

• Purpose: development environment for m5stack family of devices in Blockly and MicroPython languages
• Scope: education
• Connection interface: Wi-Fi (Internet)
• Compatibility: device family M5STACK

Brief overview

In order to start please follow the link http://flow.m5stack.com (detailed connection procedure given in lesson 15). Let's look at section A in figure 2-these are UI elements. You can drag and drop them to the virtual device display and then access them using the links in the UI tab. Good! Now let's look at section B - a library of Units-modules, their methods and properties are hidden in the tab under the same name.

Figure 2

Section C contains Loop loop and built-in button event handlers.
Section D contains a switch between Blockly or Python programming languages. Section E contains the main menu. You can access the forum with the first button; read the documentation with the second button; with the third button, you can select sample programs; with the fourth and fifth buttons, you can undo or redo the action; with the sixth button, you can open the resource Manager (for example, to load pictures into the device memory); by clicking on the seventh button you will load the code into the temporary memory of the device and run it (the code will be deleted after the device reboot); with the last button you can open the continuation of the menu. In this section E is finished. Let's look at the last one with the first button (at the top) to place the Blockly code in the center of the workspace; with the second and third buttons you can zoom; in order to delete a block - just drag it to the fourth button (the image of the basket) and the block will be permanently deleted.

Let's start!

Blockly (UI Flow)

The most difficult, in my opinion, is to understand how to work with variables. Therefore, I will try to explain this in as much detail as possible in this lesson. All other elements of the language Blockly easy to use because of the fact that the names speak of their direct purpose and the extra words here will not be useful.

So let's get started! To create a variable, click the Variables tab (1) (figure 3) in the blocks menu, then click the Create variable button... (2).

Figure 3

Now a window will appear asking you to enter the name of the new variable. Enter a name (1) (figure 3.1), then click OK (2).

Figure 3.1

Great! The variable is now created (figure 3.2). You can now use the set and change methods to change the values of all created variables.

Figure 3.2

If you want to use a variable you drag it with the mouse to the workspace (figure 3.3). You can replace a variable in the block with another one created earlier, as well as rename and delete it.

Figure 3.3

The most "difficult" was over. Now you know how to work with variables in Blockly language.

Now let's move on to the next tab Math. This tab contains mathematical methods and constants (figure 4).

Figure 4

Pay attention to the first (top) block - it is designed to store numeric values (even integer, even fractional). The second block allows you to perform basic mathematical operations (addition, subtraction, multiplication and division). The third block contains mathematical constants (PI, e, etc.). The fourth block allows you to get the remainder of the division. The fifth block allows you to define the type of number (even, odd, integer or fractional, positive or negative, etc.). All the other blocks, I will not describe, I think You are so clear what they are doing, judging by their names.

Now let's go to the tab called Loops (figure 5). Here there is all sorts of set of cycles. The first (top) loop executes the code inside the specified number of times (for example, 10). The second loop executes the code until a condition is met. The third will iterate through the list and put the i-th element in the variable i. The fourth one is like a classic for loop. the Fifth block allows you to exit the for loop forcibly.

Figure 5

Go to the next tab Logic. It is not difficult to guess that this tab contains elements related to logical operations (figure 6). The first block (above) is a condition without exception. The second-condition with the exception. The third constant is True or False. Fourth-conditions (<, <=, >, >= and others). Fifth-denial of (NOT), like ! In the sixth language, the nonexistent NULL value. Seventh-logical operators. The eighth block compares the condition and returns the corresponding value from the if true or if false block.

Figure 6

Let's look at the Graphic tab (figure 7). This tab has a set of methods for displaying text and simple mathematical figures on the display of the device.

Figure 7

If you want to quickly draw a smiley on your device, the Emoji tab will help you perfectly (figure 8).

Figure 8

In the future, I hope, in the tab Timer (figure 9) there will be additional functions to work with time, but for now You can use the delay block (the time during which the device does nothing).

Figure 9

It will be difficult to understand the code if it does not consist of functions. Function to create tab Functions (figure 10).

Figure 10

The first (top) block allows you to create a function named dosomething that returns nothing. The second block allows you to create a function that can return a value or variable. If you want to add function arguments, you need to click on the button with the gear image, drag and drop from the left window to the right block input name and write the argument name (for example: x, y) (figure 10.1).

Figure 10.1

The third block returns the bound value from the function itself when the condition is met.

So, with functions worked out. Let's go to the Text tab (figure 11). If you need a string variable, use the first block (above). If you want to convert all letters to upper or lower case, use the second block. If you need to get a letter under a certain sequence number, use the third block. Using the fourth block, you can count the number of occurrences of the first argument in the string. The fifth block allows you to check whether the line is empty. You can find out the length of the string using the sixth block. If you want to display a line, use the seventh block. You can use the eighth block to replace a substring in a string with a new string. With the ninth block you can rewrite the line in reverse. With the help of the tenth block, You can remove the spaces.

Figure 11

If you need to request text input on the device screen, use the eleventh and twelfth blocks. With the thirteenth block, you can cast variables and constants of a different type to the string type.

Let's look at the Lists tab (figure 12). As you know there is a "data type" in Python.

Figure 12

With the first block (above) you can count the number of items in the list. The second block lets you know if the list is empty. With the third block you can find the number of the item in the list. With the fourth block you can create an empty list. With the help of the fifth block You can create a list with an unlimited number of items added manually (figure 12.1).

Figure 12.1

With the sixth block You can get/remove an item under a specific number. With the seventh block You can get a sublist within the given boundaries from the list. With the eighth block you can create a list of the same elements of any length. With the ninth block you can reverse the order of the list. With the tenth block you can set the value of the required list item. With the eleventh block, you can create a list from a string or a string from a list according to a given delimiter. This with the tab for today.

Let's move on to the very interesting and latest tab on today's Remote.
With this tab you can access Your device from anywhere in the world where there is Internet. It is enough to drag the first block into the code of Your program (above), after downloading the code into the device - the screen will display the QR-code (figure 13.1), if it is scanned using a mobile phone or tablet, a Web page with remote controls (blocks from the second to the last) will open (figure 13.2).

Figure 13

Figure 13.1

Figure 13.2

When you access certain elements from the Web page, the corresponding handler functions will be run.

C & C++ (Arduino IDE)

Example not yet written ^_^

Downloads

Alas, there is nothing here today :)