2. Basic operation manual

Basic coding in UI.Flow (Part A)

717 views 2019-03-07 2019-03-07 peterletintech 2

Hardward requirement

  • M5GO
  • Connecting wire

Lets start the coding

Step 1. Create a label by dragging the label to the centre of the UI

Step 2. Click once on the label to change the name to “result”, color to green and text of the label to “0”

Step 3. Click the “Create variable…” under Variables. Then type the variable name “input1” and click the “OK” button Inside the pop-up window.

Step 4. Set the variable “input1” by dragging a “set input1 to” block under Variables under the “Setup” block.

Step 5. Initialize the value of “input1” to 0 by dragging a “0” block to the right side of the “set input1 to” block. The combination of the blocks means that setting the value of input1 to 0.

Step 6. Use a button to change the value of input1. Drag the “Button A pressed” block under Event to a blank place. All the blocks inside the “Button A pressed” block will run when Button A is pressed.

Step 7. Drag the “change input1 by 1” block inside “Button A pressed” block. The “change input1 by 1” block will increase the value of input 1 by 1. Change the increase value to 3.

Step 8. Drag the “Label result show “Hello M5”” block under “change input1 by 3” block.

Step 9. Drag the “input1” block under Variables to the right of “Label result show” block. This shows the updated value of input1 in the “result” label.

Step 10. Test the code


Button A is pressed once. The input1 result is increased by 3.

Button A is pressed twice. The input1 result is again increased by 3.

The following in Part 2.


Was this helpful?