Dr. Le Trong Nhan - MSc.

Bang Ngoc Bao Tam

 Contents

Chapter 1. LED Animations on Tinker CAD 5

1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
2 Create Tinker CAD account . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
3 Blinking LED . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
4 Exercise . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
4.1 Two Toggling LEDs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
4.2 Multiple Blinking LED . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
4.3 Seven Segment LED . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
4.4 Two Digit Number . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
4.5 One Way Traffic Light . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
4.6 Two Way Traffic Light . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
4.7 Traffic Light with Timer . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
4.8 Analog Clock Project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
4.9 Analog Clock with Second . . . . . . . . . . . . . . . . . . . . . . . . . . 16
4.10 Finalize the Analog Clock . . . . . . . . . . . . . . . . . . . . . . . . . . 16

Chapter 2. Motor Controller and Serial Monitor 17

1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
2 Analog vs Digital . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
3 Motor Controller . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
3.1 Left Motor Controller . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
3.2 Left Motor Testing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
3.3 Right Motor Testing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
3.4 Full Motor Control Functions . . . . . . . . . . . . . . . . . . . . . . . . 21
3.5 Full Motor Testing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
4 Serial Monitor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
4.1 LED Controller 1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
4.2 LED Controller 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
4.3 Robot Controller . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
4.4 Robot Headlights . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

Chapter 3. Blockly Programming Language 25

1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
1.1 What is Blocky? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
1.2 Why was it created and how does it work? . . . . . . . . . . . . . . . . 26
2 MakeCode for Microbit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
3 Blocks Language . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
3.3 Basic Blocks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
3.4 Input Blocks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29

Introduction to Computer Page 3

 3.5 Music Blocks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
3.6 LED Blocks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
3.7 Radio Blocks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
3.8 Loop Blocks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
3.9 Logic Blocks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
3.10 Variable Blocks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
3.11 Extensions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
4 Getting Started – Creating your own program . . . . . . . . . . . . . . . . . . 33
5 Simulating your Program . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
6 Sharing your Program . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
7 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35

Chapter 4. Teachable Machine with Google 37

1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
2 Get started with Teachable Machine . . . . . . . . . . . . . . . . . . . . . . . . 38
3 Use trained model with MIT Media Lab platform . . . . . . . . . . . . . . . . 39

Page 4 HCMUT - Computer Engineering

CHAPTER 1

LED Animations on Tinker CAD

1 Introduction
Arduino is an open-source electronics platform based on easy-to-use hardware and soft-
ware. Arduino boards are able to read inputs, e.g. light on a sensor, a finger on a button,
and turn it into outputs, such as activating a motor, turning on a LED. You can also control
your board by sending a set of instructions to the microcontroller on the board. To do so,
you will use the Arduino programming language (based on C language), and the Arduino
Software (IDE).

Figure 1.1: Arduino boards

Thanks to its simple and accessible user experience, Arduino has been used in thousands
of different projects and applications. The Arduino software is easy-to-use for beginners,
yet flexible enough for advanced users. Makers, of course, use it to build many of the
projects exhibited at the Maker Faire, for example. Arduino is a key tool to learn new
things. Anyone - children, hobbyists, artists, programmers - can start tinkering just fol-
lowing the step by step instructions of a kit, or sharing ideas online with other members
of the Arduino community.

Finally, the most interest of Arduino is the IDE (or Programming Editor). It is available in
many Operating System, from Mac, Windows to Linux. Morover, there are a lot of online
platforms are availale for Arduino programming, and TinkerCad is just one of them.

Tinkercad is an excellent tool that allows you to simulate Arduino-based systems (and a
lot more). You can simulate all exercises and even your own designs before trying them
on real hardware. It also allows you to do programming using blocks. You can download /
copy-paste the generated code later into Arduino IDE to program the real Arduino board,
rather than having to write it from scratch. Main targets in the this lab are:

• Create an account in TinkerCad

• Create the Blinky project

• Exercises concerning LED controller

Page 6 HCMUT - Computer Engineering

2 Create Tinker CAD account
When you sign up for a Tinkercad account, the login you create becomes your Autodesk
ID, too, which means you can use the same login everywhere on all of the Autodesk web-
sites. This is especially useful if you are using other Autodesk applications, such as Auto-
CAD or Inventor, because it gives you an identity on the Autodesk user forums and on the
Autodesk Knowledge Network, or AKN for short.

To create a Tinkercad account:

1. Go to the homepage of Tinkercad via the link: https://www.tinkercad.com/

2. Click JOIN NOW then choose Create a personal account

3. Sign in with your student email address and accept the Tinkercad terms of service.

After creating account successfully, you are able to use not only Tinkercad but also any
Autodesk tools. So, let’s begin the journey.

Introduction to Computer Page 7

3 Blinking LED
This is a very first project in an embedded platform such as the Arduino board. In contrast
to a program running on a PC, print the string "Hello world!!" to the screen is impractical
in a low-cost micro-controller platform. Therefore, this first project can be considered as
the "Hello world" project in the Arduino board. Moreover, this project uses the built-in
LED that are available on most Arduino boards. This LED is connected to a digital pin
and its number may vary from board type to board type. To make your program easier,
a constant LED_BUILTIN is defined to present the name of a pin connected to the LED,
and allows you to control the built-in LED easily. Following steps provide the details to
implement this project.

Step 1: From the main page of TinkerCad, select the Circuit and then, Create New Circuit
as following.

Figure 1.2: Create a first project on TinkerCad

Step 2: Choose the Arduino board from the starter list, then drag and drop the Blink
project.

Figure 1.3: Create the Blinky project

Page 8 HCMUT - Computer Engineering

 Step 3: Click on the Start Simulation button on the toolbar of TinkerCad (see figure bel-
low), either the LED connected on the pin number 13 or the build-in LED (notation with
letter L on the board) will be blinking. Actually, they are connected in parallel.

Figure 1.4: Start the simulation on Blinky project

Click on this button again (now it is Stop Simulation to stop the simulation, before click-
ing on the Code button, to check the source code of the project.

Step 4: Explore the source code of the project by clicking on the Code button, and then
select the Text mode. Following screen is opened.

Figure 1.5: Explore the source code of the project

The first thing you do is to initialize LED_BUILTIN pin as an output pin with the line:
1 pinMode ( LED_BUILTIN , OUTPUT ) ;
In the main loop, you turn the LED on with the line:
1 digitalWrite ( LED_BUILTIN , HIGH ) ;
This supplies 5 volts to the LED anode. That creates a voltage difference across the pins of
the LED, and lights it up. Then you turn it off with the line:
1 digitalWrite ( LED_BUILTIN , LOW ) ;
That takes the LED_BUILTIN pin back to 0 volts, and turns the LED off. In between the
on and the off, you want enough time for a person to see the change, so the delay() com-
mands tell the board to do nothing for 1000 milliseconds, or one second. When you use
the delay() command, nothing else happens for that amount of time.
Students are proposed to change the delay time and check the simulation again.

Introduction to Computer Page 9

 4 Exercise

4.1 Two Toggling LEDs

Since schematic design is not in the scope of the course, students are supported by a
project in the shareable link bellow:
https://www.tinkercad.com/things/7aSmzepeKEB

Figure 1.6: Two LEDs Connections

By clicking on the Copy and Tinker button, the project is clone to your account. The
program skeleton is also provided in the code section. In this exercise, two LEDs are con-
nected to the Pin number 0 and 1, respectively.

In this exercise, the status of two LEDs are toggled every 2 seconds, as demonstrated in
the figure bellow.

Figure 1.7: State transitions for 2 LEDs

Students are propose to implement in the loop function. Your source code is required
to place in the following.

1 void setup () {
2 pinMode (0 , OUTPUT ) ;
3 pinMode (1 , OUTPUT ) ;
4 }
5

6 void loop () {
7 // TODO
8 }

Page 10 HCMUT - Computer Engineering

 4.2 Multiple Blinking LED
The previous exercise is extended to eight different LEDs to play some animations. An
array and FOR statement are used to work with multiple LEDs, as supported in the link
bellow.

https://www.tinkercad.com/things/4vp8chmyfAm

Figure 1.8: Multiple Blinking LED

By clicking on the Copy and Tinker button, the project is clone to your account. The pro-
gram skeleton is also provided in the code section. In this program, a simple animations
with 2 stages are provided.

Students are propose to implement at least 10 animations for LEDs series. Your source
code is required to place in the following.

1 void setup () {
2 }
3

4 void loop () {
5

6 }

4.3 Seven Segment LED

An arrangement of seven different tiny LED in a package form a new component named
7 Segment LED. This component is widely used to display a digit from 0 to 9, as depicted
in the figure bellow.

Introduction to Computer Page 11

 Figure 1.9: Display number using seven segment LED

The proposed connection in this exercise is provided in the link bellow.

https://www.tinkercad.com/things/1Vxi3loXSKO

Figure 1.10: Seven segment LED

In this schematic, seven pins from 0 to 6 are used to connect to the device. To turn on a
segment of a device, a LOW signal is required.

In the example code, number 0 is displayed on the device. Students are proposed to fi-
nalize the function displayNumber(int i) to finalize the project. The source code of this
function is required to place in the following.

1 void displayNumber ( int i ) {

2 if ( i == 0) {
3 digitalWrite (0 , HIGH ) ;
4

5 digitalWrite (1 , LOW ) ;
6 digitalWrite (2 , LOW ) ;
7 digitalWrite (3 , LOW ) ;
8 digitalWrite (4 , LOW ) ;

Page 12 HCMUT - Computer Engineering

 9 digitalWrite (5 , LOW ) ;
10 digitalWrite (6 , LOW ) ;
11

12 } else if ( i == 1) {
13 // YOUR CODE HERE
14 } else if ( i == 2) {
15 // YOUR CODE HERE
16 } else if ( i == 3) {
17 // YOUR CODE HERE
18 } else if ( i == 4) {
19 // YOUR CODE HERE
20 } else if ( i == 5) {
21 // YOUR CODE HERE
22 } else if ( i == 6) {
23 // YOUR CODE HERE
24 } else if ( i == 7) {
25 // YOUR CODE HERE
26 } else if ( i == 8) {
27 // YOUR CODE HERE
28 } else if ( i == 9) {
29 // YOUR CODE HERE
30 }
31 }

4.4 Two Digit Number

The previous exercise is upgraded to 2 different seven segment LEDs. The project is
shared in the link bellow.
https://www.tinkercad.com/things/0gIPR9MqG0c

Figure 1.11: Two seven segment LEDs

In the source code of this project, a simple unit test is provided. Students can run the
simulation to figure out the connections in the circuit.

Students are proposed to display numbers of these LEDs, from 00 to 20 (and then loop
back). The updated display period is one second. To provide your source code, do not

Introduction to Computer Page 13

 need to present the functions, which are reused from the exercise before (such as dis-
playNumber1 and displayNumber2).
1 void setup () {
2 // TODO : Add your setup here
3 }
4 void displayNumber1 ( int i ) {
5 // REUSED : Do not need the source code
6

7 }
8 void displayNumber2 ( int i ) {
9 // REUSED : Do not need the source code
10

11 }
12 void loop () {
13 // TODO : Add your processing to display 2 digit numbers
14 }

4.5 One Way Traffic Light

In the next three exercises, a traffic light project is proposed and is presented in the link
bellow.

https://www.tinkercad.com/things/jN5V40xZ1Za

Figure 1.12: Full traffic light with timer

The traffic light has 5 seconds for the RED, 2 seconds for the the YELLOW and 3 seconds
for the GREEN. Please arrange the LEDs in a right order.

At this exercise, only first way traffic light is required (the LEDs connected to pin number
8, 9 and 10).
1 void setup () {
2 // TODO : Add your setup here
3 }
4

5 void loop () {
6 // TODO : Add your processing code here
7 }

Page 14 HCMUT - Computer Engineering

 4.6 Two Way Traffic Light
Your source code is upgrade to control the second traffic lights, connected to pin number
11, 12 and 13.
1 void setup () {
2 // TODO : Add your setup here
3 }
4

5 void loop () {
6 // TODO : Add your processing code here
7 }

4.7 Traffic Light with Timer

Finalize the system by a count-down timer using seven segment LED. Five seconds for the
RED means that the count-down process is started with 4 and ended by 0.
1 void setup () {
2 // TODO : Add your setup here
3 }
4

5 void loop () {
6 // TODO : Add your processing code here
7 }

4.8 Analog Clock Project

From this exercise, an analog clock project is proposed. Twelve different LEDs are used to
simulate a screen of a clock, as show in this link:

https://www.tinkercad.com/things/jcOtVDzvddr

Figure 1.13: Analog clock with 12 LEDs

Based on the code skeleton, students are proposed to implement two functions bellow.
These functions are invoked in the loop function to perform unit test before implemen-
tation. Your source code is required to present in this report.

Introduction to Computer Page 15

1 void displayOnClock ( int num ) {
2 if ( num <= 12) {
3 // TODO : Implement your code here
4 }
5 }
6 void clearClock () {
7 // TODO : Clear 12 LEDs on Clock
8 }

4.9 Analog Clock with Second

The second information is updated to the LEDs follow exactly principle of an analog clock:
if second is between 0 and 4, the number 12 should be indicated. Similar to that, when
second is from 5 to 9, number 1 is indicated.

Please use the delay(1000) at the end of the loop function. Present your source code
just in the loop.
1 void loop () {
2 // TODO
3 }

4.10 Finalize the Analog Clock

Finalize the project with two more information are displayed on the clock.
Present your source code just in the loop.
1 void loop () {
2 // TODO
3 }

Page 16 HCMUT - Computer Engineering

CHAPTER 2

Motor Controller and Serial Monitor

1 Introduction
A direct current, or DC, motor is the most common type of motor. DC motors normally
have just two leads, one positive and one negative. If you connect these two leads directly
to a battery, the motor will rotate. If you switch the leads, the motor will rotate in the op-
posite direction.

To control the direction of the spin of DC motor, without changing the way that the leads
are connected, you can use a circuit called an H-Bridge. An H bridge is an electronic cir-
cuit that can drive the motor in both directions. H-bridges are used in many different
applications, one of the most common being to control motors in robots. It is called an
H-bridge because it uses four transistors connected in such a way that the schematic dia-
gram looks like an "H."

Figure 2.1: L298N driver on the market

The L298N Motor Driver is a controller that uses an H-Bridge to easily control the direc-
tion and speed of up to 2 DC motors. This tutorial will show you how to control a motor
using L298N. A simple program on Arduino platform to control 3 pins is able to control
the speed and the spin (forward or backward) of the motor.

Secondly, the Serial Monitor is an essential tool when creating projects with Arduino. It
can be used as a debugging tool, testing out concepts or to communicate directly with the
Arduino board.

The TinkerCad environment has the Serial Monitor tool integrated with the editor, which
means that an Arduino board can send and receive data from the Serial Monitor. This
interface is useful to extend the connection to other devices such as a Bluetooth device
(e.g. HC06) for controlling remotely the system.

Page 18 HCMUT - Computer Engineering

 2 Analog vs Digital
An analog signal is one that can take on any number of values, unlike a digital signal which
has only two values: HIGH and LOW. The Arduino does not have a built-in digital-to-
analog converter (DAC), but it can pulse-width modulate (PWM) a digital signal to achieve
some of the functions of an analog output. The function used to output a PWM signal is
analogWrite(pin, value). pin is the pin number used for the PWM output. value is a num-
ber proportional to the duty cycle of the signal. When value = 0, the signal is the minimum
voltage in the circuit, which is GND = 0V. Meanwhile, when value = 255, the signal is the
maximum voltage, or VCC = 5V. If the value is 127, the output signal has the voltage level
at 1.65V, which is 50% of the maximum value.

On most Arduino boards, it is important to notice that the PWM function is available on
pins 3, 5, 6, 9, 10, and 11. These pins have both digitalWrite and analogWrite function.
Other output pins only have digitalWrite function. The first demonstration to compare
analog and digital function is proposed in the circuit bellow, with 2 different LEDs, con-
nected to pin number 2 and 3.

https://www.tinkercad.com/things/dNofqdRzDh1

Figure 2.2: Analog vs Digital Testing

The brightness of the LED connected to pin number 3 is increased from the minimum
to the maximum, which can be compared to the brightness of the LED connected to pin
number 2. This LED is set to the maximum brightness by using the digitalWrite function.
The source code of this demo is shown bellow:
1 void setup () {
2 pinMode (2 , OUTPUT ) ;
3 pinMode (3 , OUTPUT ) ;
4 digitalWrite (2 , HIGH ) ;
5 }
6

7 void loop () {
8 for ( int i = 0; i < 255; i += 5) {
9 analogWrite (3 , i ) ;
10 delay (100) ;

Introduction to Computer Page 19

11 }
12 }
Although the animation in TinkerCad is not easy to observe, students can find the princi-
ple of the analogWrite. This can be used to control some devices such as a motor (speed)
or a buzzer.

3 Motor Controller
From this section, students are proposed to construct their programs to control 2 motors,
which are normally used for a robot movement. The schematic of the simulation is pro-
posed as following.

https://www.tinkercad.com/things/5fQLcEA1P4Q

Figure 2.3: Analog vs Digital Testing

3.1 Left Motor Controller

In order to control the left motor, following pins are required:
• Pin 8: Direction configuration pin 1 by dititalWrite

• Pin 9: Direction configuration pin 2 by digitalWrite

• Pin 11: Speed controller pin by analogWrite

Students are proposed to implement following program to test the first motor.

1 void setup () {
2 pinMode (8 , OUTPUT ) ;
3 pinMode (11 , OUTPUT ) ;
4 pinMode (9 , OUTPUT ) ;
5 }
6 void loop () {
7 digitalWrite (11 , HIGH ) ;
8 digitalWrite (8 , LOW ) ;
9 analogWrite (9 , 100) ;
10 }

Page 20 HCMUT - Computer Engineering

 Students can change the parameter of the analogWrite function. The parameter is in the
range from 0 to 255.

Finally, students implement following function to control the left motor.

1 void left_speed ( int speed ) {

2 // TODO : Implement your code here
3 if ( speed > 0) {
4

5 } else {
6 speed = 0 - speed ;
7 }
8 }

3.2 Left Motor Testing

Implement a short program to make the left motor moves forward with speed 100 for 2
seconds, then stop for 2 seconds, then moves backward with speed for 2 seconds before
stopping for 2 seconds again. This behavior is repeated forever. The function left_speed
is used in this demo.
1

2 void loop () {
3 // TODO : Implement testing script
4 }

3.3 Right Motor Testing

Similar to the left motor, a function to control the right motor is also required. The con-
nection pins for this motor are described as follows:

• Pin 12: Direction configuration pin 1

• Pin 13: Direction configuration pin 2

• Pin 10: Speed controller pin

2 void loop () {
3 // TODO : Implement testing script
4 }
What does happen if the numer 300 is used in analogWrite function? Briefly provide
your answer in the report.

3.4 Full Motor Control Functions

Implement four functions to control the movements of a Robot having 2 motors.

Introduction to Computer Page 21

 1

2 void forward ( int speed ) {

3 // TODO
4 }
5

6 void backward ( int speed ) {

7 // TODO
8 }
9

10 void turnleft ( int speed ) {

11 // TODO
12 }
13

14 void turnright ( int speed ) {

15 // TODO
16 }

3.5 Full Motor Testing

Implement a script in a loop, to test four functions implemented above.
1 void loop () {
2 // TODO
3 }

4 Serial Monitor
In data transmission, serial communication is the process of sending data one bit at a
time, sequentially, over a communication channel or computer bus. This is in contrast
to parallel communication, where several bits are sent as a whole, on a link with several
parallel channels. The serial communication is available in most of micro-processor and
micro-controller systems, such as the PC, Smart Phone or the Arduino board.

In this lab, a serial communication is used for data transmission between the Arduino
board and a computer or other devices. All Arduino boards have at least one serial port
(also known as a UART or USART) named Serial. It communicates on digital pins 0 (RX)
and 1 (TX) as well as with the computer via USB. Thus, if you use these functions, you can-
not also use pins 0 and 1 for digital input or output. To activate the serial communication,
following source code is required in the setup function.
1 void setup () {
2 Serial . begin (115200) ;
3 Serial . println ( " Hello TinkerCad " ) ;
4 }
From the TinkerCad terminal, you can send some data to the Arduino board by pressing
any charater on your PC keyboard and the click buttion Send. However, some code need
to be implemented in the Arduino board as following: the board keep checking if there is
a character sent to it. If there is a character, it will read this character and send it back to
the PC terminal.

Page 22 HCMUT - Computer Engineering

1 void loop () {
2 if ( Serial . available () )
3 {
4 char temp = Serial . read () ;
5 Serial . print ( " I received : " ) ;
6 Serial . println ( temp ) ;
7 }
8 }
Students are propose to run the program again and check the communications between
the Arduino board and the TinkerCad terminal.

4.1 LED Controller 1

Implement a short program to make the LED connected to pin 13 turn on if a character
’O’ is received. Other characters, the LED is turned off.

Hint: Use the if statement: if(temp == ‘O’) . . . . else . . .

4.2 LED Controller 2

Improve your program to make the LED connected to pin 13 turn on if a character ’O’ is
received. However, the LED is turned off only when receiving character ’F’.

4.3 Robot Controller

When a character W, S, A and D is sent, the robot moves forward, backward, left and right,
respectively. With all other characters, the robot stops moving.

4.4 Robot Headlights

Add two more LEDs to the system and turn an appropriate LED when Robot is turned left
or right.

Introduction to Computer Page 23

Page 24 HCMUT - Computer Engineering
CHAPTER 3

Blockly Programming Language

1 Introduction

1.1 What is Blocky?

Blocky is a visual coding language that allows users to create codes by staking block to-
gether. These blocks are used to to create "chunks of code" that can later be translated
into professional textual code.

Figure 3.1: Step counter project with Microbit & Makecode

Blocky is a client side program that runs on the browser and can be accessed anywhere

Figure 3.2: Some well-known web browsers

1.2 Why was it created and how does it work?

Blocky was developed by Google and was in development since summer of 2011. The fi-
nal product was introduced in May, 2012 at the Maker Faire in San Mateo, California.

Page 26 HCMUT - Computer Engineering

Blocky was created to teach beginners programming. It is visual code blocks link together
like puzzle or Lego pieces so it makes writing code easier. When writing code is easier,
learning to code also easier.

Blocky is an exportable code. The Blocky codes can be translated into JavaScript, Python,
PHP, ... Moreover, it is an open source. This means that anyone can pull up the code and
manipulate, inspect, modify or enhance it.

Blocky is also a proficient language. Despite how it looks, Blocky can be used to code
complex mathematical equaltions and intricate tasks.

In the next section, you will be introduced to one of the most used framework when peo-
ple start learning Blocky programming, combined with a simple hardware to make cool
things.

2 MakeCode for Microbit

The BBC micro:bit is a pocket-sized computer that introduces you to how software and
hardware work together. It has an LED light display, buttons, sensors and many input/out-
put features that, when programmed, let it interact with you and your world.

The micro:bit currently supports 3 different programming languages:

• Microsoft Makecode – Graphical block-based system

• CodeKingdoms JavaScript – Another graphical drag-and-drop interface

• MicroPython – Textbased editor mostly used by pro developers

If you are new and just starting out, start with Makecode or JavaScript first until you are
familiarised with the system before proceeding to Micropython.

In this tutorial, we will cover all about Microsoft Makecode where you will learn how it
works and how to use it. We will cover:

• Blocks Language

• Getting Started – Creating your own program

• Simulating your Program

• Saving and Uploading code to Microbit

• Sharing your Program

Before you start, at this point, you do not need your micro:bit connected yet! You can
do all this on your desktop or laptop and open up makecode micro:bit and create a new
project!

Introduction to Computer Page 27

3 Blocks Language
When you enter the workspace, you will see a long list of blocks on your left as shown
below. You will be using the blocks to program your micro:bit so you will need to learn
how to use them and what are they! So before we go further, we will first go through every
single block and their functions to learn more about them.

Figure 3.3: Makecode interface

Blocks snap into each other to define the program in which your micro:bit will run when
uploaded. Blocks can be events like buttons, shake or snapped together into an even to
run. As you can see on your workspace, there are two blocks already present which are
on-start and forever. On-start event will run first and forever event will be looped.
Let us now look at the individual block types and their function:

3.3 Basic Blocks

As you may already know, the basic blocks are the basic functions where all the functions
are all pretty straight forward:

• show number: Shows the number you key in on the micro:bit LED display

• show led: Light up its selected LEDs on the micro:bit

• show string: Shows a string of text on the micro:bit LED display

• show icon: Shows an icon that you pick on the LED display

• pause (ms): Pause a number of milliseconds before the next command

• clear screen: Turn off all the LED lights on the LED screen

• show arrow: Draws an arrow on the LED screen from a direction (eg. North, North-
east, South, West)

Page 28 HCMUT - Computer Engineering

3.4 Input Blocks
Next up, we have the Input blocks which are based on events and data from sensors like
the button, accelerator, compass and temperature sensor. Let us look at the blocks:

• on button ... pressed: Start an event handler where a program will run when some-
thing happens where in this case, is when a button is pressed. For example, you can
use this block to command the micro:bit to show a display when button A, B or A+B
is pressed.

• on "gesture": It starts an event handler when a gesture is made like shake, tilt left,
tilt right, face down, free fall, etc. Most of the gestures are pretty straight forward
but there are three gestures 3g, 6g, 8g that may not understand. Well, they represent
different levels of g-force which is a measurement of the type of force per unit mass.

• on pin ... pressed: It starts an event handler when a pin is touched together with
GND and released within 1 second. What happens during this will be as you hold
the GND pin with one hand and touch pin 0,1 or 2 with the other, a small but safe
electric current will flow through your body and back into the micro:bit. It is like
you are a big wire where you complete the circuit.

• button ... is pressed: This is to check whether a button on the micro:bit is pressed.
For example, you use this block to check whether a block is pressed where if it is
pressed, it will show a certain display if not it will show another display.

• is ... gesture: Similar to the previous block, this block is to test whether a gesture is
being detected.

• pin ... is pressed: Similarly, this is to check whether the pin stated is pressed or not
pressed together with the GND pin.

• compass heading: This command finds out which direction the micro:bit is facing
with its compass.

• temperature: With this block, you can find out the temperature measured in celsius
of where you are. It is able to do this by detecting how hot its computer chips are to
get an estimate of the temperature.

• acceleration: Allows you to get the acceleration value in milli g-force in one of three
dimensions or the combined force in all directions of X, Y and Z. With this, you can
find out how fast the micro:bit is speeding up or slowing down.

• light level: As you can tell, this block will find the light level of your environment
(how bright or how dark). It does so through its LEDs on the LED screen. The first
time you use this block, it will show 0. After that, it will say the real light level. This
is because the light sensor has to be turned on first.

• rotation: With this, you can find out how much the micro:bit is tilted in different
directions.

• magnetic force: Find out the amount of magnetic force of one direction, X,Y or Z.

• running time (ms): Calculate the amount of time the program has since been started
in milliseconds.

Introduction to Computer Page 29

 • running time (micros): Similar to the previous block, but in microseconds instead.

• set accelerometer range: Set the highest acceleration range that your micro:bit will
measure in case you have to measure high or low acceleration.

3.5 Music Blocks

As you can tell from its name of the block, the music blocks allow you to control music
tones from playing, stopping, resting and everything else music-related.

• play tone ... for ...: This block allows you to play a musical tone through pin P0 for
a set amount of beats (up to 4).

• ring tone: Use this block to play a musical tone through pin P0 which will continue
playing until told not to with another block which we will cover below.

• rest: This block is to rest which is to stop playing sound through pin P0 for the
number of beats you specify.

• start melody ... repeating ...: This block commands the micro:bit to start playing a
musical melody through pin P0 of the micro:bit. There are various built-in melodies
that you can pick from which are already composed and easy to use. If you wish to
play your own melody, you can compose one and use it.

• stop melody: As melodies are played either in the foreground or background where
also, more than one melody can be active at once, this block allows you to stop
playing a musical melody. You can either choose to stop a melody or all the melodies
playing.

• music on ...: This block raises events for melodies or music events.

• ... beat: Returns the duration of a beat in milliseconds.

• tempo: Find out the tempo / speed of a piece of music in beats per minutes.

• change tempo by: Changes to tempo of a melody to faster or slower as specified by

you.

• set tempo to: Set and makes the tempo of a melody as fast or slow as specified by
you.

3.6 LED Blocks

Coming up next, we have the LED block which is, of course, to control the micro:bit LED
display.

• plot x ... y ...: This command will turn ON the LED light you state on the LED display.

• unplot x ... y ...: On the other hand, this block will turn OFF the LED light you state
on the LED display.

• point x ... y ...: This command checks whether the LED on the LED display is on or
off.

Page 30 HCMUT - Computer Engineering

 • toggle x ... y ...: This command toggles an LED specified through its coordinates on
the LED display where if it is OFF, it will turn it ON and where it is ON, it will turn
off.

• brightness: Allows you to find out the brightness of your LED display when it is
turned on.

• plot x ... y ... brightness ...: This block turns on a LED light with a stated brightness
on the LED display.

• set brightness ...: Using this block, you can set how bright the LED screen will be
when it is turned on.

• stop animation: As you probably can tell from its name, this block stops any anima-
tion that is currently and any animations that are going to play on the LED display.

• plot bar graph of ... up to ...: With this block, you will be able to display a bar graph
to show numbers as lines with different lengths.

• set display mode ...: Want to render your LEDs? With this block, you can set the
display mode to either black and white or greyscale which allows you to create a
sense of colour depth (difference in darkness between the pixels in the display) with
the display mode setting.

• led enable ...: This block turns your LED display on and off. (False = Off, True = On)

3.7 Radio Blocks

Next up, we have the Radio blocks! They are responsible for sending and receiving data
using radio packets to other micro:bits.

• radio send number: For the first block, this block allows you to broadcast a number
to other micro:bits that are connected to the radio.

• radio send string: Sends a string of up to 19 characters to other micro:bits con-

nected to the radio.

• radio sent value ... = ...: Want to send more than a number or string to other mi-
cro:bits? With this block, you can send a string of up to 8 characters together with a
number to other micro:bits.

• on radio received receivedNumber: Commands the micro:bit to run part of a pro-

gram when it receives a number over the radio.

• on radio received receivedString: Similar to the previous block, this block com-
mands the micro:bit to run part of a program when it receives a string over the ra-
dio.

• on radio received name value: This block commands the micro:bit to run part of a
program when it receives a name and number pair over the radio.

• received packet ...: With this block, you can get a selected property from the last
received radio packet. For example, using signal strength, you can get the strength
of the radio signal when the packet was received where you can use this to gauge
the approx. distance between 2 micro:bits.

Introduction to Computer Page 31

 • radio set group ...: With this block, make a program have a group where you use to
send and receive with radio. The group acts as a cable channel where a micro:bit
can only send or receive in one group at a time.

There are still 4 other advanced Radio blocks which we will not go through as they are for
advanced users which we will hardly use as beginners. If you are interested, you can check
them out at Makecode Microbit Reference page!

3.8 Loop Blocks

As you can tell from its name, with the loop blocks, they allow you to repeat codes and
your program.

• for block: Loop part of a program a specified amount of times using an index vari-
able (we will cover variable blocks later on).

• while block: Repeats code while a Boolean (using logic blocks which we will cover
in the next part) condition is true.

• repeat block: Loops part of a program for a specified amount of times.

• for element block: This block runs part of a program for each element in a list, most
of the time in an array of ” “.

3.9 Logic Blocks

The logic blocks. They consist of logic operators and constants like conditional state-
ments and true or false values to run codes.

• if then: This block is a logic block that will run code depending on whether a boolean
condition is true or false.

• if then else: This block is similar to the previous logic block which will run code
depending on whether a boolean condition is true or false if not it will run another
code.

• "number1" = "number2": This logic block is used to check whether a certain num-
ber meets the condition like equals to, less than, more than, etc to run code.

• "string1" = "string2": Similar to the previous block, this logic block is used to check
whether a variable meets the condition like equals to, less than, more than, etc to
run code. They mostly involve numbers.

• ... and ...: This block is also another Boolean logic operators that is used.

• not ...: This block is used to evaluate the opposite negotiation of a Boolean variable.

Page 32 HCMUT - Computer Engineering

3.10 Variable Blocks
The variable blocks are pretty straight forward and you will use them very often when
programming. As you can tell from its name, you are going to use the variable blocks to
create variables and change their properties.

• set ... to ...: This block allows you to set a variable value. You can also use this block
to set a variable value of another variable.

• change ... by ...: This block allows you to change a variable value.

3.11 Extensions
That’s a brief introduction to the block language! We did not cover the Math blocks that
use numbers, number operators and math functions as they are pretty straightforward. As
for the other functions like functions, arrays, text, game, images, pins, serial, and control,
they are all advanced blocks which we will not cover as we will not be using them much
as we are just getting started. If you are interested, you can check out them respectively
through each of their individual links.

By the way, you guys may notice this block lying around called the extensions block:
Well, in Makecode, you can create custom blocks to use in the editor and include them
in your own projects. They are very useful if you are using any additional accessories and
hardware, as well as adding in new software features. Just click on the block if you wish to
add any extensions into your makecode editor!

Figure 3.4: Extension Menu

4 Getting Started – Creating your own program

Now that you’ve known the blocks functions and uses, its time to start building with them
and create your very own program.

Introduction to Computer Page 33

As you can see, with Makecode micro:bit, creating your own program is very easy! All you
need to do is:

• Select a block from the desired category on the left-hand side of the interface.

• Click and drag to the workspace area on the right and snap them onto existing
blocks. When connecting, the interface will highlight the connecting parts when
they are in a valid position before connecting them together.

• If you are unsure whether a block will snap onto one another, its shape will give you
a rough clue and indication of where they might fit.

• If you wish to delete any blocks in your program, you can easily delete them using
any of these 3 ways:

– Pressing the delete button or backspace button on your computer

– Select and drag the block into the blocks menu where a bin will appear
– Select a block and right-click on it where a drop-down menu will open and
select the delete block option.

• If you can’t find the block you are looking for, you can use the search function above
the block menu.

Figure 3.5: Search bar

That’s all! It’s that simple to create your own program with the Makecode editor.

Page 34 HCMUT - Computer Engineering

5 Simulating your Program
Once you are done with your program, Makecode micro:bit can simulate your program
(on the left part) before you upload it to a micro:bit to test if its working. The simulator
acts just like a physical micro:bit. With this simulator, you can simulate many different
features like its light sensor, compass, to the accelerator and many more.

6 Sharing your Program

Want to share an amazing program that you have just created? Just simply click the shar-
ing icon on the top left-hand side of the editor. Before sharing, your code will be first
uploaded to the cloud and published before sharing it or embed it in other web pages.

You can either share your project with a link or embed the editor into a webpage using
their generated code snippets. For embed options, there are a few like code, editor and
simulator which you can pick and embed them. Below is an example of the editor option
where you can share your code where people can download them, view the Javascript and
also open the code in the editor and edit the codes themselves as well. Furthermore, you
can use the simulator to see what the code does!

7 Summary
That is all for Makecode Microbit Tutorial – How to get started and how to use the Inter-
face! After this tutorial, I hope you learned how to use the Makecode micro:bit editor and
its functions!

Now that you’ve learned the basics, why not try creating your own projects now. Here are
some cool tutorials to get you started with Makecode and micro:bit!

Introduction to Computer Page 35

Page 36 HCMUT - Computer Engineering
CHAPTER 4

Teachable Machine with Google

1 Introduction

Figure 4.1: Create new Teachable Machine project

Machine learning is a branch of Artificial Intelligence (AI) based on an idea that allows
software applications to learn from data, identify patterns and make decisions with min-
imal human intervention. Teachable Machine is a web-based tool that makes creating
machine learning models fast, easy, and accessible to everyone. You can currently train
Teachable Machine with:

• Images, pulled from your webcam or image files

• Sounds, in one-second snippets from your mic

• Poses, where the computer guesses the position of your arms, legs, etc from an im-
age

2 Get started with Teachable Machine

Go to Teachable Machine homepage

https://teachablemachine.withgoogle.com/

select Get Started, no need to make an account or log in. Choose Image Project, select
Standard image model. By default, there are 2 classes generated: Class 1 and Class 2,
change these names to No Mask and Mask. Now, let’s train with No Mask. Select Webcam
under class No Mask to input images, choose allow if there is any request for our web-
cam permission. Make sure you are not wearing any mask, then Click Hold to Record, you
can record as many frames as you want, the more frames increases accuracy but will cost

Page 38 HCMUT - Computer Engineering

 Figure 4.2: Traning with Mask and No Mask

on the number of epochs when we process the model, you can find out more in the Ad-
vanced option of Training card. Continue with class Mask, when you are ready with mask
on, click Hold to Record button under Mask class.

When you’re done with No Mask and Mask training model, you can check it again in real-
time under the Preview card. If you’re satisfied with the model, click Export Model then
choose Upload my model (Tensorflow.js > Upload, sharable link), the processing time may
be up to few minutes. When it’s done, you can see your model’s link has been generated,
copy this link and move to next section.

Figure 4.3: Export Model under the shareable link

3 Use trained model with MIT Media Lab platform

MIT Media Lab has their platform based on Scratch, this platform can directly import the
Teachable Machine and use the model to create an virtual AI robot. First, go to

https://mitmedialab.github.io/prg-extension-boilerplate/httyr/

On the left side, navigate to Teachable Machine, to initially set up the model, drag and
drop block Use model anywhere on your workspace and modify the model’s link (which

Introduction to Computer Page 39

was generated in the previous section) .Let’s detect face mask, you can choose When
model detects... as condition expression, select Mask/No Mask condition and continue
implement your work when there is Mask/No Mask. You can also show the class output
or the confidence in Prediction is and Confidence for block.

Figure 4.4: Example: When no mask detected, say Hello for 2 seconds

Page 40 HCMUT - Computer Engineering