Difference between revisions of "ElectroBlocks/C2/Smiley-Generator/English"

From Script | Spoken-Tutorial
Jump to: navigation, search
(Created page with "{| border="1" |- || '''Visual Cue''' || '''Narration''' |- || '''Slide 1''' '''Title Slide''' || Welcome to the '''Spoken Tutorial''' on '''Smiley Generator''' using '''Electr...")
 
 
Line 5: Line 5:
 
|-
 
|-
 
|| '''Slide 1'''
 
|| '''Slide 1'''
 +
 
'''Title Slide'''
 
'''Title Slide'''
 
|| Welcome to the '''Spoken Tutorial''' on '''Smiley Generator''' using '''Electroblocks'''.
 
|| Welcome to the '''Spoken Tutorial''' on '''Smiley Generator''' using '''Electroblocks'''.
−
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
−
|| '''Slide 2:'''
+
|| '''Slide 2 '''
  
 
'''Learning Objectives'''
 
'''Learning Objectives'''
 
|| In this tutorial, we will learn how to,
 
|| In this tutorial, we will learn how to,
−
# <div style="margin-left:1.27cm;margin-right:0cm;">Build a set of blocks to create a '''Smiley generator'''</div>
+
# Build a set of blocks to create a '''Smiley generator'''
−
# <div style="margin-left:1.27cm;margin-right:0cm;">Check the output of experiment using the simulator</div>
+
# Check the output of experiment using the simulator
  
−
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
−
|| '''Slide 3:'''
+
|| '''Slide 3 '''
  
 
'''System requirement'''
 
'''System requirement'''
 
|| To record this tutorial, I am using the following setup.
 
|| To record this tutorial, I am using the following setup.
−
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
−
|| '''Slide:5'''
+
|| '''Slide 4'''
  
 
Required section
 
Required section
−
* <div style="margin-left:1.27cm;margin-right:0cm;">LED Matrix</div>
+
* LED Matrix
−
* <div style="margin-left:1.27cm;margin-right:0cm;">Time</div>
+
* Time
  
 
|| We will need the following sections for this experiment.
 
|| We will need the following sections for this experiment.
−
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
|| Show '''Circuit Diagram.png'''
 
|| Show '''Circuit Diagram.png'''
  
Line 34: Line 35:
  
 
Here, we will create a smiley face using an LED matrix display.
 
Here, we will create a smiley face using an LED matrix display.
−
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
||  
 
||  
 
|| Let us open the '''ElectroBlocks''' website in the Chrome browser.
 
|| Let us open the '''ElectroBlocks''' website in the Chrome browser.
−
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
−
||  
+
|| Click on New/Blank file icon.
 
|| Let us open a new blank project.
 
|| Let us open a new blank project.
−
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
−
|| <span style="color:#212121;">Click on the </span><span style="color:#212121;">'''Add-ons'''</span><span style="color:#212121;"> section </span>
+
|| Click on the '''Add-ons''' section  
  
−
<span style="color:#212121;">Click on the </span><span style="color:#212121;">'''Led Matrix'''</span><span style="color:#212121;"> option.</span>
+
Click on the '''Led Matrix''' option.
  
−
<span style="color:#212121;">Select the </span><span style="color:#212121;">'''Led Matrix setup'''</span><span style="color:#212121;"> and drag this block in the working area. </span>
+
Select the '''Led Matrix setup''' and drag this block in the working area.  
  
−
<div style="color:#212121;">Only narration</div>
+
Only narration
  
−
<span style="color:#212121;">Point towards </span><span style="color:#212121;">'''Data'''</span><span style="color:#212121;"> pin</span>
+
Point towards '''Data''' pin
  
−
<div style="color:#212121;"></div>
 
  
−
<span style="color:#212121;">Point towards </span><span style="color:#212121;">'''CLK'''</span><span style="color:#212121;"> pin and </span><span style="color:#212121;">'''CS'''</span><span style="color:#212121;"> pin</span>
 
−
|| <span style="color:#212121;">Click on the </span><span style="color:#212121;">'''Add-ons '''</span><span style="color:#212121;">section</span><span style="color:#212121;">''' '''</span><span style="color:#212121;">and click on the </span><span style="color:#212121;">'''Led Matrix'''</span><span style="color:#212121;"> option.</span>
 
  
−
<span style="color:#212121;">Select the </span><span style="color:#212121;">'''Led Matrix setup block '''</span><span style="color:#212121;">and drag this block to the working area. </span>
+
Point towards '''CLK''' pin and '''CS''' pin
 +
|| Click on the '''Add-ons '''section and click on the '''Led Matrix''' option.
  
−
<span style="color:#212121;">By default, the </span><span style="color:#212121;">'''Data'''</span><span style="color:#212121;"> pin of the Led Matrix is connected to the pin 10 of the arduino. </span>
+
Select the '''Led Matrix setup block '''and drag this block to the working area.  
  
−
<span style="color:#212121;">The </span><span style="color:#212121;">'''CLK'''</span><span style="color:#212121;"> Pin is connected to pin 12 and </span><span style="color:#212121;">'''CS'''</span><span style="color:#212121;"> pin is connected to pin 11 of the arduino.</span>
+
By default, the '''Data''' pin of the Led Matrix is connected to the pin 10 of the arduino.
 +
 
 +
The '''CLK''' Pin is connected to pin 12 and '''CS''' pin is connected to pin 11 of the arduino.
 
|-
 
|-
−
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
−
|| <span style="color:#212121;">Click on the </span><span style="color:#212121;">'''Led Matrix'''</span><span style="color:#212121;"> option.</span>
+
|| Click on the '''Led Matrix''' option.
  
−
<span style="color:#212121;">Select the</span><span style="color:#212121;">''' Led Matrix Draw'''</span><span style="color:#212121;"> block and </span>
+
Select the''' Led Matrix Draw''' block and  
  
−
<span style="color:#212121;">Place this</span><span style="color:#212121;">''' Led matrix draw '''</span>block inside the loop block.
+
Place this''' Led matrix draw '''block inside the loop block.
−
|| <span style="color:#212121;">Again Click on the </span><span style="color:#212121;">'''Led Matrix'''</span><span style="color:#212121;">.</span>
+
|| Again Click on the '''Led Matrix'''.
  
−
<span style="color:#212121;">Select the</span><span style="color:#212121;">''' Led Matrix Draw'''</span><span style="color:#212121;"> </span><span style="color:#212121;">'''block'''</span><span style="color:#212121;"> and place this</span><span style="color:#212121;">''' '''</span>block inside the loop block.
+
Select the''' Led Matrix Draw block''' and place this''' '''block inside the loop block.
−
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
−
|| <span style="color:#212121;">Point to </span><span style="color:#212121;">'''Led matrix draw'''</span><span style="color:#212121;"> block</span>
+
|| Point to '''Led matrix draw''' block
  
−
<div style="color:#212121;">Point to checkboxes.</div>
+
Point to checkboxes.
  
−
<div style="color:#212121;">Point to checkblocks</div>
+
Point to checkblocks
  
−
<div style="color:#212121;"></div>
+
Select the smiley face checkboxes.
  
−
<div style="color:#212121;">Select the smiley face checkboxes.</div>
+
Point to simulation window
  
−
<div style="color:#212121;">Point to simulation window</div>
+
|| This is an 8x8 '''LED matrix'''.
  
−
|| <span style="color:#212121;">This is an 8x8 </span><span style="color:#212121;">'''LED'''</span><span style="color:#212121;"> </span><span style="color:#212121;">'''matrix'''</span><span style="color:#212121;">.</span>
+
In the '''LED matrix draw''' block, you will find '''64''' checkboxes.
  
−
<span style="color:#212121;">In the </span><span style="color:#212121;">'''LED matrix draw'''</span><span style="color:#212121;"> block, you will find </span><span style="color:#212121;">'''64'''</span><span style="color:#212121;"> checkboxes.</span>
+
Each checkbox controls an individual LED.
  
−
<div style="color:#212121;">Each checkbox controls an individual LED.</div>
+
Click on the checkboxes in the '''LED matrix '''block to turn ON the LEDs.
  
−
<span style="color:#212121;">Click on the checkboxes in the </span><span style="color:#212121;">'''LED matrix '''</span><span style="color:#212121;">block to turn ON the LEDs.</span>
+
Select the checkboxes as shown.
  
−
<div style="color:#212121;">Select the checkboxes as shown.</div>
+
In the simulation window, you will see a smiley face displayed on the''' LED matrix.'''
 +
|-
 +
|| Only narration
  
−
<span style="color:#212121;">In the simulation window, you will see a smiley face displayed on the</span><span style="color:#212121;">''' LED matrix.'''</span>
+
Only narration  
−
|- style="border:1pt solid #000000;padding:0.176cm;"
+
−
|| <div style="color:#212121;">Only narration </div>
+
  
−
<div style="color:#212121;">Only narration </div>
+
Click on the Time''' '''section.
−
 
+
−
<span style="color:#212121;">Click on the Time</span><span style="color:#212121;">''' '''</span><span style="color:#212121;">section.</span>
+
  
 
Drag and drop the '''Wait block for 0.2 second '''in the working area.
 
Drag and drop the '''Wait block for 0.2 second '''in the working area.
Line 113: Line 112:
 
Click on the '''Time''' section.
 
Click on the '''Time''' section.
  
−
Drag and drop the '''Wait for 0.2 second block '''and place it below the '''Led Matrix Draw''' block.
+
Drag and drop the '''Wait for 0.2 second block ''' and place it below the '''Led Matrix Draw''' block.
  
 
Change the time to '''1''' second in the block.
 
Change the time to '''1''' second in the block.
−
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
−
|| <div style="color:#212121;">Only narration</div>
+
|| Only narration
  
−
<div style="color:#212121;">Right click on the Led Matrix Draw block and select the duplicate option.</div>
+
Right click on the Led Matrix Draw block and select the duplicate option.
  
−
<div style="color:#212121;">Only narration</div>
+
Only narration
  
−
<span style="color:#212121;">Place this block below the </span>'''wait for 1 second '''<span style="color:#212121;">block.</span>
+
Place this block below the '''wait for 1 second '''block.
 
|| We will turn OFF some LEDs to create an interactive smiley.
 
|| We will turn OFF some LEDs to create an interactive smiley.
  
Line 132: Line 131:
 
Place this block below the '''wait for 1 second''' block.
 
Place this block below the '''wait for 1 second''' block.
  
−
Let us uncheck a few of the checkboxes to create an interactive smiley.
+
Let us uncheck a few of the check boxes to create an interactive smiley.
−
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
−
|| <div style="color:#212121;">Only narration</div>
+
|| Only narration
  
−
<div style="color:#212121;">Only narration.</div>
+
Only narration.
  
 
Right click on the''' wait for 1 second''' block and select the duplicate option.
 
Right click on the''' wait for 1 second''' block and select the duplicate option.
Line 145: Line 144:
 
For this, we will add a '''wait''' block.
 
For this, we will add a '''wait''' block.
  
−
Right click on the''' wait for 1 second''' block and select the '''duplicate''' option.
+
Right click on the''' wait for 1 second''' block and select the '''Suplicate''' option.
  
 
Place this block below the '''Led Matrix Draw''' block.
 
Place this block below the '''Led Matrix Draw''' block.
−
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
|| Click on the '''Code''' icon to view the auto-generated Arduino code for the experiment.
 
|| Click on the '''Code''' icon to view the auto-generated Arduino code for the experiment.
  
 
Highlight the code on right side
 
Highlight the code on right side
−
|| Click on the '''Code icon''' to view the automatically generated''' Arduino code'''.
+
|| Click on the '''Code icon''' to view the automatically generated ''' Arduino code'''.
  
−
The code includes self-explanatory''' comments''' for better understanding.
+
The code includes self-explanatory ''' comments''' for better understanding.
−
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
||  
 
||  
 
|| Let us see the output using the simulator.
 
|| Let us see the output using the simulator.
−
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
−
|| Click on '''Home''' icon on the tool bar and click on the '''Play''' button
+
|| Click on '''Home''' icon on the tool bar and
 +
 
 +
click on the '''Play''' button.
 
|| Click on the '''Home''' icon and press the '''Play button''' to start the simulation.
 
|| Click on the '''Home''' icon and press the '''Play button''' to start the simulation.
−
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
|| Point to simulation window.
 
|| Point to simulation window.
  
Line 169: Line 170:
  
 
The first two LEDs toggling their state after every 1 second.
 
The first two LEDs toggling their state after every 1 second.
−
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
 
|| Narration only
 
|| Narration only
−
|| The '''XML '''file of this experiment is provided in the code files for your reference.
+
|| The '''XML ''' file of this experiment is provided in the code files for your reference.
−
|- style="border:1pt solid #000000;padding:0.176cm;"
+
|-  
−
|| Slide:
+
|| '''Slide 5'''
  
 
'''Summary'''
 
'''Summary'''
  
 
In this tutorial, we learnt about,
 
In this tutorial, we learnt about,
−
# <div style="margin-left:1.27cm;margin-right:0cm;">Build a set of blocks to create a '''Smiley generator'''</div>
+
# Build a set of blocks to create a '''Smiley generator'''
−
# <div style="margin-left:1.27cm;margin-right:0cm;">To check the output of experiment using simulator</div>
+
# To check the output of experiment using simulator
  
−
|| This brings us to the end of this tutorial. Let us summarise.
+
|| This brings us to the end of this tutorial.  
−
|- style="border:1pt solid #000000;padding:0.176cm;"
+
 
−
|| Slide:
+
Let us summarise.
 +
|-  
 +
|| '''Slide 6'''
  
 
'''Assignment''':
 
'''Assignment''':
−
* <div style="margin-left:1.27cm;margin-right:0cm;">Open a new blank project</div>
+
* Open a new blank project
−
* <div style="margin-left:1.27cm;margin-right:0cm;">Display the numbers 1 to 5 sequentially on the LED matrix</div>
+
* Display the numbers 1 to 5 sequentially on the LED matrix
−
* <div style="margin-left:1.27cm;margin-right:0cm;">Set a delay of 1 second between each number</div>
+
* Set a delay of 1 second between each number
 +
 
  
 +
|| As an assignment, please do the following.
  
−
|| As an assignment, please do the following
+
|-
 +
|| '''Slide 7'''
  
−
|- style="border:1pt solid #000000;padding:0.176cm;"
+
'''Thank You'''
−
|| '''Slide : Thank You'''
+
 
|| Thank you for joining.
 
|| Thank you for joining.
 
|-
 
|-
 
|}
 
|}
−
<div style="margin-left:-1.905cm;margin-right:-1.905cm;"></div>
 

Latest revision as of 11:45, 8 December 2025

Visual Cue Narration
Slide 1

Title Slide

Welcome to the Spoken Tutorial on Smiley Generator using Electroblocks.
Slide 2

Learning Objectives

In this tutorial, we will learn how to,
  1. Build a set of blocks to create a Smiley generator
  2. Check the output of experiment using the simulator
Slide 3

System requirement

To record this tutorial, I am using the following setup.
Slide 4

Required section

  • LED Matrix
  • Time
We will need the following sections for this experiment.
Show Circuit Diagram.png This is the circuit diagram for the smiley generator experiment.

Here, we will create a smiley face using an LED matrix display.

Let us open the ElectroBlocks website in the Chrome browser.
Click on New/Blank file icon. Let us open a new blank project.
Click on the Add-ons section

Click on the Led Matrix option.

Select the Led Matrix setup and drag this block in the working area.

Only narration

Point towards Data pin


Point towards CLK pin and CS pin

Click on the Add-ons section and click on the Led Matrix option.

Select the Led Matrix setup block and drag this block to the working area.

By default, the Data pin of the Led Matrix is connected to the pin 10 of the arduino.

The CLK Pin is connected to pin 12 and CS pin is connected to pin 11 of the arduino.

Click on the Led Matrix option.

Select the Led Matrix Draw block and

Place this Led matrix draw block inside the loop block.

Again Click on the Led Matrix.

Select the Led Matrix Draw block and place this block inside the loop block.

Point to Led matrix draw block

Point to checkboxes.

Point to checkblocks

Select the smiley face checkboxes.

Point to simulation window

This is an 8x8 LED matrix.

In the LED matrix draw block, you will find 64 checkboxes.

Each checkbox controls an individual LED.

Click on the checkboxes in the LED matrix block to turn ON the LEDs.

Select the checkboxes as shown.

In the simulation window, you will see a smiley face displayed on the LED matrix.

Only narration

Only narration

Click on the Time section.

Drag and drop the Wait block for 0.2 second in the working area.

Place this block below the Led Matrix Draw block.

Change the time to 1 seconds in the block.

Now we have to make sure that the LEDs remain ON for a certain time.

For this, we must add a wait block.

Click on the Time section.

Drag and drop the Wait for 0.2 second block and place it below the Led Matrix Draw block.

Change the time to 1 second in the block.

Only narration

Right click on the Led Matrix Draw block and select the duplicate option.

Only narration

Place this block below the wait for 1 second block.

We will turn OFF some LEDs to create an interactive smiley.

Right click on the Led Matrix Draw block and select the Duplicate option.

This action creates an identical block in the working area.

Place this block below the wait for 1 second block.

Let us uncheck a few of the check boxes to create an interactive smiley.

Only narration

Only narration.

Right click on the wait for 1 second block and select the duplicate option.

Place this block below the Led Matrix Draw block.

Now we have to make sure that the LEDs remain turned OFF for a certain time.

For this, we will add a wait block.

Right click on the wait for 1 second block and select the Suplicate option.

Place this block below the Led Matrix Draw block.

Click on the Code icon to view the auto-generated Arduino code for the experiment.

Highlight the code on right side

Click on the Code icon to view the automatically generated Arduino code.

The code includes self-explanatory comments for better understanding.

Let us see the output using the simulator.
Click on Home icon on the tool bar and

click on the Play button.

Click on the Home icon and press the Play button to start the simulation.
Point to simulation window.

Only narration.

A smiley face pattern is displayed on the LED matrix.

The first two LEDs toggling their state after every 1 second.

Narration only The XML file of this experiment is provided in the code files for your reference.
Slide 5

Summary

In this tutorial, we learnt about,

  1. Build a set of blocks to create a Smiley generator
  2. To check the output of experiment using simulator
This brings us to the end of this tutorial.

Let us summarise.

Slide 6

Assignment:

  • Open a new blank project
  • Display the numbers 1 to 5 sequentially on the LED matrix
  • Set a delay of 1 second between each number


As an assignment, please do the following.
Slide 7

Thank You

Thank you for joining.

Contributors and Content Editors

Madhurig, Nirmala Venkat

Retrieved from "https://script.spoken-tutorial.org/index.php?title=ElectroBlocks/C2/Smiley-Generator/English&oldid=57276"