View source for ElectroBlocks/C2/Counter-with-Push-Button/English

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

'''Learning Objectives'''

|| In this tutorial, we will learn about
* <div style="margin-left:1.27cm;margin-right:0cm;">Counter function in Electroblocks</div>
* <div style="margin-left:1.27cm;margin-right:0cm;">Check the output of the experiment using the simulator</div>

|- style="border:1pt solid #000000;padding:0.176cm;"
|| <div style="color:#000000;">'''Slide 3:'''</div>

<div style="color:#000000;">'''System requirement'''</div>
* <div style="color:#000000;margin-left:1.27cm;margin-right:0cm;">'''Ubuntu Linux OS version 22.04 '''</div>
* <div style="color:#000000;margin-left:1.27cm;margin-right:0cm;">'''Google Chrome browser'''</div>

<div style="color:#000000;">A working internet connection to use Electroblocks</div>
|| <div style="color:#000000;">To record this tutorial, I am using the following setup.</div>

|- style="border:1pt solid #000000;padding:0.176cm;"
|| '''Show Circuit Diagram.png'''

Point to the push button in the circuit diagram
|| This is the circuit diagram of '''Counter with Push button.'''
We will see how it works.

When the button is pressed, the count is shown on the LCD display.

Let us build this circuit using''' ElectroBlocks'''.
|- style="border:1pt solid #000000;padding:0.176cm;"
|| Slide: Required blocks 
* <div style="color:#000000;margin-left:1.27cm;margin-right:0cm;">Button</div>
* <div style="color:#000000;margin-left:1.27cm;margin-right:0cm;">Logic</div>
* <div style="color:#000000;margin-left:1.27cm;margin-right:0cm;">LCD screen</div>
* <div style="color:#000000;margin-left:1.27cm;margin-right:0cm;">Code </div>
* <div style="color:#000000;margin-left:1.27cm;margin-right:0cm;">Variable</div>
* <div style="color:#000000;margin-left:1.27cm;margin-right:0cm;">Math</div>
* <div style="color:#000000;margin-left:1.27cm;margin-right:0cm;">Time</div>
* <div style="color:#000000;margin-left:1.27cm;margin-right:0cm;">Text</div>

|| <div style="color:#000000;">We need the various blocks from the below sections for this experiment.</div>

<div style="color:#000000;"></div>
|- style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding:0.176cm;"
|| Type 

'''https://electroblocks.org/'''
|| Let us open the '''Electroblocks''' website in the Chrome browser.
|- style="border-top:none;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding:0.176cm;"
|| Click on the New''' File/Blank''' File option.
|| Click on the '''New File/Blank''' '''File '''option.
|- style="border:1pt solid #000000;padding:0.176cm;"
|| 
|| 
|- style="border:1pt solid #000000;padding:0.176cm;"
|| Click on the code section from the left side menu.
|| Click on the''' Code''' section.

Drag and drop the '''Setup (runs once)''' '''block''' in the working area.
|- style="border:1pt solid #000000;padding:0.176cm;"
|| Narration only 

Click on the variable and select the '''Create Number Variable''' option.

Point to pop up window.

Write name Counter and press enter.

Point to counter block in '''Setup (runs once)'''.

Change the number to 0.

Point to counter 

|| We will create a '''variable''' to work as a counter.

Click on the '''Variable''' section and select the '''Create Number Variable''' option.

In the pop-up window, give the name as “'''Counter'''”and click the '''ok''' button.

Notice a variable block named as '''Counter''' is created in the '''Setup.'''

Change the counter value to 0.

This counter counts the number of times the push button is pressed.
|- style="border:1pt solid #000000;padding:0.176cm;"
|| Click on the Logic section from the left side menu.
|| Click on the '''Logic section''' and drag '''If then block''' and place it in the '''Loop runs '''block.
|- style="border:1pt solid #000000;padding:0.176cm;"
|| Add button setup block 
|| Click on the '''Sensors''' section and click the '''Button''' option.

Drag the '''Button setup''' block in the working area.

Again click on the '''Button '''section.

Drag and place the''' Button is pressed''' block in the '''If section '''of the '''If then block.'''
|- style="border:1pt solid #000000;padding:0.176cm;"
|| Click on the variables option and select the number count equal to 10 block.

Place this block in the then section of the if then block.

|| Click on the '''variables '''and select the '''number counter equal to 10 '''block.

Place this block in the '''then '''section of the '''if then''' block.

Here the default value of the '''variable''' is 10.

Delete this number block. 

Later we will add an '''arithmetic''' block here.
|- style="border:1pt solid #000000;padding:0.176cm;"
|| Click on the Math option.

Drag and place the third block in the number count block.

Delete the first number block from the arithmetic math block. 
|| Click on the '''Math''' section.

Drag and place the third block which is the '''arithmetic''' block in the '''number counter''' block.

Delete the first number block from the arithmetic block.
|- style="border:1pt solid #000000;padding:0.176cm;"
|| Click on the '''Variables''' option.

Drag and drop the '''count''' block in the first section of the '''arithmetic math''' block.

Point to block
|| Click on the '''Variables''' section..

Drag and drop the '''counter''' block in the first section of the '''arithmetic '''block.

The overall setup of this block is designed to increment the variable value by 1.
|- style="border:1pt solid #000000;padding:0.176cm;"
|| Only Narration.

Click on '''Add-ons.'''

A new list appears.

|| Let us add an '''LCD screen '''to the circuit.

Click on the '''Add-ons''' section and then click on the '''LCD screen'''.

Select the''' Setup LCD block '''and drag it to the working area.

This '''block''' configures the '''LCD''' Screen in the circuit.
|- style="border:1pt solid #000000;padding:0.176cm;"
|| 

Place this block in the '''then''' section of the '''If then '''block.

Point to if then block.
|| Click on the '''LCD screen''' option.

Drag and place the '''Print Delay Clear''' block below the '''if then''' block.

This block allows you to display words or numbers on any row of the '''LCD'''.
|- style="border:1pt solid #000000;padding:0.176cm;"
|| Delete both the '''Print on row 1''' and '''Print on row 2''' text box.

|| Delete both the '''Print on row 1''' and '''Print on row 2''' text box.

Click on the '''Text''' section.

Select''' Create text with''' block and place this block in the''' Print on row 1.'''
|- style="border:1pt solid #000000;padding:0.176cm;"
|| click on the '''Text''' section.

Drag and place the '''Text''' block in the first section of '''Create text with''' block.

Click the text block and type “'''Counter ='''”
|| Again click on the '''Text''' section.

Drag and place the '''Text''' block in the first section of '''Create text with''' block.

Click the text block and type “'''Counter ='''”
|- style="border:1pt solid #000000;padding:0.176cm;"
|| Click on the '''Variables''' and select the '''Counter''' block.

Place this block in the second section of '''Create text with '''block'''.'''

Change the delay to 1 second.
|| Click on the '''Variables '''section and select the '''Counter''' block.

Place this block in the second section of '''Create text with '''block'''.'''

Change the delay to 1 second.
|- style="border:1pt solid #000000;padding:0.176cm;"
|| Click on the '''Sensors''' menu and click on the '''Button'''.

Drag and drop the '''button is released block '''below the '''Print Delay Clear''' block.
|| Click on the '''Sensors''' section and click on the '''Button'''.

Drag and drop the '''button is released block '''below the '''Print Delay Clear''' block.
|- style="border:1pt solid #000000;padding:0.176cm;"
|| Click the '''Time''' section.

Select the '''wait for 0.2 second''' block.

Place this block below the '''Button is released '''block.

Change the time in the '''wait block''' to 1 second.
|| Click on the '''Time''' section.

Select the '''wait for 0.2 second''' block.

Place this block below the '''Button is released '''block.

Change the time in the '''wait block''' to 1 second.

We have created all the blocks required for this experiment.
|- style="border:1pt solid #000000;padding:0.176cm;"
|| Click on the code icon

Click on the home icon and press play button
|| Now, we will see the '''arduino''' '''code''' generated by '''electroblocks'''.

Click on the '''Code''' '''icon'''.

The code includes self-explanatory''' comments''' for better understanding.

Click on the '''Home''' icon and press the '''Play button''' to start the simulation.
|- style="border:1pt solid #000000;padding:0.176cm;"
|| Simulation Output

Pointing the counter and in the simulation window
|| Notice a counter on the top right corner of the simulation window.

For the first button press, the counter is increased to 1.

The LCD screen shows the counter = 1.

When the push button is pressed the second time, the counter is increased to 2.

For each button press we can see an increment in the counter on the LCD screen.
|- style="border:1pt solid #000000;padding:0.176cm;"
|| In this tutorial, we learnt about:
* <div style="margin-left:1.27cm;margin-right:0cm;">Counter function in Electroblocks</div>
* <div style="margin-left:1.27cm;margin-right:0cm;">Check the output of the experiment using the simulator</div>

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

'''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;">Add an '''LED''' and connect it to '''pin 9'''</div>
* <div style="margin-left:1.27cm;margin-right:0cm;">When the push button is pressed the first time, the LED Turn ON</div>
* <div style="margin-left:1.27cm;margin-right:0cm;">When the push button is pressed the second time, the LED Turn OFF</div>

|| As an assignment, please do the following
|- style="border:1pt solid #000000;padding:0.176cm;"
|| '''Slide 7:'''

'''Thank You'''
|| Thank you for joining.
|-
|}