View source for ElectroBlocks/C2/Smiley-Generator/English

{| border="1"
|-
|| '''Visual Cue'''
|| '''Narration'''
|-
|| '''Slide 1'''
'''Title Slide'''
|| Welcome to the '''Spoken Tutorial''' on '''Smiley Generator''' using '''Electroblocks'''.
|- style="border:1pt solid #000000;padding:0.176cm;"
|| '''Slide 2:'''

'''Learning Objectives'''
|| 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>
# <div style="margin-left:1.27cm;margin-right:0cm;">Check the output of experiment using the simulator</div>

|- style="border:1pt solid #000000;padding:0.176cm;"
|| '''Slide 3:'''

'''System requirement'''
|| To record this tutorial, I am using the following setup.
|- style="border:1pt solid #000000;padding:0.176cm;"
|| '''Slide:5'''

Required section
* <div style="margin-left:1.27cm;margin-right:0cm;">LED Matrix</div>
* <div style="margin-left:1.27cm;margin-right:0cm;">Time</div>

|| We will need the following sections for this experiment.
|- style="border:1pt solid #000000;padding:0.176cm;"
|| 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.
|- style="border:1pt solid #000000;padding:0.176cm;"
|| 
|| Let us open the '''ElectroBlocks''' website in the Chrome browser.
|- style="border:1pt solid #000000;padding:0.176cm;"
|| 
|| 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>

<span style="color:#212121;">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'''</span><span style="color:#212121;"> and drag this block in the working area. </span>

<div style="color:#212121;">Only narration</div>

<span style="color:#212121;">Point towards </span><span style="color:#212121;">'''Data'''</span><span style="color:#212121;"> pin</span>

<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>

<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>

<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>
|-
|- 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>

<span style="color:#212121;">Select the</span><span style="color:#212121;">''' Led Matrix Draw'''</span><span style="color:#212121;"> block and </span>

<span style="color:#212121;">Place this</span><span style="color:#212121;">''' Led matrix draw '''</span>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>

<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.
|- 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>

<div style="color:#212121;">Point to checkboxes.</div>

<div style="color:#212121;">Point to checkblocks</div>

<div style="color:#212121;"></div>

<div style="color:#212121;">Select the smiley face checkboxes.</div>

<div style="color:#212121;">Point to simulation window</div>

|| <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>

<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>

<div style="color:#212121;">Each checkbox controls an individual LED.</div>

<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>

<div style="color:#212121;">Select the checkboxes as shown.</div>

<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>
|- style="border:1pt solid #000000;padding:0.176cm;"
|| <div style="color:#212121;">Only narration </div>

<div style="color:#212121;">Only narration </div>

<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.

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.
|- style="border:1pt solid #000000;padding:0.176cm;"
|| <div style="color:#212121;">Only narration</div>

<div style="color:#212121;">Right click on the Led Matrix Draw block and select the duplicate option.</div>

<div style="color:#212121;">Only narration</div>

<span style="color:#212121;">Place this block below the </span>'''wait for 1 second '''<span style="color:#212121;">block.</span>
|| 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 checkboxes to create an interactive smiley.
|- style="border:1pt solid #000000;padding:0.176cm;"
|| <div style="color:#212121;">Only narration</div>

<div style="color:#212121;">Only narration.</div>

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 '''duplicate''' option.

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.

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.
|- style="border:1pt solid #000000;padding:0.176cm;"
|| 
|| 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 the '''Home''' icon and press the '''Play button''' to start the simulation.
|- style="border:1pt solid #000000;padding:0.176cm;"
|| 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.
|- style="border:1pt solid #000000;padding:0.176cm;"
|| Narration only
|| The '''XML '''file of this experiment is provided in the code files for your reference.
|- style="border:1pt solid #000000;padding:0.176cm;"
|| Slide:

'''Summary'''

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>
# <div style="margin-left:1.27cm;margin-right:0cm;">To check the output of experiment using simulator</div>

|| This brings us to the end of this tutorial. Let us summarise.
|- style="border:1pt solid #000000;padding:0.176cm;"
|| Slide:

'''Assignment''':
* <div style="margin-left:1.27cm;margin-right:0cm;">Open a new blank project</div>
* <div style="margin-left:1.27cm;margin-right:0cm;">Display the numbers 1 to 5 sequentially on the LED matrix</div>
* <div style="margin-left:1.27cm;margin-right:0cm;">Set a delay of 1 second between each number</div>


|| As an assignment, please do the following

|- style="border:1pt solid #000000;padding:0.176cm;"
|| '''Slide : Thank You'''
|| Thank you for joining.
|-
|}
<div style="margin-left:-1.905cm;margin-right:-1.905cm;"></div>