Modul Mblock 5 and Arduino
Modul Mblock 5 and Arduino
Modul Mblock 5 and Arduino
Contents
1.0 Introduction: Visual Programming ........................................................................................................ 2
2.0 The Algorithm, Flowchart and Programming ........................................................................................ 7
3.0 Visual Programming: mBlock ............................................................................................................... 14
3.1 THE INTERFACE ..................................................................................................................................... 14
3.2 SPRITE PROGRAMMING ........................................................................................................................ 16
i. Add a Sprite .......................................................................................................................................... 16
ii. Move the Sprite................................................................................................................................... 18
iii. Add Sounds......................................................................................................................................... 19
iv. Add a Costume ................................................................................................................................... 22
Activity 1: Bouncing ball ...................................................................................................................... 24
Activity 2: Bouncing ball with a static obstacle ................................................................................... 25
Activity 3: Bouncing ball with a moving obstacle ............................................................................... 25
Activity 4: Complete bouncing ball game ........................................................................................... 26
4.0 Programming Arduino .......................................................................................................................... 28
4.1 ARDUINO BOARD .................................................................................................................................. 28
4.2 PROGRAM ARDUINO UNO USING MBLOCK 5 ....................................................................................... 30
Activity 5: Blinking LED ........................................................................................................................ 30
Activity 6: ON and OFF the LED with keyboard keys........................................................................... 38
Exercise 1: Improve the program in Activity 6 ................................................................................ 42
Exercise 2: Create a mood lights based on the flowchart............................................................... 43
Activity 7: Control LED using buttons in mBlock (virtual buttons) ...................................................... 44
Activity 8: Integrate push button and buzzer ..................................................................................... 53
Exercise 3: Create a program to turn on/off an LED and buzzer using a single push button. ........ 54
Activity 9: Turn on LED with a clap (using microphone). .................................................................... 54
4.3 INTEGRATE SENSORS AND ACTUATOR ................................................................................................. 56
Activity 10: Light sensor with LED ....................................................................................................... 56
Activity 11: Control Blinking LED with potentiometer ........................................................................ 58
Exercise 4: Make some adjustment so that potentiometer able to control (ON/OFF) 3 LEDs. ...... 59
Activity 12: Auto Awning System (using Light Dependent Resistor (LDR) and Servomotor) .............. 60
1
SKILL MODULE: DIGITAL STEM
v. mBlock Installation
Step 1: Open the website: https://mblock.makeblock.com/en-us/download/
2
SKILL MODULE: DIGITAL STEM
3
SKILL MODULE: DIGITAL STEM
Step 5: Click INSTALL to install the driver so that the USB port can be used with external device.
4
SKILL MODULE: DIGITAL STEM
Figure 7: mBlock UI
5
SKILL MODULE: DIGITAL STEM
Login/Signup icon.
Note: If you do not have the account, please setup your email in gmail.
6
SKILL MODULE: DIGITAL STEM
Algorithm
It is a logical step-by-step approach to solve the problem. This is the first step in the process to solve a
mathematical or computer problem. An algorithm includes calculations, reasoning, and data processing.
Algorithms can be presented by natural languages, pseudocode, and flowcharts, etc.
According to Dr. Christoph Koutschan, a computer scientist working at the Research Institute for Symbolic
Computation (RISC) in Austria, he has surveyed voting for the important types of algorithms. As a result,
he has listed 32 crucial algorithms in computer science. Despite the complexity of algorithms, we can
generally divide algorithms into six fundamental types based on their function.
Pseudocode is an artificial and informal language that helps programmers develop algorithms.
Pseudocode is a "text-based" detail (algorithmic) design tool. The rules of Pseudocode are reasonably
straightforward. All statements showing "dependency" are to be indented.
Flowchart
A flowchart is the graphical or pictorial representation of an algorithm with the help of different symbols,
shapes, and arrows to demonstrate a process or a program. With algorithms, we can easily understand a
program. The main purpose of using a flowchart is to analyse different methods.
Input / Output
Process / Instruction
Decision
Connector / Arrow
https://www.edrawsoft.com/explain-algorithm-flowchart.html
7
SKILL MODULE: DIGITAL STEM
1. Sequential - The simplest control statement. A sequence of sequential statements runs from the
top to bottom (from the first to the last block of flowchart). Runs exactly once. Example:
1) unlock the door
2) open the door
3) enter the room
4) switch on the light
5) close the door behind you
2. Selections (also known as decisions) – Is used to make choices based on information. Instead of
following a specific order of events, they ask a question in order to figure out which path to take
next. An algorithm can be made more intelligent or jump to different parts of the program.
if
if-else
switch (with cases)
The previous example about entering the room could be changed to consider for different
conditions. For instance, it could change to:
8
SKILL MODULE: DIGITAL STEM
1) IF the door is locked, then unlock the door, ELSE do nothing (go to next instruction)
2) IF the door is closed, then open the door, ELSE do nothing
3) Enter the room
4) IF the room is dark, then switch on the light, ELSE do nothing
5) Close the door behind you
The sequence of actions is carried out is selected based upon the information provided. The only
way for a computer to discover the circumstances is to collect inputs and compare it to known
values.
In this case, known values would be values such as 'locked' or 'unlocked', 'closed' or 'open'. The
computer looks at the door and checks to see if its current state matches 'closed' and 'locked'. If
it matches 'locked', the door needs to be unlocked. Otherwise, nothing should be done.
*CASE
The selection IF-THEN-ELSE is useful if the choices are binary, such as 'locked' or 'unlocked' ('yes'
or 'no').
The alternative to the IF-THEN-ELSE structure is the CASE structure. Using CASE, the algorithm
searches a list of options until it finds the correct condition. For example, on a multiple-choice
quiz, the answers might be A, B or C - the correct condition is either A, B or C.
9
SKILL MODULE: DIGITAL STEM
Basically, IF-THEN-ELSE looks for the correct option from two choices where CASE looks at the
correct option from multiple choices.
3. Loops (iteration) - The process of repeating sections of a program to achieve a particular target or
goal.
for
for-each (also known as range-based)
while
do-while
Computer programs can use different types of loops; infinite loops (repeat forever), count-
controlled loops (repeat a number of times) and condition-controlled loops (repeat until
something happens).
a. Infinite loops
A sequence on an infinite loop keeps repeating until the user terminates the program or it crashes.
For example, on a desktop computer, the operating system has a program that continually checks
your USB ports to see if you have plugged in a device. Even after you have plugged in a device, it
still continues to check for any new devices.
b. Count-controlled loop
Count-controlled loops are used to make a computer do the same thing a specific number of
times. The count-controlled loop can be described as a FOR loop. The program repeats the action
FOR a number of times. The count-controlled loop can be described as the FOR-NEXT structure.
The program repeats the action between the FOR and NEXT number of times.
c. Condition-controlled loops
A program could be made more intelligent by programming it to avoid hazards. For example, if
the robot vehicle is 3 cm from the edge of the table and you tell it to move forwards 5 cm, it will
drive off the edge of the table. To stop this from happening, you might write a condition-
controlled loop like this:
move forward
repeat until (touching table edge)
Condition-controlled loops can be used to add a high degree of intelligence to a computer
system.
10
SKILL MODULE: DIGITAL STEM
WHILE
Condition-controlled loops are also called WHILE loops or WHILE-ENDWHILE statements. A WHILE
loop code is repeated based on a certain condition. The condition could be 'true' or 'false'. The
WHILE loop executes while a condition is true. Whether the condition is met or not is checked at
the beginning of the loop. If the condition is 'true' it repeats, if not then the code is not executed.
DO WHILE
A similar condition-controlled loop is a DO WHILE loop. This method differs from a WHILE
condition-controlled loop in that the condition is checked at the end of the loop. If the condition
is ‘true’, the loop repeats. Thus, the code in the loop is executed at least once.
11
SKILL MODULE: DIGITAL STEM
Infinite loops
Condition-controlled loops can result in intentional or unintentional infinite loops. If we wanted
to loop indefinitely, we could set a condition that would never be met, thus iterating infinitely.
The following examples would result in an infinite loop:
WHILE:
count = 1
while count <>0:
print(count)
count +=1
DO WHILE:
count = 1
do
print(count)
count+=1
while count <>0
REPEAT UNTIL:
count = 1
repeat
print(count)
count+=1
until count =0
It is important to check that the conditions we set can be met if we wish them to be.
12
SKILL MODULE: DIGITAL STEM
With a REPEAT UNTIL condition-controlled loop the iteration occurs indefinitely until the
specified condition is met. The code in the loop is executed at least once.
An infinite loop can occur with all condition-controlled loops but not with a count-controlled
loop.
https://www.bbc.co.uk/bitesize/guides/zrxncdm/revision/7
Exercise
1. Label the name of each flowchart structure.
A B C
Pseudocode: Pseudocode is an artificial and informal language that helps programmers develop
algorithms. Pseudocode is a "text-based" detail (algorithmic) design tool. The rules of Pseudocode are
reasonably straightforward. All statements showing "dependency" are to be indented.
Flowchart: A flowchart is simply a graphical representation of steps. It shows steps in sequential order
and is widely used in presenting the flow of algorithms, workflow or processes. Typically,
a flowchart shows the steps as boxes of various kinds, and their order by connecting them with arrows.
13
SKILL MODULE: DIGITAL STEM
The user interface (UI) for mBlock is distributed into five major sections/area as follow.
1.Menu/Toolbar 2.Blocks
4. Stage
3.Scripts
5.Panels
1. Menu/Toolbar
1 2 3 4 5 6 7 8 9 10 11
14
SKILL MODULE: DIGITAL STEM
Python
11 Enter mBlock-Python Editor.
Editor
2. Blocks
Blocks grouped by category with different color.
3. Scripts
Construct and compile program by dragging blocks to this area.
4. Stage
Present designs/animation (sprites) and test the program.
5. Panels
Edit the designs (edit sprites and background in stage) and connect to devices
(microcontroller).
https://www.yuque.com/makeblock-help-center-en/mblock-5/ui-navigation
15
SKILL MODULE: DIGITAL STEM
Note: The default sprite is Panda, and you can click × in the upper right corner of the sprite to delete it.
b. Choose the sprite in the Sprite Library dialog box appears and click OK. Choose Bee1.
16
SKILL MODULE: DIGITAL STEM
17
SKILL MODULE: DIGITAL STEM
b. Drag the Motion block and drop it under the current blocks.
c. Click the green flag under the stage to run it. Bee1 moves.
18
SKILL MODULE: DIGITAL STEM
19
SKILL MODULE: DIGITAL STEM
c. Choose the sound in the dialog box appears, and click OK.
d. The sound choose appears in the sound list. Click × to return to the editing page.
20
SKILL MODULE: DIGITAL STEM
e. Drag the Sound block and drop it under the current blocks, and then
choose “Chee Chee” from the drop-down list box.
(6) Click the green flag in the lower right corner of the stage and see what happens.
21
SKILL MODULE: DIGITAL STEM
22
SKILL MODULE: DIGITAL STEM
c. Choose the costume in the dialog box appears, and click OK.
d. The costume choose appears in the sound list, and can be modified. Click × to return to the
editing page.
23
SKILL MODULE: DIGITAL STEM
e. Drag the Looks block and drop it under the current blocks.
e. Click the green flag in the lower right corner of the stage and observe what happens.
24
SKILL MODULE: DIGITAL STEM
25
SKILL MODULE: DIGITAL STEM
Complete the program with the following scripting. Edit sprites “Basketball” and “Game Over”.
26
SKILL MODULE: DIGITAL STEM
Review Questions:
27
SKILL MODULE: DIGITAL STEM
Arduino is an open-source computer hardware and software company, project, and user
community that designs and manufactures single-board microcontrollers and microcontroller kits
for building digital devices and interactive objects that can sense and control objects in the physical
and digital world. Microcontroller is a compact integrated circuit designed to govern a specific
operation in an embedded system.
It is a micro-computer that can control and carry out data analysis. Famous microcontroller
manufacturers are MicroChip, Atmel, Intel, Analog devices, and more. A microcontroller board,
contains on-board power supply, USB port to communicate with PC, and a microcontroller chip.
Reset
Button
USB
Programming
Port (Type B) In circuit serial
programming (ICSP)
Main MCU
Atmega328
28
SKILL MODULE: DIGITAL STEM
In order to design the system, we need a tools or software to communicate with the microcontroller
(Arduino). We can instruct the Arduino to do automation system. Figure 1 shows the overall Arduino
environment in general.
There are many ways to program the Arduino with different software features. Many software is widely
available as open-source such as mBLOCK and nodeRED other than Arduino IDE itself.
29
SKILL MODULE: DIGITAL STEM
GND
5V Pin 12
Hardware Procedure:
30
SKILL MODULE: DIGITAL STEM
mBlock Procedure:
Click on add
button.
Scroll and
choose
Arduino Uno
by clicking
on it. Then,
click ok.
31
SKILL MODULE: DIGITAL STEM
b. Start first block scripting of the Arduino UNO board on the script area.
Script
area
Block
script
menu
32
SKILL MODULE: DIGITAL STEM
33
SKILL MODULE: DIGITAL STEM
l. Right click on the set digital pin’s block scripts, click on Duplicate to copy the block script set.
Drop the block script set copied.
Right click
block, select
Duplicate.
34
SKILL MODULE: DIGITAL STEM
Make sure
Upload
button is set.
Then, click
Connect
button.
35
SKILL MODULE: DIGITAL STEM
Check the
Arduino
connected to
the serial port
(USB) available
and click
Connect.
programmed.
p. Upload the block script by clicking Upload button.
Click Upload
to upload
block script.
36
SKILL MODULE: DIGITAL STEM
q. The Arduino Uno has been programed. Observe the outcome from the circuit. Try adjust
by changing the number, reupload the block script and observe the output.
37
SKILL MODULE: DIGITAL STEM
i) Click
Sprite.
38
SKILL MODULE: DIGITAL STEM
c. On the mBlock panel, click Sprite. From block script menu, click Events and choose
by dragging the block script and drop to the script area.
ii) Choose
this block.
39
SKILL MODULE: DIGITAL STEM
e. Duplicate the first block scripts and change space to alphabet a and edit the upload message
to OFF.
i) Right-click,
and select
duplicate.
ii) Change to
character a.
iii) Edit
statement
to OFF.
f. Select Devices in mBlock panel and click Arduino Uno. From block script menu, click extension.
Select and click + Add for Upload Mode Boardcast extension (same as step b.).
40
SKILL MODULE: DIGITAL STEM
i) Choose
this block.
iii) Edit
statement
to ON.
i) Select
Upload
Mode
Broadcast
.
v) Choose
this block.
iv) Select Pin.
41
SKILL MODULE: DIGITAL STEM
i. Upload the block script by clicking Upload button. Now we can control LED from keyboard.
Improve the block script so that the LED can be control with three options.
1. ON – turn ON the LED
2. OFF – turn OFF the LED
3. Blink – set the LED ON for 1s and OFF for 2s.
42
SKILL MODULE: DIGITAL STEM
Flowchart:
43
SKILL MODULE: DIGITAL STEM
Hardware Procedure:
44
SKILL MODULE: DIGITAL STEM
mBlock Procedure:
a. Select Background from mBlock panel. Click on + sign to add background to mBlock user
interface in Stage.
i) Select
Background.
b. We can choose any available background or we can create custom made background by
clicking My Backdrops. Choose any background and click ok.
45
SKILL MODULE: DIGITAL STEM
c. The background should have changed with the one we selected. To adjust view of the stage,
select one of the buttons below the stage.
Options to
view stage.
d. Now, we need to create our button in the stage. Click add button in Sprite panel.
Click add
button.
46
SKILL MODULE: DIGITAL STEM
e. In Sprite library, click on Icons. Choose any button you like. In this example we choose Empty
button14 and click OK. Get one more button with the same design.
Select
button
design
and click
OK.
f. We can change the sprite button name. Let’s name it on button and off button respectively.
We can edit the label on the sprite buttons by clicking Costumes.
i) Edit
name for
the sprite
button.
ii) Redesign
the button
by clicking
Costumes
for selected
sprite .
47
SKILL MODULE: DIGITAL STEM
g. Select on button sprite and click Costumes. Click on Text symbol and locate cursor on button.
Type in “ON”. We can edit the font such as color and type.
ii) Select
Text
editor. iii) Type in
“ON” for this
button
i) Select
on_button
sprite.
h. Edit color of on button by click Select editor and click the button. Change Fill color to green.
Click X button to complete the sprite editing.
i) Click
Select
editor. ii) Select
green
color in
Fill.
iii) Click X to
close editing.
48
SKILL MODULE: DIGITAL STEM
i. Repeat the same process (step g and h) to edit the off button. Here how the stage and
sprites look like.
j. Click on-button sprite in Sprite panel. Click Events in Script Block. Drag the block
in scripting area.
ii) Select
Events
iii) Drag and
blocks.
drop the block.
i) Click on-button
sprite in Sprite
panel.
49
SKILL MODULE: DIGITAL STEM
k. Select Sound in Script Block menu. Click on and drag the block script to scripting
area.
i) Select
Sound
blocks. ii) Drag and
drop the block.
50
SKILL MODULE: DIGITAL STEM
m. Carry out the same scripting process for off-button. Click off-button sprite and prepare the
program as follow.
n. We can add another animated feature in stage. Click on Panda sprite to start block scripting.
Complete the block scripting as follow.
51
SKILL MODULE: DIGITAL STEM
o. Click on Devices and select Arduino UNO. Complete the block scripting as follow and upload
it into Arduino UNO. Click on the spite in the stage area.
52
SKILL MODULE: DIGITAL STEM
mBlock Scripting:
Build the block scripting below and upload it into Arduino UNO. Observe the output.
53
SKILL MODULE: DIGITAL STEM
Exercise 3: Create a program to turn on/off an LED and buzzer using a single push button.
12
mBlock Scripts:
Complete the following block scripts and upload it into Arduino UNO. Observe the output.
54
SKILL MODULE: DIGITAL STEM
1. Devices > Arduino Uno > Upload Mode Boardcast > when receiving upload mode message ON
2. Devices > Arduino Uno > Pin > set digital pin 12 output as high
3. Devices > Arduino Uno > Control > wait 1 seconds
4. Devices > Arduino Uno > Pin > set digital pin 12 output as low
55
SKILL MODULE: DIGITAL STEM
- +
5V
GND
A0
4
mBlock Scripting:
Complete the following block scripts and upload it into Arduino UNO. Observe the output.
56
SKILL MODULE: DIGITAL STEM
Expected output:
57
SKILL MODULE: DIGITAL STEM
We going to create a display and Arduino to convert analog value from potentiometer to value
second. The value second will be used to control duration of blinking LED.
58
SKILL MODULE: DIGITAL STEM
mBlock Scripting:
1. Complete the following block scripts for Arduino UNO under devices.
Exercise 4: Make some adjustment so that potentiometer able to control (ON/OFF) 3 LEDs.
59
SKILL MODULE: DIGITAL STEM
Activity 12: Auto Awning System (using Light Dependent Resistor (LDR) and Servomotor)
Circuit: Build the circuit as in Diagram below.
mBlock scripting:
1. Block scripts for sprite.
Note: Use “if-else” to control servo motor with control threshold for LDR is 100. You can adjust this threshold for
sensitivity of the system.
60